Add latest changes from gitlab-org/gitlab@master

1 files changed, 118 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue b/app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue
new file mode 100644
index 00000000000..543547b37fe
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue
@@ -0,0 +1,118 @@
+<script>
+import $ from 'jquery';
+
+const buttonVariants = ['danger', 'primary', 'success', 'warning'];
+const sizeVariants = ['sm', 'md', 'lg', 'xl'];
+
+export default {
+  name: 'DeprecatedModal2', // use GlModal instead
+
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    modalSize: {
+      type: String,
+      required: false,
+      default: 'md',
+      validator: value => sizeVariants.includes(value),
+    },
+    headerTitleText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    footerPrimaryButtonVariant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: value => buttonVariants.includes(value),
+    },
+    footerPrimaryButtonText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    modalSizeClass() {
+      return this.modalSize === 'md' ? '' : `modal-${this.modalSize}`;
+    },
+  },
+  mounted() {
+    $(this.$el)
+      .on('shown.bs.modal', this.opened)
+      .on('hidden.bs.modal', this.closed);
+  },
+  beforeDestroy() {
+    $(this.$el)
+      .off('shown.bs.modal', this.opened)
+      .off('hidden.bs.modal', this.closed);
+  },
+  methods: {
+    emitCancel(event) {
+      this.$emit('cancel', event);
+    },
+    emitSubmit(event) {
+      this.$emit('submit', event);
+    },
+    opened() {
+      this.$emit('open');
+    },
+    closed() {
+      this.$emit('closed');
+    },
+  },
+};
+</script>
+
+<template>
+  <div :id="id" class="modal fade" tabindex="-1" role="dialog">
+    <div :class="modalSizeClass" class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <slot name="header">
+            <h4 class="modal-title">
+              <slot name="title"> {{ headerTitleText }} </slot>
+            </h4>
+            <button
+              :aria-label="s__('Modal|Close')"
+              type="button"
+              class="close js-modal-close-action"
+              data-dismiss="modal"
+              @click="emitCancel($event)"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </slot>
+        </div>
+
+        <div class="modal-body"><slot></slot></div>
+
+        <div class="modal-footer">
+          <slot name="footer">
+            <button
+              type="button"
+              class="btn js-modal-cancel-action qa-modal-cancel-button"
+              data-dismiss="modal"
+              @click="emitCancel($event)"
+            >
+              {{ s__('Modal|Cancel') }}
+            </button>
+            <button
+              :class="`btn-${footerPrimaryButtonVariant}`"
+              type="button"
+              class="btn js-modal-primary-action qa-modal-primary-button"
+              data-dismiss="modal"
+              @click="emitSubmit($event)"
+            >
+              {{ footerPrimaryButtonText }}
+            </button>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>