Commit e1b1ace5 authored by Doug Stull's avatar Doug Stull Committed by Paul Slaughter

Change invite modal to allow opening from anywhere in the dom

- allow multi-use across different areas.
- https://gitlab.com/gitlab-org/gitlab/-/merge_requests/73485
parent f3c36656
......@@ -12,7 +12,7 @@ import {
GlFormInput,
GlFormCheckboxGroup,
} from '@gitlab/ui';
import { partition, isString, unescape } from 'lodash';
import { partition, isString, unescape, uniqueId } from 'lodash';
import Api from '~/api';
import ExperimentTracking from '~/experimentation/experiment_tracking';
import { sanitize } from '~/lib/dompurify';
......@@ -117,7 +117,7 @@ export default {
data() {
return {
visible: true,
modalId: 'invite-members-modal',
modalId: uniqueId('invite-members-modal-'),
selectedAccessLevel: this.defaultAccessLevel,
inviteeType: 'members',
newUsersToInvite: [],
......@@ -444,6 +444,7 @@ export default {
:modal-id="modalId"
size="sm"
data-qa-selector="invite_members_modal_content"
data-testid="invite-members-modal"
:title="$options.labels[inviteeType].modalTitle"
:header-close-label="$options.labels.headerCloseLabel"
@hidden="resetFields"
......@@ -597,11 +598,9 @@ export default {
</div>
<template #modal-footer>
<div class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0">
<gl-button data-testid="cancel-button" @click="closeModal">
{{ $options.labels.cancelButtonText }}
</gl-button>
<div class="gl-mr-3"></div>
<gl-button
:disabled="inviteDisabled"
:loading="isLoading"
......@@ -609,9 +608,9 @@ export default {
data-qa-selector="invite_button"
data-testid="invite-button"
@click="sendInvite"
>{{ $options.labels.inviteButtonText }}</gl-button
>
</div>
{{ $options.labels.inviteButtonText }}
</gl-button>
</template>
</gl-modal>
</template>
......@@ -6,6 +6,10 @@ import { parseBoolean } from '~/lib/utils/common_utils';
Vue.use(GlToast);
export default function initInviteMembersModal() {
// https://gitlab.com/gitlab-org/gitlab/-/issues/344955
// bug lying in wait here for someone to put group and project invite in same screen
// once that happens we'll need to mount these differently, perhaps split
// group/project to each mount one, with many ways to open it.
const el = document.querySelector('.js-invite-members-modal');
if (!el) {
......
......@@ -42,9 +42,3 @@
svg g { fill: $gray-600; }
}
}
#invite-members-modal {
.modal-footer {
flex-direction: row;
}
}
......@@ -66,7 +66,7 @@ RSpec.describe 'Groups > Members > List members' do
click_on 'Invite members'
page.within '#invite-members-modal' do
page.within '[data-testid="invite-members-modal"]' do
field = find('[data-testid="members-token-select-input"]')
field.native.send_keys :tab
field.click
......
......@@ -8,7 +8,7 @@ module Spec
def invite_member(name, role: 'Guest', expires_at: nil, area_of_focus: false)
click_on 'Invite members'
page.within '#invite-members-modal' do
page.within '[data-testid="invite-members-modal"]' do
find('[data-testid="members-token-select-input"]').set(name)
wait_for_requests
......
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