Skip to content

Commit

Permalink
fix(app): remove back to RobotDashboard button (#13294)
Browse files Browse the repository at this point in the history 
fix(app): remove back to RobotDashboard button from RunningProtocol and RunSummary
  • Loading branch information
@koji
koji authored Aug 15, 2023
1 parent 94acfe5 commit b917929
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 168 deletions.
281 changes: 134 additions & 147 deletions app/src/pages/OnDeviceDisplay/RunSummary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
import * as React from 'react'
import { useSelector } from 'react-redux'
import { useParams, useHistory, Link } from 'react-router-dom'
import { useParams, useHistory } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import styled, { css } from 'styled-components'

import {
Flex,
DIRECTION_COLUMN,
TYPOGRAPHY,
SPACING,
COLORS,
JUSTIFY_CENTER,
ALIGN_CENTER,
POSITION_RELATIVE,
OVERFLOW_HIDDEN,
ALIGN_FLEX_END,
POSITION_ABSOLUTE,
Icon,
JUSTIFY_SPACE_BETWEEN,
ALIGN_STRETCH,
ALIGN_FLEX_START,
ALIGN_STRETCH,
BORDERS,
Btn,
COLORS,
DIRECTION_COLUMN,
DIRECTION_ROW,
DISPLAY_FLEX,
SIZE_2,
Btn,
Flex,
Icon,
JUSTIFY_CENTER,
JUSTIFY_SPACE_BETWEEN,
OVERFLOW_HIDDEN,
POSITION_ABSOLUTE,
POSITION_RELATIVE,
SPACING,
TYPOGRAPHY,
} from '@opentrons/components'
import {
RUN_STATUS_FAILED,
Expand All @@ -32,7 +31,7 @@ import {
} from '@opentrons/api-client'
import { useProtocolQuery, useRunQuery } from '@opentrons/react-api-client'

import { LargeButton, TertiaryButton } from '../../atoms/buttons'
import { LargeButton } from '../../atoms/buttons'
import {
useRunTimestamps,
useRunControls,
Expand Down Expand Up @@ -134,147 +133,135 @@ export function RunSummary(): JSX.Element {
}

return (
<>
<Btn
display={DISPLAY_FLEX}
width="100%"
height="100vh"
flexDirection={DIRECTION_COLUMN}
position={POSITION_RELATIVE}
overflow={OVERFLOW_HIDDEN}
disabled={isClosingCurrentRun}
onClick={handleClickSplash}
>
{showSplash ? (
<Flex
height="100vh"
width="100%"
justifyContent={JUSTIFY_CENTER}
alignItems={ALIGN_CENTER}
position={POSITION_ABSOLUTE}
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing40}
padding={SPACING.spacing40}
backgroundColor={didRunSucceed ? COLORS.green2 : COLORS.red2}
>
<SplashFrame>
<Flex gridGap={SPACING.spacing32} alignItems={ALIGN_CENTER}>
<Icon
name={didRunSucceed ? 'ot-check' : 'ot-alert'}
size="4.5rem"
color={COLORS.white}
/>
<SplashHeader>
{didRunSucceed
? t('run_complete_splash')
: t('run_failed_splash')}
</SplashHeader>
</Flex>
<Flex width="49rem" justifyContent={JUSTIFY_CENTER}>
<SplashBody>{protocolName}</SplashBody>
</Flex>
</SplashFrame>
</Flex>
) : (
<Btn
display={DISPLAY_FLEX}
width="100%"
height="100vh"
flexDirection={DIRECTION_COLUMN}
position={POSITION_RELATIVE}
overflow={OVERFLOW_HIDDEN}
disabled={isClosingCurrentRun}
onClick={handleClickSplash}
>
{showSplash ? (
<Flex
height="100vh"
width="100%"
justifyContent={JUSTIFY_CENTER}
alignItems={ALIGN_CENTER}
position={POSITION_ABSOLUTE}
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing40}
padding={SPACING.spacing40}
backgroundColor={didRunSucceed ? COLORS.green2 : COLORS.red2}
>
<SplashFrame>
<Flex gridGap={SPACING.spacing32} alignItems={ALIGN_CENTER}>
<Icon
name={didRunSucceed ? 'ot-check' : 'ot-alert'}
size="4.5rem"
color={COLORS.white}
/>
<SplashHeader>
{didRunSucceed
? t('run_complete_splash')
: t('run_failed_splash')}
</SplashHeader>
</Flex>
<Flex width="49rem" justifyContent={JUSTIFY_CENTER}>
<SplashBody>{protocolName}</SplashBody>
</Flex>
</SplashFrame>
</Flex>
) : (
<Flex
height="100vh"
width="100%"
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_SPACE_BETWEEN}
padding={SPACING.spacing40}
>
{showRunFailedModal ? (
<RunFailedModal
runId={runId}
setShowRunFailedModal={setShowRunFailedModal}
errors={runRecord?.data.errors}
/>
) : null}
<Flex
height="100vh"
width="100%"
flexDirection={DIRECTION_COLUMN}
justifyContent={JUSTIFY_SPACE_BETWEEN}
padding={SPACING.spacing40}
alignItems={ALIGN_FLEX_START}
gridGap={SPACING.spacing16}
>
{showRunFailedModal ? (
<RunFailedModal
runId={runId}
setShowRunFailedModal={setShowRunFailedModal}
errors={runRecord?.data.errors}
<Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
<Icon
name={didRunSucceed ? 'ot-check' : 'ot-alert'}
size="2rem"
color={
didRunSucceed ? COLORS.successEnabled : COLORS.errorEnabled
}
/>
) : null}
<Flex
flexDirection={DIRECTION_COLUMN}
alignItems={ALIGN_FLEX_START}
gridGap={SPACING.spacing16}
>
<Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
<Icon
name={didRunSucceed ? 'ot-check' : 'ot-alert'}
size={SIZE_2}
color={
didRunSucceed ? COLORS.successEnabled : COLORS.errorEnabled
}
<SummaryHeader>{headerText}</SummaryHeader>
</Flex>
<ProtocolName>{protocolName}</ProtocolName>
<Flex gridGap={SPACING.spacing8}>
<SummaryDatum>{`${t(
'run'
)}: ${createdAtTimestamp}`}</SummaryDatum>
<SummaryDatum>
{`${t('duration')}: `}
<RunTimer
{...{
runStatus,
startedAt,
stoppedAt,
completedAt,
}}
style={DURATION_TEXT_STYLE}
/>
<SummaryHeader>{headerText}</SummaryHeader>
</Flex>
<ProtocolName>{protocolName}</ProtocolName>
<Flex gridGap={SPACING.spacing8}>
<SummaryDatum>{`${t(
'run'
)}: ${createdAtTimestamp}`}</SummaryDatum>
<SummaryDatum>
{`${t('duration')}: `}
<RunTimer
{...{
runStatus,
startedAt,
stoppedAt,
completedAt,
}}
style={DURATION_TEXT_STYLE}
/>
</SummaryDatum>
<SummaryDatum>{`${t(
'start'
)}: ${startedAtTimestamp}`}</SummaryDatum>
<SummaryDatum>{`${t(
'end'
)}: ${completedAtTimestamp}`}</SummaryDatum>
</Flex>
</SummaryDatum>
<SummaryDatum>{`${t(
'start'
)}: ${startedAtTimestamp}`}</SummaryDatum>
<SummaryDatum>{`${t(
'end'
)}: ${completedAtTimestamp}`}</SummaryDatum>
</Flex>
<Flex alignSelf={ALIGN_STRETCH} gridGap={SPACING.spacing16}>
<LargeButton
flex="1"
iconName="arrow-left"
buttonType="secondary"
onClick={handleReturnToDash}
buttonText={t('return_to_dashboard')}
height="17rem"
/>
</Flex>
<Flex alignSelf={ALIGN_STRETCH} gridGap={SPACING.spacing16}>
<LargeButton
flex="1"
iconName="arrow-left"
buttonType="secondary"
onClick={handleReturnToDash}
buttonText={t('return_to_dashboard')}
height="17rem"
/>
<LargeButton
flex="1"
iconName="play-round-corners"
onClick={handleRunAgain}
buttonText={t('run_again')}
height="17rem"
/>
{!didRunSucceed ? (
<LargeButton
flex="1"
iconName="play-round-corners"
onClick={handleRunAgain}
buttonText={t('run_again')}
iconName="info"
buttonType="alert"
onClick={handleViewErrorDetails}
buttonText={t('view_error_details')}
height="17rem"
disabled={
runRecord?.data.errors == null ||
runRecord?.data.errors.length === 0
}
/>
{!didRunSucceed ? (
<LargeButton
flex="1"
iconName="info"
buttonType="alert"
onClick={handleViewErrorDetails}
buttonText={t('view_error_details')}
height="17rem"
disabled={
runRecord?.data.errors == null ||
runRecord?.data.errors.length === 0
}
/>
) : null}
</Flex>
) : null}
</Flex>
)}
</Btn>
<Flex
alignSelf={ALIGN_FLEX_END}
marginTop={SPACING.spacing24}
width="fit-content"
paddingRight={SPACING.spacing32}
>
<Link to="/dashboard">
<TertiaryButton>back to RobotDashboard</TertiaryButton>
</Link>
</Flex>
</>
</Flex>
)}
</Btn>
)
}

