d36055cbef
Adds tests that adds new files via file templates via the Files view and the Web IDE. Includes changes to page objects and associated code Fetches template content from the API rather than hardcoding strings that will need to be updated if the templates change. Some of the content is stored as flat files but we can't use them because they're not included in the docker images gitlab-qa uses.
130 lines
3 KiB
Vue
130 lines
3 KiB
Vue
<script>
|
|
import $ from 'jquery';
|
|
|
|
const buttonVariants = ['danger', 'primary', 'success', 'warning'];
|
|
const sizeVariants = ['sm', 'md', 'lg', 'xl'];
|
|
|
|
export default {
|
|
name: 'GlModal',
|
|
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">×</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>
|