Skip to content

G
gitlab-ce
Commit 0af13586 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera
Browse files
Options

Merge branch '285110-add-vue-admin-user-modals' into 'master' 

Migrate admin/users confirmation modals to vue

See merge request gitlab-org/gitlab!53645
parents 610d4f34 0f9a35ea
Hide whitespace changes
Inline Side-by-side
Showing with 611 additions and 47 deletions
app/assets/javascripts/admin/users/components/actions/activate.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
export default {
components: {
GlDropdownItem,
},
props: {
username: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
computed: {
modalAttributes() {
return {
'data-path': this.path,
'data-method': 'put',
'data-modal-attributes': JSON.stringify({
title: sprintf(s__('AdminUsers|Activate user %{username}?'), {
username: this.username,
}),
message: s__('AdminUsers|You can always deactivate their account again if needed.'),
okVariant: 'confirm',
okTitle: s__('AdminUsers|Activate'),
}),
};
},
},
};
</script>
<template>
<div class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
<gl-dropdown-item>
<slot></slot>
</gl-dropdown-item>
</div>
</template>
app/assets/javascripts/admin/users/components/actions/approve.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
export default {
components: {
GlDropdownItem,
},
props: {
path: {
type: String,
required: true,
},
},
};
</script>
<template>
<gl-dropdown-item :href="path" data-method="put">
<slot></slot>
</gl-dropdown-item>
</template>
app/assets/javascripts/admin/users/components/actions/block.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
// TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
const messageHtml = `
<p>${s__('AdminUsers|Blocking user has the following effects:')}</p>
<ul>
<li>${s__('AdminUsers|User will not be able to login')}</li>
<li>${s__('AdminUsers|User will not be able to access git repositories')}</li>
<li>${s__('AdminUsers|Personal projects will be left')}</li>
<li>${s__('AdminUsers|Owned groups will be left')}</li>
</ul>
`;
export default {
components: {
GlDropdownItem,
},
props: {
username: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
computed: {
modalAttributes() {
return {
'data-path': this.path,
'data-method': 'put',
'data-modal-attributes': JSON.stringify({
title: sprintf(s__('AdminUsers|Block user %{username}?'), { username: this.username }),
okVariant: 'confirm',
okTitle: s__('AdminUsers|Block'),
messageHtml,
}),
};
},
},
};
</script>
<template>
<div class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
<gl-dropdown-item>
<slot></slot>
</gl-dropdown-item>
</div>
</template>
app/assets/javascripts/admin/users/components/actions/deactivate.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
// TODO: To be replaced with <template> content in https://gitlab.com/gitlab-org/gitlab/-/issues/320922
const messageHtml = `
<p>${s__('AdminUsers|Deactivating a user has the following effects:')}</p>
<ul>
<li>${s__('AdminUsers|The user will be logged out')}</li>
<li>${s__('AdminUsers|The user will not be able to access git repositories')}</li>
<li>${s__('AdminUsers|The user will not be able to access the API')}</li>
<li>${s__('AdminUsers|The user will not receive any notifications')}</li>
<li>${s__('AdminUsers|The user will not be able to use slash commands')}</li>
<li>${s__(
'AdminUsers|When the user logs back in, their account will reactivate as a fully active account',
)}</li>
<li>${s__('AdminUsers|Personal projects, group and user history will be left intact')}</li>
</ul>
`;
export default {
components: {
GlDropdownItem,
},
props: {
username: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
computed: {
modalAttributes() {
return {
'data-path': this.path,
'data-method': 'put',
'data-modal-attributes': JSON.stringify({
title: sprintf(s__('AdminUsers|Deactivate user %{username}?'), {
username: this.username,
}),
okVariant: 'confirm',
okTitle: s__('AdminUsers|Deactivate'),
messageHtml,
}),
};
},
},
};
</script>
<template>
<div class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
<gl-dropdown-item>
<slot></slot>
</gl-dropdown-item>
</div>
</template>
app/assets/javascripts/admin/users/components/actions/delete.vue 0 → 100644
View file @ 0af13586
<script>
import SharedDeleteAction from './shared/shared_delete_action.vue';
export default {
components: {
SharedDeleteAction,
},
props: {
username: {
type: String,
required: true,
},
paths: {
type: Object,
required: true,
},
},
};
</script>
<template>
<shared-delete-action modal-type="delete" :username="username" :paths="paths">
<slot></slot>
</shared-delete-action>
</template>
app/assets/javascripts/admin/users/components/actions/delete_with_contributions.vue 0 → 100644
View file @ 0af13586
<script>
import SharedDeleteAction from './shared/shared_delete_action.vue';
export default {
components: {
SharedDeleteAction,
},
props: {
username: {
type: String,
required: true,
},
paths: {
type: Object,
required: true,
},
},
};
</script>
<template>
<shared-delete-action modal-type="delete-with-contributions" :username="username" :paths="paths">
<slot></slot>
</shared-delete-action>
</template>
app/assets/javascripts/admin/users/components/actions/index.js 0 → 100644
View file @ 0af13586
import Activate from './activate.vue';
import Approve from './approve.vue';
import Block from './block.vue';
import Deactivate from './deactivate.vue';
import Delete from './delete.vue';
import DeleteWithContributions from './delete_with_contributions.vue';
import Unblock from './unblock.vue';
import Unlock from './unlock.vue';
import Reject from './reject.vue';
export default {
Activate,
Approve,
Block,
Deactivate,
Delete,
DeleteWithContributions,
Unblock,
Unlock,
Reject,
};
app/assets/javascripts/admin/users/components/actions/reject.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
export default {
components: {
GlDropdownItem,
},
props: {
path: {
type: String,
required: true,
},
},
};
</script>
<template>
<gl-dropdown-item :href="path" data-method="delete">
<slot></slot>
</gl-dropdown-item>
</template>
app/assets/javascripts/admin/users/components/actions/shared/shared_delete_action.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
export default {
components: {
GlDropdownItem,
},
props: {
username: {
type: String,
required: true,
},
paths: {
type: Object,
required: true,
},
modalType: {
type: String,
required: true,
},
},
computed: {
modalAttributes() {
return {
'data-block-user-url': this.paths.block,
'data-delete-user-url': this.paths.delete,
'data-gl-modal-action': this.modalType,
'data-username': this.username,
};
},
},
};
</script>
<template>
<div class="js-delete-user-modal-button" v-bind="{ ...modalAttributes }">
<gl-dropdown-item>
<span class="gl-text-red-500">
<slot></slot>
</span>
</gl-dropdown-item>
</div>
</template>
app/assets/javascripts/admin/users/components/actions/unblock.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__ } from '~/locale';
export default {
components: {
GlDropdownItem,
},
props: {
username: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
computed: {
modalAttributes() {
return {
'data-path': this.path,
'data-method': 'put',
'data-modal-attributes': JSON.stringify({
title: sprintf(s__('AdminUsers|Unblock user %{username}?'), { username: this.username }),
message: s__(
'AdminUsers|You can always unblock their account, their data will remain intact.',
),
okVariant: 'confirm',
okTitle: s__('AdminUsers|Unblock'),
}),
};
},
},
};
</script>
<template>
<div class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
<gl-dropdown-item>
<slot></slot>
</gl-dropdown-item>
</div>
</template>
app/assets/javascripts/admin/users/components/actions/unlock.vue 0 → 100644
View file @ 0af13586
<script>
import { GlDropdownItem } from '@gitlab/ui';
import { sprintf, s__, __ } from '~/locale';
export default {
components: {
GlDropdownItem,
},
props: {
username: {
type: String,
required: true,
},
path: {
type: String,
required: true,
},
},
computed: {
modalAttributes() {
return {
'data-path': this.path,
'data-method': 'put',
'data-modal-attributes': JSON.stringify({
title: sprintf(s__('AdminUsers|Unlock user %{username}?'), { username: this.username }),
message: __('Are you sure?'),
okVariant: 'confirm',
okTitle: s__('AdminUsers|Unlock'),
}),
};
},
},
};
</script>
<template>
<div class="js-confirm-modal-button" v-bind="{ ...modalAttributes }">
<gl-dropdown-item>
<slot></slot>
</gl-dropdown-item>
</div>
</template>
app/assets/javascripts/admin/users/components/user_actions.vue
View file @ 0af13586
......@@ -6,9 +6,11 @@ import {
GlDropdownSectionHeader,
GlDropdownDivider,
} from '@gitlab/ui';
import { s__, __ } from '~/locale';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import { convertArrayToCamelCase } from '~/lib/utils/common_utils';
import { generateUserPaths } from '../utils';
import { I18N_USER_ACTIONS } from '../constants';
import Actions from './actions';
export default {
components: {
......@@ -17,6 +19,7 @@ export default {
GlDropdownItem,
GlDropdownSectionHeader,
GlDropdownDivider,
...Actions,
},
props: {
user: {
......@@ -58,21 +61,11 @@ export default {
isLdapAction(action) {
return action === 'ldapBlocked';
},
getActionComponent(action) {
return Actions[capitalizeFirstCharacter(action)];
},
},
i18n: {
edit: __('Edit'),
settings: __('Settings'),
unlock: __('Unlock'),
block: s__('AdminUsers|Block'),
unblock: s__('AdminUsers|Unblock'),
approve: s__('AdminUsers|Approve'),
reject: s__('AdminUsers|Reject'),
deactivate: s__('AdminUsers|Deactivate'),
activate: s__('AdminUsers|Activate'),
ldapBlocked: s__('AdminUsers|Cannot unblock LDAP blocked users'),
delete: s__('AdminUsers|Delete user'),
deleteWithContributions: s__('AdminUsers|Delete user and contributions'),
},
i18n: I18N_USER_ACTIONS,
};
</script>
......@@ -92,24 +85,35 @@ export default {
<gl-dropdown-section-header>{{ $options.i18n.settings }}</gl-dropdown-section-header>
<template v-for="action in dropdownSafeActions">
<gl-dropdown-item v-if="isLdapAction(action)" :key="action" :data-testid="action">
{{ $options.i18n.ldap }}
</gl-dropdown-item>
<gl-dropdown-item v-else :key="action" :href="userPaths[action]" :data-testid="action">
<component
:is="getActionComponent(action)"
v-if="getActionComponent(action)"
:key="action"
:path="userPaths[action]"
:username="user.name"
:data-testid="action"
>
{{ $options.i18n[action] }}
</component>
<gl-dropdown-item v-else-if="isLdapAction(action)" :key="action" :data-testid="action">
{{ $options.i18n[action] }}
</gl-dropdown-item>
</template>
<gl-dropdown-divider v-if="hasDeleteActions" />
<gl-dropdown-item
v-for="action in dropdownDeleteActions"
:key="action"
:href="userPaths[action]"
:data-testid="`delete-${action}`"
>
<span class="gl-text-red-500">{{ $options.i18n[action] }}</span>
</gl-dropdown-item>
<template v-for="action in dropdownDeleteActions">
<component
:is="getActionComponent(action)"
v-if="getActionComponent(action)"
:key="action"
:paths="userPaths"
:username="user.name"
:data-testid="`delete-${action}`"
>
{{ $options.i18n[action] }}
</component>
</template>
</gl-dropdown>
</div>
</template>
app/assets/javascripts/admin/users/constants.js
View file @ 0af13586
import { s__, __ } from '~/locale';
export const USER_AVATAR_SIZE = 32;
export const SHORT_DATE_FORMAT = 'd mmm, yyyy';
export const LENGTH_OF_USER_NOTE_TOOLTIP = 100;
export const I18N_USER_ACTIONS = {
edit: __('Edit'),
settings: __('Settings'),
unlock: __('Unlock'),
block: s__('AdminUsers|Block'),
unblock: s__('AdminUsers|Unblock'),
approve: s__('AdminUsers|Approve'),
reject: s__('AdminUsers|Reject'),
deactivate: s__('AdminUsers|Deactivate'),
activate: s__('AdminUsers|Activate'),
ldapBlocked: s__('AdminUsers|Cannot unblock LDAP blocked users'),
delete: s__('AdminUsers|Delete user'),
deleteWithContributions: s__('AdminUsers|Delete user and contributions'),
};
app/assets/javascripts/pages/admin/users/index.js
View file @ 0af13586
......@@ -34,6 +34,8 @@ function loadModalsConfigurationFromHtml(modalsElement) {
document.addEventListener('DOMContentLoaded', () => {
Vue.use(Translate);
initAdminUsersApp();
const modalConfiguration = loadModalsConfigurationFromHtml(
document.querySelector(MODAL_TEXTS_CONTAINER_SELECTOR),
);
......@@ -60,7 +62,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
initConfirmModal();
initAdminUsersApp();
initCohortsEmptyState();
initTabs();
});
locale/gitlab.pot
View file @ 0af13586
......@@ -2376,6 +2376,12 @@ msgstr ""
msgid "AdminUsers|Unblock user %{username}?"
msgstr ""
msgid "AdminUsers|Unlock"
msgstr ""
msgid "AdminUsers|Unlock user %{username}?"
msgstr ""
msgid "AdminUsers|User will not be able to access git repositories"
msgstr ""
......
spec/frontend/admin/users/components/actions/actions_spec.js 0 → 100644
View file @ 0af13586
import { nextTick } from 'vue';
import { shallowMount } from '@vue/test-utils';
import { GlDropdownItem } from '@gitlab/ui';
import { kebabCase } from 'lodash';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import Actions from '~/admin/users/components/actions';
import SharedDeleteAction from '~/admin/users/components/actions/shared/shared_delete_action.vue';
import { CONFIRMATION_ACTIONS, DELETE_ACTIONS } from '../../constants';
describe('Action components', () => {
let wrapper;
const findDropdownItem = () => wrapper.find(GlDropdownItem);
const initComponent = ({ component, props, stubs = {} } = {}) => {
wrapper = shallowMount(component, {
propsData: {
...props,
},
stubs,
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('CONFIRMATION_ACTIONS', () => {
it.each(CONFIRMATION_ACTIONS)('renders a dropdown item for "%s"', async (action) => {
initComponent({
component: Actions[capitalizeFirstCharacter(action)],
props: {
username: 'John Doe',
path: '/test',
},
});
await nextTick();
const div = wrapper.find('div');
expect(div.attributes('data-path')).toBe('/test');
expect(div.attributes('data-modal-attributes')).toContain('John Doe');
expect(findDropdownItem().exists()).toBe(true);
});
});
describe('LINK_ACTIONS', () => {
it.each`
action | method
${'Approve'} | ${'put'}
${'Reject'} | ${'delete'}
`(
'renders a dropdown item link with method "$method" for "$action"',
async ({ action, method }) => {
initComponent({
component: Actions[action],
props: {
path: '/test',
},
});
await nextTick();
const item = wrapper.find(GlDropdownItem);
expect(item.attributes('href')).toBe('/test');
expect(item.attributes('data-method')).toContain(method);
},
);
});
describe('DELETE_ACTION_COMPONENTS', () => {
it.each(DELETE_ACTIONS)('renders a dropdown item for "%s"', async (action) => {
initComponent({
component: Actions[capitalizeFirstCharacter(action)],
props: {
username: 'John Doe',
paths: {
delete: '/delete',
block: '/block',
},
},
stubs: { SharedDeleteAction },
});
await nextTick();
const sharedAction = wrapper.find(SharedDeleteAction);
expect(sharedAction.attributes('data-block-user-url')).toBe('/block');
expect(sharedAction.attributes('data-delete-user-url')).toBe('/delete');
expect(sharedAction.attributes('data-gl-modal-action')).toBe(kebabCase(action));
expect(sharedAction.attributes('data-username')).toBe('John Doe');
expect(findDropdownItem().exists()).toBe(true);
});
});
});
spec/frontend/admin/users/components/user_actions_spec.js
View file @ 0af13586
......@@ -2,14 +2,12 @@ import { shallowMount } from '@vue/test-utils';
import { GlDropdownDivider } from '@gitlab/ui';
import AdminUserActions from '~/admin/users/components/user_actions.vue';
import { generateUserPaths } from '~/admin/users/utils';
import { I18N_USER_ACTIONS } from '~/admin/users/constants';
import Actions from '~/admin/users/components/actions';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import { users, paths } from '../mock_data';
const BLOCK = 'block';
const EDIT = 'edit';
const LDAP = 'ldapBlocked';
const DELETE = 'delete';
const DELETE_WITH_CONTRIBUTIONS = 'deleteWithContributions';
import { CONFIRMATION_ACTIONS, DELETE_ACTIONS, LINK_ACTIONS, LDAP, EDIT } from '../constants';
describe('AdminUserActions component', () => {
let wrapper;
......@@ -62,7 +60,7 @@ describe('AdminUserActions component', () => {
describe('actions dropdown', () => {
describe('when there are actions', () => {
const actions = [EDIT, BLOCK];
const actions = [EDIT, ...LINK_ACTIONS];
beforeEach(() => {
initComponent({ actions });
......@@ -72,10 +70,31 @@ describe('AdminUserActions component', () => {
expect(findActionsDropdown().exists()).toBe(true);
});
it.each(actions)('renders a dropdown item for %s', (action) => {
const dropdownAction = wrapper.find(`[data-testid="${action}"]`);
expect(dropdownAction.exists()).toBe(true);
expect(dropdownAction.attributes('href')).toBe(userPaths[action]);
describe('when there are actions that should render as links', () => {
beforeEach(() => {
initComponent({ actions: LINK_ACTIONS });
});
it.each(LINK_ACTIONS)('renders an action component item for "%s"', (action) => {
const component = wrapper.find(Actions[capitalizeFirstCharacter(action)]);
expect(component.props('path')).toBe(userPaths[action]);
expect(component.text()).toBe(I18N_USER_ACTIONS[action]);
});
});
describe('when there are actions that require confirmation', () => {
beforeEach(() => {
initComponent({ actions: CONFIRMATION_ACTIONS });
});
it.each(CONFIRMATION_ACTIONS)('renders an action component item for "%s"', (action) => {
const component = wrapper.find(Actions[capitalizeFirstCharacter(action)]);
expect(component.props('username')).toBe(user.name);
expect(component.props('path')).toBe(userPaths[action]);
expect(component.text()).toBe(I18N_USER_ACTIONS[action]);
});
});
describe('when there is a LDAP action', () => {
......@@ -87,14 +106,13 @@ describe('AdminUserActions component', () => {
const dropdownAction = wrapper.find(`[data-testid="${LDAP}"]`);
expect(dropdownAction.exists()).toBe(true);
expect(dropdownAction.attributes('href')).toBe(undefined);
expect(dropdownAction.text()).toBe(I18N_USER_ACTIONS[LDAP]);
});
});
describe('when there is a delete action', () => {
const deleteActions = [DELETE, DELETE_WITH_CONTRIBUTIONS];
beforeEach(() => {
initComponent({ actions: [BLOCK, ...deleteActions] });
initComponent({ actions: [LDAP, ...DELETE_ACTIONS] });
});
it('renders a dropdown divider', () => {
......@@ -103,13 +121,15 @@ describe('AdminUserActions component', () => {
it('only renders delete dropdown items for actions containing the word "delete"', () => {
const { length } = wrapper.findAll(`[data-testid*="delete-"]`);
expect(length).toBe(deleteActions.length);
expect(length).toBe(DELETE_ACTIONS.length);
});
it.each(deleteActions)('renders a delete dropdown item for %s', (action) => {
const deleteAction = wrapper.find(`[data-testid="delete-${action}"]`);
expect(deleteAction.exists()).toBe(true);
expect(deleteAction.attributes('href')).toBe(userPaths[action]);
it.each(DELETE_ACTIONS)('renders a delete action component item for "%s"', (action) => {
const component = wrapper.find(Actions[capitalizeFirstCharacter(action)]);
expect(component.props('username')).toBe(user.name);
expect(component.props('paths')).toEqual(userPaths);
expect(component.text()).toBe(I18N_USER_ACTIONS[action]);
});
});
......
spec/frontend/admin/users/constants.js 0 → 100644
View file @ 0af13586
const BLOCK = 'block';
const UNBLOCK = 'unblock';
const DELETE = 'delete';
const DELETE_WITH_CONTRIBUTIONS = 'deleteWithContributions';
const UNLOCK = 'unlock';
const ACTIVATE = 'activate';
const DEACTIVATE = 'deactivate';
const REJECT = 'reject';
const APPROVE = 'approve';
export const EDIT = 'edit';
export const LDAP = 'ldapBlocked';
export const LINK_ACTIONS = [APPROVE, REJECT];
export const CONFIRMATION_ACTIONS = [ACTIVATE, BLOCK, DEACTIVATE, UNLOCK, UNBLOCK];
export const DELETE_ACTIONS = [DELETE, DELETE_WITH_CONTRIBUTIONS];
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