refactor(app): allow "absolute" imports in app js (#16288)

This PR adds configuration to tsc for typechecking and lint, vite for
bundling, and vitest for testing to allow code in `app/` to import
things via paths that look absolute from the root of the repo (but are
really just a specific binding). Any path in an import or mock statement
that starts with `/app` will get rewritten to (the appropriate resolved
absolute path for) `app/src/`.

In addition, rewrite any import that was a relative path that used a
string of `../` to get all the way to the top of the repo before going
down to another top-level directory as such an absolute-path import.
There are a lot of these, which is kind of gross. Each commit after the
first handles this rewriting for another kind of import target.

## Note on merging and reviewing

This PR will conflict with basically any change to the app code, so I'm
not going to make it always up to date. Rather, please review this as
is, including checking it out and building/bundling the app if you want,
and when it's approved I'll do all the merge conflicts then.

## review requests
- Is this what we want to do?

.eslintrc.js

@@ -116,6 +116,12 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['./app/src/**/*.@(ts|tsx)'],
+      rules: {
+        'import/no-absolute-path': 'off',
+      },
+    },
     {
       files: [
         '**/test/**.js',

app-shell-odd/tsconfig.json

@@ -11,7 +11,10 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
+    "paths": {
+      "/app/*": ["../app/src/*"]
+    }
   },
   "include": ["typings", "src"]
 }

app-shell/tsconfig.json

@@ -17,7 +17,10 @@
     "rootDir": "src",
     "outDir": "lib",
     "target": "esnext",
-    "module": "ESNext"
+    "module": "ESNext",
+    "paths": {
+      "/app/*": ["../app/src/*"]
+    }
   },
   "include": ["typings", "src"]
 }

app/src/App/DesktopApp.tsx

