feat: add download button to image fallback in message list

GetStream · Nov 27, 2023 · 5d883cf · 5d883cf
1 parent 9efba12
commit 5d883cf
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 5 deletions.
diff --git a/docusaurus/docs/React/assets/base-image-fallback-in-attachment-gallery.png b/docusaurus/docs/React/assets/base-image-fallback-in-attachment-gallery.png
diff --git a/...sets/base-image-in-attachment-preview.png → ...-image-fallback-in-attachment-preview.png b/...sets/base-image-in-attachment-preview.png → ...-image-fallback-in-attachment-preview.png
diff --git a/docusaurus/docs/React/assets/base-image-fallback-in-image-attachment.png b/docusaurus/docs/React/assets/base-image-fallback-in-image-attachment.png
diff --git a/docusaurus/docs/React/assets/base-image-in-attachment-gallery.png b/docusaurus/docs/React/assets/base-image-in-attachment-gallery.png
diff --git a/docusaurus/docs/React/assets/base-image-in-image-attachment.png b/docusaurus/docs/React/assets/base-image-in-image-attachment.png
diff --git a/docusaurus/docs/React/components/utility-components/base-image.mdx b/docusaurus/docs/React/components/utility-components/base-image.mdx
@@ -5,9 +5,9 @@ title: BaseImage
 ---
 
 import ImageShowcase from '@site/src/components/ImageShowcase';
-import BaseImageInGallery from '../../assets/base-image-in-attachment-gallery.png'
-import BaseImageInAttachmentPreview from '../../assets/base-image-in-attachment-preview.png'
-import BaseImageInImageAttachment from '../../assets/base-image-in-image-attachment.png'
+import BaseImageInGallery from '../../assets/base-image-fallback-in-attachment-gallery.png'
+import BaseImageInAttachmentPreview from '../../assets/base-image-fallback-in-attachment-preview.png'
+import BaseImageInImageAttachment from '../../assets/base-image-fallback-in-image-attachment.png'
 
 The `BaseImage` component's purpose is to display an image or a fallback if loading the resource has failed. The component is used internally by:
 

diff --git a/src/components/Attachment/__tests__/Card.test.js b/src/components/Attachment/__tests__/Card.test.js
@@ -168,6 +168,7 @@ describe('Card', () => {
               data-testid="image-test"
               src="test.jpg"
               tabindex="0"
+              title="test"
             />
           </div>
           <div
@@ -221,6 +222,7 @@ describe('Card', () => {
               data-testid="image-test"
               src="test.jpg"
               tabindex="0"
+              title="test"
             />
           </div>
           <div
@@ -300,6 +302,7 @@ describe('Card', () => {
               data-testid="image-test"
               src="test.jpg"
               tabindex="0"
+              title="test"
             />
           </div>
         </div>

diff --git a/src/components/Attachment/__tests__/__snapshots__/Card.test.js.snap b/src/components/Attachment/__tests__/__snapshots__/Card.test.js.snap
@@ -15,6 +15,7 @@ exports[`Card theme V2 (1) should render card without caption if attachment type
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -143,6 +144,7 @@ exports[`Card theme V2 (3) should render card without caption if attachment type
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -236,6 +238,7 @@ exports[`Card theme V2 (7) should render audio with caption using og_scrape_url
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -392,6 +395,7 @@ exports[`Card theme V2 (9) should render image with caption using og_scrape_url
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -445,6 +449,7 @@ exports[`Card theme V2 (10) should render audio without title if attachment type
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_thumb_url"
       />
     </div>
     <div
@@ -591,6 +596,7 @@ exports[`Card theme V2 (12) should render image without title if attachment type
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_thumb_url"
       />
     </div>
     <div
@@ -639,6 +645,7 @@ exports[`Card theme V2 (13) should render audio without title and with caption u
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_thumb_url"
       />
     </div>
     <div
@@ -785,6 +792,7 @@ exports[`Card theme V2 (15) should render image without title and with caption u
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_thumb_url"
       />
     </div>
     <div
@@ -1018,6 +1026,7 @@ exports[`Card theme V2 (19) should render image loaded from thumb_url not audio
         data-testid="image-test"
         src="dummyAttachment_thumb_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -1076,6 +1085,7 @@ exports[`Card theme V2 (20) should render image loaded from thumb_url not video
         data-testid="image-test"
         src="dummyAttachment_thumb_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -1129,6 +1139,7 @@ exports[`Card theme V2 (21) should render image loaded from thumb_url if attachm
         data-testid="image-test"
         src="dummyAttachment_thumb_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -1182,6 +1193,7 @@ exports[`Card theme V2 (22) should render image loaded from image_url not audio
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -1240,6 +1252,7 @@ exports[`Card theme V2 (23) should render image loaded from image_url not video
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -1293,6 +1306,7 @@ exports[`Card theme V2 (24) should render image loaded from image_url if attachm
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div
@@ -1346,6 +1360,7 @@ exports[`Card theme V2 (25) should render audio widget with image loaded from th
         data-testid="image-test"
         src="dummyAttachment_image_url"
         tabindex="0"
+        title="dummyAttachment_title"
       />
     </div>
     <div

diff --git a/src/components/Gallery/BaseImage.tsx b/src/components/Gallery/BaseImage.tsx
@@ -1,20 +1,27 @@
 import React, { forwardRef, useEffect, useState } from 'react';
 import clsx from 'clsx';
+import { DownloadButton } from '../Attachment/DownloadButton';
 
 export type ImageFallbackProps = React.ComponentProps<'img'>;
 
-const DefaultImageFallback = ({ alt, title }: ImageFallbackProps) => (
+const DefaultImageFallback = ({ alt, src, title }: ImageFallbackProps) => (
   <div
     className='str-chat__image-fallback'
     data-testid='str-chat__image-fallback'
     title={title ?? alt}
   >
-    <svg fill='none' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'>
+    <svg
+      className='str-chat__image-fallback__icon'
+      fill='none'
+      viewBox='0 0 18 18'
+      xmlns='http://www.w3.org/2000/svg'
+    >
       <path
         d='M16 2V16H2V2H16ZM16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.1 0 16 0ZM11.14 8.86L8.14 12.73L6 10.14L3 14H15L11.14 8.86Z'
         fill='#080707'
       />
     </svg>
+    <DownloadButton assetUrl={src} />
   </div>
 );
 

diff --git a/src/components/Gallery/__tests__/__snapshots__/Gallery.test.js.snap b/src/components/Gallery/__tests__/__snapshots__/Gallery.test.js.snap
@@ -15,6 +15,7 @@ exports[`Gallery should render component with 3 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -28,6 +29,7 @@ exports[`Gallery should render component with 3 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -41,6 +43,7 @@ exports[`Gallery should render component with 3 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
 </div>
@@ -61,6 +64,7 @@ exports[`Gallery should render component with 4 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -74,6 +78,7 @@ exports[`Gallery should render component with 4 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -87,6 +92,7 @@ exports[`Gallery should render component with 4 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -100,6 +106,7 @@ exports[`Gallery should render component with 4 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
 </div>
@@ -120,6 +127,7 @@ exports[`Gallery should render component with 5 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -133,6 +141,7 @@ exports[`Gallery should render component with 5 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -146,6 +155,7 @@ exports[`Gallery should render component with 5 images 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -180,6 +190,7 @@ exports[`Gallery should render component with default props 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
   <button
@@ -193,6 +204,7 @@ exports[`Gallery should render component with default props 1`] = `
       data-testid="str-chat__base-image"
       onError={[Function]}
       src="about:blank"
+      title="User uploaded content"
     />
   </button>
 </div>