From 0031e77b09456482df5315c99cca1e260df7a09e Mon Sep 17 00:00:00 2001
From: Jelmer Overeem <jelmer_overeem@hotmail.com>
Date: Fri, 8 Nov 2024 12:49:30 +0100
Subject: [PATCH] MM-44470 Fix SVG without width not displaying (#28963)

* Fix SVG rendering issue by setting default dimensions in image preview components

* destructuring attribute to prevent empty style object

* only create style object when fileType is svg

* fix style attribute for svg
---
 .../file_preview_modal/image_preview.tsx          | 12 ++++++++++++
 .../channels/src/components/size_aware_image.tsx  | 15 ++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/file_preview_modal/image_preview.tsx b/webapp/channels/src/components/file_preview_modal/image_preview.tsx
index 62ed098d65..f4a6d60059 100644
--- a/webapp/channels/src/components/file_preview_modal/image_preview.tsx
+++ b/webapp/channels/src/components/file_preview_modal/image_preview.tsx
@@ -7,6 +7,9 @@ import type {FileInfo} from '@mattermost/types/files';
 
 import {getFilePreviewUrl, getFileDownloadUrl} from 'mattermost-redux/utils/file_utils';
 
+import {FileTypes} from 'utils/constants';
+import {getFileType} from 'utils/utils';
+
 import './image_preview.scss';
 
 interface Props {
@@ -31,6 +34,14 @@ export default function ImagePreview({fileInfo, canDownloadFiles}: Props) {
         return <img src={previewUrl}/>;
     }
 
+    let conditionalSVGStyleAttribute;
+    if (getFileType(fileInfo.extension) === FileTypes.SVG) {
+        conditionalSVGStyleAttribute = {
+            width: fileInfo.width,
+            height: 'auto',
+        };
+    }
+
     return (
         <a
             className='image_preview'
@@ -42,6 +53,7 @@ export default function ImagePreview({fileInfo, canDownloadFiles}: Props) {
                 data-testid='imagePreview'
                 alt={'preview url image'}
                 src={previewUrl}
+                style={conditionalSVGStyleAttribute}
             />
         </a>
     );
diff --git a/webapp/channels/src/components/size_aware_image.tsx b/webapp/channels/src/components/size_aware_image.tsx
index fe50dfa4ce..cca9ae517c 100644
--- a/webapp/channels/src/components/size_aware_image.tsx
+++ b/webapp/channels/src/components/size_aware_image.tsx
@@ -18,7 +18,8 @@ import {getFileMiniPreviewUrl} from 'mattermost-redux/utils/file_utils';
 import LoadingImagePreview from 'components/loading_image_preview';
 import WithTooltip from 'components/with_tooltip';
 
-import {localizeMessage, copyToClipboard} from 'utils/utils';
+import {FileTypes} from 'utils/constants';
+import {localizeMessage, copyToClipboard, getFileType} from 'utils/utils';
 
 const MIN_IMAGE_SIZE = 48;
 const MIN_IMAGE_SIZE_FOR_INTERNAL_BUTTONS = 100;
@@ -194,6 +195,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
     renderImageWithContainerIfNeeded = () => {
         const {
             fileInfo,
+            dimensions,
             src,
             fileURL,
             enablePublicLink,
@@ -214,6 +216,16 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
             ariaLabelImage += ` ${fileInfo.name}`.toLowerCase();
         }
 
+        const fileType = getFileType(fileInfo?.extension ?? '');
+
+        let conditionalSVGStyleAttribute;
+        if (fileType === FileTypes.SVG) {
+            conditionalSVGStyleAttribute = {
+                width: dimensions?.width || MIN_IMAGE_SIZE,
+                height: 'auto',
+            };
+        }
+
         const image = (
             <img
                 {...props}
@@ -228,6 +240,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
                 src={src}
                 onError={this.handleError}
                 onLoad={this.handleLoad}
+                style={conditionalSVGStyleAttribute}
             />
         );