ML: Improve folder prop-types

packages/core/upload/admin/src/components/EditAssetDialog/index.js

@@ -27,11 +27,11 @@ import * as yup from 'yup';
 
 import { PreviewBox } from './PreviewBox';
 import { ContextInfo } from '../ContextInfo';
+import { FolderStructureDefinition, AssetDefinition } from '../../constants';
 import { getTrad, findRecursiveFolderByValue } from '../../utils';
 import formatBytes from '../../utils/formatBytes';
 import { useEditAsset } from '../../hooks/useEditAsset';
 import { ReplaceMediaButton } from './ReplaceMediaButton';
-import { AssetDefinition } from '../../constants';
 import SelectTree from '../SelectTree';
 
 const fileInfoSchema = yup.object({
@@ -308,6 +308,6 @@ EditAssetDialog.propTypes = {
   canCopyLink: PropTypes.bool.isRequired,
   canDownload: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
-  folderStructure: PropTypes.array.isRequired,
+  folderStructure: FolderStructureDefinition.isRequired,
   trackedLocation: PropTypes.string,
 };

packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js

@@ -20,6 +20,7 @@ import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { Form, useNotification, getAPIInnerErrors, useQueryParams } from '@strapi/helper-plugin';
 
 import { getTrad, findRecursiveFolderByValue } from '../../utils';
+import { FolderDefinition, FolderStructureDefinition } from '../../constants';
 import { useEditFolder } from '../../hooks/useEditFolder';
 import { useBulkRemove } from '../../hooks/useBulkRemove';
 import { ContextInfo } from '../ContextInfo';
@@ -273,17 +274,8 @@ EditFolderDialog.defaultProps = {
 };
 
 EditFolderDialog.propTypes = {
-  folder: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    name: PropTypes.string.isRequired,
-    children: PropTypes.array.isRequired,
-    createdAt: PropTypes.string.isRequired,
-    files: PropTypes.shape({
-      count: PropTypes.number.isRequired,
-    }).isRequired,
-    parent: PropTypes.number,
-  }),
-  folderStructure: PropTypes.array.isRequired,
+  folder: FolderDefinition,
+  folderStructure: FolderStructureDefinition.isRequired,
   onClose: PropTypes.func.isRequired,
   canUpdate: PropTypes.bool,
 };

packages/core/upload/admin/src/components/FolderList/FolderList.js

@@ -14,6 +14,7 @@ import { useQueryParams } from '@strapi/helper-plugin';
 import Pencil from '@strapi/icons/Pencil';
 
 import { FolderCard, FolderCardBody, FolderCardCheckbox, FolderCardLink } from '../FolderCard';
+import { FolderDefinition } from '../../constants';
 
 const CardTitle = styled(Typography).attrs({
   ellipsis: true,
@@ -101,8 +102,7 @@ FolderList.defaultProps = {
 };
 
 FolderList.propTypes = {
-  // TODO: describe shape
-  folders: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  folders: PropTypes.arrayOf(FolderDefinition).isRequired,
   size: PropTypes.oneOf(['S', 'M']),
   selectedFolders: PropTypes.array,
   onEditFolder: PropTypes.func.isRequired,

packages/core/upload/admin/src/constants.js

@@ -12,6 +12,37 @@ export const AssetSource = {
   Computer: 'computer',
 };
 
+export const FolderDefinition = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  children: PropTypes.shape({
+    count: PropTypes.number.isRequired,
+  }).isRequired,
+  createdAt: PropTypes.string.isRequired,
+  createdBy: PropTypes.shape(),
+  files: PropTypes.shape({
+    count: PropTypes.number.isRequired,
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  parent: PropTypes.number,
+  updatedAt: PropTypes.string.isRequired,
+  updatedBy: PropTypes.shape(),
+  uid: PropTypes.string.isRequired,
+  path: PropTypes.string.isRequired,
+});
+
+const FolderStructure = PropTypes.shape({
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  label: PropTypes.string.isRequired,
+  children: PropTypes.array,
+});
+
+FolderStructure.children = PropTypes.arrayOf(PropTypes.shape(FolderStructure));
+FolderStructure.defaultProps = {
+  children: undefined,
+};
+
+export const FolderStructureDefinition = PropTypes.arrayOf(FolderStructure);
+
 export const AssetDefinition = PropTypes.shape({
   id: PropTypes.number,
   height: PropTypes.number,
@@ -25,6 +56,7 @@ export const AssetDefinition = PropTypes.shape({
   updatedAt: PropTypes.string,
   alternativeText: PropTypes.string,
   caption: PropTypes.string,
+  folder: PropTypes.shape(FolderDefinition),
   formats: PropTypes.shape({
     thumbnail: PropTypes.shape({
       url: PropTypes.string,