Pure React Command Bar (#828)

2025-12-19 00:41:31 +00:00 · 2021-05-28 15:20:59 -05:00
parent 18ce8749ed
commit b875407d49
24 changed files with 93 additions and 211 deletions
--- a/src/Explorer/Tree/Collection.ts
+++ b/src/Explorer/Tree/Collection.ts
@@ -21,6 +21,7 @@ import { userContext } from "../../UserContext";
 import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { CassandraAPIDataClient, CassandraTableKey, CassandraTableKeys } from "../Tables/TableDataClient";
 import ConflictsTab from "../Tabs/ConflictsTab";
 import DocumentsTab from "../Tabs/DocumentsTab";
@@ -221,7 +222,7 @@ export default class Collection implements ViewModels.Collection {
    } else {
      this.expandCollection();
    }
-    this.container.onUpdateTabsButtons([]);
+    useCommandBar.getState().setContextButtons([]);
    this.container.tabsManager.refreshActiveTab(
      (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
    );
@@ -299,7 +300,6 @@ export default class Collection implements ViewModels.Collection {
        tabPath: `${this.databaseId}>${this.id()}>Documents`,
        hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/documents`,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(documentsTab);
@@ -346,7 +346,6 @@ export default class Collection implements ViewModels.Collection {
        tabPath: `${this.databaseId}>${this.id()}>Conflicts`,
        hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/conflicts`,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(conflictsTab);
@@ -401,7 +400,6 @@ export default class Collection implements ViewModels.Collection {
        node: this,
        hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/entities`,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(queryTablesTab);
@@ -454,7 +452,6 @@ export default class Collection implements ViewModels.Collection {
        databaseId: this.databaseId,
        isTabsContentExpanded: this.container.isTabsContentExpanded,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(graphTab);
@@ -501,7 +498,6 @@ export default class Collection implements ViewModels.Collection {
        node: this,
        hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/mongoDocuments`,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });
      this.container.tabsManager.activateNewTab(mongoDocumentsTab);
    }
@@ -547,7 +543,6 @@ export default class Collection implements ViewModels.Collection {
        node: this,
        hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/schemaAnalyzer`,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      })
    );
  };
@@ -587,7 +582,6 @@ export default class Collection implements ViewModels.Collection {
      collection: this,
      node: this,
      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/settings`,
-      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
    };

    let settingsTabV2 = matchingTabs && (matchingTabs[0] as CollectionSettingsTabV2);
@@ -632,7 +626,6 @@ export default class Collection implements ViewModels.Collection {
      queryText: queryText,
      partitionKey: collection.partitionKey,
      onLoadStartKey: startKey,
-      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
    });

    this.container.tabsManager.activateNewTab(queryTab);
@@ -660,7 +653,6 @@ export default class Collection implements ViewModels.Collection {
      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/mongoQuery`,
      partitionKey: collection.partitionKey,
      onLoadStartKey: startKey,
-      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
    });

    this.container.tabsManager.activateNewTab(mongoQueryTab);
@@ -692,7 +684,6 @@ export default class Collection implements ViewModels.Collection {
      databaseId: this.databaseId,
      isTabsContentExpanded: this.container.isTabsContentExpanded,
      onLoadStartKey: startKey,
-      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
    });

    this.container.tabsManager.activateNewTab(graphTab);
@@ -707,7 +698,6 @@ export default class Collection implements ViewModels.Collection {
      collection: this,
      node: this,
      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/mongoShell`,
-      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
    });

    this.container.tabsManager.activateNewTab(mongoShellTab);
--- a/src/Explorer/Tree/Database.ts
+++ b/src/Explorer/Tree/Database.ts
@@ -81,7 +81,6 @@ export default class Database implements ViewModels.Database {
            database: this,
            hashLocation: `${Constants.HashRoutePrefixes.databasesWithId(this.id())}/settings`,
            onLoadStartKey: startKey,
-            onUpdateTabsButtons: this.container.onUpdateTabsButtons,
          };
          settingsTab = new DatabaseSettingsTabV2(tabOptions);
          settingsTab.pendingNotification(pendingNotification);
--- a/src/Explorer/Tree/ResourceTokenCollection.ts
+++ b/src/Explorer/Tree/ResourceTokenCollection.ts
@@ -3,13 +3,12 @@ import * as Constants from "../../Common/Constants";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import DocumentId from "./DocumentId";
-import DocumentsTab from "../Tabs/DocumentsTab";
-import Q from "q";
-import QueryTab from "../Tabs/QueryTab";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import Explorer from "../Explorer";
+import DocumentsTab from "../Tabs/DocumentsTab";
+import QueryTab from "../Tabs/QueryTab";
 import TabsBase from "../Tabs/TabsBase";
+import DocumentId from "./DocumentId";

 export default class ResourceTokenCollection implements ViewModels.CollectionBase {
  public nodeKind: string;
@@ -96,7 +95,6 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
      partitionKey: collection.partitionKey,
      resourceTokenPartitionKey: this.container.resourceTokenPartitionKey(),
      onLoadStartKey: startKey,
-      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
    });

    this.container.tabsManager.activateNewTab(queryTab);
