Add Back Upload Preview [CV2-5277] (#2102)

* sort prop types for science [CV2-5277] * show preview when available and improve some layout issue with the upload file component [CV2-5277] * add file_present.svg file for upload file component when there is not a preview available, but there is a file attached [CV2-5277] * Add BEM classname for review file button [CV2-5277] * fix linting issue [CV2-5277] * avoid some minor css warnings, unrelated to this
meedan · Sep 12, 2024 · 24d7b54 · 24d7b54
1 parent 3442a3b
commit 24d7b54
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 44 deletions.
diff --git a/localization/react-intl/src/app/components/UploadFile.json b/localization/react-intl/src/app/components/UploadFile.json
@@ -34,9 +34,14 @@
     "description": "Error message when the user tries to upload a file that is over the size limit",
     "defaultMessage": "The file size should be less than {size}. Please try with a smaller file."
   },
+  {
+    "id": "uploadFile.removeFileButton",
+    "description": "Label for the remove uploaded file button",
+    "defaultMessage": "Remove"
+  },
   {
     "id": "uploadFile.changeFile",
     "description": "Output of the uploaded filename and how to change the file",
-    "defaultMessage": "{filename} (click or drop to change)"
+    "defaultMessage": "<strong>{filename}</strong>(click or drop to change)"
   }
 ]
