Skip to content

Commit

Permalink
feat(protocol-designer): magnetic module change hint wire up
Browse files Browse the repository at this point in the history
closes AUTH-797
  • Loading branch information
jerader committed Oct 16, 2024
1 parent 98cdbb5 commit 47950e1
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 40 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import type * as React from 'react'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { fireEvent, screen } from '@testing-library/react'
import { i18n } from '../../../assets/localization'
import { renderWithProviders } from '../../../__testing-utils__'
import { BlockingHintModal } from '..'
import { removeHint } from '../../../tutorial/actions'

vi.mock('../../../tutorial/actions')

const render = (props: React.ComponentProps<typeof BlockingHintModal>) => {
return renderWithProviders(<BlockingHintModal {...props} />, {
i18nInstance: i18n,
})[0]
}

describe('BlockingHintModal', () => {
let props: React.ComponentProps<typeof BlockingHintModal>

beforeEach(() => {
props = {
content: <div>mock content</div>,
handleCancel: vi.fn(),
handleContinue: vi.fn(),
hintKey: 'change_magnet_module_model',
}
})
it('renders the hint with buttons and checkbox', () => {
render(props)
fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
expect(props.handleCancel).toHaveBeenCalled()
expect(vi.mocked(removeHint)).toHaveBeenCalled()
fireEvent.click(screen.getByRole('button', { name: 'Continue' }))
expect(props.handleContinue).toHaveBeenCalled()
expect(vi.mocked(removeHint)).toHaveBeenCalled()
screen.getByText('mock content')
})
})
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { useSelector } from 'react-redux'
import { HintKey } from '../../tutorial'
import { getDismissedHints } from '../../tutorial/selectors'
import { BlockingHintModal } from './index'
import type { HintKey } from '../../tutorial'

