Commit 171b9c08 authored by Mikhail's avatar Mikhail Committed by Peter Hegman

Replace `GlAvatar` shape prop with a constant

parent ef4b7929
......@@ -11,6 +11,7 @@ import {
import { debounce } from 'lodash';
import { filterBySearchTerm } from '~/analytics/shared/utils';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
import { n__, s__, __ } from '~/locale';
import getProjects from '../graphql/projects.query.graphql';
......@@ -204,6 +205,7 @@ export default {
return getIdFromGraphQLId(project.id);
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
<template>
......@@ -227,7 +229,7 @@ export default {
:entity-id="getEntityId(selectedProjects[0])"
:entity-name="selectedProjects[0].name"
:size="16"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="selectedProjects[0].name"
class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
/>
......@@ -255,7 +257,7 @@ export default {
:entity-id="getEntityId(project)"
:entity-name="project.name"
:src="project.avatarUrl"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
/>
<div>
<div data-testid="project-name">{{ project.name }}</div>
......@@ -279,7 +281,7 @@ export default {
:entity-id="getEntityId(project)"
:entity-name="project.name"
:src="project.avatarUrl"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
/>
<div>
<div data-testid="project-name">{{ project.name }}</div>
......
......@@ -9,6 +9,7 @@ import {
} from '@gitlab/ui';
import { visitUrl } from '~/lib/utils/url_utility';
import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.vue';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE } from '../constants';
import eventHub from '../event_hub';
......@@ -112,6 +113,7 @@ export default {
},
},
safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -145,7 +147,7 @@ export default {
:aria-label="group.name"
>
<gl-avatar
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="group.name"
:src="group.avatarUrl"
:alt="group.name"
......
......@@ -11,6 +11,7 @@ import {
import { mapState, mapGetters } from 'vuex';
import { s__ } from '~/locale';
import highlight from '~/lib/utils/highlight';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { GROUPS_CATEGORY, PROJECTS_CATEGORY, LARGE_AVATAR_PX, SMALL_AVATAR_PX } from '../constants';
export default {
......@@ -66,6 +67,7 @@ export default {
return this.currentFocusedOption?.html_id === data.html_id;
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -93,7 +95,7 @@ export default {
:entity-id="data.id"
:entity-name="data.label"
:size="avatarSize(data)"
shape="square"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
/>
<span v-safe-html="highlightedName(data.label)"></span>
</div>
......
......@@ -7,6 +7,7 @@ import {
GlAvatarLabeled,
} from '@gitlab/ui';
import { __ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { PROJECTS_PER_PAGE } from '../constants';
import getProjectsQuery from '../graphql/queries/get_projects.query.graphql';
......@@ -80,6 +81,7 @@ export default {
i18n: {
selectProjectText: __('Select a project'),
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -107,7 +109,7 @@ export default {
>
<gl-avatar-labeled
class="gl-text-truncate"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32"
:src="project.avatarUrl"
:label="project.name"
......
<script>
import { GlAvatar, GlIcon } from '@gitlab/ui';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default {
components: {
......@@ -12,6 +13,7 @@ export default {
required: true,
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -19,7 +21,12 @@ export default {
<div class="gl-display-flex gl-align-items-center">
<gl-icon name="folder-o" class="gl-mr-3" />
<div class="gl-display-none gl-flex-shrink-0 gl-sm-display-flex gl-mr-3">
<gl-avatar :size="32" shape="rect" :entity-name="group.name" :src="group.avatar_url" />
<gl-avatar
:size="32"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="group.name"
:src="group.avatar_url"
/>
</div>
<div>
......
......@@ -2,6 +2,7 @@
import { GlAvatar, GlButton, GlCard, GlSprintf, GlIcon, GlLink } from '@gitlab/ui';
import { mergeUrlParams } from '~/lib/utils/url_utility';
import { sprintf } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import {
STARTER_TEMPLATE_NAME,
RUNNERS_AVAILABILITY_SECTION_EXPERIMENT_NAME,
......@@ -33,6 +34,7 @@ export default {
RUNNERS_DOCUMENTATION_LINK_CLICKED_EVENT,
RUNNERS_SETTINGS_BUTTON_CLICKED_EVENT,
I18N,
AVATAR_SHAPE_OPTION_RECT,
inject: ['pipelineEditorPath', 'suggestedCiTemplates'],
props: {
ciRunnerSettingsPath: {
......@@ -187,7 +189,7 @@ export default {
:src="template.logo"
:size="48"
class="gl-mr-5 gl-bg-white dark-mode-override"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="template.name"
data-testid="template-logo"
/>
......
......@@ -83,13 +83,7 @@ export default {
@input="searchAuthors"
>
<template #view="{ inputValue }">
<gl-avatar
v-if="activeUser"
:size="16"
:src="activeUser.avatar_url"
shape="circle"
class="gl-mr-2"
/>
<gl-avatar v-if="activeUser" :size="16" :src="activeUser.avatar_url" class="gl-mr-2" />
<span>{{ activeUser ? activeUser.name : inputValue }}</span>
</template>
<template #suggestions>
......
<script>
import { GlTokenSelector, GlAvatarLabeled } from '@gitlab/ui';
import { s__ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import searchProjectTopics from '../queries/project_topics_search.query.graphql';
export default {
......@@ -65,6 +66,7 @@ export default {
this.$emit('update', tokens);
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
<template>
......@@ -85,7 +87,7 @@ export default {
:entity-name="dropdownItem.name"
:label="dropdownItem.name"
:size="32"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
/>
</template>
</gl-token-selector>
......
<script>
import { GlAvatar, GlLink } from '@gitlab/ui';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default {
components: {
......@@ -25,13 +26,20 @@ export default {
default: null,
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
<template>
<div class="gl-display-flex gl-align-items-center gl-py-5">
<gl-link :href="href" data-testid="item-avatar" class="gl-text-decoration-none! gl-mr-3">
<gl-avatar shape="rect" :entity-name="name" :alt="name" :src="avatarUrl" :size="48" />
<gl-avatar
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="name"
:alt="name"
:src="avatarUrl"
:size="48"
/>
</gl-link>
<gl-link :href="href" class="gl-font-weight-bold gl-text-gray-900!">{{ fullName }}</gl-link>
......
......@@ -2,6 +2,7 @@
import { GlDropdownItem, GlAvatar, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
import highlight from '~/lib/utils/highlight';
import { truncateNamespace } from '~/lib/utils/text_utility';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default {
name: 'SearchableDropdownItem',
......@@ -46,6 +47,7 @@ export default {
return highlight(this.item[this.name], this.searchText);
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -61,7 +63,7 @@ export default {
:src="item.avatar_url"
:entity-id="item.id"
:entity-name="item[name]"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32"
/>
<div class="gl-display-flex gl-flex-direction-column">
......
......@@ -95,7 +95,6 @@ export default {
v-if="activeTokenValue"
:size="16"
:src="getAvatarUrl(activeTokenValue)"
shape="circle"
class="gl-mr-2"
/>
{{ activeTokenValue ? activeTokenValue.name : inputValue }}
......
<script>
import { GlAvatar } from '@gitlab/ui';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default {
components: {
......@@ -31,12 +32,13 @@ export default {
return this.alt ?? this.projectName;
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
<template>
<gl-avatar
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:entity-name="projectName"
:src="projectAvatarUrl"
:alt="avatarAlt"
......
<script>
import { GlAvatar, GlSprintf, GlLink, GlSkeletonLoader } from '@gitlab/ui';
import { isEqual } from 'lodash';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
export default {
name: 'TitleArea',
......@@ -53,6 +54,7 @@ export default {
}
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -64,7 +66,7 @@ export default {
<gl-avatar
v-if="avatar"
:src="avatar"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
class="gl-align-self-center gl-mr-4"
/>
......
......@@ -13,6 +13,7 @@ import { debounce } from 'lodash';
import { filterBySearchTerm } from '~/analytics/shared/utils';
import Api from '~/api';
import { s__, __ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { DATA_REFETCH_DELAY } from '../constants';
export default {
......@@ -112,6 +113,7 @@ export default {
.join(' / ');
},
},
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -125,7 +127,7 @@ export default {
:entity-id="selectedGroup.id"
:entity-name="selectedGroup.name"
:size="16"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:alt="selectedGroup.name"
class="gl-display-inline-flex gl-vertical-align-middle gl-mr-2"
/>
......@@ -150,7 +152,7 @@ export default {
:entity-id="group.id"
:entity-name="group.name"
:src="group.avatar_url"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
/>
<div
v-safe-html="formatGroupPath(group.full_name)"
......
......@@ -161,7 +161,6 @@ export default {
:entity-name="activeItemName"
:entity-id="activeItem.id"
:alt="getAvatarString(activeItem.name)"
shape="circle"
class="gl-mr-2"
data-testid="audit-filter-item-avatar"
/>
......@@ -186,7 +185,6 @@ export default {
:entity-id="item.id"
:entity-name="item.name"
:alt="getAvatarString(item.name)"
shape="circle"
/>
<div>
<slot name="suggestion" :item="item"></slot>
......
......@@ -12,6 +12,7 @@ import fuzzaldrinPlus from 'fuzzaldrin-plus';
import { mapState, mapActions } from 'vuex';
import { __ } from '~/locale';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
import { SEARCH_DEBOUNCE } from '../constants';
export default {
......@@ -107,6 +108,7 @@ export default {
},
},
debounce: SEARCH_DEBOUNCE,
AVATAR_SHAPE_OPTION_RECT,
};
</script>
......@@ -153,7 +155,7 @@ export default {
<gl-dropdown-item v-if="canShowParentGroup" class="w-100" @click="selectedGroup = null">
<gl-avatar
:entity-name="parentItem.groupName"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32"
class="d-inline-flex"
/>
......@@ -172,7 +174,7 @@ export default {
<gl-avatar
:src="group.avatar_url"
:entity-name="group.name"
shape="rect"
:shape="$options.AVATAR_SHAPE_OPTION_RECT"
:size="32"
class="d-inline-flex"
/>
......
......@@ -3,6 +3,7 @@ import { shallowMount } from '@vue/test-utils';
import ApproversListItem from 'ee/approvals/components/approvers_list_item.vue';
import HiddenGroupsItem from 'ee/approvals/components/hidden_groups_item.vue';
import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from 'ee/approvals/constants';
import { AVATAR_SHAPE_OPTION_CIRCLE, AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
const TEST_USER = {
id: 1,
......@@ -45,7 +46,7 @@ describe('Approvals ApproversListItem', () => {
expect(avatar.attributes()).toMatchObject({
'entity-name': TEST_USER.name,
src: TEST_USER.avatar_url,
shape: 'circle',
shape: AVATAR_SHAPE_OPTION_CIRCLE,
alt: TEST_USER.name,
});
expect(avatar.props('label')).toBe(TEST_USER.name);
......@@ -74,7 +75,7 @@ describe('Approvals ApproversListItem', () => {
expect(avatar.attributes()).toMatchObject({
'entity-name': TEST_GROUP.name,
src: TEST_GROUP.avatar_url,
shape: 'rect',
shape: AVATAR_SHAPE_OPTION_RECT,
alt: TEST_GROUP.name,
});
expect(avatar.props('label')).toBe(TEST_GROUP.full_path);
......
import { GlAvatar } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import RunnerAssignedItem from '~/runner/components/runner_assigned_item.vue';
import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
const mockHref = '/group/project';
const mockName = 'Project';
......@@ -40,7 +41,7 @@ describe('RunnerAssignedItem', () => {
alt: mockName,
entityName: mockName,
src: mockAvatarUrl,
shape: 'rect',
shape: AVATAR_SHAPE_OPTION_RECT,
size: 48,
});
});
......
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