Use GlAvatar in environments dashboard

Changelog: changed

app/assets/javascripts/environments/components/environment_item.vue

 <script>
-import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf, GlBadge } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlTooltipDirective,
+  GlIcon,
+  GlLink,
+  GlSprintf,
+  GlBadge,
+  GlAvatar,
+  GlAvatarLink,
+} from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { __, s__, sprintf } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import CommitComponent from '~/vue_shared/components/commit.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import eventHub from '../event_hub';
 import ActionsComponent from './environment_actions.vue';
@@ -41,7 +49,8 @@ export default {
     StopComponent,
     TerminalButtonComponent,
     TooltipOnTruncate,
-    UserAvatarLink,
+    GlAvatar,
+    GlAvatarLink,
     CiIcon,
   },
   directives: {
@@ -649,22 +658,27 @@ export default {
       class="table-section deployment-column d-none d-md-block"
       :class="tableData.deploy.spacing"
       role="gridcell"
-      data-testid="enviornment-deployment-id-cell"
+      data-testid="environment-deployment-id-cell"
     >
       <span v-if="shouldRenderDeploymentID" class="text-break-word">
         {{ deploymentInternalId }}
       </span>
 
-      <span v-if="!isFolder && deploymentHasUser" class="text-break-word">
+      <span
+        v-if="!isFolder && deploymentHasUser"
+        class="text-break-word gl-display-inline-flex gl-align-items-center"
+      >
         <gl-sprintf :message="s__('Environments|by %{avatar}')">
           <template #avatar>
-            <user-avatar-link
-              :link-href="deploymentUser.web_url"
-              :img-src="deploymentUser.avatar_url"
-              :img-alt="userImageAltDescription"
-              :tooltip-text="deploymentUser.username"
-              class="js-deploy-user-container float-none"
-            />
+            <gl-avatar-link :href="deploymentUser.web_url" class="gl-ml-2">
+              <gl-avatar
+                :src="deploymentUser.avatar_url"
+                :entity-name="deploymentUser.username"
+                :title="deploymentUser.username"
+                :alt="userImageAltDescription"
+                :size="24"
+              />
+            </gl-avatar-link>
           </template>
         </gl-sprintf>
       </span>
@@ -753,20 +767,24 @@ export default {
             <ci-icon class="gl-mr-2" :status="upcomingDeployment.deployable.status" />
           </gl-link>
         </div>
-        <div class="gl-display-flex">
-          <span v-if="upcomingDeployment.user" class="text-break-word">
-            <gl-sprintf :message="s__('Environments|by %{avatar}')">
-              <template #avatar>
-                <user-avatar-link
-                  :link-href="upcomingDeployment.user.web_url"
-                  :img-src="upcomingDeployment.user.avatar_url"
-                  :img-alt="upcomingDeploymentUserImageAltDescription"
-                  :tooltip-text="upcomingDeployment.user.username"
+        <span
+          v-if="upcomingDeployment.user"
+          class="text-break-word gl-display-inline-flex gl-align-items-center gl-mt-2"
+        >
+          <gl-sprintf :message="s__('Environments|by %{avatar}')">
+            <template #avatar>
+              <gl-avatar-link :href="upcomingDeployment.user.web_url" class="gl-ml-2">
+                <gl-avatar
+                  :src="upcomingDeployment.user.avatar_url"
+                  :alt="upcomingDeploymentUserImageAltDescription"
+                  :entity-name="upcomingDeployment.user.username"
+                  :title="upcomingDeployment.user.username"
+                  :size="24"
                 />
-              </template>
-            </gl-sprintf>
-          </span>
-        </div>
+              </gl-avatar-link>
+            </template>
+          </gl-sprintf>
+        </span>
       </div>
     </div>
 

spec/frontend/environments/environment_item_spec.js

 import { mount } from '@vue/test-utils';
+import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { cloneDeep } from 'lodash';
 import { format } from 'timeago.js';
 import { mockTracking, unmockTracking, triggerEvent } from 'helpers/tracking_helper';
@@ -44,10 +45,16 @@ describe('Environment item', () => {
 
   const findAutoStop = () => wrapper.find('.js-auto-stop');
   const findUpcomingDeployment = () => wrapper.find('[data-testid="upcoming-deployment"]');
+  const findLastDeployment = () => wrapper.find('[data-testid="environment-deployment-id-cell"]');
   const findUpcomingDeploymentContent = () =>
     wrapper.find('[data-testid="upcoming-deployment-content"]');
   const findUpcomingDeploymentStatusLink = () =>
     wrapper.find('[data-testid="upcoming-deployment-status-link"]');
+  const findLastDeploymentAvatarLink = () => findLastDeployment().findComponent(GlAvatarLink);
+  const findLastDeploymentAvatar = () => findLastDeployment().findComponent(GlAvatar);
+  const findUpcomingDeploymentAvatarLink = () =>
+    findUpcomingDeployment().findComponent(GlAvatarLink);
+  const findUpcomingDeploymentAvatar = () => findUpcomingDeployment().findComponent(GlAvatar);
 
   afterEach(() => {
     wrapper.destroy();
@@ -79,9 +86,19 @@ describe('Environment item', () => {
 
       describe('With user information', () => {
         it('should render user avatar with link to profile', () => {
-          expect(wrapper.find('.js-deploy-user-container').props('linkHref')).toEqual(
-            environment.last_deployment.user.web_url,
-          );
+          const avatarLink = findLastDeploymentAvatarLink();
+          const avatar = findLastDeploymentAvatar();
+          const { username, avatar_url, web_url } = environment.last_deployment.user;
+
+          expect(avatarLink.attributes('href')).toBe(web_url);
+          expect(avatar.props()).toMatchObject({
+            src: avatar_url,
+            entityName: username,
+          });
+          expect(avatar.attributes()).toMatchObject({
+            title: username,
+            alt: `${username}'s avatar`,
+          });
         });
       });
 
@@ -108,9 +125,16 @@ describe('Environment item', () => {
       describe('When the envionment has an upcoming deployment', () => {
         describe('When the upcoming deployment has a deployable', () => {
           it('should render the build ID and user', () => {
-            expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText(
-              '#27 by upcoming-username',
-            );
+            const avatarLink = findUpcomingDeploymentAvatarLink();
+            const avatar = findUpcomingDeploymentAvatar();
+            const { username, avatar_url, web_url } = environment.upcoming_deployment.user;
+
+            expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText('#27 by');
+            expect(avatarLink.attributes('href')).toBe(web_url);
+            expect(avatar.props()).toMatchObject({
+              src: avatar_url,
+              entityName: username,
+            });
           });
 
           it('should render a status icon with a link and tooltip', () => {
@@ -139,10 +163,17 @@ describe('Environment item', () => {
             });
           });
 
-          it('should still renders the build ID and user', () => {
-            expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText(
-              '#27 by upcoming-username',
-            );
+          it('should still render the build ID and user avatar', () => {
+            const avatarLink = findUpcomingDeploymentAvatarLink();
+            const avatar = findUpcomingDeploymentAvatar();
+            const { username, avatar_url, web_url } = environment.upcoming_deployment.user;
+
+            expect(findUpcomingDeploymentContent().text()).toMatchInterpolatedText('#27 by');
+            expect(avatarLink.attributes('href')).toBe(web_url);
+            expect(avatar.props()).toMatchObject({
+              src: avatar_url,
+              entityName: username,
+            });
           });
 
           it('should not render the status icon', () => {
@@ -383,7 +414,7 @@ describe('Environment item', () => {
     });
 
     it('should hide non-folder properties', () => {
-      expect(wrapper.find('[data-testid="environment-deployment-id-cell"]').exists()).toBe(false);
+      expect(findLastDeployment().exists()).toBe(false);
       expect(wrapper.find('[data-testid="environment-build-cell"]').exists()).toBe(false);
     });
   });