fix: Dashboard hangs when initial filters cannot be loaded (#29456)

apache · Jul 3, 2024 · 35da6ac · 35da6ac
1 parent d5c0506
commit 35da6ac
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
@@ -45,7 +45,7 @@ const StyledTitle = styled.span`
 interface BasicErrorAlertProps {
   title: string;
   body: string;
-  level: ErrorLevel;
+  level?: ErrorLevel;
 }
 
 export default function BasicErrorAlert({

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -76,6 +76,7 @@ import {
   OPEN_FILTER_BAR_WIDTH,
   EMPTY_CONTAINER_Z_INDEX,
 } from 'src/dashboard/constants';
+import BasicErrorAlert from 'src/components/ErrorMessage/BasicErrorAlert';
 import { getRootLevelTabsComponent, shouldFocusTabs } from './utils';
 import DashboardContainer from './DashboardContainer';
 import { useNativeFilters } from './state';
@@ -462,6 +463,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
 
   const {
     showDashboard,
+    missingInitialFilters,
     dashboardFiltersOpen,
     toggleDashboardFiltersOpen,
     nativeFiltersEnabled,
@@ -673,7 +675,30 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
             editMode={editMode}
             marginLeft={dashboardContentMarginLeft}
           >
-            {showDashboard ? (
+            {missingInitialFilters.length > 0 ? (
+              <div
+                css={css`
+                  display: flex;
+                  flex-direction: row;
+                  align-items: center;
+                  justify-content: center;
+                  flex: 1;
+                  & div {
+                    width: 500px;
+                  }
+                `}
+              >
+                <BasicErrorAlert
+                  title={t('Unable to load dashboard')}
+                  body={t(
+                    `The following filters have the 'Select first filter value by default'
+                    option checked and could not be loaded, which is preventing the dashboard
+                    from rendering: %s`,
+                    missingInitialFilters.join(', '),
+                  )}
+                />
+              </div>
+            ) : showDashboard ? (
               <DashboardContainer topLevelTabs={topLevelTabs} />
             ) : (
               <Loading />

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts b/superset-frontend/src/dashboard/components/DashboardBuilder/state.ts
@@ -47,17 +47,14 @@ export const useNativeFilters = () => {
     filter => filter.requiredFirst,
   );
   const dataMask = useNativeFiltersDataMask();
+
+  const missingInitialFilters = requiredFirstFilter
+    .filter(({ id }) => dataMask[id]?.filterState?.value === undefined)
+    .map(({ name }) => name);
   const showDashboard =
     isInitialized ||
     !nativeFiltersEnabled ||
-    !(
-      nativeFiltersEnabled &&
-      requiredFirstFilter.length &&
-      requiredFirstFilter.find(
-        ({ id }) => dataMask[id]?.filterState?.value === undefined,
-      )
-    );
-
+    missingInitialFilters.length === 0;
   const toggleDashboardFiltersOpen = useCallback(
     (visible?: boolean) => {
       setDashboardFiltersOpen(visible ?? !dashboardFiltersOpen);
@@ -84,6 +81,7 @@ export const useNativeFilters = () => {
 
   return {
     showDashboard,
+    missingInitialFilters,
     dashboardFiltersOpen,
     toggleDashboardFiltersOpen,
     nativeFiltersEnabled,