export interface HintArgs {
export interface HintProps {
/** `enabled` should be a condition that the parent uses to toggle whether the hint should be active or not.
* If the hint is enabled but has been dismissed, it will automatically call `handleContinue` when enabled.
* useBlockingHint expects the parent to disable the hint on cancel/continue */
Expand All @@ -14,7 +14,7 @@ export interface HintArgs {
handleContinue: () => void
}

export const useBlockingHint = (args: HintArgs): JSX.Element | null => {
export const useBlockingHint = (args: HintProps): JSX.Element | null => {
const { enabled, hintKey, handleCancel, handleContinue, content } = args
const isDismissed = useSelector(getDismissedHints).includes(hintKey)

Expand Down
56 changes: 19 additions & 37 deletions protocol-designer/src/pages/Designer/DeckSetup/DeckSetupTools.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
DeckInfoLabel,
DIRECTION_COLUMN,
Flex,
Link,
ModuleIcon,
RadioButton,
SPACING,
Expand All @@ -19,6 +18,8 @@ import {
getModuleDisplayName,
getModuleType,
MAGNETIC_MODULE_TYPE,
MAGNETIC_MODULE_V1,
MAGNETIC_MODULE_V2,
OT2_ROBOT_TYPE,
} from '@opentrons/shared-data'

Expand Down Expand Up @@ -46,10 +47,12 @@ import {
import { useBlockingHint } from '../../../organisms/BlockingHintModal/useBlockingHint'
import { selectors } from '../../../labware-ingred/selectors'
import { useKitchen } from '../../../organisms/Kitchen/hooks'
import { getDismissedHints } from '../../../tutorial/selectors'
import { createContainerAboveModule } from '../../../step-forms/actions/thunks'
import { FIXTURES, MOAM_MODELS, MOAM_MODELS_WITH_FF } from './constants'
import { getSlotInformation } from '../utils'
import { getModuleModelsBySlot, getDeckErrors } from './utils'
import { MagnetModuleChangeContent } from './MagnetModuleChangeContent'
import { LabwareTools } from './LabwareTools'

import type { ModuleModel } from '@opentrons/shared-data'
Expand All @@ -71,6 +74,9 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
const { makeSnackbar } = useKitchen()
const selectedSlotInfo = useSelector(selectors.getZoomedInSlotInfo)
const robotType = useSelector(getRobotType)
const isDismissedModuleHint = useSelector(getDismissedHints).includes(
'change_magnet_module_model'
)
const dispatch = useDispatch<ThunkDispatch<any>>()
const enableAbsorbanceReader = useSelector(getEnableAbsorbanceReader)
const enableMoam = useSelector(getEnableMoam)
Expand Down Expand Up @@ -108,53 +114,29 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
const hasMagneticModule = Object.values(deckSetup.modules).some(
module => module.type === MAGNETIC_MODULE_TYPE
)
const moduleOnSlotIsMagneticModuleV1 =
Object.values(deckSetup.modules).find(module => module.slot === slot)
?.model === MAGNETIC_MODULE_V1

const changeModuleWarning = useBlockingHint({
hintKey: 'change_magnet_module_model',
handleCancel: () => {
displayModuleWarning(false)
},
handleContinue: () => {
setSelectedHardware(
moduleOnSlotIsMagneticModuleV1 ? MAGNETIC_MODULE_V2 : MAGNETIC_MODULE_V1
)
dispatch(
selectModule({
moduleModel: Object.values(deckSetup.modules).some(
module => module.model === 'magneticModuleV1'
)
? 'magneticModuleV2'
: 'magneticModuleV1',
moduleModel: moduleOnSlotIsMagneticModuleV1
? MAGNETIC_MODULE_V2
: MAGNETIC_MODULE_V1,
})
)
displayModuleWarning(false)
onCloseClick()
},
content: (
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyDefaultRegular">
{t('gen1_gen2_different_units')}
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular">
{t('convert_gen1_to_gen2')}
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular">
{t('convert_gen2_to_gen1')}
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular">
{t('alter_pause')}
</StyledText>
<Flex>
<StyledText desktopStyle="bodyDefaultRegular">
{t('read_more_gen1_gen2')}{' '}
<Link
target="_blank"
rel="noopener noreferrer"
href="http://support.opentrons.com/en/articles/1820112-magnetic-module"
>
{t('here')}
</Link>
</StyledText>
</Flex>
</Flex>
),
content: <MagnetModuleChangeContent />,
enabled: changeModuleWarningInfo,
})

Expand Down Expand Up @@ -296,7 +278,6 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
dispatch(selectZoomedIntoSlot({ slot: null, cutout: null }))
onCloseClick()
}
console.log('change module warning info', changeModuleWarningInfo)
return (
<>
{changeModuleWarning}
Expand Down Expand Up @@ -426,7 +407,8 @@ export function DeckSetupTools(props: DeckSetupToolsProps): JSX.Element | null {
} else if (
hasMagneticModule &&
(model === 'magneticModuleV1' ||
model === 'magneticModuleV2')
model === 'magneticModuleV2') &&
!isDismissedModuleHint
) {
displayModuleWarning(true)
} else {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { useTranslation } from 'react-i18next'
import {
DIRECTION_COLUMN,
Flex,
Link,
SPACING,
StyledText,
} from '@opentrons/components'

export function MagnetModuleChangeContent(): JSX.Element {
const { t } = useTranslation('starting_deck_state')

return (
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
<StyledText desktopStyle="bodyDefaultRegular">
{t('gen1_gen2_different_units')}
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular">
{t('convert_gen1_to_gen2')}
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular">
{t('convert_gen2_to_gen1')}
</StyledText>
<StyledText desktopStyle="bodyDefaultRegular">
{t('alter_pause')}
</StyledText>
<Flex>
<StyledText desktopStyle="bodyDefaultRegular">
{t('read_more_gen1_gen2')}{' '}
<Link
target="_blank"
rel="noopener noreferrer"
href="http://support.opentrons.com/en/articles/1820112-magnetic-module"
>
{t('here')}
</Link>
</StyledText>
</Flex>
</Flex>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
deleteDeckFixture,
} from '../../../../step-forms/actions/additionalItems'
import { selectors } from '../../../../labware-ingred/selectors'
import { getDismissedHints } from '../../../../tutorial/selectors'
import { getDeckSetupForActiveItem } from '../../../../top-selectors/labware-locations'
import { DeckSetupTools } from '../DeckSetupTools'
import { LabwareTools } from '../LabwareTools'
Expand All @@ -35,6 +36,7 @@ vi.mock('../../../../labware-ingred/actions')
vi.mock('../../../../step-forms/actions')
vi.mock('../../../../step-forms/actions/additionalItems')
vi.mock('../../../../labware-ingred/selectors')
vi.mock('../../../../tutorial/selectors')
const render = (props: React.ComponentProps<typeof DeckSetupTools>) => {
return renderWithProviders(<DeckSetupTools {...props} />, {
i18nInstance: i18n,
Expand Down Expand Up @@ -70,6 +72,7 @@ describe('DeckSetupTools', () => {
additionalEquipmentOnDeck: {},
pipettes: {},
})
vi.mocked(getDismissedHints).mockReturnValue([])
})
it('should render the relevant modules and fixtures for slot D3 on Flex with tabs', () => {
render(props)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { describe, it } from 'vitest'
import { screen } from '@testing-library/react'
import { i18n } from '../../../../assets/localization'
import { renderWithProviders } from '../../../../__testing-utils__'
import { MagnetModuleChangeContent } from '../MagnetModuleChangeContent'

const render = () => {
return renderWithProviders(<MagnetModuleChangeContent />, {
i18nInstance: i18n,
})[0]
}

describe('MagnetModuleChangeContent', () => {
it('renders the text for the modal content', () => {
render()
screen.getByText(
'Switching between GEN1 and GEN2 Magnetic Modules will clear all non-default engage heights from existing magnet steps in your protocol. GEN1 and GEN2 Magnetic Modules do not use the same units.'
)
screen.getByText(
'To convert engage heights from GEN1 to GEN2, divide your engage height by 2.'
)
screen.getByText(
'To convert engage heights from GEN2 to GEN1, multiply your engage height by 2.'
)
screen.getByText(
'You may also need to alter the time you pause while your magnet is engaged.'
)
screen.getByText(
'Read more about the differences between GEN1 and GEN2 Magnetic Modules'
)
})
})

0 comments on commit 47950e1

Please sign in to comment.