Add new modal Vue componentwinh-new-modal-component

4 files changed, 142 insertions, 34 deletions

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 555725cbe12..ba1d8e4d8db 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
@@ -1,13 +1,13 @@
 <script>
   import axios from '~/lib/utils/axios_utils';
-  import Flash from '~/flash';
-  import modal from '~/vue_shared/components/modal.vue';
-  import { s__ } from '~/locale';
+  import createFlash from '~/flash';
+  import GlModal from '~/vue_shared/components/gl_modal.vue';
   import { redirectTo } from '~/lib/utils/url_utility';
+  import { s__ } from '~/locale';
 
   export default {
     components: {
-      modal,
+      GlModal,
     },
     props: {
       url: {
@@ -17,7 +17,7 @@
     },
     computed: {
       text() {
-        return s__('AdminArea|You’re about to stop all jobs. This will halt all current jobs that are running.');
+        return s__('AdminArea|You’re about to stop all jobs.This will halt all current jobs that are running.');
       },
     },
     methods: {
@@ -28,7 +28,7 @@
             redirectTo(response.request.responseURL);
           })
           .catch((error) => {
-            Flash(s__('AdminArea|Stopping jobs failed'));
+            createFlash(s__('AdminArea|Stopping jobs failed'));
             throw error;
           });
       },
@@ -37,11 +37,13 @@
 </script>
 
 <template>
-  <modal
+  <gl-modal
     id="stop-jobs-modal"
-    :title="s__('AdminArea|Stop all jobs?')"
-    :text="text"
-    kind="danger"
-    :primary-button-label="s__('AdminArea|Stop jobs')"
-    @submit="onSubmit" />
+    :header-title-text="s__('AdminArea|Stop all jobs?')"
+    footer-primary-button-variant="danger"
+    :footer-primary-button-text="s__('AdminArea|Stop jobs')"
+    @submit="onSubmit"
+  >
+    {{ text }}
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/admin/jobs/index/index.js b/app/assets/javascripts/pages/admin/jobs/index/index.js
index 0e004bd9174..31d58eabaaf 100644
--- a/app/assets/javascripts/pages/admin/jobs/index/index.js
+++ b/app/assets/javascripts/pages/admin/jobs/index/index.js
@@ -8,22 +8,23 @@ Vue.use(Translate);
 
 export default () => {
   const stopJobsButton = document.getElementById('stop-jobs-button');
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: '#stop-jobs-modal',
-    components: {
-      stopJobsModal,
-    },
-    mounted() {
-      stopJobsButton.classList.remove('disabled');
-    },
-    render(createElement) {
-      return createElement('stop-jobs-modal', {
-        props: {
-          url: stopJobsButton.dataset.url,
-        },
-      });
-    },
-  });
+  if (stopJobsButton) {
+    // eslint-disable-next-line no-new
+    new Vue({
+      el: '#stop-jobs-modal',
+      components: {
+        stopJobsModal,
+      },
+      mounted() {
+        stopJobsButton.classList.remove('disabled');
+      },
+      render(createElement) {
+        return createElement('stop-jobs-modal', {
+          props: {
+            url: stopJobsButton.dataset.url,
+          },
+        });
+      },
+    });
+  }
 };
diff --git a/app/assets/javascripts/vue_shared/components/gl_modal.vue b/app/assets/javascripts/vue_shared/components/gl_modal.vue
new file mode 100644
index 00000000000..67c9181c7b1
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/gl_modal.vue
@@ -0,0 +1,106 @@
+<script>
+  const buttonVariants = [
+    'danger',
+    'primary',
+    'success',
+    'warning',
+  ];
+
+  export default {
+    name: 'GlModal',
+
+    props: {
+      id: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      headerTitleText: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      footerPrimaryButtonVariant: {
+        type: String,
+        required: false,
+        default: 'primary',
+        validator: value => buttonVariants.indexOf(value) !== -1,
+      },
+      footerPrimaryButtonText: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+
+    methods: {
+      emitCancel(event) {
+        this.$emit('cancel', event);
+      },
+      emitSubmit(event) {
+        this.$emit('submit', event);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div
+    :id="id"
+    class="modal fade"
+    tabindex="-1"
+    role="dialog"
+  >
+    <div
+      class="modal-dialog"
+      role="document"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="header">
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              :aria-label="s__('Modal|Close')"
+              @click="emitCancel($event)"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+            <h4 class="modal-title">
+              <slot name="title">
+                {{ headerTitleText }}
+              </slot>
+            </h4>
+          </slot>
+        </div>
+
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <div class="modal-footer">
+          <slot name="footer">
+            <button
+              type="button"
+              class="btn"
+              data-dismiss="modal"
+              @click="emitCancel($event)"
+            >
+              {{ s__('Modal|Cancel') }}
+            </button>
+            <button
+              type="button"
+              class="btn"
+              :class="`btn-${footerPrimaryButtonVariant}`"
+              data-dismiss="modal"
+              @click="emitSubmit($event)"
+            >
+              {{ footerPrimaryButtonText }}
+            </button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/views/admin/jobs/index.html.haml b/app/views/admin/jobs/index.html.haml
index a01676d82a8..4e3e2f7a475 100644
--- a/app/views/admin/jobs/index.html.haml
+++ b/app/views/admin/jobs/index.html.haml
@@ -7,10 +7,9 @@
     - build_path_proc = ->(scope) { admin_jobs_path(scope: scope) }
     = render "shared/builds/tabs", build_path_proc: build_path_proc, all_builds: @all_builds, scope: @scope
 
-    .nav-controls
-      - if @all_builds.running_or_pending.any?
-        #stop-jobs-modal
-
+    - if @all_builds.running_or_pending.any?
+      #stop-jobs-modal
+      .nav-controls
         %button#stop-jobs-button.btn.btn-danger{ data: { toggle: 'modal',
           target: '#stop-jobs-modal',
           url: cancel_all_admin_jobs_path } }