Extract `setDashboardWidth` action (#38871)

* Convert `dashboard/actions/ui` to TypeScript

* Extract `setDashboardWidth` action

frontend/src/metabase-types/api/dashboard.ts

@@ -21,6 +21,8 @@ export type DashboardCard =
   | QuestionDashboardCard
   | VirtualDashboardCard;
 
+export type DashboardWidth = "full" | "fixed";
+
 export interface Dashboard {
   id: DashboardId;
   created_at: string;
@@ -48,7 +50,7 @@ export interface Dashboard {
   public_uuid: string | null;
   initially_published_at: string | null;
   embedding_params?: EmbeddingParameters | null;
-  width: "full" | "fixed";
+  width: DashboardWidth;
 
   /* Indicates whether static embedding for this dashboard has been published */
   enable_embedding: boolean;

frontend/src/metabase/dashboard/actions/ui.js → frontend/src/metabase/dashboard/actions/ui.ts

 import { createAction, createThunkAction } from "metabase/lib/redux";
 import { SIDEBAR_NAME } from "metabase/dashboard/constants";
-import { getSidebar } from "../selectors";
+import type { DashCardId, DashboardWidth } from "metabase-types/api";
+import type {
+  DashboardSidebarName,
+  Dispatch,
+  GetState,
+} from "metabase-types/store";
+import { getDashboardId, getSidebar } from "../selectors";
 import { closeAutoApplyFiltersToast } from "./parameters";
+import { setDashboardAttributes } from "./core";
+
+export const setDashboardWidth =
+  (width: DashboardWidth) => (dispatch: Dispatch, getState: GetState) => {
+    const id = getDashboardId(getState());
+    dispatch(setDashboardAttributes({ id, attributes: { width } }));
+  };
 
 export const SET_SIDEBAR = "metabase/dashboard/SET_SIDEBAR";
 export const setSidebar = createAction(SET_SIDEBAR);
@@ -9,29 +22,31 @@ export const setSidebar = createAction(SET_SIDEBAR);
 export const CLOSE_SIDEBAR = "metabase/dashboard/CLOSE_SIDEBAR";
 export const closeSidebar = createAction(CLOSE_SIDEBAR);
 
-export const showClickBehaviorSidebar = dashcardId => dispatch => {
-  if (dashcardId != null) {
-    dispatch(
-      setSidebar({
-        name: SIDEBAR_NAME.clickBehavior,
-        props: { dashcardId },
-      }),
-    );
-  } else {
-    dispatch(closeSidebar());
-  }
-};
+export const showClickBehaviorSidebar =
+  (dashcardId: DashCardId) => (dispatch: Dispatch) => {
+    if (dashcardId != null) {
+      dispatch(
+        setSidebar({
+          name: SIDEBAR_NAME.clickBehavior,
+          props: { dashcardId },
+        }),
+      );
+    } else {
+      dispatch(closeSidebar());
+    }
+  };
 
-export const toggleSidebar = name => (dispatch, getState) => {
-  const currentSidebarName = getSidebar(getState()).name;
-  if (currentSidebarName === name) {
-    dispatch(closeSidebar());
-  } else {
-    dispatch(setSidebar({ name }));
-  }
-};
+export const toggleSidebar =
+  (name: DashboardSidebarName) => (dispatch: Dispatch, getState: GetState) => {
+    const currentSidebarName = getSidebar(getState()).name;
+    if (currentSidebarName === name) {
+      dispatch(closeSidebar());
+    } else {
+      dispatch(setSidebar({ name }));
+    }
+  };
 
-export const openAddQuestionSidebar = () => dispatch => {
+export const openAddQuestionSidebar = () => (dispatch: Dispatch) => {
   dispatch(
     setSidebar({
       name: SIDEBAR_NAME.addQuestion,

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

@@ -361,7 +361,6 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
       closeSidebar,
       databases,
       collection,
-      setDashboardAttribute,
     } = this.props;
 
     const canEdit = dashboard.can_write;
@@ -511,7 +510,6 @@ class DashboardHeaderContainer extends Component<DashboardHeaderProps> {
       buttons.push(
         <ExtraEditButtonsMenu
           key="extra-options-button"
-          setDashboardAttribute={setDashboardAttribute}
           dashboard={dashboard}
         />,
       );

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

-import { useCallback } from "react";
 import { t } from "ttag";
-
-import type { Dashboard } from "metabase-types/api";
-
 import { Box, Popover, Icon, Tooltip, Stack, Switch } from "metabase/ui";
+import { setDashboardWidth } from "metabase/dashboard/actions";
 import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
+import { useDispatch } from "metabase/lib/redux";
+import type { Dashboard } from "metabase-types/api";
 
 const EXTRA_BUTTONS_DESCRIPTION = t`Toggle width`;
 
 interface ExtraEditButtonsMenuProps {
-  key: string;
-  setDashboardAttribute: <Key extends keyof Dashboard>(
-    key: Key,
-    value: Dashboard[Key],
-  ) => void;
   dashboard: Dashboard;
 }
 
-export function ExtraEditButtonsMenu({
-  key,
-  setDashboardAttribute,
-  dashboard,
-}: ExtraEditButtonsMenuProps) {
+export function ExtraEditButtonsMenu({ dashboard }: ExtraEditButtonsMenuProps) {
+  const dispatch = useDispatch();
+
+  const handleToggleWidth = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const nextWidth = event.currentTarget.checked ? "full" : "fixed";
+    dispatch(setDashboardWidth(nextWidth));
+  };
+
   return (
-    <Popover key={key} shadow="sm" position="bottom-end" offset={5}>
+    <Popover shadow="sm" position="bottom-end" offset={5}>
       <Popover.Target>
         <Box>
           <Tooltip label={EXTRA_BUTTONS_DESCRIPTION}>
@@ -35,43 +32,16 @@ export function ExtraEditButtonsMenu({
       </Popover.Target>
       <Popover.Dropdown>
         <Stack>
-          <WidthToggle
-            dashboard={dashboard}
-            setDashboardAttribute={setDashboardAttribute}
-          />
+          <Box px="md" py="sm">
+            <Switch
+              size="sm"
+              checked={dashboard.width === "full"}
+              onChange={handleToggleWidth}
+              label={t`Full width`}
+            />
+          </Box>
         </Stack>
       </Popover.Dropdown>
     </Popover>
   );
 }
-
-interface WidthToggleProps {
-  setDashboardAttribute: <Key extends keyof Dashboard>(
-    key: Key,
-    value: Dashboard[Key],
-  ) => void;
-  dashboard: Dashboard;
-}
-
-function WidthToggle({ setDashboardAttribute, dashboard }: WidthToggleProps) {
-  const isToggleChecked = dashboard?.width === "full";
-
-  const handleWidthToggleChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const width = event.currentTarget.checked ? "full" : "fixed";
-      setDashboardAttribute("width", width);
-    },
-    [setDashboardAttribute],
-  );
-
-  return (
-    <Box px="md" py="sm">
-      <Switch
-        size="sm"
-        checked={isToggleChecked}
-        onChange={handleWidthToggleChange}
-        label={t`Full width`}
-      />
-    </Box>
-  );
-}