Merge branch 'pd_dev_confiramtion' of https://github.com/Opentrons/op…

…entrons into pd-flex-pipette-selection

protocol-designer/src/components/FlexProtocolEditor/CreateFlexFileForm.tsx

@@ -1,30 +1,65 @@
-import * as React from 'react'
+import React, { useState } from 'react'
 import { SecondaryButton } from '@opentrons/components'
 import { i18n } from '../../localization'
 import { FlexProtocolEditorComponent } from './FlexProtocolEditor'
 import { StyledText } from './StyledText'
 import styles from './FlexComponents.css'
 import { selectPageForms } from './constant'
 import { PageProps } from '../LandingPage'
+import { UpdateConfirmation } from './FlexUpdateConfirmation'
 
 function FlexFormComponent(props: PageProps): JSX.Element {
+ const [showConfirmation, setShowConfirmation] = useState(false)
+
+ const handleCancelClick = (): any => {
+ setShowConfirmation(false)
+ }
+
+ const handleConfirmClick = (): any => {
+ // handle the update action here
+ props.setPageProps(selectPageForms.defaultLandingPage)
+ setShowConfirmation(false)
+ }
+
+ function protocolCancelClick(): void {
+ setShowConfirmation(true)
+ }
+
  return (
- <div className={styles.flex_header}>
- <div className={styles.flex_title}>
- <StyledText as="h1">{i18n.t('flex.header.title')}</StyledText>
- <SecondaryButton
- className={styles.cancel_button}
- tabIndex={0}
- onClick={() => props.setPageProps(selectPageForms.defaultLandingPage)}
- >
- <StyledText as="h3">{i18n.t('flex.header.cancel_button')}</StyledText>
- </SecondaryButton>
+ <>
+ {Boolean(showConfirmation) && (
+ <>
+ <UpdateConfirmation
+ confirmationTitle={'Cancel Create Protocol?'}
+ confirmationMessage={
+ 'Are you sure you want to cancel creating a protocol? Progress will be lost, You can’t undo this change.'
+ }
+ cancelButtonName={'Go back'}
+ continueButtonName={'Cancel New Protocol'}
+ handleCancelClick={handleCancelClick}
+ handleConfirmClick={handleConfirmClick}
+ />
+ </>
+ )}
+ <div className={styles.flex_header}>
+ <div className={styles.flex_title}>
+ <StyledText as="h1">{i18n.t('flex.header.title')}</StyledText>
+ <SecondaryButton
+ className={styles.cancel_button}
+ tabIndex={0}
+ onClick={() => protocolCancelClick()}
+ >
+ <StyledText as="h3">
+ {i18n.t('flex.header.cancel_button')}
+ </StyledText>
+ </SecondaryButton>
+ </div>
+ <StyledText as="h5" className={styles.right_end}>
+ {i18n.t('flex.header.required_fields')}
+ </StyledText>
+ <FlexProtocolEditorComponent />
  </div>
- <StyledText as="h5" className={styles.required_fields}>
- {i18n.t('flex.header.required_fields')}
- </StyledText>
- <FlexProtocolEditorComponent />
- </div>
+ </>
  )
 }
 

protocol-designer/src/components/FlexProtocolEditor/FlexComponents.css

@@ -48,7 +48,7 @@
  padding: 0 !important;
 }
 
-.required_fields {
+.right_end {
  display: flex;
  justify-content: flex-end;
 }
@@ -175,7 +175,7 @@
 
 .line_separator {
  border-bottom: 1px solid var(--c-light-gray);
- margin: 32px 0 45px;
+ margin: 1rem 0 1rem;
  width: 100%;
 }
 
@@ -190,3 +190,49 @@
 .pb_10 {
  padding-bottom: 10px;
 }
+
+/* overlay styles */
+.confirmation_overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 100;
+}
+
+/* confirmation model styles */
+.confirmation_model {
+ width: 400px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: white;
+ padding: 20px;
+ border-radius: 10px;
+}
+
+.confirmation_model_x_button {
+ margin: 0 !important;
+ padding: 0 !important;
+ color: #000000 !important;
+}
+
+.confirmation_model button {
+ margin: 0 10px;
+ padding: 10px 20px;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ color: #ffffff;
+}
+
+.confirmation_model_cancel_button {
+ background: #6c757d;
+}
+
+.confirmation_model_proceed_button {
+ background: #0d6efd;
+}

protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/FlexProtocolName.tsx

