feat: improvements to the decision form

app/components/component-review/src/components/DecisionPage.js

@@ -180,6 +180,7 @@ const decisionSections = ({
   uploadFile,
   isSubmitting,
   submitCount,
+  dirty,
 }) => {
   const decisionSections = []
   const manuscriptVersions = manuscript.manuscriptVersions || []
@@ -216,6 +217,7 @@ const decisionSections = ({
         </AdminSection>
         <AdminSection key="decision-form">
           <DecisionForm
+            dirty={dirty}
             handleSubmit={handleSubmit}
             isSubmitting={isSubmitting}
             isValid={isValid}
@@ -304,7 +306,7 @@ const DecisionPage = ({ match }) => {
     (manuscript &&
       manuscript.reviews &&
       manuscript.reviews.find(review => review.isDecision)) || {
-      comments: [],
+      decisionComment: {},
       isDecision: true,
       recommendation: null,
     }
@@ -384,6 +386,7 @@ const DecisionPage = ({ match }) => {
       updateReview,
       isSubmitting: props.isSubmitting,
       submitCount: props.submitCount,
+      dirty: props.dirty,
     })
 
   return (
@@ -392,37 +395,33 @@ const DecisionPage = ({ match }) => {
         <Formik
           displayName="decision"
           initialValues={reviewOrInitial(data.manuscript)}
-          // isInitialValid={({ manuscript }) => {
-          //   const rv =
-          //     manuscript.reviews.find(review => review.isDecision) || {}
-          //   const isRecommendation = rv.recommendation != null
-          //   const isCommented = getCommentContent(rv, 'note') !== ''
-
-          //   return isCommented && isRecommendation
-          // }}
-          onSubmit={() =>
+          onSubmit={values =>
             makeDecision({
               variables: {
                 id: manuscript.id,
-                decision: manuscript.reviews.find(review => review.isDecision)
-                  .recommendation,
+                decision: values.recommendation,
               },
             })
           }
-          // validate={(values, props) => {
-          //   const errors = {}
-          //   if (values.decisionComment?.content === '') {
-          //     errors.decisionComment = 'Required'
-          //   }
-
-          //   if (values.recommendation === null) {
-          //     errors.recommendation = 'Required'
-          //   }
-          //   return errors
-          // }}
+          validate={(values, props) => {
+            const errors = {}
+            if (
+              ['', '<p></p>', undefined].includes(
+                values.decisionComment?.content,
+              )
+            ) {
+              errors.decisionComment = 'Decision letter is required'
+            }
+
+            if (values.recommendation === null) {
+              errors.recommendation = 'Decision is required'
+            }
+            return errors
+          }}
+          // validateOnMount
         >
           {props => (
-            // Temp
+            // TODO: Find a nicer way to display the contents of a manuscript
             <>
               {/* <Tabs
                 activeKey={

app/components/component-review/src/components/decision/DecisionForm.js

 import React, { useContext } from 'react'
 import { NoteEditor } from 'xpub-edit'
 // import { cloneDeep, omit } from 'lodash'
-import { Field } from 'formik'
+import { Field, ErrorMessage } from 'formik'
 import {
   Button,
   // Flexbox,
@@ -23,8 +23,12 @@ import {
   SectionRow,
   SectionAction,
   FormStatus,
+  ErrorText,
+  ErrorWrap,
 } from '../style'
 
+// import Wax from '../../../../wax-collab/src/Editoria'
+
 const NoteDecision = ({ updateReview }) => (
   <>
     <Field key="noteField" name="decisionComment">
@@ -49,26 +53,12 @@ const NoteDecision = ({ updateReview }) => (
         </>
       )}
     </Field>
-    {/* <Field
-      component={NoteInput}
-      key="commentinput"
-      name="comments"
-      updateReview={updateReview}
-      validate={required}
-    />
-    <FilesUpload
-      objectType="Review"
-      objectId=
-      key="attachmentinput"
-      fileType="note"
-      updateReview={updateReview}
-    /> */}
   </>
 )
 
 const NoteInput = ({
   field,
-  form: { values, setFieldValue },
+  form: { errors, setFieldValue, setFieldTouched },
   updateReview,
 }) => (
   // const review = useState()
@@ -86,13 +76,23 @@ const NoteInput = ({
   // }, [values])
 
   // console.log('Rendering', review.current)
-  <>
+  <ErrorWrap error={errors.decisionComment}>
+    {
+      // TODO: Use the best text editor there is!
+      /* <Wax
+      // fileUpload={fileUpload}
+      // onChange={source => updateManuscript({ source })}
+      content={field.value?.content}
+    /> */
+    }
+
     <NoteEditor
       data-testid="decisionComment"
+      debounceDelay={300}
       key="note-input"
-      onBlur={() => {}}
+      onBlur={() => setFieldTouched('decisionComment')}
       onChange={value => {
-        // review.current.decisionComment.content = value
+        setFieldValue('decisionComment', { content: value })
         updateReview({
           decisionComment: { content: value },
         })
@@ -100,26 +100,32 @@ const NoteInput = ({
       placeholder="Write/paste your decision letter here, or upload it using the upload button on the right."
       value={field.value?.content || ''}
     />
-  </>
+    <ErrorText>
+      <ErrorMessage name="decisionComment" />
+    </ErrorText>
+  </ErrorWrap>
 )
 
 const RecommendationInput = ({
   field,
-  form: { setFieldValue },
+  form: { setFieldValue, errors },
   updateReview,
 }) => {
   const journal = useContext(JournalContext)
   return (
-    <RadioGroup
-      {...field}
-      inline
-      onChange={val => {
-        setFieldValue(`recommendation`, val)
-        updateReview({ recommendation: val })
-      }}
-      options={journal.recommendations}
-      value={field.value === '' ? null : field.value}
-    />
+    <div>
+      <RadioGroup
+        {...field}
+        inline
+        onChange={val => {
+          setFieldValue('recommendation', val)
+          updateReview({ recommendation: val })
+        }}
+        options={journal.recommendations}
+        value={field.value === '' ? null : field.value}
+      />
+      <ErrorMessage name="recommendation" />
+    </div>
   )
 }
 
@@ -129,6 +135,7 @@ const DecisionForm = ({
   isValid,
   isSubmitting,
   submitCount,
+  dirty,
 }) => {
   let status = null
   if (isSubmitting) {
@@ -155,7 +162,11 @@ const DecisionForm = ({
           />
           <FormStatus>{status}</FormStatus>
           <SectionAction key="submit">
-            <Button disabled={!isValid || isSubmitting} primary type="submit">
+            <Button
+              disabled={!isValid || isSubmitting || !dirty}
+              primary
+              type="submit"
+            >
               Submit
             </Button>
           </SectionAction>

app/components/component-review/src/components/style.js

-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { th, grid } from '@pubsweet/ui-toolkit'
 
 export const Columns = styled.div`
@@ -83,6 +83,30 @@ export const FormStatus = styled.div`
   color: ${th('colorSecondary')};
 `
 
+export const ErrorWrap = styled.div`
+  .ProseMirror {
+    margin-bottom: ${grid(4)};
+  }
+  ${({ error }) =>
+    error &&
+    css`
+      .ProseMirror {
+        border-color: red;
+      }
+      ${ErrorText} {
+        margin-top: ${grid(-4)};
+        margin-bottom: ${grid(1)};
+      }
+    `}
+
+  [class*="MenuBar"] {
+    margin-top: 0;
+  }
+`
+export const ErrorText = styled.div`
+  color: red;
+`
+
 export {
   Title,
   SectionHeader,

cypress/integration/decision_spec.js

@@ -6,11 +6,16 @@ describe('Completing a review', () => {
 
     cy.contains('Control Panel').click()
 
-    cy.get('[data-testid="decisionComment"]')
-      .click()
+    cy.get('[data-testid="decisionComment"]').click()
+    cy.focused().blur()
+
+    // Validations run on blur
+    cy.contains('Decision letter is required')
+    cy.get('[data-testid="decisionComment"] div[contenteditable="true"]')
+      .click({ force: true })
       .type(`Great paper, dear authors, congratulations!`)
 
-    cy.contains('Accept').click()
+    cy.contains('Accept').click({ force: true })
     cy.contains('Submit').click()
     cy.contains('Your decision has been saved.')
     cy.visit('/journal/dashboard')