Add useCreateQuestion and useSaveQuestion for SDK's `Create Question` (#46621)

frontend/src/metabase/hooks/use-callback-effect/index.ts

-export { useCallbackEffect } from "./use-callback-effect";
+export {
+  useCallbackEffect,
+  type ScheduleCallback,
+} from "./use-callback-effect";

frontend/src/metabase/hooks/use-callback-effect/use-callback-effect.ts

@@ -4,7 +4,7 @@ type Callback = () => void | Promise<void>;
 
 type IsScheduled = boolean;
 
-type ScheduleCallback = (callback: Callback) => void;
+export type ScheduleCallback = (callback: Callback) => void;
 
 /**
  * Will schedule running a callback once after a re-render.

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -2,7 +2,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { push } from "react-router-redux";
-import { useMount, useUnmount, usePrevious } from "react-use";
+import { useMount, usePrevious, useUnmount } from "react-use";
 import { t } from "ttag";
 import _ from "underscore";
 
@@ -22,70 +22,73 @@ import { getIsNavbarOpen } from "metabase/selectors/app";
 import { getMetadata } from "metabase/selectors/metadata";
 import { getSetting } from "metabase/selectors/settings";
 import {
+  canManageSubscriptions,
   getUser,
   getUserIsAdmin,
-  canManageSubscriptions,
 } from "metabase/selectors/user";
 
 import * as actions from "../actions";
 import View from "../components/view/View";
 import { VISUALIZATION_SLOW_TIMEOUT } from "../constants";
 import {
+  getAutocompleteResultsFn,
   getCard,
+  getCardAutocompleteResultsFn,
+  getDatabaseFields,
   getDatabasesList,
   getDataReferenceStack,
-  getOriginalCard,
-  getLastRunCard,
+  getDocumentTitle,
+  getEmbeddedParameterVisibility,
+  getFilteredTimelines,
   getFirstQueryResult,
-  getQueryResults,
-  getParameterValues,
+  getIsActionListVisible,
+  getIsAdditionalInfoVisible,
+  getIsAnySidebarOpen,
+  getIsBookmarked,
   getIsDirty,
+  getIsHeaderVisible,
+  getIsLiveResizable,
+  getIsLoadingComplete,
+  getIsNativeEditorOpen,
   getIsObjectDetail,
-  getTables,
-  getTableForeignKeys,
-  getTableForeignKeyReferences,
-  getUiControls,
-  getParameters,
-  getDatabaseFields,
-  getSampleDatabaseId,
-  getIsRunnable,
   getIsResultDirty,
-  getMode,
+  getIsRunnable,
+  getIsTimeseries,
+  getIsVisualized,
+  getLastRunCard,
   getModalSnippet,
-  getSnippetCollectionId,
-  getQuestion,
+  getMode,
+  getNativeEditorCursorOffset,
+  getNativeEditorSelectedText,
+  getOriginalCard,
   getOriginalQuestion,
+  getPageFavicon,
+  getParameters,
+  getParameterValues,
+  getQueryResults,
   getQueryStartTime,
-  getRawSeries,
+  getQuestion,
   getQuestionAlerts,
-  getVisualizationSettings,
-  getIsNativeEditorOpen,
-  getIsVisualized,
-  getIsLiveResizable,
-  getNativeEditorCursorOffset,
-  getNativeEditorSelectedText,
-  getIsBookmarked,
-  getVisibleTimelineEvents,
-  getVisibleTimelineEventIds,
+  getRawSeries,
+  getSampleDatabaseId,
   getSelectedTimelineEventIds,
-  getFilteredTimelines,
+  getShouldShowUnsavedChangesWarning,
+  getSnippetCollectionId,
+  getTableForeignKeyReferences,
+  getTableForeignKeys,
+  getTables,
   getTimeseriesXDomain,
-  getIsAnySidebarOpen,
-  getDocumentTitle,
-  getPageFavicon,
-  getIsTimeseries,
-  getIsLoadingComplete,
-  getIsHeaderVisible,
-  getIsActionListVisible,
-  getIsAdditionalInfoVisible,
-  getAutocompleteResultsFn,
-  getCardAutocompleteResultsFn,
+  getUiControls,
+  getVisibleTimelineEventIds,
+  getVisibleTimelineEvents,
+  getVisualizationSettings,
   isResultsMetadataDirty,
-  getShouldShowUnsavedChangesWarning,
-  getEmbeddedParameterVisibility,
 } from "../selectors";
 import { isNavigationAllowed } from "../utils";
 
+import { useCreateQuestion } from "./use-create-question";
+import { useSaveQuestion } from "./use-save-question";
+
 const timelineProps = {
   query: { include: "events" },
   loadingAndErrorWrapper: false,
@@ -191,9 +194,6 @@ function QueryBuilder(props) {
     isAnySidebarOpen,
     closeNavbar,
     initializeQB,
-    apiCreateQuestion,
-    apiUpdateQuestion,
-    updateUrl,
     locationChanged,
     setUIControls,
     cancelQuery,
@@ -232,17 +232,6 @@ function QueryBuilder(props) {
     [setUIControls],
   );
 
-  const setRecentlySaved = useCallback(
-    recentlySaved => {
-      setUIControls({ recentlySaved });
-      clearTimeout(timeout.current);
-      timeout.current = setTimeout(() => {
-        setUIControls({ recentlySaved: null });
-      }, 5000);
-    },
-    [setUIControls],
-  );
-
   const onClickBookmark = () => {
     const {
       card: { id },
@@ -259,51 +248,9 @@ function QueryBuilder(props) {
    */
   const [isCallbackScheduled, scheduleCallback] = useCallbackEffect();
 
