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

Add table to admin users vue app

See merge request gitlab-org/gitlab!49551

app/assets/javascripts/admin/users/components/app.vue

 <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>

app/assets/javascripts/admin/users/components/users_table.vue

+<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>

app/assets/stylesheets/utilities.scss

@@ -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%;
+}

app/views/admin/users/index.html.haml

@@ -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' }

spec/frontend/admin/users/components/app_spec.js

+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,
+      });
+    });
+  });
+});

spec/frontend/admin/users/components/users_table_spec.js

+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');
+    });
+  });
+});

spec/frontend/admin/users/mock_data.js

@@ -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: [],