feat(protocol-designer): create redesign ff and scaffolding for new n…

…av (#15657)

closes AUTH-555

protocol-designer/package.json

@@ -54,6 +54,7 @@
     "redux": "4.0.5",
     "redux-actions": "2.2.1",
     "react-popper": "1.0.0",
+    "react-router-dom": "6.24.1",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",
     "styled-components": "5.3.6",

protocol-designer/src/components/App.tsx → protocol-designer/src/App.tsx

@@ -1,12 +1,6 @@
 import * as React from 'react'
 import { ProtocolEditor } from './ProtocolEditor'
 
-import '../css/reset.module.css'
-
 export function App(): JSX.Element {
-  return (
-    <div className="container">
-      <ProtocolEditor />
-    </div>
-  )
+  return <ProtocolEditor />
 }

protocol-designer/src/Navbar.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { NavLink } from 'react-router-dom'
+import styled from 'styled-components'
+
+import {
+  ALIGN_CENTER,
+  ALIGN_FLEX_START,
+  ALIGN_STRETCH,
+  COLORS,
+  DIRECTION_COLUMN,
+  FLEX_NONE,
+  Flex,
+  JUSTIFY_SPACE_BETWEEN,
+  SPACING,
+  LegacyStyledText,
+  TYPOGRAPHY,
+  DIRECTION_ROW,
+} from '@opentrons/components'
+
+import type { RouteProps } from './types'
+
+export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
+  const navRoutes = routes.filter(
+    ({ navLinkTo }: RouteProps) => navLinkTo != null
+  )
+  return (
+    <Flex
+      css={TYPOGRAPHY.h3Regular}
+      flexDirection={DIRECTION_COLUMN}
+      flex={FLEX_NONE}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      alignItems={ALIGN_CENTER}
+    >
+      <Flex
+        flexDirection={DIRECTION_ROW}
+        flex={FLEX_NONE}
+        alignItems={ALIGN_FLEX_START}
+        alignSelf={ALIGN_STRETCH}
+      >
+        {navRoutes.map(({ name, navLinkTo }: RouteProps) => (
+          <NavbarLink key={name} to={navLinkTo}>
+            <LegacyStyledText
+              as="h3"
+              margin={`${SPACING.spacing8} 0 ${SPACING.spacing8} ${SPACING.spacing12}`}
+            >
+              {name}
+            </LegacyStyledText>
+          </NavbarLink>
+        ))}
+      </Flex>
+    </Flex>
+  )
+}
+
+const NavbarLink = styled(NavLink)`
+  color: ${COLORS.black90};
+  text-decoration: none;
+  align-self: ${ALIGN_STRETCH};
+  &:hover {
+    color: ${COLORS.black70};
+  }
+`

