feat: Add reply counts to threads (#2109)

* Adds to the "Show/Hide Replies" buttons a count of how many replies a comment thread contains. * Bonus: Prevents the "Cancel" button from appearing for the overall comment draft form at the bottom of the Submission Review page. Note: this button still appears for the draft form for overall comment replies. * Bonus: Adds a missing property to `SubmissionsPage.vitest.spec.js` Closes #2070
MESH-Research · Apr 19, 2024 · 9355d2e · 9355d2e
1 parent c642d57
commit 9355d2e
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 28 deletions.
diff --git a/client/src/components/atoms/InlineComment.vue b/client/src/components/atoms/InlineComment.vue
@@ -53,27 +53,27 @@
       <q-card-actions v-if="hasReplies" align="right" class="q-pa-md">
         <q-btn
           v-if="!isCollapsed"
-          data-cy="collapseRepliesButton"
-          :aria-label="$t(`submissions.comment.toggle_replies.hide_reply`)"
+          data-cy="hideRepliesButton"
+          :aria-label="$t(`submissions.comment.toggle_replies.hide_reply`, comment.replies.length)"
           bordered
           color="secondary"
           text-color="white"
           @click="toggleThread"
         >
           <q-icon name="expand_less"></q-icon>
-          <span>{{ $t("submissions.comment.toggle_replies.hide_reply") }}</span>
+          <span>{{ $t("submissions.comment.toggle_replies.hide_reply", comment.replies.length) }}</span>
         </q-btn>
         <q-btn
           v-if="isCollapsed"
           data-cy="showRepliesButton"
-          :aria-label="$t(`submissions.comment.toggle_replies.show_reply`)"
+          :aria-label="$t(`submissions.comment.toggle_replies.show_reply`, comment.replies.length)"
           bordered
           color="secondary"
           text-color="white"
           @click="toggleThread"
         >
           <q-icon name="expand_more"></q-icon>
-          <span>{{ $t("submissions.comment.toggle_replies.show_reply") }}</span>
+          <span>{{ $t("submissions.comment.toggle_replies.show_reply", comment.replies.length) }}</span>
         </q-btn>
       </q-card-actions>
       <section v-if="!isCollapsed">
@@ -112,7 +112,7 @@
           data-cy="inlineCommentReplyButton"
           bordered
           color="accent"
-          :label="$t(`submissions.comment.toggle_replies.reply`)"
+          :label="$t(`submissions.comment.reply_btn`)"
           @click="initiateReply"
         />
       </q-card-actions>

diff --git a/client/src/components/atoms/OverallComment.vue b/client/src/components/atoms/OverallComment.vue
@@ -38,27 +38,27 @@
       <q-card-actions v-if="hasReplies" align="right" class="q-pa-md">
         <q-btn
           v-if="!isCollapsed"
-          :aria-label="$t(`submissions.comment.toggle_replies.hide_reply`)"
+          :aria-label="$t(`submissions.comment.toggle_replies.hide_reply`, comment.replies.length)"
           data-cy="hideRepliesButton"
           bordered
           color="secondary"
           text-color="white"
           @click="toggleThread"
         >
           <q-icon name="expand_less"></q-icon>
-          <span>{{ $t("submissions.comment.toggle_replies.hide_reply") }}</span>
+          <span>{{ $t(`submissions.comment.toggle_replies.hide_reply`, comment.replies.length) }}</span>
         </q-btn>
         <q-btn
           v-if="isCollapsed"
-          :aria-label="$t(`submissions.comment.toggle_replies.show_reply`)"
+          :aria-label="$t(`submissions.comment.toggle_replies.show_reply`, comment.replies.length)"
           data-cy="showRepliesButton"
           bordered
           color="secondary"
           text-color="white"
           @click="toggleThread"
         >
           <q-icon name="expand_more"></q-icon>
-          <span>{{ $t("submissions.comment.toggle_replies.show_reply") }}</span>
+          <span>{{ $t("submissions.comment.toggle_replies.show_reply", comment.replies.length) }}</span>
         </q-btn>
       </q-card-actions>
 
@@ -101,7 +101,7 @@
           data-cy="overallCommentReplyButton"
           bordered
           color="accent"
-          :label="$t(`submissions.comment.toggle_replies.reply`)"
+          :label="$t(`submissions.comment.reply_btn`)"
           @click="initiateReply()"
         />
       </q-card-actions>

diff --git a/client/src/components/atoms/SubmissionCommentSection.vitest.spec.js b/client/src/components/atoms/SubmissionCommentSection.vitest.spec.js
@@ -284,7 +284,7 @@ describe("Overall Comments", () => {
 
     // First Overall Comment
     expect(
-      overallComments.at(0).find("[data-cy=showRepliesButton]").exists()
+      overallComments.at(0).find("[data-cy=showRepliesButton]").exists(),
     ).toBe(false)
     expect(findReplies(overallComments.at(0))).toHaveLength(0)
 
@@ -293,6 +293,9 @@ describe("Overall Comments", () => {
       .at(1)
       .find('[data-cy="showRepliesButton"]')
       .trigger("click")
+    expect(
+      overallComments.at(1).find('[data-cy="hideRepliesButton"]').text(),
+    ).toContain("submissions.comment.toggle_replies.hide_reply")
     expect(findReplies(overallComments.at(1))).toHaveLength(1)
 
     // Third Overall Comment
@@ -319,10 +322,10 @@ describe("Overall Comments", () => {
       .find('[data-cy="showRepliesButton"]')
       .trigger("click")
     const overallCommentReplies = wrapper.findAll(
-      '[data-cy="overallCommentReply"]'
+      '[data-cy="overallCommentReply"]',
     )
     expect(
-      overallCommentReplies.at(3).find('[data-cy="timestampUpdated"]').exists()
+      overallCommentReplies.at(3).find('[data-cy="timestampUpdated"]').exists(),
     ).toBe(true)
   })
 })
diff --git a/client/src/components/forms/CommentEditor.vue b/client/src/components/forms/CommentEditor.vue
@@ -61,12 +61,18 @@
         </q-list>
       </div>
       <q-card-actions class="q-mt-md q-pa-none" align="between">
-        <q-btn type="submit" color="accent">
-          {{ $t("guiElements.form.submit") }}
-        </q-btn>
-        <q-btn ref="cancel_button" flat @click="cancelHandler()">
-          {{ $t("guiElements.form.cancel") }}
-        </q-btn>
+        <q-btn
+          type="submit"
+          color="accent"
+          :label="$t(`guiElements.form.submit`)"
+        />
+        <q-btn
+          v-if="commentType != `OverallComment`"
+          ref="cancel_button"
+          flat
+          :label="$t(`guiElements.form.cancel`)"
+          @click="cancelHandler()"
+        />
       </q-card-actions>
     </q-card>
   </q-form>
@@ -164,11 +170,11 @@ const editor = useEditor({
   ],
 })
 const commentType = computed(
-  () => props.commentType ?? props.comment.__typename
+  () => props.commentType ?? props.comment.__typename,
 )
 
 const isReply = computed(() =>
-  ["OverallCommentReply", "InlineCommentReply"].includes(commentType.value)
+  ["OverallCommentReply", "InlineCommentReply"].includes(commentType.value),
 )
 const commentEditorButtons = ref([
   {
@@ -249,7 +255,7 @@ const { mutate: createComment } = useMutation(mutations[commentType.value])
 const selectedCriteria = computed(() =>
   styleCriteria.value
     .filter((criteria) => criteria.selected)
-    .map((criteria) => criteria.id)
+    .map((criteria) => criteria.id),
 )
 const hasStyleCriteria = computed(() => selectedCriteria.value.length > 0)
 async function submitHandler() {
@@ -349,8 +355,8 @@ const styleCriteria = ref(
       ...c,
       selected: isCriteriaSelected(c, comment),
     }),
-    comment
-  )
+    comment,
+  ),
 )
 
 defineExpose({

diff --git a/client/src/components/molecules/InlineComments.vitest.spec.js b/client/src/components/molecules/InlineComments.vitest.spec.js
@@ -313,6 +313,9 @@ describe("InlineComments", () => {
     expect(items.at(1).find("[data-cy=showRepliesButton]").exists()).toBe(false)
 
     await items.at(2).find('[data-cy="showRepliesButton"]').trigger("click")
+    expect(items.at(2).find('[data-cy="hideRepliesButton"]').text()).toContain(
+      "submissions.comment.toggle_replies.hide_reply",
+    )
     expect(findReplies(items.at(2))).toHaveLength(10)
   })
 })
diff --git a/client/src/i18n/en-US.json b/client/src/i18n/en-US.json
@@ -954,14 +954,14 @@
       "dateLabelUpdated": "Updated {date}",
       "updatedLabel": "Updated",
       "toggle_replies": {
-        "reply": "Reply",
-        "show_reply": "Show Replies",
-        "hide_reply": "Hide Replies"
+        "show_reply": "No Replies | Show {count} Reply | Show {count} Replies",
+        "hide_reply": "No Replies | Hide {count} Reply | Hide {count} Replies"
       },
       "reference": {
         "in_reply_to": "In reply to {username}",
         "go_to_highlight": "Go to Highlight"
       },
+      "reply_btn": "Reply",
       "reply": {
         "ariaLabel": "Comment Reply.  Author {username}",
         "referenceButtonAria": "Jump to referenced comment",

diff --git a/client/src/pages/SubmissionsPage.vitest.spec.js b/client/src/pages/SubmissionsPage.vitest.spec.js
@@ -446,6 +446,7 @@ describe("Submissions Page", () => {
       id: "1001",
       title: "Jest Submission 1001",
       created_at: "2023-11-09T18:51:10.000000Z",
+      submitted_at: "2023-11-09T18:52:00.000000Z",
       status: "UNDER_REVIEW",
       my_role: submission_my_role[role_name],
       effective_role: submission_effective_role[role_name],