upgrade plan visual improvements (#1024)

pluralsh · Jun 7, 2024 · d567525 · d567525
1 parent b5b8298
commit d567525
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 36 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -46,7 +46,7 @@
     "@nivo/pie": "0.83.0",
     "@nivo/radial-bar": "0.83.0",
     "@nivo/tooltip": "0.83.0",
-    "@pluralsh/design-system": "^3.43.0",
+    "@pluralsh/design-system": "^3.45.1",
     "@react-hooks-library/core": "0.6.0",
     "@tanstack/react-virtual": "3.0.1",
     "anser": "2.1.1",

diff --git a/assets/src/components/cd/clusters/ClusterUpgrade.tsx b/assets/src/components/cd/clusters/ClusterUpgrade.tsx
@@ -32,7 +32,7 @@ export default function ClusterUpgrade({
     <>
       <Button
         small
-        floating
+        secondary
         minWidth="fit-content"
         startIcon={
           numUpgrades < 2 ? (

diff --git a/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx b/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx
@@ -2,11 +2,11 @@ import {
   Accordion,
   AppIcon,
   Button,
+  ChecklistIcon,
   ClusterIcon,
   ConfettiIcon,
   Flyover,
   ListBoxItem,
-  MarketPlusIcon,
   Select,
   SuccessIcon,
   Table,
@@ -319,18 +319,20 @@ function FlyoverContent({ open, cluster, refetch }) {
           meta: { refetch, setError, data },
         }}
       />
-      <Accordion
+      <FlyoverAccordionSC
+        padContent={isEmpty(apiDeprecations)}
         label={
           <ClusterUpgradeAccordionTrigger
             checked={cluster?.upgradePlan?.deprecations || false}
-            icon={ClusterIcon}
-            title="Check API Deprecations"
-            subtitle="Ensure that all k8s yaml you're deploying is conformant with the next k8s version"
+            icon={ChecklistIcon}
+            title="Check API deprecations"
+            subtitle="Ensure that all K8s YAML you're deploying is conformant with the next K8s version"
           />
         }
       >
         {!isEmpty(apiDeprecations) ? (
           <Table
+            flush
             data={apiDeprecations || []}
             columns={deprecationsColumns}
             css={{
@@ -341,35 +343,39 @@ function FlyoverContent({ open, cluster, refetch }) {
         ) : (
           <EmptyState description="No services with api deprecations discovered!" />
         )}
-      </Accordion>
-      <Accordion
+      </FlyoverAccordionSC>
+      <FlyoverAccordionSC
+        padContent={isEmpty(runtimeServices)}
         label={
           <ClusterUpgradeAccordionTrigger
             checked={cluster?.upgradePlan?.compatibilities || false}
-            icon={MarketPlusIcon}
-            title="Check Add-On Compatibilities"
-            subtitle="Ensure all known third-party add-ons are supported on the next k8s version"
+            icon={ChecklistIcon}
+            title="Check add-on compatibilities"
+            subtitle="Ensure all known third-party add-ons are supported on the next K8s version"
           />
         }
       >
         {!isEmpty(runtimeServices) ? (
-          <RuntimeServices data={data} />
+          <RuntimeServices
+            flush
+            data={data}
+          />
         ) : (
           <EmptyState description="No known add-ons found" />
         )}
-      </Accordion>
-      <Accordion
+      </FlyoverAccordionSC>
+      <FlyoverAccordionSC
         label={
           <ClusterUpgradeAccordionTrigger
             checked={cluster?.upgradePlan?.incompatibilities || false}
-            icon={MarketPlusIcon}
-            title="Check Add-On Mutual Incompatibilities"
+            icon={ChecklistIcon}
+            title="Check add-on mutual incompatibilities"
             subtitle="Use suggested version for each add-on to resolve mutual incompatibilities"
           />
         }
       >
         <EmptyState description="No mutually incompatible add-ons detected!" />
-      </Accordion>
+      </FlyoverAccordionSC>
     </div>
   )
 }
@@ -456,12 +462,9 @@ function ClusterUpgradeAccordionTrigger({
         size="xxsmall"
         icon={
           checked ? (
-            <SuccessIcon
-              width={16}
-              color="icon-success"
-            />
+            <SuccessIcon color="icon-success" />
           ) : (
-            <Icon width={16} />
+            <Icon color="icon-warning" />
           )
         }
       />
@@ -483,3 +486,7 @@ const TriggerWrapperSC = styled.div(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
 }))
+
+const FlyoverAccordionSC = styled(Accordion)(({ theme }) => ({
+  backgroundColor: theme.colors['fill-one'],
+}))
diff --git a/assets/src/components/cd/clusters/ClustersColumns.tsx b/assets/src/components/cd/clusters/ClustersColumns.tsx
@@ -260,6 +260,9 @@ const ColStatusSC = styled.div(({ theme }) => ({
 export const ColStatus = columnHelper.accessor(({ node }) => node, {
   id: 'status',
   header: 'Status',
+  meta: {
+    gridTemplate: 'min-content',
+  },
   cell: ({ table, getValue, row: { original } }) => {
     const cluster = getValue()
     const { refetch } = table.options.meta as { refetch?: () => void }

diff --git a/assets/src/components/cd/clusters/runtime/RuntimeServices.tsx b/assets/src/components/cd/clusters/runtime/RuntimeServices.tsx
@@ -14,8 +14,10 @@ export function getClusterKubeVersion(
 
 export default function RuntimeServices({
   data,
+  flush,
 }: {
   data?: RuntimeServicesQuery
+  flush?: boolean
 }) {
   const addOns = useMemo(
     () => data?.cluster?.runtimeServices?.filter(isNonNullable) || [],
@@ -27,6 +29,7 @@ export default function RuntimeServices({
 
   return (
     <Table
+      flush={flush}
       data={addOns}
       columns={runtimeColumns}
       reactTableOptions={{ meta: { clusterId: data?.cluster?.id } }}

diff --git a/assets/src/components/cd/clusters/runtime/columns.tsx b/assets/src/components/cd/clusters/runtime/columns.tsx
@@ -6,8 +6,8 @@ import { TableText } from 'components/cluster/TableElements'
 import {
   ArrowTopRightIcon,
   BlockedIcon,
+  Chip,
   IconFrame,
-  Tooltip,
 } from '@pluralsh/design-system'
 
 import styled, { useTheme } from 'styled-components'
@@ -166,19 +166,23 @@ const colKubVersion = columnHelperRuntime.accessor((row) => row?.addonVersion, {
 })
 const colBlocking = columnHelperRuntime.accessor((row) => row?.addonVersion, {
   id: 'blocking',
-  header: 'Blocks k8s upgrade',
-  cell: ({ getValue }) => {
+  header: 'Blocks upgrade',
+  cell: function Cell({ getValue }) {
+    const theme = useTheme()
     const addonVersion = getValue()
 
     if (!addonVersion?.blocking) return null
 
     return (
-      <Tooltip label="Blocking">
+      <Chip severity="danger">
         <BlockedIcon
           color="icon-danger"
-          size={16}
+          size={theme.spacing.small}
         />
-      </Tooltip>
+        <span css={{ alignSelf: 'center', marginLeft: theme.spacing.xxsmall }}>
+          Blocking
+        </span>
+      </Chip>
     )
   },
 })

diff --git a/assets/src/components/home/clusteroverview/ClusterOverviewTable.tsx b/assets/src/components/home/clusteroverview/ClusterOverviewTable.tsx
@@ -55,11 +55,11 @@ export function ClusterOverViewTable({
 export const ColActions = columnHelper.display({
   id: 'actions',
   meta: {
-    gridTemplate: 'minmax(25px, 50px)',
+    gridTemplate: 'minmax(auto, 80px)',
   },
   cell: ({ row: { original } }) => (
     <TableCaretLink
-      style={{ alignSelf: 'end' }}
+      css={{ alignSelf: 'end' }}
       to={getClusterDetailsPath({
         clusterId: original?.node?.id,
       })}

diff --git a/assets/src/components/policies/PoliciesTable.tsx b/assets/src/components/policies/PoliciesTable.tsx
@@ -71,6 +71,7 @@ export function PoliciesTable({
         flexDirection: 'column',
         gap: theme.spacing.small,
         height: '100%',
+        width: '100%',
       }}
     >
       {!data ? (

diff --git a/assets/yarn.lock b/assets/yarn.lock
@@ -4314,9 +4314,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pluralsh/design-system@npm:^3.43.0":
-  version: 3.43.0
-  resolution: "@pluralsh/design-system@npm:3.43.0"
+"@pluralsh/design-system@npm:^3.45.1":
+  version: 3.45.1
+  resolution: "@pluralsh/design-system@npm:3.45.1"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.13.3
     "@loomhq/loom-embed": 1.5.0
@@ -4364,7 +4364,7 @@ __metadata:
     react-dom: ">=18.3.1"
     react-transition-group: ">=4.4.5"
     styled-components: ">=5.3.11"
-  checksum: dea744d41d1906441ed005aafd5dc041e5efeac00d01cb3a73b6c608b232856fc87eb0a92494056bb310c93a9e9b6bb7190616574e65f0a195143eeddd4efef1
+  checksum: 12c568bb0d5f114a07574ee8faf211ccfd1db3830f63d957ba0ec2471968fdacce54968f981da87b4069a968619c68f9598391c81c71a50b88c55f71ccd9c879
   languageName: node
   linkType: hard
 
@@ -9585,7 +9585,7 @@ __metadata:
     "@nivo/pie": 0.83.0
     "@nivo/radial-bar": 0.83.0
     "@nivo/tooltip": 0.83.0
-    "@pluralsh/design-system": ^3.43.0
+    "@pluralsh/design-system": ^3.45.1
     "@pluralsh/eslint-config-typescript": 2.5.150
     "@pluralsh/stylelint-config": 2.0.10
     "@react-hooks-library/core": 0.6.0