Format status indicators according to guidelines (#167)

* Remove unused children from stack events statuses

* Add formatStatus function

* Use formatStatus in every status component

* Add status indicator to custom images

* Align clusters test

Author: Mattia Franchetto

frontend/src/components/Status.tsx

@@ -16,8 +16,10 @@ import {
   ComputeFleetStatus,
 } from '../types/clusters'
 import {InstanceState, Instance, EC2Instance} from '../types/instances'
+import {ImageBuildStatus} from '../types/images'
 import {StackEvent} from '../types/stackevents'
 import {JobStateCode} from '../types/jobs'
+import capitalize from 'lodash/capitalize'
 import React from 'react'
 import {
   StatusIndicator,
@@ -26,6 +28,10 @@ import {
 
 export type StatusMap = Record<string, StatusIndicatorProps.Type>
 
+export function formatStatus(status?: string): string {
+  return capitalize(status?.replaceAll(/[_-]/g, ' '))
+}
+
 function ClusterStatusIndicator({
   cluster,
 }: {
@@ -47,7 +53,7 @@ function ClusterStatusIndicator({
 
   return (
     <StatusIndicator type={statusMap[clusterStatus]}>
-      {clusterStatus.replaceAll('_', ' ')}
+      {formatStatus(clusterStatus)}
     </StatusIndicator>
   )
 }
@@ -82,7 +88,7 @@ function JobStatusIndicator({status}: {status: JobStateCode}) {
 
   return (
     <StatusIndicator type={statusMap[status]}>
-      {status.replaceAll('_', ' ')}
+      {formatStatus(status)}
     </StatusIndicator>
   )
 }
@@ -103,7 +109,7 @@ function ComputeFleetStatusIndicator({status}: {status: ComputeFleetStatus}) {
 
   return (
     <StatusIndicator type={statusMap[status]}>
-      {status.replaceAll('_', ' ')}
+      {formatStatus(status)}
     </StatusIndicator>
   )
 }
@@ -124,18 +130,12 @@ function InstanceStatusIndicator({
 
   return (
     <StatusIndicator type={statusMap[instance.state]}>
-      {instance.state.replaceAll('-', ' ').toUpperCase()}
+      {formatStatus(instance.state)}
     </StatusIndicator>
   )
 }
 
-function StackEventStatusIndicator({
-  stackEvent,
-  children,
-}: {
-  stackEvent: StackEvent
-  children?: React.ReactNode
-}) {
+function StackEventStatusIndicator({stackEvent}: {stackEvent: StackEvent}) {
   const statusMap: Record<
     CloudFormationResourceStatus,
     StatusIndicatorProps.Type
@@ -159,8 +159,28 @@ function StackEventStatusIndicator({
   }
   return (
     <StatusIndicator type={statusMap[stackEvent.resourceStatus]}>
-      {stackEvent.resourceStatus.replaceAll('_', ' ')}
-      {children}
+      {formatStatus(stackEvent.resourceStatus)}
+    </StatusIndicator>
+  )
+}
+
+function CustomImageStatusIndicator({
+  buildStatus,
+}: {
+  buildStatus: ImageBuildStatus
+}) {
+  const statusMap: Record<ImageBuildStatus, StatusIndicatorProps.Type> = {
+    BUILD_COMPLETE: 'success',
+    BUILD_FAILED: 'error',
+    BUILD_IN_PROGRESS: 'in-progress',
+    DELETE_COMPLETE: 'success',
+    DELETE_IN_PROGRESS: 'in-progress',
+    DELETE_FAILED: 'error',
+  }
+
+  return (
+    <StatusIndicator type={statusMap[buildStatus]}>
+      {formatStatus(buildStatus)}
     </StatusIndicator>
   )
 }
@@ -171,4 +191,5 @@ export {
   InstanceStatusIndicator,
   JobStatusIndicator,
   StackEventStatusIndicator,
+  CustomImageStatusIndicator,
 }

frontend/src/components/__tests__/Status.test.tsx

@@ -0,0 +1,33 @@
+import {formatStatus} from '../Status'
+
+describe('Given a resource status', () => {
+  describe('when the status has a dash', () => {
+    it('should be removed', () => {
+      expect(formatStatus('shutting-down')).toBe('Shutting down')
+    })
+  })
+
+  describe('when the status has an underscore', () => {
+    it('should be removed', () => {
+      expect(formatStatus('shutting_down')).toBe('Shutting down')
+    })
+  })
+
+  describe('when the status is lowercase', () => {
+    it('should be capitalized', () => {
+      expect(formatStatus('created')).toBe('Created')
+    })
+  })
+
+  describe('when the status is uppercase', () => {
+    it('should be capitalized', () => {
+      expect(formatStatus('CREATE_COMPLETE')).toBe('Create complete')
+    })
+  })
+
+  describe('when given an undefined string', () => {
+    it('should return an empty string', () => {
+      expect(formatStatus()).toBe('')
+    })
+  })
+})

frontend/src/old-pages/Clusters/__tests__/Clusters.test.tsx

@@ -68,7 +68,7 @@ describe('given a component to show the clusters list', () => {
       )
 
       expect(getByText('test-cluster')).toBeTruthy()
-      expect(getByText('CREATE COMPLETE')).toBeTruthy()
+      expect(getByText('Create complete')).toBeTruthy()
       expect(getByText('3.1.4')).toBeTruthy()
     })
 

frontend/src/old-pages/Images/CustomImages/CustomImageDetails.tsx

@@ -39,6 +39,7 @@ import EmptyState from '../../../components/EmptyState'
 import {truncate} from 'lodash'
 import {ReadonlyConfigView} from '../../../components/ConfigView'
 import {extendCollectionsOptions} from '../../../shared/extendCollectionsOptions'
+import {CustomImageStatusIndicator} from '../../../components/Status'
 
 const customImagesPath = ['app', 'customImages']
 
@@ -135,7 +136,7 @@ function CustomImageProperties() {
           <ValueWithLabel
             label={t('customImages.imageDetails.properties.buildStatus')}
           >
-            {image.imageBuildStatus}
+            <CustomImageStatusIndicator buildStatus={image.imageBuildStatus} />
           </ValueWithLabel>
           <ValueWithLabel
             label={t('customImages.imageDetails.properties.amiId.label')}

frontend/src/old-pages/Images/CustomImages/CustomImages.tsx

@@ -38,6 +38,7 @@ import {TFunction, Trans, useTranslation} from 'react-i18next'
 import InfoLink from '../../../components/InfoLink'
 import TitleDescriptionHelpPanel from '../../../components/help-panel/TitleDescriptionHelpPanel'
 import {extendCollectionsOptions} from '../../../shared/extendCollectionsOptions'
+import {CustomImageStatusIndicator} from '../../../components/Status'
 
 const imageBuildPath = ['app', 'customImages', 'imageBuild']
 
@@ -167,7 +168,9 @@ function CustomImagesList() {
         {
           id: 'status',
           header: t('customImages.list.columns.status'),
-          cell: image => image.imageBuildStatus || '-',
+          cell: image => (
+            <CustomImageStatusIndicator buildStatus={image.imageBuildStatus} />
+          ),
           sortingField: 'imageBuildStatus',
         },
         {