Web: show status on unhealthy state only (#54695)

Author: kimlisa

web/packages/shared/components/UnifiedResources/CardsView/ResourceCard.tsx

@@ -35,6 +35,7 @@ import {
 import { PinButton } from '../shared/PinButton';
 import { ResourceActionButtonWrapper } from '../shared/ResourceActionButton';
 import { SingleLineBox } from '../shared/SingleLineBox';
+import { isUnhealthy } from '../shared/StatusInfo';
 import { ResourceItemProps } from '../types';
 import { WarningRightEdgeBadgeSvg } from './WarningRightEdgeBadgeSvg';
 
@@ -167,7 +168,7 @@ export function ResourceCard({
     }
   };
 
-  const hasUnhealthyStatus = status && status !== 'healthy';
+  const hasUnhealthyStatus = isUnhealthy(status);
 
   return (
     <CardContainer

web/packages/shared/components/UnifiedResources/ListView/ResourceListItem.tsx

@@ -35,6 +35,7 @@ import {
 } from '../shared/getBackgroundColor';
 import { PinButton } from '../shared/PinButton';
 import { ResourceActionButtonWrapper } from '../shared/ResourceActionButton';
+import { isUnhealthy } from '../shared/StatusInfo';
 import { ResourceItemProps } from '../types';
 
 export function ResourceListItem({
@@ -70,7 +71,7 @@ export function ResourceListItem({
   }, [expandAllLabels]);
 
   const showLabelsButton = labels.length > 0 && (hovered || showLabels);
-  const hasUnhealthyStatus = status && status !== 'healthy';
+  const hasUnhealthyStatus = isUnhealthy(status);
 
   // Determines which column the resource type text should end at.
   // We do this because if there is no address, or the labels button

web/packages/shared/components/UnifiedResources/shared/StatusInfo.tsx

@@ -39,7 +39,11 @@ import { useInfiniteScroll } from 'shared/hooks';
 import { Attempt } from 'shared/hooks/useAttemptNext';
 import { pluralize } from 'shared/utils/text';
 
-import { SharedResourceServer, UnifiedResourceDefinition } from '../types';
+import {
+  ResourceStatus,
+  SharedResourceServer,
+  UnifiedResourceDefinition,
+} from '../types';
 import { SingleLineBox } from './SingleLineBox';
 import { getDatabaseIconName } from './viewItemsFactory';
 
@@ -311,3 +315,7 @@ export function openStatusInfoPanel({
     });
   }
 }
+
+export function isUnhealthy(status: ResourceStatus): boolean {
+  return status && status === 'unhealthy';
+}