Dashboard Header FC, using entity, select, and dispatch hooks (#39267)

* Dashboard Header FC, using entity, select, and dispatch hooks

* resolving types

* updating other use of getDashboardActions

* PR feedback

frontend/src/metabase/collections/utils.ts

@@ -33,10 +33,10 @@ export function isPublicCollection(
 }
 
 export function isInstanceAnalyticsCollection(
-  collection: Partial<Collection>,
+  collection?: Partial<Collection>,
 ): boolean {
   return (
-    collection &&
+    !!collection &&
     PLUGIN_COLLECTIONS.getCollectionType(collection).type ===
       "instance-analytics"
   );

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

@@ -7,7 +7,7 @@ import { trackCardCreated } from "../analytics";
 import { addDashCardToDashboard } from "./cards-typed";
 
 export const addActionToDashboard =
-  async ({ dashId, tabId, action, displayType }) =>
+  ({ dashId, tabId, action, displayType }) =>
   dispatch => {
     trackCardCreated("action", dashId);
 

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

@@ -5,14 +5,18 @@ import type { Route } from "react-router";
 import { usePrevious, useUnmount } from "react-use";
 import _ from "underscore";
 
+import type { NewDashCardOpts } from "metabase/dashboard/actions";
 import { DashboardHeader } from "metabase/dashboard/components/DashboardHeader";
 import { DashboardControls } from "metabase/dashboard/hoc/DashboardControls";
+import type {
+  FetchDashboardResult,
+  SuccessfulFetchDashboardResult,
+} from "metabase/dashboard/types";
 import { isSmallScreen, getMainElement } from "metabase/lib/dom";
 import { FilterApplyButton } from "metabase/parameters/components/FilterApplyButton";
 import SyncedParametersList from "metabase/parameters/components/SyncedParametersList/SyncedParametersList";
 import { getVisibleParameters } from "metabase/parameters/utils/ui";
 import type { EmbeddingParameterVisibility } from "metabase/public/lib/types";
-import type Database from "metabase-lib/metadata/Database";
 import type Metadata from "metabase-lib/metadata/Metadata";
 import type { UiParameter } from "metabase-lib/parameters/types";
 import { getValuePopulatedParameters } from "metabase-lib/parameters/utils/parameter-values";
@@ -21,6 +25,7 @@ import type {
   DashboardId,
   DashCardDataMap,
   DashCardId,
+  Database,
   DatabaseId,
   Parameter,
   ParameterId,
@@ -61,13 +66,6 @@ import {
   DashboardEmptyStateWithoutAddPrompt,
 } from "./DashboardEmptyState/DashboardEmptyState";
 
-type SuccessfulFetchDashboardResult = { payload: { dashboard: IDashboard } };
-type FailedFetchDashboardResult = { error: unknown; payload: unknown };
-
-type FetchDashboardResult =
-  | SuccessfulFetchDashboardResult
-  | FailedFetchDashboardResult;
-
 interface DashboardProps {
   dashboardId: DashboardId;
   route: Route;
@@ -108,6 +106,8 @@ interface DashboardProps {
   location: Location;
   isNightMode: boolean;
   isFullscreen: boolean;
+  hasNightModeToggle: boolean;
+  refreshPeriod: number | null;
 
   initialize: (opts?: { clearCache?: boolean }) => void;
   fetchDashboard: (opts: {
@@ -130,10 +130,13 @@ interface DashboardProps {
     cardId: CardId;
     tabId: DashboardTabId | null;
   }) => void;
+  addHeadingDashCardToDashboard: (opts: NewDashCardOpts) => void;
+  addMarkdownDashCardToDashboard: (opts: NewDashCardOpts) => void;
+  addLinkDashCardToDashboard: (opts: NewDashCardOpts) => void;
   archiveDashboard: (id: DashboardId) => Promise<void>;
 
   onRefreshPeriodChange: (period: number | null) => void;
-  setEditingDashboard: (dashboard: IDashboard) => void;
+  setEditingDashboard: (dashboard: IDashboard | boolean) => void;
   setDashboardAttributes: (opts: {
     id: DashboardId;
     attributes: Partial<IDashboard>;
@@ -184,6 +187,15 @@ interface DashboardProps {
   getEmbeddedParameterVisibility: (
     slug: string,
   ) => EmbeddingParameterVisibility | null;
+  updateDashboardAndCards: () => void;
+  onFullscreenChange: (
+    isFullscreen: boolean,
+    browserFullscreen?: boolean,
+  ) => void;
+
+  onNightModeChange: () => void;
+  setSidebar: (opts: { name: DashboardSidebarName }) => void;
+  hideAddParameterPopover: () => void;
 }
 
 function DashboardInner(props: DashboardProps) {
@@ -285,7 +297,7 @@ function DashboardInner(props: DashboardProps) {
   );
 
   const handleSetEditing = useCallback(
-    (dashboard: IDashboard) => {
+    (dashboard: IDashboard | boolean) => {
       onRefreshPeriodChange(null);
       setEditingDashboard(dashboard);
     },

frontend/src/metabase/dashboard/components/DashboardActions.jsx

@@ -10,9 +10,8 @@ import {
   RefreshWidgetButton,
 } from "./DashboardActions.styled";
 
-export const getDashboardActions = (
-  self,
-  {
+export const getDashboardActions = props => {
+  const {
     dashboard,
     isAdmin,
     canManageSubscriptions,
@@ -29,8 +28,7 @@ export const getDashboardActions = (
     onSharingClick,
     onFullscreenChange,
     hasNightModeToggle,
-  },
-) => {
+  } = props;
   const buttons = [];
 
   const isLoaded = !!dashboard;

frontend/src/metabase/dashboard/components/DashboardHeader/tests/setup.tsx

@@ -14,7 +14,11 @@ import {
   createMockDashboardCard,
   createMockTokenFeatures,
 } from "metabase-types/api/mocks";
-import { createMockDashboardState } from "metabase-types/store/mocks";
+import type { DashboardSidebarName } from "metabase-types/store";
+import {
+  createMockDashboardState,
+  createMockLocation,
+} from "metabase-types/store/mocks";
 
 import { DashboardHeader } from "../DashboardHeader";
 
@@ -98,11 +102,15 @@ export const setup = async ({
   const dashboardHeaderProps = {
     isAdmin,
     dashboard,
+    dashboardId: dashboard.id,
     canManageSubscriptions: true,
     isEditing: false,
     isFullscreen: false,
     isNavBarOpen: false,
     isNightMode: false,
+    isDirty: false,
+    isAddParameterPopoverOpen: false,
+    hasNightModeToggle: false,
     isAdditionalInfoVisible: false,
     refreshPeriod: 0,
     addMarkdownDashCardToDashboard: jest.fn(),
@@ -121,17 +129,18 @@ export const setup = async ({
     onChangeLocation: jest.fn(),
     toggleSidebar: jest.fn(),
     sidebar: {
-      name: "",
+      name: "" as DashboardSidebarName,
       props: {},
     },
-    location: {
-      query: {},
-    },
+    location: createMockLocation(),
     setSidebar: jest.fn(),
     closeSidebar: jest.fn(),
     addActionToDashboard: jest.fn(),
     databases: {},
     params: { tabSlug: undefined },
+    addParameter: jest.fn(),
+    showAddParameterPopover: jest.fn(),
+    hideAddParameterPopover: jest.fn(),
   };
 
   renderWithProviders(<DashboardHeader {...dashboardHeaderProps} />, {

frontend/src/metabase/dashboard/selectors.ts

@@ -15,7 +15,6 @@ import { getEmbedOptions, getIsEmbedded } from "metabase/selectors/embed";
 import { getMetadata } from "metabase/selectors/metadata";
 import Question from "metabase-lib/Question";
 import type {
-  Bookmark,
   Card,
   CardId,
   DashboardId,
@@ -231,20 +230,6 @@ export const getDocumentTitle = (state: State) =>
 export const getIsNavigatingBackToDashboard = (state: State) =>
   state.dashboard.isNavigatingBackToDashboard;
 
-type IsBookmarkedSelectorProps = {
-  bookmarks: Bookmark[];
-  dashboardId: DashboardId;
-};
-
-export const getIsBookmarked = (
-  state: State,
-  { bookmarks, dashboardId }: IsBookmarkedSelectorProps,
-) =>
-  bookmarks.some(
-    bookmark =>
-      bookmark.type === "dashboard" && bookmark.item_id === dashboardId,
-  );
-
 export const getIsDirty = createSelector(
   [getDashboard, getDashcards],
   (dashboard, dashcards) => {

frontend/src/metabase/dashboard/types.ts

+import type { Dashboard } from "metabase-types/api";
+
+export type SuccessfulFetchDashboardResult = {
+  payload: { dashboard: Dashboard };
+};
+type FailedFetchDashboardResult = { error: unknown; payload: unknown };
+
+export type FetchDashboardResult =
+  | SuccessfulFetchDashboardResult
+  | FailedFetchDashboardResult;

frontend/src/metabase/public/containers/PublicDashboard.jsx

@@ -156,7 +156,7 @@ class PublicDashboard extends Component {
     } = this.props;
 
     const buttons = !isWithinIframe()
-      ? getDashboardActions(this, { ...this.props, isPublic: true })
+      ? getDashboardActions({ ...this.props, isPublic: true })
       : [];
 
     const visibleDashcards = (dashboard?.dashcards ?? []).filter(