add new command bar behind a feature flag

less/documentDB.less

@@ -2618,6 +2618,7 @@ a:link {
 .tabPanesContainer {
   display: flex;
   flex-grow: 1;
+  flex-direction: column;
   overflow: hidden;
 }
 

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -1,23 +1,14 @@
 /**
  * React component for Command button component.
  */
+import Explorer from "Explorer/Explorer";
 import { KeyboardAction } from "KeyboardShortcuts";
 import * as React from "react";
-import CollapseChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
-import { KeyCodes } from "../../../Common/Constants";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as StringUtils from "../../../Utils/StringUtils";
 
 /**
  * Options for this component
  */
 export interface CommandButtonComponentProps {
-  /**
-   * font icon name for the button
-   */
-  iconName?: string;
-
   /**
    * image source for the button icon
    */
@@ -31,7 +22,7 @@ export interface CommandButtonComponentProps {
   /**
    * Click handler for command button click
    */
-  onCommandClick?: (e: React.SyntheticEvent | KeyboardEvent) => void;
+  onCommandClick?: (e: React.SyntheticEvent | KeyboardEvent, container: Explorer) => void;
 
   /**
    * Label for the button
@@ -120,157 +111,3 @@ export interface CommandButtonComponentProps {
    */
   keyboardAction?: KeyboardAction;
 }
-
-export class CommandButtonComponent extends React.Component<CommandButtonComponentProps> {
-  private dropdownElt: HTMLElement;
-  private expandButtonElt: HTMLElement;
-
-  public componentDidUpdate(): void {
-    if (!this.dropdownElt || !this.expandButtonElt) {
-      return;
-    }
-    $(this.dropdownElt).offset({ left: $(this.expandButtonElt).offset().left });
-  }
-
-  private onKeyPress(event: React.KeyboardEvent): boolean {
-    if (event.keyCode === KeyCodes.Space || event.keyCode === KeyCodes.Enter) {
-      this.commandClickCallback && this.commandClickCallback(event);
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  }
-
-  private onLauncherKeyDown(event: React.KeyboardEvent<HTMLDivElement>): boolean {
-    if (event.keyCode === KeyCodes.DownArrow) {
-      $(this.dropdownElt).hide();
-      $(this.dropdownElt).show().focus();
-      event.stopPropagation();
-      return false;
-    }
-    if (event.keyCode === KeyCodes.UpArrow) {
-      $(this.dropdownElt).hide();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  }
-
-  private getCommandButtonId(): string {
-    if (this.props.id) {
-      return this.props.id;
-    } else {
-      return `commandButton-${StringUtils.stripSpacesFromString(this.props.commandButtonLabel)}`;
-    }
-  }
-
-  public static renderButton(options: CommandButtonComponentProps, key?: string): JSX.Element {
-    return <CommandButtonComponent key={key} {...options} />;
-  }
-
-  private commandClickCallback(e: React.SyntheticEvent): void {
-    if (this.props.disabled) {
-      return;
-    }
-
-    // TODO Query component's parent, not document
-    const el = document.querySelector(".commandDropdownContainer") as HTMLElement;
-    if (el) {
-      el.style.display = "none";
-    }
-    this.props.onCommandClick(e);
-    TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {
-      commandButtonClicked: this.props.commandButtonLabel,
-    });
-  }
-
-  private renderChildren(): JSX.Element {
-    if (!this.props.children || this.props.children.length < 1) {
-      return <React.Fragment />;
-    }
-
-    return (
-      <div
-        className="commandExpand"
-        tabIndex={0}
-        ref={(ref: HTMLElement) => {
-          this.expandButtonElt = ref;
-        }}
-        onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => this.onLauncherKeyDown(e)}
-      >
-        <div className="commandDropdownLauncher">
-          <span className="partialSplitter" />
-          <span className="expandDropdown">
-            <img src={CollapseChevronDownIcon} />
-          </span>
-        </div>
-        <div
-          className="commandDropdownContainer"
-          ref={(ref: HTMLElement) => {
-            this.dropdownElt = ref;
-          }}
-        >
-          <div className="commandDropdown">
-            {this.props.children.map((c: CommandButtonComponentProps, index: number): JSX.Element => {
-              return CommandButtonComponent.renderButton(c, `${index}`);
-            })}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  public static renderLabel(
-    props: CommandButtonComponentProps,
-    key?: string,
-    refct?: (input: HTMLElement) => void,
-  ): JSX.Element {
-    if (!props.commandButtonLabel) {
-      return <React.Fragment />;
-    }
-
-    return (
-      <span className="commandLabel" key={key} ref={refct}>
-        {props.commandButtonLabel}
-      </span>
-    );
-  }
-
-  public render(): JSX.Element {
-    let mainClassName = "commandButtonComponent";
-    if (this.props.disabled) {
-      mainClassName += " commandDisabled";
-    }
-    if (this.props.isSelected) {
-      mainClassName += " selectedButton";
-    }
-
-    let contentClassName = "commandContent";
-    if (this.props.children && this.props.children.length > 0) {
-      contentClassName += " hasHiddenItems";
-    }
-
-    return (
-      <div className="commandButtonReact">
-        <span
-          className={mainClassName}
-          role="menuitem"
-          tabIndex={this.props.tabIndex}
-          onKeyPress={(e: React.KeyboardEvent<HTMLSpanElement>) => this.onKeyPress(e)}
-          title={this.props.tooltipText}
-          id={this.getCommandButtonId()}
-          aria-disabled={this.props.disabled}
-          aria-haspopup={this.props.hasPopup}
-          aria-label={this.props.ariaLabel}
-          onClick={(e: React.MouseEvent<HTMLSpanElement>) => this.commandClickCallback(e)}
-        >
-          <div className={contentClassName}>
-            <img className="commandIcon" src={this.props.iconSrc} alt={this.props.iconAlt} />
-            {CommandButtonComponent.renderLabel(this.props)}
-          </div>
-        </span>
-        {this.props.children && this.renderChildren()}
-      </div>
-    );
-  }
-}

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -7,6 +7,7 @@ import {
   ContainerVectorPolicyComponent,
   ContainerVectorPolicyComponentProps,
 } from "Explorer/Controls/Settings/SettingsSubComponents/ContainerVectorPolicyComponent";
+import { useCommandBar } from "Explorer/Menus/CommandBar/useCommandBar";
 import { useDatabases } from "Explorer/useDatabases";
 import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
 import { isRunningOnPublicCloud } from "Utils/CloudUtils";
@@ -32,7 +33,6 @@ import {
   PartitionKeyComponent,
   PartitionKeyComponentProps,
 } from "../../Controls/Settings/SettingsSubComponents/PartitionKeyComponent";
-import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";

src/Explorer/Controls/TreeComponent/TreeNodeComponent.tsx

@@ -107,7 +107,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
 
   const onOpenChange = useCallback(
     (_: TreeOpenChangeEvent, data: TreeOpenChangeData) => {
-      if (data.type === "Click" && !isBranch && node.onClick) {
+      if (data.type === "Click" && node.onClick) {
         node.onClick();
       }
       if (!node.isExpanded && data.open && node.onExpanded) {
@@ -119,7 +119,7 @@ export const TreeNodeComponent: React.FC<TreeNodeComponentProps> = ({
         node.onCollapsed?.();
       }
     },
-    [isBranch, node, setIsLoading],
+    [node, setIsLoading],
   );
 
   const onMenuOpenChange = useCallback(

src/Explorer/Explorer.tsx

@@ -5,6 +5,7 @@ import { Environment, getEnvironment } from "Common/EnvironmentUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
 import { MessageTypes } from "Contracts/ExplorerContracts";
+import { useCommandBar } from "Explorer/Menus/CommandBar/useCommandBar";
 import { useDataPlaneRbac } from "Explorer/Panes/SettingsPane/SettingsPane";
 import { getCopilotEnabled, isCopilotFeatureRegistered } from "Explorer/QueryCopilot/Shared/QueryCopilotClient";
 import { IGalleryItem } from "Juno/JunoClient";
@@ -47,7 +48,6 @@ import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
-import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
 import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,91 +4,59 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import {
+  createPlatformButtons,
+  createStaticCommandBarButtons,
+} from "Explorer/Menus/CommandBar/CommandBarComponentButtonFactory";
+import { useCommandBar } from "Explorer/Menus/CommandBar/useCommandBar";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
-import { userContext } from "UserContext";
 import * as React from "react";
-import create, { UseStore } from "zustand";
 import { ConnectionStatusType, PoolIdType } from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/StyleConstants";
 import { Platform, configContext } from "../../../ConfigContext";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import * as CommandBarUtil from "./CommandBarUtil";
 
 interface Props {
   container: Explorer;
 }
 
-export interface CommandBarStore {
-  contextButtons: CommandButtonComponentProps[];
-  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => void;
-  isHidden: boolean;
-  setIsHidden: (isHidden: boolean) => void;
-}
-
-export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [],
-  setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
-  isHidden: false,
-  setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
-}));
-
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
-  const buttons = useCommandBar((state) => state.contextButtons);
+  const contextButtons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
   const backgroundColor = StyleConstants.BaseLight;
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+  const staticButtons = createStaticCommandBarButtons(selectedNodeState);
+  const platformButtons = createPlatformButtons();
 
-  if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
-    const buttons =
-      userContext.apiType === "Postgres"
-        ? CommandBarComponentButtonFactory.createPostgreButtons(container)
-        : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
-    return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
-        <FluentCommandBar
-          ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
-          styles={{
-            root: { backgroundColor: backgroundColor },
-          }}
-          overflowButtonProps={{ ariaLabel: "More commands" }}
-        />
-      </div>
-    );
-  }
-
-  const staticButtons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(container, selectedNodeState);
-  const contextButtons = (buttons || []).concat(
-    CommandBarComponentButtonFactory.createContextCommandBarButtons(container, selectedNodeState),
-  );
-  const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
-
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
-  if (buttons && buttons.length > 0) {
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor, container);
+  if (contextButtons?.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(
+    contextButtons || [],
+    backgroundColor,
+    container,
+  );
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
-  uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
+  const uiFabricPlatformButtons = CommandBarUtil.convertButton(platformButtons || [], backgroundColor, container);
+  uiFabricPlatformButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
   const connectionInfo = useNotebook((state) => state.connectionInfo);
 
   if (
     (useNotebook.getState().isPhoenixNotebooks || useNotebook.getState().isPhoenixFeatures) &&
     connectionInfo?.status !== ConnectionStatusType.Connect
   ) {
-    uiFabricControlButtons.unshift(
+    uiFabricPlatformButtons.unshift(
       CommandBarUtil.createConnectionStatus(container, PoolIdType.DefaultPoolId, "connectionStatus"),
     );
   }
@@ -107,16 +75,16 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
           },
         };
 
-  const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
-  const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);
+  const allButtons = staticButtons.concat(contextButtons).concat(platformButtons);
+  const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons, container);
   setKeyboardHandlers(keyboardHandlers);
 
   return (
     <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}
-        farItems={uiFabricControlButtons}
+        farItems={uiFabricPlatformButtons}
         styles={rootStyle}
         overflowButtonProps={{ ariaLabel: "More commands" }}
       />