Use smaller design image for design list item

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/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,