[ui] Allow disabling Settings left pane items

js_modules/dagster-ui/packages/ui-core/src/ui/SideNavItem.tsx

@@ -1,13 +1,14 @@
-import {Box, Colors, IconWrapper, UnstyledButton} from '@dagster-io/ui-components';
+import {Box, Colors, IconWrapper, Tooltip, UnstyledButton} from '@dagster-io/ui-components';
 import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
 interface SideNavItemInterface {
   key: string;
   icon: React.ReactNode;
   label: React.ReactNode;
+  disabled?: boolean;
   rightElement?: React.ReactNode;
-  tooltip?: React.ReactNode;
+  tooltip?: string;
   onClick?: () => void;
 }
 
@@ -30,7 +31,7 @@ interface Props {
 
 export const SideNavItem = (props: Props) => {
   const {active = false, item} = props;
-  const {type, icon, label, rightElement} = item;
+  const {type, icon, label, rightElement, tooltip = '', disabled = false} = item;
   const content = (
     <Box
       padding={{vertical: 4, left: 12, right: 8}}
@@ -44,15 +45,23 @@ export const SideNavItem = (props: Props) => {
     </Box>
   );
 
-  if (type === 'link') {
+  if (type === 'link' && !disabled) {
     return (
-      <StyledSideNavLink to={item.path} $active={active}>
-        {content}
-      </StyledSideNavLink>
+      <Tooltip canShow={!!tooltip} content={tooltip} placement="right" display="block">
+        <StyledSideNavLink to={item.path} $active={active}>
+          {content}
+        </StyledSideNavLink>
+      </Tooltip>
     );
   }
 
-  return <StyledSideNavButton onClick={item.onClick}>{content}</StyledSideNavButton>;
+  return (
+    <Tooltip canShow={!!tooltip} content={tooltip} placement="right" display="block">
+      <StyledSideNavButton disabled={disabled} onClick={item.onClick}>
+        {content}
+      </StyledSideNavButton>
+    </Tooltip>
+  );
 };
 
 const StyledSideNavLink = styled(Link)<{$active: boolean}>`
@@ -91,6 +100,7 @@ const StyledSideNavButton = styled(UnstyledButton)`
   border-radius: 8px;
   color: ${Colors.textDefault()};
   display: block;
+  font-size: 14px;
   line-height: 20px;
   text-decoration: none;
   transition: 100ms background-color linear;