refactor(protocol-designer): properly disable correct StepList buttons (

#13111) closes RQA-1081 and RQA-1075 and RQA-1074
Opentrons · Jul 19, 2023 · a211d08 · a211d08
1 parent d8e9d55
commit a211d08
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 64 deletions.
diff --git a/protocol-designer/src/components/StepCreationButton.tsx b/protocol-designer/src/components/StepCreationButton.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import cx from 'classnames'
 import {
   Tooltip,
   DeprecatedPrimaryButton,
@@ -72,31 +71,26 @@ export const StepCreationButtonComponent = (
 
 export interface StepButtonItemProps {
   onClick: () => unknown
-  disabled: boolean
   stepType: StepType
 }
 
 export function StepButtonItem(props: StepButtonItemProps): JSX.Element {
-  const { onClick, disabled, stepType } = props
+  const { onClick, stepType } = props
   const [targetProps, tooltipProps] = useHoverTooltip({
     placement: TOOLTIP_RIGHT,
     strategy: TOOLTIP_FIXED,
   })
-  const tooltipMessage = disabled
-    ? i18n.t(`tooltip.disabled_module_step`)
-    : i18n.t(`tooltip.step_description.${stepType}`)
+  const tooltipMessage = i18n.t(`tooltip.step_description.${stepType}`)
   return (
     <>
-      <DeprecatedPrimaryButton
-        hoverTooltipHandlers={targetProps}
-        onClick={onClick}
-        iconName={stepIconsByType[stepType]}
-        className={cx({
-          [styles.step_button_disabled]: disabled,
-        })}
-      >
-        {i18n.t(`application.stepType.${stepType}`, stepType)}
-      </DeprecatedPrimaryButton>
+      <div {...targetProps}>
+        <DeprecatedPrimaryButton
+          onClick={onClick}
+          iconName={stepIconsByType[stepType]}
+        >
+          {i18n.t(`application.stepType.${stepType}`, stepType)}
+        </DeprecatedPrimaryButton>
+      </div>
       <Tooltip {...tooltipProps}>{tooltipMessage}</Tooltip>
     </>
   )
@@ -150,22 +144,23 @@ export const StepCreationButton = (): JSX.Element => {
   ): ReturnType<typeof stepsActions.addAndSelectStepWithHints> =>
     dispatch(stepsActions.addAndSelectStepWithHints({ stepType }))
 
-  const items = getSupportedSteps().map(stepType => (
-    <StepButtonItem
-      key={stepType}
-      stepType={stepType}
-      disabled={!isStepTypeEnabled[stepType]}
-      onClick={() => {
-        setExpanded(false)
+  const items = getSupportedSteps()
+    .filter(stepType => isStepTypeEnabled[stepType])
+    .map(stepType => (
+      <StepButtonItem
+        key={stepType}
+        stepType={stepType}
+        onClick={() => {
+          setExpanded(false)
 
-        if (currentFormIsPresaved || formHasChanges) {
-          setEnqueuedStepType(stepType)
-        } else {
-          addStep(stepType)
-        }
-      }}
-    />
-  ))
+          if (currentFormIsPresaved || formHasChanges) {
+            setEnqueuedStepType(stepType)
+          } else {
+            addStep(stepType)
+          }
+        }}
+      />
+    ))
 
   return (
     <>

diff --git a/protocol-designer/src/components/__tests__/StepCreationButton.test.tsx b/protocol-designer/src/components/__tests__/StepCreationButton.test.tsx
@@ -118,20 +118,13 @@ describe('StepCreationButton', () => {
       })
       wrapper.update()
       const updatedAddStepButton = wrapper.find(StepCreationButtonComponent)
-      // all 6 step button items render as children
+      // all 8 step button items render as children
       const stepButtonItems = updatedAddStepButton.find(StepButtonItem)
-      expect(stepButtonItems).toHaveLength(8)
-      // modules are disabled since there are no modules on deck
-      const disabledModuleSteps = stepButtonItems.find({ disabled: true })
-      expect(disabledModuleSteps).toHaveLength(4)
+      //  length 4 since there are no modules on deck
+      expect(stepButtonItems).toHaveLength(4)
       // enabled button tooltip
       const mixTooltip = stepButtonItems.at(2).find(Tooltip)
       expect(mixTooltip.prop('children')).toBe('Mix contents of wells/tubes.')
-      // disabled module step button tooltip
-      const disabledButtonTooltip = stepButtonItems.at(4).find(Tooltip)
-      expect(disabledButtonTooltip.prop('children')).toBe(
-        'Add a relevant module to use this step'
-      )
     })
 
     it('enables module step types when present on the deck', () => {
@@ -158,12 +151,10 @@ describe('StepCreationButton', () => {
       wrapper.update()
       const updatedAddStepButton = wrapper.find(StepCreationButtonComponent)
       const stepButtonItems = updatedAddStepButton.find(StepButtonItem)
-
-      // temperature step enabled since it is on the deck
-      const disabledModuleSteps = stepButtonItems.find({ disabled: true })
-      expect(disabledModuleSteps).toHaveLength(3)
+      //  length 5 since there is a temperature module on deck
+      expect(stepButtonItems).toHaveLength(5)
       // enabled temperature module step tooltip
-      const enabledButtonTooltip = stepButtonItems.at(6).find(Tooltip)
+      const enabledButtonTooltip = stepButtonItems.at(4).find(Tooltip)
       expect(enabledButtonTooltip.prop('children')).toBe(
         'Set temperature command for Temperature module.'
       )

diff --git a/protocol-designer/src/components/listButtons.css b/protocol-designer/src/components/listButtons.css
@@ -1,7 +1,7 @@
 @import '@opentrons/components';
 
 .list_item_button {
-  z-index: 11;
+  z-index: 10;
   position: relative;
   padding: 1rem 2rem 1.25rem 2rem;
 }

diff --git a/protocol-designer/src/components/steplist/StepList.tsx b/protocol-designer/src/components/steplist/StepList.tsx
@@ -48,22 +48,20 @@ export class StepList extends React.Component<StepListProps> {
 
   render(): React.ReactNode {
     return (
-      <React.Fragment>
-        <SidePanel title="Protocol Timeline">
-          <MultiSelectToolbar
-            isMultiSelectMode={Boolean(this.props.isMultiSelectMode)}
-          />
+      <SidePanel title="Protocol Timeline">
+        <MultiSelectToolbar
+          isMultiSelectMode={Boolean(this.props.isMultiSelectMode)}
+        />
 
-          <StartingDeckStateTerminalItem />
-          <DraggableStepItems
-            orderedStepIds={this.props.orderedStepIds.slice()}
-            reorderSteps={this.props.reorderSteps}
-          />
-          <PresavedStepItem />
-          <StepCreationButton />
-          <TerminalItem id={END_TERMINAL_ITEM_ID} title={END_TERMINAL_TITLE} />
-        </SidePanel>
-      </React.Fragment>
+        <StartingDeckStateTerminalItem />
+        <DraggableStepItems
+          orderedStepIds={this.props.orderedStepIds.slice()}
+          reorderSteps={this.props.reorderSteps}
+        />
+        <PresavedStepItem />
+        <StepCreationButton />
+        <TerminalItem id={END_TERMINAL_ITEM_ID} title={END_TERMINAL_TITLE} />
+      </SidePanel>
     )
   }
 }
diff --git a/protocol-designer/src/localization/en/tooltip.json b/protocol-designer/src/localization/en/tooltip.json
@@ -15,8 +15,6 @@
     "heaterShaker": "Set heat, shake, or labware latch commands for the Heater-Shaker module"
   },
 
-  "disabled_module_step": "Add a relevant module to use this step",
-
   "step_fields": {
     "defaults": {
       "aspirate_airGap_checkbox": "Aspirate air before moving to next well",