@gitlab/ui 62.0.0 → 62.1.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [62.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v62.0.0...v62.1.0) (2023-04-20)
+
+
+### Features
+
+* **GlAvatar:** Add image load error fallback support ([9960d86](https://gitlab.com/gitlab-org/gitlab-ui/commit/9960d86ccda15d7afe08528cba1892fbfd7cca25))
+
 # [62.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v61.3.0...v62.0.0) (2023-04-19)
 
 

package/dist/components/base/avatar/avatar.js

@@ -23,6 +23,14 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * Show fallback identicon when image fails to load
+     */
+    fallbackOnError: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     alt: {
       type: String,
       required: false,
@@ -51,6 +59,11 @@ var script = {
       default: avatarShapeOptions.circle
     }
   },
+  data() {
+    return {
+      imageLoadError: false
+    };
+  },
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
@@ -78,6 +91,28 @@ var script = {
     },
     identiconText() {
       return getAvatarChar(this.entityName);
+    },
+    showImage() {
+      // Don't show when image is not present
+      if (!this.src) {
+        return false;
+      }
+      // Don't show when fallbackOnError is true and there was failure to load image
+      if (this.src && this.fallbackOnError && this.imageLoadError) {
+        return false;
+      }
+      return true;
+    }
+  },
+  watch: {
+    src(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) this.imageLoadError = false;
+    }
+  },
+  methods: {
+    handleLoadError(event) {
+      this.imageLoadError = true;
+      this.$emit('load-error', event);
     }
   }
 };
@@ -86,7 +121,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.src)?_c('img',{class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClasses],attrs:{"src":_vm.src,"alt":_vm.alt}}):_c('div',{class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showImage)?_c('img',{class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClasses],attrs:{"src":_vm.src,"alt":_vm.alt},on:{"error":_vm.handleLoadError}}):_c('div',{class:[
     'gl-avatar gl-avatar-identicon',
     { 'gl-avatar-circle': _vm.isCircle },
     _vm.sizeClasses,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.0.0",
+  "version": "62.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -119,7 +119,7 @@
     "bootstrap": "4.6.2",
     "cypress": "^11.2.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.37.0",
+    "eslint": "8.38.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-storybook": "0.6.11",

package/src/components/base/avatar/avatar.spec.js

@@ -56,4 +56,36 @@ describe('GlAvatar', () => {
       });
     });
   });
+
+  describe('fallbackOnError property', () => {
+    const findImage = () => wrapper.find('img');
+
+    beforeEach(() => {
+      createWrapper({ fallbackOnError: true, src: 'someproject.jpg' });
+    });
+
+    it('shows fallback identicon when image fails to load', async () => {
+      await findImage().trigger('error');
+
+      expect(findImage().exists()).toBe(false);
+      expect(wrapper.find('.gl-avatar-identicon').exists()).toBe(true);
+    });
+
+    it('emits load-error event when image fails to load', async () => {
+      await findImage().trigger('error');
+
+      expect(wrapper.emitted('load-error')).toHaveLength(1);
+    });
+
+    it('allows changing the source when initially provided image fails to load', async () => {
+      await findImage().trigger('error');
+
+      expect(findImage().exists()).toBe(false);
+
+      await wrapper.setProps({ src: 'foo.jpg' });
+
+      expect(findImage().exists()).toBe(true);
+      expect(wrapper.find('.gl-avatar-identicon').exists()).toBe(false);
+    });
+  });
 });

package/src/components/base/avatar/avatar.stories.js

@@ -104,6 +104,22 @@ export const WithTooltip = (args, { argTypes }) => ({
 });
 WithTooltip.args = { ...generateImageProps(), ...generateTooltipProps() };
 
+export const FallbackOnAvatarLoadFailure = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar
+        :entity-name="entityName"
+        :entity-id="entityId"
+        :size="size"
+        :fallback-on-error="true"
+        src="someproject.jpg"
+        alt="Some Project"
+      />
+    `,
+});
+FallbackOnAvatarLoadFailure.args = { ...generateProjectFallbackProps(), ...generateImageProps() };
+
 export default {
   title: 'base/avatar',
   component: GlAvatar,

package/src/components/base/avatar/avatar.vue

@@ -24,6 +24,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * Show fallback identicon when image fails to load
+     */
+    fallbackOnError: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     alt: {
       type: String,
       required: false,
@@ -56,6 +64,11 @@ export default {
       default: avatarShapeOptions.circle,
     },
   },
+  data() {
+    return {
+      imageLoadError: false,
+    };
+  },
   computed: {
     sizeClasses() {
       if (isNumber(this.size)) {
@@ -85,15 +98,38 @@ export default {
     identiconText() {
       return getAvatarChar(this.entityName);
     },
+    showImage() {
+      // Don't show when image is not present
+      if (!this.src) {
+        return false;
+      }
+      // Don't show when fallbackOnError is true and there was failure to load image
+      if (this.src && this.fallbackOnError && this.imageLoadError) {
+        return false;
+      }
+      return true;
+    },
+  },
+  watch: {
+    src(newSrc, oldSrc) {
+      if (newSrc !== oldSrc) this.imageLoadError = false;
+    },
+  },
+  methods: {
+    handleLoadError(event) {
+      this.imageLoadError = true;
+      this.$emit('load-error', event);
+    },
   },
 };
 </script>
 <template>
   <img
-    v-if="src"
+    v-if="showImage"
     :src="src"
     :alt="alt"
     :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
+    @error="handleLoadError"
   />
   <div
     v-else