refactor(app): refactor Robotsettings Advancedtab for isRobotBusy (#1…

…1188) This pr changes the component that calls useIsBusyRobot from each RobotSettingsAdvance child component from RobotSettingsAdvance component and useIsBusyRobot fetches the status every 30sec. fix #11128
Opentrons · Jul 22, 2022 · 30ee961 · 30ee961
1 parent 72f6d4b
commit 30ee961
Show file tree

Hide file tree

Showing 19 changed files with 76 additions and 208 deletions.
diff --git a/app/src/atoms/buttons/index.tsx b/app/src/atoms/buttons/index.tsx
@@ -152,7 +152,7 @@ const TOGGLE_DISABLED_STYLES = css`
   }
 
   &:disabled {
-    colors: ${COLORS.greyDisabled};
+    color: ${COLORS.greyDisabled};
   }
 `
 
@@ -168,7 +168,7 @@ const TOGGLE_ENABLED_STYLES = css`
   }
 
   &:disabled {
-    colors: ${COLORS.greyDisabled};
+    color: ${COLORS.greyDisabled};
   }
 `
 

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisableHoming.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisableHoming.tsx
@@ -13,7 +13,6 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { ToggleButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 import { updateSetting } from '../../../../redux/robot-settings'
 
 import type { Dispatch } from '../../../../redux/types'
@@ -22,24 +21,21 @@ import type { RobotSettingsField } from '../../../../redux/robot-settings/types'
 interface DisableHomingProps {
   settings: RobotSettingsField | undefined
   robotName: string
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function DisableHoming({
   settings,
   robotName,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: DisableHomingProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const dispatch = useDispatch<Dispatch>()
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'disableHomeOnBoot'
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<Element> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
   }
@@ -61,6 +57,7 @@ export function DisableHoming({
         toggledOn={value}
         onClick={handleClick}
         id="RobotSettings_disableHomingToggleButton"
+        disabled={isRobotBusy}
       />
     </Flex>
   )

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DisplayRobotName.tsx
@@ -13,28 +13,24 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { TertiaryButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 interface DisplayRobotNameProps {
   robotName: string
   updateIsExpanded: (
     isExpanded: boolean,
     type: 'factoryReset' | 'renameRobot'
   ) => void
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function DisplayRobotName({
   robotName,
   updateIsExpanded,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: DisplayRobotNameProps): JSX.Element {
   const { t } = useTranslation('device_settings')
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       updateIsExpanded(true, 'renameRobot')
     }
   }
@@ -63,6 +59,7 @@ export function DisplayRobotName({
         marginLeft={SPACING_AUTO}
         onClick={handleClick}
         id="RobotSettings_RenameRobot"
+        disabled={isRobotBusy}
       >
         {t('robot_rename_button')}
       </TertiaryButton>

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/FactoryReset.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/FactoryReset.tsx
@@ -13,27 +13,23 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { TertiaryButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 
 interface FactoryResetProps {
   updateIsExpanded: (
     isExpanded: boolean,
     type: 'factoryReset' | 'renameRobot'
   ) => void
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function FactoryReset({
   updateIsExpanded,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: FactoryResetProps): JSX.Element {
   const { t } = useTranslation('device_settings')
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       updateIsExpanded(true, 'factoryReset')
     }
   }
@@ -54,6 +50,7 @@ export function FactoryReset({
         marginLeft={SPACING_AUTO}
         onClick={handleClick}
         id="RobotSettings_FactoryResetChooseButton"
+        disabled={isRobotBusy}
       >
         {t('choose_reset_settings')}
       </TertiaryButton>

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/LegacySettings.tsx
@@ -13,7 +13,6 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { ToggleButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 import { updateSetting } from '../../../../redux/robot-settings'
 
 import type { Dispatch } from '../../../../redux/types'
@@ -22,24 +21,21 @@ import type { RobotSettingsField } from '../../../../redux/robot-settings/types'
 interface LegacySettingsProps {
   settings: RobotSettingsField | undefined
   robotName: string
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function LegacySettings({
   settings,
   robotName,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: LegacySettingsProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const dispatch = useDispatch<Dispatch>()
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'deckCalibrationDots'
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<Element> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
   }
@@ -69,6 +65,7 @@ export function LegacySettings({
         toggledOn={settings?.value === true}
         onClick={handleClick}
         id="RobotSettings_legacySettingsToggleButton"
+        disabled={isRobotBusy}
       />
     </Flex>
   )

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx
@@ -13,7 +13,6 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { ToggleButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 import { updateSetting } from '../../../../redux/robot-settings'
 
 import type { Dispatch } from '../../../../redux/types'
@@ -22,24 +21,21 @@ import type { RobotSettingsField } from '../../../../redux/robot-settings/types'
 interface ShortTrashBinProps {
   settings: RobotSettingsField | undefined
   robotName: string
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function ShortTrashBin({
   settings,
   robotName,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: ShortTrashBinProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const dispatch = useDispatch<Dispatch>()
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'shortTrashBin'
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<Element> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
   }
@@ -63,6 +59,7 @@ export function ShortTrashBin({
         toggledOn={settings?.value === true}
         onClick={handleClick}
         id="AdvancedSettings_shortTrashBin"
+        disabled={isRobotBusy}
       />
     </Flex>
   )

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx
@@ -13,7 +13,6 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { ToggleButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 import { updateSetting } from '../../../../redux/robot-settings'
 
 import type { Dispatch } from '../../../../redux/types'
@@ -22,24 +21,21 @@ import type { RobotSettingsField } from '../../../../redux/robot-settings/types'
 interface UsageSettingsProps {
   settings: RobotSettingsField | undefined
   robotName: string
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function UsageSettings({
   settings,
   robotName,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: UsageSettingsProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const dispatch = useDispatch<Dispatch>()
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'enableDoorSafetySwitch'
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<Element> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
   }
@@ -68,6 +64,7 @@ export function UsageSettings({
         toggledOn={settings?.value === true}
         onClick={handleClick}
         id="RobotSettings_usageSettingsToggleButton"
+        disabled={isRobotBusy}
       />
     </Flex>
   )

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderAspirateBehavior.tsx
@@ -13,7 +13,6 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { ToggleButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 import { updateSetting } from '../../../../redux/robot-settings'
 
 import type { Dispatch } from '../../../../redux/types'
@@ -22,24 +21,21 @@ import type { RobotSettingsField } from '../../../../redux/robot-settings/types'
 interface UseOlderAspirateBehaviorProps {
   settings: RobotSettingsField | undefined
   robotName: string
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function UseOlderAspirateBehavior({
   settings,
   robotName,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: UseOlderAspirateBehaviorProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const dispatch = useDispatch<Dispatch>()
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'useOldAspirationFunctions'
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<Element> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
   }
@@ -61,6 +57,7 @@ export function UseOlderAspirateBehavior({
         toggledOn={settings?.value === true}
         onClick={handleClick}
         id="AdvancedSettings_useOlderAspirate"
+        disabled={isRobotBusy}
       />
     </Flex>
   )

diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderProtocol.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UseOlderProtocol.tsx
@@ -13,32 +13,28 @@ import {
 
 import { StyledText } from '../../../../atoms/text'
 import { ToggleButton } from '../../../../atoms/buttons'
-import { useIsRobotBusy } from '../../hooks'
 import { updateSetting } from '../../../../redux/robot-settings'
 
 import type { Dispatch } from '../../../../redux/types'
 import type { RobotSettingsField } from '../../../../redux/robot-settings/types'
 interface UseOlderProtocolProps {
   settings: RobotSettingsField | undefined
   robotName: string
-  updateIsRobotBusy: (isRobotBusy: boolean) => void
+  isRobotBusy: boolean
 }
 
 export function UseOlderProtocol({
   settings,
   robotName,
-  updateIsRobotBusy,
+  isRobotBusy,
 }: UseOlderProtocolProps): JSX.Element {
   const { t } = useTranslation('device_settings')
   const dispatch = useDispatch<Dispatch>()
   const value = settings?.value ? settings.value : false
   const id = settings?.id ? settings.id : 'disableFastProtocolUpload'
-  const isBusy = useIsRobotBusy()
 
   const handleClick: React.MouseEventHandler<Element> = () => {
-    if (isBusy) {
-      updateIsRobotBusy(true)
-    } else {
+    if (!isRobotBusy) {
       dispatch(updateSetting(robotName, id, !value))
     }
   }
@@ -66,6 +62,7 @@ export function UseOlderProtocol({
         toggledOn={settings?.value === true}
         onClick={handleClick}
         id="RobotSettings_useOlderProtocolToggleButton"
+        disabled={isRobotBusy}
       />
     </Flex>
   )