Merge branch '296640-refactor-invite-member-button' into 'master'

Remove underline on invite member button focus

See merge request gitlab-org/gitlab!55906

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

 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
-  components: {
-    GlLink,
-    GlIcon,
-  },
+  components: { GlButton },
   props: {
     displayText: {
       type: String,
@@ -24,6 +21,11 @@ export default {
       required: false,
       default: '',
     },
+    variant: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   methods: {
     openModal() {
@@ -34,10 +36,13 @@ export default {
 </script>
 
 <template>
-  <gl-link :class="classes" data-qa-selector="invite_members_button" @click="openModal">
-    <div v-if="icon" class="nav-icon-container">
-      <gl-icon :size="16" :name="icon" />
-    </div>
-    <span class="nav-item-name"> {{ displayText }} </span>
-  </gl-link>
+  <gl-button
+    :class="classes"
+    :icon="icon"
+    :variant="variant"
+    data-qa-selector="invite_members_button"
+    @click="openModal"
+  >
+    {{ displayText }}
+  </gl-button>
 </template>

app/views/groups/group_members/index.html.haml

@@ -18,7 +18,7 @@
           .gl-w-half.gl-xs-w-full
             .gl-display-flex.gl-flex-wrap.gl-justify-content-end.gl-mb-3
               .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite a group') } }
-              .js-invite-members-trigger{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
+              .js-invite-members-trigger{ data: { variant: 'success', classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
           = render 'groups/invite_members_modal', group: @group
     - if can_manage_members && !can_invite_members_for_group?(@group)
       %hr.gl-mt-4

app/views/projects/project_members/index.html.haml

@@ -20,7 +20,7 @@
         .col-md-12.col-lg-6
           .gl-display-flex.gl-flex-wrap.gl-justify-content-end
             .js-invite-group-trigger{ data: { classes: 'gl-mt-3 gl-sm-w-auto gl-w-full', display_text: _('Invite a group') } }
-            .js-invite-members-trigger{ data: { classes: 'btn btn-success gl-button gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
+            .js-invite-members-trigger{ data: { variant: 'success', classes: 'gl-mt-3 gl-sm-w-auto gl-w-full gl-sm-ml-3', display_text: _('Invite members') } }
         = render 'projects/invite_members_modal', project: @project
 
     - else

spec/frontend/invite_members/components/invite_members_trigger_spec.js

-import { GlIcon, GlLink } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import InviteMembersTrigger from '~/invite_members/components/invite_members_trigger.vue';
 
 const displayText = 'Invite team members';
-const icon = 'plus';
 
 const createComponent = (props = {}) => {
   return shallowMount(InviteMembersTrigger, {
@@ -23,36 +22,14 @@ describe('InviteMembersTrigger', () => {
   });
 
   describe('displayText', () => {
-    const findLink = () => wrapper.findComponent(GlLink);
+    const findButton = () => wrapper.findComponent(GlButton);
 
     beforeEach(() => {
       wrapper = createComponent();
     });
 
-    it('includes the correct displayText for the link', () => {
-      expect(findLink().text()).toBe(displayText);
-    });
-  });
-
-  describe('icon', () => {
-    const findIcon = () => wrapper.findComponent(GlIcon);
-
-    it('includes the correct icon when an icon is sent', () => {
-      wrapper = createComponent({ icon });
-
-      expect(findIcon().attributes('name')).toBe(icon);
-    });
-
-    it('does not include an icon when icon is not sent', () => {
-      wrapper = createComponent();
-
-      expect(findIcon().exists()).toBe(false);
-    });
-
-    it('does not include an icon when empty string is sent', () => {
-      wrapper = createComponent({ icon: '' });
-
-      expect(findIcon().exists()).toBe(false);
+    it('includes the correct displayText for the button', () => {
+      expect(findButton().text()).toBe(displayText);
     });
   });
 });