Skip to content

Migrate button to Pajamas in email participants warning

What does this MR do and why?

Refactoring a <button> to use <gl-button> as part of gitlab-org/gitlab-services/design.gitlab.com#1722 (closed)

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Note that the screenshots below are provided to show that no visual change has been made. This is just a refactor.

Before After Change
Screenshot_2023-10-13_at_12.02.30 Screenshot_2023-10-16_at_14.53.10 No visual change in browser. CSS classes differ slightly in dev tools.
Screenshot_2023-10-13_at_12.05.08 Screenshot_2023-10-16_at_14.53.26 No visual/behavior change on hover
Screenshot_2023-10-13_at_12.05.19 Screenshot_2023-10-16_at_14.53.38 no visual/behavioral change on focus

How to set up and validate locally

  1. check out this branch on your local GDK
git fetch origin
git checkout -b '20231013-clavimoniere-pajamas-email-participants-warning' 'origin/20231013-clavimoniere-pajamas-email-participants-warning'
  1. In the terminal, navigate to the gitlab directory and run the following. This applies changes to app/assets/javascripts/notes/components/comment_field_layout.vue so that email participants will show when composing a comment
cat << 'EOF' | git apply
diff --git a/app/assets/javascripts/notes/components/comment_field_layout.vue b/app/assets/javascripts/notes/components/comment_field_layout.vue
index cefcc1b0c98..8325985eff8 100644
--- a/app/assets/javascripts/notes/components/comment_field_layout.vue
+++ b/app/assets/javascripts/notes/components/comment_field_layout.vue
@@ -53,6 +53,7 @@ export default {
       return this.noteableData.issue_email_participants?.map(({ email }) => email) || [];
     },
     showEmailParticipantsWarning() {
+      return true
       return this.emailParticipants.length && !this.isInternalNote;
     },
     showAttachmentWarning() {
@@ -96,7 +97,7 @@ export default {
         'gl-pt-4 gl-pb-3 gl-mt-n3': !showAttachmentWarning,
         'gl-py-3 gl-mt-1': showAttachmentWarning,
       }"
-      :emails="emailParticipants"
+      :emails="['a@exaple.com', 'b@exaple.com', 'c@exaple.com', 'd@exaple.com', 'e@exaple.com', 'f@exaple.com', 'g@exaple.com']"
     />
   </div>
 </template>
EOF
  1. navigate to an issue and look at the open compose comment field. You will see that it lists the emails in the above diff as email participants in the email participant warning, and the "and 4 more" button that has been refactored in this MR is visible.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Chad Lavimoniere

Merge request reports