Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

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