From ada4fdec18925c3874a92194a36174cfc78748e9 Mon Sep 17 00:00:00 2001
From: Marvin Frachet <marvin.frachet@strapi.io>
Date: Mon, 8 Nov 2021 13:59:36 +0100
Subject: [PATCH] Fix ML feebacks from QA (#11495)

---
 .../EditAssetDialog/PreviewBox/index.js       |   4 +-
 .../Carousel/CarouselAssetActions.js          | 104 +++++----------
 .../Carousel/CarouselAssets.js                | 125 +++++++++++-------
 .../core/upload/admin/src/hooks/useUpload.js  |  10 +-
 .../server/controllers/validation/upload.js   |   2 +-
 5 files changed, 123 insertions(+), 122 deletions(-)

diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
index d7ea43a3ad..685854fa42 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
@@ -73,11 +73,11 @@ export const PreviewBox = ({
     const nextAsset = { ...asset, width, height };
     const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
 
-    await editAsset(nextAsset, file);
+    const updatedAsset = await editAsset(nextAsset, file);
 
     // Making sure that when persisting the new asset, the URL changes with width and height
     // So that the browser makes a request and handle the image caching correctly at the good size
-    const optimizedCachingImage = createAssetUrl(asset);
+    const optimizedCachingImage = createAssetUrl(updatedAsset);
     setAssetUrl(optimizedCachingImage);
 
     stopCropping();
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.js b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.js
index f9f6baa335..a33d0e9cbf 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssetActions.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { CarouselActions } from '@strapi/design-system/Carousel';
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -10,78 +10,47 @@ import PencilIcon from '@strapi/icons/Pencil';
 import getTrad from '../../../utils/getTrad';
 import { CopyLinkButton } from '../../CopyLinkButton';
 import { AssetDefinition } from '../../../constants';
-import { EditAssetDialog } from '../../EditAssetDialog';
 
-export const CarouselAssetActions = ({
-  asset,
-  onDeleteAsset,
-  onDeleteAssetFromMediaLibrary,
-  onAddAsset,
-  onEditAsset,
-}) => {
+export const CarouselAssetActions = ({ asset, onDeleteAsset, onAddAsset, onEditAsset }) => {
   const { formatMessage } = useIntl();
-  const [isEditDialogOpened, setEditDialogOpened] = useState(false);
 
   return (
-    <>
-      <CarouselActions>
-        {onAddAsset && (
-          <IconButton
-            label={formatMessage({
-              id: getTrad('control-card.add'),
-              defaultMessage: 'Add',
-            })}
-            icon={<PlusIcon />}
-            onClick={() => onAddAsset(asset)}
-          />
-        )}
-
-        <CopyLinkButton url={prefixFileUrlWithBackendUrl(asset.url)} />
-
-        {onDeleteAsset && (
-          <IconButton
-            label={formatMessage({
-              id: getTrad('app.utils.delete'),
-              defaultMessage: 'Delete',
-            })}
-            icon={<TrashIcon />}
-            onClick={() => onDeleteAsset(asset)}
-          />
-        )}
-
-        {onEditAsset && (
-          <IconButton
-            label={formatMessage({
-              id: getTrad('app.utils.edit'),
-              defaultMessage: 'edit',
-            })}
-            icon={<PencilIcon />}
-            onClick={() => setEditDialogOpened(true)}
-          />
-        )}
-      </CarouselActions>
-
-      {isEditDialogOpened && (
-        <EditAssetDialog
-          onClose={editedAsset => {
-            setEditDialogOpened(false);
-
-            // The asset has been deleted
-            if (editedAsset === null) {
-              onDeleteAssetFromMediaLibrary();
-            }
-
-            if (editedAsset) {
-              onEditAsset(editedAsset);
-            }
-          }}
-          asset={asset}
-          canUpdate
-          canCopyLink
-          canDownload
+    <CarouselActions>
+      {onAddAsset && (
+        <IconButton
+          label={formatMessage({
+            id: getTrad('control-card.add'),
+            defaultMessage: 'Add',
+          })}
+          icon={<PlusIcon />}
+          onClick={() => onAddAsset(asset)}
         />
       )}
-    </>
+
+      <CopyLinkButton url={prefixFileUrlWithBackendUrl(asset.url)} />
+
+      {onDeleteAsset && (
+        <IconButton
+          label={formatMessage({
+            id: getTrad('app.utils.delete'),
+            defaultMessage: 'Delete',
+          })}
+          icon={<TrashIcon />}
+          onClick={() => onDeleteAsset(asset)}
+        />
+      )}
+
+      {onEditAsset && (
+        <IconButton
+          label={formatMessage({
+            id: getTrad('app.utils.edit'),
+            defaultMessage: 'edit',
+          })}
+          icon={<PencilIcon />}
+          onClick={onEditAsset}
+        />
+      )}
+    </CarouselActions>
   );
 };
 
@@ -96,5 +65,4 @@ CarouselAssetActions.propTypes = {
   onAddAsset: PropTypes.func,
   onEditAsset: PropTypes.func,
   onDeleteAsset: PropTypes.func,
-  onDeleteAssetFromMediaLibrary: PropTypes.func.isRequired,
 };
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js
index 4cd10b665c..f5f83ca6ff 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAssets.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Carousel, CarouselSlide } from '@strapi/design-system/Carousel';
@@ -7,6 +7,7 @@ import { AssetDefinition } from '../../../constants';
 import { CarouselAssetActions } from './CarouselAssetActions';
 import { CarouselAsset } from './CarouselAsset';
 import { EmptyStateAsset } from './EmptyStateAsset';
+import { EditAssetDialog } from '../../EditAssetDialog';
 
 export const CarouselAssets = ({
   assets,
@@ -24,65 +25,89 @@ export const CarouselAssets = ({
   selectedAssetIndex,
 }) => {
   const { formatMessage } = useIntl();
+  const [isEditingAsset, setIsEditingAsset] = useState(false);
 
   const currentAsset = assets[selectedAssetIndex];
 
   return (
-    <Carousel
-      label={label}
-      selectedSlide={selectedAssetIndex}
-      previousLabel={formatMessage({
-        id: getTrad('mediaLibraryInput.actions.previousSlide'),
-        defaultMessage: 'Previous slide',
-      })}
-      nextLabel={formatMessage({
-        id: getTrad('mediaLibraryInput.actions.nextSlide'),
-        defaultMessage: 'Next slide',
-      })}
-      onNext={onNext}
-      onPrevious={onPrevious}
-      hint={hint}
-      error={error}
-      actions={
-        currentAsset ? (
-          <CarouselAssetActions
-            asset={currentAsset}
-            onDeleteAsset={disabled ? undefined : onDeleteAsset}
-            onDeleteAssetFromMediaLibrary={onDeleteAssetFromMediaLibrary}
-            onAddAsset={disabled ? undefined : onAddAsset}
-            onEditAsset={onEditAsset}
-          />
-        ) : (
-          undefined
-        )
-      }
-    >
-      {assets.length === 0 ? (
-        <CarouselSlide
-          label={formatMessage(
-            { id: getTrad('mediaLibraryInput.slideCount'), defaultMessage: '{n} of {m} slides' },
-            { n: 1, m: 1 }
-          )}
-        >
-          <EmptyStateAsset disabled={disabled} onClick={onAddAsset} onDropAsset={onDropAsset} />
-        </CarouselSlide>
-      ) : (
-        assets.map((asset, index) => (
+    <>
+      <Carousel
+        label={label}
+        selectedSlide={selectedAssetIndex}
+        previousLabel={formatMessage({
+          id: getTrad('mediaLibraryInput.actions.previousSlide'),
+          defaultMessage: 'Previous slide',
+        })}
+        nextLabel={formatMessage({
+          id: getTrad('mediaLibraryInput.actions.nextSlide'),
+          defaultMessage: 'Next slide',
+        })}
+        onNext={onNext}
+        onPrevious={onPrevious}
+        hint={hint}
+        error={error}
+        actions={
+          currentAsset ? (
+            <CarouselAssetActions
+              asset={currentAsset}
+              onDeleteAsset={disabled ? undefined : onDeleteAsset}
+              onDeleteAssetFromMediaLibrary={onDeleteAssetFromMediaLibrary}
+              onAddAsset={disabled ? undefined : onAddAsset}
+              onEditAsset={onEditAsset ? () => setIsEditingAsset(true) : undefined}
+            />
+          ) : (
+            undefined
+          )
+        }
+      >
+        {assets.length === 0 ? (
           <CarouselSlide
-            key={asset.id}
             label={formatMessage(
-              {
-                id: getTrad('mediaLibraryInput.slideCount'),
-                defaultMessage: '{n} of {m} slides',
-              },
-              { n: index + 1, m: assets.length }
+              { id: getTrad('mediaLibraryInput.slideCount'), defaultMessage: '{n} of {m} slides' },
+              { n: 1, m: 1 }
             )}
           >
-            <CarouselAsset asset={asset} />
+            <EmptyStateAsset disabled={disabled} onClick={onAddAsset} onDropAsset={onDropAsset} />
           </CarouselSlide>
-        ))
+        ) : (
+          assets.map((asset, index) => (
+            <CarouselSlide
+              key={asset.id}
+              label={formatMessage(
+                {
+                  id: getTrad('mediaLibraryInput.slideCount'),
+                  defaultMessage: '{n} of {m} slides',
+                },
+                { n: index + 1, m: assets.length }
+              )}
+            >
+              <CarouselAsset asset={asset} />
+            </CarouselSlide>
+          ))
+        )}
+      </Carousel>
+
+      {isEditingAsset && (
+        <EditAssetDialog
+          onClose={editedAsset => {
+            setIsEditingAsset(false);
+
+            // The asset has been deleted
+            if (editedAsset === null) {
+              onDeleteAssetFromMediaLibrary();
+            }
+
+            if (editedAsset) {
+              onEditAsset(editedAsset);
+            }
+          }}
+          asset={currentAsset}
+          canUpdate
+          canCopyLink
+          canDownload
+        />
       )}
-    </Carousel>
+    </>
   );
 };
 
diff --git a/packages/core/upload/admin/src/hooks/useUpload.js b/packages/core/upload/admin/src/hooks/useUpload.js
index 709cb94762..8dce8da833 100644
--- a/packages/core/upload/admin/src/hooks/useUpload.js
+++ b/packages/core/upload/admin/src/hooks/useUpload.js
@@ -11,7 +11,15 @@ const uploadAsset = (file, cancelToken, onProgress) => {
   const formData = new FormData();
 
   formData.append('files', file);
-  formData.append('fileInfo', JSON.stringify(file));
+
+  formData.append(
+    'fileInfo',
+    JSON.stringify({
+      alternativeText: file.name,
+      caption: file.name,
+      name: file.name,
+    })
+  );
 
   return axiosInstance({
     method: 'post',
diff --git a/packages/core/upload/server/controllers/validation/upload.js b/packages/core/upload/server/controllers/validation/upload.js
index 9ee07b9cd9..3a7f31942b 100644
--- a/packages/core/upload/server/controllers/validation/upload.js
+++ b/packages/core/upload/server/controllers/validation/upload.js
@@ -19,7 +19,7 @@ const multiUploadSchema = yup.object({
 const validateUploadBody = (data = {}, isMulti = false) => {
   const schema = isMulti ? multiUploadSchema : uploadSchema;
 
-  return validateYupSchema(schema)(data);
+  return validateYupSchema(schema, { strict: false })(data);
 };
 
 module.exports = validateUploadBody;