refactor(app, components, shared-data, protocol-designer, react-api-c…

…lient): update to react 18

Update all react projects to react 18 and manage it's sub dependencies

app/src/atoms/buttons/SmallButton.tsx

@@ -107,30 +107,30 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
 
     &:focus {
       background-color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType]
-      .activeBackgroundColor};
+        .activeBackgroundColor};
       box-shadow: none;
     }
     &:hover {
       border: none;
       box-shadow: none;
       background-color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType]
-      .defaultBackgroundColor};
+        .defaultBackgroundColor};
       color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor};
     }
     &:focus-visible {
       box-shadow: ${ODD_FOCUS_VISIBLE};
       background-color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType]
-      .defaultBackgroundColor};
+        .defaultBackgroundColor};
     }
 
     &:active {
       background-color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType]
-      .activeBackgroundColor};
+        .activeBackgroundColor};
     }
 
     &:disabled {
       background-color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType]
-      .disabledBackgroundColor};
+        .disabledBackgroundColor};
       color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType].disabledColor};
     }
   `
@@ -152,7 +152,11 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
         alignItems={ALIGN_CENTER}
       >
         {iconPlacement === 'startIcon' && iconName != null ? (
-          <Flex aria-label={iconName === 'ot-spinner' ? "loading indicator" : iconName}>
+          <Flex
+            aria-label={
+              iconName === 'ot-spinner' ? 'loading indicator' : iconName
+            }
+          >
             <Icon
               size="1.75rem"
               marginRight={SPACING.spacing8}
@@ -170,7 +174,11 @@ export function SmallButton(props: SmallButtonProps): JSX.Element {
           {buttonText}
         </StyledText>
         {iconPlacement === 'endIcon' && iconName != null ? (
-          <Flex aria-label={iconName === 'ot-spinner' ? "loading indicator" : iconName}>
+          <Flex
+            aria-label={
+              iconName === 'ot-spinner' ? 'loading indicator' : iconName
+            }
+          >
             <Icon
               size="1.75rem"
               marginLeft={SPACING.spacing8}

app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx

@@ -25,7 +25,6 @@ import {
 } from '@opentrons/react-api-client'
 import {
   getPipetteModelSpecs,
-  HEATERSHAKER_MODULE_TYPE,
   FLEX_ROBOT_TYPE,
   OT2_ROBOT_TYPE,
 } from '@opentrons/shared-data'
@@ -355,9 +354,9 @@ export function ProtocolRunHeader({
         ) : null}
         {/* Note: This banner is for before running a protocol */}
         {isDoorOpen &&
-          runStatus !== RUN_STATUS_BLOCKED_BY_OPEN_DOOR &&
-          runStatus != null &&
-          CANCELLABLE_STATUSES.includes(runStatus) ? (
+        runStatus !== RUN_STATUS_BLOCKED_BY_OPEN_DOOR &&
+        runStatus != null &&
+        CANCELLABLE_STATUSES.includes(runStatus) ? (
           <Banner type="warning">{t('shared:close_robot_door')}</Banner>
         ) : null}
         {isRunCurrent ? (
@@ -448,8 +447,8 @@ export function ProtocolRunHeader({
           />
         ) : null}
         {showDropTipWizard &&
-          pipettesWithTip[0]?.specs != null &&
-          isRunCurrent ? (
+        pipettesWithTip[0]?.specs != null &&
+        isRunCurrent ? (
           <DropTipWizard
             robotType={isFlex ? FLEX_ROBOT_TYPE : OT2_ROBOT_TYPE}
             mount={pipettesWithTip[0].mount}
@@ -635,28 +634,18 @@ function ActionButton(props: ActionButtonProps): JSX.Element {
   const isHeaterShakerInProtocol = useIsHeaterShakerInProtocol()
   const activeHeaterShaker = attachedModules.find(
     (module): module is HeaterShakerModule =>
-      module.moduleType === HEATERSHAKER_MODULE_TYPE &&
+      module.moduleType === 'heaterShakerModuleType' &&
       module?.data != null &&
       module.data.speedStatus !== 'idle'
   )
   const isHeaterShakerShaking = attachedModules
-    .filter(
-      (module): module is HeaterShakerModule => {
-
-        console.log('atype,', module.moduleType, HEATERSHAKER_MODULE_TYPE, module.moduleType === HEATERSHAKER_MODULE_TYPE)
-        return module.moduleType === HEATERSHAKER_MODULE_TYPE
-      }
-    )
+    .filter((module): module is HeaterShakerModule => {
+      return module.moduleType === 'heaterShakerModuleType'
+    })
     .some(module => module?.data != null && module.data.speedStatus !== 'idle')
-  console.log(
-    '/n/n/n modules', attachedModules
-  )
-  console.log(
-    '/n/n/n is shaking', isHeaterShakerShaking
-  )
 
   let buttonText: string = ''
-  let handleButtonClick = (): void => { }
+  let handleButtonClick = (): void => {}
   let buttonIconName: IconName | null = null
   let disableReason = null
 
@@ -728,13 +717,6 @@ function ActionButton(props: ActionButtonProps): JSX.Element {
     }
   }
 
-  console.table({
-    showIsShakingModal,
-    activeHeaterShaker,
-    isHeaterShakerInProtocol,
-    runId
-  })
-
   return (
     <>
       <PrimaryButton

app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunHeader.test.tsx

@@ -864,7 +864,7 @@ describe('ProtocolRunHeader', () => {
     expect(mockCloseCurrentRun).toBeCalled()
   })
 
-  it.only('if a heater shaker is shaking, clicking on start run should render HeaterShakerIsRunningModal', async () => {
+  it('if a heater shaker is shaking, clicking on start run should render HeaterShakerIsRunningModal', async () => {
     when(mockUseRunStatus).calledWith(RUN_ID).mockReturnValue(RUN_STATUS_IDLE)
     mockUseIsHeaterShakerInProtocol.mockReturnValue(true)
     mockUseModulesQuery.mockReturnValue({
@@ -954,6 +954,7 @@ describe('ProtocolRunHeader', () => {
 
   it('renders the devices page when robot is not viewable but protocol is loaded', async () => {
     mockUseIsRobotViewable.mockReturnValue(false)
+    render()
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith('/devices')
     })

app/src/organisms/InstrumentInfo/__tests__/InstrumentInfo.test.tsx

@@ -86,13 +86,9 @@ describe('InstrumentInfo', () => {
     screen.getByText('12')
     screen.getByText('serial number')
     screen.getByText('123')
-    fireEvent.click(
-      screen.getByRole('button', { name: 'detach' })
-    )
+    fireEvent.click(screen.getByRole('button', { name: 'detach' }))
     screen.getByText('mock GripperWizardFlows')
-    fireEvent.click(
-      screen.getByRole('button', { name: 'recalibrate' })
-    )
+    fireEvent.click(screen.getByRole('button', { name: 'calibrate' }))
     screen.getByText('mock GripperWizardFlows')
   })
 
@@ -107,13 +103,9 @@ describe('InstrumentInfo', () => {
     screen.getByText('12')
     screen.getByText('serial number')
     screen.getByText('123')
-    fireEvent.click(
-      screen.getByRole('button', { name: 'detach' })
-    )
+    fireEvent.click(screen.getByRole('button', { name: 'detach' }))
     screen.getByText('mock GripperWizardFlows')
-    fireEvent.click(
-      screen.getByRole('button', { name: 'recalibrate' })
-    )
+    fireEvent.click(screen.getByRole('button', { name: 'recalibrate' }))
     screen.getByText('mock GripperWizardFlows')
   })
 
@@ -126,9 +118,7 @@ describe('InstrumentInfo', () => {
     screen.getByText('8/25/20 20:25 UTC')
     screen.getByText('serial number')
     screen.getByText('abc')
-    fireEvent.click(
-      screen.getByRole('button', { name: 'detach' })
-    )
+    fireEvent.click(screen.getByRole('button', { name: 'detach' }))
     screen.getByText('mock PipetteWizardFlows')
     expect(screen.queryByText('Calibrate')).not.toBeInTheDocument()
   })

app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx

@@ -101,7 +101,7 @@ describe('ChoosePipette', () => {
     fireEvent.click(singleMountPipettes)
     expect(props.setSelectedPipette).toHaveBeenCalled()
 
-    const proceedBtn = screen.getByRole('button', {name: 'Continue'})
+    const proceedBtn = screen.getByRole('button', { name: 'Continue' })
     fireEvent.click(proceedBtn)
     expect(props.proceed).toHaveBeenCalled()
   })

app/src/organisms/PipetteWizardFlows/__tests__/ExitModal.test.tsx

@@ -83,7 +83,7 @@ describe('ExitModal', () => {
     )
     fireEvent.click(screen.getByRole('button', { name: 'Go back' }))
     expect(props.goBack).toHaveBeenCalled()
-    fireEvent.click(screen.getByRole('button', { name: 'exit' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Exit' }))
     expect(props.proceed).toHaveBeenCalled()
   })
 })

app/src/organisms/PipetteWizardFlows/__tests__/Results.test.tsx

@@ -312,7 +312,7 @@ describe('Results', () => {
     expect(screen.getByLabelText('ot-alert')).toHaveStyle(
       `color: ${String(COLORS.errorEnabled)}`
     )
-    fireEvent.click(screen.getByRole('button', {name: 'Try again'}))
+    fireEvent.click(screen.getByRole('button', { name: 'Try again' }))
     await act(() => pipettePromise)
     expect(mockRefetchInstruments).toHaveBeenCalled()
   })

app/src/organisms/PipetteWizardFlows/__tests__/UnskippableModal.test.tsx

@@ -39,7 +39,7 @@ describe('UnskippableModal', () => {
     screen.getByText(
       'You must detach the mounting plate and reattach the z-axis carraige before using other pipettes. We do not recommend exiting this process before completion.'
     )
-    fireEvent.click(screen.getByRole('button', {name: 'exit'}))
+    fireEvent.click(screen.getByRole('button', { name: 'exit' }))
     expect(props.proceed).toHaveBeenCalled()
   })
 })

app/src/pages/OnDeviceDisplay/__tests__/NameRobot.test.tsx

@@ -90,7 +90,7 @@ describe('NameRobot', () => {
 
   it('should show an error message when tapping confirm without typing anything', async () => {
     render()
-    fireEvent.click(screen.getByRole('button', {name: 'Confirm'}))
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
     const error = await screen.findByText(
       'Oops! Robot name must follow the character count and limitations.'
     )
@@ -105,7 +105,7 @@ describe('NameRobot', () => {
     fireEvent.change(input, {
       target: { value: 'connectableOtie' },
     })
-    fireEvent.click(screen.getByRole('button', {name: 'Confirm'}))
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
     const error = await screen.findByText(
       'Oops! Name is already in use. Choose a different name.'
     )
@@ -120,7 +120,7 @@ describe('NameRobot', () => {
     fireEvent.change(input, {
       target: { value: 'reachableOtie' },
     })
-    fireEvent.click(screen.getByRole('button', {name: 'Confirm'}))
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
     const error = await screen.findByText(
       'Oops! Name is already in use. Choose a different name.'
     )
@@ -134,7 +134,7 @@ describe('NameRobot', () => {
     fireEvent.click(screen.getByRole('button', { name: 'a' }))
     fireEvent.click(screen.getByRole('button', { name: 'b' }))
     fireEvent.click(screen.getByRole('button', { name: 'c' }))
-    fireEvent.click(screen.getByRole('button', {name: 'Confirm'}))
+    fireEvent.click(screen.getByRole('button', { name: 'Confirm' }))
     expect(mockTrackEvent).toHaveBeenCalled()
   })
 

app/src/pages/OnDeviceDisplay/__tests__/Welcome.test.tsx

@@ -36,14 +36,14 @@ describe('Welcome', () => {
     screen.getByText(
       "Quickly run protocols and check on your robot's status right on your lab bench."
     )
-    screen.getByRole('button', {name: 'Get started'})
+    screen.getByRole('button', { name: 'Get started' })
     const image = screen.getByRole('img')
     expect(image.getAttribute('src')).toEqual(PNG_FILE_NAME)
   })
 
   it('should call mockPush when tapping Get started', () => {
     render()
-    fireEvent.click(screen.getByRole('button', {name: 'Get started'}))
+    fireEvent.click(screen.getByRole('button', { name: 'Get started' }))
     expect(mockPush).toHaveBeenCalledWith('/network-setup')
   })
 })