From 9355d2e1f0308679dd048b03f9814eb623c53e44 Mon Sep 17 00:00:00 2001 From: Grant Eben Date: Fri, 19 Apr 2024 14:51:16 -0400 Subject: [PATCH] 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 --- client/src/components/atoms/InlineComment.vue | 12 ++++---- .../src/components/atoms/OverallComment.vue | 10 +++---- .../SubmissionCommentSection.vitest.spec.js | 9 ++++-- client/src/components/forms/CommentEditor.vue | 28 +++++++++++-------- .../molecules/InlineComments.vitest.spec.js | 3 ++ client/src/i18n/en-US.json | 6 ++-- .../src/pages/SubmissionsPage.vitest.spec.js | 1 + 7 files changed, 41 insertions(+), 28 deletions(-) diff --git a/client/src/components/atoms/InlineComment.vue b/client/src/components/atoms/InlineComment.vue index 0266cc247..6ec20d8c6 100644 --- a/client/src/components/atoms/InlineComment.vue +++ b/client/src/components/atoms/InlineComment.vue @@ -53,27 +53,27 @@ - {{ $t("submissions.comment.toggle_replies.hide_reply") }} + {{ $t("submissions.comment.toggle_replies.hide_reply", comment.replies.length) }} - {{ $t("submissions.comment.toggle_replies.show_reply") }} + {{ $t("submissions.comment.toggle_replies.show_reply", comment.replies.length) }}
@@ -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" /> diff --git a/client/src/components/atoms/OverallComment.vue b/client/src/components/atoms/OverallComment.vue index c048ba4c4..6e256a65e 100644 --- a/client/src/components/atoms/OverallComment.vue +++ b/client/src/components/atoms/OverallComment.vue @@ -38,7 +38,7 @@ - {{ $t("submissions.comment.toggle_replies.hide_reply") }} + {{ $t(`submissions.comment.toggle_replies.hide_reply`, comment.replies.length) }} - {{ $t("submissions.comment.toggle_replies.show_reply") }} + {{ $t("submissions.comment.toggle_replies.show_reply", comment.replies.length) }} @@ -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()" /> diff --git a/client/src/components/atoms/SubmissionCommentSection.vitest.spec.js b/client/src/components/atoms/SubmissionCommentSection.vitest.spec.js index f0e93ab15..d4b49d40f 100644 --- 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 index f143ee4d3..ff2d5ed25 100644 --- a/client/src/components/forms/CommentEditor.vue +++ b/client/src/components/forms/CommentEditor.vue @@ -61,12 +61,18 @@ - - {{ $t("guiElements.form.submit") }} - - - {{ $t("guiElements.form.cancel") }} - + + @@ -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 index e9e8ab195..bc408f320 100644 --- 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 index a46ab7f30..e18ab03c0 100644 --- 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 index 58f3439be..c22d9f1c6 100644 --- 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],