1 files changed, 23 insertions, 57 deletions
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
index efb99eb0d94..d07f65cf5c1 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -1,30 +1,33 @@
 <script>
 /* This is a re-usable vue component for rendering a user avatar that
-  does not need to link to the user's profile. The image and an optional
-  tooltip can be configured by props passed to this component.
+      does not need to link to the user's profile. The image and an optional
+      tooltip can be configured by props passed to this component.
 
-  Sample configuration:
+      Sample configuration:
 
-  <user-avatar-image
-    :lazy="true"
-    :img-src="userAvatarSrc"
-    :img-alt="tooltipText"
-    :tooltip-text="tooltipText"
-    tooltip-placement="top"
-  />
+      <user-avatar-image
+        lazy
+        :img-src="userAvatarSrc"
+        :img-alt="tooltipText"
+        :tooltip-text="tooltipText"
+        tooltip-placement="top"
+      />
 
-*/
+    */
 
-import { GlTooltip } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { __ } from '~/locale';
-import { placeholderImage } from '../../../lazy_loader';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import UserAvatarImageNew from './user_avatar_image_new.vue';
+import UserAvatarImageOld from './user_avatar_image_old.vue';
 
 export default {
   name: 'UserAvatarImage',
   components: {
-    GlTooltip,
+    UserAvatarImageNew,
+    UserAvatarImageOld,
   },
+  mixins: [glFeatureFlagMixin()],
   props: {
     lazy: {
       type: Boolean,
@@ -62,51 +65,14 @@ export default {
       default: 'top',
     },
   },
-  computed: {
-    // API response sends null when gravatar is disabled and
-    // we provide an empty string when we use it inside user avatar link.
-    // In both cases we should render the defaultAvatarUrl
-    sanitizedSource() {
-      let baseSrc = this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
-      // Only adds the width to the URL if its not a base64 data image
-      if (!(baseSrc.indexOf('data:') === 0) && !baseSrc.includes('?'))
-        baseSrc += `?width=${this.size}`;
-      return baseSrc;
-    },
-    resultantSrcAttribute() {
-      return this.lazy ? placeholderImage : this.sanitizedSource;
-    },
-    avatarSizeClass() {
-      return `s${this.size}`;
-    },
-  },
 };
 </script>
 
 <template>
-  <span>
-    <img
-      ref="userAvatarImage"
-      :class="{
-        lazy: lazy,
-        [avatarSizeClass]: true,
-        [cssClasses]: true,
-      }"
-      :src="resultantSrcAttribute"
-      :width="size"
-      :height="size"
-      :alt="imgAlt"
-      :data-src="sanitizedSource"
-      class="avatar"
-    />
-    <gl-tooltip
-      v-if="tooltipText || $slots.default"
-      :target="() => $refs.userAvatarImage"
-      :placement="tooltipPlacement"
-      boundary="window"
-      class="js-user-avatar-image-tooltip"
-    >
-      <slot> {{ tooltipText }} </slot>
-    </gl-tooltip>
-  </span>
+  <user-avatar-image-new v-if="glFeatures.glAvatarForAllUserAvatars" v-bind="$props">
+    <slot></slot>
+  </user-avatar-image-new>
+  <user-avatar-image-old v-else v-bind="$props">
+    <slot></slot>
+  </user-avatar-image-old>
 </template>