🤖 backported "Optimize initial dashboard load"

e2e/test/scenarios/dashboard-filters/dashboard-filters-nested.cy.spec.js

@@ -78,8 +78,11 @@ describe("scenarios > dashboard > filters > nested questions", () => {
     // Add multiple values (metabase#18113)
     filterWidget().click();
     popover().within(() => {
-      cy.findByText("Gizmo").click();
-      cy.findByText("Gadget").click();
+      cy.findByPlaceholderText("Enter some text")
+        .type("Gizmo")
+        .blur()
+        .type("Gadget")
+        .blur();
     });
 
     cy.button("Add filter").click();

frontend/src/metabase-lib/v1/parameters/utils/targets.ts

@@ -45,7 +45,6 @@ export function getParameterTargetField(
   }
 
   const fieldRef = target[1];
-  const query = question.query();
   const metadata = question.metadata();
 
   // native queries
@@ -60,8 +59,12 @@ export function getParameterTargetField(
 
   if (isConcreteFieldReference(fieldRef)) {
     const fieldId = fieldRef[1];
-    const tableId = Lib.sourceTableOrCardId(query);
-    return metadata.field(fieldId, tableId) ?? metadata.field(fieldId);
+    const resultMetadata = question.getResultMetadata();
+    const fieldMetadata = resultMetadata.find(field => field.id === fieldId);
+    return (
+      metadata.field(fieldId, fieldMetadata?.table_id) ??
+      metadata.field(fieldId)
+    );
   }
 
   return null;

frontend/src/metabase/actions/components/ActionViz/Action.tsx

@@ -8,7 +8,10 @@ import {
   executeRowAction,
   reloadDashboardCards,
 } from "metabase/dashboard/actions";
-import { getEditingDashcardId } from "metabase/dashboard/selectors";
+import {
+  getEditingDashcardId,
+  getParameterValues,
+} from "metabase/dashboard/selectors";
 import { getActionIsEnabledInDatabase } from "metabase/dashboard/utils";
 import type { VisualizationProps } from "metabase/visualizations/types";
 import type {
@@ -139,6 +142,7 @@ const ConnectedActionComponent = connect()(ActionComponent);
 
 function mapStateToProps(state: State, props: ActionProps) {
   return {
+    parameterValues: getParameterValues(state),
     isEditingDashcard: getEditingDashcardId(state) === props.dashcard.id,
   };
 }

frontend/src/metabase/actions/components/ActionViz/Action.unit.spec.tsx

@@ -33,6 +33,7 @@ import {
   createMockStructuredDatasetQuery,
   createMockDatabase,
 } from "metabase-types/api/mocks";
+import { createMockDashboardState } from "metabase-types/store/mocks";
 
 import type { ActionProps } from "./Action";
 import Action from "./Action";
@@ -156,6 +157,9 @@ async function setup({
         entities: createMockEntitiesState({
           databases: [database],
         }),
+        dashboard: createMockDashboardState({
+          parameterValues,
+        }),
       },
     },
   );

frontend/src/metabase/components/FieldValuesWidget/FieldValuesWidget.tsx

@@ -498,6 +498,7 @@ export function FieldValuesWidgetInner({
             }}
             onInputChange={onInputChange}
             parseFreeformValue={parseFreeformValue}
+            updateOnInputBlur
           />
         )}
       </div>

frontend/src/metabase/dashboard/actions/data-fetching-typed.ts

@@ -4,10 +4,8 @@ import { loadMetadataForDashboard } from "metabase/dashboard/actions/metadata";
 import {
   getDashboardById,
   getDashCardById,
-  getInitialSelectedTabId,
   getParameterValues,
   getQuestions,
-  getSelectedTabId,
 } from "metabase/dashboard/selectors";
 import {
   expandInlineDashboard,
@@ -127,17 +125,7 @@ export const fetchDashboard = createAsyncThunk(
       fetchDashboardCancellation = null;
 
       if (dashboardType === "normal" || dashboardType === "transient") {
-        const selectedTabId =
-          getSelectedTabId(getState()) ?? getInitialSelectedTabId(result);
-
-        const cards =
-          selectedTabId == null
-            ? result.dashcards
-            : result.dashcards.filter(
-                (c: DashboardCard) => c.dashboard_tab_id === selectedTabId,
-              );
-
-        await dispatch(loadMetadataForDashboard(cards));
+        await dispatch(loadMetadataForDashboard(result.dashcards));
       }
 
       const isUsingCachedResults = entities != null;

frontend/src/metabase/dashboard/actions/data-fetching.unit.spec.js

@@ -97,7 +97,7 @@ describe("fetchDashboard", () => {
     ).toHaveLength(1);
   });
 
-  it("should fetch metadata for cards on the first tab when there are tabs", async () => {
+  it("should fetch metadata for all cards when there are tabs", async () => {
     const dashboard = createMockDashboard({
       dashcards: [
         createMockDashboardCard({
@@ -147,7 +147,7 @@ describe("fetchDashboard", () => {
     ).toHaveLength(1);
     expect(
       fetchMock.calls(`path:/api/table/${ORDERS_ID}/query_metadata`),
-    ).toHaveLength(0);
+    ).toHaveLength(1);
   });
 
   it("should cancel previous dashboard fetch when a new one is initiated (metabase#35959)", async () => {

frontend/src/metabase/dashboard/actions/metadata.js

@@ -1,6 +1,6 @@
 import Questions from "metabase/entities/questions";
 import { getLinkTargets } from "metabase/lib/click-behavior";
-import { loadMetadataForCard } from "metabase/questions/actions";
+import { loadMetadataForCards } from "metabase/questions/actions";
 
 import { isVirtualDashCard } from "../utils";
 
@@ -10,17 +10,15 @@ export const loadMetadataForDashboard = dashCards => async dispatch => {
     .flatMap(dc => [dc.card].concat(dc.series || []));
 
   await Promise.all([
-    dispatch(loadMetadataForCards(cards)),
+    dispatch(loadMetadataForAvailableCards(cards)),
     dispatch(loadMetadataForLinkedTargets(dashCards)),
   ]);
 };
 
-const loadMetadataForCards = cards => (dispatch, getState) => {
-  return Promise.all(
-    cards
-      .filter(card => card.dataset_query) // exclude queries without perms
-      .map(card => dispatch(loadMetadataForCard(card))),
-  );
+const loadMetadataForAvailableCards = cards => dispatch => {
+  // exclude queries without perms
+  const availableCards = cards.filter(card => card.dataset_query);
+  return dispatch(loadMetadataForCards(availableCards));
 };
 
 const loadMetadataForLinkedTargets =
@@ -43,5 +41,5 @@ const loadMetadataForLinkedTargets =
       )
       .filter(card => card != null);
 
-    await dispatch(loadMetadataForCards(cards));
+    await dispatch(loadMetadataForAvailableCards(cards));
   };

frontend/src/metabase/dashboard/components/DashCard/DashCard.tsx

@@ -1,36 +1,35 @@
 import cx from "classnames";
 import type { LocationDescriptor } from "history";
 import { getIn } from "icepick";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { useMount } from "react-use";
 
 import ErrorBoundary from "metabase/ErrorBoundary";
 import { isActionCard } from "metabase/actions/utils";
 import CS from "metabase/css/core/index.css";
 import DashboardS from "metabase/css/dashboard.module.css";
 import { DASHBOARD_SLOW_TIMEOUT } from "metabase/dashboard/constants";
+import { getDashcardData } from "metabase/dashboard/selectors";
 import {
   getDashcardResultsError,
   isDashcardLoading,
   isQuestionDashCard,
 } from "metabase/dashboard/utils";
+import { color } from "metabase/lib/colors";
+import { useSelector } from "metabase/lib/redux";
 import { isJWT } from "metabase/lib/utils";
+import { PLUGIN_COLLECTIONS } from "metabase/plugins";
 import EmbedFrameS from "metabase/public/components/EmbedFrame/EmbedFrame.module.css";
-import type { IconProps } from "metabase/ui";
 import type { Mode } from "metabase/visualizations/click-actions/Mode";
 import { mergeSettings } from "metabase/visualizations/lib/settings";
 import type Metadata from "metabase-lib/v1/metadata/Metadata";
-import { getParameterValuesBySlug } from "metabase-lib/v1/parameters/utils/parameter-values";
 import type {
   Card,
   CardId,
   Dashboard,
   DashboardCard,
   DashCardId,
-  ParameterId,
-  ParameterValueOrArray,
   VisualizationSettings,
-  DashCardDataMap,
   VirtualCard,
 } from "metabase-types/api";
 import type { StoreDashcard } from "metabase-types/store";
@@ -53,9 +52,7 @@ export interface DashCardProps {
   dashcard: StoreDashcard;
   gridItemWidth: number;
   totalNumGridCols: number;
-  dashcardData: DashCardDataMap;
   slowCards: Record<CardId, boolean>;
-  parameterValues: Record<ParameterId, ParameterValueOrArray>;
   metadata: Metadata;
   mode?: Mode;
 
@@ -69,28 +66,30 @@ export interface DashCardProps {
   isPublic?: boolean;
   isXray?: boolean;
 
-  headerIcon?: IconProps;
-
-  onAddSeries: () => void;
-  onReplaceCard: () => void;
-  onRemove: () => void;
+  onAddSeries: (dashcard: StoreDashcard) => void;
+  onReplaceCard: (dashcard: StoreDashcard) => void;
+  onRemove: (dashcard: StoreDashcard) => void;
   markNewCardSeen: (dashcardId: DashCardId) => void;
   navigateToNewCardFromDashboard?: (
     opts: NavigateToNewCardFromDashboardOpts,
   ) => void;
-  onReplaceAllVisualizationSettings: (settings: VisualizationSettings) => void;
-  onUpdateVisualizationSettings: (settings: VisualizationSettings) => void;
-  showClickBehaviorSidebar: (dashCardId: DashCardId | null) => void;
+  onReplaceAllVisualizationSettings: (
+    dashcardId: DashCardId,
+    settings: VisualizationSettings,
+  ) => void;
+  onUpdateVisualizationSettings: (
+    dashcardId: DashCardId,
+    settings: VisualizationSettings,
+  ) => void;
+  showClickBehaviorSidebar: (dashcardId: DashCardId | null) => void;
   onChangeLocation: (location: LocationDescriptor) => void;
 }
 
 function DashCardInner({
   dashcard,
-  dashcardData,
   dashboard,
   slowCards,
   metadata,
-  parameterValues,
   gridItemWidth,
   totalNumGridCols,
   mode,
@@ -102,7 +101,6 @@ function DashCardInner({
   isXray = false,
   isEditingParameter,
   clickBehaviorSidebarDashcard,
-  headerIcon,
   onAddSeries,
   onReplaceCard,
   onRemove,
@@ -113,6 +111,9 @@ function DashCardInner({
   onUpdateVisualizationSettings,
   onReplaceAllVisualizationSettings,
 }: DashCardProps) {
+  const dashcardData = useSelector(state =>
+    getDashcardData(state, dashcard.id),
+  );
   const [isPreviewingCard, setIsPreviewingCard] = useState(false);
   const cardRootRef = useRef<HTMLDivElement>(null);
 
@@ -159,13 +160,13 @@ function DashCardInner({
       }
 
       return {
-        ...getIn(dashcardData, [dashcard.id, card.id]),
+        ...getIn(dashcardData, [card.id]),
         card,
         isSlow,
         isUsuallyFast,
       };
     });
-  }, [cards, dashcard.id, dashcardData, slowCards]);
+  }, [cards, dashcardData, slowCards]);
 
   const isLoading = useMemo(
     () => isDashcardLoading(dashcard, dashcardData),
@@ -190,11 +191,6 @@ function DashCardInner({
   const error = useMemo(() => getDashcardResultsError(series), [series]);
   const hasError = !!error;
 
-  const parameterValuesBySlug = useMemo(
-    () => getParameterValuesBySlug(dashboard.parameters, parameterValues),
-    [dashboard.parameters, parameterValues],
-  );
-
   const gridSize = useMemo(
     () => ({ width: dashcard.size_x, height: dashcard.size_y }),
     [dashcard],
@@ -225,6 +221,30 @@ function DashCardInner({
     );
   }, [isEditing, isAction, mainCard]);
 
+  const headerIcon = useMemo(() => {
+    const { isRegularCollection } = PLUGIN_COLLECTIONS;
+    const isRegularQuestion = isRegularCollection({
+      authority_level: dashcard.collection_authority_level,
+    });
+    const isRegularDashboard = isRegularCollection({
+      authority_level: dashboard.collection_authority_level,
+    });
+    const authorityLevel = dashcard.collection_authority_level;
+    if (isRegularDashboard && !isRegularQuestion && authorityLevel) {
+      const opts = PLUGIN_COLLECTIONS.AUTHORITY_LEVEL[authorityLevel];
+      const iconSize = 14;
+      return {
+        name: opts.icon,
+        color: opts.color ? color(opts.color) : undefined,
+        tooltip: opts.tooltips?.belonging,
+        size: iconSize,
+
+        // Workaround: headerIcon on cards in a first column have incorrect offset out of the box
+        targetOffsetX: dashcard.col === 0 ? iconSize : 0,
+      };
+    }
+  }, [dashcard, dashboard.collection_authority_level]);
+
   const isEditingDashboardLayout =
     isEditing && !clickBehaviorSidebarDashcard && !isEditingParameter;
 
@@ -287,12 +307,14 @@ function DashCardInner({
             isLoading={isLoading}
             isPreviewing={isPreviewingCard}
             hasError={hasError}
-            onAddSeries={onAddSeries}
-            onRemove={onRemove}
-            onReplaceCard={onReplaceCard}
-            onUpdateVisualizationSettings={onUpdateVisualizationSettings}
-            onReplaceAllVisualizationSettings={
-              onReplaceAllVisualizationSettings
+            onAddSeries={() => onAddSeries(dashcard)}
+            onRemove={() => onRemove(dashcard)}
+            onReplaceCard={() => onReplaceCard(dashcard)}
+            onUpdateVisualizationSettings={settings =>
+              onUpdateVisualizationSettings(dashcard.id, settings)
+            }
+            onReplaceAllVisualizationSettings={settings =>
+              onReplaceAllVisualizationSettings(dashcard.id, settings)
             }
             showClickBehaviorSidebar={handleShowClickBehaviorSidebar}
             onPreviewToggle={handlePreviewToggle}
@@ -302,8 +324,6 @@ function DashCardInner({
           dashboard={dashboard}
           dashcard={dashcard}
           series={series}
-          parameterValues={parameterValues}
-          parameterValuesBySlug={parameterValuesBySlug}
           metadata={metadata}
           mode={mode}
           gridSize={gridSize}
@@ -327,7 +347,9 @@ function DashCardInner({
           isMobile={isMobile}
           isPublic={isPublic}
           showClickBehaviorSidebar={showClickBehaviorSidebar}
-          onUpdateVisualizationSettings={onUpdateVisualizationSettings}
+          onUpdateVisualizationSettings={settings =>
+            onUpdateVisualizationSettings(dashcard.id, settings)
+          }
           onChangeCardAndRun={changeCardAndRunHandler}
           onChangeLocation={onChangeLocation}
         />
@@ -336,6 +358,6 @@ function DashCardInner({
   );
 }
 
-export const DashCard = Object.assign(DashCardInner, {
+export const DashCard = Object.assign(memo(DashCardInner), {
   root: DashCardRoot,
 });