@@ -12,27 +12,30 @@ import {
 import { ApiHostProvider } from '@opentrons/react-api-client'
 import NiceModal from '@ebay/nice-modal-react'
 
-import { i18n } from '../i18n'
-import { Alerts } from '../organisms/Alerts'
-import { Breadcrumbs } from '../organisms/Breadcrumbs'
-import { ToasterOven } from '../organisms/ToasterOven'
-import { CalibrationDashboard } from '../pages/Desktop/Devices/CalibrationDashboard'
-import { DeviceDetails } from '../pages/Desktop/Devices/DeviceDetails'
-import { DevicesLanding } from '../pages/Desktop/Devices/DevicesLanding'
-import { ProtocolRunDetails } from '../pages/Desktop/Devices/ProtocolRunDetails'
-import { RobotSettings } from '../pages/Desktop/Devices/RobotSettings'
-import { ProtocolsLanding } from '../pages/Desktop/Protocols/ProtocolsLanding'
-import { ProtocolDetails } from '../pages/Desktop/Protocols/ProtocolDetails'
-import { AppSettings } from '../pages/Desktop/AppSettings'
-import { Labware } from '../pages/Desktop/Labware'
+import { i18n } from '/app/i18n'
+import { Alerts } from '/app/organisms/Alerts'
+import { Breadcrumbs } from '/app/organisms/Breadcrumbs'
+import { ToasterOven } from '/app/organisms/ToasterOven'
+import { CalibrationDashboard } from '/app/pages/Desktop/Devices/CalibrationDashboard'
+import { DeviceDetails } from '/app/pages/Desktop/Devices/DeviceDetails'
+import { DevicesLanding } from '/app/pages/Desktop/Devices/DevicesLanding'
+import { ProtocolRunDetails } from '/app/pages/Desktop/Devices/ProtocolRunDetails'
+import { RobotSettings } from '/app/pages/Desktop/Devices/RobotSettings'
+import { ProtocolsLanding } from '/app/pages/Desktop/Protocols/ProtocolsLanding'
+import { ProtocolDetails } from '/app/pages/Desktop/Protocols/ProtocolDetails'
+import { AppSettings } from '/app/pages/Desktop/AppSettings'
+import { Labware } from '/app/pages/Desktop/Labware'
 import { useSoftwareUpdatePoll } from './hooks'
 import { Navbar } from './Navbar'
-import { EstopTakeover, EmergencyStopContext } from '../organisms/EmergencyStop'
-import { IncompatibleModuleTakeover } from '../organisms/IncompatibleModule'
-import { OPENTRONS_USB } from '../redux/discovery'
-import { appShellRequestor } from '../redux/shell/remote'
-import { useRobot, useIsFlex } from '../organisms/Devices/hooks'
-import { ProtocolTimeline } from '../pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline'
+import {
+  EstopTakeover,
+  EmergencyStopContext,
+} from '/app/organisms/EmergencyStop'
+import { IncompatibleModuleTakeover } from '/app/organisms/IncompatibleModule'
+import { OPENTRONS_USB } from '/app/redux/discovery'
+import { appShellRequestor } from '/app/redux/shell/remote'
+import { useRobot, useIsFlex } from '/app/organisms/Devices/hooks'
+import { ProtocolTimeline } from '/app/pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline'
 import { PortalRoot as ModalPortalRoot } from './portal'
 import { DesktopAppFallback } from './DesktopAppFallback'
 

app/src/App/DesktopAppFallback.tsx

@@ -3,7 +3,10 @@ import { useDispatch } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import { useTrackEvent, ANALYTICS_DESKTOP_APP_ERROR } from '../redux/analytics'
+import {
+  useTrackEvent,
+  ANALYTICS_DESKTOP_APP_ERROR,
+} from '/app/redux/analytics'
 
 import type { FallbackProps } from 'react-error-boundary'
 
@@ -18,9 +21,9 @@ import {
   Modal,
 } from '@opentrons/components'
 
-import { reloadUi } from '../redux/shell'
+import { reloadUi } from '/app/redux/shell'
 
-import type { Dispatch } from '../redux/types'
+import type { Dispatch } from '/app/redux/types'
 
 export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
   const { t } = useTranslation('app_settings')

app/src/App/Navbar.tsx

@@ -20,8 +20,8 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import logoSvg from '../assets/images/logo_nav.svg'
-import logoSvgThree from '../assets/images/logo_nav_three.svg'
+import logoSvg from '/app/assets/images/logo_nav.svg'
+import logoSvgThree from '/app/assets/images/logo_nav_three.svg'
 
 import { NAV_BAR_WIDTH } from './constants'
 

app/src/App/ODDTopLevelRedirects/hooks/__tests__/useCurrentRunRoute.test.ts

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react'
 import { describe, it, expect, vi } from 'vitest'
 import { useCurrentRunRoute } from '../useCurrentRunRoute'
-import { useNotifyRunQuery } from '../../../../resources/runs'
+import { useNotifyRunQuery } from '/app/resources/runs'
 import {
   RUN_STATUS_BLOCKED_BY_OPEN_DOOR,
   RUN_STATUS_FAILED,
@@ -10,7 +10,7 @@ import {
   RUN_STATUS_SUCCEEDED,
 } from '@opentrons/api-client'
 
-vi.mock('../../../../resources/runs')
+vi.mock('/app/resources/runs')
 
 const MOCK_RUN_ID = 'MOCK_RUN_ID'
 

app/src/App/ODDTopLevelRedirects/hooks/useCurrentRunRoute.ts

@@ -6,7 +6,7 @@ import {
   RUN_STATUS_SUCCEEDED,
 } from '@opentrons/api-client'
 
-import { useNotifyRunQuery } from '../../../resources/runs'
+import { useNotifyRunQuery } from '/app/resources/runs'
 import { CURRENT_RUN_POLL } from '../constants'
 
 // Returns the route to which React Router should navigate, if any.

app/src/App/ODDTopLevelRedirects/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Navigate, Route, Routes } from 'react-router-dom'
 
-import { useCurrentRunId } from '../../resources/runs'
+import { useCurrentRunId } from '/app/resources/runs'
 import { CURRENT_RUN_POLL } from './constants'
 import { useCurrentRunRoute } from './hooks'
 

app/src/App/OnDeviceDisplayApp.tsx

@@ -15,39 +15,42 @@ import {
 import { ApiHostProvider } from '@opentrons/react-api-client'
 import NiceModal from '@ebay/nice-modal-react'
 
-import { SleepScreen } from '../atoms/SleepScreen'
+import { SleepScreen } from '/app/atoms/SleepScreen'
 import { OnDeviceLocalizationProvider } from '../LocalizationProvider'
-import { ToasterOven } from '../organisms/ToasterOven'
-import { MaintenanceRunTakeover } from '../organisms/TakeoverModal'
-import { FirmwareUpdateTakeover } from '../organisms/FirmwareUpdateModal/FirmwareUpdateTakeover'
-import { IncompatibleModuleTakeover } from '../organisms/IncompatibleModule'
-import { EstopTakeover } from '../organisms/EmergencyStop'
-import { ConnectViaEthernet } from '../pages/ODD/ConnectViaEthernet'
-import { ConnectViaUSB } from '../pages/ODD/ConnectViaUSB'
-import { ConnectViaWifi } from '../pages/ODD/ConnectViaWifi'
-import { EmergencyStop } from '../pages/ODD/EmergencyStop'
-import { NameRobot } from '../pages/ODD/NameRobot'
-import { NetworkSetupMenu } from '../pages/ODD/NetworkSetupMenu'
-import { ProtocolSetup } from '../pages/ODD/ProtocolSetup'
-import { RobotDashboard } from '../pages/ODD/RobotDashboard'
-import { RobotSettingsDashboard } from '../pages/ODD/RobotSettingsDashboard'
-import { ProtocolDashboard } from '../pages/ODD/ProtocolDashboard'
-import { ProtocolDetails } from '../pages/ODD/ProtocolDetails'
-import { QuickTransferFlow } from '../organisms/QuickTransferFlow'
-import { QuickTransferDashboard } from '../pages/ODD/QuickTransferDashboard'
-import { QuickTransferDetails } from '../pages/ODD/QuickTransferDetails'
-import { RunningProtocol } from '../pages/ODD/RunningProtocol'
-import { RunSummary } from '../pages/ODD/RunSummary'
-import { UpdateRobot } from '../pages/ODD/UpdateRobot/UpdateRobot'
-import { UpdateRobotDuringOnboarding } from '../pages/ODD/UpdateRobot/UpdateRobotDuringOnboarding'
-import { InstrumentsDashboard } from '../pages/ODD/InstrumentsDashboard'
-import { InstrumentDetail } from '../pages/ODD/InstrumentDetail'
-import { Welcome } from '../pages/ODD/Welcome'
-import { InitialLoadingScreen } from '../pages/ODD/InitialLoadingScreen'
-import { DeckConfigurationEditor } from '../pages/ODD/DeckConfiguration'
+import { ToasterOven } from '/app/organisms/ToasterOven'
+import { MaintenanceRunTakeover } from '/app/organisms/TakeoverModal'
+import { FirmwareUpdateTakeover } from '/app/organisms/FirmwareUpdateModal/FirmwareUpdateTakeover'
+import { IncompatibleModuleTakeover } from '/app/organisms/IncompatibleModule'
+import { EstopTakeover } from '/app/organisms/EmergencyStop'
+import { ConnectViaEthernet } from '/app/pages/ODD/ConnectViaEthernet'
+import { ConnectViaUSB } from '/app/pages/ODD/ConnectViaUSB'
+import { ConnectViaWifi } from '/app/pages/ODD/ConnectViaWifi'
+import { EmergencyStop } from '/app/pages/ODD/EmergencyStop'
+import { NameRobot } from '/app/pages/ODD/NameRobot'
+import { NetworkSetupMenu } from '/app/pages/ODD/NetworkSetupMenu'
+import { ProtocolSetup } from '/app/pages/ODD/ProtocolSetup'
+import { RobotDashboard } from '/app/pages/ODD/RobotDashboard'
+import { RobotSettingsDashboard } from '/app/pages/ODD/RobotSettingsDashboard'
+import { ProtocolDashboard } from '/app/pages/ODD/ProtocolDashboard'
+import { ProtocolDetails } from '/app/pages/ODD/ProtocolDetails'
+import { QuickTransferFlow } from '/app/organisms/QuickTransferFlow'
+import { QuickTransferDashboard } from '/app/pages/ODD/QuickTransferDashboard'
+import { QuickTransferDetails } from '/app/pages/ODD/QuickTransferDetails'
+import { RunningProtocol } from '/app/pages/ODD/RunningProtocol'
+import { RunSummary } from '/app/pages/ODD/RunSummary'
+import { UpdateRobot } from '/app/pages/ODD/UpdateRobot/UpdateRobot'
+import { UpdateRobotDuringOnboarding } from '/app/pages/ODD/UpdateRobot/UpdateRobotDuringOnboarding'
+import { InstrumentsDashboard } from '/app/pages/ODD/InstrumentsDashboard'
+import { InstrumentDetail } from '/app/pages/ODD/InstrumentDetail'
+import { Welcome } from '/app/pages/ODD/Welcome'
+import { InitialLoadingScreen } from '/app/pages/ODD/InitialLoadingScreen'
+import { DeckConfigurationEditor } from '/app/pages/ODD/DeckConfiguration'
 import { PortalRoot as ModalPortalRoot } from './portal'
-import { getOnDeviceDisplaySettings, updateConfigValue } from '../redux/config'
-import { updateBrightness } from '../redux/shell'
+import {
+  getOnDeviceDisplaySettings,
+  updateConfigValue,
+} from '/app/redux/config'
+import { updateBrightness } from '/app/redux/shell'
 import { SLEEP_NEVER_MS } from './constants'
 import { useProtocolReceiptToast, useSoftwareUpdatePoll } from './hooks'
 import { ODDTopLevelRedirects } from './ODDTopLevelRedirects'
@@ -56,7 +59,7 @@ import { OnDeviceDisplayAppFallback } from './OnDeviceDisplayAppFallback'
 
 import { hackWindowNavigatorOnLine } from './hacks'
 
-import type { Dispatch } from '../redux/types'
+import type { Dispatch } from '/app/redux/types'
 
 // forces electron to think we're online which means axios won't elide
 // network calls to localhost. see ./hacks.ts for more.

app/src/App/OnDeviceDisplayAppFallback.tsx

@@ -2,8 +2,8 @@ import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
-import { useTrackEvent, ANALYTICS_ODD_APP_ERROR } from '../redux/analytics'
-import { getLocalRobot, getRobotSerialNumber } from '../redux/discovery'
+import { useTrackEvent, ANALYTICS_ODD_APP_ERROR } from '/app/redux/analytics'
+import { getLocalRobot, getRobotSerialNumber } from '/app/redux/discovery'
 
 import type { FallbackProps } from 'react-error-boundary'
 
@@ -17,12 +17,12 @@ import {
   LegacyStyledText,
 } from '@opentrons/components'
 
-import { MediumButton } from '../atoms/buttons'
-import { OddModal } from '../molecules/OddModal'
-import { appRestart, sendLog } from '../redux/shell'
+import { MediumButton } from '/app/atoms/buttons'
+import { OddModal } from '/app/molecules/OddModal'
+import { appRestart, sendLog } from '/app/redux/shell'
 
-import type { Dispatch } from '../redux/types'
-import type { OddModalHeaderBaseProps } from '../molecules/OddModal/types'
+import type { Dispatch } from '/app/redux/types'
+import type { OddModalHeaderBaseProps } from '/app/molecules/OddModal/types'
 
 export function OnDeviceDisplayAppFallback({
   error,

app/src/App/__tests__/App.test.tsx

@@ -3,17 +3,17 @@ import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { when } from 'vitest-when'
 import { screen } from '@testing-library/react'
 
-import { i18n } from '../../i18n'
-import { getIsOnDevice, getConfig } from '../../redux/config'
+import { i18n } from '/app/i18n'
+import { getIsOnDevice, getConfig } from '/app/redux/config'
 
 import { DesktopApp } from '../DesktopApp'
 import { OnDeviceDisplayApp } from '../OnDeviceDisplayApp'
 import { App } from '../'
 
-import type { State } from '../../redux/types'
-import { renderWithProviders } from '../../__testing-utils__'
+import type { State } from '/app/redux/types'
+import { renderWithProviders } from '/app/__testing-utils__'
 
-vi.mock('../../redux/config')
+vi.mock('/app/redux/config')
 vi.mock('../DesktopApp')
 vi.mock('../OnDeviceDisplayApp')
 

app/src/App/__tests__/DesktopApp.test.tsx

@@ -4,35 +4,35 @@ import { screen } from '@testing-library/react'
 import { when } from 'vitest-when'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 
-import { renderWithProviders } from '../../__testing-utils__'
-import { i18n } from '../../i18n'
-import { Breadcrumbs } from '../../organisms/Breadcrumbs'
-import { CalibrationDashboard } from '../../pages/Desktop/Devices/CalibrationDashboard'
-import { DeviceDetails } from '../../pages/Desktop/Devices/DeviceDetails'
-import { DevicesLanding } from '../../pages/Desktop/Devices/DevicesLanding'
-import { ProtocolsLanding } from '../../pages/Desktop/Protocols/ProtocolsLanding'
-import { ProtocolRunDetails } from '../../pages/Desktop/Devices/ProtocolRunDetails'
-import { RobotSettings } from '../../pages/Desktop/Devices/RobotSettings'
-import { GeneralSettings } from '../../pages/Desktop/AppSettings/GeneralSettings'
-import { AlertsModal } from '../../organisms/Alerts/AlertsModal'
-import { useFeatureFlag } from '../../redux/config'
-import { useIsFlex } from '../../organisms/Devices/hooks'
-import { ProtocolTimeline } from '../../pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline'
+import { renderWithProviders } from '/app/__testing-utils__'
+import { i18n } from '/app/i18n'
+import { Breadcrumbs } from '/app/organisms/Breadcrumbs'
+import { CalibrationDashboard } from '/app/pages/Desktop/Devices/CalibrationDashboard'
+import { DeviceDetails } from '/app/pages/Desktop/Devices/DeviceDetails'
+import { DevicesLanding } from '/app/pages/Desktop/Devices/DevicesLanding'
+import { ProtocolsLanding } from '/app/pages/Desktop/Protocols/ProtocolsLanding'
+import { ProtocolRunDetails } from '/app/pages/Desktop/Devices/ProtocolRunDetails'
+import { RobotSettings } from '/app/pages/Desktop/Devices/RobotSettings'
+import { GeneralSettings } from '/app/pages/Desktop/AppSettings/GeneralSettings'
+import { AlertsModal } from '/app/organisms/Alerts/AlertsModal'
+import { useFeatureFlag } from '/app/redux/config'
+import { useIsFlex } from '/app/organisms/Devices/hooks'
+import { ProtocolTimeline } from '/app/pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline'
 import { useSoftwareUpdatePoll } from '../hooks'
 import { DesktopApp } from '../DesktopApp'
 
-vi.mock('../../organisms/Breadcrumbs')
-vi.mock('../../organisms/Devices/hooks')
-vi.mock('../../pages/Desktop/AppSettings/GeneralSettings')
-vi.mock('../../pages/Desktop/Devices/CalibrationDashboard')
-vi.mock('../../pages/Desktop/Devices/DeviceDetails')
-vi.mock('../../pages/Desktop/Devices/DevicesLanding')
-vi.mock('../../pages/Desktop/Protocols/ProtocolsLanding')
-vi.mock('../../pages/Desktop/Devices/ProtocolRunDetails')
-vi.mock('../../pages/Desktop/Devices/RobotSettings')
-vi.mock('../../organisms/Alerts/AlertsModal')
-vi.mock('../../pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline')
-vi.mock('../../redux/config')
+vi.mock('/app/organisms/Breadcrumbs')
+vi.mock('/app/organisms/Devices/hooks')
+vi.mock('/app/pages/Desktop/AppSettings/GeneralSettings')
+vi.mock('/app/pages/Desktop/Devices/CalibrationDashboard')
+vi.mock('/app/pages/Desktop/Devices/DeviceDetails')
+vi.mock('/app/pages/Desktop/Devices/DevicesLanding')
+vi.mock('/app/pages/Desktop/Protocols/ProtocolsLanding')
+vi.mock('/app/pages/Desktop/Devices/ProtocolRunDetails')
+vi.mock('/app/pages/Desktop/Devices/RobotSettings')
+vi.mock('/app/organisms/Alerts/AlertsModal')
+vi.mock('/app/pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline')
+vi.mock('/app/redux/config')
 vi.mock('../hooks')
 
 const render = (path = '/') => {