feat(app, step-generation): protocol viz prototype (#18804)

This is a prototype to be used for protocol visualization user testing.
For all new components, I used CSS modules.

Author: jerader

app/package.json

@@ -31,6 +31,7 @@
     "@thi.ng/paths": "1.6.5",
     "@types/uuid": "^3.4.7",
     "classnames": "2.2.5",
+    "clsx": "^2.1.1",
     "connected-react-router": "6.9.3",
     "core-js": "3.2.1",
     "date-fns": "2.25.0",

app/src/App/DesktopApp.tsx

@@ -29,7 +29,7 @@ import { ProtocolRunDetails } from '/app/pages/Desktop/Devices/ProtocolRunDetail
 import { RobotSettings } from '/app/pages/Desktop/Devices/RobotSettings'
 import { Labware } from '/app/pages/Desktop/Labware'
 import { ProtocolDetails } from '/app/pages/Desktop/Protocols/ProtocolDetails'
-import { ProtocolTimeline } from '/app/pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline'
+import { ProtocolPreview } from '/app/pages/Desktop/Protocols/ProtocolPreview'
 import { ProtocolsLanding } from '/app/pages/Desktop/Protocols/ProtocolsLanding'
 import { useIsFlex, useRobot } from '/app/redux-resources/robots'
 import { OPENTRONS_USB } from '/app/redux/discovery'
@@ -80,9 +80,9 @@ export const DesktopApp = (): JSX.Element => {
       path: '/protocols/:protocolKey',
     },
     {
-      Component: ProtocolTimeline,
-      name: 'Protocol Timeline',
-      path: '/protocols/:protocolKey/timeline',
+      Component: ProtocolPreview,
+      name: 'Preview',
+      path: '/protocols/:protocolKey/preview',
     },
     {
       Component: Labware,

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

@@ -20,7 +20,7 @@ import { ProtocolsLanding } from '/app/pages/Desktop/Protocols/ProtocolsLanding'
 // prettier-ignore
 import { AlertsModal } from '/app/organisms/Desktop/Alerts/AlertsModal';
 
-import { ProtocolTimeline } from '/app/pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline'
+import { ProtocolPreview } from '/app/pages/Desktop/Protocols/ProtocolPreview'
 import { useIsFlex } from '/app/redux-resources/robots'
 import { useFeatureFlag } from '/app/redux/config'
 
@@ -44,6 +44,7 @@ vi.mock('/app/pages/Desktop/Protocols/ProtocolDetails/ProtocolTimeline')
 vi.mock('/app/redux/config')
 vi.mock('/app/redux-resources/robots')
 vi.mock('../hooks')
+vi.mock('/app/pages/Desktop/Protocols/ProtocolPreview')
 
 const render = (path = '/') => {
   return renderWithProviders(
@@ -70,9 +71,7 @@ describe('DesktopApp', () => {
     vi.mocked(ProtocolRunDetails).mockReturnValue(
       <div>Mock ProtocolRunDetails</div>
     )
-    vi.mocked(ProtocolTimeline).mockReturnValue(
-      <div>Mock ProtocolTimeline</div>
-    )
+    vi.mocked(ProtocolPreview).mockReturnValue(<div>Mock Preview</div>)
     vi.mocked(RobotSettings).mockReturnValue(<div>Mock RobotSettings</div>)
     vi.mocked(GeneralSettings).mockReturnValue(<div>Mock AppSettings</div>)
     vi.mocked(Breadcrumbs).mockReturnValue(<div>Mock Breadcrumbs</div>)
@@ -131,9 +130,9 @@ describe('DesktopApp', () => {
     screen.getByText('Mock ProtocolsLanding')
   })
 
-  it('renders a ProtocolsTimeline component from /protocolTimeline', () => {
-    render(`/protocols/95e67900-bc9f-4fbf-92c6-cc4d7226a51b/timeline`)
-    screen.getByText('Mock ProtocolTimeline')
+  it('renders a ProtocolsTimeline component from /preview', () => {
+    render(`/protocols/95e67900-bc9f-4fbf-92c6-cc4d7226a51b/preview`)
+    screen.getByText('Mock Preview')
   })
 
   it('renders a ProtocolRunDetails component from /devices/:robotName/protocol-runs/:runId/:protocolRunDetailsTab', () => {

app/src/assets/localization/en/top_navigation.json

@@ -9,17 +9,18 @@
   "instruments": "Instruments",
   "labware": "Labware",
   "modules": "modules",
-  "pipettes": "pipettes",
   "pipettes_not_calibrated": "Please calibrate all pipettes specified in loaded protocol to proceed",
+  "pipettes": "pipettes",
   "please_connect_to_a_robot": "Please connect to a robot to proceed",
   "please_load_a_protocol": "Please load a protocol to proceed",
+  "preview": "Preview",
   "protocol_details": "Protocol Details",
   "protocol_runs": "Protocol Runs",
   "protocol_timeline": "Protocol Timeline",
   "protocols": "Protocols",
   "quick_transfer": "Quick Transfer",
   "robot_settings": "Robot Settings",
-  "run": "run",
   "run_details": "Run Details",
+  "run": "run",
   "settings": "Settings"
 }

app/src/organisms/Desktop/Breadcrumbs/index.tsx

@@ -94,6 +94,7 @@ function BreadcrumbsComponent(): JSX.Element | null {
 
     '/protocols': t('protocols'),
     [`/protocols/${protocolKey}`]: protocolDisplayName,
+    [`/protocols/${protocolKey}/preview`]: t('preview'),
   }
 
   // create an array of crumbs based on the pathname and defined names by path