From deda224167875edeae76cb3a2e785442d0c1320b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Fri, 4 Oct 2024 14:35:15 +0200
Subject: [PATCH 1/3] Rename `messageError` as `errorMessage`

---
 frontend/src/components/widget/index.tsx                    | 6 +++---
 frontend/src/containers/map/content/map/modelling/index.tsx | 4 ++--
 .../sidebar/main-panel/panels/modelling/widget/index.tsx    | 4 ++--
 frontend/src/containers/map/store.ts                        | 4 ++--
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/widget/index.tsx b/frontend/src/components/widget/index.tsx
index a564a0bc..aac5122c 100644
--- a/frontend/src/components/widget/index.tsx
+++ b/frontend/src/components/widget/index.tsx
@@ -27,7 +27,7 @@ type WidgetProps = {
   noData?: boolean;
   loading?: boolean;
   error?: boolean;
-  messageError?: ComponentProps<typeof NoData>['message'];
+  errorMessage?: ComponentProps<typeof NoData>['message'];
   info?: ComponentProps<typeof TooltipButton>['text'];
   sources?: ComponentProps<typeof TooltipButton>['sources'];
 };
@@ -45,7 +45,7 @@ const Widget: FCWithMessages<PropsWithChildren<WidgetProps>> = ({
   noData = false,
   loading = false,
   error = false,
-  messageError = undefined,
+  errorMessage = undefined,
   info,
   sources,
   children,
@@ -74,7 +74,7 @@ const Widget: FCWithMessages<PropsWithChildren<WidgetProps>> = ({
         )}
       </div>
       {loading && <Loading />}
-      {showNoData && <NoData error={error} message={messageError} />}
+      {showNoData && <NoData error={error} message={errorMessage} />}
       {!loading && !showNoData && <div>{children}</div>}
     </div>
   );
diff --git a/frontend/src/containers/map/content/map/modelling/index.tsx b/frontend/src/containers/map/content/map/modelling/index.tsx
index 68a2541a..7a6e1826 100644
--- a/frontend/src/containers/map/content/map/modelling/index.tsx
+++ b/frontend/src/containers/map/content/map/modelling/index.tsx
@@ -37,13 +37,13 @@ const Modelling = () => {
           setModellingState((prevState) => ({
             ...prevState,
             status: 'error',
-            messageError: req.response?.status === 400 ? req.response?.data.error : undefined,
+            errorMessage: req.response?.status === 400 ? req.response?.data.error : undefined,
           }));
         } else {
           setModellingState((prevState) => ({
             ...prevState,
             status: 'error',
-            messageError: undefined,
+            errorMessage: undefined,
           }));
         }
       },
