@strapi/content-type-builder 5.54.0 → 5.55.0

package/dist/admin/components/DataManager/reducer.mjs

@@ -4,12 +4,15 @@ import { applyPrivateSearchDefault } from '../../utils/applyPrivateSearchDefault
 import { getRelationType } from '../../utils/getRelationType.mjs';
 import { makeUnique } from '../../utils/makeUnique.mjs';
 import { createUndoRedoSlice } from './undoRedo.mjs';
+import { sectionKeyForKind, getDeleteFolderOnlySiblingNameCollisions, MAX_FOLDER_DEPTH, isFolderNameTakenBySibling, createEmptyContentStructure, findSiblingFolderByName } from './utils/contentStructure.mjs';
 
 const initialState = {
     components: {},
     contentTypes: {},
     initialComponents: {},
     initialContentTypes: {},
+    contentStructure: createEmptyContentStructure(),
+    initialContentStructure: createEmptyContentStructure(),
     reservedNames: {
         models: [],
         attributes: []
@@ -55,6 +58,12 @@ const getNewStatus = (oldStatus, newStatus)=>{
     }
     return newStatus;
 };
+const getNewGroupStatus = (oldStatus, newStatus)=>{
+    if (oldStatus === 'NEW') {
+        return oldStatus;
+    }
+    return newStatus;
+};
 const setAttributeStatus = (attribute, status)=>{
     attribute.status = getNewStatus(attribute.status, status);
 };
@@ -92,6 +101,9 @@ const replaceAttributeAt = (type, index, attribute)=>{
 };
 const removeAttributeByName = (type, name)=>{
     const idx = type.attributes.findIndex((attr)=>attr.name === name);
+    if (idx === -1) {
+        return;
+    }
     const attr = type.attributes[idx];
     setStatus(type, 'CHANGED');
     if (attr.status === 'NEW') {
@@ -104,17 +116,156 @@ const updateType = (type, data)=>{
     merge(type, data);
     setStatus(type, 'CHANGED');
 };
+const findGroup = (groups, id)=>{
+    return groups.find((group)=>group.id === id);
+};
+const setGroupStatus = (group, status)=>{
+    group.status = getNewGroupStatus(group.status, status);
+};
+/**
+ * Remove a content type reference from every group of a section, mark the group as changed if a reference was removed.
+ * @returns true if a reference was removed, false otherwise.
+ */ const removeContentTypeChild = (groups, uid)=>{
+    let removed = false;
+    for (const group of groups){
+        const groupIndex = group.children.findIndex((child)=>{
+            return child.type === 'contentType' && child.uid === uid;
+        });
+        if (groupIndex !== -1) {
+            group.children.splice(groupIndex, 1);
+            setGroupStatus(group, 'CHANGED');
+            removed = true;
+        }
+    }
+    return removed;
+};
+/**
+ * Assign a content type to a folder within a single section, optionally creating
+ * a new root folder first.
+ *
+ * Detaches the content type from any current folder then files it under the target group.
+ * This is also used by the create/edit content-type modal's folder picker via
+ * createSchema/updateSchema.
+ */ const applyFolderAssignment = (section, uid, folder)=>{
+    const { groups } = section;
+    removeContentTypeChild(groups, uid);
+    let targetGroupId;
+    if ('newFolderId' in folder) {
+        // Reuse an existing root folder of the same name instead of creating a
+        // duplicate. The modal picker can only ever makes root folders, so
+        // this makes the assumption that a same-named root folder means the
+        // user wants to insert into that folder.
+        const existing = findSiblingFolderByName(groups, null, folder.newFolderName);
+        if (existing) {
+            targetGroupId = existing.id;
+        } else {
+            groups.push({
+                name: folder.newFolderName.trim(),
+                id: folder.newFolderId,
+                parent: null,
+                children: [],
+                status: 'NEW'
+            });
+            targetGroupId = folder.newFolderId;
+        }
+    } else {
+        targetGroupId = folder.targetGroupId;
+    }
+    if (!targetGroupId) {
+        return;
+    }
+    const targetGroup = findGroup(groups, targetGroupId);
+    if (targetGroup) {
+        targetGroup.children.push({
+            type: 'contentType',
+            uid
+        });
+        setGroupStatus(targetGroup, 'CHANGED');
+    }
+};
+/**
+ * Determines whether `potentialDescendantId` is nested somewhere inside `ancestorId`'s subtree
+ */ const isDescendantGroup = (groups, ancestorId, potentialDescendantId)=>{
+    let current = findGroup(groups, potentialDescendantId);
+    while(current && current.parent !== null){
+        if (current.parent === ancestorId) {
+            return true;
+        }
+        current = findGroup(groups, current.parent);
+    }
+    return false;
+};
+const getGroupDepth = (groups, id)=>{
+    let depth = 1;
+    let current = findGroup(groups, id);
+    while(current && current.parent !== null){
+        current = findGroup(groups, current.parent);
+        depth += 1;
+    }
+    return depth;
+};
+/**
+ * Number of folder levels below a group e.g. a group with no sub-folders has height 0.
+ */ const getSubtreeHeight = (groups, id)=>{
+    const group = findGroup(groups, id);
+    if (!group) {
+        return 0;
+    }
+    let height = 0;
+    for (const child of group.children){
+        if (child.type !== 'group') continue;
+        height = Math.max(height, 1 + getSubtreeHeight(groups, child.id));
+    }
+    return height;
+};
+const applyDeleteContentType = (state, uid)=>{
+    const type = state.contentTypes[uid];
+    // Only application schemas belong to CTB. Folder actions can be crafted outside the UI,
+    // so this guard must live at the mutation boundary rather than in the dialog alone.
+    if (!type || !type.uid.startsWith('api::') || type.plugin) {
+        return;
+    }
+    // just drop new content types
+    if (type.status === 'NEW') {
+        delete state.contentTypes[uid];
+    } else {
+        setStatus(type, 'REMOVED');
+    }
+    // remove the content type from the content structure tree
+    Object.values(state.contentStructure.sections).forEach((section)=>{
+        removeContentTypeChild(section.groups, uid);
+    });
+    // remove the content type from the components
+    Object.keys(state.components).forEach((componentUid)=>{
+        const component = state.components[componentUid];
+        const namesToRemove = component.attributes.filter((attribute)=>attribute.type === 'relation' && attribute.target === uid).map((attribute)=>attribute.name);
+        namesToRemove.forEach((name)=>{
+            removeAttributeByName(component, name);
+        });
+    });
+    // remove the content type from the content types
+    Object.keys(state.contentTypes).forEach((contentTypeUid)=>{
+        const contentType = state.contentTypes[contentTypeUid];
+        const namesToRemove = contentType.attributes.filter((attribute)=>attribute.type === 'relation' && attribute.target === uid).map((attribute)=>attribute.name);
+        namesToRemove.forEach((name)=>{
+            removeAttributeByName(contentType, name);
+        });
+    });
+};
 const slice = createUndoRedoSlice({
     name: 'data-manager',
     initialState,
     reducers: {
         init: (state, action)=>{
-            const { components, contentTypes, reservedNames } = action.payload;
+            const { components, contentTypes, reservedNames, contentStructure } = action.payload;
             state.components = components;
             state.initialComponents = components;
             state.initialContentTypes = contentTypes;
             state.contentTypes = contentTypes;
             state.reservedNames = reservedNames;
+            const structure = contentStructure ?? createEmptyContentStructure();
+            state.initialContentStructure = structure;
+            state.contentStructure = structure;
             state.isLoading = false;
         },
         createComponentSchema: (state, action)=>{
@@ -135,7 +286,7 @@ const slice = createUndoRedoSlice({
             state.components[uid] = newSchema;
         },
         createSchema: (state, action)=>{
-            const { uid, data } = action.payload;
+            const { uid, data, folder } = action.payload;
             const { displayName, singularName, pluralName, kind, draftAndPublish, pluginOptions } = data;
             const newSchema = {
                 uid: uid,
@@ -158,6 +309,11 @@ const slice = createUndoRedoSlice({
                 pluginOptions
             };
             state.contentTypes[uid] = newSchema;
+            // File the new content type into a folder in the same transaction it is created,
+            // so both are subject to the same undo/redo operatiion.
+            if (folder) {
+                applyFolderAssignment(state.contentStructure.sections[sectionKeyForKind(kind)], uid, folder);
+            }
         },
         addAttribute: (state, action)=>{
             const { attributeToSet, forTarget, targetUid } = action.payload;
@@ -419,12 +575,13 @@ const slice = createUndoRedoSlice({
             }
         },
         updateSchema: (state, action)=>{
-            const { data, uid } = action.payload;
+            const { data, uid, folder } = action.payload;
             const { displayName, kind, draftAndPublish, pluginOptions } = data;
             const type = state.contentTypes[uid];
             if (!type) {
                 return;
             }
+            const previousKind = type.kind;
             updateType(type, {
                 info: {
                     displayName
@@ -435,6 +592,15 @@ const slice = createUndoRedoSlice({
                 },
                 pluginOptions
             });
+            if (kind && kind !== previousKind) {
+                const oldSection = state.contentStructure.sections[sectionKeyForKind(previousKind)];
+                removeContentTypeChild(oldSection.groups, uid);
+            }
+            // Apply the folder picker's choice after any kind relocation, so the
+            // assignment lands in the content type's (possibly new) section.
+            if (folder) {
+                applyFolderAssignment(state.contentStructure.sections[sectionKeyForKind(kind)], uid, folder);
+            }
         },
         deleteComponent: (state, action)=>{
             const uid = action.payload;
@@ -454,49 +620,251 @@ const slice = createUndoRedoSlice({
                         attribute.components = newComponents;
                     }
                 });
-                contentType.attributes.forEach((attribute)=>{
-                    if (attribute.type === 'component' && attribute.component === uid) {
-                        removeAttributeByName(contentType, attribute.name);
-                    }
+                const namesToRemove = contentType.attributes.filter((attribute)=>attribute.type === 'component' && attribute.component === uid).map((attribute)=>attribute.name);
+                namesToRemove.forEach((name)=>{
+                    removeAttributeByName(contentType, name);
                 });
             });
             // remove the compo from other components
             Object.keys(state.components).forEach((componentUid)=>{
                 const component = state.components[componentUid];
-                component.attributes.forEach((attribute)=>{
-                    if (attribute.type === 'component' && attribute.component === uid) {
-                        removeAttributeByName(component, attribute.name);
-                    }
+                const namesToRemove = component.attributes.filter((attribute)=>attribute.type === 'component' && attribute.component === uid).map((attribute)=>attribute.name);
+                namesToRemove.forEach((name)=>{
+                    removeAttributeByName(component, name);
                 });
             });
         },
         deleteContentType: (state, action)=>{
-            const uid = action.payload;
-            const type = state.contentTypes[uid];
-            // just drop new content types
-            if (type.status === 'NEW') {
-                delete state.contentTypes[uid];
-            } else {
-                setStatus(type, 'REMOVED');
+            applyDeleteContentType(state, action.payload);
+        },
+        createFolder: (state, action)=>{
+            const { section, id, name: rawName, parentId } = action.payload;
+            const name = rawName.trim();
+            const { groups } = state.contentStructure.sections[section];
+            if (parentId && getGroupDepth(groups, parentId) + 1 > MAX_FOLDER_DEPTH) {
+                return;
             }
-            // remove the content type from the components
-            Object.keys(state.components).forEach((componentUid)=>{
-                const component = state.components[componentUid];
-                component.attributes.forEach((attribute)=>{
-                    if (attribute.type === 'relation' && attribute.target === uid) {
-                        removeAttributeByName(component, attribute.name);
+            if (isFolderNameTakenBySibling(groups, parentId, name)) {
+                return;
+            }
+            groups.push({
+                id,
+                name,
+                parent: parentId,
+                children: [],
+                status: 'NEW'
+            });
+            if (parentId) {
+                const parent = findGroup(groups, parentId);
+                if (parent) {
+                    parent.children.push({
+                        type: 'group',
+                        id
+                    });
+                    setGroupStatus(parent, 'CHANGED');
+                }
+            }
+        },
+        renameFolder: (state, action)=>{
+            const { section, id, name: rawName } = action.payload;
+            const name = rawName.trim();
+            const { groups } = state.contentStructure.sections[section];
+            const group = findGroup(groups, id);
+            if (!group) {
+                return;
+            }
+            if (group.name === name) {
+                return;
+            }
+            if (isFolderNameTakenBySibling(groups, group.parent, name, id)) {
+                return;
+            }
+            group.name = name;
+            setGroupStatus(group, 'CHANGED');
+        },
+        moveFolder: (state, action)=>{
+            const { section, id, newParentId, index } = action.payload;
+            const { groups } = state.contentStructure.sections[section];
+            const group = findGroup(groups, id);
+            if (!group) {
+                return;
+            }
+            // Reject no-ops and cyclic moves
+            if (newParentId === id || newParentId && isDescendantGroup(groups, id, newParentId)) {
+                return;
+            }
+            // Refuse moves that would exceed the maximum allowed depth.
+            const newTopDepth = newParentId ? getGroupDepth(groups, newParentId) + 1 : 1;
+            if (newTopDepth + getSubtreeHeight(groups, id) > MAX_FOLDER_DEPTH) {
+                return;
+            }
+            // Refuse a move that would collide with an identically named sibling.
+            if (isFolderNameTakenBySibling(groups, newParentId, group.name, id)) {
+                return;
+            }
+            if (group.parent) {
+                const oldParent = findGroup(groups, group.parent);
+                if (oldParent) {
+                    // Remove from the old parent's list of children.
+                    const idx = oldParent.children.findIndex((child)=>{
+                        return child.type === 'group' && child.id === id;
+                    });
+                    if (idx !== -1) {
+                        oldParent.children.splice(idx, 1);
                     }
-                });
+                    setGroupStatus(oldParent, 'CHANGED');
+                }
+            }
+            group.parent = newParentId;
+            setGroupStatus(group, 'CHANGED');
+            if (newParentId) {
+                const newParent = findGroup(groups, newParentId);
+                if (newParent) {
+                    const entry = {
+                        type: 'group',
+                        id
+                    };
+                    if (typeof index === 'number' && index >= 0 && index <= newParent.children.length) {
+                        newParent.children.splice(index, 0, entry);
+                    } else {
+                        newParent.children.push(entry);
+                    }
+                    setGroupStatus(newParent, 'CHANGED');
+                }
+            } else if (typeof index === 'number') {
+                // If a content type is dropped into the root:
+                // The root display order follows the array order of the
+                // section's root-level groups because there's no root level
+                // customization yet, so reposition the moved group among them.
+                const currentIndex = groups.findIndex((candidate)=>candidate.id === id);
+                if (currentIndex !== -1) {
+                    const [moved] = groups.splice(currentIndex, 1);
+                    const rootIds = groups.filter((candidate)=>candidate.parent === null).map((candidate)=>candidate.id);
+                    const anchorId = rootIds[index];
+                    const insertAt = anchorId ? groups.findIndex((candidate)=>candidate.id === anchorId) : groups.length;
+                    groups.splice(insertAt === -1 ? groups.length : insertAt, 0, moved);
+                }
+            }
+        },
+        deleteFolderOnly: (state, action)=>{
+            const { section, id: groupToDeleteId } = action.payload;
+            const { groups } = state.contentStructure.sections[section];
+            const groupToDelete = findGroup(groups, groupToDeleteId);
+            if (!groupToDelete) {
+                return;
+            }
+            const groupToDeleteParentId = groupToDelete.parent;
+            // Reparenting a child folder into its grandparent must preserve the same sibling-name
+            // invariant as create, rename, and move. Do this before mutating any group state.
+            if (getDeleteFolderOnlySiblingNameCollisions(groups, groupToDeleteId).length > 0) {
+                return;
+            }
+            // It is necessary to clone the children because we must subsequently mutate the original group.children array when we splice it out of its parent.
+            const children = groupToDelete.children.map((child)=>({
+                    ...child
+                }));
+            // Children of a deleted folder inherit the deleted folder's parent.
+            children.forEach((child)=>{
+                if (child.type === 'group') {
+                    const childGroup = findGroup(groups, child.id);
+                    if (childGroup) {
+                        childGroup.parent = groupToDeleteParentId;
+                    }
+                }
             });
-            // remove the content type from the content types
-            Object.keys(state.contentTypes).forEach((contentTypeUid)=>{
-                const contentType = state.contentTypes[contentTypeUid];
-                contentType.attributes.forEach((attribute)=>{
-                    if (attribute.type === 'relation' && attribute.target === uid) {
-                        removeAttributeByName(contentType, attribute.name);
+            if (groupToDeleteParentId) {
+                const groupToDeleteParent = findGroup(groups, groupToDeleteParentId);
+                if (groupToDeleteParent) {
+                    // Splice the deleted folder's children of the deleted folder into their new parent at the position of the deleted folder.
+                    const groupToDeleteIndex = groupToDeleteParent.children.findIndex((child)=>{
+                        return child.type === 'group' && child.id === groupToDeleteId;
+                    });
+                    if (groupToDeleteIndex !== -1) {
+                        groupToDeleteParent.children.splice(groupToDeleteIndex, 1, ...children);
+                    } else {
+                        groupToDeleteParent.children.push(...children);
                     }
-                });
+                    setGroupStatus(groupToDeleteParent, 'CHANGED');
+                }
+            }
+            // Finally, remove the deleted folder from its section's list of groups.
+            const groupIndex = groups.findIndex((candidate)=>{
+                return candidate.id === groupToDeleteId;
             });
+            if (groupIndex !== -1) {
+                groups.splice(groupIndex, 1);
+            }
+        },
+        deleteFolderAndContent: (state, action)=>{
+            const { section, id: groupToDeleteId, contentTypeUids } = action.payload;
+            contentTypeUids.forEach((uid)=>{
+                applyDeleteContentType(state, uid);
+            });
+            const { groups } = state.contentStructure.sections[section];
+            const groupToDelete = findGroup(groups, groupToDeleteId);
+            if (!groupToDelete) {
+                return;
+            }
+            const toRemove = new Set();
+            const collect = (currentGroupId)=>{
+                toRemove.add(currentGroupId);
+                const currentGroup = findGroup(groups, currentGroupId);
+                for (const child of currentGroup?.children ?? []){
+                    if (child.type !== 'group') continue;
+                    collect(child.id);
+                }
+            };
+            collect(groupToDeleteId);
+            if (groupToDelete.parent) {
+                const groupToDeleteParent = findGroup(groups, groupToDelete.parent);
+                if (groupToDeleteParent) {
+                    const groupToDeleteIndex = groupToDeleteParent.children.findIndex((child)=>{
+                        return child.type === 'group' && child.id === groupToDeleteId;
+                    });
+                    if (groupToDeleteIndex !== -1) {
+                        groupToDeleteParent.children.splice(groupToDeleteIndex, 1);
+                    }
+                    setGroupStatus(groupToDeleteParent, 'CHANGED');
+                }
+            }
+            // Removes the group entry and all its descendants from the contentStructure.
+            state.contentStructure.sections[section].groups = groups.filter((candidate)=>{
+                return !toRemove.has(candidate.id);
+            });
+        },
+        assignContentTypeToFolder: (state, action)=>{
+            const { section, uid, targetGroupId, index } = action.payload;
+            const { groups } = state.contentStructure.sections[section];
+            removeContentTypeChild(groups, uid);
+            if (targetGroupId) {
+                const targetGroup = findGroup(groups, targetGroupId);
+                if (targetGroup) {
+                    const entry = {
+                        type: 'contentType',
+                        uid
+                    };
+                    if (typeof index === 'number' && index >= 0 && index <= targetGroup.children.length) {
+                        targetGroup.children.splice(index, 0, entry);
+                    } else {
+                        targetGroup.children.push(entry);
+                    }
+                    setGroupStatus(targetGroup, 'CHANGED');
+                }
+            }
+        },
+        reorderFolderChildren: (state, action)=>{
+            const { section, groupId, from, to } = action.payload;
+            const group = findGroup(state.contentStructure.sections[section].groups, groupId);
+            if (!group) {
+                return;
+            }
+            const child = group.children[from];
+            if (!child) {
+                return;
+            }
+            group.children.splice(from, 1);
+            group.children.splice(to, 0, child);
+            setGroupStatus(group, 'CHANGED');
         },
         applyChange (state, reducerAction) {
             const { action, schema } = reducerAction.payload;
@@ -523,10 +891,15 @@ const slice = createUndoRedoSlice({
                             };
                         } else {
                             const contentType = state.contentTypes[uid];
+                            const previousKind = contentType?.kind;
                             state.contentTypes[uid] = {
                                 ...schema,
                                 status: contentType?.status === 'NEW' ? 'NEW' : schema.status
                             };
+                            if (previousKind && schema.kind && schema.kind !== previousKind) {
+                                const oldSection = state.contentStructure.sections[sectionKeyForKind(previousKind)];
+                                removeContentTypeChild(oldSection.groups, uid);
+                            }
                         }
                     }
                     break;
@@ -557,6 +930,9 @@ const slice = createUndoRedoSlice({
                             } else {
                                 state.contentTypes[uid].status = 'REMOVED';
                             }
+                            Object.values(state.contentStructure.sections).forEach((section)=>{
+                                removeContentTypeChild(section.groups, uid);
+                            });
                         }
                         break;
                     }
@@ -575,12 +951,14 @@ const slice = createUndoRedoSlice({
         }
         return {
             components: state.components,
-            contentTypes: state.contentTypes
+            contentTypes: state.contentTypes,
+            contentStructure: state.contentStructure
         };
     },
     discard: (state)=>{
         state.components = state.initialComponents;
         state.contentTypes = state.initialContentTypes;
+        state.contentStructure = state.initialContentStructure;
     }
 });
 const { reducer, actions } = slice;