From 3c74322332669c53ec11ca744cde122968193df8 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Mon, 22 Jul 2024 13:18:00 -0400
Subject: [PATCH] refactor(app): replace Flex+icon+text with Chip (#15728)

* refactor(app): replace Flex+icon+text with Chip
---
 .../pages/ProtocolDashboard/ProtocolCard.tsx  | 38 ++++---------------
 .../__tests__/ProtocolCard.test.tsx           | 18 +++++----
 app/src/pages/ProtocolDashboard/index.tsx     |  2 +-
 3 files changed, 20 insertions(+), 38 deletions(-)

diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
index 22156779c42..a210a46139b 100644
--- 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
index 304087cf5bb..6ad885d780e 100644
--- 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
index 455980f1eeb..79118a42860 100644
--- 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'