Commit f2f71141 authored by Enrique Alcántara's avatar Enrique Alcántara

Merge branch '285106-add-admin-users-vue-table' into 'master'

Add table to admin users vue app

See merge request gitlab-org/gitlab!49551
parents 73ab35bf c74c05ef
<script>
import UsersTable from './users_table.vue';
export default {
components: {
UsersTable,
},
props: {
users: {
type: Array,
......@@ -16,6 +21,6 @@ export default {
<template>
<div>
<!-- Temporary empty app -->
<users-table :users="users" :paths="paths" />
</div>
</template>
<script>
import { GlTable } from '@gitlab/ui';
import { __ } from '~/locale';
const DEFAULT_TH_CLASSES =
'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-100! gl-p-5! gl-border-b-1!';
const thWidthClass = width => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`;
export default {
components: {
GlTable,
},
props: {
users: {
type: Array,
required: true,
},
paths: {
type: Object,
required: true,
},
},
fields: [
{
key: 'name',
label: __('Name'),
thClass: thWidthClass(40),
},
{
key: 'projectsCount',
label: __('Projects'),
thClass: thWidthClass(10),
},
{
key: 'createdAt',
label: __('Created on'),
thClass: thWidthClass(15),
},
{
key: 'lastActivityOn',
label: __('Last activity'),
thClass: thWidthClass(15),
},
{
key: 'settings',
label: '',
thClass: thWidthClass(20),
},
],
};
</script>
<template>
<div>
<gl-table
:items="users"
:fields="$options.fields"
:empty-text="s__('AdminUsers|No users found')"
show-empty
stacked="md"
/>
</div>
</template>
......@@ -143,3 +143,16 @@
flex-direction: column !important;
}
}
// These will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1091
.gl-w-10p {
width: 10%;
}
.gl-w-20p {
width: 20%;
}
.gl-w-40p {
width: 40%;
}
......@@ -69,13 +69,13 @@
= link_to admin_users_path(sort: value, filter: params[:filter], search_query: params[:search_query]) do
= title
- if @users.empty?
.nothing-here-block.border-top-0
= s_('AdminUsers|No users found')
- elsif Feature.enabled?(:vue_admin_users)
- if Feature.enabled?(:vue_admin_users)
#js-admin-users-app{ data: admin_users_data_attributes(@users) }
.gl-spinner-container.gl-my-7
%span.gl-vertical-align-bottom.gl-spinner.gl-spinner-dark.gl-spinner-lg{ aria: { label: _('Loading') } }
- elsif @users.empty?
.nothing-here-block.border-top-0
= s_('AdminUsers|No users found')
- else
.table-holder
.thead-white.text-nowrap.gl-responsive-table-row.table-row-header{ role: 'row' }
......
import { shallowMount } from '@vue/test-utils';
import AdminUsersApp from '~/admin/users/components/app.vue';
import AdminUsersTable from '~/admin/users/components/users_table.vue';
import { users, paths } from '../mock_data';
describe('AdminUsersApp component', () => {
let wrapper;
const initComponent = (props = {}) => {
wrapper = shallowMount(AdminUsersApp, {
propsData: {
users,
paths,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when initialized', () => {
beforeEach(() => {
initComponent();
});
it('renders the admin users table with props', () => {
expect(wrapper.find(AdminUsersTable).props()).toEqual({
users,
paths,
});
});
});
});
import { GlTable } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import AdminUsersTable from '~/admin/users/components/users_table.vue';
import { users, paths } from '../mock_data';
describe('AdminUsersTable component', () => {
let wrapper;
const getCellByLabel = (trIdx, label) => {
return wrapper
.find(GlTable)
.find('tbody')
.findAll('tr')
.at(trIdx)
.find(`[data-label="${label}"][role="cell"]`);
};
const initComponent = (props = {}) => {
wrapper = mount(AdminUsersTable, {
propsData: {
users,
paths,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('when there are users', () => {
const user = users[0];
beforeEach(() => {
initComponent();
});
it.each`
key | label
${'name'} | ${'Name'}
${'projectsCount'} | ${'Projects'}
${'createdAt'} | ${'Created on'}
${'lastActivityOn'} | ${'Last activity'}
`('renders users.$key for $label', ({ key, label }) => {
expect(getCellByLabel(0, label).text()).toBe(`${user[key]}`);
});
});
describe('when users is an empty array', () => {
beforeEach(() => {
initComponent({ users: [] });
});
it('renders a "No users found" message', () => {
expect(wrapper.text()).toContain('No users found');
});
});
});
......@@ -5,7 +5,7 @@ export const users = [
createdAt: '2020-11-13T12:26:54.177Z',
email: 'nikki@example.com',
username: 'nikki',
lastActivityOn: null,
lastActivityOn: '2020-12-09',
avatarUrl:
'https://secure.gravatar.com/avatar/054f062d8b1a42b123f17e13a173cda8?s=80\\u0026d=identicon',
badges: [],
......
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