diff --git a/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx b/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx
index cccc52e9..94660ed5 100644
--- a/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx
+++ b/frontend/src/containers/map/sidebar/main-panel/panels/modelling/widget/index.tsx
@@ -78,7 +78,7 @@ const ModellingWidget: FCWithMessages = () => {
   const {
     status: modellingStatus,
     data: modellingData,
-    messageError,
+    errorMessage,
   } = useAtomValue(modellingAtom);
 
   // Tooltips with mapping
@@ -296,7 +296,7 @@ const ModellingWidget: FCWithMessages = () => {
       noData={!nationalLevelContributions}
       loading={loading}
       error={error}
-      messageError={messageError}
+      errorMessage={errorMessage}
     >
       <div className="flex flex-col">
         <div className={cn(DEFAULT_ENTRY_CLASSNAMES, 'flex justify-between border-t-0')}>
diff --git a/frontend/src/containers/map/store.ts b/frontend/src/containers/map/store.ts
index 7773b832..32dfc20f 100644
--- a/frontend/src/containers/map/store.ts
+++ b/frontend/src/containers/map/store.ts
@@ -33,10 +33,10 @@ export const modellingAtom = atomWithReset<{
   active: boolean;
   status: 'idle' | 'running' | 'success' | 'error';
   data: ModellingData;
-  messageError?: string;
+  errorMessage?: string;
 }>({
   active: false,
   status: 'idle',
   data: null,
-  messageError: undefined,
+  errorMessage: undefined,
 });

From abf89cd3af5660a8eda6bdac688c4e1c53770ccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Fri, 4 Oct 2024 14:41:22 +0200
Subject: [PATCH 2/3] Allow custom error/non-error messages on widgets

---
 frontend/src/components/widget/index.tsx         |  7 +++++--
 frontend/src/components/widget/no-data/index.tsx | 11 +++++------
 frontend/translations/en.json                    |  3 ++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/widget/index.tsx b/frontend/src/components/widget/index.tsx
index aac5122c..21df360b 100644
--- a/frontend/src/components/widget/index.tsx
+++ b/frontend/src/components/widget/index.tsx
@@ -25,6 +25,7 @@ type WidgetProps = {
   title?: string;
   lastUpdated?: string;
   noData?: boolean;
+  noDataMessage?: ComponentProps<typeof NoData>['message'];
   loading?: boolean;
   error?: boolean;
   errorMessage?: ComponentProps<typeof NoData>['message'];
@@ -43,6 +44,7 @@ const Widget: FCWithMessages<PropsWithChildren<WidgetProps>> = ({
   title,
   lastUpdated,
   noData = false,
+  noDataMessage = undefined,
   loading = false,
   error = false,
   errorMessage = undefined,
@@ -74,8 +76,9 @@ const Widget: FCWithMessages<PropsWithChildren<WidgetProps>> = ({
         )}
       </div>
       {loading && <Loading />}
-      {showNoData && <NoData error={error} message={errorMessage} />}
-      {!loading && !showNoData && <div>{children}</div>}
+      {!loading && error && <NoData error={error} message={errorMessage} />}
+      {!loading && !error && noData && <NoData error={error} message={noDataMessage} />}
+      {!loading && !error && !noData && <div>{children}</div>}
     </div>
   );
 };
diff --git a/frontend/src/components/widget/no-data/index.tsx b/frontend/src/components/widget/no-data/index.tsx
index 088e7bbb..6f674153 100644
--- a/frontend/src/components/widget/no-data/index.tsx
+++ b/frontend/src/components/widget/no-data/index.tsx
@@ -7,17 +7,16 @@ type NoDataProps = {
   message?: string;
 };
 
-const NoData: FCWithMessages<NoDataProps> = ({
-  error = false,
-  message = 'The current widget is not visible due to an error.',
-}) => {
+const NoData: FCWithMessages<NoDataProps> = ({ error = false, message }) => {
   const t = useTranslations('components.widget');
 
   return (
     <div className="flex flex-col gap-8 py-12 px-14 text-center md:px-10 md:py-14">
       <p className="text-xs">
-        {error && message}
-        {!error && t('no-data-available')}
+        {error && !message && t('not-visible-due-to-error')}
+        {error && !!message && message}
+        {!error && !message && t('no-data-available')}
+        {!error && !!message && message}
       </p>
     </div>
   );
diff --git a/frontend/translations/en.json b/frontend/translations/en.json
index 77cd595f..b85948c8 100644
--- a/frontend/translations/en.json
+++ b/frontend/translations/en.json
@@ -334,7 +334,8 @@
     "widget": {
       "updated-on": "Updated on {date}",
       "loading-data": "Loading data...",
-      "no-data-available": "No data available"
+      "no-data-available": "No data available",
+      "not-visible-due-to-error": "The current widget is not visible due to an error"
     },
     "chart-conservation": {
       "30x30-target": "30x30 Target",

From f596eda13507ebba3437aac49a3652a0a78ed14c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Fri, 4 Oct 2024 14:43:14 +0200
Subject: [PATCH 3/3] Change no data message on protection levels widget

---
 .../panels/details/widgets/protection-types/index.tsx          | 1 +
 frontend/translations/en.json                                  | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx b/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx
index c4bd363a..a5f393a5 100644
--- a/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx
+++ b/frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/protection-types/index.tsx
@@ -116,6 +116,7 @@ const ProtectionTypesWidget: FCWithMessages<ProtectionTypesWidgetProps> = ({ loc
       title={t('marine-conservation-protection-levels')}
       lastUpdated={lastUpdated}
       noData={noData}
+      noDataMessage={t('not-assessed')}
       loading={loading}
     >
       {widgetChartData.map((chartData) => (
diff --git a/frontend/translations/en.json b/frontend/translations/en.json
index b85948c8..47a70b66 100644
--- a/frontend/translations/en.json
+++ b/frontend/translations/en.json
@@ -228,7 +228,8 @@
       "terrestrial-protected-area": "{protectedArea} km² out of {totalArea} km²",
       "explore-terrestrial-conservation": "Explore Terrestrial Conservation",
       "explore-marine-conservation": "Explore Marine Conservation",
-      "terrestrial-existing-conservation": "Existing terrestrial conservation coverage"
+      "terrestrial-existing-conservation": "Existing terrestrial conservation coverage",
+      "not-assessed": "Not assessed"
     },
     "map-sidebar-layers-panel": {
       "layers": "Layers",