Pure React Command Bar (#828)

src/Explorer/Explorer.tsx

@@ -35,10 +35,9 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import * as ComponentRegisterer from "./ComponentRegisterer";
-import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandButtonComponent";
 import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
-import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
+import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
 import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
@@ -144,9 +143,6 @@ export default class Explorer {
     content: string;
   };
 
-  // React adapters
-  private commandBarComponentAdapter: CommandBarComponentAdapter;
-
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
   constructor(params?: ExplorerParams) {
@@ -295,7 +291,7 @@ export default class Explorer {
     this.tabsManager.openedTabs.subscribe((tabs) => {
       if (tabs.length === 0) {
         this.selectedNode(undefined);
-        this.onUpdateTabsButtons([]);
+        useCommandBar.getState().setContextButtons([]);
       }
     });
 
@@ -322,8 +318,6 @@ export default class Explorer {
         break;
     }
 
-    this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
-
     this._initSettings();
 
     TelemetryProcessor.traceSuccess(
@@ -786,10 +780,6 @@ export default class Explorer {
     );
   }
 
-  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
-    this.commandBarComponentAdapter.onUpdateTabsButtons(buttons);
-  }
-
   private refreshAndExpandNewDatabases(newDatabases: ViewModels.Database[]): Q.Promise<void> {
     // we reload collections for all databases so the resource tree reflects any collection-level changes
     // i.e addition of stored procedures, etc.
@@ -1081,7 +1071,6 @@ export default class Explorer {
         hashLocation: "notebooks",
         isTabsContentExpanded: ko.observable(true),
         onLoadStartKey: null,
-        onUpdateTabsButtons: this.onUpdateTabsButtons,
         container: this,
         notebookContentItem,
       };
@@ -1416,7 +1405,6 @@ export default class Explorer {
       hashLocation: `${hashLocation} ${index}`,
       isTabsContentExpanded: ko.observable(true),
       onLoadStartKey: null,
-      onUpdateTabsButtons: this.onUpdateTabsButtons,
       container: this,
       kind: kind,
     });
@@ -1447,7 +1435,6 @@ export default class Explorer {
             title: title,
             tabPath: title,
             hashLocation: hashLocation,
-            onUpdateTabsButtons: this.onUpdateTabsButtons,
             onLoadStartKey: null,
             isTabsContentExpanded: ko.observable(true),
           },
@@ -1478,7 +1465,7 @@ export default class Explorer {
     if (activeTab) {
       activeTab.onActivate(); // TODO only update tabs buttons?
     } else {
-      this.onUpdateTabsButtons([]);
+      useCommandBar.getState().setContextButtons([]);
     }
   }