First dark theme commit for command bar

src/Explorer/DataExplorer.tsx

@@ -0,0 +1,29 @@
+import { makeStyles } from "@fluentui/react-components";
+import React from "react";
+import type { Explorer } from "../Contracts/ViewModels";
+import { useTheme } from "../hooks/useTheme";
+
+interface DataExplorerProps {
+  dataExplorer: Explorer;
+}
+
+const useStyles = makeStyles({
+  root: {
+    backgroundColor: "var(--colorNeutralBackground1)",
+    color: "var(--colorNeutralForeground1)",
+    height: "100%",
+    width: "100%"
+  }
+});
+
+export const DataExplorer: React.FC<DataExplorerProps> = ({ dataExplorer }) => {
+  const { isDarkMode } = useTheme();
+  const styles = useStyles();
+
+
+  return (
+    <div className={`dataExplorerContainer ${styles.root}`}>
+      <div>Data Explorer Content</div>
+    </div>
+  );
+};

src/Explorer/ErrorBoundary.tsx

@@ -0,0 +1,37 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: "20px", color: "red" }}>
+          <h2>Something went wrong.</h2>
+          <details style={{ whiteSpace: "pre-wrap" }}>{this.state.error && this.state.error.toString()}</details>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/Explorer/Menus/CommandBar/CommandBarComponent.less

@@ -4,11 +4,10 @@
   padding: @SmallSpace 0px @SmallSpace 0px;
   .flex-display();
   span {
-    border-left: @ButtonBorderWidth solid @BaseMediumHigh;
     margin: 0 10px 0 10px;
   }
 }
 
 .commandBarContainer {
-  border-bottom: 1px solid @BaseMedium;
+  border-bottom: 1px solid var(--colorNeutralStroke1);
 }

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -4,6 +4,7 @@
  * and update any knockout observables passed from the parent.
  */
 import { CommandBar as FluentCommandBar, ICommandBarItemProps } from "@fluentui/react";
+import { makeStyles, useFluent } from "@fluentui/react-components";
 import { useNotebook } from "Explorer/Notebook/useNotebook";
 import { KeyboardActionGroup, useKeyboardActionGroup } from "KeyboardShortcuts";
 import { isFabric } from "Platform/Fabric/FabricUtil";
@@ -11,7 +12,6 @@ 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 { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -30,18 +30,26 @@ export interface CommandBarStore {
 }
 
 export const useCommandBar: UseStore<CommandBarStore> = create((set) => ({
-  contextButtons: [],
+  contextButtons: [] as CommandButtonComponentProps[],
   setContextButtons: (contextButtons: CommandButtonComponentProps[]) => set((state) => ({ ...state, contextButtons })),
   isHidden: false,
   setIsHidden: (isHidden: boolean) => set((state) => ({ ...state, isHidden })),
 }));
 
+const useStyles = makeStyles({
+  commandBarContainer: {
+    borderBottom: "1px solid var(--colorNeutralStroke1)"
+  }
+});
+
 export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const selectedNodeState = useSelectedNode();
   const buttons = useCommandBar((state) => state.contextButtons);
   const isHidden = useCommandBar((state) => state.isHidden);
-  const backgroundColor = StyleConstants.BaseLight;
+  const { targetDocument } = useFluent();
+  // const isDarkMode = targetDocument?.body.classList.contains("isDarkMode");
   const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR);
+  const styles = useStyles();
 
   if (userContext.apiType === "Postgres" || userContext.apiType === "VCoreMongo") {
     const buttons =
@@ -49,12 +57,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
         ? CommandBarComponentButtonFactory.createPostgreButtons(container)
         : CommandBarComponentButtonFactory.createVCoreMongoButtons(container);
     return (
-      <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+      <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
         <FluentCommandBar
           ariaLabel="Use left and right arrow keys to navigate between commands"
-          items={CommandBarUtil.convertButton(buttons, backgroundColor)}
+          items={CommandBarUtil.convertButton(buttons, "var(--colorNeutralBackground1)")}
           styles={{
-            root: { backgroundColor: backgroundColor },
+            root: { 
+              backgroundColor: "var(--colorNeutralBackground1)",
+              color: "var(--colorNeutralForeground1)"
+            }
           }}
           overflowButtonProps={{ ariaLabel: "More commands" }}
         />
@@ -68,18 +79,18 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   );
   const controlButtons = CommandBarComponentButtonFactory.createControlCommandBarButtons(container);
 
-  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, backgroundColor);
+  const uiFabricStaticButtons = CommandBarUtil.convertButton(staticButtons, "var(--colorNeutralBackground1)");
   if (buttons && buttons.length > 0) {
     uiFabricStaticButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
   }
 
-  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, backgroundColor);
+  const uiFabricTabsButtons: ICommandBarItemProps[] = CommandBarUtil.convertButton(contextButtons, "var(--colorNeutralBackground1)");
 
   if (uiFabricTabsButtons.length > 0) {
     uiFabricStaticButtons.push(CommandBarUtil.createDivider("commandBarDivider"));
   }
 
-  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
+  const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, "var(--colorNeutralBackground1)");
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
   const connectionInfo = useNotebook((state) => state.connectionInfo);
