fix: Minor bug fixes on detected by cloud deprecations (#1430)

pluralsh · Oct 2, 2024 · f55fe75 · f55fe75
1 parent eaac651
commit f55fe75
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 11 deletions.
diff --git a/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx b/assets/src/components/cd/clusters/ClusterUpgradeFlyover.tsx
@@ -16,15 +16,15 @@ import {
 import {
   ClustersRowFragment,
   UpgradeInsight,
+  UpgradeInsightStatus,
   useRuntimeServicesQuery,
 } from 'generated/graphql'
 import isEmpty from 'lodash/isEmpty'
 import React, { useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
-
 import { IconProps } from '@pluralsh/design-system/dist/components/icons/createIcon'
-
 import { Row } from '@tanstack/react-table'
+import { ChipProps } from '@pluralsh/design-system/dist/components/Chip'
 
 import { GqlError } from '../../utils/Alert'
 
@@ -45,17 +45,26 @@ export enum DeprecationType {
   CloudProvider = 'cloudProvider',
 }
 
-function DeprecationCountChip({ count }: { count: number }) {
+function DeprecationCountChip({
+  count,
+  ...props
+}: { count: number } & ChipProps) {
   return (
     <Chip
       size="small"
       severity={count === 0 ? 'neutral' : 'warning'}
+      {...props}
     >
       {count}
     </Chip>
   )
 }
 
+const statesWithIssues = [
+  UpgradeInsightStatus.Warning,
+  UpgradeInsightStatus.Failed,
+]
+
 function FlyoverContent({ open, cluster, refetch }) {
   const theme = useTheme()
   const tabStateRef = useRef<any>(null)
@@ -78,6 +87,10 @@ function FlyoverContent({ open, cluster, refetch }) {
   const apiDeprecations = data?.cluster?.apiDeprecations
   const upgradeInsights = data?.cluster?.upgradeInsights
 
+  const upgradeIssues = upgradeInsights?.filter(
+    (i) => i?.status && statesWithIssues.includes(i.status)
+  )
+
   return (
     <div
       css={{
@@ -161,11 +174,14 @@ function FlyoverContent({ open, cluster, refetch }) {
                 }}
                 css={{ display: 'flex', flexGrow: 1 }}
               >
-                {!isEmpty(upgradeInsights) && (
+                {!isEmpty(upgradeIssues) && (
                   <WarningIcon color="icon-warning" />
                 )}
                 Detected by Cloud Provider
-                <DeprecationCountChip count={upgradeInsights?.length ?? 0} />
+                <DeprecationCountChip
+                  count={upgradeInsights?.length ?? 0}
+                  severity={isEmpty(upgradeIssues) ? 'neutral' : 'warning'}
+                />
               </Tab>
             </TabList>
           </div>

diff --git a/assets/src/components/cd/clusters/UpgradeInsights.tsx b/assets/src/components/cd/clusters/UpgradeInsights.tsx
@@ -131,7 +131,13 @@ export function UpgradeInsightExpansionPanel({
                     paddingTop: theme.spacing.xsmall,
                   }}
                 >
-                  <div>
+                  <div
+                    css={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'center',
+                    }}
+                  >
                     <div
                       css={{
                         ...theme.partials.text.body2Bold,
@@ -146,11 +152,16 @@ export function UpgradeInsightExpansionPanel({
                         color: theme.colors['text-light'],
                       }}
                     >
-                      {!!replacement && <>Replaced with: {replacement}</>}
-                      {!!removedIn && <>Removed</>}
+                      {!!replacement && <div>Replaced with: {replacement}</div>}
                     </div>
                   </div>
-                  <div>
+                  <div
+                    css={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'center',
+                    }}
+                  >
                     <div css={{ display: 'flex', justifyContent: 'end' }}>
                       <UpgradeInsightStatusChip
                         status={status}
@@ -165,8 +176,10 @@ export function UpgradeInsightExpansionPanel({
                         textAlign: 'right',
                       }}
                     >
-                      {replacedIn && <>Replacement version: {replacedIn}</>}
-                      {removedIn && <>Removal version: {removedIn}</>}
+                      {replacedIn && (
+                        <div>Replacement version: {replacedIn}</div>
+                      )}
+                      {removedIn && <div>Removal version: {removedIn}</div>}
                     </div>
                   </div>
                 </div>