Disable pointer cursor and connect on click for disconnected connections

Author: kraenhansen

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

@@ -17,6 +17,7 @@ type NavigationBaseItemProps = {
   isExpandDisabled: boolean;
   isExpanded: boolean;
   isFocused: boolean;
+  hasDefaultAction: boolean;
   icon: React.ReactNode;
   style: React.CSSProperties;
 
@@ -37,7 +38,6 @@ const menuStyles = css({
 });
 
 const itemContainerStyles = css({
-  cursor: 'pointer',
   color: 'var(--item-color)',
   backgroundColor: 'var(--item-bg-color)',
   '&[data-is-active="true"] .item-wrapper': {
@@ -53,6 +53,10 @@ const itemContainerStyles = css({
   },
 });
 
+const itemContainerWithActionStyles = css({
+  cursor: 'pointer',
+});
+
 const itemWrapperStyles = css({
   display: 'flex',
   height: ROW_HEIGHT,
@@ -93,14 +97,17 @@ export const NavigationBaseItem: React.FC<NavigationBaseItemProps> = ({
   isExpandDisabled,
   isExpanded,
   isFocused,
+  hasDefaultAction,
   onExpand,
   children,
 }) => {
   const [hoverProps, isHovered] = useHoverState();
   return (
     <div
       data-testid="base-navigation-item"
-      className={itemContainerStyles}
+      className={cx(itemContainerStyles, {
+        [itemContainerWithActionStyles]: hasDefaultAction,
+      })}
       {...hoverProps}
       {...dataAttributes}
     >

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

@@ -87,8 +87,6 @@ const ConnectionsNavigationTree: React.FunctionComponent<
       if (item.type === 'connection') {
         if (item.connectionStatus === 'connected') {
           onItemAction(item, 'select-connection');
-        } else {
-          onItemAction(item, 'connection-connect');
         }
       } else if (item.type === 'database') {
         onItemAction(item, 'select-database');

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

@@ -251,6 +251,9 @@ export function NavigationItem({
           isActive={isActive}
           isFocused={isFocused}
           isExpanded={!!item.isExpanded}
+          hasDefaultAction={
+            item.type !== 'connection' || item.connectionStatus === 'connected'
+          }
           icon={itemIcon}
           name={item.name}
           style={style}