diff --git a/src/app/components/UploadFile.js b/src/app/components/UploadFile.js
@@ -1,14 +1,14 @@
-/* eslint-disable react/sort-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Relay from 'react-relay/classic';
 import { QueryRenderer, graphql } from 'react-relay/compat';
 import Dropzone from 'react-dropzone';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import cx from 'classnames/bind';
 import MediasLoading from './media/MediasLoading';
 import ButtonMain from './cds/buttons-checkboxes-chips/ButtonMain';
 import ClearIcon from '../icons/clear.svg';
+import FilePresentIcon from '../icons/file_present.svg';
 import { unhumanizeSize } from '../helpers';
 import styles from './UploadFile.module.css';
 
@@ -81,7 +81,6 @@ const UploadMessage = ({ about, type }) => {
 };
 
 UploadMessage.propTypes = {
-  type: PropTypes.oneOf(['image', 'video', 'audio', 'file', 'image+video+audio']).isRequired,
   about: PropTypes.shape({
     upload_max_size: PropTypes.string.isRequired,
     upload_extensions: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
@@ -94,6 +93,7 @@ UploadMessage.propTypes = {
     file_max_size: PropTypes.string.isRequired,
     file_extensions: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
   }).isRequired,
+  type: PropTypes.oneOf(['image', 'video', 'audio', 'file', 'image+video+audio']).isRequired,
 };
 
 class UploadFileComponent extends React.PureComponent {
@@ -162,16 +162,38 @@ class UploadFileComponent extends React.PureComponent {
 
     if (value) {
       return (
-        <div style={{ display: 'flex' }}>
-          {noPreview ? <span className={styles.NoPreview} /> : <span className={styles.Preview} image={value.preview} styles={{ backgroundImage: `url(${props => props.image})` }} />}
-          <span className="no-preview" />
+        <div className={styles.PreviewWrapper}>
+          {noPreview ?
+            <div className={styles.NoPreview}>
+              <FilePresentIcon />
+            </div>
+            :
+            <div
+              className={styles.Preview}
+              image={value.preview}
+              style={{
+                backgroundImage: `url(${value.preview})`,
+                backgroundPosition: 'center',
+                backgroundSize: 'cover',
+                backgroundRepeat: 'no-repeat',
+              }}
+            />
+          }
           <ButtonMain
             buttonProps={{
               id: 'remove-image',
             }}
-            iconCenter={<ClearIcon />}
+            className="int-remove-upload__button--preview"
+            iconLeft={<ClearIcon />}
+            label={
+              <FormattedMessage
+                defaultMessage="Remove"
+                description="Label for the remove uploaded file button"
+                id="uploadFile.removeFileButton"
+              />
+            }
             size="small"
-            theme="text"
+            theme="lightBeige"
             variant="contained"
             onClick={this.onDelete}
           />
@@ -200,20 +222,17 @@ class UploadFileComponent extends React.PureComponent {
           multiple={false}
           onDrop={this.onDrop}
         >
-          <div>
-            {value ? (
-              <FormattedMessage
-                defaultMessage="{filename} (click or drop to change)"
-                description="Output of the uploaded filename and how to change the file"
-                id="uploadFile.changeFile"
-                values={{ filename: value.name }}
-              />
-            ) : (
-              <UploadMessage about={about} type={type} />
-            )}
-          </div>
+          {value ? (
+            <FormattedHTMLMessage
+              defaultMessage="<strong>{filename}</strong>(click or drop to change)"
+              description="Output of the uploaded filename and how to change the file"
+              id="uploadFile.changeFile"
+              values={{ filename: value.name }}
+            />
+          ) : (
+            <UploadMessage about={about} type={type} />
+          )}
         </Dropzone>
-        <br />
       </div>
     );
   }
@@ -254,12 +273,12 @@ UploadFile.defaultProps = {
   disabled: false,
 };
 UploadFile.propTypes = {
-  value: PropTypes.object, // or null
-  type: PropTypes.oneOf(['image', 'video', 'audio', 'image+video+audio']).isRequired,
+  disabled: PropTypes.bool,
   noPreview: PropTypes.bool,
+  type: PropTypes.oneOf(['image', 'video', 'audio', 'image+video+audio']).isRequired,
+  value: PropTypes.object, // or null
   onChange: PropTypes.func.isRequired, // func(Image) => undefined
   onError: PropTypes.func.isRequired, // func(Image?, <FormattedMessage ...>) => undefined
-  disabled: PropTypes.bool,
 };
 // eslint-disable-next-line
 export { UploadFileComponent };

diff --git a/src/app/components/UploadFile.module.css b/src/app/components/UploadFile.module.css
@@ -1,5 +1,4 @@
 .UploadFile {
-  align-items: center;
   display: flex;
   gap: 8px;
   margin: 8px 0 16px;
@@ -8,6 +7,7 @@
   .UploadFile-without-file {
     align-items: center;
     border: 2px dashed var(--color-gray-59);
+    border-radius: var(--border-radius-default);
     color: var(--color-gray-59);
     cursor: pointer;
     display: flex;
@@ -17,22 +17,43 @@
     text-align: center;
     width: 100%;
   }
-}
 
-.Preview {
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  display: block;
-  height: 80px;
-  position: relative;
-  width: 80px;
-}
+  .UploadFile-with-file {
+    strong {
+      display: block;
+      margin: 0 0 8px;
+    }
+  }
 
-.NoPreview {
-  display: block;
-  height: 0;
-  margin: 16px 0 0;
-  position: relative;
-  width: 0;
+  .PreviewWrapper {
+    align-items: center;
+    background-color: var(--color-beige-93);
+    border-radius: var(--border-radius-default);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+
+    .Preview,
+    .NoPreview {
+      display: block;
+      height: 80px;
+      position: relative;
+      width: 80px;
+    }
+
+    .Preview {
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    .NoPreview {
+      align-items: center;
+      color: var(--color-gray-59);
+      display: flex;
+      font-size: var(--iconSizeDefault);
+      justify-content: center;
+    }
+  }
 }
diff --git a/src/app/components/cds/inputs/Switch.module.css b/src/app/components/cds/inputs/Switch.module.css
@@ -102,7 +102,7 @@
   }
 
   :global(.MuiFormControlLabel-labelPlacementTop) {
-    align-items: start;
+    align-items: flex-start;
 
     .switch {
       :global(+ .MuiFormControlLabel-label) {

diff --git a/src/app/components/layout/ChatHistory.module.css b/src/app/components/layout/ChatHistory.module.css
@@ -61,7 +61,7 @@
     }
 
     .bot-message {
-      align-items: end;
+      align-items: flex-end;
     }
 
     .message {

diff --git a/src/app/icons/file_present.svg b/src/app/icons/file_present.svg