Merge branch 'Tiny-fixes-to-render-user-inline-avatars-with-gl-avatar' into 'master'

Add CSS class for UserAvatarInline rendered with `GlAvatar`

See merge request gitlab-org/gitlab!83344

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image_new.vue

@@ -96,11 +96,12 @@ export default {
     />
 
     <gl-tooltip
+      v-if="tooltipText || $slots.default"
       :target="() => $refs.userAvatar.$el"
       :placement="tooltipPlacement"
       boundary="window"
     >
-      <slot> {{ tooltipText }}</slot>
+      <slot>{{ tooltipText }}</slot>
     </gl-tooltip>
   </span>
 </template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image_old.vue

@@ -100,11 +100,12 @@ export default {
       class="avatar"
     />
     <gl-tooltip
+      v-if="tooltipText || $slots.default"
       :target="() => $refs.userAvatarImage"
       :placement="tooltipPlacement"
       boundary="window"
     >
-      <slot> {{ tooltipText }}</slot>
+      <slot>{{ tooltipText }}</slot>
     </gl-tooltip>
   </span>
 </template>

app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue

 <script>
 import { GlButton } from '@gitlab/ui';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { sprintf, __ } from '~/locale';
 import UserAvatarLink from './user_avatar_link.vue';
 
@@ -8,6 +9,7 @@ export default {
     UserAvatarLink,
     GlButton,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     items: {
       type: Array,
@@ -57,6 +59,9 @@ export default {
 
       return sprintf(__('%{count} more'), { count });
     },
+    imgCssClasses() {
+      return this.glFeatures.glAvatarForAllUserAvatars ? 'gl-mr-3' : '';
+    },
   },
   methods: {
     expand() {
@@ -80,6 +85,7 @@ export default {
       :img-alt="item.name"
       :tooltip-text="item.name"
       :img-size="imgSize"
+      :img-css-classes="imgCssClasses"
     />
     <template v-if="hasBreakpoint">
       <gl-button v-if="hasHiddenItems" variant="link" @click="expand">

spec/frontend/vue_shared/components/user_avatar/user_avatar_image_new_spec.js

@@ -109,19 +109,33 @@ describe('User Avatar Image Component', () => {
       default: ['Action!'],
     };
 
+    describe('when `tooltipText` is provided and no default slot', () => {
       beforeEach(() => {
         wrapper = shallowMount(UserAvatarImage, {
-        propsData: PROVIDED_PROPS,
+          propsData: { ...PROVIDED_PROPS },
+        });
+      });
+
+      it('renders the tooltip with `tooltipText` as content', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
+      });
+    });
+
+    describe('when `tooltipText` and default slot is provided', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(UserAvatarImage, {
+          propsData: { ...PROVIDED_PROPS },
           slots,
         });
       });
 
-    it('renders the tooltip slot', () => {
-      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
+      it('does not render `tooltipText` inside the tooltip', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
       });
 
-    it('renders the tooltip content', () => {
+      it('renders the content provided via default slot', () => {
         expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
       });
     });
+  });
 });

spec/frontend/vue_shared/components/user_avatar/user_avatar_image_old_spec.js

@@ -90,33 +90,38 @@ describe('User Avatar Image Component', () => {
     });
   });
 
-  describe('dynamic tooltip content', () => {
-    const props = PROVIDED_PROPS;
+  describe('Dynamic tooltip content', () => {
     const slots = {
       default: ['Action!'],
     };
 
+    describe('when `tooltipText` is provided and no default slot', () => {
       beforeEach(() => {
         wrapper = shallowMount(UserAvatarImage, {
-        propsData: { props },
-        slots,
+          propsData: { ...PROVIDED_PROPS },
         });
       });
 
-    it('renders the tooltip slot', () => {
-      expect(wrapper.findComponent(GlTooltip).exists()).toBe(true);
+      it('renders the tooltip with `tooltipText` as content', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toBe(PROVIDED_PROPS.tooltipText);
+      });
     });
 
-    it('renders the tooltip content', () => {
-      expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+    describe('when `tooltipText` and default slot is provided', () => {
+      beforeEach(() => {
+        wrapper = shallowMount(UserAvatarImage, {
+          propsData: { ...PROVIDED_PROPS },
+          slots,
+        });
       });
 
-    it('does not render tooltip data attributes on avatar image', () => {
-      const avatarImg = wrapper.find('img');
+      it('does not render `tooltipText` inside the tooltip', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).not.toBe(PROVIDED_PROPS.tooltipText);
+      });
 
-      expect(avatarImg.attributes('title')).toBeFalsy();
-      expect(avatarImg.attributes('data-placement')).not.toBeDefined();
-      expect(avatarImg.attributes('data-container')).not.toBeDefined();
+      it('renders the content provided via default slot', () => {
+        expect(wrapper.findComponent(GlTooltip).text()).toContain(slots.default[0]);
+      });
     });
   });
 });

spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js

@@ -153,4 +153,29 @@ describe('UserAvatarList', () => {
       });
     });
   });
+
+  describe('additional styling for the image', () => {
+    it('should not add CSS class when feature flag  `glAvatarForAllUserAvatars` is disabled', () => {
+      factory({
+        propsData: { items: createList(1) },
+      });
+
+      const link = wrapper.findComponent(UserAvatarLink);
+      expect(link.props('imgCssClasses')).not.toBe('gl-mr-3');
+    });
+
+    it('should add CSS class when feature flag `glAvatarForAllUserAvatars` is enabled', () => {
+      factory({
+        propsData: { items: createList(1) },
+        provide: {
+          glFeatures: {
+            glAvatarForAllUserAvatars: true,
+          },
+        },
+      });
+
+      const link = wrapper.findComponent(UserAvatarLink);
+      expect(link.props('imgCssClasses')).toBe('gl-mr-3');
+    });
+  });
 });