fix some additional logic with the toolbox responsiveness

Opentrons · Sep 29, 2024 · 1b99fd1 · 1b99fd1
1 parent 00ca006
commit 1b99fd1
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 38 deletions.
diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -35,5 +35,6 @@
   "starting_deck_state": "Starting deck state",
   "temperature": "Temperature",
   "time": "Time",
-  "view_commands": "View commands"
+  "view_commands": "View commands",
+  "view_details": "View step details"
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx
@@ -1,5 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+import { useConditionalConfirm } from '@opentrons/components'
 import * as timelineWarningSelectors from '../../../../top-selectors/timelineWarnings'
 import { selectors as dismissSelectors } from '../../../../dismiss'
 import { selectors as stepFormSelectors } from '../../../../step-forms'
@@ -11,7 +12,11 @@ import {
   getSelectedStepId,
 } from '../../../../ui/steps'
 import { selectors as fileDataSelectors } from '../../../../file-data'
-
+import {
+  CLOSE_STEP_FORM_WITH_CHANGES,
+  CLOSE_UNSAVED_STEP_FORM,
+  ConfirmDeleteModal,
+} from '../../../../components/modals/ConfirmDeleteModal'
 import { stepIconsByType } from '../../../../form-types'
 import { getOrderedStepIds } from '../../../../step-forms/selectors'
 import { StepContainer } from './StepContainer'
@@ -20,6 +25,7 @@ import type { ThunkDispatch } from 'redux-thunk'
 import type { HoverOnStepAction } from '../../../../ui/steps'
 import type { StepIdType } from '../../../../form-types'
 import type { BaseState, ThunkAction } from '../../../../types'
