useFolderStructure: Move root folder creation into hook

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

@@ -27,7 +27,7 @@ import * as yup from 'yup';
 
 import { PreviewBox } from './PreviewBox';
 import { ContextInfo } from '../ContextInfo';
-import { getTrad } from '../../utils';
+import { getTrad, findRecursiveFolderByValue } from '../../utils';
 import formatBytes from '../../utils/formatBytes';
 import { useEditAsset } from '../../hooks/useEditAsset';
 import { ReplaceMediaButton } from './ReplaceMediaButton';
@@ -47,6 +47,7 @@ export const EditAssetDialog = ({
   canCopyLink,
   canDownload,
   trackedLocation,
+  folderStructure,
 }) => {
   const { formatMessage, formatDate } = useIntl();
   const submitButtonRef = useRef(null);
@@ -94,18 +95,21 @@ export const EditAssetDialog = ({
     }
   };
 
+  const activeFolderId = asset?.folder?.id;
   const initialFormData = {
     name: asset.name,
     alternativeText: asset.alternativeText || '',
     caption: asset.caption || '',
     parent: {
-      value: null,
-      // TODO
-      label: 'Media Library',
-      ...asset?.folder?.parent,
+      value: activeFolderId ?? null,
+      label:
+        findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ??
+        folderStructure[0].label,
     },
   };
 
+  console.log(asset);
+
   const handleClose = values => {
     if (!isEqual(initialFormData, values)) {
       handleConfirmClose();
@@ -225,7 +229,7 @@ export const EditAssetDialog = ({
                     />
 
                     <Stack spacing={1}>
-                      <FieldLabel>
+                      <FieldLabel for="asset-folder">
                         {formatMessage({
                           id: getTrad('form.input.label.file-location'),
                           defaultMessage: 'Location',
@@ -235,10 +239,18 @@ export const EditAssetDialog = ({
                       <SelectTree
                         name="parent"
                         defaultValue={values.parent}
-                        options={[]}
+                        options={folderStructure}
                         onChange={value => {
                           setFieldValue('parent', value);
                         }}
+                        menuPortalTarget={document.querySelector('body')}
+                        inputId="asset-folder"
+                        {...(errors.parent
+                          ? {
+                              'aria-errormessage': 'folder-parent-error',
+                              'aria-invalid': true,
+                            }
+                          : {})}
                       />
                     </Stack>
                   </Stack>
@@ -298,5 +310,6 @@ EditAssetDialog.propTypes = {
   canCopyLink: PropTypes.bool.isRequired,
   canDownload: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
+  folderStructure: PropTypes.array.isRequired,
   trackedLocation: PropTypes.string,
 };

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

@@ -19,7 +19,7 @@ import { Typography } from '@strapi/design-system/Typography';
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { Form, useNotification, getAPIInnerErrors, useQueryParams } from '@strapi/helper-plugin';
 
-import { getTrad } from '../../utils';
+import { getTrad, findRecursiveFolderByValue } from '../../utils';
 import { useEditFolder } from '../../hooks/useEditFolder';
 import { ContextInfo } from '../ContextInfo';
 import SelectTree from '../SelectTree';
@@ -34,51 +34,23 @@ const folderSchema = yup.object({
     .nullable(true),
 });
 
-function findByValue(data, value) {
-  let result;
-
-  function iter(a) {
-    if (a.value === value) {
-      result = a;
-
-      return true;
-    }
-
-    return Array.isArray(a.children) && a.children.some(iter);
-  }
-
-  data.some(iter);
-
-  return result;
-}
-
-export const EditFolderDialog = ({ onClose, folder, folderStructure: remoteFolderStructure }) => {
+export const EditFolderDialog = ({ onClose, folder, folderStructure }) => {
   const submitButtonRef = useRef(null);
   const { formatMessage, formatDate } = useIntl();
   const { editFolder, isLoading } = useEditFolder();
   const toggleNotification = useNotification();
   const [{ query }] = useQueryParams();
-  const rootFolder = {
-    value: null,
-    label: formatMessage({
-      id: getTrad('form.input.label.folder-location-default-label'),
-      defaultMessage: 'Media Library',
-    }),
-    children: [],
-  };
 
-  const folderStructure = [
-    {
-      ...rootFolder,
-      children: remoteFolderStructure,
-    },
-  ];
-
-  const activeFolderId = parseInt(folder?.parent?.id ?? query?.folder ?? rootFolder.value, 10);
+  const activeFolderId = parseInt(
+    folder?.parent?.id ?? query?.folder ?? folderStructure[0].value,
+    10
+  );
   const initialFormData = Object.assign({}, folder, {
     parent: {
       value: activeFolderId,
-      label: findByValue(folderStructure, activeFolderId)?.label ?? rootFolder.label,
+      label:
+        findRecursiveFolderByValue(folderStructure, activeFolderId)?.label ??
+        folderStructure[0].label,
     },
   });
 

packages/core/upload/admin/src/hooks/useFolderStructure.js

@@ -1,7 +1,8 @@
 import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
 
 import pluginId from '../pluginId';
-import { axiosInstance, getRequestUrl } from '../utils';
+import { axiosInstance, getRequestUrl, getTrad } from '../utils';
 import { recursiveRenameKeys } from './utils/rename-keys';
 
 const FIELD_MAPPING = {
@@ -10,6 +11,7 @@ const FIELD_MAPPING = {
 };
 
 export const useFolderStructure = ({ enabled = true } = {}) => {
+  const { formatMessage } = useIntl();
   const dataRequestURL = getRequestUrl('folder-structure');
 
   const fetchFolderStructure = async () => {
@@ -17,7 +19,18 @@ export const useFolderStructure = ({ enabled = true } = {}) => {
       data: { data },
     } = await axiosInstance.get(dataRequestURL);
 
-    return data.map(f => recursiveRenameKeys(f, key => FIELD_MAPPING?.[key] ?? key));
+    const children = data.map(f => recursiveRenameKeys(f, key => FIELD_MAPPING?.[key] ?? key));
+
+    return [
+      {
+        value: null,
+        label: formatMessage({
+          id: getTrad('form.input.label.folder-location-default-label'),
+          defaultMessage: 'Media Library',
+        }),
+        children,
+      },
+    ];
   };
 
   const { data, error, isLoading } = useQuery(

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -302,6 +302,7 @@ export const MediaLibrary = () => {
           canUpdate={canUpdate}
           canCopyLink={canCopyLink}
           canDownload={canDownload}
+          folderStructure={folderStructure}
           trackedLocation="upload"
         />
       )}

packages/core/upload/admin/src/utils/findRecursiveFolderByValue.js

@@ -0,0 +1,17 @@
+export default function findRecursiveFolderByValue(data, value) {
+  let result;
+
+  function iter(a) {
+    if (a.value === value) {
+      result = a;
+
+      return true;
+    }
+
+    return Array.isArray(a.children) && a.children.some(iter);
+  }
+
+  data.some(iter);
+
+  return result;
+}

packages/core/upload/admin/src/utils/index.js

@@ -2,4 +2,5 @@ export { default as axiosInstance } from './axiosInstance';
 export { default as formatBytes } from './formatBytes';
 export { default as getRequestUrl } from './getRequestUrl';
 export { default as getTrad } from './getTrad';
+export { default as findRecursiveFolderByValue } from './findRecursiveFolderByValue';
 export * from './formatDuration';