feat(sidebar): New sidebar title and favorite color area COMPASS-5961 (#3336)

* WIP

* not necesary to create an alias

* sidebar title

* some debugging

* darkmode for the title

* reformat

* database item and collection item actions are mode hover

* rm comments

* rm console.log

* lint warnings

Author: lerouxb

…databases-navigation/src/icon-button.tsx …omponents/src/components/icon-button.tsxpackages/compass-databases-navigation/src/icon-button.tsx renamed to packages/compass-components/src/components/icon-button.tsx packages/compass-databases-navigation/src/icon-button.tsx renamed to packages/compass-components/src/components/icon-button.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable react/prop-types */
 import React, { forwardRef } from 'react';
-import {
-  Icon,
-  IconButton,
-  spacing,
-  css,
-  cx,
-} from '@mongodb-js/compass-components';
+import { Icon, IconButton } from '../index';
+
+import { spacing } from '@leafygreen-ui/tokens';
+import { css, cx } from '@leafygreen-ui/emotion';
 
 const iconContainer = css({
   display: 'block',
@@ -21,9 +18,28 @@ const icons = {
   hovered: css({
     color: 'var(--hover-icon-color)',
   }),
+  inherit: css({
+    color: 'inherit',
+  }),
 } as const;
 
-type IconMode = keyof typeof icons;
+const buttons = {
+  normal: css({
+    color: 'var(--icon-color)',
+    ':hover': {
+      color: 'var(--icon-color-hover)',
+    },
+  }),
+  hovered: css({
+    color: 'var(--hover-icon-color)',
+    ':hover': {
+      color: 'var(--hover-icon-color-hover)',
+    },
+  }),
+  inherit: css({}),
+} as const;
+
+export type IconMode = keyof typeof icons;
 
 export const SmallIcon: React.FunctionComponent<
   { glyph: string; mode: IconMode } & React.HTMLProps<HTMLSpanElement>
@@ -44,20 +60,34 @@ const iconButtonSmall = css({
 });
 
 const iconButtonSmallActive = css({
-  color: 'currentColor !important',
+  color: 'var(--color) !important',
+  ':hover': {
+    color: 'var(--hover-icon-color-hover) !important',
+  },
 });
 
 export const IconButtonSmall = forwardRef<
   HTMLButtonElement,
   {
     glyph: string;
+    mode: IconMode;
     label: string;
     title?: string;
     onClick(evt: React.MouseEvent<HTMLButtonElement>): void;
     isActive: boolean;
   } & React.HTMLProps<HTMLButtonElement>
 >(function IconButtonSmall(
-  { glyph, label, onClick, isActive, children, title, className, ...rest },
+  {
+    glyph,
+    mode,
+    label,
+    onClick,
+    isActive,
+    children,
+    title,
+    className,
+    ...rest
+  },
   ref
 ) {
   return (
@@ -68,14 +98,15 @@ export const IconButtonSmall = forwardRef<
       className={cx(
         iconButtonSmall,
         isActive && iconButtonSmallActive,
+        buttons[mode],
         className
       )}
       aria-label={label}
       title={title}
       onClick={onClick}
       {...rest}
     >
-      <SmallIcon role="presentation" glyph={glyph} mode="hovered"></SmallIcon>
+      <SmallIcon role="presentation" glyph={glyph} mode="inherit"></SmallIcon>
       {/* Only here to make leafygreen menus work */}
       {children}
     </IconButton>

…-navigation/src/item-action-controls.tsx …/src/components/item-action-controls.tsxpackages/compass-databases-navigation/src/item-action-controls.tsx renamed to packages/compass-components/src/components/item-action-controls.tsx packages/compass-databases-navigation/src/item-action-controls.tsx renamed to packages/compass-components/src/components/item-action-controls.tsx

@@ -1,23 +1,19 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useState, useRef } from 'react';
-import {
-  Menu,
-  MenuItem,
-  spacing,
-  css,
-  cx,
-} from '@mongodb-js/compass-components';
+import { Menu, MenuItem } from '../index';
+
+import { spacing } from '@leafygreen-ui/tokens';
+import { css, cx } from '@leafygreen-ui/emotion';
+
 import { IconButtonSmall } from './icon-button';
-import type { Actions } from './constants';
+import type { IconMode } from './icon-button';
 
-export type NamespaceAction = {
+export type ItemAction<Actions> = {
   action: Actions;
   label: string;
   icon: string;
 };
 
-type ActionControlOptions = NamespaceAction[];
-
 const actionControls = css({
   flex: 'none',
   marginLeft: 'auto',
@@ -31,21 +27,23 @@ const actionIconButton = css({
   },
 });
 
-export const ActionControls: React.FunctionComponent<{
-  actions: ActionControlOptions;
-  onAction(actionName: Actions): void;
-  className?: string;
-  isActive: boolean;
-  isHovered: boolean;
-  shouldCollapseActionsToMenu?: boolean;
-}> = ({
+export function ItemActionControls<Actions extends string>({
+  mode = 'hovered',
   actions,
   onAction,
   className,
   isActive,
   isHovered,
   shouldCollapseActionsToMenu = false,
-}) => {
+}: {
+  mode: IconMode;
+  actions: ItemAction<Actions>[];
+  onAction(actionName: Actions): void;
+  className?: string;
+  isActive: boolean;
+  isHovered: boolean;
+  shouldCollapseActionsToMenu?: boolean;
+}) {
   const menuTriggerRef = useRef<HTMLButtonElement | null>(null);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -62,7 +60,10 @@ export const ActionControls: React.FunctionComponent<{
     [onAction]
   );
 
-  if (actions.length === 0 || (!isActive && !isHovered && !isMenuOpen)) {
+  if (
+    actions.length === 0 ||
+    (!isActive && !isHovered && !isMenuOpen && mode === 'hovered')
+  ) {
     return null;
   }
 
@@ -84,6 +85,7 @@ export const ActionControls: React.FunctionComponent<{
             <IconButtonSmall
               ref={menuTriggerRef}
               glyph="Ellipsis"
+              mode={mode}
               label="Show actions"
               title="Show actions"
               data-testid="show-actions"
@@ -123,6 +125,7 @@ export const ActionControls: React.FunctionComponent<{
           <IconButtonSmall
             key={action}
             glyph={icon}
+            mode={mode}
             label={label}
             title={label}
             isActive={isActive}
@@ -134,4 +137,4 @@ export const ActionControls: React.FunctionComponent<{
       })}
     </div>
   );
-};
+}

packages/compass-components/src/components/resizeable-sidebar.tsx

@@ -25,10 +25,15 @@ const containerStylesDark = css({
   '--color': 'white',
   '--bg-color': uiColors.gray.dark3,
 
+  '--title-color': uiColors.gray.dark3,
+  '--title-bg-color': '#71F6BA', // TODO: there is no uiColors.green.light1,
+
   '--icon-color': 'white',
+  '--icon-color-hover': uiColors.black,
   // NOTE: This is for icons that only display when hovering over an item,
   // not the color used for the icon when hovering over the icon itself.
   '--hover-icon-color': 'white',
+  '--hover-icon-color-hover': uiColors.black,
 
   '--item-color': 'white',
   '--item-color-hover': 'white',
@@ -45,8 +50,13 @@ const containerStylesLight = css({
   '--color': uiColors.gray.dark3,
   '--bg-color': uiColors.gray.light3,
 
+  '--title-color': 'white',
+  '--title-bg-color': uiColors.green.dark2,
+
   '--icon-color': uiColors.gray.dark3,
+  '--icon-color-hover': uiColors.black,
   '--hover-icon-color': uiColors.gray.dark1,
+  '--hover-icon-color-hover': uiColors.black,
 
   '--item-color': uiColors.gray.dark3,
   '--item-color-hover': uiColors.gray.dark3,

packages/compass-components/src/index.ts

@@ -30,6 +30,11 @@ import { ResizeHandle, ResizeDirection } from './components/resize-handle';
 import { Accordion } from './components/accordion';
 import { WorkspaceTabs } from './components/workspace-tabs/workspace-tabs';
 import ResizableSidebar from './components/resizeable-sidebar';
+import {
+  ItemAction,
+  ItemActionControls,
+} from './components/item-action-controls';
+import { SmallIcon, IconButtonSmall } from './components/icon-button';
 export {
   Editor,
   EditorVariant,
@@ -85,6 +90,10 @@ export {
   Toolbar,
   WarningSummary,
   WorkspaceTabs,
+  ItemAction,
+  ItemActionControls,
+  SmallIcon,
+  IconButtonSmall,
 };
 export {
   useFocusState,

packages/compass-databases-navigation/src/collection-item.tsx

@@ -5,17 +5,17 @@ import {
   spacing,
   css,
   cx,
+  ItemActionControls,
+  SmallIcon,
 } from '@mongodb-js/compass-components';
+import type { ItemAction } from '@mongodb-js/compass-components';
 import { COLLECTION_ROW_HEIGHT } from './constants';
-import { ActionControls } from './item-action-controls';
-import type { NamespaceAction } from './item-action-controls';
 import { ItemContainer, ItemLabel } from './tree-item';
 import type {
   VirtualListItemProps,
   TreeItemProps,
   NamespaceItemProps,
 } from './tree-item';
-import { SmallIcon } from './icon-button';
 import type { Actions } from './constants';
 
 const CollectionIcon: React.FunctionComponent<{
@@ -87,7 +87,7 @@ export const CollectionItem: React.FunctionComponent<
   );
 
   const actions = useMemo(() => {
-    const actions: NamespaceAction[] = [
+    const actions: ItemAction<Actions>[] = [
       {
         action: 'open-in-new-tab',
         label: 'Open in New Tab',
@@ -150,14 +150,15 @@ export const CollectionItem: React.FunctionComponent<
     >
       <CollectionIcon type={type} />
       <ItemLabel className={collectionItemLabel}>{name}</ItemLabel>
-      <ActionControls
+      <ItemActionControls<Actions>
         className={collectionActions}
         onAction={onAction}
         isActive={isActive}
         isHovered={isHovered}
         actions={actions}
         shouldCollapseActionsToMenu
-      ></ActionControls>
+        mode="hovered"
+      ></ItemActionControls>
     </ItemContainer>
   );
 };

packages/compass-databases-navigation/src/database-item.tsx

@@ -5,17 +5,17 @@ import {
   spacing,
   css,
   cx,
+  ItemActionControls,
+  SmallIcon,
 } from '@mongodb-js/compass-components';
+import type { ItemAction } from '@mongodb-js/compass-components';
 import { DATABASE_ROW_HEIGHT } from './constants';
-import { ActionControls } from './item-action-controls';
-import type { NamespaceAction } from './item-action-controls';
 import { ItemContainer, ItemLabel } from './tree-item';
 import type {
   VirtualListItemProps,
   TreeItemProps,
   NamespaceItemProps,
 } from './tree-item';
-import { SmallIcon } from './icon-button';
 import type { Actions } from './constants';
 
 const buttonReset = css({
@@ -134,7 +134,7 @@ export const DatabaseItem: React.FunctionComponent<
     [id, onNamespaceAction]
   );
 
-  const actions: NamespaceAction[] = useMemo(() => {
+  const actions: ItemAction<Actions>[] = useMemo(() => {
     return [
       {
         action: 'create-collection',
@@ -185,13 +185,14 @@ export const DatabaseItem: React.FunctionComponent<
         {name}
       </ItemLabel>
       {!isReadOnly && (
-        <ActionControls
+        <ItemActionControls<Actions>
           className={databaseActions}
           onAction={onAction}
           isActive={isActive}
           isHovered={isHovered}
           actions={actions}
-        ></ActionControls>
+          mode="hovered"
+        ></ItemActionControls>
       )}
     </ItemContainer>
   );

packages/compass-home/src/components/home.tsx

@@ -259,6 +259,8 @@ function ThemedHome(
 
   const [theme, setTheme] = useState<ThemeState>({
     theme: (global as any).hadronApp?.theme ?? Theme.Light,
+    // useful for quickly testing the new dark sidebar without rebuilding
+    //theme: Theme.Dark, enabled: true
   });
 
   function onDarkModeEnabled() {

packages/compass-sidebar/src/components-legacy/sidebar/sidebar.module.less

@@ -24,9 +24,11 @@
   --bg-color: @compass-sidebar-base-background-color;
 
   --icon-color: @pw;
+  --icon-color-hover: @pw;
   // NOTE: This is for icons that only display when hovering over an item,
   // not the color used for the icon when hovering over the icon itself.
   --hover-icon-color: @pw;
+  --hover-icon-color-hover: @pw;
 
   --item-color: @pw;
   --item-color-hover: @pw;

packages/compass-sidebar/src/components/favorite-indicator.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { ConnectionFavoriteOptions } from 'mongodb-data-service';
+import { useConnectionColor } from '@mongodb-js/connection-form';
+
+import { css, spacing } from '@mongodb-js/compass-components';
+
+export default function FavoriteIndicator({
+  favorite,
+}: {
+  favorite: ConnectionFavoriteOptions;
+}) {
+  const { connectionColorToHex } = useConnectionColor();
+
+  const favoriteColorHex = connectionColorToHex(favorite.color) ?? '';
+
+  const favoriteCSS = css({
+    backgroundColor: favoriteColorHex || 'transparent',
+    height: spacing[2],
+  });
+
+  return <div className={favoriteCSS} />;
+}