Merge branch 'refactor-project-avatar' into 'master'

Deprecate project_avatar component

See merge request gitlab-org/gitlab!65227

app/assets/javascripts/ide/components/ide_project_header.vue

 <script>
-import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatarDefault from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 export default {
   components: {

app/assets/javascripts/vue_shared/components/project_avatar/default.vue → app/assets/javascripts/vue_shared/components/deprecated_project_avatar/default.vue

@@ -3,6 +3,7 @@ import Identicon from '../identicon.vue';
 import ProjectAvatarImage from './image.vue';
 
 export default {
+  name: 'DeprecatedProjectAvatar',
   components: {
     Identicon,
     ProjectAvatarImage,

app/assets/javascripts/vue_shared/components/project_avatar.stories.js

+import ProjectAvatar from './project_avatar.vue';
+
+export default {
+  component: ProjectAvatar,
+  title: 'vue_shared/components/project_avatar',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ProjectAvatar },
+  props: Object.keys(argTypes),
+  template: '<project-avatar v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  projectAvatarUrl:
+    'https://gitlab.com/uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64',
+  projectName: 'GitLab',
+};
+
+export const FallbackAvatar = Template.bind({});
+FallbackAvatar.args = {
+  projectName: 'GitLab',
+};
+
+export const EmptyAltTag = Template.bind({});
+EmptyAltTag.args = {
+  ...Default.args,
+  alt: '',
+};

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

+<script>
+import { GlAvatar } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAvatar,
+  },
+  props: {
+    projectName: {
+      type: String,
+      required: true,
+    },
+    projectAvatarUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 32,
+      required: false,
+    },
+    alt: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    avatarAlt() {
+      return this.alt ?? this.projectName;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-avatar
+    shape="rect"
+    :entity-name="projectName"
+    :src="projectAvatarUrl"
+    :alt="avatarAlt"
+    :size="size"
+  />
+</template>

app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue

@@ -4,7 +4,7 @@ import { GlButton, GlIcon } from '@gitlab/ui';
 import { isString } from 'lodash';
 import highlight from '~/lib/utils/highlight';
 import { truncateNamespace } from '~/lib/utils/text_utility';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 export default {
   name: 'ProjectListItem',

ee/app/assets/javascripts/approvals/components/approvers_list_item.vue

 <script>
 import { GlButton, GlTooltipDirective } from '@gitlab/ui';
-import Avatar from '~/vue_shared/components/project_avatar/default.vue';
+import Avatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { TYPE_USER, TYPE_GROUP, TYPE_HIDDEN_GROUPS } from '../constants';
 import HiddenGroupsItem from './hidden_groups_item.vue';
 

ee/app/assets/javascripts/environments_dashboard/components/dashboard/project_header.vue

 <script>
 import { GlDropdown, GlDropdownItem, GlTooltipDirective, GlLink, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 export default {
   components: {

ee/app/assets/javascripts/operations/components/dashboard/project_header.vue

 <script>
 import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 export default {
   components: {

ee/app/assets/javascripts/other_storage_counter/components/project.vue

@@ -3,7 +3,7 @@ import { GlLink, GlIcon } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { numberToHumanSize, isOdd } from '~/lib/utils/number_utils';
 import { s__ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import StorageRow from './storage_row.vue';
 
 export default {

ee/app/assets/javascripts/other_storage_counter/components/project_with_excess_storage.vue

@@ -2,7 +2,7 @@
 import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__, sprintf } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { ALERT_THRESHOLD, ERROR_THRESHOLD, WARNING_THRESHOLD } from '../constants';
 import { formatUsageSize, usageRatioToThresholdLevel } from '../utils';
 

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

@@ -19,7 +19,7 @@ import { STORAGE_KEY } from '~/frequent_items/constants';
 import { getTopFrequentItems } from '~/frequent_items/utils';
 import AccessorUtilities from '~/lib/utils/accessor';
 import { __ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { SEARCH_DEBOUNCE } from '../constants';
 
 export default {

ee/app/assets/javascripts/security_dashboard/components/instance/project_list.vue

@@ -4,7 +4,7 @@ import projectsQuery from 'ee/security_dashboard/graphql/queries/instance_projec
 import { PROJECT_LOADING_ERROR_MESSAGE } from 'ee/security_dashboard/helpers';
 import createFlash from '~/flash';
 import { s__ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 export default {
   i18n: {

ee/app/assets/javascripts/storage_counter/components/project.vue

@@ -3,7 +3,7 @@ import { GlLink, GlIcon } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { numberToHumanSize, isOdd } from '~/lib/utils/number_utils';
 import { s__ } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import StorageRow from './storage_row.vue';
 
 export default {

ee/app/assets/javascripts/storage_counter/components/project_with_excess_storage.vue

@@ -2,7 +2,7 @@
 import { GlLink, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { s__, sprintf } from '~/locale';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { ALERT_THRESHOLD, ERROR_THRESHOLD, WARNING_THRESHOLD } from '../constants';
 import { formatUsageSize, usageRatioToThresholdLevel } from '../utils';
 

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

@@ -3,7 +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 from '~/vue_shared/components/project_avatar/default.vue';
+import Avatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 const TEST_USER = {
   id: 1,

ee/spec/frontend/environments_dashboard/components/project_header_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import component from 'ee/environments_dashboard/components/dashboard/project_header.vue';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 describe('Project Header', () => {
   let wrapper;

ee/spec/frontend/operations/components/dashboard/project_header_spec.js

 import { shallowMount } from '@vue/test-utils';
 import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
 import { trimText } from 'helpers/text_helper';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { mockOneProject } from '../../mock_data';
 
 describe('project header component', () => {

ee/spec/frontend/other_storage_counter/components/project_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import Project from 'ee/other_storage_counter/components/project.vue';
 import StorageRow from 'ee/other_storage_counter/components/storage_row.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { projects } from '../mock_data';
 
 let wrapper;

ee/spec/frontend/other_storage_counter/components/project_with_excess_storage_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import ProjectWithExcessStorage from 'ee/other_storage_counter/components/project_with_excess_storage.vue';
 import { formatUsageSize } from 'ee/other_storage_counter/utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { projects } from '../mock_data';
 
 let wrapper;

ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js

@@ -13,7 +13,7 @@ import Vuex from 'vuex';
 
 import CreateIssueForm from 'ee/related_items_tree/components/create_issue_form.vue';
 import createDefaultStore from 'ee/related_items_tree/store';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 import {
   mockInitialConfig,

ee/spec/frontend/security_dashboard/components/instance/project_list_spec.js

@@ -5,7 +5,7 @@ import ProjectList from 'ee/security_dashboard/components/instance/project_list.
 import projectsQuery from 'ee/security_dashboard/graphql/queries/instance_projects.query.graphql';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 const localVue = createLocalVue();
 localVue.use(VueApollo);

ee/spec/frontend/storage_counter/components/project_spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import Project from 'ee/storage_counter/components/project.vue';
 import StorageRow from 'ee/storage_counter/components/storage_row.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { projects } from '../mock_data';
 
 let wrapper;

ee/spec/frontend/storage_counter/components/project_with_excess_storage_spec.js

@@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils';
 import ProjectWithExcessStorage from 'ee/storage_counter/components/project_with_excess_storage.vue';
 import { formatUsageSize } from 'ee/storage_counter/utils';
 import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
-import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import { projects } from '../mock_data';
 
 let wrapper;

spec/frontend/vue_shared/components/project_avatar/default_spec.js

@@ -3,7 +3,7 @@ import mountComponent from 'helpers/vue_mount_component_helper';
 import { projectData } from 'jest/ide/mock_data';
 import { TEST_HOST } from 'spec/test_constants';
 import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
-import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue';
+import ProjectAvatarDefault from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 
 describe('ProjectAvatarDefault component', () => {
   const Component = Vue.extend(ProjectAvatarDefault);

spec/frontend/vue_shared/components/project_avatar_spec.js

+import { GlAvatar } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
+
+const defaultProps = {
+  projectName: 'GitLab',
+};
+
+describe('ProjectAvatar', () => {
+  let wrapper;
+
+  const findGlAvatar = () => wrapper.findComponent(GlAvatar);
+
+  const createComponent = ({ props, attrs } = {}) => {
+    wrapper = shallowMount(ProjectAvatar, { propsData: { ...defaultProps, ...props }, attrs });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders GlAvatar with correct props', () => {
+    createComponent();
+
+    const avatar = findGlAvatar();
+    expect(avatar.exists()).toBe(true);
+    expect(avatar.props()).toMatchObject({
+      alt: defaultProps.projectName,
+      entityName: defaultProps.projectName,
+      size: 32,
+      src: '',
+    });
+  });
+
+  describe('with `size` prop', () => {
+    it('renders GlAvatar with specified `size` prop', () => {
+      const mockSize = 48;
+      createComponent({ props: { size: mockSize } });
+
+      const avatar = findGlAvatar();
+      expect(avatar.props('size')).toBe(mockSize);
+    });
+  });
+
+  describe('with `projectAvatarUrl` prop', () => {
+    it('renders GlAvatar with specified `src` prop', () => {
+      const mockProjectAvatarUrl = 'https://gitlab.com';
+      createComponent({ props: { projectAvatarUrl: mockProjectAvatarUrl } });
+
+      const avatar = findGlAvatar();
+      expect(avatar.props('src')).toBe(mockProjectAvatarUrl);
+    });
+  });
+
+  describe.each`
+    alt
+    ${''}
+    ${'custom-alt'}
+  `('when `alt` prop is "$alt"', ({ alt }) => {
+    it('renders GlAvatar with specified `alt` attribute', () => {
+      createComponent({ props: { alt } });
+
+      const avatar = findGlAvatar();
+      expect(avatar.props('alt')).toBe(alt);
+    });
+  });
+});

spec/frontend/vue_shared/components/project_selector/project_list_item_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { trimText } from 'helpers/text_helper';
+import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
 import ProjectListItem from '~/vue_shared/components/project_selector/project_list_item.vue';
 
 const localVue = createLocalVue();
@@ -53,7 +54,7 @@ describe('ProjectListItem component', () => {
   it(`renders the project avatar`, () => {
     wrapper = shallowMount(Component, options);
 
-    expect(wrapper.find('.js-project-avatar').exists()).toBe(true);
+    expect(wrapper.findComponent(ProjectAvatar).exists()).toBe(true);
   });
 
   it(`renders a simple namespace name with a trailing slash`, () => {