2 files changed, 28 insertions, 14 deletions

diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/constants.js b/app/assets/javascripts/pages/admin/jobs/index/components/constants.js
new file mode 100644
index 00000000000..9e2d464bc4d
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/constants.js
@@ -0,0 +1,11 @@
+import { s__, __ } from '~/locale';
+
+export const STOP_JOBS_MODAL_ID = 'stop-jobs-modal';
+export const STOP_JOBS_MODAL_TITLE = s__('AdminArea|Stop all jobs?');
+export const STOP_JOBS_BUTTON_TEXT = s__('AdminArea|Stop all jobs');
+export const CANCEL_TEXT = __('Cancel');
+export const STOP_JOBS_FAILED_TEXT = s__('AdminArea|Stopping jobs failed');
+export const PRIMARY_ACTION_TEXT = s__('AdminArea|Stop jobs');
+export const STOP_JOBS_WARNING = s__(
+  'AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.',
+);
diff --git a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
index 4f42ef2892d..b608b3b9492 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
+++ b/app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
@@ -3,7 +3,14 @@ import { GlModal } from '@gitlab/ui';
 import { createAlert } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
-import { __, s__ } from '~/locale';
+import {
+  CANCEL_TEXT,
+  STOP_JOBS_MODAL_ID,
+  STOP_JOBS_FAILED_TEXT,
+  STOP_JOBS_MODAL_TITLE,
+  STOP_JOBS_WARNING,
+  PRIMARY_ACTION_TEXT,
+} from './constants';
 
 export default {
   components: {
@@ -15,13 +22,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    text() {
-      return s__(
-        'AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.',
-      );
-    },
-  },
   methods: {
     onSubmit() {
       return axios
@@ -32,30 +32,33 @@ export default {
         })
         .catch((error) => {
           createAlert({
-            message: s__('AdminArea|Stopping jobs failed'),
+            message: STOP_JOBS_FAILED_TEXT,
           });
           throw error;
         });
     },
   },
   primaryAction: {
-    text: s__('AdminArea|Stop jobs'),
+    text: PRIMARY_ACTION_TEXT,
     attributes: [{ variant: 'danger' }],
   },
   cancelAction: {
-    text: __('Cancel'),
+    text: CANCEL_TEXT,
   },
+  STOP_JOBS_WARNING,
+  STOP_JOBS_MODAL_ID,
+  STOP_JOBS_MODAL_TITLE,
 };
 </script>
 
 <template>
   <gl-modal
-    modal-id="stop-jobs-modal"
+    :modal-id="$options.STOP_JOBS_MODAL_ID"
     :action-primary="$options.primaryAction"
     :action-cancel="$options.cancelAction"
     @primary="onSubmit"
   >
-    <template #modal-title>{{ s__('AdminArea|Stop all jobs?') }}</template>
-    {{ text }}
+    <template #modal-title>{{ $options.STOP_JOBS_MODAL_TITLE }}</template>
+    {{ $options.STOP_JOBS_WARNING }}
   </gl-modal>
 </template>