@@ -6,22 +6,18 @@ import styles from '../FlexComponents.css'
 import { useFormikContext } from 'formik'
 
 interface flexProtocolName {
- fields: {
- name: string
- author: string
- description: string
- }
+ fields: { name: string; author: string; description: string }
  handleChange: () => void
  handleBlur: () => void
 }
 
 function FlexProtocolNameComponent(): JSX.Element {
  const {
  values,
- handleChange,
- handleBlur,
  errors,
  touched,
+ handleChange,
+ handleBlur,
  } = useFormikContext<flexProtocolName>()
 
  return (
@@ -48,11 +44,11 @@ function FlexProtocolNameComponent(): JSX.Element {
  value={values.fields.name}
  name="fields.name"
  />
- <StyledText as="label" className={styles.error_text}>
- {errors?.fields?.name && touched?.fields?.name
- ? errors.fields.name
-  : null}
- </StyledText>
+ {Boolean(errors?.fields?.name) && touched?.fields?.name && (
+ <StyledText as="label" className={styles.error_text}>
+ {errors?.fields?.name}
+ </StyledText>
+ )}
  </FormGroup>
 
  <div className={styles.flex_sub_heading}>

protocol-designer/src/components/FlexProtocolEditor/FlexPillForm/SelectPipette.tsx

@@ -54,7 +54,6 @@ export const SelectPipetteOption: React.FC<SelectPipetteOptionProps> = ({
  {errors.pipette && errors.pipette}
  </StyledText>
  )}
-
  {/* Pipette Mount Selection here */}
  <hr />
  <Flex className={cx(styles[className], styles.ptb_10)}>

protocol-designer/src/components/FlexProtocolEditor/FlexProtocolEditor.tsx

@@ -59,6 +59,32 @@ export interface InitialValues {
  }
 }
 
+const validationSchema = Yup.object().shape({
+ fields: Yup.object().shape({
+ name: Yup.string().matches(
+ /^[a-zA-Z0-9]*$/,
+ 'Protocol name must contain only letters and numbers.'
+ ),
+ }),
+ mountSide: Yup.string().required('Mount side is required'),
+ pipettesByMount: Yup.object().shape({
+ left: Yup.object().shape({
+ pipetteName: Yup.string().required('First pipette is required'),
+ tipRackList: Yup.array().min(
+ 1,
+ 'Select at least one tip rack for first pipette'
+ ),
+ }),
+ right: Yup.object().shape({
+ pipetteName: Yup.string().required('Second pipette is required'),
+ tipRackList: Yup.array().min(
+ 1,
+ 'Select at least one tip rack for second pipette'
+ ),
+ }),
+ }),
+})
+
 const getInitialValues: InitialValues = {
  fields: {
  name: '',
@@ -200,12 +226,16 @@ function FlexProtocolEditor(): JSX.Element {
  initialValues={getInitialValues}
  validateOnChange={true}
  validate={validateFields}
- validationSchema={InitialFormSchema}
+ validationSchema={validationSchema}
  onSubmit={(values, actions) => {
  console.log({ values })
  }}
  >
- {(props: { errors: any; handleSubmit: () => void }) => (
+ {(props: {
+ errors: any
+ isValid: any
+ handleSubmit: () => void
+ }) => (
  <form onSubmit={props.handleSubmit}>
  <section className={styles.editor_form}>
  {selectComponent(selectedTab)}
@@ -231,6 +261,10 @@ function FlexProtocolEditor(): JSX.Element {
  ? styles.flex_round_tabs_button_50p
  : styles.flex_round_tabs_button_100p
  }
+ // disabled={
+ // !Boolean(props.isValid) ||
+ // !(Object.values(props.errors).length === 0)
+ // }
  >
  <StyledText as="h3">{nextButton}</StyledText>
  </NewPrimaryBtn>

protocol-designer/src/components/FlexProtocolEditor/FlexRoundTab.tsx

@@ -19,7 +19,7 @@ export const FlexRoundTab: React.FC<RoundTabsProps> = ({
  <RoundTab
  key={index}
  isCurrent={navPillPage.includes(currentTab)}
- // onClick={() => setCurrentTab(index)}
+ onClick={() => setCurrentTab(navPillPage[0])}
  >
  <StyledText as="h4">{name}</StyledText>
  </RoundTab>

protocol-designer/src/components/FlexProtocolEditor/FlexUpdateConfirmation.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import styles from './FlexComponents.css'
+import { StyledText } from './StyledText'
+
+interface UpdateConfirmationProps {
+ confirmationTitle: string
+ confirmationMessage: string
+ cancelButtonName: string
+ continueButtonName: string
+ handleCancelClick: any
+ handleConfirmClick: any
+}
+
+export const UpdateConfirmation = ({
+ confirmationTitle,
+ confirmationMessage,
+ cancelButtonName,
+ continueButtonName,
+ handleCancelClick,
+ handleConfirmClick,
+}: UpdateConfirmationProps): any => {
+ return (
+ <>
+ <div className={styles.confirmation_overlay}>
+ <div className={styles.confirmation_model}>
+ <div className={styles.flex_title}>
+ <StyledText as="h2">{confirmationTitle}</StyledText>
+ <button
+ className={styles.confirmation_model_x_button}
+ onClick={handleCancelClick}
+ >
+ <StyledText as="h4">X</StyledText>
+ </button>
+ </div>
+ <div className={styles.line_separator} />
+ <StyledText as="h4">{confirmationMessage}</StyledText>
+ <br />
+ <br />
+ <div className={styles.line_separator} />
+ <div className={styles.right_end}>
+ <button
+ className={styles.confirmation_model_cancel_button}
+ onClick={handleCancelClick}
+ >
+ {cancelButtonName}
+ </button>
+ <button
+ className={styles.confirmation_model_proceed_button}
+ onClick={handleConfirmClick}
+ >
+ {continueButtonName}
+ </button>
+ </div>
+ </div>
+ </div>
+ </>
+ )
+}