@@ -143,7 +141,6 @@ export default class ResourceTokenCollection implements ViewModels.CollectionBas
        tabPath: `${this.databaseId}>${this.id()}>Documents`,
        hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/documents`,
        onLoadStartKey: startKey,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(documentsTab);
--- a/src/Explorer/Tree/ResourceTreeAdapter.test.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.test.tsx
@@ -1,12 +1,12 @@
+import { shallow } from "enzyme";
 import * as ko from "knockout";
+import React from "react";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import React from "react";
-import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
-import { shallow } from "enzyme";
-import { TreeComponent, TreeNode, TreeComponentProps } from "../Controls/TreeComponent/TreeComponent";
+import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import Collection from "./Collection";
+import { ResourceTreeAdapter } from "./ResourceTreeAdapter";

 const schema: DataModels.ISchema = {
  id: "fakeSchemaId",
@@ -211,9 +211,6 @@ const schema: DataModels.ISchema = {
 const createMockContainer = (): Explorer => {
  const mockContainer = new Explorer();
  mockContainer.selectedNode = ko.observable<ViewModels.TreeNode>();
-  mockContainer.onUpdateTabsButtons = () => {
-    return;
-  };

  return mockContainer;
 };
--- a/src/Explorer/Tree/ResourceTreeAdapter.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapter.tsx
@@ -27,6 +27,7 @@ import { ResourceTreeContextMenuButtonFactory } from "../ContextMenuButtonFactor
 import { AccordionComponent, AccordionItemComponent } from "../Controls/Accordion/AccordionComponent";
 import { TreeComponent, TreeNode, TreeNodeMenuItem } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
+import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { NotebookUtil } from "../Notebook/NotebookUtil";
@@ -211,7 +212,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
          }
          databaseNode.isLoading = false;
          database.selectDatabase();
-          this.container.onUpdateTabsButtons([]);
+          useCommandBar.getState().setContextButtons([]);
          this.container.tabsManager.refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
        },
        onContextMenuOpen: () => this.container.selectedNode(database),
@@ -330,7 +331,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
      onClick: () => {
        // Rewritten version of expandCollapseCollection
        this.container.selectedNode(collection);
-        this.container.onUpdateTabsButtons([]);
+        useCommandBar.getState().setContextButtons([]);
        this.container.tabsManager.refreshActiveTab(
          (tab: TabsBase) =>
            tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
--- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx
@@ -1,19 +1,17 @@
+import { shallow } from "enzyme";
 import * as ko from "knockout";
-import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
+import React from "react";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import React from "react";
+import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import Explorer from "../Explorer";
 import ResourceTokenCollection from "./ResourceTokenCollection";
 import { ResourceTreeAdapterForResourceToken } from "./ResourceTreeAdapterForResourceToken";
-import { shallow } from "enzyme";
-import { TreeComponent, TreeNode, TreeComponentProps } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";

 const createMockContainer = (): Explorer => {
  let mockContainer = {} as Explorer;
  mockContainer.resourceTokenCollection = createMockCollection(mockContainer);
  mockContainer.selectedNode = ko.observable<ViewModels.TreeNode>();
-  mockContainer.onUpdateTabsButtons = () => {};

  return mockContainer;
 };
--- a/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
+++ b/src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
@@ -1,13 +1,14 @@
 import * as ko from "knockout";
-import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
 import * as React from "react";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { NotebookContentItem } from "../Notebook/NotebookContentItem";
-import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
-import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import Explorer from "../Explorer";
+import { ReactAdapter } from "../../Bindings/ReactBindingHandler";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
+import { TreeComponent, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import Explorer from "../Explorer";
+import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
+import { mostRecentActivity } from "../MostRecentActivity/MostRecentActivity";
+import { NotebookContentItem } from "../Notebook/NotebookContentItem";

 export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
  public parameters: ko.Observable<number>;
@@ -59,7 +60,7 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
      onClick: () => {
        // Rewritten version of expandCollapseCollection
        this.container.selectedNode(collection);
-        this.container.onUpdateTabsButtons([]);
+        useCommandBar.getState().setContextButtons([]);
        this.container.tabsManager.refreshActiveTab(
          (tab) => tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
        );
--- a/src/Explorer/Tree/StoredProcedure.ts
+++ b/src/Explorer/Tree/StoredProcedure.ts
@@ -76,7 +76,6 @@ export default class StoredProcedure {
      collection: source,
      node: source,
      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(source.databaseId, source.id())}/sproc`,
-      onUpdateTabsButtons: source.container.onUpdateTabsButtons,
    });

    source.container.tabsManager.activateNewTab(storedProcedureTab);
@@ -122,7 +121,6 @@ export default class StoredProcedure {
          this.collection.databaseId,
          this.collection.id()
        )}/sprocs/${this.id()}`,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(storedProcedureTab);
--- a/src/Explorer/Tree/Trigger.ts
+++ b/src/Explorer/Tree/Trigger.ts
@@ -58,7 +58,6 @@ export default class Trigger {
      collection: source,
      node: source,
      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(source.databaseId, source.id())}/trigger`,
-      onUpdateTabsButtons: source.container.onUpdateTabsButtons,
    });

    source.container.tabsManager.activateNewTab(triggerTab);
@@ -97,7 +96,6 @@ export default class Trigger {
          this.collection.databaseId,
          this.collection.id()
        )}/triggers/${this.id()}`,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(triggerTab);
--- a/src/Explorer/Tree/UserDefinedFunction.ts
+++ b/src/Explorer/Tree/UserDefinedFunction.ts
@@ -44,7 +44,6 @@ export default class UserDefinedFunction {
      collection: source,
      node: source,
      hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(source.databaseId, source.id())}/udf`,
-      onUpdateTabsButtons: source.container.onUpdateTabsButtons,
    });

    source.container.tabsManager.activateNewTab(userDefinedFunctionTab);
@@ -81,7 +80,6 @@ export default class UserDefinedFunction {
          this.collection.databaseId,
          this.collection.id()
        )}/udfs/${this.id()}`,
-        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
      });

      this.container.tabsManager.activateNewTab(userDefinedFunctionTab);