feat(protocol-designer): createFileWizard now accommodates MoaM for F…

…lex temp closes AUTH-15
Opentrons · Apr 5, 2024 · 5158943 · 5158943
1 parent e4797d2
commit 5158943
Show file tree

Hide file tree

Showing 11 changed files with 626 additions and 196 deletions.
diff --git a/protocol-designer/src/components/DeckSetup/index.tsx b/protocol-designer/src/components/DeckSetup/index.tsx
@@ -162,7 +162,6 @@ export const DeckSetupContents = (props: ContentsProps): JSX.Element => {
   }, [])
 
   const allModules: ModuleOnDeck[] = values(activeDeckSetup.modules)
-
   // NOTE: naively hard-coded to show warning north of slots 1 or 3 when occupied by any module
   const multichannelWarningSlotIds: AddressableAreaName[] = showGen1MultichannelCollisionWarnings
     ? compact([

diff --git a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx
@@ -15,48 +15,38 @@ import {
   TYPOGRAPHY,
   useHoverTooltip,
   Tooltip,
+  DIRECTION_COLUMN,
+  Box,
 } from '@opentrons/components'
 import type { StyleProps } from '@opentrons/components'
 import type { RobotType } from '@opentrons/shared-data'
 
-const EQUIPMENT_OPTION_STYLE = css`
-  background-color: ${COLORS.white};
-  border-radius: ${BORDERS.borderRadius8};
-  border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
-
+const ARROW_STYLE = css`
+  color: ${COLORS.grey50};
+  cursor: pointer;
   &:hover {
-    background-color: ${COLORS.grey10};
-    border: 1px ${BORDERS.styleSolid} ${COLORS.grey35};
-  }
-
-  &:focus {
-    outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
-    outline-offset: 3px;
+    color: ${COLORS.black80};
   }
 `
 
-const EQUIPMENT_OPTION_SELECTED_STYLE = css`
-  ${EQUIPMENT_OPTION_STYLE}
-  background-color: ${COLORS.blue10};
-  border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
-
+const ARROW_STYLE_ACTIVE = css`
+  color: ${COLORS.blue50};
+  cursor: pointer;
   &:hover {
-    background-color: ${COLORS.blue10};
-    border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
-    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
+    color: ${COLORS.black80};
   }
 `
 
-const EQUIPMENT_OPTION_DISABLED_STYLE = css`
-  ${EQUIPMENT_OPTION_STYLE}
-  background-color: ${COLORS.white};
-  border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
-
-  &:hover {
-    background-color: ${COLORS.white};
-    border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
-  }
+const ARROW_STYLE_DISABLED = css`
+  color: ${COLORS.grey50};
 `
+
+interface MultiplesProps {
+  numItems: number
+  maxItems: number
+  setValue: (num: number) => void
+  isDisabled: boolean
+}
 interface EquipmentOptionProps extends StyleProps {
   onClick: React.MouseEventHandler
   isSelected: boolean
@@ -65,6 +55,7 @@ interface EquipmentOptionProps extends StyleProps {
   image?: React.ReactNode
   showCheckbox?: boolean
   disabled?: boolean
+  multiples?: MultiplesProps
 }
 export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
   const {
@@ -75,10 +66,51 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
     showCheckbox = false,
     disabled = false,
     robotType,
+    multiples,
     ...styleProps
   } = props
-  const { t } = useTranslation('tooltip')
-  const [targetProps, tooltipProps] = useHoverTooltip()
+  const { t } = useTranslation(['tooltip', 'shared'])
+  const [equipmentTargetProps, equipmentTooltipProps] = useHoverTooltip()
+  const [tempTargetProps, tempTooltipProps] = useHoverTooltip()
+  const [numMultiples, setNum] = React.useState<number>(0)
+
+  const EQUIPMENT_OPTION_STYLE = css`
+    background-color: ${COLORS.white};
+    border-radius: ${BORDERS.borderRadius8};
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+
+    &:hover {
+      background-color: ${multiples ? COLORS.white : COLORS.grey10};
+      border: 1px ${BORDERS.styleSolid}
+        ${multiples ? COLORS.grey30 : COLORS.grey35};
+    }
+
+    &:focus {
+      outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
+      outline-offset: 3px;
+    }
+  `
+
+  const EQUIPMENT_OPTION_SELECTED_STYLE = css`
+    ${EQUIPMENT_OPTION_STYLE}
+    background-color: ${COLORS.blue10};
+    border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+
+    &:hover {
+      border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
+      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
+    }
+  `
+
+  const EQUIPMENT_OPTION_DISABLED_STYLE = css`
+    ${EQUIPMENT_OPTION_STYLE}
+    background-color: ${COLORS.white};
+    border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+
+    &:hover {
+      border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
+    }
+  `
 
   let equipmentOptionStyle
   if (disabled) {
@@ -102,6 +134,66 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
     )
   } else if (showCheckbox && disabled) {
     iconInfo = <Flex width="1.5rem" />
+  } else if (multiples != null) {
+    const { numItems, maxItems, isDisabled } = multiples
+    let upArrowCSS = ARROW_STYLE
+    if (isDisabled || numItems === maxItems) {
+      upArrowCSS = ARROW_STYLE_DISABLED
+    } else if (numItems > 0) {
+      upArrowCSS = ARROW_STYLE_ACTIVE
+    }
+    let downArrowCSS = ARROW_STYLE
+    if (numItems === 0) {
+      downArrowCSS = ARROW_STYLE_DISABLED
+    } else if (numItems > 0) {
+      downArrowCSS = ARROW_STYLE_ACTIVE
+    }
+
+    iconInfo = (
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        gridGap={SPACING.spacing4}
+        width="1.5rem"
+        alignItems={ALIGN_CENTER}
+      >
+        <Flex
+          {...tempTargetProps}
+          data-testid="EquipmentOption_upArrow"
+          onClick={
+            numMultiples === 7
+              ? undefined
+              : () => {
+                  multiples.setValue(numMultiples + 1)
+                  setNum(numMultiples + 1)
+                }
+          }
+        >
+          <Icon css={upArrowCSS} size={SPACING.spacing12} name="ot-arrow-up" />
+        </Flex>
+        <Flex
+          data-testid="EquipmentOption_downArrow"
+          onClick={
+            numMultiples === 0
+              ? undefined
+              : () => {
+                  multiples.setValue(numMultiples - 1)
+                  setNum(numMultiples - 1)
+                }
+          }
+        >
+          <Icon
+            css={downArrowCSS}
+            size={SPACING.spacing12}
+            name="ot-arrow-down"
+          />
+        </Flex>
+        {isDisabled || numMultiples === 7 ? (
+          <Tooltip {...tempTooltipProps}>
+            {t('not_enough_space_for_temp')}
+          </Tooltip>
+        ) : null}
+      </Flex>
+    )
   }
 
   return (
@@ -117,31 +209,53 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
             : BORDERS.lineBorder
         }
         borderRadius={BORDERS.borderRadius8}
-        cursor={disabled ? 'auto' : 'pointer'}
+        cursor={disabled || multiples != null ? 'auto' : 'pointer'}
         backgroundColor={disabled ? COLORS.grey30 : COLORS.transparent}
         onClick={disabled ? undefined : onClick}
         {...styleProps}
-        {...targetProps}
+        {...equipmentTargetProps}
         css={equipmentOptionStyle}
       >
         {iconInfo}
         <Flex
+          css={css`
+            user-select: none;
+          `}
           justifyContent={JUSTIFY_CENTER}
           alignItems={ALIGN_CENTER}
           marginRight={SPACING.spacing16}
         >
           {image}
         </Flex>
-        <Text
-          as="p"
-          fontSize={TYPOGRAPHY.fontSizeP}
-          color={disabled ? COLORS.grey50 : COLORS.black90}
-        >
-          {text}
-        </Text>
+        <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+          <Text
+            css={css`
+              user-select: none;
+            `}
+            as="p"
+            fontSize={TYPOGRAPHY.fontSizeP}
+            color={disabled ? COLORS.grey50 : COLORS.black90}
+          >
+            {text}
+          </Text>
+          {multiples != null ? (
+            <>
+              <Box borderBottom={BORDERS.lineBorder} data-testid="line" />
+              <Flex
+                alignItems={ALIGN_CENTER}
+                justifyContent={JUSTIFY_CENTER}
+                fontSize={TYPOGRAPHY.fontSizeP}
+                gridGap={SPACING.spacing4}
+              >
+                <Text>{t('shared:amount')}</Text>
+                <Text>{multiples.numItems}</Text>
+              </Flex>
+            </>
+          ) : null}
+        </Flex>
       </Flex>
       {disabled ? (
-        <Tooltip {...tooltipProps}>
+        <Tooltip {...equipmentTooltipProps}>
           {t(
             robotType === FLEX_ROBOT_TYPE
               ? 'disabled_no_space_additional_items'

diff --git a/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx b/protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx
@@ -8,7 +8,6 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  RESPONSIVENESS,
   SPACING,
   TYPOGRAPHY,
   DISPLAY_INLINE_BLOCK,
@@ -60,10 +59,6 @@ function Input(props: InputFieldProps): JSX.Element {
     border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.grey30};
     font-size: ${TYPOGRAPHY.fontSizeP};
 
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: 0;
-    }
-
     &:active {
       border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
     }