Make gl-button the main element

Move modal inside of button so that button can be grouped

ee/app/assets/javascripts/repository/components/lock_button.vue

@@ -90,11 +90,8 @@ export default {
 </script>
 
 <template>
-  <span>
-    <gl-button :disabled="!canLock" :loading="lockLoading" @click="showModal">
-      {{ lockButtonTitle }}
-    </gl-button>
-
+  <gl-button :disabled="!canLock" :loading="lockLoading" @click="showModal">
+    {{ lockButtonTitle }}
     <gl-modal
       modal-id="lock-file-modal"
       :visible="isModalVisible"
@@ -108,5 +105,5 @@ export default {
         {{ lockConfirmText }}
       </p>
     </gl-modal>
-  </span>
+  </gl-button>
 </template>

ee/spec/frontend/repository/components/lock_button_spec.js

@@ -59,10 +59,10 @@ describe('LockButton component', () => {
       isLocked | label
       ${false} | ${'Lock'}
       ${true}  | ${'Unlock'}
-    `('renders the correct button labels', ({ isLocked, label }) => {
+    `('renders the $label button label', ({ isLocked, label }) => {
       createComponent({ isLocked });
 
-      expect(findLockButton().text()).toBe(label);
+      expect(findLockButton().text()).toContain(label);
     });
 
     it('passes the correct prop if lockLoading is set to true', async () => {