feat(app): update deck config in device details for run status

Add a new banner and make DeckConfigurator disable when run is running close RAUT-824
Opentrons · Oct 27, 2023 · f5fe052 · f5fe052
1 parent 17a4e6f
commit f5fe052
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 42 deletions.
diff --git a/app/src/assets/localization/en/device_details.json b/app/src/assets/localization/en/device_details.json
@@ -33,6 +33,7 @@
   "current_temp": "Current: {{temp}} °C",
   "current_version": "Current Version",
   "deck_cal_missing": "Pipette Offset calibration missing. Calibrate deck first.",
+  "deck_configuration_is_not_available": "Deck configuration is not available when run is in progress",
   "deck_configuration": "deck configuration",
   "deck_fixture_setup_instructions": "Deck fixture setup instructions",
   "deck_fixture_setup_modal_bottom_description_desktop": "For detailed instructions for different types of fixtures, scan the QR code or go to the link below.",

diff --git a/...rganisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx b/...rganisms/DeviceDetailsDeckConfiguration/__tests__/DeviceDetailsDeckConfiguration.test.tsx
@@ -5,15 +5,23 @@ import {
   useUpdateDeckConfigurationMutation,
 } from '@opentrons/react-api-client'
 import { i18n } from '../../../i18n'
+import { useRunStatuses } from '../../Devices/hooks'
 import { DeckFixtureSetupInstructionsModal } from '../DeckFixtureSetupInstructionsModal'
 import { DeviceDetailsDeckConfiguration } from '../'
 
 jest.mock('@opentrons/components/src/hardware-sim/DeckConfigurator/index')
 jest.mock('@opentrons/react-api-client')
 jest.mock('../DeckFixtureSetupInstructionsModal')
+jest.mock('../../Devices/hooks')
 
 const ROBOT_NAME = 'otie'
 const mockUpdateDeckConfiguration = jest.fn()
+const RUN_STATUSES = {
+  isRunRunning: false,
+  isRunStill: false,
+  isRunTerminal: false,
+  isRunIdle: false,
+}
 
 const mockUseDeckConfigurationQuery = useDeckConfigurationQuery as jest.MockedFunction<
   typeof useDeckConfigurationQuery
@@ -27,6 +35,9 @@ const mockDeckFixtureSetupInstructionsModal = DeckFixtureSetupInstructionsModal
 const mockDeckConfigurator = DeckConfigurator as jest.MockedFunction<
   typeof DeckConfigurator
 >
+const mockUseRunStatuses = useRunStatuses as jest.MockedFunction<
+  typeof useRunStatuses
+>
 
 const render = (
   props: React.ComponentProps<typeof DeviceDetailsDeckConfiguration>
@@ -51,6 +62,7 @@ describe('DeviceDetailsDeckConfiguration', () => {
       <div>mock DeckFixtureSetupInstructionsModal</div>
     )
     mockDeckConfigurator.mockReturnValue(<div>mock DeckConfigurator</div>)
+    mockUseRunStatuses.mockReturnValue(RUN_STATUSES)
   })
 
   it('should render text and button', () => {
@@ -67,4 +79,13 @@ describe('DeviceDetailsDeckConfiguration', () => {
     getByRole('button', { name: 'Setup Instructions' }).click()
     getByText('mock DeckFixtureSetupInstructionsModal')
   })
+
+  it('should render banner and make deck configurator disabled when running', () => {
+    RUN_STATUSES.isRunRunning = true
+    mockUseRunStatuses.mockReturnValue(RUN_STATUSES)
+    const [{ getByText, queryAllByRole }] = render(props)
+    getByText('Deck configuration is not available when run is in progress')
+    // Note (kk:10/27/2023) detects Setup Instructions buttons
+    expect(queryAllByRole('button').length).toBe(1)
+  })
 })
diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/index.tsx
@@ -26,8 +26,10 @@ import {
 } from '@opentrons/shared-data'
 
 import { StyledText } from '../../atoms/text'
+import { Banner } from '../../atoms/Banner'
 import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal'
 import { AddFixtureModal } from './AddFixtureModal'
+import { useRunStatuses } from '../Devices/hooks'
 
 import type { Cutout } from '@opentrons/shared-data'
 
