fix(app): fix physical odd stylistic issues (#13678)

Closes RQA-1513, RAUT-750, RQA-1686

Provides fixes for tearing snackbars & protocol command animations, magblock "is not connected" chip display, and flashing "firmware update" screens during wizard flows.

app/src/atoms/Snackbar/index.tsx

@@ -22,10 +22,17 @@ export interface SnackbarProps extends StyleProps {
 
 const SNACKBAR_ANIMATION_DURATION = 500
 
+const ODD_ANIMATION_OPTIMIZATIONS = `
+  backface-visibility: hidden;
+  perspective: 1000;
+  will-change: opacity;
+  `
+
 const OPEN_STYLE = css`
   animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
   animation-name: fadein;
   overflow: hidden;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
 
   @keyframes fadein {
     0% {
@@ -41,6 +48,7 @@ const CLOSE_STYLE = css`
   animation-duration: ${SNACKBAR_ANIMATION_DURATION}ms;
   animation-name: fadeout;
   overflow: hidden;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
 
   @keyframes fadeout {
     0% {

app/src/atoms/Toast/index.tsx

@@ -103,7 +103,7 @@ export function Toast(props: ToastProps): JSX.Element {
   const ODD_ANIMATION_OPTIMIZATIONS = `
   backface-visibility: hidden;
   perspective: 1000;
-  will-change: opacity, transform3d;
+  will-change: opacity, transform;
   `
   const DESKTOP_ANIMATION_SLIDE_UP_AND_IN = css`
     animation-duration: ${TOAST_ANIMATION_DURATION}ms;

app/src/organisms/GripperWizardFlows/getGripperWizardSteps.ts

@@ -12,7 +12,8 @@ import {
 import type { GripperWizardStep, GripperWizardFlowType } from './types'
 
 export const getGripperWizardSteps = (
-  flowType: GripperWizardFlowType
+  flowType: GripperWizardFlowType,
+  requiresFirmwareUpdate: boolean
 ): GripperWizardStep[] => {
   switch (flowType) {
     case GRIPPER_FLOW_TYPES.RECALIBRATE: {
@@ -31,7 +32,7 @@ export const getGripperWizardSteps = (
       ]
     }
     case GRIPPER_FLOW_TYPES.ATTACH: {
-      return [
+      const ALL_STEPS = [
         { section: SECTIONS.BEFORE_BEGINNING },
         { section: SECTIONS.MOUNT_GRIPPER },
         { section: SECTIONS.FIRMWARE_UPDATE },
@@ -47,6 +48,10 @@ export const getGripperWizardSteps = (
           successfulAction: SUCCESSFULLY_ATTACHED_AND_CALIBRATED,
         },
       ]
+
+      return requiresFirmwareUpdate
+        ? ALL_STEPS
+        : ALL_STEPS.filter(step => step.section !== SECTIONS.FIRMWARE_UPDATE)
     }
     case GRIPPER_FLOW_TYPES.DETACH: {
       return [
@@ -56,5 +61,4 @@ export const getGripperWizardSteps = (
       ]
     }
   }
-  return []
 }

app/src/organisms/GripperWizardFlows/index.tsx

@@ -209,7 +209,11 @@ export const GripperWizard = (
   } = props
   const isOnDevice = useSelector(getIsOnDevice)
   const { t } = useTranslation('gripper_wizard_flows')
-  const gripperWizardSteps = getGripperWizardSteps(flowType)
+  const requiresFirmwareUpdate = !attachedGripper?.ok
+  const gripperWizardSteps = getGripperWizardSteps(
+    flowType,
+    requiresFirmwareUpdate
+  )
   const [currentStepIndex, setCurrentStepIndex] = React.useState<number>(0)
   const [
     frontJawOffset,

app/src/organisms/ModuleWizardFlows/getModuleCalibrationSteps.ts

@@ -1,8 +1,10 @@
 import { SECTIONS } from './constants'
 import type { ModuleCalibrationWizardStep } from './types'
 
-export const getModuleCalibrationSteps = (): ModuleCalibrationWizardStep[] => {
-  return [
+export const getModuleCalibrationSteps = (
+  requiresFirmwareUpdate: boolean
+): ModuleCalibrationWizardStep[] => {
+  const ALL_STEPS = [
     { section: SECTIONS.BEFORE_BEGINNING },
     { section: SECTIONS.FIRMWARE_UPDATE },
     { section: SECTIONS.SELECT_LOCATION },
@@ -11,4 +13,8 @@ export const getModuleCalibrationSteps = (): ModuleCalibrationWizardStep[] => {
     { section: SECTIONS.DETACH_PROBE },
     { section: SECTIONS.SUCCESS },
   ]
+
+  return requiresFirmwareUpdate
+    ? ALL_STEPS
+    : ALL_STEPS.filter(step => step.section !== SECTIONS.FIRMWARE_UPDATE)
 }

app/src/organisms/ModuleWizardFlows/index.tsx

@@ -61,7 +61,13 @@ export const ModuleWizardFlows = (
   const { t } = useTranslation('module_wizard_flows')
   const attachedPipettes = useAttachedPipettesFromInstrumentsQuery()
   const attachedPipette = attachedPipettes.left ?? attachedPipettes.right
-  const moduleCalibrationSteps = getModuleCalibrationSteps()
+  const requiresFirmwareUpdate = !attachedPipette?.ok
+  const attachedPipetteMount =
+    attachedPipette?.mount === LEFT ? 'pipette_left' : 'pipette_right'
+
+  const moduleCalibrationSteps = getModuleCalibrationSteps(
+    requiresFirmwareUpdate
+  )
 
   const availableSlotNames =
     FLEX_SLOT_NAMES_BY_MOD_TYPE[getModuleType(attachedModule.moduleModel)] ?? []
@@ -263,9 +269,7 @@ export const ModuleWizardFlows = (
     modalContent = (
       <FirmwareUpdateModal
         proceed={proceed}
-        subsystem={
-          attachedPipette.mount === LEFT ? 'pipette_left' : 'pipette_right'
-        }
+        subsystem={attachedPipetteMount}
         description={t('firmware_update')}
       />
     )

app/src/organisms/OnDeviceDisplay/RunningProtocol/CurrentRunningProtocolCommand.tsx

@@ -36,14 +36,20 @@ import type { RunStatus } from '@opentrons/api-client'
 import type { TrackProtocolRunEvent } from '../../Devices/hooks'
 import type { RobotAnalyticsData } from '../../../redux/analytics/types'
 
+const ODD_ANIMATION_OPTIMIZATIONS = `
+  backface-visibility: hidden;
+  perspective: 1000;
+  will-change: opacity, transform;
+  `
+
 const fadeIn = keyframes`
 from {
   opacity: 0;
-  transform: translateY(100%);
+  transform: translate3d(0,15%,0);
 }
 to {
   opacity: 1;
-  transform: translateY(0%);
+  transform: translate3d(0,0,0);
 }
 `
 
@@ -79,6 +85,7 @@ const COMMAND_ROW_STYLE_ANIMATED = css`
   -webkit-line-clamp: 2;
   overflow: hidden;
   animation: ${fadeIn} 1.5s ease-in-out;
+  ${ODD_ANIMATION_OPTIMIZATIONS}
 `
 
 const COMMAND_ROW_STYLE = css`

app/src/organisms/PipetteWizardFlows/__tests__/getPipetteWizardSteps.test.tsx

@@ -34,9 +34,16 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.CALIBRATE, LEFT, SINGLE_MOUNT_PIPETTES, false)
+      getPipetteWizardSteps(
+        FLOWS.CALIBRATE,
+        LEFT,
+        SINGLE_MOUNT_PIPETTES,
+        false,
+        true
+      )
     ).toStrictEqual(mockCalibrateFlowSteps)
   })
+
   it('returns the correct array of info for attach pipette flow single channel', () => {
     const mockAttachPipetteFlowSteps = [
       {
@@ -77,7 +84,58 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.ATTACH, LEFT, SINGLE_MOUNT_PIPETTES, false)
+      getPipetteWizardSteps(
+        FLOWS.ATTACH,
+        LEFT,
+        SINGLE_MOUNT_PIPETTES,
+        false,
+        true
+      )
+    ).toStrictEqual(mockAttachPipetteFlowSteps)
+  })
+
+  it('returns the correct array of info when a firmware update is not required', () => {
+    const mockAttachPipetteFlowSteps = [
+      {
+        section: SECTIONS.BEFORE_BEGINNING,
+        mount: LEFT,
+        flowType: FLOWS.ATTACH,
+      },
+      {
+        section: SECTIONS.MOUNT_PIPETTE,
+        mount: LEFT,
+        flowType: FLOWS.ATTACH,
+      },
+      {
+        section: SECTIONS.RESULTS,
+        mount: LEFT,
+        flowType: FLOWS.ATTACH,
+      },
+      {
+        section: SECTIONS.ATTACH_PROBE,
+        mount: LEFT,
+        flowType: FLOWS.ATTACH,
+      },
+      {
+        section: SECTIONS.DETACH_PROBE,
+        mount: LEFT,
+        flowType: FLOWS.ATTACH,
+      },
+      {
+        section: SECTIONS.RESULTS,
+        mount: LEFT,
+        flowType: FLOWS.CALIBRATE,
+      },
+    ] as PipetteWizardStep[]
+
+    expect(
+      getPipetteWizardSteps(
+        FLOWS.ATTACH,
+        LEFT,
+        SINGLE_MOUNT_PIPETTES,
+        false,
+        false
+      )
     ).toStrictEqual(mockAttachPipetteFlowSteps)
   })
 
@@ -101,7 +159,13 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.DETACH, LEFT, SINGLE_MOUNT_PIPETTES, false)
+      getPipetteWizardSteps(
+        FLOWS.DETACH,
+        LEFT,
+        SINGLE_MOUNT_PIPETTES,
+        false,
+        true
+      )
     ).toStrictEqual(mockDetachPipetteFlowSteps)
   })
 
