address feedback renaming the component

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

@@ -6,7 +6,7 @@ import { i18n } from '../../../assets/localization'
 import { getFileMetadata } from '../../../file-data/selectors'
 import { LiquidButton } from '../../../molecules'
 
-import { EditNavigation } from '..'
+import { DesignerNavigation } from '..'
 
 import type { ComponentProps } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
@@ -29,14 +29,14 @@ vi.mock('react-router-dom', async importOriginal => {
   }
 })
 
-const render = (props: ComponentProps<typeof EditNavigation>) => {
-  return renderWithProviders(<EditNavigation {...props} />, {
+const render = (props: ComponentProps<typeof DesignerNavigation>) => {
+  return renderWithProviders(<DesignerNavigation {...props} />, {
     i18nInstance: i18n,
   })
 }
 
-describe('EditNavigation', () => {
-  let props: ComponentProps<typeof EditNavigation>
+describe('DesignerNavigation', () => {
+  let props: ComponentProps<typeof DesignerNavigation>
   beforeEach(() => {
     props = {
       hasZoomInSlot: false,

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

@@ -24,19 +24,19 @@ import { LiquidButton } from '../../molecules/LiquidButton'
 
 import type { StyleProps, TabProps } from '@opentrons/components'
 
-interface EditNavigationProps {
+interface DesignerNavigationProps {
   hasZoomInSlot?: boolean
   tabs?: TabProps[]
   hasTrashEntity?: boolean
   showLiquidOverflowMenu?: (liquidOverflowMenu: boolean) => void
 }
-
-export function EditNavigation({
+// Note: this navigation is used in design page and liquids page
+export function DesignerNavigation({
   hasZoomInSlot,
   tabs = [],
   hasTrashEntity,
   showLiquidOverflowMenu,
-}: EditNavigationProps): JSX.Element {
+}: DesignerNavigationProps): JSX.Element {
   const { t } = useTranslation('starting_deck_state')
   const location = useLocation()
   const metadata = useSelector(getFileMetadata)

protocol-designer/src/organisms/index.ts

@@ -6,9 +6,9 @@ export * from './BlockingHintModal'
 export * from './ConfirmDeleteModal'
 export * from './ConfirmDeleteStagingAreaModal'
 export * from './DefineLiquidsModal'
+export * from './DesignerNavigation'
 export * from './DisabledScreen'
 export * from './EditInstrumentsModal'
-export * from './EditNavigation'
 export * from './EditNickNameModal'
 export * from './EditProtocolMetadataModal'
 export * from './FileUploadMessagesModal/'

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

@@ -17,7 +17,7 @@ import { selectTerminalItem } from '../../ui/steps/actions/actions'
 import { useKitchen } from '../../organisms/Kitchen/hooks'
 import { getDeckSetupForActiveItem } from '../../top-selectors/labware-locations'
 import { generateNewProtocol } from '../../labware-ingred/actions'
-import { DefineLiquidsModal, EditNavigation } from '../../organisms'
+import { DefineLiquidsModal, DesignerNavigation } from '../../organisms'
 import { selectDesignerTab } from '../../file-data/actions'
 import { getDesignerTab, getFileMetadata } from '../../file-data/selectors'
 import { DeckSetupContainer } from './DeckSetup'
@@ -151,7 +151,7 @@ export function Designer(): JSX.Element {
         />
       ) : null}
       <Flex flexDirection={DIRECTION_COLUMN} minHeight={FLEX_MAX_CONTENT}>
-        <EditNavigation
+        <DesignerNavigation
           hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}
           showLiquidOverflowMenu={showLiquidOverflowMenu}

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

@@ -4,7 +4,7 @@ import { screen } from '@testing-library/react'
 import { i18n } from '../../../assets/localization'
 import { renderWithProviders } from '../../../__testing-utils__'
 import { selectors as labwareIngredSelectors } from '../../../labware-ingred/selectors'
-import { AssignLiquidsModal, EditNavigation } from '../../../organisms'
+import { AssignLiquidsModal, DesignerNavigation } from '../../../organisms'
 import { LiquidsOverflowMenu } from '../../Designer/LiquidsOverflowMenu'
 import { Liquids } from '..'
 
@@ -42,7 +42,9 @@ describe('Liquids', () => {
     vi.mocked(AssignLiquidsModal).mockReturnValue(
       <div>mock AssignLiquidsModal</div>
     )
-    vi.mocked(EditNavigation).mockReturnValue(<div>mock EditNavigation</div>)
+    vi.mocked(DesignerNavigation).mockReturnValue(
+      <div>mock DesignerNavigation</div>
+    )
     vi.mocked(LiquidsOverflowMenu).mockReturnValue(
       <div>mock LiquidsOverflowMenu</div>
     )
@@ -55,7 +57,7 @@ describe('Liquids', () => {
 
   it('renders nav and assign liquids modal', () => {
     render()
-    screen.getByText('mock EditNavigation')
+    screen.getByText('mock DesignerNavigation')
     screen.getByText('mock AssignLiquidsModal')
   })
 })

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

@@ -9,7 +9,7 @@ import {
 import {
   AssignLiquidsModal,
   DefineLiquidsModal,
-  EditNavigation,
+  DesignerNavigation,
 } from '../../organisms'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import { LiquidsOverflowMenu } from '../Designer/LiquidsOverflowMenu'
@@ -59,7 +59,7 @@ export function Liquids(): JSX.Element {
       ) : null}
 
       <Flex flexDirection={DIRECTION_COLUMN}>
-        <EditNavigation showLiquidOverflowMenu={showLiquidOverflowMenu} />
+        <DesignerNavigation showLiquidOverflowMenu={showLiquidOverflowMenu} />
         <AssignLiquidsModal />
       </Flex>
     </>