+import type { DeleteModalType } from '../../../../components/modals/ConfirmDeleteModal'
 
 export interface ConnectedStepInfoProps {
   stepId: StepIdType
@@ -57,7 +63,12 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
   const selected: boolean = multiSelectItemIds?.length
     ? multiSelectItemIds.includes(stepId)
     : selectedStepId === stepId
-
+  const currentFormIsPresaved = useSelector(
+    stepFormSelectors.getCurrentFormIsPresaved
+  )
+  const singleEditFormHasUnsavedChanges = useSelector(
+    stepFormSelectors.getCurrentFormHasUnsavedChanges
+  )
   const selectStep = (): ThunkAction<any> =>
     dispatch(stepsActions.selectStep(stepId))
   const selectStepOnDoubleClick = (): ThunkAction<any> =>
@@ -67,23 +78,49 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
   const unhighlightStep = (): HoverOnStepAction =>
     dispatch(stepsActions.hoverOnStep(null))
 
+  const handleStepItemSelection = (): void => {
+    selectStepOnDoubleClick()
+  }
+
+  const { confirm, showConfirmation, cancel } = useConditionalConfirm(
+    handleStepItemSelection,
+    currentFormIsPresaved || singleEditFormHasUnsavedChanges
+  )
+
+  const getModalType = (): DeleteModalType => {
+    if (currentFormIsPresaved) {
+      return CLOSE_UNSAVED_STEP_FORM
+    } else {
+      return CLOSE_STEP_FORM_WITH_CHANGES
+    }
+  }
+
   const iconName = stepIconsByType[step.stepType]
 
   return (
-    <StepContainer
-      hasError={hasError}
-      isStepAfterError={stepAfterError}
-      stepId={stepId}
-      onMouseLeave={unhighlightStep}
-      selected={selected}
-      onDoubleClick={selectStepOnDoubleClick}
-      onClick={selectStep}
-      hovered={hoveredStep === stepId && !hoveredSubstep}
-      onMouseEnter={highlightStep}
-      iconName={hasError || hasWarnings ? 'alert-circle' : iconName}
-      title={`${stepNumber}. ${
-        step.stepName || t(`stepType.${step.stepType}`)
-      }`}
-    />
+    <>
+      {showConfirmation && (
+        <ConfirmDeleteModal
+          modalType={getModalType()}
+          onContinueClick={confirm}
+          onCancelClick={cancel}
+        />
+      )}
+      <StepContainer
+        hasError={hasError}
+        isStepAfterError={stepAfterError}
+        stepId={stepId}
+        onMouseLeave={unhighlightStep}
+        selected={selected}
+        onDoubleClick={confirm}
+        onClick={selectStep}
+        hovered={hoveredStep === stepId && !hoveredSubstep}
+        onMouseEnter={highlightStep}
+        iconName={hasError || hasWarnings ? 'alert-circle' : iconName}
+        title={`${stepNumber}. ${
+          step.stepName || t(`stepType.${step.stepType}`)
+        }`}
+      />
+    </>
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
 import {
   ALIGN_CENTER,
@@ -11,21 +10,17 @@ import {
   CURSOR_POINTER,
   Flex,
   Icon,
-  JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
   JUSTIFY_START,
   OverflowBtn,
   SPACING,
   StyledText,
 } from '@opentrons/components'
-import { getUnsavedForm } from '../../../../step-forms/selectors'
 import { getTopPortalEl } from '../../../../components/portals/TopPortal'
 import { StepOverflowMenu } from './StepOverflowMenu'
 import { capitalizeFirstLetterAfterNumber } from './utils'
 
 import type { IconName } from '@opentrons/components'
-import { cancelStepForm } from '../../../../steplist/actions'
-import { ThunkDispatch } from '../../../../types'
 
 const STARTING_DECK_STATE = 'Starting deck state'
 const FINAL_DECK_STATE = 'Final deck state'
@@ -60,8 +55,6 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
     hasError = false,
     isStepAfterError = false,
   } = props
-  const formData = useSelector(getUnsavedForm)
-  const dispatch = useDispatch<ThunkDispatch<any>>()
   const [top, setTop] = React.useState<number>(0)
   const menuRootRef = React.useRef<HTMLDivElement | null>(null)
   const [stepOverflowMenu, setStepOverflowMenu] = React.useState<boolean>(false)
@@ -130,7 +123,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
           onClick={onClick}
           padding={SPACING.spacing12}
           borderRadius={BORDERS.borderRadius8}
-          width={formData != null ? '6rem' : '100%'}
+          width="100%"
           backgroundColor={backgroundColor}
           color={color}
           opacity={isStepAfterError ? '50%' : '100%'}
@@ -144,19 +137,17 @@ export function StepContainer(props: StepContainerProps): JSX.Element {
             <Flex
               alignItems={ALIGN_CENTER}
               gridGap={SPACING.spacing8}
-              justifyContent={formData != null ? JUSTIFY_CENTER : JUSTIFY_START}
+              justifyContent={JUSTIFY_START}
               width="100%"
             >
               {iconName && (
                 <Icon size="1rem" name={iconName} color={iconColor ?? color} />
               )}
-              {formData != null ? null : (
-                <StyledText desktopStyle="bodyDefaultRegular">
-                  {capitalizeFirstLetterAfterNumber(title)}
-                </StyledText>
-              )}
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {capitalizeFirstLetterAfterNumber(title)}
+              </StyledText>
             </Flex>
-            {selected && !isStartingOrEndingState && formData == null ? (
+            {selected && !isStartingOrEndingState ? (
               <OverflowBtn
                 data-testid={`StepContainer_${stepId}`}
                 fillColor={COLORS.white}

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx
@@ -25,6 +25,7 @@ import {
 import {
   getCurrentFormHasUnsavedChanges,
   getCurrentFormIsPresaved,
+  getUnsavedForm,
 } from '../../../../step-forms/selectors'
 import type * as React from 'react'
 import type { ThunkDispatch } from 'redux-thunk'
@@ -46,6 +47,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
   const deleteStep = (stepId: StepIdType): void => {
     dispatch(steplistActions.deleteStep(stepId))
   }
+  const formData = useSelector(getUnsavedForm)
   const currentFormIsPresaved = useSelector(getCurrentFormIsPresaved)
   const singleEditFormHasUnsavedChanges = useSelector(
     getCurrentFormHasUnsavedChanges
@@ -99,20 +101,24 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element {
           e.stopPropagation()
         }}
       >
-        <MenuButton onClick={confirm}>{t('edit_step')}</MenuButton>
+        {formData != null ? null : (
+          <MenuButton onClick={confirm}>{t('edit_step')}</MenuButton>
+        )}
         <MenuButton
+          disabled={formData != null}
           onClick={() => {
             console.log('wire this up')
           }}
         >
           {t('view_commands')}
         </MenuButton>
         <MenuButton
+          disabled={formData != null}
           onClick={() => {
             console.log('wire this up')
           }}
         >
-          {t('add_details')}
+          {t('view_details')}
         </MenuButton>
         <MenuButton
           onClick={() => {

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -61,7 +61,7 @@ export const TimelineToolbox = (): JSX.Element => {
 
   return (
     <Toolbox
-      width={formData != null ? '8rem' : '19.5rem'}
+      width="19.5rem"
       height={formData != null ? FLEX_MAX_CONTENT : 'calc(100vh - 78px)'}
       side="left"
       horizontalSide={formData != null ? 'top' : 'bottom'}

diff --git a/...ol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx b/...ol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx
@@ -10,6 +10,7 @@ import { StepOverflowMenu } from '../StepOverflowMenu'
 import {
   getCurrentFormHasUnsavedChanges,
   getCurrentFormIsPresaved,
+  getUnsavedForm,
 } from '../../../../../step-forms/selectors'
 import type * as React from 'react'
 
@@ -35,6 +36,7 @@ describe('StepOverflowMenu', () => {
     }
     vi.mocked(getCurrentFormIsPresaved).mockReturnValue(false)
     vi.mocked(getCurrentFormHasUnsavedChanges).mockReturnValue(false)
+    vi.mocked(getUnsavedForm).mockReturnValue(null)
   })
 
   it('renders each button and clicking them calls the action', () => {
@@ -46,7 +48,7 @@ describe('StepOverflowMenu', () => {
     fireEvent.click(screen.getByText('Edit step'))
     expect(vi.mocked(populateForm)).toHaveBeenCalled()
     fireEvent.click(screen.getByText('View commands'))
-    fireEvent.click(screen.getByText('Add step details'))
-    //  TODO: wire up view commands and add step details
+    fireEvent.click(screen.getByText('View step details'))
+    //  TODO: wire up view commands and view step details
   })
 })
diff --git a/protocol-designer/src/ui/steps/actions/__tests__/actions.test.ts b/protocol-designer/src/ui/steps/actions/__tests__/actions.test.ts
@@ -75,6 +75,10 @@ describe('steps actions', () => {
           type: 'SELECT_STEP',
           payload: stepId,
         },
+        {
+          type: 'POPULATE_FORM',
+          payload: null,
+        },
       ])
     })
   })

diff --git a/protocol-designer/src/ui/steps/actions/actions.ts b/protocol-designer/src/ui/steps/actions/actions.ts
@@ -110,6 +110,10 @@ export const selectStep = (stepId: StepIdType): ThunkAction<any> => (
     payload: stepId,
   }
   dispatch(selectStepAction)
+  dispatch({
+    type: 'POPULATE_FORM',
+    payload: null,
+  })
   resetScrollElements()
 }