fix(sdk): Change QuestionEditor tab name to 'Editor' (#48821)

enterprise/frontend/src/embedding-sdk/README.md

@@ -356,7 +356,7 @@ const questionId = 1; // This is the question ID you want to embed
 #### _Customizing Interactive Questions_
 
 By default, the Metabase Embedding SDK provides a default layout for interactive questions that allows you to view your
-questions, apply filters and aggregations, and access functionality within the notebook editor. However, we also know
+questions, apply filters and aggregations, and access functionality within the Query Editor. However, we also know
 that there's no such thing as a one-size-fits-all when it comes to style, usage, and all of the other variables that
 make your application unique. Therefore, we've added the ability to customize the layout of interactive questions.
 
@@ -408,19 +408,19 @@ To customize the layout, use namespaced components within the `InteractiveQuesti
 
 These components are available via the `InteractiveQuestion` namespace (i.e. `<InteractiveQuestion.ComponentName />`)
 
-| Component               | Info                                                                                                                         |
-|-------------------------|------------------------------------------------------------------------------------------------------------------------------|
-| `BackButton`            | The back button, which provides `back` functionality for the InteractiveDashboard                                            |
-| `FilterBar`             | The row of badges that contains the current filters that are applied to the question                                         |
-| `Filter`                | The Filter pane containing all possible filters                                                                              |
-| `FilterButton`          | The button used in the default layout to open the Filter pane. You can replace this button with your own implementation.     |
-| `ResetButton`           | The button used to reset the question after the question has been modified with filters/aggregations/etc                     |
-| `Title`                 | The question's title                                                                                                         |
-| `Summarize`             | The Summarize pane containing all possible aggregations                                                                      |
-| `SummarizeButton`       | The button used in the default layout to open the Summarize pane. You can replace this button with your own implementation.  |
-| `Notebook`              | The Notebook editor that allows for more filter, aggregation, and custom steps                                               |
-| `NotebookButton`        | The button used in the default layout to open the Notebook editor. You can replace this button with your own implementation. |
-| `QuestionVisualization` | The chart visualization for the question                                                                                     |
+| Component               | Info                                                                                                                        |
+|-------------------------|-----------------------------------------------------------------------------------------------------------------------------|
+| `BackButton`            | The back button, which provides `back` functionality for the InteractiveDashboard                                           |
+| `FilterBar`             | The row of badges that contains the current filters that are applied to the question                                        |
+| `Filter`                | The Filter pane containing all possible filters                                                                             |
+| `FilterButton`          | The button used in the default layout to open the Filter pane. You can replace this button with your own implementation.    |
+| `ResetButton`           | The button used to reset the question after the question has been modified with filters/aggregations/etc                    |
+| `Title`                 | The question's title                                                                                                        |
+| `Summarize`             | The Summarize pane containing all possible aggregations                                                                     |
+| `SummarizeButton`       | The button used in the default layout to open the Summarize pane. You can replace this button with your own implementation. |
+| `Editor`                | The Query Editor that allows for more filter, aggregation, and custom steps                                                 |
+| `EditorButton`          | The button used in the default layout to open the Editor. You can replace this button with your own implementation.         |
+| `QuestionVisualization` | The chart visualization for the question                                                                                    |
 
 ### Embedding a static dashboard
 
@@ -531,7 +531,7 @@ export default function App() {
 
 ### Creating a Question
 
-With the `CreateQuestion` component, you can create a new question from scratch using the Metabase Notebook Editor.
+With the `CreateQuestion` component, you can create a new question from scratch using the Metabase Query Editor.
 
 #### Parameters
 
@@ -562,7 +562,7 @@ export default function App() {
 
 ### Modifying a Question
 
-With the `ModifyQuestion` component, you can edit an existing question using the Metabase Notebook Editor.
+With the `ModifyQuestion` component, you can edit an existing question using the Metabase Query Editor.
 
 #### Parameters
 

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Notebook.tsx → enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/Editor.tsx

@@ -12,9 +12,9 @@ import { getSetting } from "metabase/selectors/settings";
 import { ScrollArea } from "metabase/ui";
 import type Question from "metabase-lib/v1/Question";
 
-type NotebookProps = { onApply?: () => void };
+type EditorProps = { onApply?: () => void };
 
-export const Notebook = ({ onApply = () => {} }: NotebookProps) => {
+export const Editor = ({ onApply = () => {} }: EditorProps) => {
   // Loads databases and metadata so we can show notebook steps for the selected data source
   useDatabaseListQuery();
 

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/NotebookButton.tsx → enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/EditorButton.tsx

 import { useInteractiveQuestionContext } from "embedding-sdk/components/private/InteractiveQuestion/context";
 import { QuestionNotebookButton } from "metabase/query_builder/components/view/ViewHeader/components";
 
-export const NotebookButton = ({
+export const EditorButton = ({
   isOpen,
   onClick,
 }: {

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestion/components/index.ts

@@ -3,8 +3,8 @@ export * from "./ChartTypeSelector";
 export * from "./Filter";
 export * from "./FilterBar";
 export * from "./FilterButton";
-export * from "./Notebook";
-export * from "./NotebookButton";
+export * from "./Editor";
+export * from "./EditorButton";
 export * from "./ResetButton";
 export * from "./SaveButton";
 export * from "./SdkSaveQuestionForm";

enterprise/frontend/src/embedding-sdk/components/private/InteractiveQuestionResult/InteractiveQuestionResult.tsx

@@ -25,7 +25,7 @@ export interface InteractiveQuestionResultProps {
   customTitle?: ReactNode;
 }
 
-type QuestionView = "notebook" | "filter" | "summarize" | "visualization";
+type QuestionView = "editor" | "filter" | "summarize" | "visualization";
 
 const ContentView = ({
   questionView,
@@ -41,8 +41,8 @@ const ContentView = ({
     .with("summarize", () => (
       <InteractiveQuestion.Summarize onClose={onReturnToVisualization} />
     ))
-    .with("notebook", () => (
-      <InteractiveQuestion.Notebook onApply={onReturnToVisualization} />
+    .with("editor", () => (
+      <InteractiveQuestion.Editor onApply={onReturnToVisualization} />
     ))
     .otherwise(() => <InteractiveQuestion.QuestionVisualization />);
 
@@ -96,11 +96,11 @@ export const InteractiveQuestionResult = ({
             onClose={() => setQuestionView("visualization")}
             isOpen={questionView === "summarize"}
           />
-          <InteractiveQuestion.NotebookButton
-            isOpen={questionView === "notebook"}
+          <InteractiveQuestion.EditorButton
+            isOpen={questionView === "editor"}
             onClick={() =>
               setQuestionView(
-                questionView === "notebook" ? "visualization" : "notebook",
+                questionView === "editor" ? "visualization" : "editor",
               )
             }
           />

enterprise/frontend/src/embedding-sdk/components/private/QuestionEditor/QuestionEditor.tsx

 import { useDisclosure } from "@mantine/hooks";
 import { useState } from "react";
+import { t } from "ttag";
 
 import { FlexibleSizeComponent } from "embedding-sdk";
 import { InteractiveQuestion } from "embedding-sdk/components/public/InteractiveQuestion";
@@ -23,8 +24,8 @@ const QuestionEditorInner = () => {
   } = useInteractiveQuestionContext();
 
   const [activeTab, setActiveTab] = useState<
-    "notebook" | "visualization" | (string & unknown) | null
-  >("notebook");
+    "editor" | "visualization" | (string & unknown) | null
+  >("editor");
   const [isSaveModalOpen, { open: openSaveModal, close: closeSaveModal }] =
     useDisclosure(false);
 
@@ -41,17 +42,17 @@ const QuestionEditorInner = () => {
       <Tabs
         value={activeTab}
         onTabChange={setActiveTab}
-        defaultValue="notebook"
+        defaultValue="editor"
         h="100%"
         display="flex"
         style={{ flexDirection: "column", overflow: "hidden" }}
       >
         <Group position="apart">
           <Tabs.List>
-            <Tabs.Tab value="notebook">Notebook</Tabs.Tab>
+            <Tabs.Tab value="editor">{t`Editor`}</Tabs.Tab>
             {queryResults && (
               <Tabs.Tab value="visualization" onClick={onOpenVisualizationTab}>
-                Visualization
+                {t`Visualization`}
               </Tabs.Tab>
             )}
           </Tabs.List>
@@ -60,7 +61,7 @@ const QuestionEditorInner = () => {
             <Group>
               <InteractiveQuestion.ResetButton
                 onClick={() => {
-                  setActiveTab("notebook");
+                  setActiveTab("editor");
                   closeSaveModal();
                 }}
               />
@@ -71,8 +72,8 @@ const QuestionEditorInner = () => {
           )}
         </Group>
 
-        <Tabs.Panel value="notebook" h="100%" style={{ overflow: "auto" }}>
-          <InteractiveQuestion.Notebook
+        <Tabs.Panel value="editor" h="100%" style={{ overflow: "auto" }}>
+          <InteractiveQuestion.Editor
             onApply={() => setActiveTab("visualization")}
           />
         </Tabs.Panel>

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.NotebookButton.unit.spec.tsx → enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.EditorButton.unit.spec.tsx

@@ -95,12 +95,12 @@ const setup = ({
   return { clickSpy };
 };
 
-describe("InteractiveQuestion.NotebookButton", () => {
+describe("InteractiveQuestion.EditorButton", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
-  it("should render the notebook button", async () => {
+  it("should render the editor button", async () => {
     const shouldRenderSpy = jest.spyOn(QuestionNotebookButton, "shouldRender");
 
     setup({ isOpen: true });

enterprise/frontend/src/embedding-sdk/components/public/InteractiveQuestion/InteractiveQuestion.tsx

@@ -3,11 +3,11 @@ import type { PropsWithChildren } from "react";
 import {
   BackButton,
   ChartTypeSelector,
+  Editor,
+  EditorButton,
   Filter,
   FilterBar,
   FilterButton,
-  Notebook,
-  NotebookButton,
   QuestionResetButton,
   QuestionVisualization,
   SaveButton,
@@ -87,8 +87,12 @@ const InteractiveQuestion = withPublicComponentWrapper(
   Title: typeof Title;
   Summarize: typeof Summarize;
   SummarizeButton: typeof SummarizeButton;
-  Notebook: typeof Notebook;
-  NotebookButton: typeof NotebookButton;
+  /** @deprecated Use `InteractiveQuestion.Editor` instead */
+  Notebook: typeof Editor;
+  Editor: typeof Editor;
+  /** @deprecated Use `InteractiveQuestion.EditorButton` instead */
+  NotebookButton: typeof EditorButton;
+  EditorButton: typeof EditorButton;
   QuestionVisualization: typeof QuestionVisualization;
   SaveQuestionForm: typeof SdkSaveQuestionForm;
   SaveButton: typeof SaveButton;
@@ -103,8 +107,12 @@ InteractiveQuestion.ResetButton = QuestionResetButton;
 InteractiveQuestion.Title = Title;
 InteractiveQuestion.Summarize = Summarize;
 InteractiveQuestion.SummarizeButton = SummarizeButton;
-InteractiveQuestion.Notebook = Notebook;
-InteractiveQuestion.NotebookButton = NotebookButton;
+/** @deprecated Use `InteractiveQuestion.Editor` instead */
+InteractiveQuestion.Notebook = Editor;
+InteractiveQuestion.Editor = Editor;
+/** @deprecated Use `InteractiveQuestion.EditorButton` instead */
+InteractiveQuestion.NotebookButton = EditorButton;
+InteractiveQuestion.EditorButton = EditorButton;
 InteractiveQuestion.QuestionVisualization = QuestionVisualization;
 InteractiveQuestion.SaveQuestionForm = SdkSaveQuestionForm;
 InteractiveQuestion.SaveButton = SaveButton;