refactor(protocol-designer): nav routing and hover touchups (#16237)

closes AUTH-790, AUTH-787, AUTH-785, AUTH-784, AUTH-756

components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css } from 'styled-components'
 import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { COLORS } from '../../../helix-design-system'
 import { Flex, Link } from '../../../primitives'
@@ -53,13 +54,20 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
         {tag != null ? <Tag {...tag} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (
-        <Flex width="10%" textDecoration={TYPOGRAPHY.textDecorationUnderline}>
-          <Link role="button" onClick={onClick}>
-            <StyledText desktopStyle="bodyDefaultRegular">
-              {linkText}
-            </StyledText>
-          </Link>
-        </Flex>
+        <Link
+          role="button"
+          onClick={onClick}
+          css={css`
+            width: 10%;
+            text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+            color: ${COLORS.grey60};
+            &:hover {
+              color: ${COLORS.grey40};
+            }
+          `}
+        >
+          <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
+        </Link>
       ) : null}
     </Flex>
   )

protocol-designer/src/NavigationBar.tsx

@@ -1,29 +1,46 @@
 import * as React from 'react'
-import { NavLink, useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 
 import {
   ALIGN_CENTER,
+  Btn,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
   StyledText,
 } from '@opentrons/components'
+import { toggleNewProtocolModal } from './navigation/actions'
 import { actions as loadFileActions } from './load-file'
+import { BUTTON_LINK_STYLE } from './atoms'
+import { getHasUnsavedChanges } from './load-file/selectors'
 import type { ThunkDispatch } from './types'
 
 export function NavigationBar(): JSX.Element | null {
-  const { t } = useTranslation('shared')
+  const { t } = useTranslation(['shared', 'alert'])
   const location = useLocation()
+  const navigate = useNavigate()
   const dispatch: ThunkDispatch<any> = useDispatch()
   const loadFile = (
     fileChangeEvent: React.ChangeEvent<HTMLInputElement>
   ): void => {
     dispatch(loadFileActions.loadProtocolFile(fileChangeEvent))
+    dispatch(toggleNewProtocolModal(false))
+  }
+  const hasUnsavedChanges = useSelector(getHasUnsavedChanges)
+
+  const handleCreateNew = (): void => {
+    if (
+      !hasUnsavedChanges ||
+      window.confirm(t('alert:confirm_create_new') as string)
+    ) {
+      dispatch(toggleNewProtocolModal(true))
+      navigate('/createNew')
+    }
   }
 
   return location.pathname === '/designer' ||
@@ -46,16 +63,18 @@ export function NavigationBar(): JSX.Element | null {
         </Flex>
         <Flex gridGap={SPACING.spacing40} alignItems={ALIGN_CENTER}>
           {location.pathname === '/createNew' ? null : (
-            <NavbarLink key="createNew" to="/createNew">
+            <Btn onClick={handleCreateNew} css={BUTTON_LINK_STYLE}>
               <StyledText desktopStyle="bodyDefaultRegular">
-                {t('create_new_protocol')}
+                {t('create_new')}
               </StyledText>
-            </NavbarLink>
+            </Btn>
           )}
           <StyledLabel>
-            <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-              {t('import')}
-            </StyledText>
+            <Flex css={BUTTON_LINK_STYLE}>
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {t('import')}
+              </StyledText>
+            </Flex>
             <input type="file" onChange={loadFile}></input>
           </StyledLabel>
         </Flex>
@@ -64,15 +83,6 @@ export function NavigationBar(): JSX.Element | null {
   )
 }
 
-const NavbarLink = styled(NavLink)`
-  color: ${COLORS.black90};
-  text-decoration: none;
-  align-self: ${ALIGN_CENTER};
-  &:hover {
-    color: ${COLORS.black70};
-  }
-`
-
 const StyledLabel = styled.label`
   height: 20px;
   cursor: pointer;

protocol-designer/src/__tests__/NavigationBar.test.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react'
-import { describe, it, vi } from 'vitest'
-import { screen } from '@testing-library/react'
+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'
 
+vi.mock('../navigation/actions')
 vi.mock('../file-data/selectors')
-
+vi.mock('../load-file/selectors')
 const render = () => {
   return renderWithProviders(
     <MemoryRouter>
@@ -19,19 +22,23 @@ const render = () => {
 }
 
 describe('NavigationBar', () => {
+  beforeEach(() => {
+    vi.mocked(getHasUnsavedChanges).mockReturnValue(false)
+  })
   it('should render text and link button', () => {
     render()
     screen.getByText('Opentrons')
     screen.getByText('Protocol Designer')
     screen.getByText('Version # fake_PD_version')
-    screen.getByText('Create new protocol')
+    screen.getByText('Create new')
     screen.getByText('Import')
   })
 
-  it.todo(
-    'when clicking Create new protocol, mock function should be called',
-    () => {}
-  )
+  it('when clicking Create new, should call the toggle action', () => {
+    render()
+    fireEvent.click(screen.getByText('Create new'))
+    expect(vi.mocked(toggleNewProtocolModal)).toHaveBeenCalled()
+  })
 
   it.todo('when clicking Import, mock function should be called', () => {})
 })

protocol-designer/src/assets/localization/en/shared.json

@@ -8,7 +8,7 @@
   "confirm_reorder": "Are you sure you want to reorder these steps, it may cause errors?",
   "confirm": "Confirm",
   "create_a_protocol": "Create a protocol",
-  "create_new_protocol": "Create new protocol",
+  "create_new": "Create new",
   "done": "Done",
   "edit_existing": "Edit existing protocol",
   "edit": "edit",

protocol-designer/src/atoms/constants.ts

@@ -0,0 +1,9 @@
+import { css } from 'styled-components'
+import { COLORS } from '@opentrons/components'
+
+export const BUTTON_LINK_STYLE = css`
+  color: ${COLORS.grey60};
+  &:hover {
+    color: ${COLORS.grey40};
+  }
+`

protocol-designer/src/atoms/index.ts

@@ -1 +1 @@
-console.log('atoms for new components')
+export * from './constants'

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

@@ -13,6 +13,7 @@ import {
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { getPipetteSpecsV2 } from '@opentrons/shared-data'
+import { BUTTON_LINK_STYLE } from '../../atoms'
 import { getLabwareDefsByURI } from '../../labware-defs/selectors'
 import type { PipetteMount, PipetteName } from '@opentrons/shared-data'
 import type { FormPipettesByMount, PipetteOnDeck } from '../../step-forms'
@@ -79,6 +80,7 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
           <Btn
             onClick={editClick}
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
+            css={BUTTON_LINK_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">
               {t('edit')}
@@ -92,6 +94,7 @@ export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
                 cleanForm()
               }}
               textDecoration={TYPOGRAPHY.textDecorationUnderline}
+              css={BUTTON_LINK_STYLE}
             >
               <StyledText desktopStyle="bodyDefaultRegular">
                 {t('remove')}

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

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
 import {
   ALIGN_CENTER,
-  Box,
   DeckInfoLabel,
   DIRECTION_COLUMN,
   Flex,
@@ -83,7 +82,11 @@ interface StackInfoListProps {
 function StackInfoList({ title, items }: StackInfoListProps): JSX.Element {
   const pathLocation = useLocation()
   return (
-    <Box width={pathLocation.pathname === '/designer' ? '15.8125rem' : '100%'}>
+    <Flex
+      flexDirection={DIRECTION_COLUMN}
+      width={pathLocation.pathname === '/designer' ? '15.8125rem' : '100%'}
+      gridGap={SPACING.spacing4}
+    >
       {items.length > 0 ? (
         items.map((item, index) => (
           <StackInfo
@@ -95,7 +98,7 @@ function StackInfoList({ title, items }: StackInfoListProps): JSX.Element {
       ) : (
         <StackInfo title={title} />
       )}
-    </Box>
+    </Flex>
   )
 }
 

protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx

@@ -30,8 +30,8 @@ import { getLabwareDefsByURI } from '../../labware-defs/selectors'
 import { setFeatureFlags } from '../../feature-flags/actions'
 import { createCustomTiprackDef } from '../../labware-defs/actions'
 import { useKitchen } from '../../organisms/Kitchen/hooks'
-import { IncompatibleTipsModal } from '../../organisms'
-import { PipetteInfoItem } from '../../organisms/'
+import { IncompatibleTipsModal, PipetteInfoItem } from '../../organisms'
+import { BUTTON_LINK_STYLE } from '../../atoms'
 import { WizardBody } from './WizardBody'
 import { PIPETTE_GENS, PIPETTE_TYPES, PIPETTE_VOLUMES } from './constants'
 import { getTiprackOptions } from './utils'
@@ -373,6 +373,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
                 </StyledText>
                 {has96Channel ? null : (
                   <Btn
+                    css={BUTTON_LINK_STYLE}
                     onClick={() => {
                       const leftPipetteName = pipettesByMount.left.pipetteName
                       const rightPipetteName = pipettesByMount.right.pipetteName

protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

@@ -15,6 +15,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
 } from '@opentrons/components'
 import temporaryImg from '../../assets/images/placeholder_image_delete.png'
+import { BUTTON_LINK_STYLE } from '../../atoms'
 
 interface WizardBodyProps {
   stepNumber: number
@@ -83,11 +84,8 @@ export function WizardBody(props: WizardBodyProps): JSX.Element {
           justifyContent={JUSTIFY_SPACE_BETWEEN}
         >
           {goBack != null ? (
-            <Btn onClick={goBack}>
-              <StyledText
-                desktopStyle="bodyLargeSemiBold"
-                color={COLORS.grey60}
-              >
+            <Btn onClick={goBack} css={BUTTON_LINK_STYLE}>
+              <StyledText desktopStyle="bodyLargeSemiBold">
                 {t('go_back')}
               </StyledText>
             </Btn>