chore(connections-navigation): disable sidebar right-caret on disconnected connections (#6499)

* Add and use disable prop on ExpandButton

* Pass functional Item component directly

* Pass and call a memoized toggle callback

* Prevent propagation of clicks on the ExpandButton

* Revert "Pass functional Item component directly"

This reverts commit a2c3f42.

Author: kraenhansen

packages/compass-connections-navigation/src/base-navigation-item.tsx

@@ -28,7 +28,7 @@ type NavigationBaseItemProps = {
     actions: NavigationItemActions;
     onAction: (action: Actions) => void;
   };
-  onExpand: (toggle: boolean) => void;
+  toggleExpand: () => void;
 };
 
 const menuStyles = css({
@@ -98,7 +98,7 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   isExpanded,
   isFocused,
   hasDefaultAction,
-  onExpand,
+  toggleExpand,
   children,
 }) => {
   const [hoverProps, isHovered] = useHoverState();
@@ -114,12 +114,13 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
       <div className={cx('item-wrapper', itemWrapperStyles)} style={style}>
         {isExpandVisible && (
           <ExpandButton
-            onClick={(evt) => {
-              if (isExpandDisabled) return;
-              evt.stopPropagation();
-              onExpand(!isExpanded);
+            onClick={(event) => {
+              // Prevent the click from propagating to the `TreeItem`, triggering the default action
+              event.stopPropagation();
+              toggleExpand();
             }}
             isExpanded={isExpanded}
+            disabled={isExpandDisabled}
           ></ExpandButton>
         )}
         <div className={labelAndIconWrapperStyles}>

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -242,6 +242,12 @@ export function NavigationItem({
     return actions;
   }, [item, isDarkMode]);
 
+  const toggleExpand = useCallback(() => {
+    if (item.type !== 'placeholder') {
+      onItemExpand(item, !item.isExpanded);
+    }
+  }, [onItemExpand, item]);
+
   return (
     <StyledNavigationItem item={item}>
       {item.type === 'placeholder' ? (
@@ -262,9 +268,7 @@ export function NavigationItem({
           isExpandDisabled={
             item.type === 'connection' && item.connectionStatus !== 'connected'
           }
-          onExpand={(isExpanded: boolean) => {
-            onItemExpand(item, isExpanded);
-          }}
+          toggleExpand={toggleExpand}
           actionProps={actionProps}
         >
           {!!connectionStaticActions.length && (

packages/compass-connections-navigation/src/tree-item.tsx

@@ -13,9 +13,6 @@ const expandButton = css({
   display: 'flex',
   transition: 'transform .16s linear',
   transform: 'rotate(0deg)',
-  '&:hover': {
-    cursor: 'pointer',
-  },
   // we're sizing the icon down below but we still want the button to take up
   // 16px so that the grid lines up
   minWidth: spacing[400],
@@ -24,18 +21,23 @@ const expandButton = css({
   justifyContent: 'center',
 });
 
-const expanded = css({
+const expandedStyles = css({
   transform: 'rotate(90deg)',
 });
 
+const enabledStyles = css({
+  cursor: 'pointer',
+});
+
 export type VirtualListItemProps = {
   style?: CSSProperties;
 };
 
 export const ExpandButton: React.FunctionComponent<{
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   isExpanded: boolean;
-}> = ({ onClick, isExpanded }) => {
+  disabled?: boolean;
+}> = ({ onClick, isExpanded, disabled = false }) => {
   return (
     <button
       type="button"
@@ -46,7 +48,11 @@ export const ExpandButton: React.FunctionComponent<{
       // using a mouse
       tabIndex={-1}
       onClick={onClick}
-      className={cx(buttonReset, expandButton, isExpanded && expanded)}
+      className={cx(buttonReset, expandButton, {
+        [expandedStyles]: isExpanded,
+        [enabledStyles]: !disabled,
+      })}
+      disabled={disabled}
     >
       <Icon width={14} height={14} glyph="CaretRight" size="small"></Icon>
     </button>