Skip to content

Commit

Permalink
refactor(app): Refactor LPC flows in preparation for LPC redesign (#1…
Browse files Browse the repository at this point in the history
…7279)

Closes EXEC-1070

Refactors LabwarePositionCheck, separating the data layer from the presentation layer and re-architecting both layers to be more in line with the direction Design is heading with the LPC Redesign.
  • Loading branch information
mjhuff authored Jan 22, 2025
1 parent 73bdb33 commit f611c58
Show file tree
Hide file tree
Showing 105 changed files with 5,249 additions and 275 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,20 @@ import { POST, request } from '../request'
import type { ResponsePromise } from '../request'
import type { HostConfig } from '../types'
import type { LabwareDefinitionSummary } from './types'
import type { LabwareDefinition2 } from '@opentrons/shared-data'
import type {
LabwareDefinition2,
LabwareDefinition3,
} from '@opentrons/shared-data'

export function createMaintenanceRunLabwareDefinition(
config: HostConfig,
maintenanceRunId: string,
data: LabwareDefinition2
data: LabwareDefinition2 | LabwareDefinition3
): ResponsePromise<LabwareDefinitionSummary> {
return request<LabwareDefinitionSummary, { data: LabwareDefinition2 }>(
return request<
LabwareDefinitionSummary,
{ data: LabwareDefinition2 | LabwareDefinition3 }
>(
POST,
`/maintenance_runs/${maintenanceRunId}/labware_definitions`,
{ data },
Expand Down
64 changes: 33 additions & 31 deletions app/src/atoms/buttons/SubmitPrimaryButton.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { css } from 'styled-components'
import styled from 'styled-components'
import {
SPACING,
COLORS,
Expand All @@ -15,37 +15,39 @@ interface SubmitPrimaryButtonProps {
onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
disabled?: boolean
}

const StyledSubmitInput = styled.input`
background-color: ${COLORS.blue50};
border-radius: ${BORDERS.borderRadius8};
padding: ${SPACING.spacing8} ${SPACING.spacing16};
color: ${COLORS.white};
${TYPOGRAPHY.pSemiBold}
width: 100%;
border: none;
${styleProps}
&:focus-visible {
box-shadow: 0 0 0 3px ${COLORS.yellow50};
}
&:hover {
background-color: ${COLORS.blue55};
box-shadow: 0 0 0;
}
&:active {
background-color: ${COLORS.blue60};
}
&:disabled {
background-color: ${COLORS.grey30};
color: ${COLORS.grey40};
}
`

export const SubmitPrimaryButton = (
props: SubmitPrimaryButtonProps
): JSX.Element => {
const SUBMIT_INPUT_STYLE = css`
background-color: ${COLORS.blue50};
border-radius: ${BORDERS.borderRadius8};
padding: ${SPACING.spacing8} ${SPACING.spacing16};
color: ${COLORS.white};
${TYPOGRAPHY.pSemiBold}
width: 100%;
border: none;
${styleProps}
&:focus-visible {
box-shadow: 0 0 0 3px ${COLORS.yellow50};
}
&:hover {
background-color: ${COLORS.blue55};
box-shadow: 0 0 0;
}
&:active {
background-color: ${COLORS.blue60};
}
&:disabled {
background-color: ${COLORS.grey30};
color: ${COLORS.grey40};
}
`
return <input {...props} css={SUBMIT_INPUT_STYLE} type="submit" />
return <StyledSubmitInput {...props} type="submit" />
}
40 changes: 20 additions & 20 deletions app/src/molecules/InProgressModal/InProgressModal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { css } from 'styled-components'
import styled from 'styled-components'
import {
ALIGN_CENTER,
COLORS,
Expand All @@ -22,7 +22,7 @@ interface Props {
children?: JSX.Element
}

const DESCRIPTION_STYLE = css`
const StyledDescription = styled(LegacyStyledText)`
${TYPOGRAPHY.h1Default}
margin-top: ${SPACING.spacing24};
margin-bottom: ${SPACING.spacing8};
Expand All @@ -38,7 +38,8 @@ const DESCRIPTION_STYLE = css`
line-height: ${TYPOGRAPHY.lineHeight42};
}
`
const BODY_STYLE = css`

const StyledBody = styled(LegacyStyledText)`
${TYPOGRAPHY.pRegular}
text-align: ${TYPOGRAPHY.textAlignCenter};
Expand All @@ -47,7 +48,8 @@ const BODY_STYLE = css`
color: ${COLORS.grey60}
}
`
const MODAL_STYLE = css`

const StyledModal = styled(Flex)`
align-items: ${ALIGN_CENTER};
flex-direction: ${DIRECTION_COLUMN};
justify-content: ${JUSTIFY_CENTER};
Expand All @@ -59,7 +61,8 @@ const MODAL_STYLE = css`
height: 100%;
}
`
const SPINNER_STYLE = css`

const StyledSpinner = styled(Icon)`
color: ${COLORS.grey60};
width: 5.125rem;
height: 5.125rem;
Expand All @@ -69,11 +72,13 @@ const SPINNER_STYLE = css`
}
`

const DESCRIPTION_CONTAINER_STYLE = css`
padding-x: 6.5625rem;
const DescriptionContainer = styled(Flex)`
padding-left: 6.5625rem;
padding-right: 6.5625rem;
gap: ${SPACING.spacing8};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
padding-x: ${SPACING.spacing40};
padding-left: ${SPACING.spacing40};
padding-right: ${SPACING.spacing40};
gap: ${SPACING.spacing4};
}
`
Expand All @@ -82,25 +87,20 @@ export function InProgressModal(props: Props): JSX.Element {
const { alternativeSpinner, children, description, body } = props

return (
<Flex css={MODAL_STYLE}>
<StyledModal>
{alternativeSpinner ?? (
<Icon name="ot-spinner" aria-label="spinner" css={SPINNER_STYLE} spin />
<StyledSpinner name="ot-spinner" aria-label="spinner" spin />
)}
<Flex
<DescriptionContainer
flexDirection={DIRECTION_COLUMN}
alignItems={ALIGN_CENTER}
css={DESCRIPTION_CONTAINER_STYLE}
>
{description != null && (
<LegacyStyledText css={DESCRIPTION_STYLE}>
{description}
</LegacyStyledText>
)}
{body != null && (
<LegacyStyledText css={BODY_STYLE}>{body}</LegacyStyledText>
<StyledDescription>{description}</StyledDescription>
)}
</Flex>
{body != null && <StyledBody>{body}</StyledBody>}
</DescriptionContainer>
{children}
</Flex>
</StyledModal>
)
}
31 changes: 15 additions & 16 deletions app/src/molecules/JogControls/DirectionControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -397,7 +397,8 @@ const ARROW_BUTTON_STYLES = css`
}
}
`
const ARROW_ICON_STYLES = css`

const StyledIcon = styled(Icon)`
height: 1.125rem;
width: 1.125rem;
Expand Down Expand Up @@ -427,21 +428,19 @@ export const ArrowKeys = (props: ArrowKeysProps): JSX.Element => {

return (
<Box css={ARROW_GRID_STYLES}>
{controls.map(
({ bearing, iconName, axis, sign, gridColumn, keyName, disabled }) => (
<PrimaryButton
key={bearing}
onClick={() => jog(axis, sign, stepSize)}
css={ARROW_BUTTON_STYLES}
title={bearing}
gridArea={keyName}
alignSelf={BUTTON_ALIGN_BY_KEY_NAME[keyName] ?? 'center'}
disabled={disabled}
>
<Icon css={ARROW_ICON_STYLES} name={iconName} />
</PrimaryButton>
)
)}
{controls.map(({ bearing, iconName, axis, sign, keyName, disabled }) => (
<PrimaryButton
key={bearing}
onClick={() => jog(axis, sign, stepSize)}
css={ARROW_BUTTON_STYLES}
title={bearing}
gridArea={keyName}
alignSelf={BUTTON_ALIGN_BY_KEY_NAME[keyName] ?? 'center'}
disabled={disabled}
>
<StyledIcon name={iconName} />
</PrimaryButton>
))}
</Box>
)
}
Expand Down
8 changes: 6 additions & 2 deletions app/src/molecules/JogControls/StepSizeControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ import type { MouseEvent } from 'react'
import type { StepSize } from './types'

const JUMP_SIZE_SUBTITLE = '- / +'
const JUMP_SIZE_ICON_STYLE = css`

const StyledIcon = styled(Icon)`
flex-shrink: 0;
`

Expand Down Expand Up @@ -77,6 +78,7 @@ const DEFAULT_BUTTON_STYLE = css`
color: ${COLORS.grey40};
}
`

const ACTIVE_BUTTON_STYLE = css`
${DEFAULT_BUTTON_STYLE}
color: ${COLORS.blue50};
Expand All @@ -88,11 +90,13 @@ const ACTIVE_BUTTON_STYLE = css`
outline: 0;
}
`

interface StepSizeControlProps {
stepSizes: StepSize[]
currentStepSize: StepSize
setCurrentStepSize: (stepSize: StepSize) => void
}

export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
const { stepSizes, currentStepSize, setCurrentStepSize } = props
const { t } = useTranslation(['robot_calibration'])
Expand Down Expand Up @@ -125,7 +129,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
>
<Flex flexDirection={DIRECTION_COLUMN} flex="1">
<Flex flexDirection={DIRECTION_ROW}>
<Icon name="jump-size" width="1.2rem" css={JUMP_SIZE_ICON_STYLE} />
<StyledIcon name="jump-size" width="1.2rem" />
<LegacyStyledText
textTransform={TEXT_TRANSFORM_CAPITALIZE}
css={TYPOGRAPHY.pSemiBold}
Expand Down
16 changes: 8 additions & 8 deletions app/src/molecules/UnorderedList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import { css } from 'styled-components'
import styled from 'styled-components'
import { SPACING, LegacyStyledText } from '@opentrons/components'

import type { ReactNode } from 'react'

const ListItem = styled.li`
margin-left: ${SPACING.spacing24};
`

interface UnorderedListProps {
items: ReactNode[]
}

export function UnorderedList(props: UnorderedListProps): JSX.Element {
const { items } = props
return (
<ul>
{items.map((item, index) => (
<li
key={index}
css={css`
margin-left: ${SPACING.spacing24};
`}
>
<ListItem key={index}>
<LegacyStyledText as="p">{item}</LegacyStyledText>
</li>
</ListItem>
))}
</ul>
)
Expand Down
20 changes: 12 additions & 8 deletions app/src/molecules/WizardRequiredEquipmentList/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import { css } from 'styled-components'
import styled from 'styled-components'
import {
ALIGN_CENTER,
BORDERS,
Expand All @@ -24,10 +24,19 @@ import { equipmentImages } from './equipmentImages'

import type { ComponentProps } from 'react'
import type { StyleProps } from '@opentrons/components'

interface WizardRequiredEquipmentListProps extends StyleProps {
equipmentList: Array<ComponentProps<typeof RequiredEquipmentCard>>
footer?: string
}

const StyledEquipmentImage = styled.img<{ isEquipmentImage: boolean }>`
max-width: 100%;
max-height: 100%;
flex: ${props => (props.isEquipmentImage ? '0' : '0 1 5rem')};
display: block;
`

export function WizardRequiredEquipmentList(
props: WizardRequiredEquipmentListProps
): JSX.Element {
Expand Down Expand Up @@ -142,13 +151,8 @@ function RequiredEquipmentCard(props: RequiredEquipmentCardProps): JSX.Element {
alignItems={ALIGN_CENTER}
marginRight={SPACING.spacing16}
>
<img
css={css`
max-width: 100%;
max-height: 100%;
flex: ${loadName in equipmentImages ? `0` : `0 1 5rem`};
display: block;
`}
<StyledEquipmentImage
isEquipmentImage={loadName in equipmentImages}
src={imageSrc}
alt={displayName}
/>
Expand Down
4 changes: 2 additions & 2 deletions app/src/organisms/Desktop/ChooseProtocolSlideout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export function ChooseProtocolSlideoutComponent(
const { robot, showSlideout, onCloseClick } = props
const { name } = robot

const isNewLpc = useFeatureFlag('lpcRedesign')
const isNewLPC = useFeatureFlag('lpcRedesign')

const [
selectedProtocol,
Expand Down Expand Up @@ -655,7 +655,7 @@ export function ChooseProtocolSlideoutComponent(
}
>
{currentPage === 1
? !isNewLpc && (
? !isNewLPC && (
<LegacyApplyHistoricOffsets
offsetCandidates={offsetCandidates}
shouldApplyOffsets={shouldApplyOffsets}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
setSelectedRobot,
} = props
const navigate = useNavigate()
const isNewLpc = useFeatureFlag('lpcRedesign')
const isNewLPC = useFeatureFlag('lpcRedesign')
const [shouldApplyOffsets, setShouldApplyOffsets] = useState<boolean>(true)
const {
protocolKey,
Expand Down Expand Up @@ -221,7 +221,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
</PrimaryButton>
)

const offsetsComponent = isNewLpc ? null : (
const offsetsComponent = isNewLPC ? null : (
<LegacyApplyHistoricOffsets
offsetCandidates={offsetCandidates}
shouldApplyOffsets={shouldApplyOffsets}
Expand Down
Loading

0 comments on commit f611c58

Please sign in to comment.