fix(protocol-designer): cleanup and add clear functionality to liquid…

… toolbox This PR updates style according to latest designs and implements missing functionality in LiquidToolbox. Here, I add the ability to clear a specific liquid from its loaded wells from its liquid card, and update some other minor style issues. I also add an InfoScreen if there are no loaded liquids on the selected labware and no wells are selected. Closes RQA-3341
Opentrons · Nov 14, 2024 · 58e627f · 58e627f
1 parent 53aad42
commit 58e627f
Show file tree

Hide file tree

Showing 4 changed files with 243 additions and 174 deletions.
diff --git a/components/src/molecules/InfoScreen/index.tsx b/components/src/molecules/InfoScreen/index.tsx
@@ -1,23 +1,29 @@
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index'
-import { LegacyStyledText } from '../../atoms/StyledText'
+import { SPACING } from '../../ui-style-constants/index'
+import { StyledText } from '../../atoms/StyledText'
 import { Icon } from '../../icons'
 import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_COLUMN } from '../../styles'
+import { ALIGN_CENTER, DIRECTION_COLUMN, JUSTIFY_CENTER } from '../../styles'
 
 interface InfoScreenProps {
   content: string
+  subContent?: string
   backgroundColor?: string
+  height?: string
 }
 
 export function InfoScreen({
   content,
+  subContent,
   backgroundColor = COLORS.grey30,
+  height,
 }: InfoScreenProps): JSX.Element {
   return (
     <Flex
       alignItems={ALIGN_CENTER}
+      justifyContent={JUSTIFY_CENTER}
       width="100%"
+      height={height}
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing12}
       backgroundColor={backgroundColor}
@@ -31,9 +37,18 @@ export function InfoScreen({
         color={COLORS.grey60}
         aria-label="alert"
       />
-      <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-        {content}
-      </LegacyStyledText>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        alignItems={ALIGN_CENTER}
+        gridGap={SPACING.spacing4}
+      >
+        <StyledText desktopStyle="bodyDefaultSemiBold">{content}</StyledText>
+        {subContent != null ? (
+          <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+            {subContent}
+          </StyledText>
+        ) : null}
+      </Flex>
     </Flex>
   )
 }
diff --git a/protocol-designer/src/assets/localization/en/liquids.json b/protocol-designer/src/assets/localization/en/liquids.json
@@ -4,6 +4,7 @@
   "clear_wells": "Clear wells",
   "click_and_drag": "Click and drag to select wells",
   "define_liquid": "Define a liquid",
+  "delete": "Delete",
   "delete_liquid": "Delete liquid",
   "description": "Description",
   "display_color": "Color",
@@ -13,7 +14,9 @@
   "liquids": "Liquids",
   "microliters": "µL",
   "name": "Name",
+  "no_liquids_added": "No liquids added",
   "no_liquids_defined": "No liquids defined",
   "save": "Save",
+  "select_wells_to_add": "Select wells to add liquid",
   "well": "Well"
 }
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidCard.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
-  BORDERS,
+  ALIGN_FLEX_END,
+  Btn,
   COLORS,
+  CURSOR_POINTER,
   DIRECTION_COLUMN,
   Divider,
   Flex,
@@ -13,13 +15,17 @@ import {
   ListItem,
   SPACING,
   StyledText,
+  TEXT_DECORATION_UNDERLINE,
+  Tag,
 } from '@opentrons/components'
 
+import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
+import { removeWellsContents } from '../../labware-ingred/actions'
 import { selectors as labwareIngredSelectors } from '../../labware-ingred/selectors'
 import { getLabwareEntities } from '../../step-forms/selectors'
 import * as wellContentsSelectors from '../../top-selectors/well-contents'
-import { LINE_CLAMP_TEXT_STYLE } from '../../atoms'
 
