Updating the 'stop all jobs' modal

This commit updates stop_jobs_modal.vue but does not complete the
work of migrating the modal over to the new way of doing things,
because the remaining work is past my ability to help.

app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue

 <script>
+import { GlModal } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { s__ } from '~/locale';
+import { __, s__ } from '~/locale';
 
 export default {
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
   },
   props: {
     url: {
@@ -36,17 +36,24 @@ export default {
         });
     },
   },
+  primaryAction: {
+    text: s__('AdminArea|Stop jobs'),
+    attributes: [{ variant: 'danger' }],
+  },
+  cancelAction: {
+    text: __('Cancel'),
+  },
 };
 </script>
 
 <template>
   <gl-modal
-    id="stop-jobs-modal"
-    :header-title-text="s__('AdminArea|Stop all jobs?')"
-    :footer-primary-button-text="s__('AdminArea|Stop jobs')"
-    footer-primary-button-variant="danger"
-    @submit="onSubmit"
+    modal-id="stop-jobs-modal"
+    :action-primary="$options.primaryAction"
+    :action-cancel="$options.cancelAction"
+    @primary="onSubmit"
   >
+    <template #modal-title>{{ s__('AdminArea|Stop all jobs?') }}</template>
     {{ text }}
   </gl-modal>
 </template>

app/assets/javascripts/pages/admin/jobs/index/index.js

@@ -5,19 +5,24 @@ import stopJobsModal from './components/stop_jobs_modal.vue';
 Vue.use(Translate);
 
 document.addEventListener('DOMContentLoaded', () => {
-  const stopJobsButton = document.getElementById('stop-jobs-button');
+  const buttonId = 'js-stop-jobs-button';
+  const modalId = 'stop-jobs-modal';
+  const stopJobsButton = document.getElementById(buttonId);
   if (stopJobsButton) {
     // eslint-disable-next-line no-new
     new Vue({
-      el: '#stop-jobs-modal',
+      el: `#js-${modalId}`,
       components: {
         stopJobsModal,
       },
       mounted() {
         stopJobsButton.classList.remove('disabled');
+        stopJobsButton.addEventListener('click', () => {
+          this.$root.$emit('bv::show::modal', modalId, `#${buttonId}`);
+        });
       },
       render(createElement) {
-        return createElement('stop-jobs-modal', {
+        return createElement(modalId, {
           props: {
             url: stopJobsButton.dataset.url,
           },

app/views/admin/jobs/index.html.haml

@@ -6,11 +6,9 @@
   = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
   - if @all_builds.running_or_pending.any?
-    #stop-jobs-modal
+    #js-stop-jobs-modal
     .nav-controls
-      %button#stop-jobs-button.btn.gl-button.btn-danger{ data: { toggle: 'modal',
-        target: '#stop-jobs-modal',
-        url: cancel_all_admin_jobs_path } }
+      %button#js-stop-jobs-button.btn.gl-button.btn-danger{ data: { url: cancel_all_admin_jobs_path } }
         = s_('AdminArea|Stop all jobs')
 
 .row-content-block.second-block

changelogs/unreleased/229701-aqualls-stop-jobs-modal.yml

+---
+title: Update stop all jobs modal to latest modal
+merge_request: 46157
+author:
+type: changed

spec/features/admin/admin_builds_spec.rb

@@ -12,7 +12,7 @@ RSpec.describe 'Admin Builds' do
 
     context 'All tab' do
       context 'when have jobs' do
-        it 'shows all jobs' do
+        it 'shows all jobs', :js do
           create(:ci_build, pipeline: pipeline, status: :pending)
           create(:ci_build, pipeline: pipeline, status: :running)
           create(:ci_build, pipeline: pipeline, status: :success)
@@ -24,6 +24,10 @@ RSpec.describe 'Admin Builds' do
           expect(page).to have_selector('.row-content-block', text: 'All jobs')
           expect(page.all('.build-link').size).to eq(4)
           expect(page).to have_button 'Stop all jobs'
+
+          click_button 'Stop all jobs'
+          expect(page).to have_button 'Stop jobs'
+          expect(page).to have_content 'Stop all jobs?'
         end
       end