summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/admin/users
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-12-17 11:59:07 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-12-17 11:59:07 +0000
commit8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca (patch)
tree544930fb309b30317ae9797a9683768705d664c4 /app/assets/javascripts/admin/users
parent4b1de649d0168371549608993deac953eb692019 (diff)
downloadgitlab-ce-8b573c94895dc0ac0e1d9d59cf3e8745e8b539ca.tar.gz
Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42
Diffstat (limited to 'app/assets/javascripts/admin/users')
-rw-r--r--app/assets/javascripts/admin/users/components/app.vue26
-rw-r--r--app/assets/javascripts/admin/users/components/users_table.vue63
-rw-r--r--app/assets/javascripts/admin/users/index.js22
3 files changed, 111 insertions, 0 deletions
diff --git a/app/assets/javascripts/admin/users/components/app.vue b/app/assets/javascripts/admin/users/components/app.vue
new file mode 100644
index 00000000000..a3abd904a6b
--- /dev/null
+++ b/app/assets/javascripts/admin/users/components/app.vue
@@ -0,0 +1,26 @@
+<script>
+import UsersTable from './users_table.vue';
+
+export default {
+ components: {
+ UsersTable,
+ },
+ props: {
+ users: {
+ type: Array,
+ required: false,
+ default: () => [],
+ },
+ paths: {
+ type: Object,
+ required: true,
+ },
+ },
+};
+</script>
+
+<template>
+ <div>
+ <users-table :users="users" :paths="paths" />
+ </div>
+</template>
diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue
new file mode 100644
index 00000000000..a2d68972519
--- /dev/null
+++ b/app/assets/javascripts/admin/users/components/users_table.vue
@@ -0,0 +1,63 @@
+<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>
diff --git a/app/assets/javascripts/admin/users/index.js b/app/assets/javascripts/admin/users/index.js
new file mode 100644
index 00000000000..21780ee9984
--- /dev/null
+++ b/app/assets/javascripts/admin/users/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import AdminUsersApp from './components/app.vue';
+
+export default function(el = document.querySelector('#js-admin-users-app')) {
+ if (!el) {
+ return false;
+ }
+
+ const { users, paths } = el.dataset;
+
+ return new Vue({
+ el,
+ render: createElement =>
+ createElement(AdminUsersApp, {
+ props: {
+ users: convertObjectPropsToCamelCase(JSON.parse(users), { deep: true }),
+ paths: convertObjectPropsToCamelCase(JSON.parse(paths)),
+ },
+ }),
+ });
+}