Merge branch 'smaller-image-files-fe-prep' into 'master'

[FE] Support multiple design image sizes in Design Management

See merge request gitlab-org/gitlab!24828

ee/app/assets/javascripts/design_management/components/list/item.vue

@@ -43,6 +43,11 @@ export default {
       required: false,
       default: true,
     },
+    imageV432x230: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   data() {
     return {
@@ -80,7 +85,7 @@ export default {
       return this.imageLoading || this.isUploading;
     },
     imageLink() {
-      return this.isInView ? this.image : '';
+      return this.isInView ? this.imageV432x230 || this.image : '';
     },
   },
   methods: {

ee/app/assets/javascripts/design_management/graphql/fragments/designList.fragment.graphql

@@ -4,4 +4,5 @@ fragment DesignListItem on Design {
   event
   filename
   notesCount
+  imageV432x230
 }

ee/app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -53,6 +53,7 @@ export const designUploadOptimisticResponse = files => {
     __typename: 'Design',
     id: -uniqueId(),
     image: '',
+    imageV432x230: '',
     filename: file.name,
     fullPath: '',
     notesCount: 0,

ee/changelogs/unreleased/use-smaller-image-for-design-cards.yml

+---
+title: "Prefer smaller image size for design cards in Design Management"
+merge_request: 24828
+author:
+type: added

ee/spec/frontend/design_management/components/list/item_spec.js

@@ -17,6 +17,7 @@ const DESIGN_VERSION_EVENT = {
 
 describe('Design management list item component', () => {
   let wrapper;
+
   function createComponent({
     notesCount = 0,
     event = DESIGN_VERSION_EVENT.NO_CHANGE,
@@ -48,17 +49,39 @@ describe('Design management list item component', () => {
     wrapper.destroy();
   });
 
-  it('renders an image when it appears in view', () => {
+  describe('when item is not in view', () => {
+    it('image is not rendered', () => {
       createComponent();
-    const image = wrapper.find('img');
 
+      const image = wrapper.find('img');
       expect(image.attributes('src')).toBe('');
+    });
+  });
+
+  describe('when item appears in view', () => {
+    beforeEach(() => {
+      createComponent();
 
       wrapper.find(GlIntersectionObserver).vm.$emit('appear');
+      return wrapper.vm.$nextTick();
+    });
 
-    return wrapper.vm.$nextTick().then(() => {
+    it('renders an image', () => {
+      const image = wrapper.find('img');
       expect(image.attributes('src')).toBe('http://via.placeholder.com/300');
     });
+
+    describe('when imageV432x230 and image provided', () => {
+      it('renders imageV432x230 image', () => {
+        const mockSrc = 'mock-imageV432x230-url';
+        wrapper.setProps({ imageV432x230: mockSrc });
+
+        return wrapper.vm.$nextTick().then(() => {
+          const image = wrapper.find('img');
+          expect(image.attributes('src')).toBe(mockSrc);
+        });
+      });
+    });
   });
 
   describe('with notes', () => {

ee/spec/frontend/design_management/pages/index_spec.js

@@ -197,6 +197,7 @@ describe('Design management index page', () => {
                 __typename: 'Design',
                 id: expect.anything(),
                 image: '',
+                imageV432x230: '',
                 filename: 'test',
                 fullPath: '',
                 event: 'NONE',

ee/spec/frontend/design_management/utils/design_management_utils_spec.js

@@ -85,6 +85,7 @@ describe('optimistic responses', () => {
             __typename: 'Design',
             id: -1,
             image: '',
+            imageV432x230: '',
             filename: 'test',
             fullPath: '',
             notesCount: 0,