refactor(protocol-designer): merge top level routes into Designer rou…

…te (#16066)

protocol-designer/src/NavigationBar.tsx

@@ -79,7 +79,6 @@ export function NavigationBar({
           padding={`${SPACING.spacing12} ${SPACING.spacing40}`}
           gridGap={SPACING.spacing40}
         >
-          TODO add breadcrumbs here
           {navRoutes.map(({ name, navLinkTo }: RouteProps) => (
             <NavbarLink key={name} to={navLinkTo}>
               <StyledText desktopStyle="bodyDefaultRegular">{name}</StyledText>

protocol-designer/src/ProtocolRoutes.tsx

@@ -4,8 +4,7 @@ import { Box } from '@opentrons/components'
 import { Landing } from './pages/Landing'
 import { ProtocolOverview } from './pages/ProtocolOverview'
 import { Liquids } from './pages/Liquids'
-import { StartingDeckState } from './pages/StartingDeckState'
-import { ProtocolSteps } from './pages/ProtocolSteps'
+import { Designer } from './pages/Designer'
 import { CreateNewProtocolWizard } from './pages/CreateNewProtocolWizard'
 import { NavigationBar } from './NavigationBar'
 
@@ -26,16 +25,10 @@ const pdRoutes: RouteProps[] = [
     path: '/liquids',
   },
   {
-    Component: StartingDeckState,
-    name: 'Starting deck state',
-    navLinkTo: '/startingDeckState',
-    path: '/startingDeckState',
-  },
-  {
-    Component: ProtocolSteps,
-    name: 'Protocol steps',
-    navLinkTo: '/steps',
-    path: '/steps',
+    Component: Designer,
+    name: 'Edit protocol',
+    navLinkTo: '/designer',
+    path: '/designer',
   },
   {
     Component: CreateNewProtocolWizard,

protocol-designer/src/assets/localization/en/starting_deck_state.json

@@ -13,6 +13,7 @@
   "done": "Done",
   "edit": "Edit",
   "labware": "Labware",
+  "protocol_starting_deck": "Protocol starting deck",
   "reservoir": "Reservoir",
   "starting_deck_state": "Starting deck state",
   "tipRack": "Tip rack",

protocol-designer/src/pages/StartingDeckState/ControlSelect.tsx → protocol-designer/src/pages/Designer/DeckSetup/ControlSelect.tsx

@@ -8,11 +8,11 @@ import {
   LegacyStyledText,
   RobotCoordsForeignDiv,
 } from '@opentrons/components'
-import { START_TERMINAL_ITEM_ID } from '../../steplist'
-import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
+import { START_TERMINAL_ITEM_ID } from '../../../steplist'
+import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
 
 import type { CoordinateTuple, Dimensions } from '@opentrons/shared-data'
-import type { TerminalItemId } from '../../steplist'
+import type { TerminalItemId } from '../../../steplist'
 
 import styles from './DeckSetup.module.css'
 

protocol-designer/src/pages/StartingDeckState/index.tsx → protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx

@@ -23,11 +23,11 @@ import {
   TRASH_BIN_ADAPTER_FIXTURE,
   WASTE_CHUTE_CUTOUT,
 } from '@opentrons/shared-data'
-import { getSelectedTerminalItemId } from '../../ui/steps'
-import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
-import { getDisableModuleRestrictions } from '../../feature-flags/selectors'
-import { getRobotType } from '../../file-data/selectors'
-import { getHasGen1MultiChannelPipette } from '../../step-forms'
+import { getSelectedTerminalItemId } from '../../../ui/steps'
+import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
+import { getDisableModuleRestrictions } from '../../../feature-flags/selectors'
+import { getRobotType } from '../../../file-data/selectors'
+import { getHasGen1MultiChannelPipette } from '../../../step-forms'
 import { SlotDetailsContainer } from './SlotDetailsContainer'
 import { DeckSetupDetails } from './DeckSetupDetails'
 import { getCutoutIdForAddressableArea } from './utils'
@@ -60,7 +60,7 @@ const OT2_STANDARD_DECK_VIEW_LAYER_BLOCK_LIST: string[] = [
 const lightFill = COLORS.grey35
 const darkFill = COLORS.grey60
 
-export function StartingDeckState(): JSX.Element {
+export function DeckSetupContainer(): JSX.Element {
   const selectedTerminalItemId = useSelector(getSelectedTerminalItemId)
   const activeDeckSetup = useSelector(getDeckSetupForActiveItem)
   const _disableCollisionWarnings = useSelector(getDisableModuleRestrictions)

protocol-designer/src/pages/StartingDeckState/DeckSetupDetails.tsx → protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx

@@ -15,10 +15,13 @@ import {
   SPAN7_8_10_11_SLOT,
   THERMOCYCLER_MODULE_TYPE,
 } from '@opentrons/shared-data'
-import { getSlotIdsBlockedBySpanning, getSlotIsEmpty } from '../../step-forms'
-import { LabwareOnDeck } from '../../components/DeckSetup/LabwareOnDeck'
-import { SlotWarning } from '../../components/DeckSetup/SlotWarning'
-import { getStagingAreaAddressableAreas } from '../../utils'
+import {
+  getSlotIdsBlockedBySpanning,
+  getSlotIsEmpty,
+} from '../../../step-forms'
+import { LabwareOnDeck } from '../../../components/DeckSetup/LabwareOnDeck'
+import { SlotWarning } from '../../../components/DeckSetup/SlotWarning'
+import { getStagingAreaAddressableAreas } from '../../../utils'
 import { ControlSelect } from './ControlSelect'
 
 import type { ModuleTemporalProperties } from '@opentrons/step-generation'
@@ -32,8 +35,8 @@ import type {
   InitialDeckSetup,
   LabwareOnDeck as LabwareOnDeckType,
   ModuleOnDeck,
-} from '../../step-forms'
-import type { TerminalItemId } from '../../steplist'
+} from '../../../step-forms'
+import type { TerminalItemId } from '../../../steplist'
 
 interface DeckSetupDetailsProps {
   activeDeckSetup: InitialDeckSetup

protocol-designer/src/pages/StartingDeckState/DeckSetupTools.tsx → protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx

@@ -18,19 +18,22 @@ import {
   getModuleType,
 } from '@opentrons/shared-data'
 
-import { getRobotType } from '../../file-data/selectors'
+import { getRobotType } from '../../../file-data/selectors'
 import {
   createDeckFixture,
   deleteDeckFixture,
-} from '../../step-forms/actions/additionalItems'
-import { createModule, deleteModule } from '../../step-forms/actions'
-import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
-import { createContainer, deleteContainer } from '../../labware-ingred/actions'
+} from '../../../step-forms/actions/additionalItems'
+import { createModule, deleteModule } from '../../../step-forms/actions'
+import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
+import {
+  createContainer,
+  deleteContainer,
+} from '../../../labware-ingred/actions'
 import {
   getEnableAbsorbanceReader,
   getEnableMoam,
-} from '../../feature-flags/selectors'
-import { createContainerAboveModule } from '../../step-forms/actions/thunks'
+} from '../../../feature-flags/selectors'
+import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
 import {
   FIXTURES,
   MAX_MAGNETIC_BLOCKS,
@@ -42,8 +45,8 @@ import { getModuleModelsBySlot } from './utils'
 import { LabwareTools } from './LabwareTools'
 
 import type { CutoutId, DeckSlotId, ModuleModel } from '@opentrons/shared-data'
-import type { DeckFixture } from '../../step-forms/actions/additionalItems'
-import type { ThunkDispatch } from '../../types'
+import type { DeckFixture } from '../../../step-forms/actions/additionalItems'
+import type { ThunkDispatch } from '../../../types'
 import type { Fixture } from './constants'
 
 interface DeckSetupToolsProps {

protocol-designer/src/pages/StartingDeckState/LabwareTools.tsx → protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx

@@ -28,17 +28,17 @@ import {
   getModuleType,
 } from '@opentrons/shared-data'
 
-import { selectors as stepFormSelectors } from '../../step-forms'
-import { getOnlyLatestDefs } from '../../labware-defs'
+import { selectors as stepFormSelectors } from '../../../step-forms'
+import { getOnlyLatestDefs } from '../../../labware-defs'
 import {
   ADAPTER_96_CHANNEL,
   getLabwareIsCompatible as _getLabwareIsCompatible,
-} from '../../utils/labwareModuleCompatibility'
-import { getHas96Channel } from '../../utils'
-import { createCustomLabwareDef } from '../../labware-defs/actions'
-import { getRobotType } from '../../file-data/selectors'
-import { getCustomLabwareDefsByURI } from '../../labware-defs/selectors'
-import { getPipetteEntities } from '../../step-forms/selectors'
+} from '../../../utils/labwareModuleCompatibility'
+import { getHas96Channel } from '../../../utils'
+import { createCustomLabwareDef } from '../../../labware-defs/actions'
+import { getRobotType } from '../../../file-data/selectors'
+import { getCustomLabwareDefsByURI } from '../../../labware-defs/selectors'
+import { getPipetteEntities } from '../../../step-forms/selectors'
 import { ORDERED_CATEGORIES } from './constants'
 import {
   getLabwareIsRecommended,
@@ -50,9 +50,9 @@ import type {
   LabwareDefinition2,
   ModuleModel,
 } from '@opentrons/shared-data'
-import type { ModuleOnDeck } from '../../step-forms'
-import type { ThunkDispatch } from '../../types'
-import type { LabwareDefByDefURI } from '../../labware-defs'
+import type { ModuleOnDeck } from '../../../step-forms'
+import type { ThunkDispatch } from '../../../types'
+import type { LabwareDefByDefURI } from '../../../labware-defs'
 import type { Fixture } from './constants'
 
 const CUSTOM_CATEGORY = 'custom'

protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupContainer.test.tsx

@@ -0,0 +1,3 @@
+import { it } from 'vitest'
+
+it.todo('write test for DeckSetupContainer')

protocol-designer/src/pages/StartingDeckState/__tests__/DeckSetupTools.test.tsx → protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx

@@ -3,32 +3,32 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { FLEX_ROBOT_TYPE, fixture96Plate } from '@opentrons/shared-data'
-import { i18n } from '../../../assets/localization'
-import { renderWithProviders } from '../../../__testing-utils__'
-import { deleteContainer } from '../../../labware-ingred/actions'
-import { createModule, deleteModule } from '../../../step-forms/actions'
-import { getRobotType } from '../../../file-data/selectors'
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
+import { deleteContainer } from '../../../../labware-ingred/actions'
+import { createModule, deleteModule } from '../../../../step-forms/actions'
+import { getRobotType } from '../../../../file-data/selectors'
 import {
   getEnableAbsorbanceReader,
   getEnableMoam,
-} from '../../../feature-flags/selectors'
+} from '../../../../feature-flags/selectors'
 import {
   createDeckFixture,
   deleteDeckFixture,
-} from '../../../step-forms/actions/additionalItems'
-import { getDeckSetupForActiveItem } from '../../../top-selectors/labware-locations'
+} from '../../../../step-forms/actions/additionalItems'
+import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-locations'
 import { DeckSetupTools } from '../DeckSetupTools'
 import { LabwareTools } from '../LabwareTools'
 
 import type { LabwareDefinition2 } from '@opentrons/shared-data'
 
-vi.mock('../../../feature-flags/selectors')
-vi.mock('../../../file-data/selectors')
-vi.mock('../../../top-selectors/labware-locations')
+vi.mock('../../../../feature-flags/selectors')
+vi.mock('../../../../file-data/selectors')
+vi.mock('../../../../top-selectors/labware-locations')
 vi.mock('../LabwareTools')
-vi.mock('../../../labware-ingred/actions')
-vi.mock('../../../step-forms/actions')
-vi.mock('../../../step-forms/actions/additionalItems')
+vi.mock('../../../../labware-ingred/actions')
+vi.mock('../../../../step-forms/actions')
+vi.mock('../../../../step-forms/actions/additionalItems')
 
 const render = (props: React.ComponentProps<typeof DeckSetupTools>) => {
   return renderWithProviders(<DeckSetupTools {...props} />, {

protocol-designer/src/pages/StartingDeckState/__tests__/LabwareTools.test.tsx → protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx

@@ -7,25 +7,25 @@ import {
   fixtureP1000SingleV2Specs,
   fixtureTiprack1000ul,
 } from '@opentrons/shared-data'
-import { i18n } from '../../../assets/localization'
-import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../../assets/localization'
+import { renderWithProviders } from '../../../../__testing-utils__'
 import {
   getInitialDeckSetup,
   getPermittedTipracks,
   getPipetteEntities,
-} from '../../../step-forms/selectors'
-import { getHas96Channel } from '../../../utils'
-import { createCustomLabwareDef } from '../../../labware-defs/actions'
-import { getCustomLabwareDefsByURI } from '../../../labware-defs/selectors'
-import { getRobotType } from '../../../file-data/selectors'
+} from '../../../../step-forms/selectors'
+import { getHas96Channel } from '../../../../utils'
+import { createCustomLabwareDef } from '../../../../labware-defs/actions'
+import { getCustomLabwareDefsByURI } from '../../../../labware-defs/selectors'
+import { getRobotType } from '../../../../file-data/selectors'
 import { LabwareTools } from '../LabwareTools'
 import type { LabwareDefinition2, PipetteV2Specs } from '@opentrons/shared-data'
 
-vi.mock('../../../utils')
-vi.mock('../../../step-forms/selectors')
-vi.mock('../../../file-data/selectors')
-vi.mock('../../../labware-defs/selectors')
-vi.mock('../../../labware-defs/actions')
+vi.mock('../../../../utils')
+vi.mock('../../../../step-forms/selectors')
+vi.mock('../../../../file-data/selectors')
+vi.mock('../../../../labware-defs/selectors')
+vi.mock('../../../../labware-defs/actions')
 
 const render = (props: React.ComponentProps<typeof LabwareTools>) => {
   return renderWithProviders(<LabwareTools {...props} />, {

protocol-designer/src/pages/Designer/DeckSetup/index.ts

@@ -0,0 +1 @@
+export * from './DeckSetupContainer'

protocol-designer/src/pages/StartingDeckState/utils.ts → protocol-designer/src/pages/Designer/DeckSetup/utils.ts

@@ -7,7 +7,7 @@ import {
   THERMOCYCLER_MODULE_V2,
   getModuleType,
 } from '@opentrons/shared-data'
-import { getOnlyLatestDefs } from '../../labware-defs'
+import { getOnlyLatestDefs } from '../../../labware-defs'
 import {
   FLEX_MODULE_MODELS,
   OT2_MODULE_MODELS,

protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx

@@ -0,0 +1,3 @@
+import { it } from 'vitest'
+
+it.todo('write test for Designer')

protocol-designer/src/pages/Designer/index.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+
+import { Tabs } from '@opentrons/components'
+
+import { useTranslation } from 'react-i18next'
+import { DeckSetupContainer } from './DeckSetup'
+
+export function Designer(): JSX.Element {
+  const { t } = useTranslation(['starting_deck_state', 'protocol_steps'])
+  const [tab, setTab] = React.useState<'startingDeck' | 'protocolSteps'>(
+    'startingDeck'
+  )
+  const startingDeckTab = {
+    text: t('protocol_starting_deck'),
+    isActive: tab === 'startingDeck',
+    onClick: () => {
+      setTab('startingDeck')
+    },
+  }
+  const protocolStepTab = {
+    text: t('protocol_steps:protocol_steps'),
+    isActive: tab === 'protocolSteps',
+    onClick: () => {
+      setTab('protocolSteps')
+    },
+  }
+
+  return (
+    <>
+      {/* TODO: add these tabs to the nav bar potentially? */}
+      <Tabs tabs={[startingDeckTab, protocolStepTab]} />
+      {tab === 'startingDeck' ? (
+        <DeckSetupContainer />
+      ) : (
+        <div>TODO wire this up</div>
+      )}
+    </>
+  )
+}

protocol-designer/src/pages/ProtocolOverview/index.tsx

@@ -210,7 +210,7 @@ export function ProtocolOverview(): JSX.Element {
               data-testid="toDeckSetup"
               textDecoration={TYPOGRAPHY.textDecorationUnderline}
               onClick={() => {
-                navigate('/startingDeckState')
+                navigate('/designer')
               }}
             >
               <StyledText desktopStyle="bodyDefaultRegular">