fix(components,-protocol-designer): fix order and border radius logic for DeckLabelSet (#17230)

This PR updates the order in which elements of a module/adapter/labware
stack are displayed. The correct order should be top-down, reflecting
the physical orientation of the elements on the deck. Also, this PR
fixes the border radii of each label in the set according to designs.

Closes RQA-3736

Author: ncdiehl11

components/src/organisms/DeckLabelSet/index.tsx

@@ -73,17 +73,17 @@ const StyledBox = styled(Box)<StyledBoxProps>`
 
 const LabelContainer = styled.div`
   padding-left: ${SPACING.spacing12};
-  & > *:not(:first-child):not(:last-child) {
+
+  & > *:first-child {
     border-bottom-right-radius: ${BORDERS.borderRadius4};
-    border-top-right-radius: ${BORDERS.borderRadius4};
   }
 
-  & > *:first-child {
+  & > *:not(:first-child) {
+    border-top-right-radius: ${BORDERS.borderRadius4};
     border-bottom-right-radius: ${BORDERS.borderRadius4};
   }
 
   & > *:last-child {
     border-bottom-left-radius: ${BORDERS.borderRadius4};
-    border-bottom-right-radius: ${BORDERS.borderRadius4};
   }
 `

protocol-designer/src/pages/Designer/DeckSetup/ModuleLabel.tsx

@@ -71,14 +71,14 @@ export const ModuleLabel = (props: ModuleLabelProps): JSX.Element => {
     <DeckLabelSet
       ref={labelContainerRef}
       deckLabels={[
+        ...labwareInfos,
         {
           text: labelName ?? def?.displayName,
           isSelected,
           isLast,
           moduleModel: def?.model,
           isZoomed: isZoomed,
         },
-        ...labwareInfos,
       ]}
       x={
         position[0] +

protocol-designer/src/pages/Designer/DeckSetup/SelectedHoveredItems.tsx

@@ -106,19 +106,20 @@ export const SelectedHoveredItems = (
   const labwareInfos: DeckLabelProps[] = []
 
   if (
-    selectedLabwareDefUri != null &&
-    (hoveredLabware == null || hoveredLabware !== selectedLabwareDefUri)
+    (hoveredLabware != null ||
+      selectedLabwareDefUri === hoveredLabware ||
+      selectedNestedLabwareDefUri === hoveredLabware) &&
+    hoveredLabwareDef != null
   ) {
-    const def =
-      defs[selectedLabwareDefUri] ?? customLabwareDefs[selectedLabwareDefUri]
-    const selectedLabwareLabel = {
-      text: def.metadata.displayName,
-      isSelected: true,
-      isLast: hoveredLabware == null && selectedNestedLabwareDefUri == null,
+    const hoverlLabwareLabel = {
+      text: hoveredLabwareDef.metadata.displayName,
+      isSelected: false,
+      isLast: true,
       isZoomed: true,
     }
-    labwareInfos.push(selectedLabwareLabel)
+    labwareInfos.push(hoverlLabwareLabel)
   }
+
   if (selectedNestedLabwareDef != null && hoveredLabware == null) {
     const selectedNestedLabwareLabel = {
       text: selectedNestedLabwareDef.metadata.displayName,
@@ -129,18 +130,18 @@ export const SelectedHoveredItems = (
     labwareInfos.push(selectedNestedLabwareLabel)
   }
   if (
-    (hoveredLabware != null ||
-      selectedLabwareDefUri === hoveredLabware ||
-      selectedNestedLabwareDefUri === hoveredLabware) &&
-    hoveredLabwareDef != null
+    selectedLabwareDefUri != null &&
+    (hoveredLabware == null || hoveredLabware !== selectedLabwareDefUri)
   ) {
-    const hoverLabelLabel = {
-      text: hoveredLabwareDef.metadata.displayName,
-      isSelected: false,
-      isLast: true,
+    const def =
+      defs[selectedLabwareDefUri] ?? customLabwareDefs[selectedLabwareDefUri]
+    const selectedLabwareLabel = {
+      text: def.metadata.displayName,
+      isSelected: true,
+      isLast: hoveredLabware == null && selectedNestedLabwareDefUri == null,
       isZoomed: true,
     }
-    labwareInfos.push(hoverLabelLabel)
+    labwareInfos.push(selectedLabwareLabel)
   }
 
   return (
@@ -199,6 +200,7 @@ export const SelectedHoveredItems = (
         slotPosition={slotPosition}
         moduleModel={selectedModuleModel}
         hoveredLabware={hoveredLabware}
+        showLabel={selectedNestedLabwareDef == null}
       />
       <SelectedLabwareRender
         labwareOnDeck={matchingSelectedNestedLabwareOnDeck}
@@ -208,8 +210,7 @@ export const SelectedHoveredItems = (
         hoveredLabware={hoveredLabware}
         nestedLabwareInfo={[
           {
-            text:
-              selectedNestedLabwareDef?.metadata.displayName ?? 'unknown name',
+            text: selectedLabwareDef?.metadata.displayName ?? 'unknown name',
             isSelected: true,
             isLast: true,
             isZoomed: true,

protocol-designer/src/pages/Designer/DeckSetup/SelectedLabwareRender.tsx

@@ -16,6 +16,7 @@ interface SelectedLabwareRenderProps {
   hoveredLabware: string | null
   labwareOnDeck?: LabwareOnDeck
   nestedLabwareInfo?: DeckLabelProps[] | undefined
+  showLabel?: boolean
 }
 export function SelectedLabwareRender(
   props: SelectedLabwareRenderProps
@@ -27,6 +28,7 @@ export function SelectedLabwareRender(
     moduleModel,
     hoveredLabware,
     nestedLabwareInfo,
+    showLabel = true,
   } = props
 
   return (labwareOnDeck != null || labwareDef != null) &&
@@ -48,9 +50,9 @@ export function SelectedLabwareRender(
           labwareOnDeck={labwareOnDeck}
         />
       ) : null}
-      {labwareDef != null ? (
+      {labwareDef != null && showLabel ? (
         <LabwareLabel
-          isLast={true}
+          isLast
           isSelected={true}
           labwareDef={labwareDef}
           position={slotPosition}

protocol-designer/src/pages/Designer/DeckSetup/__tests__/SelectedHoveredItems.test.tsx

@@ -158,7 +158,7 @@ describe('SelectedHoveredItems', () => {
       screen.getAllByText(
         'Fixture Opentrons Universal Flat Heater-Shaker Adapter'
       )
-    ).toHaveLength(3)
+    ).toHaveLength(2)
   })
   it('renders nothing when there is a hovered module but selected fixture', () => {
     props.hoveredModule = HEATERSHAKER_MODULE_V1

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

@@ -30,13 +30,13 @@ export const LabwareLabel = (props: LabwareLabelProps): JSX.Element => {
   const [labelContainerHeight, setLabelContainerHeight] = useState(0)
 
   const deckLabels = [
-    ...nestedLabwareInfo,
     {
       text: labelText,
       isSelected: isSelected,
       isLast: isLast,
       isZoomed: designerTab === 'startingDeck',
     },
+    ...nestedLabwareInfo,
   ]
 
   useEffect(() => {