diff options
Diffstat (limited to 'app/assets/javascripts/admin')
10 files changed, 71 insertions, 11 deletions
diff --git a/app/assets/javascripts/admin/application_settings/setup_metrics_and_profiling.js b/app/assets/javascripts/admin/application_settings/setup_metrics_and_profiling.js index f89533aeb1d..a357d5d2f1f 100644 --- a/app/assets/javascripts/admin/application_settings/setup_metrics_and_profiling.js +++ b/app/assets/javascripts/admin/application_settings/setup_metrics_and_profiling.js @@ -1,7 +1,7 @@ import PayloadPreviewer from '~/pages/admin/application_settings/payload_previewer'; export default () => { - Array.from(document.querySelectorAll('.js-payload-preview-trigger')).forEach(trigger => { + Array.from(document.querySelectorAll('.js-payload-preview-trigger')).forEach((trigger) => { new PayloadPreviewer(trigger).init(); }); }; diff --git a/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue b/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue index bc2d96832fa..5da38495010 100644 --- a/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue +++ b/app/assets/javascripts/admin/cohorts/components/usage_ping_disabled.vue @@ -36,7 +36,7 @@ export default { ) " > - <template #docLink="{content}"> + <template #docLink="{ content }"> <gl-link :href="docsLink" target="_blank">{{ content }}</gl-link> </template> <template #strong="{ content }" diff --git a/app/assets/javascripts/admin/dev_ops_report/components/usage_ping_disabled.vue b/app/assets/javascripts/admin/dev_ops_report/components/usage_ping_disabled.vue index 316827e1b07..c0ad814172d 100644 --- a/app/assets/javascripts/admin/dev_ops_report/components/usage_ping_disabled.vue +++ b/app/assets/javascripts/admin/dev_ops_report/components/usage_ping_disabled.vue @@ -35,7 +35,7 @@ export default { ) " > - <template #docLink="{content}"> + <template #docLink="{ content }"> <gl-link :href="docsLink" target="_blank">{{ content }}</gl-link> </template> </gl-sprintf> diff --git a/app/assets/javascripts/admin/statistics_panel/index.js b/app/assets/javascripts/admin/statistics_panel/index.js index 39112e3ddc0..8c49fffe630 100644 --- a/app/assets/javascripts/admin/statistics_panel/index.js +++ b/app/assets/javascripts/admin/statistics_panel/index.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import StatisticsPanelApp from './components/app.vue'; import createStore from './store'; -export default function(el) { +export default function (el) { if (!el) { return false; } diff --git a/app/assets/javascripts/admin/statistics_panel/store/actions.js b/app/assets/javascripts/admin/statistics_panel/store/actions.js index dd04e492388..149540c4222 100644 --- a/app/assets/javascripts/admin/statistics_panel/store/actions.js +++ b/app/assets/javascripts/admin/statistics_panel/store/actions.js @@ -13,7 +13,7 @@ export const fetchStatistics = ({ dispatch }) => { .then(({ data }) => { dispatch('receiveStatisticsSuccess', convertObjectPropsToCamelCase(data, { deep: true })); }) - .catch(error => dispatch('receiveStatisticsError', error)); + .catch((error) => dispatch('receiveStatisticsError', error)); }; export const receiveStatisticsSuccess = ({ commit }, statistics) => diff --git a/app/assets/javascripts/admin/statistics_panel/store/getters.js b/app/assets/javascripts/admin/statistics_panel/store/getters.js index 1c1868b5bca..7ad1b0445ac 100644 --- a/app/assets/javascripts/admin/statistics_panel/store/getters.js +++ b/app/assets/javascripts/admin/statistics_panel/store/getters.js @@ -3,8 +3,8 @@ * and returns an array of the following form: * [{ key: "forks", label: "Forks", value: 50 }] */ -export const getStatistics = state => labels => - Object.keys(labels).map(key => { +export const getStatistics = (state) => (labels) => + Object.keys(labels).map((key) => { const result = { key, label: labels[key], diff --git a/app/assets/javascripts/admin/users/components/user_avatar.vue b/app/assets/javascripts/admin/users/components/user_avatar.vue new file mode 100644 index 00000000000..4f79c4fd451 --- /dev/null +++ b/app/assets/javascripts/admin/users/components/user_avatar.vue @@ -0,0 +1,53 @@ +<script> +import { GlAvatarLink, GlAvatarLabeled, GlBadge } from '@gitlab/ui'; +import { USER_AVATAR_SIZE } from '../constants'; + +export default { + components: { + GlAvatarLink, + GlAvatarLabeled, + GlBadge, + }, + props: { + user: { + type: Object, + required: true, + }, + adminUserPath: { + type: String, + required: true, + }, + }, + computed: { + adminUserHref() { + return this.adminUserPath.replace('id', this.user.username); + }, + }, + USER_AVATAR_SIZE, +}; +</script> + +<template> + <gl-avatar-link + v-if="user" + class="js-user-link" + :href="adminUserHref" + :data-user-id="user.id" + :data-username="user.username" + > + <gl-avatar-labeled + :size="$options.USER_AVATAR_SIZE" + :src="user.avatarUrl" + :label="user.name" + :sub-label="user.email" + > + <template #meta> + <div v-for="(badge, idx) in user.badges" :key="idx" class="gl-p-1"> + <gl-badge class="gl-display-flex!" size="sm" :variant="badge.variant">{{ + badge.text + }}</gl-badge> + </div> + </template> + </gl-avatar-labeled> + </gl-avatar-link> +</template> diff --git a/app/assets/javascripts/admin/users/components/users_table.vue b/app/assets/javascripts/admin/users/components/users_table.vue index a2d68972519..15e31935a4c 100644 --- a/app/assets/javascripts/admin/users/components/users_table.vue +++ b/app/assets/javascripts/admin/users/components/users_table.vue @@ -1,14 +1,16 @@ <script> import { GlTable } from '@gitlab/ui'; import { __ } from '~/locale'; +import UserAvatar from './user_avatar.vue'; 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}`; +const thWidthClass = (width) => `gl-w-${width}p ${DEFAULT_TH_CLASSES}`; export default { components: { GlTable, + UserAvatar, }, props: { users: { @@ -58,6 +60,10 @@ export default { :empty-text="s__('AdminUsers|No users found')" show-empty stacked="md" - /> + > + <template #cell(name)="{ item: user }"> + <UserAvatar :user="user" :admin-user-path="paths.adminUser" /> + </template> + </gl-table> </div> </template> diff --git a/app/assets/javascripts/admin/users/constants.js b/app/assets/javascripts/admin/users/constants.js new file mode 100644 index 00000000000..675fcf00c39 --- /dev/null +++ b/app/assets/javascripts/admin/users/constants.js @@ -0,0 +1 @@ +export const USER_AVATAR_SIZE = 32; diff --git a/app/assets/javascripts/admin/users/index.js b/app/assets/javascripts/admin/users/index.js index 21780ee9984..f35b57c4e1a 100644 --- a/app/assets/javascripts/admin/users/index.js +++ b/app/assets/javascripts/admin/users/index.js @@ -2,7 +2,7 @@ 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')) { +export default function (el = document.querySelector('#js-admin-users-app')) { if (!el) { return false; } @@ -11,7 +11,7 @@ export default function(el = document.querySelector('#js-admin-users-app')) { return new Vue({ el, - render: createElement => + render: (createElement) => createElement(AdminUsersApp, { props: { users: convertObjectPropsToCamelCase(JSON.parse(users), { deep: true }), |