@@ -53,6 +55,7 @@ export function DeviceDetailsDeckConfiguration({
 
   const deckConfig = useDeckConfigurationQuery().data ?? []
   const { updateDeckConfiguration } = useUpdateDeckConfigurationMutation()
+  const { isRunRunning } = useRunStatuses()
 
   const handleClickAdd = (fixtureLocation: Cutout): void => {
     setTargetFixtureLocation(fixtureLocation)
@@ -117,55 +120,66 @@ export function DeviceDetailsDeckConfiguration({
             {t('setup_instructions')}
           </Link>
         </Flex>
-
         <Flex
-          gridGap={SPACING.spacing40}
+          gridGap={SPACING.spacing16}
           paddingX={SPACING.spacing16}
-          paddingY={SPACING.spacing32}
+          paddingBottom={SPACING.spacing32}
+          paddingTop={isRunRunning ? undefined : SPACING.spacing32}
           width="100%"
+          id="hello"
+          flexDirection={DIRECTION_COLUMN}
         >
-          <Flex
-            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-            marginLeft={`-${SPACING.spacing32}`}
-            // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-            marginTop={`-${SPACING.spacing60}`}
-          >
-            <DeckConfigurator
-              deckConfig={deckConfig}
-              handleClickAdd={handleClickAdd}
-              handleClickRemove={handleClickRemove}
-            />
-          </Flex>
-          <Flex
-            flexDirection={DIRECTION_COLUMN}
-            gridGap={SPACING.spacing8}
-            width="32rem"
-          >
+          {isRunRunning ? (
+            <Banner type="warning">
+              {t('deck_configuration_is_not_available')}
+            </Banner>
+          ) : null}
+          <Flex gridGap={SPACING.spacing40}>
+            <Flex
+              // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+              marginLeft={`-${SPACING.spacing32}`}
+              // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+              marginTop={`-${SPACING.spacing60}`}
+              flexDirection={DIRECTION_COLUMN}
+            >
+              <DeckConfigurator
+                readOnly={isRunRunning}
+                deckConfig={deckConfig}
+                handleClickAdd={handleClickAdd}
+                handleClickRemove={handleClickRemove}
+              />
+            </Flex>
             <Flex
-              gridGap={SPACING.spacing32}
-              paddingLeft={SPACING.spacing8}
-              css={TYPOGRAPHY.labelSemiBold}
+              flexDirection={DIRECTION_COLUMN}
+              gridGap={SPACING.spacing8}
+              width="32rem"
             >
-              <StyledText>{t('location')}</StyledText>
-              <StyledText>{t('fixture')}</StyledText>
+              <Flex
+                gridGap={SPACING.spacing32}
+                paddingLeft={SPACING.spacing8}
+                css={TYPOGRAPHY.labelSemiBold}
+              >
+                <StyledText>{t('location')}</StyledText>
+                <StyledText>{t('fixture')}</StyledText>
+              </Flex>
+              {fixtureDisplayList.map(fixture => {
+                return (
+                  <Flex
+                    key={fixture.fixtureId}
+                    backgroundColor={COLORS.fundamentalsBackground}
+                    gridGap={SPACING.spacing60}
+                    padding={SPACING.spacing8}
+                    width={SIZE_5}
+                    css={TYPOGRAPHY.labelRegular}
+                  >
+                    <StyledText>{fixture.fixtureLocation}</StyledText>
+                    <StyledText>
+                      {getFixtureDisplayName(fixture.loadName)}
+                    </StyledText>
+                  </Flex>
+                )
+              })}
             </Flex>
-            {fixtureDisplayList.map(fixture => {
-              return (
-                <Flex
-                  key={fixture.fixtureId}
-                  backgroundColor={COLORS.fundamentalsBackground}
-                  gridGap={SPACING.spacing60}
-                  padding={SPACING.spacing8}
-                  width={SIZE_5}
-                  css={TYPOGRAPHY.labelRegular}
-                >
-                  <StyledText>{fixture.fixtureLocation}</StyledText>
-                  <StyledText>
-                    {getFixtureDisplayName(fixture.loadName)}
-                  </StyledText>
-                </Flex>
-              )
-            })}
           </Flex>
         </Flex>
       </Flex>