feat(protocol-designer): add modal to pause after set temp

protocol-designer/src/components/StepCreationButton.js

@@ -132,7 +132,7 @@ const mapSTP = (state: BaseState): SP => {
 
 const mapDTP = (dispatch: ThunkDispatch<*>): DP => ({
   makeAddStep: (stepType: StepType) => (e: SyntheticEvent<>) =>
-    dispatch(stepsActions.addStep({ stepType })),
+    dispatch(stepsActions.addAndSelectStepWithHints({ stepType })),
 })
 
 export const StepCreationButton = connect<Props, {||}, SP, DP, _, _>(

protocol-designer/src/components/StepEditForm/ButtonRow/index.js

@@ -1,61 +1,99 @@
 // @flow
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import cx from 'classnames'
 import { OutlineButton, PrimaryButton } from '@opentrons/components'
-
+import { AutoAddPauseUntilTempStepModal } from '../../modals/AutoAddPauseUntilTempStepModal'
 import { actions as steplistActions } from '../../../steplist'
-import { actions as stepFormActions } from '../../../step-forms'
+import { actions as stepsActions } from '../../../ui/steps'
 
-import { getCurrentFormCanBeSaved } from '../../../step-forms/selectors'
+import {
+  getCurrentFormCanBeSaved,
+  getUnsavedForm,
+  getUnsavedFormIsPristineSetTempForm,
+} from '../../../step-forms/selectors'
 
 import type { BaseState } from '../../../types'
 
 import modalStyles from '../../modals/modal.css'
 import styles from './styles.css'
 
-const { cancelStepForm } = steplistActions
-const { saveStepForm } = stepFormActions
-
 type Props = {|
   onClickMoreOptions: (event: SyntheticEvent<>) => mixed,
   onDelete?: (event: SyntheticEvent<>) => mixed,
 |}
 
 export const ButtonRow = ({ onDelete, onClickMoreOptions }: Props) => {
+  const [
+    showAddPauseUntilTempStepModal,
+    setShowAddPauseUntilTempStepModal,
+  ] = useState<boolean>(false)
+
+  const dispatch = useDispatch()
   const canSave = useSelector((state: BaseState): boolean =>
     getCurrentFormCanBeSaved(state)
   )
-  const dispatch = useDispatch()
+  const unsavedForm = useSelector(getUnsavedForm)
+  const shouldShowPauseUntilTempStepModal = useSelector(
+    getUnsavedFormIsPristineSetTempForm
+  )
+
+  const handleClickSave = useCallback(() => {
+    if (!canSave) {
+      return
+    }
+    if (shouldShowPauseUntilTempStepModal) {
+      setShowAddPauseUntilTempStepModal(true)
+    } else {
+      dispatch(stepsActions.saveStepForm())
+    }
+  }, [canSave, shouldShowPauseUntilTempStepModal, dispatch])
 
   return (
-    <div className={cx(modalStyles.button_row_divided, styles.form_wrapper)}>
-      <div>
-        <OutlineButton className={styles.form_button} onClick={onDelete}>
-          Delete
-        </OutlineButton>
-        <OutlineButton
-          className={styles.form_button}
-          onClick={onClickMoreOptions}
-        >
-          Notes
-        </OutlineButton>
-      </div>
-      <div>
-        <PrimaryButton
-          className={styles.form_button}
-          onClick={() => dispatch(cancelStepForm())}
-        >
-          Close
-        </PrimaryButton>
-        <PrimaryButton
-          className={styles.form_button}
-          disabled={!canSave}
-          onClick={canSave ? () => dispatch(saveStepForm()) : undefined}
-        >
-          Save
-        </PrimaryButton>
+    <>
+      {showAddPauseUntilTempStepModal && (
+        <AutoAddPauseUntilTempStepModal
+          displayTemperature={unsavedForm?.targetTemperature ?? '?'}
+          handleCancelClick={() => {
+            setShowAddPauseUntilTempStepModal(false)
+            // save normally
+            dispatch(stepsActions.saveStepForm())
+          }}
+          handleContinueClick={() => {
+            setShowAddPauseUntilTempStepModal(false)
+            // save this form and add a subsequent pause
+            dispatch(stepsActions.saveSetTempFormWithAddedPauseUntilTemp())
+          }}
+        />
+      )}
+      <div className={cx(modalStyles.button_row_divided, styles.form_wrapper)}>
+        <div>
+          <OutlineButton className={styles.form_button} onClick={onDelete}>
+            Delete
+          </OutlineButton>
+          <OutlineButton
+            className={styles.form_button}
+            onClick={onClickMoreOptions}
+          >
+            Notes
+          </OutlineButton>
+        </div>
+        <div>
+          <PrimaryButton
+            className={styles.form_button}
+            onClick={() => dispatch(steplistActions.cancelStepForm())}
+          >
+            Close
+          </PrimaryButton>
+          <PrimaryButton
+            className={styles.form_button}
+            disabled={!canSave}
+            onClick={handleClickSave}
+          >
+            Save
+          </PrimaryButton>
+        </div>
       </div>
-    </div>
+    </>
   )
 }

protocol-designer/src/components/modals/AutoAddPauseUntilTempStepModal.css

@@ -0,0 +1,20 @@
+@import '@opentrons/components';
+
+.header {
+  @apply --font-header-dark;
+
+  margin-bottom: 1rem;
+}
+
+.body {
+  @apply --font-body-2-dark;
+}
+
+.later_button {
+  width: 16rem;
+}
+
+.now_button {
+  width: 15rem;
+  margin-left: 1rem;
+}

protocol-designer/src/components/modals/AutoAddPauseUntilTempStepModal.js

@@ -0,0 +1,44 @@
+// @flow
+import React from 'react'
+import { AlertModal, OutlineButton, PrimaryButton } from '@opentrons/components'
+import { i18n } from '../../localization'
+import modalStyles from './modal.css'
+import styles from './AutoAddPauseUntilTempStepModal.css'
+
+type Props = {|
+  displayTemperature: string,
+  handleCancelClick: () => mixed,
+  handleContinueClick: () => mixed,
+|}
+
+export const AutoAddPauseUntilTempStepModal = (props: Props) => (
+  <AlertModal
+    className={modalStyles.modal}
+    contentsClassName={modalStyles.modal_contents}
+  >
+    <div className={styles.header}>
+      {i18n.t('modal.auto_add_pause_until_temp_step.title', {
+        temperature: props.displayTemperature,
+      })}
+    </div>
+    <p className={styles.body}>
+      {i18n.t('modal.auto_add_pause_until_temp_step.body', {
+        temperature: props.displayTemperature,
+      })}
+    </p>
+    <div className={modalStyles.button_row}>
+      <OutlineButton
+        className={styles.later_button}
+        onClick={props.handleCancelClick}
+      >
+        {i18n.t('modal.auto_add_pause_until_temp_step.later_button')}
+      </OutlineButton>
+      <PrimaryButton
+        className={styles.now_button}
+        onClick={props.handleContinueClick}
+      >
+        {i18n.t('modal.auto_add_pause_until_temp_step.now_button')}
+      </PrimaryButton>
+    </div>
+  </AlertModal>
+)

protocol-designer/src/labware-ingred/selectors.js

@@ -20,7 +20,7 @@ import type {
   LiquidGroup,
   OrderedLiquids,
 } from './types'
-import type { BaseState, MemoizedSelector } from './../types'
+import type { BaseState, MemoizedSelector, Selector } from './../types'
 
 // TODO: Ian 2019-02-15 no RootSlice, use BaseState
 type RootSlice = { labwareIngred: RootState }
@@ -143,7 +143,7 @@ const getLiquidGroupsOnDeck: MemoizedSelector<Array<string>> = createSelector(
   }
 )
 
-const getDeckHasLiquid: MemoizedSelector<boolean> = createSelector(
+const getDeckHasLiquid: Selector<boolean> = createSelector(
   getLiquidGroupsOnDeck,
   liquidGroups => liquidGroups.length > 0
 )

protocol-designer/src/localization/en/modal.json

@@ -100,5 +100,11 @@
       "body1": "Warning: Any experimental features used in this protocol may cause inconsistent behavior in the Protocol Designer. For example, the Protocol Designer may no longer display all warnings or errors that exist when no experimental features have been used.",
       "body2": "We encourage you to report any bugs you find, however note that at this time we are unable to prioritize fixes as they are a result of experimental features."
     }
+  },
+  "auto_add_pause_until_temp_step": {
+    "title": "Pause until module is {{temperature}}°C?",
+    "body": "Should your protocol pause until the module is {{temperature}}°C? Or should the protocol continue while the module changes temperature?",
+    "now_button": "Pause protocol now",
+    "later_button": "I will build a pause later"
   }
 }