-  const handleCreate = useCallback(
-    async newQuestion => {
-      const shouldBePinned =
-        newQuestion.type() === "model" || newQuestion.type() === "metric";
-      const createdQuestion = await apiCreateQuestion(
-        newQuestion.setPinned(shouldBePinned),
-      );
-      await setUIControls({ isModifiedFromNotebook: false });
-
-      scheduleCallback(async () => {
-        await updateUrl(createdQuestion, { dirty: false });
-
-        setRecentlySaved("created");
-      });
-    },
-    [
-      apiCreateQuestion,
-      setRecentlySaved,
-      setUIControls,
-      updateUrl,
-      scheduleCallback,
-    ],
-  );
+  const handleCreate = useCreateQuestion({ scheduleCallback });
 
-  const handleSave = useCallback(
-    async (updatedQuestion, { rerunQuery } = {}) => {
-      await apiUpdateQuestion(updatedQuestion, { rerunQuery });
-      await setUIControls({ isModifiedFromNotebook: false });
-
-      scheduleCallback(async () => {
-        if (!rerunQuery) {
-          await updateUrl(updatedQuestion, { dirty: false });
-        }
-
-        setRecentlySaved("updated");
-      });
-    },
-    [
-      apiUpdateQuestion,
-      updateUrl,
-      setRecentlySaved,
-      setUIControls,
-      scheduleCallback,
-    ],
-  );
+  const handleSave = useSaveQuestion({ scheduleCallback });
 
   useMount(() => {
     initializeQB(location, params);
@@ -431,7 +378,6 @@ function QueryBuilder(props) {
         recentlySaved={uiControls.recentlySaved}
         onOpenModal={openModal}
         onCloseModal={closeModal}
-        onSetRecentlySaved={setRecentlySaved}
         onSave={handleSave}
         onCreate={handleCreate}
         handleResize={forceUpdateDebounced}

frontend/src/metabase/query_builder/containers/use-create-question.ts

+import { useCallback } from "react";
+
+import type { ScheduleCallback } from "metabase/hooks/use-callback-effect";
+import { useDispatch } from "metabase/lib/redux";
+import {
+  apiCreateQuestion,
+  setUIControls,
+  updateUrl,
+} from "metabase/query_builder/actions";
+import type Question from "metabase-lib/v1/Question";
+
+interface UseCreateQuestionParams {
+  scheduleCallback?: ScheduleCallback;
+}
+
+export const useCreateQuestion = ({
+  scheduleCallback,
+}: UseCreateQuestionParams) => {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    async (newQuestion: Question) => {
+      const shouldBePinned =
+        newQuestion.type() === "model" || newQuestion.type() === "metric";
+      const createdQuestion = await dispatch(
+        apiCreateQuestion(newQuestion.setPinned(shouldBePinned)),
+      );
+      await dispatch(setUIControls({ isModifiedFromNotebook: false }));
+
+      scheduleCallback?.(async () => {
+        await dispatch(updateUrl(createdQuestion, { dirty: false }));
+      });
+    },
+    [dispatch, scheduleCallback],
+  );
+};

frontend/src/metabase/query_builder/containers/use-save-question.ts

+import { useCallback } from "react";
+
+import type { ScheduleCallback } from "metabase/hooks/use-callback-effect";
+import { useDispatch } from "metabase/lib/redux";
+import {
+  apiUpdateQuestion,
+  setUIControls,
+  updateUrl,
+} from "metabase/query_builder/actions";
+import type Question from "metabase-lib/v1/Question";
+
+interface UseSaveQuestionParams {
+  scheduleCallback: ScheduleCallback;
+}
+
+type UseSaveQuestionResult = (
+  question: Question,
+  config?: { rerunQuery?: boolean },
+) => Promise<void>;
+
+export function useSaveQuestion({
+  scheduleCallback,
+}: UseSaveQuestionParams): UseSaveQuestionResult {
+  const dispatch = useDispatch();
+
+  return useCallback(
+    async (updatedQuestion: Question, { rerunQuery } = {}) => {
+      await dispatch(apiUpdateQuestion(updatedQuestion, { rerunQuery }));
+      await dispatch(setUIControls({ isModifiedFromNotebook: false }));
+
+      scheduleCallback(async () => {
+        if (!rerunQuery) {
+          await dispatch(updateUrl(updatedQuestion, { dirty: false }));
+        }
+      });
+    },
+    [dispatch, scheduleCallback],
+  );
+}