feat: replace code studio home icon with "Code Studio" as label (#1951)

Fixes #1794 - Label home as "vsTerminal Code Studio" - Make it part of the navtab list to get an active state - Allow navtab list to accept an Icon | JSX.Element
deephaven · Apr 20, 2024 · 111ea64 · 111ea64
1 parent 9e9e272
commit 111ea64
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/packages/code-studio/src/main/AppInit.tsx b/packages/code-studio/src/main/AppInit.tsx
@@ -166,6 +166,7 @@ function AppInit(props: AppInitProps): JSX.Element {
           });
 
           const dashboardData = {
+            title: 'Code Studio',
             filterSets: data.filterSets,
             links: data.links,
           };

diff --git a/packages/code-studio/src/main/AppMainContainer.tsx b/packages/code-studio/src/main/AppMainContainer.tsx
@@ -59,7 +59,7 @@ import {
   dhPanels,
   vsDebugDisconnect,
   dhSquareFilled,
-  vsHome,
+  vsTerminal,
 } from '@deephaven/icons';
 import { getVariableDescriptor } from '@deephaven/jsapi-bootstrap';
 import dh from '@deephaven/jsapi-shim';
@@ -256,12 +256,12 @@ export class AppMainContainer extends Component<
       isSettingsMenuShown: false,
       unsavedNotebookCount: 0,
       widgets: [],
-      tabs: Object.entries(allDashboardData)
-        .filter(([key]) => key !== DEFAULT_DASHBOARD_ID)
-        .map(([key, value]) => ({
-          key,
-          title: value.title ?? 'Untitled',
-        })),
+      tabs: Object.entries(allDashboardData).map(([key, value]) => ({
+        key,
+        title: value.title ?? 'Untitled',
+        isClosable: key !== DEFAULT_DASHBOARD_ID,
+        icon: key === DEFAULT_DASHBOARD_ID ? vsTerminal : undefined,
+      })),
       activeTabKey: DEFAULT_DASHBOARD_ID,
       layoutIteration: 0,
     };
@@ -856,12 +856,14 @@ export class AppMainContainer extends Component<
         layoutConfig: layoutConfig as ItemConfigType[],
         key: `${DEFAULT_DASHBOARD_ID}-${layoutIteration}`,
       },
-      ...tabs.map(tab => ({
-        id: tab.key,
-        layoutConfig: (allDashboardData[tab.key]?.layoutConfig ??
-          EMPTY_ARRAY) as ItemConfigType[],
-        key: `${tab.key}-${layoutIteration}`,
-      })),
+      ...tabs
+        .filter(tab => tab.key !== DEFAULT_DASHBOARD_ID)
+        .map(tab => ({
+          id: tab.key,
+          layoutConfig: (allDashboardData[tab.key]?.layoutConfig ??
+            EMPTY_ARRAY) as ItemConfigType[],
+          key: `${tab.key}-${layoutIteration}`,
+        })),
     ];
   }
 
@@ -898,14 +900,9 @@ export class AppMainContainer extends Component<
       >
         <div className="app-main-top-nav-menus">
           <Logo className="ml-1" style={{ maxHeight: '20px' }} />
-          {tabs.length > 0 && (
+          {/* Only show the Code Studio tab if there is also an open dashboard */}
+          {tabs.length > 1 && (
             <div style={{ flexShrink: 0, flexGrow: 1, display: 'flex' }}>
-              <Button
-                kind="ghost"
-                icon={vsHome}
-                tooltip="Go to Code Studio"
-                onClick={this.handleHomeClick}
-              />
               <NavTabList
                 tabs={tabs}
                 activeKey={activeTabKey}

diff --git a/packages/components/src/navigation/NavTab.tsx b/packages/components/src/navigation/NavTab.tsx
@@ -1,7 +1,8 @@
 import React, { memo } from 'react';
 import classNames from 'classnames';
 import { Draggable } from 'react-beautiful-dnd';
-import { vsClose } from '@deephaven/icons';
+import { IconDefinition, vsClose } from '@deephaven/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { NavTabItem } from './NavTabList';
 import Button from '../Button';
 import ContextActions from '../context-actions/ContextActions';
@@ -29,7 +30,16 @@ const NavTab = memo(
     isDraggable,
     contextActions,
   }: NavTabProps) => {
-    const { key, isClosable = onClose != null, title } = tab;
+    const { key, isClosable = onClose != null, title, icon } = tab;
+
+    let iconElem: JSX.Element | undefined;
+    if (icon != null) {
+      iconElem = React.isValidElement(icon) ? (
+        icon
+      ) : (
+        <FontAwesomeIcon icon={icon as IconDefinition} />
+      );
+    }
 
     return (
       <Draggable
@@ -68,6 +78,7 @@ const NavTab = memo(
                 if (event.key === 'Enter') onSelect(key);
               }}
             >
+              {iconElem}
               {title}
               {isClosable && (
                 <Button

diff --git a/packages/components/src/navigation/NavTabList.tsx b/packages/components/src/navigation/NavTabList.tsx
@@ -13,6 +13,7 @@ import {
   OnDragEndResponder,
 } from 'react-beautiful-dnd';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { vsChevronRight, vsChevronLeft } from '@deephaven/icons';
 import { useResizeObserver } from '@deephaven/react-hooks';
 import DragUtils from '../DragUtils';
@@ -39,6 +40,11 @@ export interface NavTabItem {
    */
   title: string;
 
+  /**
+   * Icon to display on the tab.
+   */
+  icon?: IconDefinition | JSX.Element;
+
   /**
    * Whether the tab is closable.
    * If omitted, the tab will be closeable if onClose exists.