diff --git a/frontend/src/components/widget/index.tsx b/frontend/src/components/widget/index.tsx index a564a0bc..21df360b 100644 --- a/frontend/src/components/widget/index.tsx +++ b/frontend/src/components/widget/index.tsx @@ -25,9 +25,10 @@ type WidgetProps = { title?: string; lastUpdated?: string; noData?: boolean; + noDataMessage?: ComponentProps['message']; loading?: boolean; error?: boolean; - messageError?: ComponentProps['message']; + errorMessage?: ComponentProps['message']; info?: ComponentProps['text']; sources?: ComponentProps['sources']; }; @@ -43,9 +44,10 @@ const Widget: FCWithMessages> = ({ title, lastUpdated, noData = false, + noDataMessage = undefined, loading = false, error = false, - messageError = undefined, + errorMessage = undefined, info, sources, children, @@ -74,8 +76,9 @@ const Widget: FCWithMessages> = ({ )} {loading && } - {showNoData && } - {!loading && !showNoData &&
{children}
} + {!loading && error && } + {!loading && !error && noData && } + {!loading && !error && !noData &&
{children}
} ); }; 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 = ({ - error = false, - message = 'The current widget is not visible due to an error.', -}) => { +const NoData: FCWithMessages = ({ error = false, message }) => { const t = useTranslations('components.widget'); return (

- {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}

); 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/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 = ({ loc title={t('marine-conservation-protection-levels')} lastUpdated={lastUpdated} noData={noData} + noDataMessage={t('not-assessed')} loading={loading} > {widgetChartData.map((chartData) => ( 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} >
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, }); diff --git a/frontend/translations/en.json b/frontend/translations/en.json index 77cd595f..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", @@ -334,7 +335,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",