From cd69e1921f9886e71f6aea750f44f63fdd8f74fa Mon Sep 17 00:00:00 2001 From: Katie Adee Date: Thu, 13 Dec 2018 13:30:21 -0500 Subject: [PATCH] feat(app): Add opt-in modal for new p10s (#2816) Closes #2793 --- app-shell/src/config.js | 6 +- .../RobotSettings/AdvancedSettingsCard.js | 66 ++++++++++++++++--- .../RobotSettings/OptInPipetteModal/index.js | 55 ++++++++++++++++ .../OptInPipetteModal/styles.css | 10 +++ app/src/config/index.js | 4 ++ 5 files changed, 130 insertions(+), 11 deletions(-) create mode 100644 app/src/components/RobotSettings/OptInPipetteModal/index.js create mode 100644 app/src/components/RobotSettings/OptInPipetteModal/styles.css diff --git a/app-shell/src/config.js b/app-shell/src/config.js index a7b9469fee7..877a8b8180a 100644 --- a/app-shell/src/config.js +++ b/app-shell/src/config.js @@ -15,9 +15,7 @@ import type {Config} from '@opentrons/app/src/config' // make sure all arguments are included in production // $FlowFixMe: process.defaultApp exists in electron -const argv = process.defaultApp - ? process.argv.slice(2) - : process.argv.slice(1) +const argv = process.defaultApp ? process.argv.slice(2) : process.argv.slice(1) const PARSE_ARGS_OPTS = { envPrefix: 'OT_APP', @@ -63,6 +61,8 @@ const DEFAULTS: Config = { seenOptIn: false, }, + p10WarningSeen: {}, + // user support (intercom) support: { userId: uuid(), diff --git a/app/src/components/RobotSettings/AdvancedSettingsCard.js b/app/src/components/RobotSettings/AdvancedSettingsCard.js index e3f64410c2b..fccb7c3b5e4 100644 --- a/app/src/components/RobotSettings/AdvancedSettingsCard.js +++ b/app/src/components/RobotSettings/AdvancedSettingsCard.js @@ -3,16 +3,20 @@ 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 type {State, Dispatch} from '../../types' import type {ViewableRobot} from '../../discovery' @@ -23,12 +27,16 @@ type OP = { resetUrl: string, } -type SP = {|settings: Array|} +type SP = {| + settings: Array, + showP10Warning: boolean, +|} type DP = {| fetch: () => mixed, set: (id: string, value: boolean) => mixed, download: () => mixed, + setP10WarningSeen: () => mixed, |} type Props = {...$Exact, ...SP, ...DP} @@ -42,6 +50,7 @@ type BooleanSettingProps = { } const TITLE = 'Advanced Settings' +const P10_OPT_IN_SETTING_ID = 'useNewP10Aspiration' export default connect( makeMapStateToProps, @@ -65,11 +74,19 @@ class BooleanSettingToggle extends React.Component { } function AdvancedSettingsCard (props: Props) { - const {settings, set, fetch, download, resetUrl} = 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 (

Restore robot to factory configuration

- {settings.map(s => )} + {showP10Warning && ( + + )} + {settings.map(s => ( + + ))} ) } +const seenP10WarningConfigPath = (name: string) => `p10WarningSeen.${name}` + function makeMapStateToProps (): (state: State, ownProps: OP) => SP { const getRobotSettings = makeGetRobotSettings() return (state, ownProps) => { - const settingsRequest = getRobotSettings(state, ownProps.robot) + const {robot} = ownProps + const config = getConfig(state) + const settingsRequest = getRobotSettings(state, robot) const settings = settingsRequest && settingsRequest.response && settingsRequest.response.settings - return {settings: settings || []} + const p10OptedIn = reduce( + settings, + (result, setting) => { + if (setting.id === P10_OPT_IN_SETTING_ID) return setting.value + return result + }, + null + ) + + const seenP10Warning = get(config, seenP10WarningConfigPath(robot.name)) + + return { + settings: settings || [], + showP10Warning: !seenP10Warning && p10OptedIn === false, + } } } 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) => dispatch(setSettings(robot, {id, value})), + set: (id, value) => { + if (id === P10_OPT_IN_SETTING_ID) { + setP10WarningSeen() + } + dispatch(setSettings(robot, {id, value})) + }, download: () => dispatch(downloadLogs(robot)), + setP10WarningSeen, } } diff --git a/app/src/components/RobotSettings/OptInPipetteModal/index.js b/app/src/components/RobotSettings/OptInPipetteModal/index.js new file mode 100644 index 00000000000..12bc59f8f04 --- /dev/null +++ b/app/src/components/RobotSettings/OptInPipetteModal/index.js @@ -0,0 +1,55 @@ +// @flow +import * as React from 'react' +import {AlertModal} from '@opentrons/components' +import {Portal} from '../../portal' +import styles from './styles.css' +type Props = { + setP10Setting: () => mixed, + setP10WarningSeen: () => mixed, +} + +export default function OptInModal (props: Props) { + const {setP10Setting, setP10WarningSeen} = props + const HEADING = 'Update available for P10 single-channel pipette' + const buttons = [ + {onClick: setP10WarningSeen, children: 'not now'}, + { + onClick: setP10Setting, + children: 'Update Pipette Function', + className: styles.width_auto, + }, + ] + return ( + + +

+ + There is an updated aspiration function available for the P10 + single-channel pipette. + +

+ +

+ This is a small but material change to the P10's pipetting + performance based on an expanded data set. In particular, it decreases + the low-volume µl-to-mm conversion factor to address under-aspiration + issues. +

+ +

+ + We strongly recommend you update your pipette function + + , unless you are an advanced user who has manually modified your P10S + pipette's µl-to-mm conversion factor. +

+ +

+ * This setting can be changed in your robot's "Advanced + Settings" menu. If you have any questions, please contact our + Support Team. +

+ + + ) +} diff --git a/app/src/components/RobotSettings/OptInPipetteModal/styles.css b/app/src/components/RobotSettings/OptInPipetteModal/styles.css new file mode 100644 index 00000000000..6291597d362 --- /dev/null +++ b/app/src/components/RobotSettings/OptInPipetteModal/styles.css @@ -0,0 +1,10 @@ +@import '@opentrons/components'; + +.width_auto { + width: auto; + padding: 0.5rem 2rem; +} + +.footer { + font-style: italic; +} diff --git a/app/src/config/index.js b/app/src/config/index.js index b062ed77486..ede19abe122 100644 --- a/app/src/config/index.js +++ b/app/src/config/index.js @@ -46,6 +46,10 @@ export type Config = { seenOptIn: boolean, }, + p10WarningSeen: { + [id: string]: ?boolean, + }, + support: { userId: string, createdAt: number,