Bump dns-packet from 1.3.1 to 1.3.4

Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4.
- [Release notes](https://github.com/mafintosh/dns-packet/releases)
- [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mafintosh/dns-packet/compare/v1.3.1...v1.3.4)

Signed-off-by: dependabot[bot] <support@github.com>

package-lock.json

@@ -171,6 +171,11 @@
         "react": "16.5.2"
       },
       "dependencies": {
+        "monaco-editor": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
+          "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+        },
         "react": {
           "version": "16.5.2",
           "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
@@ -4001,6 +4006,11 @@
             "uuid": "^8.0.0"
           }
         },
+        "monaco-editor": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
+          "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+        },
         "react-redux": {
           "version": "6.0.1",
           "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz",
@@ -9622,9 +9632,9 @@
       "dev": true
     },
     "dns-packet": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
-      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
+      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
       "dev": true,
       "requires": {
         "ip": "^1.1.0",
@@ -19092,17 +19102,30 @@
       "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
     },
     "monaco-editor": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.18.1.tgz",
-      "integrity": "sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw=="
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.24.0.tgz",
+      "integrity": "sha512-o1f0Lz6ABFNTtnEqqqvlY9qzNx24rQZx1RgYNQ8SkWkE+Ka63keHH/RqxQ4QhN4fs/UYOnvAtEUZsPrzccH++A=="
     },
     "monaco-editor-webpack-plugin": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.7.0.tgz",
