diff --git a/frontend/src/metabase/components/EmptyState.jsx b/frontend/src/metabase/components/EmptyState.jsx index 783eb8b4529b22ec429fb762259fe26b5f9c6acf..a97d558482b3dcb8aa741b4ea929ba483e4852bf 100644 --- a/frontend/src/metabase/components/EmptyState.jsx +++ b/frontend/src/metabase/components/EmptyState.jsx @@ -29,7 +29,18 @@ const LegacyImage = props => className={props.imageClassName} /> ) : null; - +/** + * @typedef {Record<string, any>} EmptyStateProps + * @property {import("react").ReactNode} message + * @property {import("react").ReactNode} [title] + * @property {import("react").ReactNode} [action] + * @property {import("react-router").IndexLinkProps["to"]} [link] + * @property {import("react").ReactNode} [illustrationElement] + * @property {function} [onActionClick] + * + * @param {EmptyStateProps} props + * @returns {import("react").ReactElement} + */ const EmptyState = ({ title, message, diff --git a/frontend/src/metabase/home/homepage/components/Homepage/Homepage.tsx b/frontend/src/metabase/home/homepage/components/Homepage/Homepage.tsx index 909d90eefe4f13f076207c31d57c2fb1bebd7d28..077c21cbcb00d4ada181a679f744221971053d5c 100644 --- a/frontend/src/metabase/home/homepage/components/Homepage/Homepage.tsx +++ b/frontend/src/metabase/home/homepage/components/Homepage/Homepage.tsx @@ -1,5 +1,8 @@ import React, { Fragment } from "react"; +import { t } from "ttag"; import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper"; +import EmptyState from "metabase/components/EmptyState"; +import ErrorDetails from "metabase/components/ErrorDetails"; import CollectionSection from "../CollectionSection"; import DatabaseSection from "../DatabaseSection"; import GreetingSection from "../GreetingSection"; @@ -31,6 +34,7 @@ export interface HomepageProps { onCollectionClick?: () => void; onDashboardClick?: (dashboard: Dashboard) => void; onDatabaseClick?: (database: Database) => void; + allError?: boolean; } const Homepage = ({ @@ -49,6 +53,7 @@ const Homepage = ({ onCollectionClick, onDashboardClick, onDatabaseClick, + allError, }: HomepageProps): JSX.Element => { return ( <HomepageRoot> @@ -87,6 +92,14 @@ const Homepage = ({ onHideSyncingModal={onHideSyncingModal} /> </Fragment> + ) : allError ? ( + <EmptyState + title={t`Something's gone wrong`} + message={t`We've run into an error. You can try refreshing the page, or just go back.`} + illustrationElement={ + <div className="QueryError-image QueryError-image--serverError" /> + } + /> ) : ( <LoadingAndErrorWrapper loading /> )}