@@ -96,14 +107,16 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const rootStyle = isFabric()
     ? {
         root: {
-          backgroundColor: "transparent",
+          backgroundColor: "var(--colorNeutralBackground1)",
           padding: "2px 8px 0px 8px",
-        },
+          color: "var(--colorNeutralForeground1)"
+        }
       }
     : {
         root: {
-          backgroundColor: backgroundColor,
-        },
+          backgroundColor: "var(--colorNeutralBackground1)",
+          color: "var(--colorNeutralForeground1)"
+        }
       };
 
   const allButtons = staticButtons.concat(contextButtons).concat(controlButtons);
@@ -111,7 +124,7 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   setKeyboardHandlers(keyboardHandlers);
 
   return (
-    <div className="commandBarContainer" style={{ display: isHidden ? "none" : "initial" }}>
+    <div className={styles.commandBarContainer} style={{ display: isHidden ? "none" : "initial" }}>
       <FluentCommandBar
         ariaLabel="Use left and right arrow keys to navigate between commands"
         items={uiFabricStaticButtons.concat(uiFabricTabsButtons)}

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -1,10 +1,10 @@
 import {
-  Dropdown,
-  ICommandBarItemProps,
-  IComponentAsProps,
-  IconType,
-  IDropdownOption,
-  IDropdownStyles,
+    Dropdown,
+    ICommandBarItemProps,
+    IComponentAsProps,
+    IconType,
+    IDropdownOption,
+    IDropdownStyles,
 } from "@fluentui/react";
 import { useQueryCopilot } from "hooks/useQueryCopilot";
 import { KeyboardHandlerMap } from "KeyboardShortcuts";
@@ -53,7 +53,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
       const result: ICommandBarItemProps = {
         iconProps: {
           style: {
-            width: StyleConstants.CommandBarIconWidth, // 16
+            width: StyleConstants.CommandBarIconWidth,
             alignSelf: btn.iconName ? "baseline" : undefined,
             filter: getFilter(btn.disabled),
           },
@@ -79,7 +79,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
         "data-test": `CommandBar/Button:${label}`,
         buttonStyles: {
           root: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             height: buttonHeightPx,
             paddingRight: 0,
             paddingLeft: 0,
@@ -87,15 +87,29 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             minWidth: 24,
             marginLeft: isSplit ? 0 : 5,
             marginRight: isSplit ? 0 : 5,
+            color: "var(--colorNeutralForeground1)",
+            selectors: {
+              "&:hover": {
+                backgroundColor: "var(--colorNeutralBackground1Hover)",
+                color: "var(--colorNeutralForeground1)"
+              },
+              "&:active": {
+                backgroundColor: "var(--colorNeutralBackground1Pressed)",
+                color: "var(--colorNeutralForeground1)"
+              }
+            }
           },
           rootDisabled: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             pointerEvents: "auto",
+            color: "var(--colorNeutralForegroundDisabled)"
           },
           splitButtonMenuButton: {
-            backgroundColor: backgroundColor,
+            backgroundColor: "var(--colorNeutralBackground1)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": { 
+                backgroundColor: "var(--colorNeutralBackground1Hover)"
+              },
             },
             width: 16,
           },
@@ -104,13 +118,22 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               configContext.platform == Platform.Fabric
                 ? StyleConstants.DefaultFontSize
                 : StyleConstants.mediumFontSize,
+            color: "var(--colorNeutralForeground1)"
+          },
+          rootHovered: { 
+            backgroundColor: "var(--colorNeutralBackground1Hover)",
+            color: "var(--colorNeutralForeground1)"
+          },
+          rootPressed: { 
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
+            color: "var(--colorNeutralForeground1)"
           },
-          rootHovered: { backgroundColor: hoverColor },
-          rootPressed: { backgroundColor: hoverColor },
           splitButtonMenuButtonExpanded: {
-            backgroundColor: StyleConstants.AccentExtra,
+            backgroundColor: "var(--colorNeutralBackground1Pressed)",
             selectors: {
-              ":hover": { backgroundColor: hoverColor },
+              ":hover": { 
+                backgroundColor: "var(--colorNeutralBackground1Hover)"
+              },
             },
           },
           splitButtonDivider: {
@@ -119,6 +142,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
           icon: {
             paddingLeft: 0,
             paddingRight: 0,
+            color: "var(--colorNeutralForeground1)"
           },
           splitButtonContainer: {
             marginLeft: 5,

src/Explorer/Tabs/Tabs.tsx

@@ -40,6 +40,14 @@ export const Tabs = ({ explorer }: TabsProps): JSX.Element => {
     });
   }, [setKeyboardHandlers]);
 
+  // Add useEffect to handle context buttons
+  useEffect(() => {
+    if (activeReactTab !== undefined) {
+      // React tabs have no context buttons
+      useCommandBar.getState().setContextButtons([]);
+    }
+  }, [activeReactTab]);
+
   return (
     <div className="tabsManagerContainer">
       <div className="nav-tabs-margin">
@@ -259,9 +267,6 @@ const isQueryErrorThrown = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
 };
 
 const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
-  // React tabs have no context buttons.
-  useCommandBar.getState().setContextButtons([]);
-
   // eslint-disable-next-line no-console
   switch (activeReactTab) {
     case ReactTabKind.Connect: