fix(protocol-designer): update logic for ProtocolNavBar dropshadow (#…

…16871)

We only want to show the ProtocolNavBar dropshadow if we are zoomed in
on a slot, to add liquid,
hardware, or labware. This PR also refactors the logic used for text
copy and alignment in the
NavBar, consolidating `hasZoomInSlot` and `isAddingHardwareOrLabware`
props.

Closes RQA-3340

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

@@ -23,6 +23,7 @@ export function DisabledScreen(): JSX.Element {
       backgroundColor={`${COLORS.black90}${COLORS.opacity40HexCode}`}
       overflow={OVERFLOW_HIDDEN}
       noPadding
+      zIndexOverlay={15}
     >
       <Flex
         flexDirection={DIRECTION_COLUMN}

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

@@ -47,7 +47,6 @@ describe('ProtocolNavBar', () => {
       ] as TabProps[],
       hasTrashEntity: false,
       showLiquidOverflowMenu: vi.fn(),
-      isAddingHardwareOrLabware: false,
     }
     vi.mocked(getFileMetadata).mockReturnValue({
       protocolName: 'mockProtocolName',
@@ -73,14 +72,14 @@ describe('ProtocolNavBar', () => {
   })
 
   it('should render protocol name and add hardware/labware - protocol name', () => {
-    props = { ...props, isAddingHardwareOrLabware: true }
+    props = { ...props, hasZoomInSlot: true }
     render(props)
     screen.getByText('mockProtocolName')
     screen.getByText('Add hardware/labware')
   })
 
   it('should render protocol name and add hardware/labware - no protocol name', () => {
-    props = { ...props, isAddingHardwareOrLabware: true }
+    props = { ...props, hasZoomInSlot: true }
     vi.mocked(getFileMetadata).mockReturnValue({})
     render(props)
     screen.getByText('Untitled protocol')

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

@@ -29,48 +29,45 @@ interface ProtocolNavBarProps {
   tabs?: TabProps[]
   hasTrashEntity?: boolean
   showLiquidOverflowMenu?: (liquidOverflowMenu: boolean) => void
-  isAddingHardwareOrLabware?: boolean
   liquidPage?: boolean
-  isOffDeck?: boolean
 }
 
 export function ProtocolNavBar({
   hasZoomInSlot,
-  isAddingHardwareOrLabware = false,
   tabs = [],
   hasTrashEntity,
   showLiquidOverflowMenu,
   liquidPage = false,
-  isOffDeck = false,
 }: ProtocolNavBarProps): JSX.Element {
   const { t } = useTranslation('starting_deck_state')
   const metadata = useSelector(getFileMetadata)
   const { makeSnackbar } = useKitchen()
   const navigate = useNavigate()
   const dispatch = useDispatch()
 
+  const showProtocolEditButtons = !(hasZoomInSlot || liquidPage)
+
+  let metadataText = t('edit_protocol')
+  if (liquidPage) {
+    metadataText = t('add_liquid')
+  } else if (hasZoomInSlot) {
+    metadataText = t('add_hardware_labware')
+  }
   return (
-    <NavContainer>
-      {hasZoomInSlot ? null : <Tabs tabs={tabs} />}
+    <NavContainer showShadow={!showProtocolEditButtons}>
+      {showProtocolEditButtons ? <Tabs tabs={tabs} /> : null}
 
-      <MetadataContainer isAddingHardwareOrLabware={isAddingHardwareOrLabware}>
+      <MetadataContainer showProtocolEditButtons={showProtocolEditButtons}>
         <StyledText
           desktopStyle="bodyDefaultSemiBold"
           css={LINE_CLAMP_TEXT_STYLE(1)}
-          textAlign={isOffDeck && TYPOGRAPHY.textAlignLeft}
         >
           {metadata?.protocolName != null && metadata?.protocolName !== ''
             ? metadata?.protocolName
             : t('untitled_protocol')}
         </StyledText>
-        <StyledText
-          desktopStyle="bodyDefaultRegular"
-          color={COLORS.grey60}
-          textAlign={isOffDeck && TYPOGRAPHY.textAlignLeft}
-        >
-          {isAddingHardwareOrLabware || isOffDeck
-            ? t('add_hardware_labware')
-            : t('edit_protocol')}
+        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+          {metadataText}
         </StyledText>
       </MetadataContainer>
 
@@ -98,26 +95,30 @@ export function ProtocolNavBar({
   )
 }
 
-const NavContainer = styled(Flex)`
+const NavContainer = styled(Flex)<{ showShadow: boolean }>`
+  z-index: 11;
   padding: ${SPACING.spacing12};
   width: 100%;
   justify-content: ${JUSTIFY_SPACE_BETWEEN};
   align-items: ${ALIGN_CENTER};
-  box-shadow: 0px 1px 3px 0px ${COLORS.black90}${COLORS.opacity20HexCode};
+  box-shadow: ${props =>
+    props.showShadow
+      ? `0px 1px 3px 0px ${COLORS.black90}${COLORS.opacity20HexCode}`
+      : 'none'};
 `
 
 interface MetadataProps extends StyleProps {
-  isAddingHardwareOrLabware: boolean
+  showProtocolEditButtons: boolean
 }
 const MetadataContainer = styled.div.withConfig<MetadataProps>({
-  shouldForwardProp: p => isntStyleProp(p) && p !== 'isAddingHardwareOrLabware',
+  shouldForwardProp: p => isntStyleProp(p) && p !== 'showProtocolEditButtons',
 })<MetadataProps>`
   display: flex;
   flex-direction: ${DIRECTION_COLUMN};
   text-align: ${props =>
-    props.isAddingHardwareOrLabware === true
-      ? TYPOGRAPHY.textAlignLeft
-      : TYPOGRAPHY.textAlignCenter};
+    props.showProtocolEditButtons === true
+      ? TYPOGRAPHY.textAlignCenter
+      : TYPOGRAPHY.textAlignLeft};
 
   // For screens between 600px and 767px, set width to 88px
   @media only screen and (max-width: 767px) {

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

@@ -151,14 +151,10 @@ export function Designer(): JSX.Element {
       ) : null}
       <Flex flexDirection={DIRECTION_COLUMN}>
         <ProtocolNavBar
-          hasZoomInSlot={zoomIn.slot != null}
-          isAddingHardwareOrLabware={
-            zoomIn.slot != null && zoomIn.cutout != null
-          }
+          hasZoomInSlot={zoomIn.slot != null || zoomIn.cutout != null}
           hasTrashEntity={hasTrashEntity}
           showLiquidOverflowMenu={showLiquidOverflowMenu}
           tabs={[startingDeckTab, protocolStepTab]}
-          isOffDeck={deckView !== leftString}
         />
 
         {tab === 'startingDeck' ? (