Merge branch '335523-update-project-avatar-security-dashboard' into 'master'

Use GlAvatar in security dashboard

See merge request gitlab-org/gitlab!82172

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/deprecated_project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
 export default {
   i18n: {
@@ -76,7 +76,11 @@ export default {
         :key="project.id"
         class="gl-display-flex gl-align-items-center gl-py-2 js-projects-list-project-item"
       >
-        <project-avatar class="gl-flex-shrink-0" :project="project" :size="32" />
+        <project-avatar
+          class="gl-mr-3"
+          :project-name="project.name"
+          :project-avatar-url="project.avatarUrl"
+        />
         {{ project.nameWithNamespace }}
         <gl-button
           v-gl-tooltip

ee/app/assets/javascripts/security_dashboard/graphql/queries/instance_projects.query.graphql

@@ -5,6 +5,7 @@ query instanceProjects($search: String, $pageSize: Int) {
         id
         name
         nameWithNamespace
+        avatarUrl
       }
     }
   }

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

@@ -7,7 +7,7 @@ import projectsQuery from 'ee/security_dashboard/graphql/queries/instance_projec
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import ProjectAvatar from '~/vue_shared/components/deprecated_project_avatar/default.vue';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
 Vue.use(VueApollo);
 
@@ -19,6 +19,7 @@ const generateMockProjects = (count) => {
       id: i,
       name: `project${i}`,
       nameWithNamespace: `group/project${i}`,
+      avatarUrl: '/avatar',
     });
   }
 
@@ -97,7 +98,14 @@ describe('Project List component', () => {
     });
 
     it('renders a project item with an avatar', () => {
-      expect(getFirstProjectItem().findComponent(ProjectAvatar).exists()).toBe(true);
+      const projectAvatar = getFirstProjectItem().findComponent(ProjectAvatar);
+      const project = projects[0];
+
+      expect(projectAvatar.exists()).toBe(true);
+      expect(projectAvatar.props()).toMatchObject({
+        projectName: project.name,
+        projectAvatarUrl: project.avatarUrl,
+      });
     });
 
     it('renders a project item with a project name', () => {