Merge branch 'djadmin-sus-modal-migrate-2' into 'master'

Migrate IDE to use GlModal for discarding changes

See merge request gitlab-org/gitlab!81516

app/assets/javascripts/blob_edit/blob_bundle.js

@@ -71,7 +71,7 @@ export default () => {
     const isMarkdown = editBlobForm.data('is-markdown');
     const previewMarkdownPath = editBlobForm.data('previewMarkdownPath');
     const commitButton = $('.js-commit-button');
-    const cancelLink = $('.btn.btn-cancel');
+    const cancelLink = $('#cancel-changes');
 
     import('./edit_blob')
       .then(({ default: EditBlob } = {}) => {

app/views/projects/_commit_button.html.haml

@@ -2,6 +2,6 @@
   = button_tag 'Commit changes', id: 'commit-changes', class: 'gl-button btn btn-confirm js-commit-button  qa-commit-button'
 
   = link_to _('Cancel'), cancel_path,
-            class: 'gl-button btn btn-default gl-ml-3', data: {confirm: leave_edit_message}
+            id: 'cancel-changes', class: 'gl-button btn btn-default gl-ml-3', data: {confirm: leave_edit_message, confirm_btn_variant: "danger"}, aria: { label: _('Discard changes') }
 
   = render 'shared/projects/edit_information'

spec/frontend/blob_edit/blob_bundle_spec.js

@@ -25,7 +25,7 @@ describe('BlobBundle', () => {
       setFixtures(`
       <div class="js-edit-blob-form" data-blob-filename="blah">
         <button class="js-commit-button"></button>
-        <a class="btn btn-cancel" href="#"></a>
+        <button id='cancel-changes'></button>
       </div>`);
 
       blobBundle();
@@ -42,7 +42,7 @@ describe('BlobBundle', () => {
     });
 
     it('removes beforeunload listener when cancel link is clicked', () => {
-      $('.btn.btn-cancel').click();
+      $('#cancel-changes').click();
 
       expect(window.onbeforeunload).toBeNull();
     });
@@ -61,7 +61,7 @@ describe('BlobBundle', () => {
           data-human-access="owner"
           data-merge-request-path="path/to/mr">
           <button id='commit-changes' class="js-commit-button"></button>
-          <a class="btn btn-cancel" href="#"></a>
+          <button id='cancel-changes'></button>
         </div>
       </div>`);