Initial move of command bar to react

config.json

@@ -0,0 +1,4 @@
+{
+  "GITHUB_CLIENT_ID": "167ea4b09801db1de03d",
+  "GITHUB_CLIENT_SECRET": "e7bb10a3a8da428815805c6fc483560a035a73c1"
+}

jest.config.js

@@ -21,13 +21,17 @@ module.exports = {
   collectCoverage: true,
 
   // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  // collectCoverageFrom: [
+  //   "src/Common/Headers*"
+  // ],
 
   // The directory where Jest should output its coverage files
   coverageDirectory: "coverage",
 
   // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ["/node_modules/"],
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
 
   // A list of reporter names that Jest uses when writing coverage reports
   coverageReporters: ["json", "text", "cobertura"],
@@ -35,10 +39,10 @@ module.exports = {
   // An object that configures minimum threshold enforcement for coverage results
   coverageThreshold: {
     global: {
-      branches: 25,
-      functions: 25,
-      lines: 30,
-      statements: 30,
+      branches: 22,
+      functions: 28,
+      lines: 33,
+      statements: 31,
     },
   },
 

src/Explorer/Explorer.tsx

@@ -349,8 +349,8 @@ export default class Explorer {
           async () => {
             this.isNotebookEnabled(
               !this.isAuthWithResourceToken() &&
-              ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
-                this.isFeatureEnabled(Constants.Features.enableNotebooks))
+                ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
+                  this.isFeatureEnabled(Constants.Features.enableNotebooks))
             );
 
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
@@ -372,7 +372,7 @@ export default class Explorer {
                 this.isSparkEnabledForAccount() &&
                 this.arcadiaWorkspaces() &&
                 this.arcadiaWorkspaces().length > 0) ||
-              this.isFeatureEnabled(Constants.Features.enableSpark)
+                this.isFeatureEnabled(Constants.Features.enableSpark)
             );
             if (this.isSparkEnabled()) {
               appInsights.trackEvent(
@@ -2006,11 +2006,7 @@ export default class Explorer {
     }
 
     const databaseAccount = this.databaseAccount();
-    const databaseAccountLocations = databaseAccount && [
-      databaseAccount?.location.toLowerCase(),
-      ...databaseAccount?.properties?.readLocations?.map(location => location?.locationName?.toLowerCase()),
-      ...databaseAccount?.properties?.writeLocations?.map(location => location?.locationName?.toLowerCase())
-    ];
+    const databaseAccountLocation = databaseAccount && databaseAccount.location.toLowerCase();
     const disallowedLocationsUri = `${configContext.BACKEND_ENDPOINT}/api/disallowedLocations`;
     const authorizationHeader = getAuthorizationHeader();
     try {
@@ -2035,15 +2031,9 @@ export default class Explorer {
         this.isNotebooksEnabledForAccount(true);
         return;
       }
-      const isAccountInAllowedLocation = databaseAccountLocations?.some(
-        (accountLocation) => {
-          if (!accountLocation) {
-            return false;
-          }
-
-          return !disallowedLocations.some(disallowedLocation => disallowedLocation === accountLocation); // not a disallowed location
-        }
-      ) || false;
+      const isAccountInAllowedLocation = !disallowedLocations.some(
+        (disallowedLocation) => disallowedLocation === databaseAccountLocation
+      );
       this.isNotebooksEnabledForAccount(isAccountInAllowedLocation);
     } catch (error) {
       Logger.logError(getErrorMessage(error), "Explorer/isNotebooksEnabledForAccount");
@@ -2542,12 +2532,12 @@ export default class Explorer {
     this.isFeatureEnabled(Constants.Features.enableKOPanel)
       ? this.deleteCollectionConfirmationPane.open()
       : this.openSidePanel(
-        "Delete Collection",
-        <DeleteCollectionConfirmationPanel
-          explorer={this}
-          closePanel={() => this.closeSidePanel()}
-          openNotificationConsole={() => this.expandConsole()}
-        />
-      );
+          "Delete Collection",
+          <DeleteCollectionConfirmationPanel
+            explorer={this}
+            closePanel={() => this.closeSidePanel()}
+            openNotificationConsole={() => this.expandConsole()}
+          />
+        );
   }
 }

src/Explorer/Menus/CommandBar/CommandBarComponent.tsx

@@ -0,0 +1,107 @@
+/**
+ * This adapter is responsible to render the React component
+ * 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 * as ko from "knockout";
+import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
+import * as React from "react";
+import { StyleConstants } from "../../../Common/Constants";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import * as CommandBarUtil from "./CommandBarUtil";
+
+export interface CommandBarComponentProps {
+  isNotebookTabActive: boolean;
+  tabsButtons: CommandButtonComponentProps[];
+}
+
+export const CommandBarComponent: React.FunctionComponent = ({ isNotebookTabActive, tabsButtons }: CommandBarComponentProps) {
+
+  constructor(props: CommandBarComponentProps) {
+    super(props);
+    this.state = {
+      isNotebookTabActive: false
+    }
+
+    this.container = container;
+    this.tabsButtons = [];
+    // this.isNotebookTabActive = ko.computed(() =>
+    //   container.tabsManager.isTabActive(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.isPreferredApiTable,
+      container.isPreferredApiMongoDB,
+      container.isPreferredApiDocumentDB,
+      container.isPreferredApiCassandra,
+      container.isPreferredApiGraph,
+      container.deleteCollectionText,
+      container.deleteDatabaseText,
+      container.addCollectionText,
+      container.addDatabaseText,
+      container.isDatabaseNodeOrNoneSelected,
+      container.isDatabaseNodeSelected,
+      container.isNoneSelected,
+      container.isResourceTokenCollectionNodeSelected,
+      container.isHostedDataExplorerEnabled,
+      container.isSynapseLinkUpdating,
+      container.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();
+}
+
+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 (props.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>
+);
+}

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -1,110 +0,0 @@
-/**
- * This adapter is responsible to render the React component
- * 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 * as ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
-import { StyleConstants } from "../../../Common/Constants";
-import * as CommandBarUtil from "./CommandBarUtil";
-import Explorer from "../../Explorer";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-
-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.isTabActive(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.isPreferredApiTable,
-      container.isPreferredApiMongoDB,
-      container.isPreferredApiDocumentDB,
-      container.isPreferredApiCassandra,
-      container.isPreferredApiGraph,
-      container.deleteCollectionText,
-      container.deleteDatabaseText,
-      container.addCollectionText,
-      container.addDatabaseText,
-      container.isDatabaseNodeOrNoneSelected,
-      container.isDatabaseNodeSelected,
-      container.isNoneSelected,
-      container.isResourceTokenCollectionNodeSelected,
-      container.isHostedDataExplorerEnabled,
-      container.isSynapseLinkUpdating,
-      container.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()));
-  }
-}

src/Main.tsx

@@ -48,6 +48,7 @@ import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import { ExplorerParams } from "./Explorer/Explorer";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Graph/NewVertexComponent/newVertexComponent.less";
+import { CommandBarComponent } from "./Explorer/Menus/CommandBar/CommandBarComponent";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
@@ -59,6 +60,7 @@ import { SplashScreen } from "./Explorer/SplashScreen/SplashScreen";
 import "./Explorer/SplashScreen/SplashScreen.less";
 import "./Explorer/Tabs/QueryTab.less";
 import { useConfig } from "./hooks/useConfig";
+import { useExplorerState } from "./hooks/useExplorerState";
 import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
 import { useSidePanel } from "./hooks/useSidePanel";
 import { KOCommentEnd, KOCommentIfStart } from "./koComment";
@@ -99,6 +101,8 @@ const App: React.FunctionComponent = () => {
   const config = useConfig();
   const explorer = useKnockoutExplorer(config?.platform, explorerParams);
 
+  const { commandBarProperties } = useExplorerState(explorer);
+
   if (!explorer) {
     return <LoadingExplorer />;
   }
@@ -107,7 +111,7 @@ const App: React.FunctionComponent = () => {
     <div className="flexContainer">
       <div id="divExplorer" className="flexContainer hideOverflows" style={{ display: "none" }}>
         {/* Main Command Bar - Start */}
-        <div data-bind="react: commandBarComponentAdapter" />
+        <CommandBarComponent {...commandBarProperties} />
         {/* Collections Tree and Tabs - Begin */}
         <div className="resourceTreeAndTabs">
           {/* Collections Tree - Start */}

src/hooks/useExplorerState.ts

@@ -0,0 +1,15 @@
+import { useState } from "react";
+import Explorer from "../Explorer/Explorer";
+
+export interface ExplorerStateProperties {
+  commandBarProperties: {
+
+  }
+}
+
+export const useExplorerState = (container: Explorer): ExplorerStateProperties => {
+  const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
+
+
+  return {};
+};