Migrate SidePanel state to Zustand (#799)

Co-authored-by: hardiknai-techm <HN00734461@TechMahindra.com>

src/Explorer/Explorer.tsx

@@ -18,6 +18,7 @@ import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
+import { useSidePanel } from "../hooks/useSidePanel";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import { RouteHandler } from "../RouteHandlers/RouteHandler";
@@ -53,7 +54,6 @@ import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfir
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
 import { GitHubReposPanel } from "./Panes/GitHubReposPanel/GitHubReposPanel";
-import { LoadQueryPane } from "./Panes/LoadQueryPane/LoadQueryPane";
 import { SaveQueryPane } from "./Panes/SaveQueryPane/SaveQueryPane";
 import { SettingsPane } from "./Panes/SettingsPane/SettingsPane";
 import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksPanel";
@@ -81,11 +81,8 @@ BindingHandlersRegisterer.registerBindingHandlers();
 var tmp = ComponentRegisterer;
 
 export interface ExplorerParams {
-  setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
   setNotificationConsoleData: (consoleData: ConsoleData) => void;
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
-  openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
-  closeSidePanel: () => void;
   tabsManager: TabsManager;
 }
 
@@ -100,15 +97,9 @@ export default class Explorer {
   public tableDataClient: TableDataClient;
   public splitter: Splitter;
 
-  // Notification Console
-  private setIsNotificationConsoleExpanded: (isExpanded: boolean) => void;
   private setNotificationConsoleData: (consoleData: ConsoleData) => void;
   private setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
 
-  // Panes
-  public openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
-  public closeSidePanel: () => void;
-
   // Resource Tree
   public databases: ko.ObservableArray<ViewModels.Database>;
   public selectedDatabaseId: ko.Computed<string>;
@@ -159,11 +150,8 @@ export default class Explorer {
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
   constructor(params?: ExplorerParams) {
-    this.setIsNotificationConsoleExpanded = params?.setIsNotificationConsoleExpanded;
     this.setNotificationConsoleData = params?.setNotificationConsoleData;
     this.setInProgressConsoleDataIdToBeDeleted = params?.setInProgressConsoleDataIdToBeDeleted;
-    this.openSidePanel = params?.openSidePanel;
-    this.closeSidePanel = params?.closeSidePanel;
 
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
@@ -483,14 +471,6 @@ export default class Explorer {
     this.setInProgressConsoleDataIdToBeDeleted(id);
   }
 
-  public expandConsole(): void {
-    this.setIsNotificationConsoleExpanded(true);
-  }
-
-  public collapseConsole(): void {
-    this.setIsNotificationConsoleExpanded(false);
-  }
-
   public refreshDatabaseForResourceToken(): Q.Promise<any> {
     const databaseId = this.resourceTokenDatabaseId();
     const collectionId = this.resourceTokenCollectionId();
@@ -1136,12 +1116,12 @@ export default class Explorer {
     if (openedNotebookTabs.length > 0) {
       this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
-      this.openSidePanel(
+      useSidePanel.getState().openSidePanel(
         "Rename Notebook",
         <StringInputPane
           explorer={this}
           closePanel={() => {
-            this.closeSidePanel();
+            useSidePanel.getState().closeSidePanel();
             this.resourceTree.triggerRender();
           }}
           inputLabel="Enter new notebook name"
@@ -1167,12 +1147,12 @@ export default class Explorer {
       throw new Error(error);
     }
 
-    this.openSidePanel(
+    useSidePanel.getState().openSidePanel(
       "Create new directory",
       <StringInputPane
         explorer={this}
         closePanel={() => {
-          this.closeSidePanel();
+          useSidePanel.getState().closeSidePanel();
           this.resourceTree.triggerRender();
         }}
         errorMessage="Could not create directory "
@@ -1561,160 +1541,115 @@ export default class Explorer {
       return false;
     });
   }
-
   public openDeleteCollectionConfirmationPane(): void {
-    this.openSidePanel(
-      "Delete " + getCollectionName(),
-      <DeleteCollectionConfirmationPane explorer={this} closePanel={this.closeSidePanel} />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel("Delete " + getCollectionName(), <DeleteCollectionConfirmationPane explorer={this} />);
   }
 
   public openDeleteDatabaseConfirmationPane(): void {
-    this.openSidePanel(
-      "Delete " + getDatabaseName(),
-      <DeleteDatabaseConfirmationPanel
-        explorer={this}
-        openNotificationConsole={() => this.expandConsole()}
-        closePanel={this.closeSidePanel}
-        selectedDatabase={this.findSelectedDatabase()}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Delete " + getDatabaseName(),
+        <DeleteDatabaseConfirmationPanel explorer={this} selectedDatabase={this.findSelectedDatabase()} />
+      );
   }
-
   public openUploadItemsPanePane(): void {
-    this.openSidePanel("Upload " + getUploadName(), <UploadItemsPane explorer={this} />);
+    useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane explorer={this} />);
   }
-
-  public openSettingPane(): void {
-    this.openSidePanel(
-      "Setting",
-      <SettingsPane expandConsole={() => this.expandConsole()} closePanel={this.closeSidePanel} />
-    );
-  }
-
   public openExecuteSprocParamsPanel(storedProcedure: StoredProcedure): void {
-    this.openSidePanel(
-      "Input parameters",
-      <ExecuteSprocParamsPane
-        storedProcedure={storedProcedure}
-        expandConsole={() => this.expandConsole()}
-        closePanel={() => this.closeSidePanel()}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
   public async openAddCollectionPanel(databaseId?: string): Promise<void> {
     await this.loadDatabaseOffers();
-    this.openSidePanel(
-      "New " + getCollectionName(),
-      <AddCollectionPanel
-        explorer={this}
-        closePanel={() => this.closeSidePanel()}
-        openNotificationConsole={() => this.expandConsole()}
-        databaseId={databaseId}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel("New " + getCollectionName(), <AddCollectionPanel explorer={this} databaseId={databaseId} />);
   }
   public openAddDatabasePane(): void {
-    this.openSidePanel(
-      "New " + getDatabaseName(),
-      <AddDatabasePanel
-        explorer={this}
-        openNotificationConsole={() => this.expandConsole()}
-        closePanel={this.closeSidePanel}
-      />
-    );
+    useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this} />);
   }
 
   public openBrowseQueriesPanel(): void {
-    this.openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this} closePanel={this.closeSidePanel} />);
-  }
-
-  public openLoadQueryPanel(): void {
-    this.openSidePanel("Load Query", <LoadQueryPane explorer={this} closePanel={() => this.closeSidePanel()} />);
+    useSidePanel.getState().openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this} />);
   }
 
   public openSaveQueryPanel(): void {
-    this.openSidePanel("Save Query", <SaveQueryPane explorer={this} closePanel={() => this.closeSidePanel()} />);
+    useSidePanel.getState().openSidePanel("Save Query", <SaveQueryPane explorer={this} />);
   }
 
   public openUploadFilePanel(parent?: NotebookContentItem): void {
     parent = parent || this.resourceTree.myNotebooksContentRoot;
-    this.openSidePanel(
-      "Upload file to notebook server",
-      <UploadFilePane
-        expandConsole={() => this.expandConsole()}
-        closePanel={this.closeSidePanel}
-        uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Upload file to notebook server",
+        <UploadFilePane uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)} />
+      );
   }
 
   public openCassandraAddCollectionPane(): void {
-    this.openSidePanel(
-      "Add Table",
-      <CassandraAddCollectionPane
-        explorer={this}
-        closePanel={() => this.closeSidePanel()}
-        cassandraApiClient={new CassandraAPIDataClient()}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Add Table",
+        <CassandraAddCollectionPane explorer={this} cassandraApiClient={new CassandraAPIDataClient()} />
+      );
   }
   public openGitHubReposPanel(header: string, junoClient?: JunoClient): void {
-    this.openSidePanel(
-      header,
-      <GitHubReposPanel
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        gitHubClientProp={this.notebookManager.gitHubClient}
-        junoClientProp={junoClient}
-        openNotificationConsole={() => this.expandConsole()}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        header,
+        <GitHubReposPanel
+          explorer={this}
+          gitHubClientProp={this.notebookManager.gitHubClient}
+          junoClientProp={junoClient}
+        />
+      );
   }
 
   public openAddTableEntityPanel(queryTablesTab: QueryTablesTab, tableEntityListViewModel: TableListViewModal): void {
-    this.openSidePanel(
-      "Add Table Entity",
-      <AddTableEntityPanel
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        queryTablesTab={queryTablesTab}
-        tableEntityListViewModel={tableEntityListViewModel}
-        cassandraApiClient={new CassandraAPIDataClient()}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Add Table Entity",
+        <AddTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={queryTablesTab}
+          tableEntityListViewModel={tableEntityListViewModel}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />
+      );
   }
   public openSetupNotebooksPanel(title: string, description: string): void {
-    this.openSidePanel(
-      title,
-      <SetupNoteBooksPanel
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        openNotificationConsole={() => this.expandConsole()}
-        panelTitle={title}
-        panelDescription={description}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(title, <SetupNoteBooksPanel explorer={this} panelTitle={title} panelDescription={description} />);
   }
 
   public openEditTableEntityPanel(queryTablesTab: QueryTablesTab, tableEntityListViewModel: TableListViewModal): void {
-    this.openSidePanel(
-      "Edit Table Entity",
-      <EditTableEntityPanel
-        explorer={this}
-        closePanel={this.closeSidePanel}
-        queryTablesTab={queryTablesTab}
-        tableEntityListViewModel={tableEntityListViewModel}
-        cassandraApiClient={new CassandraAPIDataClient()}
-      />
-    );
+    useSidePanel
+      .getState()
+      .openSidePanel(
+        "Edit Table Entity",
+        <EditTableEntityPanel
+          tableDataClient={this.tableDataClient}
+          queryTablesTab={queryTablesTab}
+          tableEntityListViewModel={tableEntityListViewModel}
+          cassandraApiClient={new CassandraAPIDataClient()}
+        />
+      );
   }
 
   public openTableSelectQueryPanel(queryViewModal: QueryViewModel): void {
-    this.openSidePanel(
-      "Select Column",
-      <TableQuerySelectPanel explorer={this} closePanel={this.closeSidePanel} queryViewModel={queryViewModal} />
-    );
+    useSidePanel.getState().openSidePanel("Select Column", <TableQuerySelectPanel queryViewModel={queryViewModal} />);
+  }
+  public openSettingPane(): void {
+    useSidePanel.getState().openSidePanel("Settings", <SettingsPane />);
   }
 }