chore: passing uploads-related e2e tests

src/admin/components/elements/FileDetails/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import { useTranslation } from 'react-i18next';
 import Thumbnail from '../Thumbnail';
@@ -6,11 +6,27 @@ import Button from '../Button';
 import Meta from './Meta';
 import Chevron from '../../icons/Chevron';
 import { Props } from './types';
+import { FileSizes, Upload } from '../../../../uploads/types';
 
 import './index.scss';
 
 const baseClass = 'file-details';
 
+// sort to the same as imageSizes
+const sortSizes = (sizes: FileSizes, imageSizes: Upload['imageSizes']) => {
+  if (!imageSizes || imageSizes.length === 0) return sizes;
+
+  const orderedSizes: FileSizes = {};
+
+  imageSizes.forEach(({ name }) => {
+    if (sizes[name]) {
+      orderedSizes[name] = sizes[name];
+    }
+  });
+
+  return orderedSizes;
+};
+
 const FileDetails: React.FC<Props> = (props) => {
   const {
     doc,
@@ -21,6 +37,7 @@ const FileDetails: React.FC<Props> = (props) => {
   const {
     upload: {
       staticURL,
+      imageSizes,
     },
   } = collection;
 
@@ -34,6 +51,12 @@ const FileDetails: React.FC<Props> = (props) => {
     url,
   } = doc;
 
+  const [orderedSizes, setOrderedSizes] = useState<FileSizes>(() => sortSizes(sizes, imageSizes));
+
+  useEffect(() => {
+    setOrderedSizes(sortSizes(sizes, imageSizes));
+  }, [sizes, imageSizes]);
+
   const [moreInfoOpen, setMoreInfoOpen] = useState(false);
   const { t } = useTranslation('upload');
 
@@ -94,7 +117,7 @@ const FileDetails: React.FC<Props> = (props) => {
           height={moreInfoOpen ? 'auto' : 0}
         >
           <ul className={`${baseClass}__sizes`}>
-            {Object.entries(sizes).map(([key, val]) => {
+            {Object.entries(orderedSizes).map(([key, val]) => {
               if (val?.filename) {
                 return (
                   <li key={key}>

src/admin/components/elements/FileDetails/types.ts

@@ -1,7 +1,11 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+import { FileSizes } from '../../../../uploads/types';
+import { Data } from '../../forms/Form/types';
 
 export type Props = {
   collection: SanitizedCollectionConfig
-  doc: Record<string, unknown>
+  doc: Data & {
+    sizes?: FileSizes
+  }
   handleRemove?: () => void,
 }

src/admin/components/views/collections/Edit/Upload/index.tsx

@@ -7,9 +7,9 @@ import Button from '../../../../elements/Button';
 import FileDetails from '../../../../elements/FileDetails';
 import Error from '../../../../forms/Error';
 import { Props } from './types';
+import reduceFieldsToValues from '../../../../forms/Form/reduceFieldsToValues';
 
 import './index.scss';
-import reduceFieldsToValues from '../../../../forms/Form/reduceFieldsToValues';
 
 const baseClass = 'file-field';
 
@@ -30,9 +30,6 @@ const Upload: React.FC<Props> = (props) => {
   const {
     collection,
     internalState,
-    internalState: {
-      filename,
-    },
   } = props;
 
   const inputRef = useRef(null);
@@ -42,7 +39,7 @@ const Upload: React.FC<Props> = (props) => {
   const [dragCounter, setDragCounter] = useState(0);
   const [replacingFile, setReplacingFile] = useState(false);
   const { t } = useTranslation('upload');
-  const [doc, setDoc] = useState(reduceFieldsToValues(internalState));
+  const [doc, setDoc] = useState(reduceFieldsToValues(internalState || {}, true));
 
   const {
     value,
@@ -103,7 +100,7 @@ const Upload: React.FC<Props> = (props) => {
   }, [selectingFile, inputRef, setSelectingFile]);
 
   useEffect(() => {
-    setDoc(reduceFieldsToValues(internalState));
+    setDoc(reduceFieldsToValues(internalState || {}, true));
     setReplacingFile(false);
   }, [internalState]);
 
@@ -138,7 +135,7 @@ const Upload: React.FC<Props> = (props) => {
         showError={showError}
         message={errorMessage}
       />
-      {(filename && !replacingFile) && (
+      {(doc.filename && !replacingFile) && (
         <FileDetails
           doc={doc}
           collection={collection}
@@ -148,7 +145,7 @@ const Upload: React.FC<Props> = (props) => {
           }}
         />
       )}
-      {(!filename || replacingFile) && (
+      {(!doc.filename || replacingFile) && (
         <div className={`${baseClass}__upload`}>
           {value && (
             <div className={`${baseClass}__file-selected`}>