fix(protocol-designer): unify navigation bar of pd (#17128)

* fix(protocol-designer): unify navigation bar of pd

protocol-designer/src/ProtocolRoutes.tsx

@@ -1,18 +1,20 @@
 import { Route, Navigate, Routes, useNavigate } from 'react-router-dom'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Box } from '@opentrons/components'
-import { Landing } from './pages/Landing'
-import { ProtocolOverview } from './pages/ProtocolOverview'
-import { Liquids } from './pages/Liquids'
-import { Designer } from './pages/Designer'
-import { CreateNewProtocolWizard } from './pages/CreateNewProtocolWizard'
-import { NavigationBar } from './NavigationBar'
-import { Settings } from './pages/Settings'
 import {
-  Kitchen,
+  CreateNewProtocolWizard,
+  Designer,
+  Landing,
+  Liquids,
+  ProtocolOverview,
+  Settings,
+} from './pages'
+import {
   FileUploadMessagesModal,
-  LabwareUploadModal,
   GateModal,
+  Kitchen,
+  LabwareUploadModal,
+  Navigation,
 } from './organisms'
 import { ProtocolDesignerAppFallback } from './resources/ProtocolDesignerAppFallback'
 
@@ -72,7 +74,7 @@ export function ProtocolRoutes(): JSX.Element {
       FallbackComponent={ProtocolDesignerAppFallback}
       onReset={handleReset}
     >
-      <NavigationBar />
+      <Navigation />
       <Kitchen>
         <Box width="100%">
           {showGateModal ? <GateModal /> : null}

protocol-designer/src/atoms/constants.ts

@@ -13,6 +13,24 @@ export const BUTTON_LINK_STYLE = css`
   }
 `
 
+export const LINK_BUTTON_STYLE = css`
+  color: ${COLORS.black90};
+
+  &:hover {
+    color: ${COLORS.blue50};
+  }
+
+  &:focus-visible {
+    color: ${COLORS.blue50};
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.25rem;
+  }
+
+  &:disabled {
+    color: ${COLORS.grey40};
+  }
+`
+
 export const LINE_CLAMP_TEXT_STYLE = (
   lineClamp: number
 ): FlattenSimpleInterpolation => css`
@@ -32,3 +50,5 @@ export const COLUMN_STYLE = css`
   min-width: calc((${MIN_OVERVIEW_WIDTH} - ${COLUMN_GRID_GAP}) * 0.5);
   flex: 1;
 `
+
+export const NAV_BAR_HEIGHT_REM = 4

protocol-designer/src/organisms/ProtocolNavBar/__tests__/LiquidButton.test.tsx → protocol-designer/src/molecules/LiquidButton/__tests__/LiquidButton.test.tsx

@@ -3,7 +3,7 @@ import { fireEvent, screen } from '@testing-library/react'
 
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
-import { LiquidButton } from '../LiquidButton'
+import { LiquidButton } from '../../../molecules/LiquidButton'
 
 import type { ComponentProps } from 'react'
 

protocol-designer/src/molecules/index.ts

@@ -2,6 +2,6 @@ export * from './CheckboxExpandStepFormField'
 export * from './CheckboxStepFormField'
 export * from './DropdownStepFormField'
 export * from './InputStepFormField'
-export * from './SettingsIcon'
+export * from './LiquidButton'
 export * from './ToggleExpandStepFormField'
 export * from './ToggleStepFormField'

protocol-designer/src/organisms/AssignLiquidsModal/index.tsx

@@ -21,7 +21,7 @@ import { getSelectedWells } from '../../well-selection/selectors'
 import { SelectableLabware } from '../Labware/SelectableLabware'
 import { wellFillFromWellContents } from '../LabwareOnDeck/utils'
 import { deselectWells, selectWells } from '../../well-selection/actions'
-import { PROTOCOL_NAV_BAR_HEIGHT_REM } from '../ProtocolNavBar'
+import { NAV_BAR_HEIGHT_REM } from '../../atoms'
 import { LiquidToolbox } from './LiquidToolbox'
 
 import type { WellGroup } from '@opentrons/components'
@@ -52,7 +52,7 @@ export function AssignLiquidsModal(): JSX.Element | null {
 
   return (
     <Flex
-      height={`calc(100vh - ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem)`}
+      height={`calc(100vh - ${NAV_BAR_HEIGHT_REM}rem)`}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       backgroundColor={COLORS.grey10}
       padding={SPACING.spacing12}

protocol-designer/src/organisms/ProtocolNavBar/__tests__/ProtocolNavBar.test.tsx → protocol-designer/src/organisms/DesignerNavigation/__tests__/DesignerNavigation.test.tsx

@@ -4,34 +4,39 @@ import { describe, it, beforeEach, vi } from 'vitest'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { i18n } from '../../../assets/localization'
 import { getFileMetadata } from '../../../file-data/selectors'
-import { LiquidButton } from '../LiquidButton'
+import { LiquidButton } from '../../../molecules'
 
-import { ProtocolNavBar } from '..'
+import { DesignerNavigation } from '..'
 
 import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import type { TabProps } from '@opentrons/components'
 
 vi.mock('../../../file-data/selectors')
-vi.mock('../LiquidButton')
+vi.mock('../../../molecules/LiquidButton')
 
 const mockNavigate = vi.fn()
 vi.mock('react-router-dom', async importOriginal => {
   const reactRouterDom = await importOriginal<NavigateFunction>()
   return {
     ...reactRouterDom,
     useNavigate: () => mockNavigate,
+    useLocation: () => ({
+      location: {
+        pathname: '/designer',
+      },
+    }),
   }
 })
 
-const render = (props: ComponentProps<typeof ProtocolNavBar>) => {
-  return renderWithProviders(<ProtocolNavBar {...props} />, {
+const render = (props: ComponentProps<typeof DesignerNavigation>) => {
+  return renderWithProviders(<DesignerNavigation {...props} />, {
     i18nInstance: i18n,
   })
 }
 
-describe('ProtocolNavBar', () => {
-  let props: ComponentProps<typeof ProtocolNavBar>
+describe('DesignerNavigation', () => {
+  let props: ComponentProps<typeof DesignerNavigation>
   beforeEach(() => {
     props = {
       hasZoomInSlot: false,

protocol-designer/src/organisms/ProtocolNavBar/index.tsx → protocol-designer/src/organisms/DesignerNavigation/index.tsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import {
@@ -18,41 +18,39 @@ import {
 } from '@opentrons/components'
 import { getFileMetadata } from '../../file-data/selectors'
 import { selectTerminalItem } from '../../ui/steps/actions/actions'
-import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
+import { LINE_CLAMP_TEXT_STYLE, NAV_BAR_HEIGHT_REM } from '../../atoms'
 import { useKitchen } from '../Kitchen/hooks'
-import { LiquidButton } from './LiquidButton'
+import { LiquidButton } from '../../molecules/LiquidButton'
 
 import type { StyleProps, TabProps } from '@opentrons/components'
 
-export const PROTOCOL_NAV_BAR_HEIGHT_REM = 4
-
-interface ProtocolNavBarProps {
+interface DesignerNavigationProps {
   hasZoomInSlot?: boolean
   tabs?: TabProps[]
   hasTrashEntity?: boolean
   showLiquidOverflowMenu?: (liquidOverflowMenu: boolean) => void
-  liquidPage?: boolean
 }
-
-export function ProtocolNavBar({
+// Note: this navigation is used in design page and liquids page
+export function DesignerNavigation({
   hasZoomInSlot,
   tabs = [],
   hasTrashEntity,
   showLiquidOverflowMenu,
-  liquidPage = false,
-}: ProtocolNavBarProps): JSX.Element {
+}: DesignerNavigationProps): JSX.Element {
   const { t } = useTranslation('starting_deck_state')
+  const location = useLocation()
   const metadata = useSelector(getFileMetadata)
   const { makeSnackbar } = useKitchen()
   const navigate = useNavigate()
   const dispatch = useDispatch()
+  const isLiquidsPage = location.pathname === '/liquids'
 
-  const showProtocolEditButtons = !(hasZoomInSlot || liquidPage)
+  const showProtocolEditButtons = !(hasZoomInSlot === true || isLiquidsPage)
 
   let metadataText = t('edit_protocol')
-  if (liquidPage) {
+  if (isLiquidsPage) {
     metadataText = t('add_liquid')
-  } else if (hasZoomInSlot) {
+  } else if (hasZoomInSlot === true) {
     metadataText = t('add_hardware_labware')
   }
   return (
@@ -78,10 +76,10 @@ export function ProtocolNavBar({
           <LiquidButton showLiquidOverflowMenu={showLiquidOverflowMenu} />
         ) : null}
 
-        {liquidPage ? null : (
+        {isLiquidsPage ? null : (
           <SecondaryButton
             onClick={() => {
-              if (hasTrashEntity) {
+              if (hasTrashEntity === true) {
                 navigate('/overview')
                 dispatch(selectTerminalItem('__initial_setup__'))
               } else {
@@ -100,12 +98,12 @@ export function ProtocolNavBar({
 const NavContainer = styled(Flex)<{ showShadow: boolean }>`
   z-index: ${props => (props.showShadow === true ? 11 : 0)};
   padding: ${SPACING.spacing12};
-  height: ${PROTOCOL_NAV_BAR_HEIGHT_REM}rem;
+  height: ${NAV_BAR_HEIGHT_REM}rem;
   width: 100%;
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   align-items: ${ALIGN_CENTER};
   box-shadow: ${props =>
-    props.showShadow
+    props.showShadow === true
       ? `0px 1px 3px 0px ${COLORS.black90}${COLORS.opacity20HexCode}`
       : 'none'};
 `
@@ -119,7 +117,7 @@ const MetadataContainer = styled.div.withConfig<MetadataProps>({
   display: flex;
   flex-direction: ${DIRECTION_COLUMN};
   text-align: ${props =>
-    props.showProtocolEditButtons === true
+    props.showProtocolEditButtons
       ? TYPOGRAPHY.textAlignCenter
       : TYPOGRAPHY.textAlignLeft};
 

protocol-designer/src/__tests__/NavigationBar.test.tsx → protocol-designer/src/organisms/Navigation/__tests__/Navigation.test.tsx

@@ -2,27 +2,27 @@ import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { fireEvent, screen } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 
-import { i18n } from '../assets/localization'
-import { renderWithProviders } from '../__testing-utils__'
-import { NavigationBar } from '../NavigationBar'
-import { getHasUnsavedChanges } from '../load-file/selectors'
-import { toggleNewProtocolModal } from '../navigation/actions'
-import { SettingsIcon } from '../molecules'
+import { i18n } from '../../../assets/localization'
+import { renderWithProviders } from '../../../__testing-utils__'
+import { getHasUnsavedChanges } from '../../../load-file/selectors'
+import { toggleNewProtocolModal } from '../../../navigation/actions'
+import { SettingsIcon } from '../../SettingsIcon'
+import { Navigation } from '..'
 
-vi.mock('../molecules')
-vi.mock('../navigation/actions')
-vi.mock('../file-data/selectors')
-vi.mock('../load-file/selectors')
+vi.mock('../../SettingsIcon')
+vi.mock('../../../navigation/actions')
+vi.mock('../../../file-data/selectors')
+vi.mock('../../../load-file/selectors')
 const render = () => {
   return renderWithProviders(
     <MemoryRouter>
-      <NavigationBar />
+      <Navigation />
     </MemoryRouter>,
     { i18nInstance: i18n }
   )
 }
 
-describe('NavigationBar', () => {
+describe('Navigation', () => {
   beforeEach(() => {
     vi.mocked(getHasUnsavedChanges).mockReturnValue(false)
     vi.mocked(SettingsIcon).mockReturnValue(<div>mock SettingsIcon</div>)