Expand Down
29 changes: 8 additions & 21 deletions app/src/pages/OnDeviceDisplay/RunningProtocol.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,27 @@
import * as React from 'react'
import { useParams, Link } from 'react-router-dom'
import { useParams } from 'react-router-dom'
import styled from 'styled-components'
import { useSelector } from 'react-redux'

import {
Flex,
ALIGN_CENTER,
COLORS,
DIRECTION_COLUMN,
DIRECTION_ROW,
SPACING,
useSwipe,
COLORS,
Flex,
JUSTIFY_CENTER,
ALIGN_CENTER,
POSITION_RELATIVE,
OVERFLOW_HIDDEN,
ALIGN_FLEX_END,
POSITION_RELATIVE,
SPACING,
useSwipe,
} from '@opentrons/components'
import {
useProtocolQuery,
useRunQuery,
useRunActionMutations,
} from '@opentrons/react-api-client'
import { RUN_STATUS_STOP_REQUESTED } from '@opentrons/api-client'
import { TertiaryButton } from '../../atoms/buttons'

import { StepMeter } from '../../atoms/StepMeter'
import { useMostRecentCompletedAnalysis } from '../../organisms/LabwarePositionCheck/useMostRecentCompletedAnalysis'
import { useLastRunCommandKey } from '../../organisms/Devices/hooks/useLastRunCommandKey'
Expand Down Expand Up @@ -147,7 +146,6 @@ export function RunningProtocol(): JSX.Element {
return (
<>
{runStatus === RUN_STATUS_STOP_REQUESTED ? <CancelingRunModal /> : null}

<Flex
flexDirection={DIRECTION_COLUMN}
position={POSITION_RELATIVE}
Expand Down Expand Up @@ -234,17 +232,6 @@ export function RunningProtocol(): JSX.Element {
</Flex>
</Flex>
</Flex>
{/* temporary */}
<Flex
alignSelf={ALIGN_FLEX_END}
marginTop={SPACING.spacing24}
width="fit-content"
paddingRight={SPACING.spacing32}
>
<Link to="/dashboard">
<TertiaryButton>back to RobotDashboard</TertiaryButton>
</Link>
</Flex>
</>
)
}

0 comments on commit b917929

Please sign in to comment.