refactor(app): replace Flex+icon+text with Chip (#15728)

* refactor(app): replace Flex+icon+text with Chip
Opentrons · Jul 22, 2024 · 3c74322 · 3c74322
1 parent 246efcb
commit 3c74322
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 38 deletions.
diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
@@ -10,15 +10,15 @@ import {
   ALIGN_CENTER,
   ALIGN_END,
   BORDERS,
+  Chip,
   COLORS,
   DIRECTION_COLUMN,
-  DIRECTION_ROW,
   Flex,
   Icon,
+  LegacyStyledText,
   OVERFLOW_WRAP_ANYWHERE,
   OVERFLOW_WRAP_BREAK_WORD,
   SPACING,
-  LegacyStyledText,
   TYPOGRAPHY,
   useLongPress,
 } from '@opentrons/components'
@@ -230,36 +230,14 @@ export function ProtocolCard(props: ProtocolCardProps): JSX.Element {
         gridGap={SPACING.spacing8}
       >
         {isFailedAnalysis ? (
-          <Flex
-            color={COLORS.red60}
-            flexDirection={DIRECTION_ROW}
-            gridGap={SPACING.spacing8}
-          >
-            <Icon
-              name="ot-alert"
-              size="1.5rem"
-              aria-label="failedAnalysis_icon"
-            />
-            <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-              {i18n.format(t('failed_analysis'), 'capitalize')}
-            </LegacyStyledText>
-          </Flex>
+          <Chip
+            type="error"
+            text={i18n.format(t('failed_analysis'), 'capitalize')}
+            background={false}
+          />
         ) : null}
         {isRequiredCSV ? (
-          <Flex
-            color={COLORS.yellow60}
-            flexDirection={DIRECTION_ROW}
-            gridGap={SPACING.spacing8}
-          >
-            <Icon
-              name="ot-alert"
-              size="1.5rem"
-              aria-label="requiresCsv_file_icon"
-            />
-            <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-              {t('requires_csv')}
-            </LegacyStyledText>
-          </Flex>
+          <Chip type="warning" text={t('requires_csv')} background={false} />
         ) : null}
         <LegacyStyledText
           as="p"

diff --git a/app/src/pages/ProtocolDashboard/__tests__/ProtocolCard.test.tsx b/app/src/pages/ProtocolDashboard/__tests__/ProtocolCard.test.tsx
@@ -20,6 +20,7 @@ import type {
   CompletedProtocolAnalysis,
   ProtocolResource,
 } from '@opentrons/shared-data'
+import type { Chip } from '@opentrons/components'
 
 const mockPush = vi.fn()
 
@@ -32,6 +33,13 @@ vi.mock('react-router-dom', async importOriginal => {
 })
 vi.mock('@opentrons/react-api-client')
 vi.mock('../../../redux/config')
+vi.mock('@opentrons/components', async importOriginal => {
+  const actual = await importOriginal<typeof Chip>()
+  return {
+    ...actual,
+    Chip: vi.fn(() => <div>mock Chip</div>),
+  }
+})
 
 const mockProtocol: ProtocolResource = {
   id: 'mockProtocol1',
@@ -119,10 +127,8 @@ describe('ProtocolCard', () => {
     } as UseQueryResult<CompletedProtocolAnalysis>)
     render(props)
 
-    screen.getByLabelText('failedAnalysis_icon')
-    screen.getByText('Failed analysis')
     fireEvent.click(screen.getByText('yay mock protocol'))
-    screen.getByText('Protocol analysis failed')
+    screen.getByText('mock Chip')
     screen.getByText(
       'Delete the protocol, make changes to address the error, and resend the protocol to this robot from the Opentrons App.'
     )
@@ -164,8 +170,7 @@ describe('ProtocolCard', () => {
       vi.advanceTimersByTime(1005)
     })
     expect(props.longPress).toHaveBeenCalled()
-    screen.getByLabelText('failedAnalysis_icon')
-    screen.getByText('Failed analysis')
+    screen.getByText('mock Chip')
     const card = screen.getByTestId('protocol_card')
     expect(card).toHaveStyle(`background-color: ${COLORS.red35}`)
     fireEvent.click(screen.getByText('yay mock protocol'))
@@ -204,8 +209,7 @@ describe('ProtocolCard', () => {
       data: { result: 'parameter-value-required' } as any,
     } as UseQueryResult<CompletedProtocolAnalysis>)
     render({ ...props, protocol: mockProtocolWithCSV })
-    screen.getByLabelText('requiresCsv_file_icon')
-    screen.getByText('Requires CSV')
+    screen.getByText('mock Chip')
     const card = screen.getByTestId('protocol_card')
     expect(card).toHaveStyle(`background-color: ${COLORS.yellow35}`)
   })

diff --git a/app/src/pages/ProtocolDashboard/index.tsx b/app/src/pages/ProtocolDashboard/index.tsx
@@ -9,10 +9,10 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   Flex,
+  LegacyStyledText,
   POSITION_STATIC,
   POSITION_STICKY,
   SPACING,
-  LegacyStyledText,
 } from '@opentrons/components'
 import { useAllProtocolsQuery } from '@opentrons/react-api-client'