Skip to content

G
gitlab-ce
Commit af35e9ff authored by Kushal Pandya's avatar Kushal Pandya
Browse files
Options

Merge branch 'winh-deprecate-gl_modal' into 'master' 

Deprecate old GlModal component

See merge request gitlab-org/gitlab!16945
parents ed4d4353 c6cf453b
Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 174 deletions
app/assets/javascripts/badges/components/badge_settings.vue
View file @ af35e9ff
......@@ -2,7 +2,7 @@
import { mapState, mapActions } from 'vuex';
import createFlash from '~/flash';
import { s__ } from '~/locale';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import Badge from './badge.vue';
import BadgeForm from './badge_form.vue';
import BadgeList from './badge_list.vue';
......@@ -13,7 +13,7 @@ export default {
Badge,
BadgeForm,
BadgeList,
GlModal,
GlModal: DeprecatedModal2,
},
computed: {
...mapState(['badgeInModal', 'isEditing']),
......
app/assets/javascripts/environments/components/stop_environment_modal.vue
View file @ af35e9ff
<script>
/* eslint-disable @gitlab/vue-i18n/no-bare-strings */
import { GlTooltipDirective } from '@gitlab/ui';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { s__, sprintf } from '~/locale';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import eventHub from '../event_hub';
......@@ -11,7 +11,7 @@ export default {
name: 'StopEnvironmentModal',
components: {
GlModal,
GlModal: DeprecatedModal2,
LoadingButton,
},
......
app/assets/javascripts/ide/components/commit_sidebar/list.vue
View file @ af35e9ff
......@@ -3,7 +3,7 @@ import $ from 'jquery';
import { mapActions } from 'vuex';
import { __, sprintf } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import ListItem from './list_item.vue';
......@@ -11,7 +11,7 @@ export default {
components: {
Icon,
ListItem,
GlModal,
GlModal: DeprecatedModal2,
},
directives: {
tooltip,
......
app/assets/javascripts/ide/components/commit_sidebar/stage_button.vue
View file @ af35e9ff
......@@ -4,12 +4,12 @@ import { mapActions } from 'vuex';
import { sprintf, __ } from '~/locale';
import Icon from '~/vue_shared/components/icon.vue';
import tooltip from '~/vue_shared/directives/tooltip';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
export default {
components: {
Icon,
GlModal,
GlModal: DeprecatedModal2,
},
directives: {
tooltip,
......
app/assets/javascripts/ide/components/new_dropdown/modal.vue
View file @ af35e9ff
......@@ -3,12 +3,12 @@ import $ from 'jquery';
import flash from '~/flash';
import { __, sprintf, s__ } from '~/locale';
import { mapActions, mapState, mapGetters } from 'vuex';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { modalTypes } from '../../constants';
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
},
data() {
return {
......
app/assets/javascripts/pages/admin/jobs/index/components/stop_jobs_modal.vue
View file @ af35e9ff
<script>
import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { redirectTo } from '~/lib/utils/url_utility';
import { s__ } from '~/locale';
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
},
props: {
url: {
......
app/assets/javascripts/pages/milestones/shared/components/promote_milestone_modal.vue
View file @ af35e9ff
<script>
import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { s__, sprintf } from '~/locale';
import { visitUrl } from '~/lib/utils/url_utility';
import eventHub from '../event_hub';
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
},
props: {
milestoneTitle: {
......
app/assets/javascripts/pages/projects/labels/components/promote_label_modal.vue
View file @ af35e9ff
......@@ -2,14 +2,14 @@
import _ from 'underscore';
import axios from '~/lib/utils/axios_utils';
import createFlash from '~/flash';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { s__, sprintf } from '~/locale';
import { visitUrl } from '~/lib/utils/url_utility';
import eventHub from '../event_hub';
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
},
props: {
url: {
......
app/assets/javascripts/performance_bar/components/detailed_metric.vue
View file @ af35e9ff
<script>
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import Icon from '~/vue_shared/components/icon.vue';
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
Icon,
},
props: {
......
app/assets/javascripts/pipelines/components/pipeline_stop_modal.vue
View file @ af35e9ff
<script>
import _ from 'underscore';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { GlLink } from '@gitlab/ui';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import CiIcon from '~/vue_shared/components/ci_icon.vue';
......@@ -13,7 +13,7 @@ import { s__, sprintf } from '~/locale';
*/
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
GlLink,
ClipboardButton,
CiIcon,
......
app/assets/javascripts/profile/account/components/update_username.vue
View file @ af35e9ff
<script>
import _ from 'underscore';
import axios from '~/lib/utils/axios_utils';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import { s__, sprintf } from '~/locale';
import Flash from '~/flash';
export default {
components: {
GlModal,
GlModal: DeprecatedModal2,
},
props: {
actionUrl: {
......
app/assets/javascripts/reports/components/modal.vue
View file @ af35e9ff
<script>
// import { sprintf, __ } from '~/locale';
import Modal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import LoadingButton from '~/vue_shared/components/loading_button.vue';
import CodeBlock from '~/vue_shared/components/code_block.vue';
import { fieldTypes } from '../constants';
export default {
components: {
Modal,
Modal: DeprecatedModal2,
LoadingButton,
CodeBlock,
},
......
app/assets/javascripts/vue_shared/components/deprecated_modal_2.vue 0 → 100644
View file @ af35e9ff
<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>
app/assets/javascripts/vue_shared/components/gl_modal.vue
View file @ af35e9ff
<script>
import $ from 'jquery';
// This file was only introduced to not break master and shall be delete soon.
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
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');
},
},
};
export default DeprecatedModal2;
</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>
doc/development/fe_guide/components.md
View file @ af35e9ff
......@@ -3,7 +3,6 @@
## Contents
- [Dropdowns](#dropdowns)
- [Modals](#modals)
## Dropdowns
......@@ -39,25 +38,3 @@ See also the [corresponding UX guide](https://design.gitlab.com/#/components/dro
```
[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns
## Modals
See also the [corresponding UX guide](https://design.gitlab.com/#/components/modals).
We have a reusable Vue component for modals: [vue_shared/components/gl_modal.vue](https://gitlab.com/gitlab-org/gitlab/blob/master/app/assets/javascripts/vue_shared/components/gl_modal.vue)
Here is an example of how to use it:
```html
<gl-modal
id="dogs-out-modal"
:header-title-text="s__('ModalExample|Let the dogs out?')"
footer-primary-button-variant="danger"
:footer-primary-button-text="s__('ModalExample|Let them out')"
@submit="letOut(theDogs)"
>
{{ s__('ModalExample|You’re about to let the dogs out.') }}
</gl-modal>
```
![example modal](img/gl-modal.png)
ee/app/assets/javascripts/vue_shared/license_management/components/delete_confirmation_modal.vue
View file @ af35e9ff
......@@ -2,11 +2,11 @@
import _ from 'underscore';
import { s__, sprintf } from '~/locale';
import { mapActions, mapState } from 'vuex';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
export default {
name: 'LicenseDeleteConfirmationModal',
components: { GlModal },
components: { GlModal: DeprecatedModal2 },
computed: {
...mapState(['currentLicenseInModal']),
confirmationText() {
......
ee/app/assets/javascripts/vue_shared/license_management/components/set_approval_status_modal.vue
View file @ af35e9ff
<script>
import { s__ } from '~/locale';
import { mapActions, mapState } from 'vuex';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import SafeLink from 'ee/vue_shared/components/safe_link.vue';
import LicensePackages from './license_packages.vue';
import { LICENSE_APPROVAL_STATUS } from '../constants';
export default {
name: 'LicenseSetApprovalStatusModal',
components: { SafeLink, LicensePackages, GlModal },
components: { SafeLink, LicensePackages, GlModal: DeprecatedModal2 },
computed: {
...mapState(['currentLicenseInModal', 'canManageLicenses']),
headerTitleText() {
......
ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue
View file @ af35e9ff
<script>
import { __ } from '~/locale';
import Modal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import ExpandButton from '~/vue_shared/components/expand_button.vue';
import DismissalNote from 'ee/vue_shared/security_reports/components/dismissal_note.vue';
......@@ -22,7 +22,7 @@ export default {
ExpandButton,
IssueNote,
MergeRequestNote,
Modal,
Modal: DeprecatedModal2,
ModalFooter,
SolutionCard,
VulnerabilityDetails,
......
spec/javascripts/vue_shared/components/gl_modal_spec.js → spec/javascripts/vue_shared/components/deprecated_modal_2_spec.js
View file @ af35e9ff
import $ from 'jquery';
import Vue from 'vue';
import GlModal from '~/vue_shared/components/gl_modal.vue';
import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
import mountComponent from 'spec/helpers/vue_mount_component_helper';
const modalComponent = Vue.extend(GlModal);
const modalComponent = Vue.extend(DeprecatedModal2);
describe('GlModal', () => {
describe('DeprecatedModal2', () => {
let vm;
afterEach(() => {
......@@ -153,17 +153,17 @@ describe('GlModal', () => {
let template;
if (slotName) {
template = `
<gl-modal>
<deprecated-modal-2>
<template slot="${slotName}">${slotContent}</template>
</gl-modal>
</deprecated-modal-2>
`;
} else {
template = `<gl-modal>${slotContent}</gl-modal>`;
template = `<deprecated-modal-2>${slotContent}</deprecated-modal-2>`;
}
return Vue.extend({
components: {
GlModal,
DeprecatedModal2,
},
template,
});
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7