Change invite member modal to use bold for project/group name

- instead of all caps...better design.

app/assets/javascripts/invite_members/components/invite_members_modal.vue

@@ -76,7 +76,7 @@ export default {
       const inviteTo = this.isProject ? 'toProject' : 'toGroup';
 
       return sprintf(this.$options.labels[this.inviteeType][inviteTo].introText, {
-        name: this.name.toUpperCase(),
+        name: this.name,
       });
     },
     toastOptions() {
@@ -215,10 +215,14 @@ export default {
       searchField: s__('InviteMembersModal|GitLab member or Email address'),
       placeHolder: s__('InviteMembersModal|Search for members to invite'),
       toGroup: {
-        introText: s__("InviteMembersModal|You're inviting members to the %{name} group"),
+        introText: s__(
+          "InviteMembersModal|You're inviting members to the %{strongStart}%{name}%{strongEnd} group.",
+        ),
       },
       toProject: {
-        introText: s__("InviteMembersModal|You're inviting members to the %{name} project"),
+        introText: s__(
+          "InviteMembersModal|You're inviting members to the %{strongStart}%{name}%{strongEnd} project.",
+        ),
       },
     },
     group: {
@@ -226,10 +230,14 @@ export default {
       searchField: s__('InviteMembersModal|Select a group to invite'),
       placeHolder: s__('InviteMembersModal|Search for a group to invite'),
       toGroup: {
-        introText: s__("InviteMembersModal|You're inviting a group to the %{name} group"),
+        introText: s__(
+          "InviteMembersModal|You're inviting a group to the %{strongStart}%{name}%{strongEnd} group.",
+        ),
       },
       toProject: {
-        introText: s__("InviteMembersModal|You're inviting a group to the %{name} project"),
+        introText: s__(
+          "InviteMembersModal|You're inviting a group to the %{strongStart}%{name}%{strongEnd} project.",
+        ),
       },
     },
     accessLevel: s__('InviteMembersModal|Choose a role permission'),
@@ -253,7 +261,13 @@ export default {
     :header-close-label="$options.labels.headerCloseLabel"
   >
     <div>
-      <p ref="introText">{{ introText }}</p>
+      <p ref="introText">
+        <gl-sprintf :message="introText">
+          <template #strong="{ content }">
+            <strong>{{ content }}</strong>
+          </template>
+        </gl-sprintf>
+      </p>
 
       <label :id="$options.membersTokenSelectLabelId" class="gl-font-weight-bold gl-mt-5">{{
         $options.labels[inviteeType].searchField

locale/gitlab.pot

@@ -16678,16 +16678,16 @@ msgstr ""
 msgid "InviteMembersModal|Some of the members could not be added"
 msgstr ""
 
-msgid "InviteMembersModal|You're inviting a group to the %{name} group"
+msgid "InviteMembersModal|You're inviting a group to the %{strongStart}%{name}%{strongEnd} group."
 msgstr ""
 
-msgid "InviteMembersModal|You're inviting a group to the %{name} project"
+msgid "InviteMembersModal|You're inviting a group to the %{strongStart}%{name}%{strongEnd} project."
 msgstr ""
 
-msgid "InviteMembersModal|You're inviting members to the %{name} group"
+msgid "InviteMembersModal|You're inviting members to the %{strongStart}%{name}%{strongEnd} group."
 msgstr ""
 
-msgid "InviteMembersModal|You're inviting members to the %{name} project"
+msgid "InviteMembersModal|You're inviting members to the %{strongStart}%{name}%{strongEnd} project."
 msgstr ""
 
 msgid "InviteMembers|Invite a group"

spec/frontend/invite_members/components/invite_members_modal_spec.js

@@ -129,7 +129,7 @@ describe('InviteMembersModal', () => {
         it('includes the correct invitee, type, and formatted name', () => {
           wrapper = createInviteMembersToProjectWrapper();
 
-          expect(findIntroText()).toBe("You're inviting members to the TEST NAME project");
+          expect(findIntroText()).toBe("You're inviting members to the test name project.");
         });
       });
 
@@ -137,7 +137,7 @@ describe('InviteMembersModal', () => {
         it('includes the correct invitee, type, and formatted name', () => {
           wrapper = createInviteGroupToProjectWrapper();
 
-          expect(findIntroText()).toBe("You're inviting a group to the TEST NAME project");
+          expect(findIntroText()).toBe("You're inviting a group to the test name project.");
         });
       });
     });
@@ -147,7 +147,7 @@ describe('InviteMembersModal', () => {
         it('includes the correct invitee, type, and formatted name', () => {
           wrapper = createInviteMembersToGroupWrapper();
 
-          expect(wrapper.html()).toContain("You're inviting members to the TEST NAME group");
+          expect(findIntroText()).toBe("You're inviting members to the test name group.");
         });
       });
 
@@ -155,7 +155,7 @@ describe('InviteMembersModal', () => {
         it('includes the correct invitee, type, and formatted name', () => {
           wrapper = createInviteGroupToGroupWrapper();
 
-          expect(wrapper.html()).toContain("You're inviting a group to the TEST NAME group");
+          expect(findIntroText()).toBe("You're inviting a group to the test name group.");
         });
       });
     });