feat: media library cleanup (#699)

packages/core/src/components/entry-editor/editor-control-pane/EditorControl.tsx

@@ -17,6 +17,7 @@ import useMemoCompare from '@staticcms/core/lib/hooks/useMemoCompare';
 import useUUID from '@staticcms/core/lib/hooks/useUUID';
 import { isFieldDuplicate, isFieldHidden } from '@staticcms/core/lib/i18n';
 import { resolveWidget } from '@staticcms/core/lib/registry';
+import { fileForEntry } from '@staticcms/core/lib/util/collection.util';
 import { getFieldLabel } from '@staticcms/core/lib/util/field.util';
 import { isNotNullish } from '@staticcms/core/lib/util/null.util';
 import { validate } from '@staticcms/core/lib/util/validation.util';
@@ -40,6 +41,7 @@ import type { ConnectedProps } from 'react-redux';
 
 const EditorControl = ({
   collection,
+  collectionFile,
   config: configState,
   entry,
   field,
@@ -153,6 +155,7 @@ const EditorControl = ({
         {createElement(widget.control, {
           key: `${id}-${version}`,
           collection,
+          collectionFile,
           config,
           entry,
           field: field as UnknownField,
@@ -231,6 +234,7 @@ function mapStateToProps(state: RootState, ownProps: EditorControlOwnProps) {
   const { collections, entryDraft } = state;
   const entry = entryDraft.entry;
   const collection = entryDraft.entry ? collections[entryDraft.entry.collection] : null;
+  const collectionFile = fileForEntry(collection, entryDraft.entry?.slug);
   const isLoadingAsset = selectIsLoadingAsset(state);
 
   return {
@@ -239,6 +243,7 @@ function mapStateToProps(state: RootState, ownProps: EditorControlOwnProps) {
     config: state.config,
     entry,
     collection,
+    collectionFile,
     isLoadingAsset,
   };
 }

packages/core/src/components/media-library/common/MediaLibrary.tsx

@@ -17,6 +17,7 @@ import {
   loadMediaDisplayURL,
   persistMedia,
 } from '@staticcms/core/actions/mediaLibrary';
+import useFolderSupport from '@staticcms/core/lib/hooks/useFolderSupport';
 import useMediaFiles from '@staticcms/core/lib/hooks/useMediaFiles';
 import { fileExtension } from '@staticcms/core/lib/util';
 import classNames from '@staticcms/core/lib/util/classNames.util';
@@ -85,6 +86,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
     dynamicSearchQuery,
     page,
     collection,
+    collectionFile,
     field,
     value: initialValue,
     alt: initialAlt,
@@ -463,6 +465,8 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
 
   const hasSelection = hasMedia && !isEmpty(selectedFile);
 
+  const folderSupport = useFolderSupport({ config, collection, collectionFile, field });
+
   return (
     <>
       <div className="flex flex-col w-full h-full">
@@ -484,7 +488,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
               px-5
               pt-4
             `,
-            config?.media_library?.folder_support &&
+            folderSupport &&
               `
                 pb-4
                 border-b
@@ -517,7 +521,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
               placeholder={t('mediaLibrary.mediaLibraryModal.search')}
               disabled={!dynamicSearchActive && !hasFilteredFiles}
             />
-            {config?.media_library?.folder_support ? (
+            {folderSupport ? (
               <div className="flex gap-1.5 items-center">
                 <IconButton
                   onClick={handleHome}
@@ -565,7 +569,7 @@ const MediaLibrary: FC<TranslatedProps<MediaLibraryProps>> = ({
             ) : null}
           </div>
         </div>
-        {config?.media_library?.folder_support ? (
+        {folderSupport ? (
           <div
             className="
               flex

packages/core/src/components/media-library/common/MediaLibraryCardGrid.tsx

@@ -9,6 +9,7 @@ import {
   MEDIA_CARD_WIDTH,
   MEDIA_LIBRARY_PADDING,
 } from '@staticcms/core/constants/mediaLibrary';
+import useFolderSupport from '@staticcms/core/lib/hooks/useFolderSupport';
 import classNames from '@staticcms/core/lib/util/classNames.util';
 import { selectConfig } from '@staticcms/core/reducers/selectors/config';
 import { useAppSelector } from '@staticcms/core/store/hooks';
@@ -16,7 +17,8 @@ import MediaLibraryCard from './MediaLibraryCard';
 
 import type {
   Collection,
-  Field,
+  CollectionFile,
+  MediaField,
   MediaFile,
   MediaLibraryDisplayURL,
 } from '@staticcms/core/interface';
@@ -51,7 +53,8 @@ export interface MediaLibraryCardGridProps {
   loadDisplayURL: (asset: MediaFile) => void;
   displayURLs: MediaLibraryState['displayURLs'];
   collection?: Collection;
-  field?: Field;
+  collectionFile?: CollectionFile;
+  field?: MediaField;
   isDialog: boolean;
   onDelete: (file: MediaFile) => void;
 }
@@ -136,9 +139,21 @@ const CardWrapper = ({
 };
 
 const MediaLibraryCardGrid: FC<MediaLibraryCardGridProps> = props => {
-  const { mediaItems, scrollContainerRef, canLoadMore, isDialog, onLoadMore } = props;
+  const {
+    mediaItems,
+    scrollContainerRef,
+    canLoadMore,
+    isDialog,
+    onLoadMore,
+    field,
+    collection,
+    collectionFile,
+  } = props;
+
   const config = useAppSelector(selectConfig);
 
+  const folderSupport = useFolderSupport({ config, collection, collectionFile, field });
+
   const [version, setVersion] = useState(0);
 
   const handleResize = useCallback(() => {
@@ -164,7 +179,7 @@ const MediaLibraryCardGrid: FC<MediaLibraryCardGridProps> = props => {
                   overflow-hidden
                 `,
                 isDialog && 'rounded-b-lg',
-                !config?.media_library?.folder_support && 'pt-[20px]',
+                !folderSupport && 'pt-[20px]',
               )}
               style={{
                 width,
@@ -179,9 +194,7 @@ const MediaLibraryCardGrid: FC<MediaLibraryCardGridProps> = props => {
                 rowCount={rowCount}
                 rowHeight={() => rowHeightWithGutter}
                 width={width}
-                height={
-                  height - (!config?.media_library?.folder_support ? MEDIA_LIBRARY_PADDING : 0)
-                }
+                height={height - (!folderSupport ? MEDIA_LIBRARY_PADDING : 0)}
                 itemData={
                   {
                     ...props,