diff --git a/protocol-designer/src/NavigationBar.tsx b/protocol-designer/src/NavigationBar.tsx index 33682fb646a..e6b463a047f 100644 --- a/protocol-designer/src/NavigationBar.tsx +++ b/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) => ( {name} diff --git a/protocol-designer/src/ProtocolRoutes.tsx b/protocol-designer/src/ProtocolRoutes.tsx index e02cab51e8f..6ceb6d60eb2 100644 --- a/protocol-designer/src/ProtocolRoutes.tsx +++ b/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, diff --git a/protocol-designer/src/assets/localization/en/starting_deck_state.json b/protocol-designer/src/assets/localization/en/starting_deck_state.json index c2060dc3fcf..5c6fb953539 100644 --- a/protocol-designer/src/assets/localization/en/starting_deck_state.json +++ b/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", diff --git a/protocol-designer/src/pages/StartingDeckState/ControlSelect.tsx b/protocol-designer/src/pages/Designer/DeckSetup/ControlSelect.tsx similarity index 92% rename from protocol-designer/src/pages/StartingDeckState/ControlSelect.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/ControlSelect.tsx index d963a045e1a..f8a99e2fab3 100644 --- a/protocol-designer/src/pages/StartingDeckState/ControlSelect.tsx +++ b/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' diff --git a/protocol-designer/src/pages/StartingDeckState/DeckSetup.module.css b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetup.module.css similarity index 100% rename from protocol-designer/src/pages/StartingDeckState/DeckSetup.module.css rename to protocol-designer/src/pages/Designer/DeckSetup/DeckSetup.module.css diff --git a/protocol-designer/src/pages/StartingDeckState/index.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx similarity index 95% rename from protocol-designer/src/pages/StartingDeckState/index.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/DeckSetupContainer.tsx index 04942c4f3f7..8daf06defd6 100644 --- a/protocol-designer/src/pages/StartingDeckState/index.tsx +++ b/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) diff --git a/protocol-designer/src/pages/StartingDeckState/DeckSetupDetails.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx similarity index 96% rename from protocol-designer/src/pages/StartingDeckState/DeckSetupDetails.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/DeckSetupDetails.tsx index 9e185a338d1..ddf4e25897e 100644 --- a/protocol-designer/src/pages/StartingDeckState/DeckSetupDetails.tsx +++ b/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 diff --git a/protocol-designer/src/pages/StartingDeckState/DeckSetupTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx similarity index 94% rename from protocol-designer/src/pages/StartingDeckState/DeckSetupTools.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx index dc951c00929..1b16ce316ca 100644 --- a/protocol-designer/src/pages/StartingDeckState/DeckSetupTools.tsx +++ b/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 { diff --git a/protocol-designer/src/pages/StartingDeckState/LabwareTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx similarity index 95% rename from protocol-designer/src/pages/StartingDeckState/LabwareTools.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx index 77e83434204..201593ed7c9 100644 --- a/protocol-designer/src/pages/StartingDeckState/LabwareTools.tsx +++ b/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' diff --git a/protocol-designer/src/pages/StartingDeckState/SlotDetailsContainer.tsx b/protocol-designer/src/pages/Designer/DeckSetup/SlotDetailsContainer.tsx similarity index 100% rename from protocol-designer/src/pages/StartingDeckState/SlotDetailsContainer.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/SlotDetailsContainer.tsx diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupContainer.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupContainer.test.tsx new file mode 100644 index 00000000000..f43fddfe877 --- /dev/null +++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupContainer.test.tsx @@ -0,0 +1,3 @@ +import { it } from 'vitest' + +it.todo('write test for DeckSetupContainer') diff --git a/protocol-designer/src/pages/StartingDeckState/__tests__/DeckSetupTools.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx similarity index 83% rename from protocol-designer/src/pages/StartingDeckState/__tests__/DeckSetupTools.test.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/__tests__/DeckSetupTools.test.tsx index a14d50ddbf7..a4fc74466e3 100644 --- a/protocol-designer/src/pages/StartingDeckState/__tests__/DeckSetupTools.test.tsx +++ b/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) => { return renderWithProviders(, { diff --git a/protocol-designer/src/pages/StartingDeckState/__tests__/LabwareTools.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx similarity index 83% rename from protocol-designer/src/pages/StartingDeckState/__tests__/LabwareTools.test.tsx rename to protocol-designer/src/pages/Designer/DeckSetup/__tests__/LabwareTools.test.tsx index 6fb2f8dcd31..96c12f731ff 100644 --- a/protocol-designer/src/pages/StartingDeckState/__tests__/LabwareTools.test.tsx +++ b/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) => { return renderWithProviders(, { diff --git a/protocol-designer/src/pages/StartingDeckState/__tests__/utils.test.ts b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/utils.test.ts similarity index 100% rename from protocol-designer/src/pages/StartingDeckState/__tests__/utils.test.ts rename to protocol-designer/src/pages/Designer/DeckSetup/__tests__/utils.test.ts diff --git a/protocol-designer/src/pages/StartingDeckState/constants.ts b/protocol-designer/src/pages/Designer/DeckSetup/constants.ts similarity index 100% rename from protocol-designer/src/pages/StartingDeckState/constants.ts rename to protocol-designer/src/pages/Designer/DeckSetup/constants.ts diff --git a/protocol-designer/src/pages/Designer/DeckSetup/index.ts b/protocol-designer/src/pages/Designer/DeckSetup/index.ts new file mode 100644 index 00000000000..fdee42806cb --- /dev/null +++ b/protocol-designer/src/pages/Designer/DeckSetup/index.ts @@ -0,0 +1 @@ +export * from './DeckSetupContainer' diff --git a/protocol-designer/src/pages/StartingDeckState/utils.ts b/protocol-designer/src/pages/Designer/DeckSetup/utils.ts similarity index 98% rename from protocol-designer/src/pages/StartingDeckState/utils.ts rename to protocol-designer/src/pages/Designer/DeckSetup/utils.ts index 9df86f57a59..e3c409e1f12 100644 --- a/protocol-designer/src/pages/StartingDeckState/utils.ts +++ b/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, diff --git a/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx new file mode 100644 index 00000000000..0aab3dabba3 --- /dev/null +++ b/protocol-designer/src/pages/Designer/__tests__/Designer.test.tsx @@ -0,0 +1,3 @@ +import { it } from 'vitest' + +it.todo('write test for Designer') diff --git a/protocol-designer/src/pages/Designer/index.tsx b/protocol-designer/src/pages/Designer/index.tsx new file mode 100644 index 00000000000..7c07db15646 --- /dev/null +++ b/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? */} + + {tab === 'startingDeck' ? ( + + ) : ( +
TODO wire this up
+ )} + + ) +} diff --git a/protocol-designer/src/pages/ProtocolOverview/index.tsx b/protocol-designer/src/pages/ProtocolOverview/index.tsx index d2ffc90878f..6f38df76d63 100644 --- a/protocol-designer/src/pages/ProtocolOverview/index.tsx +++ b/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') }} > diff --git a/protocol-designer/src/pages/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/ProtocolSteps/__tests__/ProtocolSteps.test.tsx deleted file mode 100644 index a8970f1d9d2..00000000000 --- a/protocol-designer/src/pages/ProtocolSteps/__tests__/ProtocolSteps.test.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { it } from 'vitest' - -it.todo('write test for ProtocolSteps') diff --git a/protocol-designer/src/pages/ProtocolSteps/index.tsx b/protocol-designer/src/pages/ProtocolSteps/index.tsx deleted file mode 100644 index 706c9402531..00000000000 --- a/protocol-designer/src/pages/ProtocolSteps/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react' -import { useTranslation } from 'react-i18next' - -export function ProtocolSteps(): JSX.Element { - const { t } = useTranslation('protocol_steps') - - return
{t('protocol_steps')}
-} diff --git a/protocol-designer/src/pages/StartingDeckState/__tests__/StartingDeckState.test.tsx b/protocol-designer/src/pages/StartingDeckState/__tests__/StartingDeckState.test.tsx deleted file mode 100644 index 8ab312f8435..00000000000 --- a/protocol-designer/src/pages/StartingDeckState/__tests__/StartingDeckState.test.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { it } from 'vitest' - -it.todo('write test for StartingDeckState')