+import type { SelectedContainerId } from '../../labware-ingred/reducers'
 import type { LiquidInfo } from './LiquidToolbox'
 
 interface LiquidCardProps {
@@ -30,6 +36,7 @@ export function LiquidCard(props: LiquidCardProps): JSX.Element {
   const { info } = props
   const { name, color, liquidIndex } = info
   const { t } = useTranslation('liquids')
+  const dispatch = useDispatch()
   const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const labwareId = useSelector(labwareIngredSelectors.getSelectedLabwareId)
   const labwareEntities = useSelector(getLabwareEntities)
@@ -72,38 +79,74 @@ export function LiquidCard(props: LiquidCardProps): JSX.Element {
     {}
   )
 
+  const handleClearLiquid = (
+    labwareId: SelectedContainerId,
+    wells: string[]
+  ): void => {
+    if (labwareId != null) {
+      dispatch(
+        removeWellsContents({
+          labwareId,
+          wells,
+        })
+      )
+    } else {
+      console.error('Could not clear selected liquid - no labware ID')
+    }
+  }
+
   return (
     <ListItem type="noActive" flexDirection={DIRECTION_COLUMN} key={name}>
       <Flex
+        flexDirection={DIRECTION_COLUMN}
         padding={SPACING.spacing12}
-        alignItems={ALIGN_CENTER}
-        gridGap={SPACING.spacing16}
+        gridGap={SPACING.spacing4}
       >
-        <LiquidIcon color={color ?? ''} size="medium" />
-        <Flex flexDirection={DIRECTION_COLUMN} width="12.375rem">
-          <StyledText
-            desktopStyle="bodyDefaultSemiBold"
-            css={LINE_CLAMP_TEXT_STYLE(3)}
-          >
-            {name}
-          </StyledText>
-          <StyledText
-            desktopStyle="bodyDefaultRegular"
-            css={LINE_CLAMP_TEXT_STYLE(3)}
+        <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing16}>
+          <LiquidIcon color={color} size="medium" />
+          <Flex flexDirection={DIRECTION_COLUMN} width="12.375rem">
+            <StyledText
+              desktopStyle="bodyDefaultSemiBold"
+              css={LINE_CLAMP_TEXT_STYLE(3)}
+            >
+              {name}
+            </StyledText>
+            <StyledText
+              desktopStyle="bodyDefaultRegular"
+              css={LINE_CLAMP_TEXT_STYLE(3)}
+            >
+              {info.liquidIndex != null
+                ? liquidsWithDescriptions[info.liquidIndex].description
+                : null}
+            </StyledText>
+          </Flex>
+          <Flex
+            cursor={CURSOR_POINTER}
+            onClick={() => {
+              setIsExpanded(!isExpanded)
+            }}
           >
-            {info.liquidIndex != null
-              ? liquidsWithDescriptions[info.liquidIndex].description
-              : null}
-          </StyledText>
+            <Icon
+              name={isExpanded ? 'chevron-up' : 'chevron-down'}
+              size="2rem"
+            />
+          </Flex>
         </Flex>
-        <Flex
-          cursor="pointer"
+        <Btn
           onClick={() => {
-            setIsExpanded(!isExpanded)
+            if (labwareId != null) {
+              handleClearLiquid(labwareId, fullWellsByLiquid[info.liquidIndex])
+            }
           }}
+          alignSelf={ALIGN_FLEX_END}
         >
-          <Icon name={isExpanded ? 'chevron-up' : 'chevron-down'} size="2rem" />
-        </Flex>
+          <StyledText
+            desktopStyle="bodyDefaultRegular"
+            textDecoration={TEXT_DECORATION_UNDERLINE}
+          >
+            {t('delete')}
+          </StyledText>
+        </Btn>
       </Flex>
       {isExpanded ? (
         <Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing16}>
@@ -155,17 +198,12 @@ function WellContents(props: WellContentsProps): JSX.Element {
   const { t } = useTranslation('liquids')
 
   return (
-    <Flex gridGap={SPACING.spacing4}>
+    <Flex gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER}>
       <StyledText width="50%" desktopStyle="bodyDefaultRegular">
         {wellName}
       </StyledText>
       <Flex width="50%">
-        <StyledText
-          desktopStyle="bodyDefaultRegular"
-          backgroundColor={`${COLORS.black90}${COLORS.opacity20HexCode}`}
-          padding={`${SPACING.spacing2} ${SPACING.spacing8}`}
-          borderRadius={BORDERS.borderRadius4}
-        >{`${volume} ${t('microliters')}`}</StyledText>
+        <Tag text={`${volume} ${t('microliters')}`} type="default" />
       </Flex>
     </Flex>
   )