-      "integrity": "sha512-oItymcnlL14Sjd7EF7q+CMhucfwR/2BxsqrXIBrWL6LQplFfAfV+grLEQRmVHeGSBZ/Gk9ptzfueXnWcoEcFuA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-3.1.0.tgz",
+      "integrity": "sha512-TP5NkCAV0OeFTry5k/d60KR7CkhTXL4kgJKtE3BzjgbDb5TGEPEhoKmHBrSa6r7Oc0sNbPLZhKD/TP2ig7A+/A==",
       "dev": true,
       "requires": {
-        "@types/webpack": "^4.4.19"
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        }
       }
     },
     "moo": {

package.json

@@ -74,7 +74,7 @@
     "jquery-ui-dist": "1.12.1",
     "knockout": "3.5.1",
     "mkdirp": "1.0.4",
-    "monaco-editor": "0.18.1",
+    "monaco-editor": "0.24.0",
     "ms": "2.1.3",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
@@ -159,7 +159,7 @@
     "less-loader": "4.1.0",
     "less-vars-loader": "1.1.0",
     "mini-css-extract-plugin": "0.4.3",
-    "monaco-editor-webpack-plugin": "1.7.0",
+    "monaco-editor-webpack-plugin": "3.1.0",
     "node-fetch": "2.6.1",
     "playwright": "1.10.0",
     "prettier": "2.2.1",

src/Contracts/ViewModels.ts

@@ -5,6 +5,7 @@ import {
   TriggerDefinition,
   UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
+import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
@@ -276,6 +277,7 @@ export interface TabOptions {
   title: string;
   tabPath: string;
   hashLocation: string;
+  onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
   isTabsContentExpanded?: ko.Observable<boolean>;
   onLoadStartKey?: number;
 

src/Explorer/Controls/Editor/EditorComponent.ts

@@ -52,7 +52,7 @@ class EditorViewModel extends JsonEditorViewModel {
     if (EditorViewModel.providerRegistered.indexOf("sql") < 0) {
       const { SqlCompletionItemProvider } = await import("@azure/cosmos-language-service");
       const monaco = await loadMonaco();
-      monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider());
+      monaco.languages.registerCompletionItemProvider("sql", new SqlCompletionItemProvider() as any); //TODO: Remove any. The upstream cosmos language service needs to be fixed
       EditorViewModel.providerRegistered.push("sql");
     }
   }

src/Explorer/Controls/Editor/EditorReact.tsx

@@ -62,7 +62,7 @@ export class EditorReact extends React.Component<EditorReactProps> {
    * Create the monaco editor and attach to DOM
    */
   private async createEditor(createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
-    const options: monaco.editor.IEditorConstructionOptions = {
+    const options = {
       value: this.props.content,
       language: this.props.language,
       readOnly: this.props.isReadOnly,

src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts

@@ -90,7 +90,7 @@ export class JsonEditorViewModel extends WaitsForTemplateViewModel {
   protected async createEditor(content: string, createCallback: (e: monaco.editor.IStandaloneCodeEditor) => void) {
     this.registerCompletionItemProvider();
     this.editorContainer = document.getElementById(this.getEditorId());
-    const options: monaco.editor.IEditorConstructionOptions = {
+    const options = {
       value: content,
       language: this.getEditorLanguage(),
       readOnly: this.params.isReadOnly,

src/Explorer/Controls/Settings/SettingsComponent.test.tsx

@@ -39,6 +39,7 @@ describe("SettingsComponent", () => {
       tabPath: "",
       node: undefined,
       hashLocation: "settings",
+      onUpdateTabsButtons: undefined,
     }),
   };
 

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -18,7 +18,6 @@ import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/genera
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
-import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
@@ -223,13 +222,13 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.setAutoPilotStates();
     this.setBaseline();
     if (this.props.settingsTab.isActive()) {
-      useCommandBar.getState().setContextButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 
   componentDidUpdate(): void {
     if (this.props.settingsTab.isActive()) {
-      useCommandBar.getState().setContextButtons(this.getTabsButtons());
+      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   }
 

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -32,6 +32,12 @@ exports[`SettingsComponent renders 1`] = `
                 "_resetNotebookWorkspace": [Function],
                 "canSaveQueries": [Function],
                 "collapsedResourceTreeWidth": 36,
+                "commandBarComponentAdapter": CommandBarComponentAdapter {
+                  "container": [Circular],
+                  "isNotebookTabActive": [Function],
+                  "parameters": [Function],
+                  "tabsButtons": Array [],
+                },
                 "databases": [Function],
                 "isAccountReady": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -116,6 +122,12 @@ exports[`SettingsComponent renders 1`] = `
               "_resetNotebookWorkspace": [Function],
               "canSaveQueries": [Function],
               "collapsedResourceTreeWidth": 36,
+              "commandBarComponentAdapter": CommandBarComponentAdapter {
+                "container": [Circular],
+                "isNotebookTabActive": [Function],
+                "parameters": [Function],
+                "tabsButtons": Array [],
+              },
               "databases": [Function],
               "isAccountReady": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -213,6 +225,12 @@ exports[`SettingsComponent renders 1`] = `
                 "_resetNotebookWorkspace": [Function],
                 "canSaveQueries": [Function],
                 "collapsedResourceTreeWidth": 36,
+                "commandBarComponentAdapter": CommandBarComponentAdapter {
+                  "container": [Circular],
+                  "isNotebookTabActive": [Function],
+                  "parameters": [Function],
+                  "tabsButtons": Array [],
+                },
                 "databases": [Function],
                 "isAccountReady": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
@@ -297,6 +315,12 @@ exports[`SettingsComponent renders 1`] = `
               "_resetNotebookWorkspace": [Function],
               "canSaveQueries": [Function],
               "collapsedResourceTreeWidth": 36,
+              "commandBarComponentAdapter": CommandBarComponentAdapter {
+                "container": [Circular],
+                "isNotebookTabActive": [Function],
+                "parameters": [Function],
+                "tabsButtons": Array [],
+              },
               "databases": [Function],
               "isAccountReady": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],

src/Explorer/Controls/ThroughputInput/ThroughputInput.test.tsx

@@ -4,7 +4,7 @@ import { ThroughputInput } from "./ThroughputInput";
 const props = {
   isDatabase: false,
   showFreeTierExceedThroughputTooltip: true,
-  isSharded: true,
+  isSharded: false,
   setThroughputValue: () => jest.fn(),
   setIsAutoscale: () => jest.fn(),
   onCostAcknowledgeChange: () => jest.fn(),

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -41,16 +41,9 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       throughputHeaderText = AutoPilotUtils.getAutoPilotHeaderText().toLocaleLowerCase();
     } else {
       const minRU: string = SharedConstants.CollectionCreation.DefaultCollectionRUs400.toLocaleString();
-
-      let maxRU: string;
-      if (userContext.isTryCosmosDBSubscription) {
-        maxRU = Constants.TryCosmosExperience.maxRU.toLocaleString();
-      } else if (!isSharded) {
-        maxRU = "10000";
-      } else {
-        maxRU = "unlimited";
-      }
-
+      const maxRU: string = userContext.isTryCosmosDBSubscription
+        ? Constants.TryCosmosExperience.maxRU.toLocaleString()
+        : "unlimited";
       throughputHeaderText = `throughput (${minRU} - ${maxRU} RU/s)`;
     }
     return `${isDatabase ? "Database" : getCollectionName()} ${throughputHeaderText}`;

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ThroughputInput Pane should render Default properly 1`] = `
 <ThroughputInput
   isDatabase={false}
-  isSharded={true}
+  isSharded={false}
   onCostAcknowledgeChange={[Function]}
   setIsAutoscale={[Function]}
   setThroughputValue={[Function]}

src/Explorer/Explorer.tsx

@@ -35,9 +35,10 @@ 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 { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
+import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
 import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
@@ -143,6 +144,9 @@ export default class Explorer {
     content: string;
   };
 
+  // React adapters
+  private commandBarComponentAdapter: CommandBarComponentAdapter;
+
   private static readonly MaxNbDatabasesToAutoExpand = 5;
 
   constructor(params?: ExplorerParams) {
@@ -291,7 +295,7 @@ export default class Explorer {
     this.tabsManager.openedTabs.subscribe((tabs) => {
       if (tabs.length === 0) {
         this.selectedNode(undefined);
-        useCommandBar.getState().setContextButtons([]);
+        this.onUpdateTabsButtons([]);
       }
     });
 
@@ -318,6 +322,8 @@ export default class Explorer {
         break;
     }
 
+    this.commandBarComponentAdapter = new CommandBarComponentAdapter(this);
+
     this._initSettings();
 
     TelemetryProcessor.traceSuccess(
@@ -411,7 +417,7 @@ export default class Explorer {
         useDialog.getState().closeDialog();
 
         try {
-          await update(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.name, {
+          await update(userContext.subscriptionId, userContext.resourceGroup, userContext.databaseAccount.id, {
             properties: {
               enableAnalyticalStorage: true,
             },
@@ -780,6 +786,10 @@ 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.
@@ -1071,6 +1081,7 @@ export default class Explorer {
         hashLocation: "notebooks",
         isTabsContentExpanded: ko.observable(true),
         onLoadStartKey: null,
+        onUpdateTabsButtons: this.onUpdateTabsButtons,
         container: this,
         notebookContentItem,
       };
@@ -1405,6 +1416,7 @@ export default class Explorer {
       hashLocation: `${hashLocation} ${index}`,
       isTabsContentExpanded: ko.observable(true),
       onLoadStartKey: null,
+      onUpdateTabsButtons: this.onUpdateTabsButtons,
       container: this,
       kind: kind,
     });
@@ -1435,6 +1447,7 @@ export default class Explorer {
             title: title,
             tabPath: title,
             hashLocation: hashLocation,
+            onUpdateTabsButtons: this.onUpdateTabsButtons,
             onLoadStartKey: null,
             isTabsContentExpanded: ko.observable(true),
           },
@@ -1465,7 +1478,7 @@ export default class Explorer {
     if (activeTab) {
       activeTab.onActivate(); // TODO only update tabs buttons?
     } else {
-      useCommandBar.getState().setContextButtons([]);
+      this.onUpdateTabsButtons([]);
     }
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -3,71 +3,100 @@
  * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
  * and update any knockout observables passed from the parent.
  */
-import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { CommandBar, ICommandBarItemProps } from "@fluentui/react";
+import * as ko from "knockout";
 import * as React from "react";
-import create, { UseStore } from "zustand";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { useObservable } from "../../../hooks/useObservable";
+import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import * as CommandBarUtil from "./CommandBarUtil";
 
-interface Props {
-  container: Explorer;
+export class CommandBarComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+  public container: Explorer;
+  private tabsButtons: CommandButtonComponentProps[];
+  private isNotebookTabActive: ko.Computed<boolean>;
+
+  constructor(container: Explorer) {
+    this.container = container;
+    this.tabsButtons = [];
+    this.isNotebookTabActive = ko.computed(
+      () => container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2
+    );
+
+    // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
+    const toWatch = [
+      container.isDatabaseNodeOrNoneSelected,
+      container.isDatabaseNodeSelected,
+      container.isNoneSelected,
+      container.isResourceTokenCollectionNodeSelected,
+      container.isHostedDataExplorerEnabled,
+      container.isSynapseLinkUpdating,
+      userContext?.databaseAccount,
+      this.isNotebookTabActive,
+      container.isServerlessEnabled,
+    ];
+
+    ko.computed(() => ko.toJSON(toWatch)).subscribe(() => this.triggerRender());
+    this.parameters = ko.observable(Date.now());
+  }
+
+  public onUpdateTabsButtons(buttons: CommandButtonComponentProps[]): void {
+    this.tabsButtons = buttons;
+    this.triggerRender();
+  }
+
+  public renderComponent(): JSX.Element {
+    const backgroundColor = StyleConstants.BaseLight;
+
+    const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(this.container);
+    const contextButtons = (this.tabsButtons || []).concat(
+      CommandBarComponentButtonFactory.createContextCommandBarButtons(this.container)
+    );
+    const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(this.container);
+
+    const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+    if (this.tabsButtons && this.tabsButtons.length > 0) {
+      uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+    }
+
+    const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+
+    if (uiFabricTabsButtons.length > 0) {
+      uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
+    }
+
+    const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+    uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+
+    if (this.isNotebookTabActive()) {
+      uiFabricControlButtons.unshift(
+        CommandBarUtil.createMemoryTracker("memoryTracker", this.container.memoryUsageInfo)
+      );
+    }
+
+    return (
+      <React.Fragment>
+        <div className="commandBarContainer">
+          <CommandBar
+            ariaLabel="Use left and right arrow keys to navigate between commands"
+            items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
+            farItems={uiFabricControlButtons}
+            styles={{
+              root: { backgroundColor: backgroundColor },
+            }}
+            overflowButtonProps={{ ariaLabel: "More commands" }}
+          />
+        </div>
+      </React.Fragment>
+    );
+  }
+
+  private triggerRender() {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
 }
-
-export interface CommandBarStore {
-  contextButtons: CommandButtonComponentProps[];
-  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
-}
-
-export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [],
-  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
-}));
-
-export const CommandBar: React.FC<Props> = ({ container }: Props) => {
-  useObservable(container.selectedNode);
-  const buttons = useCommandBar((state) => state.contextButtons);
-  const backgroundColor = StyleConstants.BaseLight;
-
-  const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(container);
-  const contextButtons = (buttons || []).concat(
-    CommandBarComponentButtonFactory.createContextCommandBarButtons(container)
-  );
-  const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
-
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
-  if (buttons && buttons.length > 0) {
-    uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-  }
-
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
-
-  if (uiFabricTabsButtons.length > 0) {
-    uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
-  }
-
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
-  uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
-
-  if (container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
-    uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker", container.memoryUsageInfo));
-  }
-
-  return (
-    <div className="commandBarContainer">
-      <FluentCommandBar
-        ariaLabel="Use left and right arrow keys to navigate between commands"
-        items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
-        farItems={uiFabricControlButtons}
-        styles={{
-          root: { backgroundColor: backgroundColor },
-        }}
-        overflowButtonProps={{ ariaLabel: "More commands" }}
-      />
-    </div>
-  );
-};

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

@@ -21,6 +21,12 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "_resetNotebookWorkspace": [Function],
             "canSaveQueries": [Function],
             "collapsedResourceTreeWidth": 36,
+            "commandBarComponentAdapter": CommandBarComponentAdapter {
+              "container": [Circular],
+              "isNotebookTabActive": [Function],
+              "parameters": [Function],
+              "tabsButtons": Array [],
+            },
             "databases": [Function],
             "isAccountReady": [Function],
             "isFixedCollectionWithSharedThroughputSupported": [Function],

src/Explorer/Panes/GraphStylingPanel/GraphStylingPanel.tsx

@@ -19,8 +19,7 @@ export const GraphStylingPanel: FunctionComponent<GraphStylingProps> = ({
 
   const buttonLabel = "Ok";
 
-  const submit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+  const submit = () => {
     closeSidePanel();
   };
 

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

@@ -11,6 +11,12 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "_resetNotebookWorkspace": [Function],
       "canSaveQueries": [Function],
       "collapsedResourceTreeWidth": 36,
+      "commandBarComponentAdapter": CommandBarComponentAdapter {
+        "container": [Circular],
+        "isNotebookTabActive": [Function],
+        "parameters": [Function],
+        "tabsButtons": Array [],
+      },
       "databases": [Function],
       "isAccountReady": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],

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

@@ -9,6 +9,12 @@ exports[`Delete Database Confirmation Pane submit() Should call delete database
       "_resetNotebookWorkspace": [Function],
       "canSaveQueries": [Function],
       "collapsedResourceTreeWidth": 36,
+      "commandBarComponentAdapter": CommandBarComponentAdapter {
+        "container": [Circular],
+        "isNotebookTabActive": [Function],
+        "parameters": [Function],
+        "tabsButtons": Array [],
+      },
       "databases": [Function],
       "isAccountReady": [Function],
       "isFixedCollectionWithSharedThroughputSupported": [Function],

src/Explorer/Tabs/DocumentsTab.test.ts

@@ -2,6 +2,7 @@ import * as ko from "knockout";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { updateUserContext } from "../../UserContext";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer";
 import DocumentId from "../Tree/DocumentId";
 import DocumentsTab from "./DocumentsTab";
@@ -16,6 +17,7 @@ describe("Documents tab", () => {
         title: "",
         tabPath: "",
         hashLocation: "",
+        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
       });
 
       expect(documentsTab.buildQuery("")).toContain("select");
@@ -91,6 +93,7 @@ describe("Documents tab", () => {
         title: "",
         tabPath: "",
         hashLocation: "",
+        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
       });
 
       expect(documentsTab.showPartitionKey).toBe(false);
@@ -105,6 +108,7 @@ describe("Documents tab", () => {
         title: "",
         tabPath: "",
         hashLocation: "",
+        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
       });
 
       expect(documentsTab.showPartitionKey).toBe(false);
@@ -119,6 +123,7 @@ describe("Documents tab", () => {
         title: "",
         tabPath: "",
         hashLocation: "",
+        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
       });
 
       expect(documentsTab.showPartitionKey).toBe(true);
@@ -136,6 +141,7 @@ describe("Documents tab", () => {
         title: "",
         tabPath: "",
         hashLocation: "",
+        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
       });
 
       expect(documentsTab.showPartitionKey).toBe(false);
@@ -150,6 +156,7 @@ describe("Documents tab", () => {
         title: "",
         tabPath: "",
         hashLocation: "",
+        onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
       });
 
       expect(documentsTab.showPartitionKey).toBe(true);

src/Explorer/Tabs/QueryTab.test.ts

@@ -2,6 +2,7 @@ import * as ko from "knockout";
 import { DatabaseAccount } from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
 import { updateUserContext } from "../../UserContext";
+import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer";
 import QueryTab from "./QueryTab";
 
@@ -25,6 +26,7 @@ describe("Query Tab", () => {
       title: "",
       tabPath: "",
       hashLocation: "",
+      onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]): void => {},
     });
   }
 

src/Explorer/Tabs/TabsBase.ts

@@ -9,7 +9,6 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer";
-import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter";
 import { WaitsForTemplateViewModel } from "../WaitsForTemplateViewModel";
 import { TabsManager } from "./TabsManager";
 
@@ -164,7 +163,7 @@ export default class TabsBase extends WaitsForTemplateViewModel {
 
   protected updateNavbarWithTabsButtons = (): void => {
     if (this.isActive()) {
-      useCommandBar.getState().setContextButtons(this.getTabsButtons());
+      this.getContainer().onUpdateTabsButtons(this.getTabsButtons());
     }
   };
 }

src/Explorer/Tabs/TabsManager.test.ts

@@ -52,6 +52,7 @@ describe("Tabs manager tests", () => {
       title: "",
       tabPath: "",
       hashLocation: "",
+      onUpdateTabsButtons: undefined,
     });
 
     documentsTab = new DocumentsTab({
@@ -62,6 +63,7 @@ describe("Tabs manager tests", () => {
       title: "",
       tabPath: "",
       hashLocation: "",
+      onUpdateTabsButtons: undefined,
     });
 
     // make sure tabs have different tabId

src/Explorer/Tree/Collection.ts

@@ -21,7 +21,6 @@ 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";
@@ -222,7 +221,7 @@ export default class Collection implements ViewModels.Collection {
     } else {
       this.expandCollection();
     }
-    useCommandBar.getState().setContextButtons([]);
+    this.container.onUpdateTabsButtons([]);
     this.container.tabsManager.refreshActiveTab(
       (tab) => tab.collection && tab.collection.databaseId === this.databaseId && tab.collection.id() === this.id()
     );
@@ -300,6 +299,7 @@ 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,6 +346,7 @@ 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);
@@ -400,6 +401,7 @@ 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);
@@ -452,6 +454,7 @@ 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);
@@ -498,6 +501,7 @@ 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);
     }
@@ -543,6 +547,7 @@ export default class Collection implements ViewModels.Collection {
         node: this,
         hashLocation: `${Constants.HashRoutePrefixes.collectionsWithIds(this.databaseId, this.id())}/schemaAnalyzer`,
         onLoadStartKey: startKey,
+        onUpdateTabsButtons: this.container.onUpdateTabsButtons,
       })
     );
   };
@@ -582,6 +587,7 @@ 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);
@@ -626,6 +632,7 @@ export default class Collection implements ViewModels.Collection {
       queryText: queryText,
       partitionKey: collection.partitionKey,
       onLoadStartKey: startKey,
+      onUpdateTabsButtons: this.container.onUpdateTabsButtons,
     });
 
     this.container.tabsManager.activateNewTab(queryTab);
@@ -653,6 +660,7 @@ 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);
@@ -684,6 +692,7 @@ 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);
@@ -698,6 +707,7 @@ 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);

src/Explorer/Tree/Database.ts

@@ -81,6 +81,7 @@ 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);

src/Explorer/Tree/ResourceTokenCollection.ts

@@ -3,12 +3,13 @@ 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;
@@ -95,6 +96,7 @@ 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);
@@ -141,6 +143,7 @@ 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);

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 { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
+import React from "react";
+import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
+import { shallow } from "enzyme";
+import { TreeComponent, TreeNode, TreeComponentProps } from "../Controls/TreeComponent/TreeComponent";
 import Explorer from "../Explorer";
 import Collection from "./Collection";
-import { ResourceTreeAdapter } from "./ResourceTreeAdapter";
 
 const schema: DataModels.ISchema = {
   id: "fakeSchemaId",
@@ -211,6 +211,9 @@ const schema: DataModels.ISchema = {
 const createMockContainer = (): Explorer => {
   const mockContainer = new Explorer();
   mockContainer.selectedNode = ko.observable<ViewModels.TreeNode>();
+  mockContainer.onUpdateTabsButtons = () => {
+    return;
+  };
 
   return mockContainer;
 };

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -27,7 +27,6 @@ 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";
@@ -212,7 +211,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
           }
           databaseNode.isLoading = false;
           database.selectDatabase();
-          useCommandBar.getState().setContextButtons([]);
+          this.container.onUpdateTabsButtons([]);
           this.container.tabsManager.refreshActiveTab((tab: TabsBase) => tab.collection?.databaseId === database.id());
         },
         onContextMenuOpen: () => this.container.selectedNode(database),
@@ -331,7 +330,7 @@ export class ResourceTreeAdapter implements ReactAdapter {
       onClick: () => {
         // Rewritten version of expandCollapseCollection
         this.container.selectedNode(collection);
-        useCommandBar.getState().setContextButtons([]);
+        this.container.onUpdateTabsButtons([]);
         this.container.tabsManager.refreshActiveTab(
           (tab: TabsBase) =>
             tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx

@@ -1,17 +1,19 @@
-import { shallow } from "enzyme";
 import * as ko from "knockout";
-import React from "react";
+import * as MostRecentActivity from "../MostRecentActivity/MostRecentActivity";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { TreeComponent, TreeComponentProps, TreeNode } from "../Controls/TreeComponent/TreeComponent";
-import Explorer from "../Explorer";
+import React from "react";
 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;
 };

src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx

@@ -1,14 +1,13 @@
 import * as ko from "knockout";
-import * as React from "react";
-import CollectionIcon from "../../../images/tree-collection.svg";
-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 * 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 { userContext } from "../../UserContext";
 
 export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
   public parameters: ko.Observable<number>;
@@ -60,7 +59,7 @@ export class ResourceTreeAdapterForResourceToken implements ReactAdapter {
       onClick: () => {
         // Rewritten version of expandCollapseCollection
         this.container.selectedNode(collection);
-        useCommandBar.getState().setContextButtons([]);
+        this.container.onUpdateTabsButtons([]);
         this.container.tabsManager.refreshActiveTab(
           (tab) => tab.collection?.id() === collection.id() && tab.collection.databaseId === collection.databaseId
         );

src/Explorer/Tree/StoredProcedure.ts

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

src/Explorer/Tree/Trigger.ts

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

src/Explorer/Tree/UserDefinedFunction.ts

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

src/Main.tsx

@@ -37,7 +37,6 @@ import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import { ExplorerParams } from "./Explorer/Explorer";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
-import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
 import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
@@ -89,7 +88,7 @@ const App: React.FunctionComponent = () => {
     <div className="flexContainer">
       <div id="divExplorer" className="flexContainer hideOverflows">
         {/* Main Command Bar - Start */}
-        <CommandBar container={explorer} />
+        <div data-bind="react: commandBarComponentAdapter" />
         {/* Collections Tree and Tabs - Begin */}
         <div className="resourceTreeAndTabs">
           {/* Collections Tree - Start */}