@@ -155,7 +219,7 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.ATTACH, LEFT, NINETY_SIX_CHANNEL, true)
+      getPipetteWizardSteps(FLOWS.ATTACH, LEFT, NINETY_SIX_CHANNEL, true, true)
     ).toStrictEqual(mockAttachPipetteFlowSteps)
   })
 
@@ -189,7 +253,7 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.DETACH, LEFT, NINETY_SIX_CHANNEL, true)
+      getPipetteWizardSteps(FLOWS.DETACH, LEFT, NINETY_SIX_CHANNEL, true, true)
     ).toStrictEqual(mockDetachPipetteFlowSteps)
   })
   it('returns the correct array when 96-channel is going to be attached and there is a pipette already on the mount', () => {
@@ -248,7 +312,7 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.ATTACH, LEFT, NINETY_SIX_CHANNEL, false)
+      getPipetteWizardSteps(FLOWS.ATTACH, LEFT, NINETY_SIX_CHANNEL, false, true)
     ).toStrictEqual(mockAttachPipetteFlowSteps)
   })
   it('returns the corect array of info for calibrate pipette 96 channel', () => {
@@ -276,7 +340,13 @@ describe('getPipetteWizardSteps', () => {
     ] as PipetteWizardStep[]
 
     expect(
-      getPipetteWizardSteps(FLOWS.CALIBRATE, LEFT, NINETY_SIX_CHANNEL, false)
+      getPipetteWizardSteps(
+        FLOWS.CALIBRATE,
+        LEFT,
+        NINETY_SIX_CHANNEL,
+        false,
+        true
+      )
     ).toStrictEqual(mockCalibrateFlowSteps)
   })
 })