improve tree/table switch (#1656)

pluralsh · Dec 6, 2024 · 9f148a0 · 9f148a0
1 parent 94708b1
commit 9f148a0
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 76 deletions.
diff --git a/assets/src/components/cd/cluster/Cluster.tsx b/assets/src/components/cd/cluster/Cluster.tsx
@@ -60,18 +60,23 @@ import ClusterSelector from '../utils/ClusterSelector'
 
 import { ClusterPermissionsModal } from './ClusterPermissions'
 import { ClusterSettingsModal } from './ClusterSettings.tsx'
+import { InsightsTabLabel } from 'components/utils/AiInsights.tsx'
 
-const directory = [
-  { path: CLUSTER_SERVICES_PATH, label: 'Services' },
-  { path: CLUSTER_NODES_PATH, label: 'Nodes' },
-  { path: CLUSTER_PODS_PATH, label: 'Pods' },
-  { path: CLUSTER_INSIGHTS_PATH, label: 'Insights' },
-  { path: CLUSTER_METADATA_PATH, label: 'Metadata' },
-  { path: CLUSTER_VCLUSTERS_REL_PATH, label: 'VClusters', vclusters: true },
-  { path: CLUSTER_LOGS_PATH, label: 'Logs', logs: true },
-  { path: CLUSTER_ADDONS_REL_PATH, label: 'Add-ons' },
-  { path: CLUSTER_PRS_REL_PATH, label: 'PRs' },
-] as const
+const getDirectory = ({ cluster }: { cluster: Nullable<ClusterFragment> }) =>
+  [
+    { path: CLUSTER_SERVICES_PATH, label: 'Services' },
+    { path: CLUSTER_NODES_PATH, label: 'Nodes' },
+    { path: CLUSTER_PODS_PATH, label: 'Pods' },
+    {
+      path: CLUSTER_INSIGHTS_PATH,
+      label: <InsightsTabLabel insight={cluster?.insight} />,
+    },
+    { path: CLUSTER_METADATA_PATH, label: 'Metadata' },
+    { path: CLUSTER_VCLUSTERS_REL_PATH, label: 'VClusters', vclusters: true },
+    { path: CLUSTER_LOGS_PATH, label: 'Logs', logs: true },
+    { path: CLUSTER_ADDONS_REL_PATH, label: 'Add-ons' },
+    { path: CLUSTER_PRS_REL_PATH, label: 'PRs' },
+  ] as const
 
 const getSharedMenuItems = (cluster: ClusterFragment): Array<MoreMenuItem> => [
   {
@@ -141,8 +146,6 @@ export default function Cluster() {
   const [refetchServices, setRefetchServices] = useState(() => () => {})
   const logsEnabled = useLogsEnabled()
 
-  const currentTab = directory.find(({ path }) => path === tab)
-
   const {
     data,
     refetch: refetchCluster,
@@ -154,6 +157,8 @@ export default function Cluster() {
   })
 
   const cluster = data?.cluster
+  const directory = getDirectory({ cluster })
+  const currentTab = directory.find(({ path }) => path === tab)
 
   const [headerContent, setHeaderContent] = useState<ReactNode>()
   const [menuKey, setMenuKey] = useState<string>('')
@@ -234,18 +239,12 @@ export default function Cluster() {
                   css={{ minWidth: 'fit-content' }}
                   subTab
                   key={path}
-                  textValue={label}
                   to={`${CLUSTER_ABS_PATH}/${path}`.replace(
                     `:${CLUSTER_PARAM_ID}`,
                     clusterId ?? ''
                   )}
                 >
-                  <SubTab
-                    key={path}
-                    textValue={label}
-                  >
-                    {label}
-                  </SubTab>
+                  <SubTab key={path}>{label}</SubTab>
                 </LinkTabWrap>
               ))}
           </TabList>

diff --git a/assets/src/components/utils/ButtonGroup.tsx b/assets/src/components/utils/ButtonGroup.tsx
@@ -1,5 +1,5 @@
-import { SubTab, TabList } from '@pluralsh/design-system'
-import { ReactNode, useCallback, useRef } from 'react'
+import { Flex, SubTab } from '@pluralsh/design-system'
+import { ReactNode } from 'react'
 import { useTheme } from 'styled-components'
 
 import { LinkTabWrap } from './Tabs.tsx'
@@ -20,78 +20,47 @@ export default function ButtonGroup({
   directory,
   toPath,
   tab,
-}: ButtonGroupProps): ReactNode {
+}: ButtonGroupProps) {
   const theme = useTheme()
-  const tabStateRef = useRef<any>(null)
-  const currentTab = directory.find(({ path }) => path === tab)
-  const radius = theme.borderRadiuses.medium
-
-  const first = useCallback((idx: number) => idx === 0, [])
-  const last = useCallback(
-    (idx: number) => !first(idx) && idx === directory.length - 1,
-    [directory.length, first]
-  )
-  const middle = useCallback(
-    (idx: number) => !first(idx) && !last(idx),
-    [first, last]
-  )
 
   return (
-    <TabList
-      margin={1}
-      stateRef={tabStateRef}
-      stateProps={{
-        orientation: 'horizontal',
-        selectedKey: currentTab?.path,
-      }}
+    <Flex
+      borderRadius={theme.borderRadiuses.medium}
+      border={theme.borders.default}
+      columnGap={1}
     >
       {directory.map(({ path, icon, label }, idx) => (
         <LinkTabWrap
+          active={path === tab}
           subTab
           key={path}
           textValue={label}
-          css={{
-            width: label ? 'auto' : 40,
-            height: label ? 'auto' : 40,
-            border: theme.borders.default,
-            borderColor:
-              path === tab
-                ? theme.colors['border-selected']
-                : theme.colors['border'],
-            borderTopRightRadius: first(idx) || middle(idx) ? 0 : radius,
-            borderBottomRightRadius: first(idx) || middle(idx) ? 0 : radius,
-            borderTopLeftRadius: last(idx) || middle(idx) ? 0 : radius,
-            borderBottomLeftRadius: last(idx) || middle(idx) ? 0 : radius,
-          }}
           to={toPath(path)}
         >
           <SubTab
             key={path}
             css={{
-              alignItems: 'center',
               display: 'flex',
               gap: theme.spacing.small,
-              outline: 'none',
-              borderTopRightRadius: first(idx) || middle(idx) ? 0 : radius,
-              borderBottomRightRadius: first(idx) || middle(idx) ? 0 : radius,
-              borderTopLeftRadius: last(idx) || middle(idx) ? 0 : radius,
-              borderBottomLeftRadius: last(idx) || middle(idx) ? 0 : radius,
-              ...(!label
-                ? {
-                    justifyContent: 'center',
-                    display: 'inline-flex',
-                    width: '100%',
-                    height: '100%',
-                    padding: 0,
-                    outline: 'none',
-                  }
-                : {}),
+              padding: !label ? theme.spacing.small : undefined,
+              outline: path === tab ? undefined : 'none',
+              outlineOffset: 0,
+              outlineColor: theme.colors['border-input'],
+              borderTopLeftRadius: idx === 0 ? theme.borderRadiuses.medium : 0,
+              borderBottomLeftRadius:
+                idx === 0 ? theme.borderRadiuses.medium : 0,
+              borderTopRightRadius:
+                idx === directory.length - 1 ? theme.borderRadiuses.medium : 0,
+              borderBottomRightRadius:
+                idx === directory.length - 1 ? theme.borderRadiuses.medium : 0,
+              height: '100%',
+              '&:hover': { background: theme.colors['fill-zero-hover'] },
             }}
           >
             {icon} {label}
           </SubTab>
         </LinkTabWrap>
       ))}
-    </TabList>
+    </Flex>
   )
 }
diff --git a/assets/src/generated/graphql-kubernetes.ts b/assets/src/generated/graphql-kubernetes.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* prettier-ignore */
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';

diff --git a/assets/src/generated/graphql-plural.ts b/assets/src/generated/graphql-plural.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* prettier-ignore */
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';

diff --git a/assets/src/generated/graphql.ts b/assets/src/generated/graphql.ts
@@ -1,4 +1,4 @@
-/* eslint-disable */
+ 
 /* prettier-ignore */
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';