protocol-designer/src/ProtocolEditor.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { DndProvider } from 'react-dnd'
+import { BrowserRouter } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import {
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  Flex,
+  PrimaryButton,
+  SPACING,
+} from '@opentrons/components'
+import { getEnableRedesign } from './feature-flags/selectors'
+import { setFeatureFlags } from './feature-flags/actions'
+import { ComputingSpinner } from './components/ComputingSpinner'
+import { ConnectedNav } from './containers/ConnectedNav'
+import { Sidebar } from './containers/ConnectedSidebar'
+import { ConnectedTitleBar } from './containers/ConnectedTitleBar'
+import { MainPanel } from './containers/ConnectedMainPanel'
+import { PortalRoot as MainPageModalPortalRoot } from './components/portals/MainPageModalPortal'
+import { MAIN_CONTENT_FORCED_SCROLL_CLASSNAME } from './ui/steps/utils'
+import { PrereleaseModeIndicator } from './components/PrereleaseModeIndicator'
+import { PortalRoot as TopPortalRoot } from './components/portals/TopPortal'
+import { FileUploadMessageModal } from './components/modals/FileUploadMessageModal/FileUploadMessageModal'
+import { LabwareUploadMessageModal } from './components/modals/LabwareUploadMessageModal/LabwareUploadMessageModal'
+import { GateModal } from './components/modals/GateModal'
+import { CreateFileWizard } from './components/modals/CreateFileWizard'
+import { AnnouncementModal } from './components/modals/AnnouncementModal'
+import { ProtocolRoutes } from './ProtocolRoutes'
+
+import styles from './components/ProtocolEditor.module.css'
+import './css/reset.module.css'
+
+const showGateModal =
+  process.env.NODE_ENV === 'production' || process.env.OT_PD_SHOW_GATE
+
+function ProtocolEditorComponent(): JSX.Element {
+  const enableRedesign = useSelector(getEnableRedesign)
+  const dispatch = useDispatch()
+
+  return (
+    <div id="protocol-editor">
+      <TopPortalRoot />
+      {enableRedesign ? (
+        <Flex flexDirection={DIRECTION_COLUMN}>
+          <Flex padding={SPACING.spacing12} flexDirection={DIRECTION_ROW}>
+            <PrimaryButton
+              onClick={() => {
+                dispatch(setFeatureFlags({ OT_PD_ENABLE_REDESIGN: false }))
+              }}
+            >
+              turn off redesign
+            </PrimaryButton>
+          </Flex>
+          <BrowserRouter>
+            <ProtocolRoutes />
+          </BrowserRouter>
+        </Flex>
+      ) : (
+        <div className="container">
+          <ComputingSpinner />
+          <TopPortalRoot />
+          {showGateModal ? <GateModal /> : null}
+          <PrereleaseModeIndicator />
+          <div className={styles.wrapper}>
+            <ConnectedNav />
+            <Sidebar />
+            <div className={styles.main_page_wrapper}>
+              <ConnectedTitleBar />
+
+              <div
+                id="main-page"
+                className={cx(
+                  styles.main_page_content,
+                  MAIN_CONTENT_FORCED_SCROLL_CLASSNAME
+                )}
+              >
+                <AnnouncementModal />
+                <CreateFileWizard />
+                <FileUploadMessageModal />
+
+                <MainPageModalPortalRoot />
+                <LabwareUploadMessageModal />
+                <MainPanel />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const ProtocolEditor = (): JSX.Element => (
+  <DndProvider backend={HTML5Backend}>
+    <ProtocolEditorComponent />
+  </DndProvider>
+)

protocol-designer/src/ProtocolRoutes.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { Route, Navigate, Routes, useLocation } from 'react-router-dom'
+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 { CreateNewProtocol } from './pages/CreateNewProtocol'
+import { Navbar } from './Navbar'
+
+import type { RouteProps } from './types'
+
+const LANDING_ROUTE = '/'
+const pdRoutes: RouteProps[] = [
+  {
+    Component: ProtocolOverview,
+    name: 'Protocol overview',
+    navLinkTo: '/overview',
+    path: '/overview',
+  },
+  {
+    Component: Liquids,
+    name: 'Liquids',
+    navLinkTo: '/liquids',
+    path: '/liquids',
+  },
+  {
+    Component: StartingDeckState,
+    name: 'Starting deck state',
+    navLinkTo: '/startingDeckState',
+    path: '/startingDeckState',
+  },
+  {
+    Component: ProtocolSteps,
+    name: 'Protocol steps',
+    navLinkTo: '/steps',
+    path: '/steps',
+  },
+  {
+    Component: CreateNewProtocol,
+    name: 'Create new protocol',
+    navLinkTo: '/createNew',
+    path: '/createNew',
+  },
+]
+
+export function ProtocolRoutes(): JSX.Element {
+  const location = useLocation()
+  const currentPath = location.pathname
+  const landingPage: RouteProps = {
+    Component: Landing,
+    name: 'Landing',
+    navLinkTo: '/',
+    path: '/',
+  }
+  const allRoutes: RouteProps[] = [...pdRoutes, landingPage]
+
+  return (
+    <>
+      {currentPath === LANDING_ROUTE ? null : <Navbar routes={pdRoutes} />}
+      <Box width="100%">
+        <Routes>
+          {allRoutes.map(({ Component, path }: RouteProps) => {
+            return <Route key={path} path={path} element={<Component />} />
+          })}
+          <Route path="*" element={<Navigate to={LANDING_ROUTE} />} />
+        </Routes>
+      </Box>
+    </>
+  )
+}

protocol-designer/src/feature-flags/reducers.ts

@@ -25,6 +25,7 @@ const initialFlags: Flags = {
     process.env.OT_PD_ALLOW_ALL_TIPRACKS === '1' || false,
   OT_PD_ENABLE_ABSORBANCE_READER:
     process.env.OT_PD_ENABLE_ABSORBANCE_READER === '1' || false,
+  OT_PD_ENABLE_REDESIGN: process.env.OT_PD_ENABLE_REDESIGN === '1' || false,
 }
 // @ts-expect-error(sa, 2021-6-10): cannot use string literals as action type
 // TODO IMMEDIATELY: refactor this to the old fashioned way if we cannot have type safety: https://github.com/redux-utilities/redux-actions/issues/282#issuecomment-595163081

protocol-designer/src/feature-flags/selectors.ts

@@ -2,10 +2,16 @@ import { createSelector } from 'reselect'
 import { getFlagsFromQueryParams } from './utils'
 import type { BaseState, Selector } from '../types'
 import type { Flags } from './types'
-export const getFeatureFlagData = (state: BaseState): Flags => ({
-  ...state.featureFlags.flags,
-  ...getFlagsFromQueryParams(),
-})
+
+const getFeatureFlags = (state: BaseState): Flags => state.featureFlags.flags
+
+export const getFeatureFlagData: Selector<Flags> = createSelector(
+  [getFeatureFlags, getFlagsFromQueryParams],
+  (flags, queryParamsFlags) => ({
+    ...flags,
+    ...queryParamsFlags,
+  })
+)
 export const getEnabledPrereleaseMode: Selector<
   boolean | null | undefined
 > = createSelector(getFeatureFlagData, flags => flags.PRERELEASE_MODE)
@@ -23,3 +29,7 @@ export const getEnableAbsorbanceReader: Selector<boolean> = createSelector(
   getFeatureFlagData,
   flags => flags.OT_PD_ENABLE_ABSORBANCE_READER ?? false
 )
+export const getEnableRedesign: Selector<boolean> = createSelector(
+  getFeatureFlagData,
+  flags => flags.OT_PD_ENABLE_REDESIGN ?? false
+)

protocol-designer/src/feature-flags/types.ts

@@ -31,6 +31,7 @@ export type FlagTypes =
   | 'OT_PD_DISABLE_MODULE_RESTRICTIONS'
   | 'OT_PD_ALLOW_ALL_TIPRACKS'
   | 'OT_PD_ENABLE_ABSORBANCE_READER'
+  | 'OT_PD_ENABLE_REDESIGN'
 // flags that are not in this list only show in prerelease mode
 export const userFacingFlags: FlagTypes[] = [
   'OT_PD_DISABLE_MODULE_RESTRICTIONS',
@@ -40,5 +41,6 @@ export const allFlags: FlagTypes[] = [
   ...userFacingFlags,
   'PRERELEASE_MODE',
   'OT_PD_ENABLE_ABSORBANCE_READER',
+  'OT_PD_ENABLE_REDESIGN',
 ]
 export type Flags = Partial<Record<FlagTypes, boolean | null | undefined>>

protocol-designer/src/index.tsx

@@ -4,10 +4,10 @@ import { Provider } from 'react-redux'
 import { I18nextProvider } from 'react-i18next'
 
 import { configureStore } from './configureStore'
-import { App } from './components/App'
 import { initialize } from './initialize'
 import { initializeMixpanel } from './analytics/mixpanel'
 import { i18n } from './localization'
+import { App } from './App'
 
 // initialize Redux
 const store = configureStore()

protocol-designer/src/localization/en/feature_flags.json

@@ -15,5 +15,9 @@
   "OT_PD_ENABLE_ABSORBANCE_READER": {
     "title": "Enable absorbance plate reader",
     "description": "Enable absorbance plate reader support."
+  },
+  "OT_PD_ENABLE_REDESIGN": {
+    "title": "Enable redesign",
+    "description": "A whole new world."
   }
 }