Merge branch...

Merge branch '229303-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javascripts-vue_shared' into 'master'

Migrate Bootstrap button to GlButton in deprecated modal template

See merge request gitlab-org/gitlab!44611

app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue

 <script>
 import $ from 'jquery';
+import { GlButton } from '@gitlab/ui';
 
 const buttonVariants = ['danger', 'primary', 'success', 'warning'];
 const sizeVariants = ['sm', 'md', 'lg', 'xl'];
@@ -7,6 +8,9 @@ const sizeVariants = ['sm', 'md', 'lg', 'xl'];
 export default {
   name: 'DeprecatedModal2', // use GlModal instead
 
+  components: {
+    GlButton,
+  },
   props: {
     id: {
       type: String,
@@ -72,20 +76,21 @@ export default {
   <div :id="id" class="modal fade" tabindex="-1" role="dialog">
     <div :class="modalSizeClass" class="modal-dialog" role="document">
       <div class="modal-content">
-        <div class="modal-header">
+        <div class="modal-header gl-pr-4">
           <slot name="header">
             <h4 class="modal-title">
               <slot name="title"> {{ headerTitleText }} </slot>
             </h4>
-            <button
+            <gl-button
               :aria-label="s__('Modal|Close')"
-              type="button"
-              class="close js-modal-close-action"
+              variant="default"
+              category="tertiary"
+              size="small"
+              icon="close"
+              class="js-modal-close-action"
               data-dismiss="modal"
               @click="emitCancel($event)"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
+            />
           </slot>
         </div>
 
@@ -93,23 +98,21 @@ export default {
 
         <div class="modal-footer">
           <slot name="footer">
-            <button
-              type="button"
-              class="btn js-modal-cancel-action qa-modal-cancel-button"
+            <gl-button
+              class="js-modal-cancel-action qa-modal-cancel-button"
               data-dismiss="modal"
               @click="emitCancel($event)"
             >
               {{ s__('Modal|Cancel') }}
-            </button>
-            <button
+            </gl-button>
+            <gl-button
               :class="`btn-${footerPrimaryButtonVariant}`"
-              type="button"
-              class="btn js-modal-primary-action qa-modal-primary-button"
+              class="js-modal-primary-action qa-modal-primary-button"
               data-dismiss="modal"
               @click="emitSubmit($event)"
             >
               {{ footerPrimaryButtonText }}
-            </button>
+            </gl-button>
           </slot>
         </div>
       </div>

changelogs/unreleased/229303-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml

+---
+title: Migrating deprecated buttons to GlButtons for modals that have not yet been
+  migrated to the new GlModal component
+merge_request: 44611
+author:
+type: other

spec/frontend/vue_shared/components/deprecated_modal_2_spec.js

@@ -78,7 +78,7 @@ describe('DeprecatedModal2', () => {
       });
 
       it('sets the primary button text', () => {
-        const primaryButton = vm.$el.querySelector('.modal-footer button:last-of-type');
+        const primaryButton = vm.$el.querySelector('.js-modal-primary-action .gl-button-text');
 
         expect(primaryButton.innerHTML.trim()).toBe(props.footerPrimaryButtonText);
       });