protocol-designer/src/step-forms/actions/index.js

@@ -1,18 +1,3 @@
 // @flow
-import { getUnsavedForm } from '../selectors'
-import type { Dispatch } from 'redux'
-import type { StepIdType } from '../../form-types'
-import type { GetState } from '../../types'
-
 export * from './modules'
 export * from './pipettes'
-
-export const SAVE_STEP_FORM: 'SAVE_STEP_FORM' = 'SAVE_STEP_FORM'
-
-export type SaveStepFormAction = {|
-  type: typeof SAVE_STEP_FORM,
-  payload: { id: StepIdType },
-|}
-
-export const saveStepForm = () => (dispatch: Dispatch<*>, getState: GetState) =>
-  dispatch({ type: SAVE_STEP_FORM, payload: getUnsavedForm(getState()) })

protocol-designer/src/step-forms/reducers/index.js

@@ -58,7 +58,8 @@ import type {
 import type {
   DuplicateStepAction,
   ReorderSelectedStepAction,
-} from '../../ui/steps'
+} from '../../ui/steps/actions/types'
+import type { SaveStepFormAction } from '../../ui/steps/actions/thunks'
 import type { StepItemData } from '../../steplist/types'
 import type {
   NormalizedPipetteById,
@@ -73,7 +74,6 @@ import type {
   CreateModuleAction,
   EditModuleAction,
   DeleteModuleAction,
-  SaveStepFormAction,
 } from '../actions'
 
 type FormState = FormData | null

protocol-designer/src/step-forms/selectors/index.js

@@ -523,6 +523,17 @@ export const getIsNewStepForm: Selector<boolean> = createSelector(
     formData && formData.id != null ? !savedForms[formData.id] : true
 )
 
+export const getUnsavedFormIsPristineSetTempForm: Selector<boolean> = createSelector(
+  getUnsavedForm,
+  getIsNewStepForm,
+  (unsavedForm, isNewStepForm) => {
+    const isSetTempForm =
+      unsavedForm?.stepType === 'temperature' &&
+      unsavedForm?.setTemperature === 'true'
+    return isNewStepForm && isSetTempForm
+  }
+)
+
 export const getFormLevelWarningsForUnsavedForm: Selector<
   Array<FormWarning>
 > = createSelector(