Merge pull request #1508 from visualize-admin/fix/dashboard-layout-er…

…rors fix: Keep errors in one container
visualize-admin · May 23, 2024 · 8b2d329 · 8b2d329
2 parents 1066abd + 8dd2855
commit 8b2d329
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 60 deletions.
diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx
@@ -9,7 +9,13 @@ import {
 import { Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import Head from "next/head";
-import React, { forwardRef, useCallback, useMemo, useState } from "react";
+import React, {
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 
 import { DataSetTable } from "@/browse/datatable";
 import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
@@ -346,7 +352,7 @@ const SingleURLsPreview = (props: SingleURLsPreviewProps) => {
 
 type ChartPreviewInnerProps = ChartPreviewProps & {
   chartKey?: string | null;
-  actionElementSlot?: React.ReactNode;
+  actionElementSlot?: ReactNode;
   disableMetadataPanel?: boolean;
   children?: React.ReactNode;
 };
@@ -403,20 +409,21 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => {
     <Box className={chartClasses.root}>
       {props.children}
       <ChartErrorBoundary resetKeys={[state]}>
-        {/* FIXME: adapt to design */}
-        {metadata?.dataCubesMetadata.some(
-          (d) => d.publicationStatus === DataCubePublicationStatus.Draft
-        ) && (
-          <Box sx={{ mb: 4 }}>
-            <HintYellow iconName="datasetError" iconSize={64}>
-              <Trans id="dataset.publicationStatus.draft.warning">
-                Careful, this dataset is only a draft.
-                <br />
-                <strong>Don&apos;t use for reporting!</strong>
-              </Trans>
-            </HintYellow>
-          </Box>
-        )}
+        <div>
+          {metadata?.dataCubesMetadata.some(
+            (d) => d.publicationStatus === DataCubePublicationStatus.Draft
+          ) && (
+            <Box sx={{ mb: 4 }}>
+              <HintYellow iconName="datasetError" iconSize={64}>
+                <Trans id="dataset.publicationStatus.draft.warning">
+                  Careful, this dataset is only a draft.
+                  <br />
+                  <strong>Don&apos;t use for reporting!</strong>
+                </Trans>
+              </HintYellow>
+            </Box>
+          )}
+        </div>
         {hasChartConfigs(state) && (
           <>
             <Head>

diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx
@@ -245,49 +245,51 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => {
         ref={rootRef}
       >
         <ChartErrorBoundary resetKeys={[chartConfig]}>
-          {metadata?.some(
-            (d) => d.publicationStatus === DataCubePublicationStatus.Draft
-          ) && (
-            <Box sx={{ mb: 4 }}>
-              <HintRed iconName="datasetError" iconSize={64}>
-                <Trans id="dataset.publicationStatus.draft.warning">
-                  Careful, this dataset is only a draft.
-                  <br />
-                  <strong>Don&apos;t use for reporting!</strong>
-                </Trans>
-              </HintRed>
-            </Box>
-          )}
-          {metadata?.some((d) => d.expires) && (
-            <Box sx={{ mb: 4 }}>
-              <HintRed iconName="datasetError" iconSize={64}>
-                <Trans id="dataset.publicationStatus.expires.warning">
-                  Careful, the data for this chart has expired.
-                  <br />
-                  <strong>Don&apos;t use for reporting!</strong>
-                </Trans>
-              </HintRed>
-            </Box>
-          )}
-          {!isTrustedDataSource && (
-            <Box sx={{ mb: 4 }}>
-              <HintYellow iconName="hintWarning">
-                <Trans id="data.source.notTrusted">
-                  This chart is not using a trusted data source.
-                </Trans>
-              </HintYellow>
-            </Box>
-          )}
-          {isUsingImputation(chartConfig) && (
-            <Box sx={{ mb: 4 }}>
-              <HintBlue iconName="hintWarning">
-                <Trans id="dataset.hasImputedValues">
-                  Some data in this dataset is missing and has been interpolated
-                  to fill the gaps.
-                </Trans>
-              </HintBlue>
-            </Box>
-          )}
+          <div>
+            {metadata?.some(
+              (d) => d.publicationStatus === DataCubePublicationStatus.Draft
+            ) && (
+              <Box sx={{ mb: 4 }}>
+                <HintRed iconName="datasetError" iconSize={64}>
+                  <Trans id="dataset.publicationStatus.draft.warning">
+                    Careful, this dataset is only a draft.
+                    <br />
+                    <strong>Don&apos;t use for reporting!</strong>
+                  </Trans>
+                </HintRed>
+              </Box>
+            )}
+            {metadata?.some((d) => d.expires) && (
+              <Box sx={{ mb: 4 }}>
+                <HintRed iconName="datasetError" iconSize={64}>
+                  <Trans id="dataset.publicationStatus.expires.warning">
+                    Careful, the data for this chart has expired.
+                    <br />
+                    <strong>Don&apos;t use for reporting!</strong>
+                  </Trans>
+                </HintRed>
+              </Box>
+            )}
+            {!isTrustedDataSource && (
+              <Box sx={{ mb: 4 }}>
+                <HintYellow iconName="hintWarning">
+                  <Trans id="data.source.notTrusted">
+                    This chart is not using a trusted data source.
+                  </Trans>
+                </HintYellow>
+              </Box>
+            )}
+            {isUsingImputation(chartConfig) && (
+              <Box sx={{ mb: 4 }}>
+                <HintBlue iconName="hintWarning">
+                  <Trans id="dataset.hasImputedValues">
+                    Some data in this dataset is missing and has been
+                    interpolated to fill the gaps.
+                  </Trans>
+                </HintBlue>
+              </Box>
+            )}
+          </div>
           <LoadingStateProvider>
             <InteractiveFiltersChartProvider chartConfigKey={chartConfig.key}>
               <Flex

diff --git a/app/components/chart-utils.ts b/app/components/chart-utils.ts
@@ -9,7 +9,7 @@ export const useChartStyles = makeStyles<Theme>((theme) => ({
     display: "grid",
     gridTemplateRows: "subgrid",
     /** Should stay in sync with the number of rows contained in a chart */
-    gridRow: "span 6",
+    gridRow: "span 7",
     height: "100%",
     padding: theme.spacing(6),
     backgroundColor: theme.palette.background.paper,