From d5ceb8602e4e48b0ad0bb286d145e98a006da86d Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Sat, 20 Jul 2024 14:38:56 -0400
Subject: [PATCH 1/3] refactor(refactor protocol card to  intoroduce chip):
 refactor protocol card to

intoroduce chip

close RSQ-130
---
 .../pages/ProtocolDashboard/ProtocolCard.tsx  | 37 ++++---------------
 app/src/pages/ProtocolDashboard/index.tsx     |  2 +-
 2 files changed, 9 insertions(+), 30 deletions(-)

diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
index 22156779c42..baa040516c2 100644
--- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
+++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
@@ -10,15 +10,16 @@ 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 +231,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/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'
 

From 1a227dbbb7efdbd20944929385aa704c1ae8c495 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Sat, 20 Jul 2024 14:48:07 -0400
Subject: [PATCH 2/3] fix linting error

---
 app/src/pages/ProtocolDashboard/ProtocolCard.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
index baa040516c2..a210a46139b 100644
--- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
+++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx
@@ -13,7 +13,6 @@ import {
   Chip,
   COLORS,
   DIRECTION_COLUMN,
-  DIRECTION_ROW,
   Flex,
   Icon,
   LegacyStyledText,

From 9d6f11817d3a1e8210adf0dd327dbdcaa1f1c6b6 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 22 Jul 2024 11:26:37 -0400
Subject: [PATCH 3/3] fix test errors

---
 .../__tests__/ProtocolCard.test.tsx            | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

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}`)
   })