feat(app): Replace P10 update warning with one for all pipettes (#3043)

Closes #3011

app-shell/src/config.js

@@ -61,6 +61,7 @@ const DEFAULTS: Config = {
     seenOptIn: false,
   },
 
+  // deprecated; remove with first migration
   p10WarningSeen: {},
 
   // user support (intercom)

app/src/components/RobotSettings/AdvancedSettingsCard.js

@@ -3,24 +3,24 @@
 import * as React from 'react'
 import {connect} from 'react-redux'
 import {Link} from 'react-router-dom'
-import get from 'lodash/get'
 import reduce from 'lodash/reduce'
 
 import {
   fetchSettings,
   setSettings,
   makeGetRobotSettings,
 } from '../../http-api-client'
-import {getConfig, updateConfig} from '../../config'
+
 import {CONNECTABLE} from '../../discovery'
 import {downloadLogs} from '../../shell'
 import {RefreshCard} from '@opentrons/components'
 import {LabeledButton, LabeledToggle} from '../controls'
-import OptInPipetteModal from './OptInPipetteModal'
+import PipetteUpdateWarningModal from './PipetteUpdateWarningModal'
 
 import type {State, Dispatch} from '../../types'
 import type {ViewableRobot} from '../../discovery'
 import type {Setting} from '../../http-api-client'
+import type {ToggleRef} from './PipetteUpdateWarningModal'
 
 type OP = {
   robot: ViewableRobot,
@@ -29,14 +29,13 @@ type OP = {
 
 type SP = {|
   settings: Array<Setting>,
-  showP10Warning: boolean,
+  showPipetteUpdateWarning: boolean,
 |}
 
 type DP = {|
   fetch: () => mixed,
   set: (id: string, value: boolean) => mixed,
   download: () => mixed,
-  setP10WarningSeen: () => mixed,
 |}
 
 type Props = {...$Exact<OP>, ...SP, ...DP}
@@ -45,17 +44,13 @@ type BooleanSettingProps = {
   id: string,
   title: string,
   description: string,
-  value: boolean,
+  value: boolean | null,
   set: (id: string, value: boolean) => mixed,
+  toggleRef?: ToggleRef,
 }
 
 const TITLE = 'Advanced Settings'
-const P10_OPT_IN_SETTING_ID = 'useNewP10Aspiration'
-
-export default connect(
-  makeMapStateToProps,
-  mapDispatchToProps
-)(AdvancedSettingsCard)
+const PIPETTE_UPDATE_OPT_OUT_ID = 'useOldAspirationFunctions'
 
 class BooleanSettingToggle extends React.Component<BooleanSettingProps> {
   toggle = value => this.props.set(this.props.id, !this.props.value)
@@ -65,115 +60,127 @@ class BooleanSettingToggle extends React.Component<BooleanSettingProps> {
       <LabeledToggle
         label={this.props.title}
         onClick={this.toggle}
-        toggledOn={this.props.value}
+        toggledOn={this.props.value === true}
       >
-        <p>{this.props.description}</p>
+        <p ref={this.props.toggleRef}>{this.props.description}</p>
       </LabeledToggle>
     )
   }
 }
 
-function AdvancedSettingsCard (props: Props) {
-  const {
-    settings,
-    set,
-    fetch,
-    download,
-    resetUrl,
-    showP10Warning,
-    setP10WarningSeen,
-  } = props
-  const {name, health, status} = props.robot
-  const disabled = status !== CONNECTABLE
-  const logsAvailable = health && health.logs
-  const setP10Setting = () => set(P10_OPT_IN_SETTING_ID, true)
-  return (
-    <RefreshCard
-      watch={name}
-      refresh={fetch}
-      title={TITLE}
-      disabled={disabled}
-      column
-    >
-      <LabeledButton
-        label="Download Logs"
-        buttonProps={{
-          disabled: disabled || !logsAvailable,
-          onClick: download,
-          children: 'Download',
-        }}
-      >
-        <p>Access logs from this robot.</p>
-      </LabeledButton>
-      <LabeledButton
-        label="Factory Reset"
-        buttonProps={{
-          disabled,
-          Component: Link,
-          to: resetUrl,
-          children: 'Reset',
-        }}
+class AdvancedSettingsCard extends React.Component<Props> {
+  pipetteUpdateOptOutRef: ToggleRef
+
+  constructor (props: Props) {
+    super(props)
+    this.pipetteUpdateOptOutRef = React.createRef()
+  }
+
+  render () {
+    const {
+      robot,
+      settings,
+      set,
+      fetch,
+      download,
+      resetUrl,
+      showPipetteUpdateWarning,
+    } = this.props
+    const {name, health, status} = robot
+    const disabled = status !== CONNECTABLE
+    const logsAvailable = health && health.logs
+
+    return (
+      <RefreshCard
+        watch={name}
+        refresh={fetch}
+        title={TITLE}
+        disabled={disabled}
+        column
       >
-        <p>Restore robot to factory configuration</p>
-      </LabeledButton>
-      {showP10Warning && (
-        <OptInPipetteModal
-          setP10Setting={setP10Setting}
-          setP10WarningSeen={setP10WarningSeen}
-        />
-      )}
-      {settings.map(s => (
-        <BooleanSettingToggle {...s} key={s.id} set={set} />
-      ))}
-    </RefreshCard>
-  )
+        <LabeledButton
+          label="Download Logs"
+          buttonProps={{
+            disabled: disabled || !logsAvailable,
+            onClick: download,
+            children: 'Download',
+          }}
+        >
+          <p>Access logs from this robot.</p>
+        </LabeledButton>
+        <LabeledButton
+          label="Factory Reset"
+          buttonProps={{
+            disabled,
+            Component: Link,
+            to: resetUrl,
+            children: 'Reset',
+          }}
+        >
+          <p>Restore robot to factory configuration</p>
+        </LabeledButton>
+        {showPipetteUpdateWarning && (
+          <PipetteUpdateWarningModal
+            id={PIPETTE_UPDATE_OPT_OUT_ID}
+            set={set}
+            toggleRef={this.pipetteUpdateOptOutRef}
+          />
+        )}
+        {settings.map(s => (
+          <BooleanSettingToggle
+            {...s}
+            key={s.id}
+            set={set}
+            toggleRef={
+              s.id === PIPETTE_UPDATE_OPT_OUT_ID
+                ? this.pipetteUpdateOptOutRef
+                : undefined
+            }
+          />
+        ))}
+      </RefreshCard>
+    )
+  }
 }
 
-const seenP10WarningConfigPath = (name: string) => `p10WarningSeen.${name}`
-
 function makeMapStateToProps (): (state: State, ownProps: OP) => SP {
   const getRobotSettings = makeGetRobotSettings()
 
   return (state, ownProps) => {
     const {robot} = ownProps
-    const config = getConfig(state)
     const settingsRequest = getRobotSettings(state, robot)
     const settings =
       settingsRequest &&
       settingsRequest.response &&
       settingsRequest.response.settings
 
-    const p10OptedIn = reduce(
+    const pipetteUpdateOptedOut = reduce(
       settings,
       (result, setting) => {
-        if (setting.id === P10_OPT_IN_SETTING_ID) return setting.value
+        if (setting.id === PIPETTE_UPDATE_OPT_OUT_ID) return setting.value
         return result
       },
-      null
+      false
     )
 
-    const seenP10Warning = get(config, seenP10WarningConfigPath(robot.name))
-
     return {
       settings: settings || [],
-      showP10Warning: !seenP10Warning && p10OptedIn === false,
+      showPipetteUpdateWarning: pipetteUpdateOptedOut === null,
     }
   }
 }
 
 function mapDispatchToProps (dispatch: Dispatch, ownProps: OP): DP {
   const {robot} = ownProps
-  const setP10WarningSeen = () =>
-    dispatch(updateConfig(seenP10WarningConfigPath(robot.name), true))
+
   return {
     fetch: () => dispatch(fetchSettings(robot)),
-    set: (id, value) => {
-      if (id === P10_OPT_IN_SETTING_ID) {
-        setP10WarningSeen()
-      }
-      dispatch(setSettings(robot, {id, value}))
-    },
+    set: (id, value) => dispatch(setSettings(robot, {id, value})),
     download: () => dispatch(downloadLogs(robot)),
-    setP10WarningSeen,
   }
 }
+
+export default connect(
+  makeMapStateToProps,
+  mapDispatchToProps
+)(AdvancedSettingsCard)