diff options
Diffstat (limited to 'app/assets/javascripts/members/components/modals')
-rw-r--r-- | app/assets/javascripts/members/components/modals/leave_modal.vue | 70 | ||||
-rw-r--r-- | app/assets/javascripts/members/components/modals/remove_group_link_modal.vue | 69 |
2 files changed, 139 insertions, 0 deletions
diff --git a/app/assets/javascripts/members/components/modals/leave_modal.vue b/app/assets/javascripts/members/components/modals/leave_modal.vue new file mode 100644 index 00000000000..57a5da774e3 --- /dev/null +++ b/app/assets/javascripts/members/components/modals/leave_modal.vue @@ -0,0 +1,70 @@ +<script> +import { mapState } from 'vuex'; +import { GlModal, GlForm, GlSprintf, GlTooltipDirective } from '@gitlab/ui'; +import csrf from '~/lib/utils/csrf'; +import { __, s__, sprintf } from '~/locale'; +import { LEAVE_MODAL_ID } from '../../constants'; + +export default { + name: 'LeaveModal', + actionCancel: { + text: __('Cancel'), + }, + actionPrimary: { + text: __('Leave'), + attributes: { + variant: 'danger', + }, + }, + csrf, + modalId: LEAVE_MODAL_ID, + modalContent: s__('Members|Are you sure you want to leave "%{source}"?'), + components: { GlModal, GlForm, GlSprintf }, + directives: { + GlTooltip: GlTooltipDirective, + }, + props: { + member: { + type: Object, + required: true, + }, + }, + computed: { + ...mapState(['memberPath']), + leavePath() { + return this.memberPath.replace(/:id$/, 'leave'); + }, + modalTitle() { + return sprintf(s__('Members|Leave "%{source}"'), { source: this.member.source.name }); + }, + }, + methods: { + handlePrimary() { + this.$refs.form.$el.submit(); + }, + }, +}; +</script> + +<template> + <gl-modal + v-bind="$attrs" + :modal-id="$options.modalId" + :title="modalTitle" + :action-primary="$options.actionPrimary" + :action-cancel="$options.actionCancel" + size="sm" + @primary="handlePrimary" + > + <gl-form ref="form" :action="leavePath" method="post"> + <p> + <gl-sprintf :message="$options.modalContent"> + <template #source>{{ member.source.name }}</template> + </gl-sprintf> + </p> + + <input type="hidden" name="_method" value="delete" /> + <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> + </gl-form> + </gl-modal> +</template> diff --git a/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue b/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue new file mode 100644 index 00000000000..231d014a4ec --- /dev/null +++ b/app/assets/javascripts/members/components/modals/remove_group_link_modal.vue @@ -0,0 +1,69 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlModal, GlSprintf, GlForm } from '@gitlab/ui'; +import csrf from '~/lib/utils/csrf'; +import { __, s__, sprintf } from '~/locale'; +import { REMOVE_GROUP_LINK_MODAL_ID } from '../../constants'; + +export default { + name: 'RemoveGroupLinkModal', + actionCancel: { + text: __('Cancel'), + }, + actionPrimary: { + text: s__('Members|Remove group'), + attributes: { + variant: 'danger', + }, + }, + csrf, + i18n: { + modalBody: s__('Members|Are you sure you want to remove "%{groupName}"?'), + }, + modalId: REMOVE_GROUP_LINK_MODAL_ID, + components: { GlModal, GlSprintf, GlForm }, + computed: { + ...mapState(['memberPath', 'groupLinkToRemove', 'removeGroupLinkModalVisible']), + groupLinkPath() { + return this.memberPath.replace(/:id$/, this.groupLinkToRemove?.id); + }, + groupName() { + return this.groupLinkToRemove?.sharedWithGroup.fullName; + }, + modalTitle() { + return sprintf(s__('Members|Remove "%{groupName}"'), { groupName: this.groupName }); + }, + }, + methods: { + ...mapActions(['hideRemoveGroupLinkModal']), + handlePrimary() { + this.$refs.form.$el.submit(); + }, + }, +}; +</script> + +<template> + <gl-modal + v-bind="$attrs" + :modal-id="$options.modalId" + :visible="removeGroupLinkModalVisible" + :title="modalTitle" + :action-primary="$options.actionPrimary" + :action-cancel="$options.actionCancel" + size="sm" + @primary="handlePrimary" + @hide="hideRemoveGroupLinkModal" + > + <gl-form ref="form" :action="groupLinkPath" method="post"> + <p> + <gl-sprintf :message="$options.i18n.modalBody"> + <template #groupName>{{ groupName }}</template> + </gl-sprintf> + </p> + + <input type="hidden" name="_method" value="delete" /> + <input :value="$options.csrf.token" type="hidden" name="authenticity_token" /> + </gl-form> + </gl-modal> +</template> |