Merge branch 'protocol_designer-migrate-webpack-to-vite' of https://g…

…ithub.com/Opentrons/opentrons into protocol_designer-migrate-webpack-to-vite

app-shell/src/main.ts

@@ -134,7 +134,7 @@ function createRendererLogger(): Logger {
   return logger
 }
 
-function installDevtools(): Promise<void | Logger> {
+function installDevtools(): Promise<Logger> {
   const extensions = [
     electronDevtoolsInstaller.REACT_DEVELOPER_TOOLS,
     electronDevtoolsInstaller.REDUX_DEVTOOLS,
@@ -158,6 +158,8 @@ function installDevtools(): Promise<void | Logger> {
       })
   } else {
     log.warn('could not resolve electron dev tools installer')
-    return Promise.reject('could not resolve electron dev tools installer')
+    return Promise.reject(
+      new Error('could not resolve electron dev tools installer')
+    )
   }
 }

app/src/__testing-utils__/matchers.ts

@@ -1,4 +1,3 @@
-import { when } from 'vitest-when'
 import type { Matcher } from '@testing-library/react'
 
 // Match things like <p>Some <strong>nested</strong> text</p>

app/src/atoms/text/__tests__/StyledText.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
-import { fireEvent, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { TYPOGRAPHY } from '@opentrons/components'
 import { StyledText } from '../'
 import { renderWithProviders } from '../../../__testing-utils__'

app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { COLORS, SPACING } from '@opentrons/components'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { ModuleIcon } from '../'

app/src/molecules/PythonLabwareOffsetSnippet/__tests__/createSnippet.test.ts

@@ -1,7 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
-import { transfer_settings } from '@opentrons/shared-data'
-import { ModuleModel, CompletedProtocolAnalysis } from '@opentrons/shared-data'
+import {
+  transfer_settings,
+  ModuleModel,
+  CompletedProtocolAnalysis,
+} from '@opentrons/shared-data'
 import { createSnippet } from '../createSnippet'
 
 const protocolWithMagTempTC = ({

app/src/organisms/AdvancedSettings/ClearUnavailableRobots.tsx

@@ -24,7 +24,7 @@ import { TertiaryButton } from '../../atoms/buttons'
 import { ERROR_TOAST, SUCCESS_TOAST } from '../../atoms/Toast'
 import { useToaster } from '../../organisms/ToasterOven'
 import { LegacyModal } from '../../molecules/LegacyModal'
-import { Portal, getTopPortalEl } from '../../App/portal'
+import { getTopPortalEl } from '../../App/portal'
 import {
   clearDiscoveryCache,
   getReachableRobots,
@@ -63,41 +63,43 @@ export function ClearUnavailableRobots(): JSX.Element {
   } = useConditionalConfirm(handleDeleteUnavailRobots, true)
   return (
     <>
-      {showConfirmDeleteUnavailRobots ? createPortal(
-          <LegacyModal
-            type="warning"
-            title={t('clear_unavailable_robots')}
-            onClose={cancelExit}
-          >
-            <StyledText as="p">{t('clearing_cannot_be_undone')}</StyledText>
-            <Flex
-              flexDirection={DIRECTION_ROW}
-              paddingTop={SPACING.spacing32}
-              justifyContent={JUSTIFY_FLEX_END}
+      {showConfirmDeleteUnavailRobots
+        ? createPortal(
+            <LegacyModal
+              type="warning"
+              title={t('clear_unavailable_robots')}
+              onClose={cancelExit}
             >
+              <StyledText as="p">{t('clearing_cannot_be_undone')}</StyledText>
               <Flex
-                paddingRight={SPACING.spacing4}
-                data-testid="AdvancedSettings_ConfirmClear_Cancel"
+                flexDirection={DIRECTION_ROW}
+                paddingTop={SPACING.spacing32}
+                justifyContent={JUSTIFY_FLEX_END}
               >
-                <Btn
-                  onClick={cancelExit}
-                  textTransform={TYPOGRAPHY.textTransformCapitalize}
-                  color={COLORS.blue50}
-                  fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-                  marginRight={SPACING.spacing32}
+                <Flex
+                  paddingRight={SPACING.spacing4}
+                  data-testid="AdvancedSettings_ConfirmClear_Cancel"
                 >
-                  {t('shared:cancel')}
-                </Btn>
-              </Flex>
-              <Flex data-testid="AdvancedSettings_ConfirmClear_Proceed">
-                <AlertPrimaryButton onClick={confirmDeleteUnavailRobots}>
-                  {t('clear_confirm')}
-                </AlertPrimaryButton>
+                  <Btn
+                    onClick={cancelExit}
+                    textTransform={TYPOGRAPHY.textTransformCapitalize}
+                    color={COLORS.blue50}
+                    fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+                    marginRight={SPACING.spacing32}
+                  >
+                    {t('shared:cancel')}
+                  </Btn>
+                </Flex>
+                <Flex data-testid="AdvancedSettings_ConfirmClear_Proceed">
+                  <AlertPrimaryButton onClick={confirmDeleteUnavailRobots}>
+                    {t('clear_confirm')}
+                  </AlertPrimaryButton>
+                </Flex>
               </Flex>
-            </Flex>
-          </LegacyModal>,
-          getTopPortalEl()
-      ) : null}
+            </LegacyModal>,
+            getTopPortalEl()
+          )
+        : null}
       <Flex
         alignItems={ALIGN_CENTER}
         justifyContent={JUSTIFY_SPACE_BETWEEN}

app/src/organisms/AdvancedSettings/__tests__/ClearUnavailableRobots.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { screen, fireEvent, waitFor } from '@testing-library/react'
+import { screen, fireEvent } from '@testing-library/react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { useConditionalConfirm } from '@opentrons/components'
 import { i18n } from '../../../i18n'

app/src/organisms/ApplyHistoricOffsets/hooks/__tests__/getLabwareLocationCombos.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, beforeEach } from 'vitest'
+import { describe, it, expect } from 'vitest'
 import {
   getLabwareDefURI,
   opentrons96PcrAdapterV1,

app/src/organisms/CalibrationPanels/labwareImages.ts

@@ -2,41 +2,35 @@
 
 // TODO: BC 2020-04-01): this mapping should live in shared-data,
 // it is now following the existing pattern in labware-library
-import opentrons_96_tiprack_1000ul from '../../assets/images/labware/opentrons_96_tiprack_1000ul_side_view.jpg'
-import opentrons_96_filtertiprack_1000ul from '../../assets/images/labware/opentrons_96_tiprack_1000ul_side_view.jpg'
-import opentrons_96_tiprack_10ul from '../../assets/images/labware/opentrons_96_tiprack_10ul_side_view.jpg'
-import opentrons_96_filtertiprack_10ul from '../../assets/images/labware/opentrons_96_tiprack_10ul_side_view.jpg'
-import opentrons_96_tiprack_20ul from '../../assets/images/labware/opentrons_96_tiprack_10ul_side_view.jpg'
-import opentrons_96_filtertiprack_20ul from '../../assets/images/labware/opentrons_96_tiprack_10ul_side_view.jpg'
-import opentrons_96_tiprack_300ul from '../../assets/images/labware/opentrons_96_tiprack_300ul_side_view.jpg'
-import opentrons_96_filtertiprack_200ul from '../../assets/images/labware/opentrons_96_tiprack_300ul_side_view.jpg'
+import opentrons_96_tiprack_1000ul_side_view from '../../assets/images/labware/opentrons_96_tiprack_1000ul_side_view.jpg'
+import opentrons_96_tiprack_10ul_side_view from '../../assets/images/labware/opentrons_96_tiprack_10ul_side_view.jpg'
+import opentrons_96_tiprack_300ul_side_view from '../../assets/images/labware/opentrons_96_tiprack_300ul_side_view.jpg'
 import geb_96_tiprack_1000ul from '../../assets/images/labware/geb_96_tiprack_1000ul_side_view.jpg'
 import geb_96_tiprack_10ul from '../../assets/images/labware/geb_96_tiprack_10ul_side_view.jpg'
 import tipone_96_tiprack_200ul from '../../assets/images/labware/tipone_96_tiprack_200ul_side_view.jpg'
 import eppendorf_96_tiprack_1000ul_eptips from '../../assets/images/labware/eppendorf_1000ul_tip_eptips_side_view.jpg'
 import eppendorf_96_tiprack_10ul_eptips from '../../assets/images/labware/eppendorf_10ul_tips_eptips_side_view.jpg'
-import opentrons_calibrationblock_short_side_right from '../../assets/images/labware/opentrons_calibration_block.png'
-import opentrons_calibrationblock_short_side_left from '../../assets/images/labware/opentrons_calibration_block.png'
+import opentrons_calibrationblock from '../../assets/images/labware/opentrons_calibration_block.png'
 import generic_custom_tiprack from '../../assets/images/labware/generic_tiprack_side_view.png'
 import removable_black_plastic_trash_bin from '../../assets/images/labware/removable_black_plastic_trash_bin.png'
 
 
 export const labwareImages = {
-  opentrons_96_tiprack_1000ul,
-  opentrons_96_filtertiprack_1000ul,
-  opentrons_96_tiprack_10ul,
-  opentrons_96_filtertiprack_10ul,
-  opentrons_96_tiprack_20ul,
-  opentrons_96_filtertiprack_20ul,
-  opentrons_96_tiprack_300ul,
-  opentrons_96_filtertiprack_200ul,
+  opentrons_96_tiprack_1000ul: opentrons_96_tiprack_1000ul_side_view ,
+  opentrons_96_filtertiprack_1000ul: opentrons_96_tiprack_1000ul_side_view ,
+  opentrons_96_tiprack_10ul: opentrons_96_tiprack_10ul_side_view,
+  opentrons_96_filtertiprack_10ul: opentrons_96_tiprack_10ul_side_view,
+  opentrons_96_tiprack_20ul: opentrons_96_tiprack_10ul_side_view,
+  opentrons_96_filtertiprack_20ul: opentrons_96_tiprack_10ul_side_view,
+  opentrons_96_tiprack_300ul: opentrons_96_tiprack_300ul_side_view,
+  opentrons_96_filtertiprack_200ul: opentrons_96_tiprack_300ul_side_view,
   geb_96_tiprack_1000ul,
   geb_96_tiprack_10ul,
   tipone_96_tiprack_200ul,
   eppendorf_96_tiprack_1000ul_eptips,
   eppendorf_96_tiprack_10ul_eptips,
-  opentrons_calibrationblock_short_side_right,
-  opentrons_calibrationblock_short_side_left,
+  opentrons_calibrationblock_short_side_right: opentrons_calibrationblock,
+  opentrons_calibrationblock_short_side_left: opentrons_calibrationblock,
   generic_custom_tiprack,
   removable_black_plastic_trash_bin,
 }

app/src/organisms/CommandText/LoadCommandText.tsx

@@ -4,8 +4,8 @@ import {
   getModuleType,
   getOccludedSlotCountForModule,
   LoadLabwareRunTimeCommand,
+  getPipetteNameSpecs,
 } from '@opentrons/shared-data'
-import { getPipetteNameSpecs } from '@opentrons/shared-data'
 
 import type {
   RunTimeCommand,

app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.tsx

@@ -23,10 +23,10 @@ export function DeckConfigurationDiscardChangesModal({
   setShowConfirmationModal,
 }: DeckConfigurationDiscardChangesModalProps): JSX.Element {
   const { t } = useTranslation('device_details')
+  const history = useHistory()
   const modalHeader: ModalHeaderBaseProps = {
     title: t('changes_will_be_lost'),
   }
-  const history = useHistory()
 
   const handleDiscard = (): void => {
     setShowConfirmationModal(false)

app/src/organisms/DeviceDetailsDeckConfiguration/__tests__/DeckConfigurationDiscardChangesModal.test.tsx

@@ -1,22 +1,20 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
 import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { useHistory } from 'react-router-dom'
 
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { DeckConfigurationDiscardChangesModal } from '../DeckConfigurationDiscardChangesModal'
 
-import type * as ReactRouterDom from 'react-router-dom'
-
 const mockFunc = vi.fn()
 const mockGoBack = vi.fn()
-const mockPush = vi.fn()
 
 vi.mock('react-router-dom', async importOriginal => {
-  const reactRouterDom = await importOriginal<typeof ReactRouterDom>()
+  const actual = await importOriginal<typeof useHistory>()
   return {
-    ...reactRouterDom,
-    useHistory: () => ({ push: mockPush } as any),
+    ...actual,
+    useHistory: () => ({ goBack: mockGoBack }),
   }
 })
 

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

@@ -9,10 +9,7 @@ import {
   useUpdateDeckConfigurationMutation,
 } from '@opentrons/react-api-client'
 
-import {
-  partialComponentPropsMatcher,
-  renderWithProviders,
-} from '../../../__testing-utils__'
+import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../i18n'
 import { useIsRobotViewable, useRunStatuses } from '../../Devices/hooks'
 import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructionsModal'
@@ -21,8 +18,15 @@ import { DeviceDetailsDeckConfiguration } from '../'
 import { useNotifyCurrentMaintenanceRun } from '../../../resources/maintenance_runs/useNotifyCurrentMaintenanceRun'
 
 import type { MaintenanceRun } from '@opentrons/api-client'
-
-vi.mock('@opentrons/components/src/hardware-sim/DeckConfigurator/index')
+import type * as OpentronsComponents from '@opentrons/components'
+
+vi.mock('@opentrons/components', async importOriginal => {
+  const actual = await importOriginal<typeof OpentronsComponents>()
+  return {
+    ...actual,
+    DeckConfigurator: vi.fn(),
+  }
+})
 vi.mock('@opentrons/react-api-client')
 vi.mock('../DeckFixtureSetupInstructionsModal')
 vi.mock('../../Devices/hooks')
@@ -63,7 +67,7 @@ describe('DeviceDetailsDeckConfiguration', () => {
     vi.mocked(DeckFixtureSetupInstructionsModal).mockReturnValue(
       <div>mock DeckFixtureSetupInstructionsModal</div>
     )
-    when(vi.mocked(DeckConfigurator)).thenReturn(
+    vi.mocked(DeckConfigurator).mockReturnValue(
       <div>mock DeckConfigurator</div>
     )
     vi.mocked(useRunStatuses).mockReturnValue(RUN_STATUSES)
@@ -98,9 +102,9 @@ describe('DeviceDetailsDeckConfiguration', () => {
   it('should render banner and make deck configurator disabled when running', () => {
     RUN_STATUSES.isRunRunning = true
     vi.mocked(useRunStatuses).mockReturnValue(RUN_STATUSES)
-    when(vi.mocked(DeckConfigurator))
-      .calledWith(partialComponentPropsMatcher({ readOnly: true }))
-      .thenReturn(<div>disabled mock DeckConfigurator</div>)
+    vi.mocked(DeckConfigurator).mockReturnValue(
+      <div>disabled mock DeckConfigurator</div>
+    )
     render(props)
     screen.getByText(
       'Deck configuration is not available when run is in progress'
@@ -112,9 +116,9 @@ describe('DeviceDetailsDeckConfiguration', () => {
     vi.mocked(useNotifyCurrentMaintenanceRun).mockReturnValue({
       data: mockCurrnetMaintenanceRun,
     } as any)
-    when(vi.mocked(DeckConfigurator))
-      .calledWith(partialComponentPropsMatcher({ readOnly: true }))
-      .thenReturn(<div>disabled mock DeckConfigurator</div>)
+    vi.mocked(DeckConfigurator).mockReturnValue(
+      <div>disabled mock DeckConfigurator</div>
+    )
     render(props)
     screen.getByText(
       'Deck configuration is not available when the robot is busy'
@@ -123,9 +127,8 @@ describe('DeviceDetailsDeckConfiguration', () => {
   })
 
   it('should render no deck fixtures, if deck configs are not set', () => {
-    when(vi.mocked(useDeckConfigurationQuery))
-      .calledWith()
-      .thenReturn([] as any)
+    vi.mocked(useDeckConfigurationQuery)
+    .mockReturnValue([] as any)
     render(props)
     screen.getByText('No deck fixtures')
   })
@@ -134,9 +137,9 @@ describe('DeviceDetailsDeckConfiguration', () => {
     when(vi.mocked(useIsEstopNotDisengaged))
       .calledWith(ROBOT_NAME)
       .thenReturn(true)
-    when(vi.mocked(DeckConfigurator))
-      .calledWith(partialComponentPropsMatcher({ readOnly: true }))
-      .thenReturn(<div>disabled mock DeckConfigurator</div>)
+    vi.mocked(DeckConfigurator).mockReturnValue(
+      <div>disabled mock DeckConfigurator</div>
+    )
     render(props)
     screen.getByText('disabled mock DeckConfigurator')
   })

app/src/organisms/Devices/ProtocolRun/SetupLabware/__tests__/OffDeckLabwareList.test.tsx

@@ -29,12 +29,12 @@ describe('OffDeckLabwareList', () => {
     )
   })
   it('renders null if labware items is null', () => {
-    const { container } = render({
+    render({
       labwareItems: [],
       isFlex: false,
       commands: [],
     })
-    expect(container.firstChild).toBeNull()
+    expect(screen.queryAllByText('Additional Off-Deck Labware')).toHaveLength(0)
   })
   it('renders additional offdeck labware info if there is an offdeck labware', () => {
     render({

app/src/organisms/Devices/ProtocolRun/SetupLiquids/__tests__/LiquidDetailCard.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { fireEvent, screen } from '@testing-library/react'
-import { describe, it, beforeEach, vi, expect } from 'vitest'
+import { describe, it, beforeEach, vi, expect, Mock } from 'vitest'
 
 import { SPACING, COLORS } from '@opentrons/components'
 
@@ -16,8 +16,6 @@ import {
 import { getIsOnDevice } from '../../../../../redux/config'
 import { LiquidDetailCard } from '../LiquidDetailCard'
 
-import { Mock } from 'vitest'
-
 vi.mock('../../../../../redux/analytics')
 vi.mock('../../../../../redux/config')