fix: Require content for submissions (#1896)

* This prevents submissions without content from being submitted for review
* Improves the appearance of the radio button options on the Submission Content page.
* Fixes some framework-created title font-sizes appearing as less than 16px

Closes #1852

backend/database/seeders/SubmissionSeeder.php

@@ -34,7 +34,7 @@ public function run()
         $this->createSubmission(103, 'Pilcrow Test Submission 4')
             ->update(['updated_by' => 3, 'status' => Submission::RESUBMISSION_REQUESTED]);
 
-        $this->createSubmission(104, 'Pilcrow Test Submission 5', false); // DRAFT
+        $this->createSubmission(104, 'Pilcrow Test Submission 5', false); // DRAFT without content
 
         $this->createSubmission(105, 'Pilcrow Test Submission 6')
             ->update(['updated_by' => 3, 'status' => Submission::ACCEPTED_AS_FINAL]);
@@ -53,6 +53,8 @@ public function run()
 
         $this->createSubmission(110, 'Pilcrow Test Submission 11')
             ->update(['updated_by' => 1, 'status' => Submission::DELETED]);
+
+        $this->createSubmission(111, 'Pilcrow Test Submission 12'); // DRAFT with content
     }
 
     /**

client/src/components/SubmissionDraftTodoItem.vue

@@ -17,6 +17,7 @@
         <q-btn
           v-if="!done"
           data-cy="todo_go_btn"
+          color="primary"
           :label="$t(`submissions.create.todo.btn_label.go`)"
           @click="$emit('goClick')"
         />

client/src/css/app.sass

@@ -95,7 +95,8 @@ a[target="_blank"]::after
 .text-caption,
 th.text-center,
 th.text-left,
-th.text-right
+th.text-right,
+.text-body2 // Font sizes less than 16px are not allowed
     font-size: $typography-font-size
 
 

client/src/i18n/en-US.json

@@ -688,6 +688,7 @@
     "none": "No Submissions Created",
     "details_heading": "Submission Details",
     "latest_comments_heading": "Latest Comments",
+    "draft_with_no_content": "This submission draft must have content before it can be reviewed.",
     "no_comments": "There are no comments for you.",
     "style_controls": {
       "font": "Font",
@@ -808,20 +809,20 @@
         }
       },
       "submit": {
-        "description": "Your submission is saved and you can come back to work on it any time.  When you've completed the above items, click \"Submit for Review\" below to kick off the review process!",
+        "description": "Your submission is saved and you can come back to work on it any time.  When you've completed the above items, you'll be able to click \"Submit for Review\" below to kick off the review process!",
         "btn_label": "Submit for Review"
       }
     },
     "content": {
       "heading": "Submission Content",
       "upload": {
         "label": "Upload",
-        "caption": "Upload a supported file to be imported as my content.",
+        "caption": "Select a supported file to be imported.",
         "file_picker_label": "Select File"
       },
       "paste": {
         "label": "Enter Text",
-        "caption": "Copy/paste or enter text content directly into an input."
+        "caption": "Copy/paste or enter text content directly."
       },
       "submit": {
         "btn_label": "Update Content",

client/src/pages/SubmissionContent.vue

@@ -38,19 +38,18 @@
           <q-banner
             v-if="updateMethod === 'upload' || updateMethod == ''"
             data-cy="upload_option"
-            class="bg-primary text-white"
+            class="bg-primary text-white cursor-pointer"
             inline-actions
             @click="setMethod('upload')"
           >
-            <div>
-              <q-radio
-                v-model="updateMethod"
-                color="secondary"
-                val="upload"
-                :label="$t(`submissions.content.upload.label`)"
-              />
-            </div>
-            <div class="text-caption">
+            <q-radio
+              v-model="updateMethod"
+              class="text-bold"
+              color="secondary"
+              val="upload"
+              :label="$t(`submissions.content.upload.label`)"
+            />
+            <div class="text-caption" style="padding: 0 0 0.5em 2.5em; margin-top:-0.4em">
               {{ $t(`submissions.content.upload.caption`) }}
             </div>
             <template v-if="updateMethod !== ''" #action>
@@ -64,17 +63,18 @@
           <q-banner
             v-if="updateMethod === 'paste' || updateMethod == ''"
             data-cy="paste_option"
-            class="bg-primary text-white"
+            class="bg-primary text-white cursor-pointer"
             inline-actions
             @click="setMethod('paste')"
           >
             <q-radio
               v-model="updateMethod"
+              class="text-bold"
               color="secondary"
               val="paste"
               :label="$t(`submissions.content.paste.label`)"
             />
-            <div class="text-caption">
+            <div class="text-caption" style="padding: 0 0 0.5em 2.5em; margin-top:-0.4em">
               {{ $t(`submissions.content.paste.caption`) }}
             </div>
             <template v-if="updateMethod !== ''" #action>

client/src/pages/SubmissionDraft.vue

@@ -79,11 +79,18 @@
           <section class="q-mt-lg">
             <p>{{ $t(`submissions.create.submit.description`) }}</p>
             <q-btn
+              v-if="draft.content.required.$invalid"
+              disabled
               class="q-mt-lg"
-              color="primary"
               :label="$t(`submissions.create.submit.btn_label`)"
               @click="confirmHandler('submit_for_review')"
             />
+            <q-btn
+              v-else
+              class="q-mt-lg"
+              color="primary"
+              :label="$t(`submissions.create.submit.btn_label`)"
+            />
           </section>
         </article>
       </div>
@@ -99,6 +106,8 @@ import { computed } from "vue"
 import { useQuasar } from "quasar"
 import { useQuery } from "@vue/apollo-composable"
 import { useRouter } from "vue-router"
+import { useVuelidate } from "@vuelidate/core"
+import { required } from "@vuelidate/validators"
 
 const props = defineProps({
   id: {
@@ -109,14 +118,19 @@ const props = defineProps({
 const { dialog } = useQuasar()
 const { result, loading } = useQuery(GET_SUBMISSION, props)
 const submission = computed(() => result.value?.submission)
-
 const { push } = useRouter()
 function onGoToSubmissionContentClick() {
   push({
     name: "submission:content",
     params: { id: submission.value.id },
   })
 }
+const rules = {
+  content: {
+    required
+  }
+}
+const draft = useVuelidate(rules, submission)
 async function confirmHandler(action) {
   await new Promise((resolve) => {
     dirtyDialog(action)

client/src/pages/SubmissionReview.vue

@@ -1,8 +1,26 @@
 <template>
   <div data-cy="submission_review_page">
-    <div v-if="!submission" class="q-pa-lg">
+    <div v-if="loading" class="q-pa-lg">
       {{ $t("loading") }}
     </div>
+    <div
+      v-else-if="!submission?.content && submission?.status === 'DRAFT'"
+      class="q-pa-xl items-center column content-center text-center"
+    >
+      <p style="max-width: 20rem" data-cy="explanation">
+        {{ $t('submissions.draft_with_no_content') }}
+      </p>
+      <q-btn
+        data-cy="draft_btn"
+        :label="$t(`submissions.action.draft`)"
+        color="primary"
+        class="q-mt-md"
+        :to="{
+          name: 'submission:draft',
+          params: { id: submission.id },
+        }"
+      />
+    </div>
     <article v-else>
       <q-layout
         data-cy="submission_review_layout"
@@ -45,7 +63,7 @@ const props = defineProps({
     required: true,
   },
 })
-const { result } = useQuery(GET_SUBMISSION_REVIEW, { id: props.id })
+const { loading, result } = useQuery(GET_SUBMISSION_REVIEW, { id: props.id })
 const submission = computed(() => {
   return result.value?.submission
 })

client/test/cypress/integration/submissionreview.cy.js

@@ -233,25 +233,25 @@ describe("Submissions Review", () => {
     cy.dataCy("decision_options")
   })
 
-  it("should display the Draft status and the option to submit for review when a submission is in Draft status", () => {
+  it("should display an explanation and redirect button for a draft submission with no content", () => {
     cy.task("resetDb")
     cy.login({ email: "regularuser@pilcrow.dev" })
     cy.visit("submission/104/review")
-    cy.dataCy("submission_status").contains("Draft")
-    cy.dataCy("status-dropdown").click()
-    cy.dataCy("initially_submit").contains("Submit for Review")
+    cy.dataCy("explanation")
+    cy.dataCy("draft_btn").click()
+    cy.url().should("include", "/submission/104/draft")
   })
 
-  it("should be able to submit a submission in draft status to review and allow reviewers to access the submission", () => {
+  it("should be able to submit for review a draft submission with content and allow reviewers to access the submission", () => {
     cy.task("resetDb")
     cy.login({ email: "regularuser@pilcrow.dev" })
-    cy.visit("submission/104/review")
+    cy.visit("submission/111/review")
     cy.dataCy("status-dropdown").click()
     cy.dataCy("initially_submit").click()
     cy.dataCy("dirtyYesChangeStatus").click()
 
     cy.login({ email: "reviewer@pilcrow.dev" })
-    cy.visit("submission/104/review")
+    cy.visit("submission/111/review")
     cy.url().should("not.include", "/error403")
   })