Commit 5fcd72ff authored by Amy Qualls's avatar Amy Qualls Committed by Sarah Groff Hennigh-Palermo

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.
parent 04c6d8f7
<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>
......@@ -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,
},
......
......@@ -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
......
---
title: Update stop all jobs modal to latest modal
merge_request: 46157
author:
type: changed
......@@ -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
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment