Move tabs manager to zustand (#915)

src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.tsx

@@ -4,6 +4,7 @@ import { logError } from "../../../Common/Logger";
 import { Query } from "../../../Contracts/DataModels";
 import { Collection } from "../../../Contracts/ViewModels";
 import { useSidePanel } from "../../../hooks/useSidePanel";
+import { useTabs } from "../../../hooks/useTabs";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
@@ -36,7 +37,7 @@ export const BrowseQueriesPane: FunctionComponent<BrowseQueriesPaneProps> = ({
       selectedCollection.onNewQueryClick(selectedCollection, undefined, savedQuery.query);
     }
 
-    const queryTab = explorer && (explorer.tabsManager.activeTab() as NewQueryTab);
+    const queryTab = useTabs.getState().activeTab as NewQueryTab;
     queryTab.tabTitle(savedQuery.queryName);
     queryTab.tabPath(`${selectedCollection.databaseId}>${selectedCollection.id()}>${savedQuery.queryName}`);
 

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.test.tsx

@@ -10,7 +10,6 @@ import { Collection, Database } from "../../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../../../UserContext";
-import Explorer from "../../Explorer";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import { DeleteCollectionConfirmationPane } from "./DeleteCollectionConfirmationPane";
@@ -53,10 +52,7 @@ describe("Delete Collection Confirmation Pane", () => {
 
   describe("shouldRecordFeedback()", () => {
     it("should return true if last collection and database does not have shared throughput else false", () => {
-      const fakeExplorer = new Explorer();
-      fakeExplorer.refreshAllDatabases = () => undefined;
-
-      const wrapper = shallow(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
+      const wrapper = shallow(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
 
       const database = { id: ko.observable("testDB") } as Database;
@@ -65,11 +61,11 @@ describe("Delete Collection Confirmation Pane", () => {
       database.isDatabaseShared = ko.computed(() => false);
       useDatabases.getState().addDatabases([database]);
       useSelectedNode.getState().setSelectedNode(database);
-      wrapper.setProps({ explorer: fakeExplorer });
+      wrapper.setProps({});
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
 
       database.isDatabaseShared = ko.computed(() => true);
-      wrapper.setProps({ explorer: fakeExplorer });
+      wrapper.setProps({});
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(false);
     });
   });
@@ -77,8 +73,6 @@ describe("Delete Collection Confirmation Pane", () => {
   describe("submit()", () => {
     const selectedCollectionId = "testCol";
     const databaseId = "testDatabase";
-    const fakeExplorer = {} as Explorer;
-    fakeExplorer.refreshAllDatabases = () => undefined;
     const database = { id: ko.observable(databaseId) } as Database;
     const collection = {
       id: ko.observable(selectedCollectionId),
@@ -115,7 +109,7 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     it("should call delete collection", () => {
-      const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
+      const wrapper = mount(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
       expect(wrapper).toMatchSnapshot();
 
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
@@ -132,7 +126,7 @@ describe("Delete Collection Confirmation Pane", () => {
     });
 
     it("should record feedback", async () => {
-      const wrapper = mount(<DeleteCollectionConfirmationPane explorer={fakeExplorer} />);
+      const wrapper = mount(<DeleteCollectionConfirmationPane refreshDatabases={() => undefined} />);
       expect(wrapper.exists("#confirmCollectionId")).toBe(true);
       wrapper
         .find("#confirmCollectionId")

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -6,23 +6,23 @@ import DeleteFeedback from "../../../Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { Collection } from "../../../Contracts/ViewModels";
 import { useSidePanel } from "../../../hooks/useSidePanel";
+import { useTabs } from "../../../hooks/useTabs";
 import { DefaultExperienceUtility } from "../../../Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";
 import { getCollectionName } from "../../../Utils/APITypeUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
 import { useDatabases } from "../../useDatabases";
 import { useSelectedNode } from "../../useSelectedNode";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface DeleteCollectionConfirmationPaneProps {
-  explorer: Explorer;
+  refreshDatabases: () => Promise<void>;
 }
 
 export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectionConfirmationPaneProps> = ({
-  explorer,
+  refreshDatabases,
 }: DeleteCollectionConfirmationPaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
@@ -31,8 +31,7 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
   const [isExecuting, setIsExecuting] = useState(false);
 
   const shouldRecordFeedback = (): boolean =>
-    useDatabases.getState().isLastCollection() &&
-    !useSelectedNode.getState().findSelectedDatabase()?.isDatabaseShared();
+    useDatabases.getState().isLastCollection() && !useDatabases.getState().findSelectedDatabase()?.isDatabaseShared();
 
   const collectionName = getCollectionName().toLocaleLowerCase();
   const paneTitle = "Delete " + collectionName;
@@ -63,10 +62,12 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
 
       setIsExecuting(false);
       useSelectedNode.getState().setSelectedNode(collection.database);
-      explorer.tabsManager?.closeTabsByComparator(
-        (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
-      );
-      explorer.refreshAllDatabases();
+      useTabs
+        .getState()
+        .closeTabsByComparator(
+          (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
+        );
+      refreshDatabases();
 
       TelemetryProcessor.traceSuccess(Action.DeleteCollection, paneInfo, startKey);
 

src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -2,11 +2,7 @@
 
 exports[`Delete Collection Confirmation Pane submit() should call delete collection 1`] = `
 <DeleteCollectionConfirmationPane
-  explorer={
-    Object {
-      "refreshAllDatabases": [Function],
-    }
-  }
+  refreshDatabases={[Function]}
 >
   <RightPaneForm
     formError=""

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

@@ -10,15 +10,12 @@ import { Collection, Database } from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../../UserContext";
-import Explorer from "../Explorer";
-import { TabsManager } from "../Tabs/TabsManager";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 import { DeleteDatabaseConfirmationPanel } from "./DeleteDatabaseConfirmationPanel";
 
 describe("Delete Database Confirmation Pane", () => {
   const selectedDatabaseId = "testDatabase";
-  let fakeExplorer: Explorer;
   let database: Database;
 
   beforeAll(() => {
@@ -37,10 +34,6 @@ describe("Delete Database Confirmation Pane", () => {
   });
 
   beforeEach(() => {
-    fakeExplorer = {} as Explorer;
-    fakeExplorer.refreshAllDatabases = () => undefined;
-    fakeExplorer.tabsManager = new TabsManager();
-
     database = {} as Database;
     database.collections = ko.observableArray<Collection>([{ id: ko.observable("testCollection") } as Collection]);
     database.id = ko.observable<string>(selectedDatabaseId);
@@ -56,17 +49,17 @@ describe("Delete Database Confirmation Pane", () => {
   });
 
   it("shouldRecordFeedback() should return true if last non empty database or is last database that has shared throughput", () => {
-    const wrapper = shallow(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
+    const wrapper = shallow(<DeleteDatabaseConfirmationPanel refreshDatabases={() => undefined} />);
     expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(true);
 
     useDatabases.getState().addDatabases([database]);
-    wrapper.setProps({ explorer: fakeExplorer });
+    wrapper.setProps({});
     expect(wrapper.exists(".deleteDatabaseFeedback")).toBe(false);
     useDatabases.getState().clearDatabases();
   });
 
   it("Should call delete database", () => {
-    const wrapper = mount(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
+    const wrapper = mount(<DeleteDatabaseConfirmationPanel refreshDatabases={() => undefined} />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
 
@@ -81,7 +74,7 @@ describe("Delete Database Confirmation Pane", () => {
   });
 
   it("should record feedback", async () => {
-    const wrapper = mount(<DeleteDatabaseConfirmationPanel explorer={fakeExplorer} />);
+    const wrapper = mount(<DeleteDatabaseConfirmationPanel refreshDatabases={() => undefined} />);
     expect(wrapper.exists("#confirmDatabaseId")).toBe(true);
     wrapper
       .find("#confirmDatabaseId")

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -7,23 +7,23 @@ import DeleteFeedback from "../../Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils";
 import { Collection, Database } from "../../Contracts/ViewModels";
 import { useSidePanel } from "../../hooks/useSidePanel";
+import { useTabs } from "../../hooks/useTabs";
 import { DefaultExperienceUtility } from "../../Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { logConsoleError } from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
 import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface DeleteDatabaseConfirmationPanelProps {
-  explorer: Explorer;
+  refreshDatabases: () => Promise<void>;
 }
 
 export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseConfirmationPanelProps> = ({
-  explorer,
+  refreshDatabases,
 }: DeleteDatabaseConfirmationPanelProps): JSX.Element => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   const isLastNonEmptyDatabase = useDatabases((state) => state.isLastNonEmptyDatabase);
@@ -32,7 +32,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
   const [formError, setFormError] = useState<string>("");
   const [databaseInput, setDatabaseInput] = useState<string>("");
   const [databaseFeedbackInput, setDatabaseFeedbackInput] = useState<string>("");
-  const selectedDatabase: Database = useSelectedNode.getState().findSelectedDatabase();
+  const selectedDatabase: Database = useDatabases.getState().findSelectedDatabase();
 
   const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
@@ -52,15 +52,18 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     try {
       await deleteDatabase(selectedDatabase.id());
       closeSidePanel();
-      explorer.refreshAllDatabases();
-      explorer.tabsManager.closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
+      refreshDatabases();
+      useTabs.getState().closeTabsByComparator((tab) => tab.node?.id() === selectedDatabase.id());
       useSelectedNode.getState().setSelectedNode(undefined);
       selectedDatabase
         .collections()
         .forEach((collection: Collection) =>
-          explorer.tabsManager.closeTabsByComparator(
-            (tab) => tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
-          )
+          useTabs
+            .getState()
+            .closeTabsByComparator(
+              (tab) =>
+                tab.node?.id() === collection.id() && (tab.node as Collection).databaseId === collection.databaseId
+            )
         );
       TelemetryProcessor.traceSuccess(
         Action.DeleteDatabase,

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -20,7 +20,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "_isInitializingNotebooks": false,
             "_resetNotebookWorkspace": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],
-            "isSchemaEnabled": [Function],
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
@@ -38,10 +37,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
               "container": [Circular],
               "parameters": [Function],
             },
-            "tabsManager": TabsManager {
-              "activeTab": [Function],
-              "openedTabs": [Function],
-            },
           },
           "getRepo": [Function],
           "pinRepo": [Function],

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -5,6 +5,7 @@ import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { Query } from "../../../Contracts/DataModels";
 import { useSidePanel } from "../../../hooks/useSidePanel";
+import { useTabs } from "../../../hooks/useTabs";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
@@ -34,7 +35,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
       logConsoleError("Failed to save query: account not setup to save queries");
     }
 
-    const queryTab = explorer && (explorer.tabsManager.activeTab() as NewQueryTab);
+    const queryTab = useTabs.getState().activeTab as NewQueryTab;
     const query: string = queryTab && queryTab.iTabAccessor.onSaveClickEvent();
 
     if (!queryName || queryName.length === 0) {

src/Explorer/Panes/StringInputPane/StringInputPane.tsx

@@ -1,15 +1,14 @@
 import { TextField } from "@fluentui/react";
 import React, { FormEvent, FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import { useTabs } from "../../../hooks/useTabs";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
-import Explorer from "../../Explorer";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { NotebookContentItem } from "../../Notebook/NotebookContentItem";
 import NotebookV2Tab from "../../Tabs/NotebookV2Tab";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
 
 export interface StringInputPanelProps {
-  explorer: Explorer;
   closePanel: () => void;
   errorMessage: string;
   inProgressMessage: string;
@@ -23,7 +22,6 @@ export interface StringInputPanelProps {
 }
 
 export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
-  explorer: container,
   closePanel,
   errorMessage,
   inProgressMessage,
@@ -55,10 +53,12 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
       logConsoleInfo(`${successMessage}: ${stringInput}`);
       const originalPath = notebookFile.path;
 
-      const notebookTabs = container.tabsManager.getTabs(
-        ViewModels.CollectionTabKind.NotebookV2,
-        (tab: NotebookV2Tab) => tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), originalPath)
-      );
+      const notebookTabs = useTabs
+        .getState()
+        .getTabs(
+          ViewModels.CollectionTabKind.NotebookV2,
+          (tab: NotebookV2Tab) => tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), originalPath)
+        );
       notebookTabs.forEach((tab) => {
         tab.tabTitle(newNotebookFile.name);
         tab.tabPath(newNotebookFile.path);

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -10,7 +10,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "_isInitializingNotebooks": false,
       "_resetNotebookWorkspace": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],
-      "isSchemaEnabled": [Function],
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
@@ -28,10 +27,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         "container": [Circular],
         "parameters": [Function],
       },
-      "tabsManager": TabsManager {
-        "activeTab": [Function],
-        "openedTabs": [Function],
-      },
     }
   }
   inProgressMessage="Creating directory "

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -2,15 +2,7 @@
 
 exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
 <DeleteDatabaseConfirmationPanel
-  explorer={
-    Object {
-      "refreshAllDatabases": [Function],
-      "tabsManager": TabsManager {
-        "activeTab": [Function],
-        "openedTabs": [Function],
-      },
-    }
-  }
+  refreshDatabases={[Function]}
 >
   <RightPaneForm
     formError=""