Merge branch '344529-replace-avatar-shape' into 'master'

Replace GlAvatar shape prop 'rect' and 'circle' with constants.

See merge request gitlab-org/gitlab!84510

app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

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

app/assets/javascripts/groups/components/group_item.vue

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

app/assets/javascripts/header_search/components/header_search_autocomplete_items.vue

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

app/assets/javascripts/jira_connect/branches/components/project_dropdown.vue

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

app/assets/javascripts/jira_connect/subscriptions/components/group_item_name.vue

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

app/assets/javascripts/pipelines/components/pipelines_list/pipelines_ci_templates.vue

@@ -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"
               />

app/assets/javascripts/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue

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

app/assets/javascripts/projects/settings/topics/components/topics_token_selector.vue

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

app/assets/javascripts/runner/components/runner_assigned_item.vue

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

app/assets/javascripts/search/topbar/components/searchable_dropdown_item.vue

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

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/author_token.vue

@@ -95,7 +95,6 @@ export default {
         v-if="activeTokenValue"
         :size="16"
         :src="getAvatarUrl(activeTokenValue)"
-        shape="circle"
         class="gl-mr-2"
       />
       {{ activeTokenValue ? activeTokenValue.name : inputValue }}

app/assets/javascripts/vue_shared/components/project_avatar.vue

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

app/assets/javascripts/vue_shared/components/registry/title_area.vue

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

ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue

@@ -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)"

ee/app/assets/javascripts/audit_events/components/tokens/shared/audit_filter_token.vue

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

ee/app/assets/javascripts/related_items_tree/components/create_epic_form.vue

@@ -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"
               />

ee/spec/frontend/approvals/components/approvers_list_item_spec.js

@@ -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);

spec/frontend/runner/components/runner_assigned_item_spec.js

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