Convert Visualization Settings Actions to TS (#48941)

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

@@ -76,7 +76,7 @@ export interface DashCardProps {
   navigateToNewCardFromDashboard?: (
     opts: NavigateToNewCardFromDashboardOpts,
   ) => void;
-  onReplaceAllVisualizationSettings: (
+  onReplaceAllDashCardVisualizationSettings: (
     dashcardId: DashCardId,
     settings: VisualizationSettings,
   ) => void;
@@ -114,7 +114,7 @@ function DashCardInner({
   showClickBehaviorSidebar,
   onChangeLocation,
   onUpdateVisualizationSettings,
-  onReplaceAllVisualizationSettings,
+  onReplaceAllDashCardVisualizationSettings,
   downloadsEnabled,
 }: DashCardProps) {
   const dashcardData = useSelector(state =>
@@ -326,8 +326,8 @@ function DashCardInner({
             onRemove={onRemove}
             onReplaceCard={onReplaceCard}
             onUpdateVisualizationSettings={onUpdateVisualizationSettings}
-            onReplaceAllVisualizationSettings={
-              onReplaceAllVisualizationSettings
+            onReplaceAllDashCardVisualizationSettings={
+              onReplaceAllDashCardVisualizationSettings
             }
             showClickBehaviorSidebar={handleShowClickBehaviorSidebar}
             onPreviewToggle={handlePreviewToggle}

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

@@ -36,7 +36,7 @@ interface Props {
   onRemove: (dashcard: DashboardCard) => void;
   onAddSeries: (dashcard: DashboardCard) => void;
   onReplaceCard: (dashcard: DashboardCard) => void;
-  onReplaceAllVisualizationSettings: (
+  onReplaceAllDashCardVisualizationSettings: (
     dashcardId: DashCardId,
     settings: VisualizationSettings,
   ) => void;
@@ -60,7 +60,7 @@ function DashCardActionsPanelInner({
   onRemove,
   onAddSeries,
   onReplaceCard,
-  onReplaceAllVisualizationSettings,
+  onReplaceAllDashCardVisualizationSettings,
   onUpdateVisualizationSettings,
   showClickBehaviorSidebar,
   onPreviewToggle,
@@ -95,9 +95,9 @@ function DashCardActionsPanelInner({
         return;
       }
 
-      onReplaceAllVisualizationSettings(dashcard.id, settings);
+      onReplaceAllDashCardVisualizationSettings(dashcard.id, settings);
     },
-    [dashcard, onReplaceAllVisualizationSettings],
+    [dashcard, onReplaceAllDashCardVisualizationSettings],
   );
 
   const handleReplaceCard = useCallback(() => {

frontend/src/metabase/dashboard/components/DashCard/Dashcard.unit.spec.tsx

@@ -84,7 +84,7 @@ function setup({
       onRemove={jest.fn()}
       markNewCardSeen={jest.fn()}
       navigateToNewCardFromDashboard={jest.fn()}
-      onReplaceAllVisualizationSettings={jest.fn()}
+      onReplaceAllDashCardVisualizationSettings={jest.fn()}
       onUpdateVisualizationSettings={jest.fn()}
       showClickBehaviorSidebar={jest.fn()}
       onChangeLocation={jest.fn()}

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

@@ -523,7 +523,7 @@ class DashboardGrid extends Component<DashboardGridProps, DashboardGridState> {
         onUpdateVisualizationSettings={
           this.props.onUpdateDashCardVisualizationSettings
         }
-        onReplaceAllVisualizationSettings={
+        onReplaceAllDashCardVisualizationSettings={
           this.props.onReplaceAllDashCardVisualizationSettings
         }
         mode={this.props.mode}

frontend/src/metabase/query_builder/actions/visualization-settings.js → frontend/src/metabase/query_builder/actions/visualization-settings.ts

 import * as Lib from "metabase-lib";
+import type Question from "metabase-lib/v1/Question";
+import type { VisualizationSettings } from "metabase-types/api";
+import type { Dispatch, GetState } from "metabase-types/store";
 
 import {
   getDatasetEditorTab,
@@ -9,9 +12,11 @@ import {
 
 import { updateQuestion } from "./core";
 
-export const updateCardVisualizationSettings =
-  settings => async (dispatch, getState) => {
+export const onUpdateVisualizationSettings =
+  (settings: VisualizationSettings) =>
+  async (dispatch: Dispatch, getState: GetState) => {
     const question = getQuestion(getState());
+
     const previousQueryBuilderMode = getPreviousQueryBuilderMode(getState());
     const queryBuilderMode = getQueryBuilderMode(getState());
     const datasetEditorTab = getDatasetEditorTab(getState());
@@ -26,24 +31,25 @@ export const updateCardVisualizationSettings =
       settings["table.column_widths"] === undefined;
 
     if (
-      (isEditingDatasetMetadata || wasJustEditingModel) &&
-      isColumnWidthResetEvent
+      !question ||
+      ((isEditingDatasetMetadata || wasJustEditingModel) &&
+        isColumnWidthResetEvent)
     ) {
       return;
     }
 
     // The check allows users without data permission to resize/rearrange columns
     const { isEditable } = Lib.queryDisplayInfo(question.query());
-    const hasWritePermissions = isEditable;
     await dispatch(
       updateQuestion(question.updateSettings(settings), {
-        shouldUpdateUrl: hasWritePermissions,
+        shouldUpdateUrl: isEditable,
       }),
     );
   };
 
-export const replaceAllCardVisualizationSettings =
-  (settings, newQuestion) => async (dispatch, getState) => {
+export const onReplaceAllVisualizationSettings =
+  (settings: VisualizationSettings, newQuestion: Question) =>
+  async (dispatch: Dispatch, getState: GetState) => {
     const oldQuestion = getQuestion(getState());
     const updatedQuestion = (newQuestion ?? oldQuestion).setSettings(settings);
     const { isEditable } = Lib.queryDisplayInfo(updatedQuestion.query());
@@ -57,8 +63,3 @@ export const replaceAllCardVisualizationSettings =
       }),
     );
   };
-
-// these are just temporary mappings to appease the existing QB code and it's naming prefs
-export const onUpdateVisualizationSettings = updateCardVisualizationSettings;
-export const onReplaceAllVisualizationSettings =
-  replaceAllCardVisualizationSettings;