diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx index d3e64b9eba0..0ee759a2395 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepContainer.tsx @@ -327,6 +327,7 @@ export function StepContainer(props: StepContainerProps): JSX.Element { confirmMultiDelete={confirmMultiDelete} multiSelectItemIds={multiSelectItemIds} sidebarWidth={sidebarWidth} + isStepAfterError={isStepAfterError} />, getMainPagePortalEl() ) diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx index 8d63ea63088..90868120a58 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/StepOverflowMenu.tsx @@ -43,6 +43,7 @@ interface StepOverflowMenuProps { confirmMultiDelete: () => void multiSelectItemIds: string[] | null sidebarWidth: number // adjust the position of the overflow menu + isStepAfterError: boolean } export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { @@ -56,6 +57,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { confirmMultiDelete, multiSelectItemIds, sidebarWidth, + isStepAfterError, } = props const { t } = useTranslation('protocol_steps') const singleEditFormHasUnsavedChanges = useSelector( @@ -116,7 +118,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { {multiSelectItemIds != null && multiSelectItemIds.length > 0 ? ( <> { duplicateMultipleSteps() setOpenedOverflowMenuId(null) @@ -137,9 +139,11 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { ) : ( <> {formData != null ? null : ( - {t('edit_step')} + + {t('edit_step')} + )} - {isPipetteStep || isThermocyclerProfile ? ( + {isPipetteStep || isThermocyclerProfile || !isStepAfterError ? ( { @@ -153,7 +157,7 @@ export function StepOverflowMenu(props: StepOverflowMenuProps): JSX.Element { ) : null} { duplicateStep(stepId) setOpenedOverflowMenuId(null) diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx index 999a26fc822..4f6721ac19c 100644 --- a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx +++ b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/StepOverflowMenu.test.tsx @@ -70,6 +70,7 @@ describe('StepOverflowMenu', () => { confirmDelete: mockConfirm, confirmMultiDelete: vi.fn(), sidebarWidth: 235, + isStepAfterError: false, } vi.mocked(getMultiSelectItemIds).mockReturnValue(null) vi.mocked(getCurrentFormIsPresaved).mockReturnValue(false) @@ -114,4 +115,14 @@ describe('StepOverflowMenu', () => { render(props) expect(screen.getByText('View details')).toBeInTheDocument() }) + + it('should not clickable except for delete button when isStepAfterError is true', () => { + props = { + ...props, + isStepAfterError: true, + } + render(props) + expect(screen.getByText('Delete step')).not.toBeDisabled() + expect(screen.getByText('Edit step')).toBeDisabled() + }) })