chore(compass-sidebar): adds CSFLE / Non-Genuine MongoDB markers in t…

…he sidebar along with some alignments with the new sidebar design (#5976)
mongodb-js · Jul 1, 2024 · 7b276ee · 7b276ee
1 parent 82744f6
commit 7b276ee
Show file tree

Hide file tree

Showing 22 changed files with 561 additions and 399 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/compass-components/src/components/icons/server-icon.tsx b/packages/compass-components/src/components/icons/server-icon.tsx
@@ -13,9 +13,9 @@ const ServerIcon = () => {
   return (
     <svg
       className={iconStyles}
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >

diff --git a/packages/compass-components/src/components/item-action-controls.tsx b/packages/compass-components/src/components/item-action-controls.tsx
@@ -28,6 +28,7 @@ export type ItemAction<Action extends string> = {
   isDisabled?: boolean;
   disabledDescription?: string;
   tooltip?: string;
+  actionButtonClassName?: string;
 };
 
 export type ItemSeparator = { separator: true };
@@ -72,10 +73,17 @@ const actionControlsStyle = css({
 
 const actionGroupButtonStyle = css({
   '&:not(:first-child)': {
-    marginLeft: spacing[1],
+    marginLeft: spacing[100],
   },
 });
 
+// Action buttons are rendered 4px apart from each other. With this we keep the
+// same spacing also when action buttons are rendered alongside action menu
+// (happens when collapseAfter prop is specified)
+const actionMenuWithActionControlsStyles = css({
+  marginLeft: spacing[100],
+});
+
 const iconContainerStyle = css({
   display: 'block',
   flex: 'none',
@@ -327,8 +335,15 @@ export function ItemActionGroup<Action extends string>({
           return <MenuSeparator key={`separator-${idx}`} />;
         }
 
-        const { action, icon, label, isDisabled, tooltip, tooltipProps } =
-          menuItem;
+        const {
+          action,
+          icon,
+          label,
+          isDisabled,
+          tooltip,
+          tooltipProps,
+          actionButtonClassName,
+        } = menuItem;
         const button = (
           <ItemActionButton
             key={action}
@@ -339,7 +354,11 @@ export function ItemActionGroup<Action extends string>({
             data-action={action}
             data-testid={actionTestId<Action>(dataTestId, action)}
             onClick={onClick}
-            className={cx(actionGroupButtonStyle, iconClassName)}
+            className={cx(
+              actionGroupButtonStyle,
+              iconClassName,
+              actionButtonClassName
+            )}
             style={iconStyle}
             disabled={isDisabled}
           />
@@ -351,7 +370,11 @@ export function ItemActionGroup<Action extends string>({
               key={action}
               {...tooltipProps}
               trigger={({ children, ...props }) => (
-                <div {...props} style={{ display: 'inherit' }}>
+                <div
+                  {...props}
+                  className={actionGroupButtonStyle}
+                  style={{ display: 'inherit' }}
+                >
                   {button}
                   {children}
                 </div>
@@ -442,6 +465,10 @@ export function ItemActionControls<Action extends string>({
           actions={collapsedActions}
           {...sharedProps}
           {...sharedMenuProps}
+          className={cx(
+            actionMenuWithActionControlsStyles,
+            sharedProps.className
+          )}
         ></ItemActionMenu>
       </div>
     );

diff --git a/packages/compass-connections-navigation/src/base-navigation-item.tsx b/packages/compass-connections-navigation/src/base-navigation-item.tsx
@@ -4,58 +4,87 @@ import {
   spacing,
   css,
   ItemActionControls,
+  cx,
 } from '@mongodb-js/compass-components';
 import { ROW_HEIGHT, type Actions } from './constants';
-import {
-  ItemContainer,
-  ItemLabel,
-  ItemWrapper,
-  ItemButtonWrapper,
-  ExpandButton,
-} from './tree-item';
+import { ExpandButton } from './tree-item';
 import { type NavigationItemActions } from './item-actions';
 
 type NavigationBaseItemProps = {
-  isActive: boolean;
-  style: React.CSSProperties;
-
   name: string;
-  icon: React.ReactNode;
-
-  dataAttributes?: Record<string, string | undefined>;
-
+  isActive: boolean;
   canExpand: boolean;
   isExpanded: boolean;
   isFocused: boolean;
-  onExpand: (toggle: boolean) => void;
+  icon: React.ReactNode;
+  style: React.CSSProperties;
 
+  dataAttributes?: Record<string, string | undefined>;
   actionProps: {
     collapseAfter?: number;
     collapseToMenuThreshold?: number;
     actions: NavigationItemActions;
     onAction: (action: Actions) => void;
   };
+  onExpand: (toggle: boolean) => void;
 };
 
-const baseItemContainerStyles = css({
-  height: ROW_HEIGHT,
+const menuStyles = css({
+  width: '240px',
+  maxHeight: 'unset',
+  marginLeft: 'auto',
 });
 
-const baseItemButtonWrapperStyles = css({
+const itemContainerStyles = css({
+  paddingLeft: spacing[300],
+  paddingRight: spacing[300],
+  cursor: 'pointer',
+  color: 'var(--item-color)',
+  backgroundColor: 'var(--item-bg-color)',
+  '&[data-is-active="true"] .item-wrapper': {
+    fontWeight: 600,
+    color: 'var(--item-color-active)',
+    backgroundColor: 'var(--item-bg-color-active)',
+  },
+  '&:hover:not([data-is-active="true"]) .item-wrapper': {
+    backgroundColor: 'var(--item-bg-color-hover)',
+  },
+  svg: {
+    flexShrink: 0,
+  },
+});
+
+const itemWrapperStyles = css({
+  display: 'flex',
   height: ROW_HEIGHT,
+  alignItems: 'center',
+  paddingLeft: spacing[100],
   paddingRight: spacing[100],
+  gap: spacing[50],
+  borderRadius: spacing[100],
 });
 
-const baseItemLabelStyles = css({
-  marginLeft: spacing[200],
+const labelAndIconWrapperStyles = css({
+  width: '100%',
+  display: 'flex',
+  gap: spacing[150],
+  overflow: 'hidden',
+  alignItems: 'center',
+  '& span': {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
 });
 
-const menuStyles = css({
-  width: '240px',
-  maxHeight: 'unset',
+const actionControlsWrapperStyles = css({
+  display: 'flex',
+  marginLeft: 'auto',
+  alignItems: 'center',
+  gap: spacing[100],
 });
 
-export const NavigationBaseItem = ({
+export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   isActive,
   actionProps,
   name,
@@ -66,43 +95,41 @@ export const NavigationBaseItem = ({
   isExpanded,
   isFocused,
   onExpand,
-}: NavigationBaseItemProps) => {
+  children,
+}) => {
   const [hoverProps, isHovered] = useHoverState();
   return (
-    <ItemContainer
+    <div
       data-testid="base-navigation-item"
-      isActive={isActive}
-      className={baseItemContainerStyles}
+      className={itemContainerStyles}
       {...hoverProps}
       {...dataAttributes}
     >
-      <ItemWrapper>
-        <ItemButtonWrapper
-          style={style}
-          className={baseItemButtonWrapperStyles}
-        >
-          {canExpand && (
-            <ExpandButton
-              onClick={(evt) => {
-                evt.stopPropagation();
-                onExpand(!isExpanded);
-              }}
-              isExpanded={isExpanded}
-            ></ExpandButton>
-          )}
+      <div className={cx('item-wrapper', itemWrapperStyles)} style={style}>
+        {canExpand && (
+          <ExpandButton
+            onClick={(evt) => {
+              evt.stopPropagation();
+              onExpand(!isExpanded);
+            }}
+            isExpanded={isExpanded}
+          ></ExpandButton>
+        )}
+        <div className={labelAndIconWrapperStyles}>
           {icon}
-          <ItemLabel className={baseItemLabelStyles} title={name}>
-            {name}
-          </ItemLabel>
-        </ItemButtonWrapper>
-        <ItemActionControls<Actions>
-          menuClassName={menuStyles}
-          isVisible={isActive || isHovered || isFocused}
-          data-testid="sidebar-navigation-item-actions"
-          iconSize="small"
-          {...actionProps}
-        ></ItemActionControls>
-      </ItemWrapper>
-    </ItemContainer>
+          <span title={name}>{name}</span>
+        </div>
+        <div className={actionControlsWrapperStyles}>
+          <ItemActionControls<Actions>
+            menuClassName={menuStyles}
+            isVisible={isActive || isHovered || isFocused}
+            data-testid="sidebar-navigation-item-actions"
+            iconSize="xsmall"
+            {...actionProps}
+          ></ItemActionControls>
+          {children}
+        </div>
+      </div>
+    </div>
   );
 };