@strapi/content-manager 0.0.0-experimental.e0df4d50334a17a1beb3d203bff414fbbff62f7b → 0.0.0-experimental.e100737b0ed96d0d80a5c6f4925c7374e63a342a

package/dist/admin/modules/app.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var toolkit = require('@reduxjs/toolkit');
+
+const initialState = {
+    collectionTypeLinks: [],
+    components: [],
+    fieldSizes: {},
+    models: [],
+    singleTypeLinks: [],
+    isLoading: true
+};
+const appSlice = toolkit.createSlice({
+    name: 'app',
+    initialState,
+    reducers: {
+        setInitialData (state, action) {
+            const { authorizedCollectionTypeLinks, authorizedSingleTypeLinks, components, contentTypeSchemas, fieldSizes } = action.payload;
+            state.collectionTypeLinks = authorizedCollectionTypeLinks.filter(({ isDisplayed })=>isDisplayed);
+            state.singleTypeLinks = authorizedSingleTypeLinks.filter(({ isDisplayed })=>isDisplayed);
+            state.components = components;
+            state.models = contentTypeSchemas;
+            state.fieldSizes = fieldSizes;
+            state.isLoading = false;
+        }
+    }
+});
+const { actions, reducer } = appSlice;
+const { setInitialData } = actions;
+
+exports.reducer = reducer;
+exports.setInitialData = setInitialData;
+//# sourceMappingURL=app.js.map

package/dist/admin/modules/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sources":["../../../admin/src/modules/app.ts"],"sourcesContent":["import { createSlice, type PayloadAction } from '@reduxjs/toolkit';\n\nimport { GetInitData } from '../../../shared/contracts/init';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\ninterface AppState {\n  collectionTypeLinks: ContentManagerLink[];\n  components: GetInitData.Response['data']['components'];\n  fieldSizes: GetInitData.Response['data']['fieldSizes'];\n  models: GetInitData.Response['data']['contentTypes'];\n  singleTypeLinks: ContentManagerLink[];\n  isLoading: boolean;\n}\n\nconst initialState: AppState = {\n  collectionTypeLinks: [],\n  components: [],\n  fieldSizes: {},\n  models: [],\n  singleTypeLinks: [],\n  isLoading: true,\n};\n\nconst appSlice = createSlice({\n  name: 'app',\n  initialState,\n  reducers: {\n    setInitialData(\n      state,\n      action: PayloadAction<{\n        authorizedCollectionTypeLinks: AppState['collectionTypeLinks'];\n        authorizedSingleTypeLinks: AppState['singleTypeLinks'];\n        components: AppState['components'];\n        contentTypeSchemas: AppState['models'];\n        fieldSizes: AppState['fieldSizes'];\n      }>\n    ) {\n      const {\n        authorizedCollectionTypeLinks,\n        authorizedSingleTypeLinks,\n        components,\n        contentTypeSchemas,\n        fieldSizes,\n      } = action.payload;\n      state.collectionTypeLinks = authorizedCollectionTypeLinks.filter(\n        ({ isDisplayed }) => isDisplayed\n      );\n      state.singleTypeLinks = authorizedSingleTypeLinks.filter(({ isDisplayed }) => isDisplayed);\n      state.components = components;\n      state.models = contentTypeSchemas;\n      state.fieldSizes = fieldSizes;\n      state.isLoading = false;\n    },\n  },\n});\n\nconst { actions, reducer } = appSlice;\nconst { setInitialData } = actions;\n\nexport { reducer, setInitialData };\nexport type { AppState };\n"],"names":["initialState","collectionTypeLinks","components","fieldSizes","models","singleTypeLinks","isLoading","appSlice","createSlice","name","reducers","setInitialData","state","action","authorizedCollectionTypeLinks","authorizedSingleTypeLinks","contentTypeSchemas","payload","filter","isDisplayed","actions","reducer"],"mappings":";;;;AAeA,MAAMA,YAAyB,GAAA;AAC7BC,IAAAA,mBAAAA,EAAqB,EAAE;AACvBC,IAAAA,UAAAA,EAAY,EAAE;AACdC,IAAAA,UAAAA,EAAY,EAAC;AACbC,IAAAA,MAAAA,EAAQ,EAAE;AACVC,IAAAA,eAAAA,EAAiB,EAAE;IACnBC,SAAW,EAAA;AACb,CAAA;AAEA,MAAMC,WAAWC,mBAAY,CAAA;IAC3BC,IAAM,EAAA,KAAA;AACNT,IAAAA,YAAAA;IACAU,QAAU,EAAA;QACRC,cACEC,CAAAA,CAAAA,KAAK,EACLC,MAME,EAAA;AAEF,YAAA,MAAM,EACJC,6BAA6B,EAC7BC,yBAAyB,EACzBb,UAAU,EACVc,kBAAkB,EAClBb,UAAU,EACX,GAAGU,OAAOI,OAAO;YAClBL,KAAMX,CAAAA,mBAAmB,GAAGa,6BAA8BI,CAAAA,MAAM,CAC9D,CAAC,EAAEC,WAAW,EAAE,GAAKA,WAAAA,CAAAA;YAEvBP,KAAMP,CAAAA,eAAe,GAAGU,yBAA0BG,CAAAA,MAAM,CAAC,CAAC,EAAEC,WAAW,EAAE,GAAKA,WAAAA,CAAAA;AAC9EP,YAAAA,KAAAA,CAAMV,UAAU,GAAGA,UAAAA;AACnBU,YAAAA,KAAAA,CAAMR,MAAM,GAAGY,kBAAAA;AACfJ,YAAAA,KAAAA,CAAMT,UAAU,GAAGA,UAAAA;AACnBS,YAAAA,KAAAA,CAAMN,SAAS,GAAG,KAAA;AACpB;AACF;AACF,CAAA,CAAA;AAEA,MAAM,EAAEc,OAAO,EAAEC,OAAO,EAAE,GAAGd;AACvB,MAAA,EAAEI,cAAc,EAAE,GAAGS;;;;;"}

package/dist/admin/modules/app.mjs

@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+    collectionTypeLinks: [],
+    components: [],
+    fieldSizes: {},
+    models: [],
+    singleTypeLinks: [],
+    isLoading: true
+};
+const appSlice = createSlice({
+    name: 'app',
+    initialState,
+    reducers: {
+        setInitialData (state, action) {
+            const { authorizedCollectionTypeLinks, authorizedSingleTypeLinks, components, contentTypeSchemas, fieldSizes } = action.payload;
+            state.collectionTypeLinks = authorizedCollectionTypeLinks.filter(({ isDisplayed })=>isDisplayed);
+            state.singleTypeLinks = authorizedSingleTypeLinks.filter(({ isDisplayed })=>isDisplayed);
+            state.components = components;
+            state.models = contentTypeSchemas;
+            state.fieldSizes = fieldSizes;
+            state.isLoading = false;
+        }
+    }
+});
+const { actions, reducer } = appSlice;
+const { setInitialData } = actions;
+
+export { reducer, setInitialData };
+//# sourceMappingURL=app.mjs.map

package/dist/admin/modules/app.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.mjs","sources":["../../../admin/src/modules/app.ts"],"sourcesContent":["import { createSlice, type PayloadAction } from '@reduxjs/toolkit';\n\nimport { GetInitData } from '../../../shared/contracts/init';\n\nimport type { ContentManagerLink } from '../hooks/useContentManagerInitData';\n\ninterface AppState {\n  collectionTypeLinks: ContentManagerLink[];\n  components: GetInitData.Response['data']['components'];\n  fieldSizes: GetInitData.Response['data']['fieldSizes'];\n  models: GetInitData.Response['data']['contentTypes'];\n  singleTypeLinks: ContentManagerLink[];\n  isLoading: boolean;\n}\n\nconst initialState: AppState = {\n  collectionTypeLinks: [],\n  components: [],\n  fieldSizes: {},\n  models: [],\n  singleTypeLinks: [],\n  isLoading: true,\n};\n\nconst appSlice = createSlice({\n  name: 'app',\n  initialState,\n  reducers: {\n    setInitialData(\n      state,\n      action: PayloadAction<{\n        authorizedCollectionTypeLinks: AppState['collectionTypeLinks'];\n        authorizedSingleTypeLinks: AppState['singleTypeLinks'];\n        components: AppState['components'];\n        contentTypeSchemas: AppState['models'];\n        fieldSizes: AppState['fieldSizes'];\n      }>\n    ) {\n      const {\n        authorizedCollectionTypeLinks,\n        authorizedSingleTypeLinks,\n        components,\n        contentTypeSchemas,\n        fieldSizes,\n      } = action.payload;\n      state.collectionTypeLinks = authorizedCollectionTypeLinks.filter(\n        ({ isDisplayed }) => isDisplayed\n      );\n      state.singleTypeLinks = authorizedSingleTypeLinks.filter(({ isDisplayed }) => isDisplayed);\n      state.components = components;\n      state.models = contentTypeSchemas;\n      state.fieldSizes = fieldSizes;\n      state.isLoading = false;\n    },\n  },\n});\n\nconst { actions, reducer } = appSlice;\nconst { setInitialData } = actions;\n\nexport { reducer, setInitialData };\nexport type { AppState };\n"],"names":["initialState","collectionTypeLinks","components","fieldSizes","models","singleTypeLinks","isLoading","appSlice","createSlice","name","reducers","setInitialData","state","action","authorizedCollectionTypeLinks","authorizedSingleTypeLinks","contentTypeSchemas","payload","filter","isDisplayed","actions","reducer"],"mappings":";;AAeA,MAAMA,YAAyB,GAAA;AAC7BC,IAAAA,mBAAAA,EAAqB,EAAE;AACvBC,IAAAA,UAAAA,EAAY,EAAE;AACdC,IAAAA,UAAAA,EAAY,EAAC;AACbC,IAAAA,MAAAA,EAAQ,EAAE;AACVC,IAAAA,eAAAA,EAAiB,EAAE;IACnBC,SAAW,EAAA;AACb,CAAA;AAEA,MAAMC,WAAWC,WAAY,CAAA;IAC3BC,IAAM,EAAA,KAAA;AACNT,IAAAA,YAAAA;IACAU,QAAU,EAAA;QACRC,cACEC,CAAAA,CAAAA,KAAK,EACLC,MAME,EAAA;AAEF,YAAA,MAAM,EACJC,6BAA6B,EAC7BC,yBAAyB,EACzBb,UAAU,EACVc,kBAAkB,EAClBb,UAAU,EACX,GAAGU,OAAOI,OAAO;YAClBL,KAAMX,CAAAA,mBAAmB,GAAGa,6BAA8BI,CAAAA,MAAM,CAC9D,CAAC,EAAEC,WAAW,EAAE,GAAKA,WAAAA,CAAAA;YAEvBP,KAAMP,CAAAA,eAAe,GAAGU,yBAA0BG,CAAAA,MAAM,CAAC,CAAC,EAAEC,WAAW,EAAE,GAAKA,WAAAA,CAAAA;AAC9EP,YAAAA,KAAAA,CAAMV,UAAU,GAAGA,UAAAA;AACnBU,YAAAA,KAAAA,CAAMR,MAAM,GAAGY,kBAAAA;AACfJ,YAAAA,KAAAA,CAAMT,UAAU,GAAGA,UAAAA;AACnBS,YAAAA,KAAAA,CAAMN,SAAS,GAAG,KAAA;AACpB;AACF;AACF,CAAA,CAAA;AAEA,MAAM,EAAEc,OAAO,EAAEC,OAAO,EAAE,GAAGd;AACvB,MAAA,EAAEI,cAAc,EAAE,GAAGS;;;;"}

package/dist/admin/modules/hooks.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var reactRedux = require('react-redux');
+
+const useTypedDispatch = reactRedux.useDispatch;
+const useTypedSelector = reactRedux.useSelector;
+
+exports.useTypedDispatch = useTypedDispatch;
+exports.useTypedSelector = useTypedSelector;
+//# sourceMappingURL=hooks.js.map

package/dist/admin/modules/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../admin/src/modules/hooks.ts"],"sourcesContent":["import { Dispatch } from '@reduxjs/toolkit';\nimport { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';\n\nimport { State } from './reducers';\n\nimport type { Store } from '@strapi/admin/strapi-admin';\n\ntype RootState = ReturnType<Store['getState']> & {\n  ['content-manager']: State;\n};\n\nconst useTypedDispatch: () => Dispatch = useDispatch;\nconst useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;\n\nexport { useTypedSelector, useTypedDispatch };\n"],"names":["useTypedDispatch","useDispatch","useTypedSelector","useSelector"],"mappings":";;;;AAWA,MAAMA,gBAAmCC,GAAAA;AACzC,MAAMC,gBAAoDC,GAAAA;;;;;"}

package/dist/admin/modules/hooks.mjs

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux';
+
+const useTypedDispatch = useDispatch;
+const useTypedSelector = useSelector;
+
+export { useTypedDispatch, useTypedSelector };
+//# sourceMappingURL=hooks.mjs.map

package/dist/admin/modules/hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.mjs","sources":["../../../admin/src/modules/hooks.ts"],"sourcesContent":["import { Dispatch } from '@reduxjs/toolkit';\nimport { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';\n\nimport { State } from './reducers';\n\nimport type { Store } from '@strapi/admin/strapi-admin';\n\ntype RootState = ReturnType<Store['getState']> & {\n  ['content-manager']: State;\n};\n\nconst useTypedDispatch: () => Dispatch = useDispatch;\nconst useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;\n\nexport { useTypedSelector, useTypedDispatch };\n"],"names":["useTypedDispatch","useDispatch","useTypedSelector","useSelector"],"mappings":";;AAWA,MAAMA,gBAAmCC,GAAAA;AACzC,MAAMC,gBAAoDC,GAAAA;;;;"}

package/dist/admin/modules/reducers.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var toolkit = require('@reduxjs/toolkit');
+var app = require('./app.js');
+
+const reducer = toolkit.combineReducers({
+    app: app.reducer
+});
+
+exports.reducer = reducer;
+//# sourceMappingURL=reducers.js.map

package/dist/admin/modules/reducers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducers.js","sources":["../../../admin/src/modules/reducers.ts"],"sourcesContent":["import { combineReducers } from '@reduxjs/toolkit';\n\nimport { reducer as appReducer } from './app';\n\nconst reducer = combineReducers({\n  app: appReducer,\n});\n\ntype State = ReturnType<typeof reducer>;\n\nexport { reducer };\nexport type { State };\n"],"names":["reducer","combineReducers","app","appReducer"],"mappings":";;;;;AAIA,MAAMA,UAAUC,uBAAgB,CAAA;IAC9BC,GAAKC,EAAAA;AACP,CAAA;;;;"}

package/dist/admin/modules/reducers.mjs

@@ -0,0 +1,9 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import { reducer as reducer$1 } from './app.mjs';
+
+const reducer = combineReducers({
+    app: reducer$1
+});
+
+export { reducer };
+//# sourceMappingURL=reducers.mjs.map

package/dist/admin/modules/reducers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducers.mjs","sources":["../../../admin/src/modules/reducers.ts"],"sourcesContent":["import { combineReducers } from '@reduxjs/toolkit';\n\nimport { reducer as appReducer } from './app';\n\nconst reducer = combineReducers({\n  app: appReducer,\n});\n\ntype State = ReturnType<typeof reducer>;\n\nexport { reducer };\nexport type { State };\n"],"names":["reducer","combineReducers","app","appReducer"],"mappings":";;;AAIA,MAAMA,UAAUC,eAAgB,CAAA;IAC9BC,GAAKC,EAAAA;AACP,CAAA;;;;"}

package/dist/admin/pages/ComponentConfigurationPage.js

@@ -0,0 +1,248 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var strapiAdmin = require('@strapi/admin/strapi-admin');
+var reactIntl = require('react-intl');
+var reactRouterDom = require('react-router-dom');
+var Fields = require('../components/ConfigurationForm/Fields.js');
+var Form = require('../components/ConfigurationForm/Form.js');
+var useContentTypeSchema = require('../hooks/useContentTypeSchema.js');
+var useDocumentLayout = require('../hooks/useDocumentLayout.js');
+var hooks = require('../modules/hooks.js');
+var components = require('../services/components.js');
+var init = require('../services/init.js');
+var objects = require('../utils/objects.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/* -------------------------------------------------------------------------------------------------
+ * ComponentConfigurationPage
+ * -----------------------------------------------------------------------------------------------*/ const ComponentConfigurationPage = ()=>{
+    /**
+   * useDocumentLayout only works for documents, not components,
+   * it feels weird to make that hook work for both when this is SUCH
+   * a unique use case and we only do it here, so in short, we essentially
+   * just extracted the logic to make an edit view layout and reproduced it here.
+   */ const { slug: model } = reactRouterDom.useParams();
+    const { toggleNotification } = strapiAdmin.useNotification();
+    const { formatMessage } = reactIntl.useIntl();
+    const { _unstableFormatAPIError: formatAPIError } = strapiAdmin.useAPIErrorHandler();
+    const { components: components$1, fieldSizes, schema, error: errorSchema, isLoading: isLoadingSchema, isFetching: isFetchingSchema } = init.useGetInitialDataQuery(undefined, {
+        selectFromResult: (res)=>{
+            const schema = res.data?.components.find((ct)=>ct.uid === model);
+            const componentsByKey = res.data?.components.reduce((acc, component)=>{
+                acc[component.uid] = component;
+                return acc;
+            }, {});
+            const components = useContentTypeSchema.extractContentTypeComponents(schema?.attributes, componentsByKey);
+            const fieldSizes = Object.entries(res.data?.fieldSizes ?? {}).reduce((acc, [attributeName, { default: size }])=>{
+                acc[attributeName] = size;
+                return acc;
+            }, {});
+            return {
+                isFetching: res.isFetching,
+                isLoading: res.isLoading,
+                error: res.error,
+                components,
+                schema,
+                fieldSizes
+            };
+        }
+    });
+    React__namespace.useEffect(()=>{
+        if (errorSchema) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(errorSchema)
+            });
+        }
+    }, [
+        errorSchema,
+        formatAPIError,
+        toggleNotification
+    ]);
+    const { data, isLoading: isLoadingConfig, isFetching: isFetchingConfig, error } = components.useGetComponentConfigurationQuery(model ?? '');
+    React__namespace.useEffect(()=>{
+        if (error) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(error)
+            });
+        }
+    }, [
+        error,
+        formatAPIError,
+        toggleNotification
+    ]);
+    /**
+   * you **must** check if we're loading or fetching in case the component gets new props
+   * but nothing was unmounted, it then becomes a fetch, not a load.
+   */ const isLoading = isLoadingConfig || isLoadingSchema || isFetchingConfig || isFetchingSchema;
+    const editLayout = React__namespace.useMemo(()=>data && !isLoading ? formatEditLayout(data, {
+            schema,
+            components: components$1
+        }) : {
+            layout: [],
+            components: {},
+            metadatas: {},
+            options: {},
+            settings: useDocumentLayout.DEFAULT_SETTINGS
+        }, [
+        data,
+        isLoading,
+        schema,
+        components$1
+    ]);
+    const [updateConfiguration] = components.useUpdateComponentConfigurationMutation();
+    const handleSubmit = async (formData)=>{
+        try {
+            /**
+       * We reconstruct the metadatas object by taking the existing list metadatas
+       * and re-merging that by attribute name with the current list metadatas, whilst overwriting
+       * the data from the form we've built.
+       */ const meta = Object.entries(data?.component.metadatas ?? {}).reduce((acc, [name, { edit, list }])=>{
+                const { __temp_key__, size: _size, name: _name, ...editedMetadata } = formData.layout.flatMap((row)=>row.children).find((field)=>field.name === name) ?? {};
+                acc[name] = {
+                    edit: {
+                        ...edit,
+                        ...editedMetadata
+                    },
+                    list
+                };
+                return acc;
+            }, {});
+            const res = await updateConfiguration({
+                layouts: {
+                    edit: formData.layout.map((row)=>row.children.reduce((acc, { name, size })=>{
+                            if (name !== Fields.TEMP_FIELD_NAME) {
+                                return [
+                                    ...acc,
+                                    {
+                                        name,
+                                        size
+                                    }
+                                ];
+                            }
+                            return acc;
+                        }, [])),
+                    list: data?.component.layouts.list
+                },
+                settings: objects.setIn(formData.settings, 'displayName', undefined),
+                metadatas: meta,
+                uid: model
+            });
+            if ('data' in res) {
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'notification.success.saved',
+                        defaultMessage: 'Saved'
+                    })
+                });
+            } else {
+                toggleNotification({
+                    type: 'danger',
+                    message: formatAPIError(res.error)
+                });
+            }
+        } catch  {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
+            });
+        }
+    };
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Loading, {});
+    }
+    if (error || errorSchema || !schema) {
+        return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Error, {});
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Title, {
+                children: `Configure ${editLayout.settings.displayName} Edit View`
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Form.ConfigurationForm, {
+                onSubmit: handleSubmit,
+                attributes: schema.attributes,
+                fieldSizes: fieldSizes,
+                layout: editLayout
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/ const formatEditLayout = (data, { schema, components })=>{
+    const editAttributes = useDocumentLayout.convertEditLayoutToFieldLayouts(data.component.layouts.edit, schema?.attributes, data.component.metadatas, {
+        configurations: data.components,
+        schemas: components
+    });
+    const componentEditAttributes = Object.entries(data.components).reduce((acc, [uid, configuration])=>{
+        acc[uid] = {
+            layout: useDocumentLayout.convertEditLayoutToFieldLayouts(configuration.layouts.edit, components[uid].attributes, configuration.metadatas),
+            settings: {
+                ...configuration.settings,
+                icon: components[uid].info.icon,
+                displayName: components[uid].info.displayName
+            }
+        };
+        return acc;
+    }, {});
+    const editMetadatas = Object.entries(data.component.metadatas).reduce((acc, [attribute, metadata])=>{
+        return {
+            ...acc,
+            [attribute]: metadata.edit
+        };
+    }, {});
+    return {
+        layout: [
+            editAttributes
+        ],
+        components: componentEditAttributes,
+        metadatas: editMetadatas,
+        options: {
+            ...schema?.options,
+            ...schema?.pluginOptions
+        },
+        settings: {
+            ...data.component.settings,
+            displayName: schema?.info.displayName
+        }
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/ const ProtectedComponentConfigurationPage = ()=>{
+    const permissions = hooks.useTypedSelector((state)=>state.admin_app.permissions.contentManager?.componentsConfigurations);
+    return /*#__PURE__*/ jsxRuntime.jsx(strapiAdmin.Page.Protect, {
+        permissions: permissions,
+        children: /*#__PURE__*/ jsxRuntime.jsx(ComponentConfigurationPage, {})
+    });
+};
+
+exports.ComponentConfigurationPage = ComponentConfigurationPage;
+exports.ProtectedComponentConfigurationPage = ProtectedComponentConfigurationPage;
+//# sourceMappingURL=ComponentConfigurationPage.js.map

package/dist/admin/pages/ComponentConfigurationPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentConfigurationPage.js","sources":["../../../admin/src/pages/ComponentConfigurationPage.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Page, useNotification, useAPIErrorHandler } from '@strapi/admin/strapi-admin';\nimport { useIntl } from 'react-intl';\nimport { useParams } from 'react-router-dom';\n\nimport { TEMP_FIELD_NAME } from '../components/ConfigurationForm/Fields';\nimport { ConfigurationForm, ConfigurationFormProps } from '../components/ConfigurationForm/Form';\nimport { ComponentsDictionary, extractContentTypeComponents } from '../hooks/useContentTypeSchema';\nimport {\n  DEFAULT_SETTINGS,\n  EditLayout,\n  convertEditLayoutToFieldLayouts,\n} from '../hooks/useDocumentLayout';\nimport { useTypedSelector } from '../modules/hooks';\nimport {\n  useGetComponentConfigurationQuery,\n  useUpdateComponentConfigurationMutation,\n} from '../services/components';\nimport { useGetInitialDataQuery } from '../services/init';\nimport { setIn } from '../utils/objects';\n\nimport type { Component, FindComponentConfiguration } from '../../../shared/contracts/components';\nimport type { Metadatas } from '../../../shared/contracts/content-types';\n\n/* -------------------------------------------------------------------------------------------------\n * ComponentConfigurationPage\n * -----------------------------------------------------------------------------------------------*/\n\nconst ComponentConfigurationPage = () => {\n  /**\n   * useDocumentLayout only works for documents, not components,\n   * it feels weird to make that hook work for both when this is SUCH\n   * a unique use case and we only do it here, so in short, we essentially\n   * just extracted the logic to make an edit view layout and reproduced it here.\n   */\n  const { slug: model } = useParams<{ slug: string }>();\n  const { toggleNotification } = useNotification();\n  const { formatMessage } = useIntl();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  const {\n    components,\n    fieldSizes,\n    schema,\n    error: errorSchema,\n    isLoading: isLoadingSchema,\n    isFetching: isFetchingSchema,\n  } = useGetInitialDataQuery(undefined, {\n    selectFromResult: (res) => {\n      const schema = res.data?.components.find((ct) => ct.uid === model);\n\n      const componentsByKey = res.data?.components.reduce<ComponentsDictionary>(\n        (acc, component) => {\n          acc[component.uid] = component;\n\n          return acc;\n        },\n        {}\n      );\n\n      const components = extractContentTypeComponents(schema?.attributes, componentsByKey);\n\n      const fieldSizes = Object.entries(res.data?.fieldSizes ?? {}).reduce<\n        ConfigurationFormProps['fieldSizes']\n      >((acc, [attributeName, { default: size }]) => {\n        acc[attributeName] = size;\n\n        return acc;\n      }, {});\n\n      return {\n        isFetching: res.isFetching,\n        isLoading: res.isLoading,\n        error: res.error,\n        components,\n        schema,\n        fieldSizes,\n      };\n    },\n  });\n\n  React.useEffect(() => {\n    if (errorSchema) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(errorSchema),\n      });\n    }\n  }, [errorSchema, formatAPIError, toggleNotification]);\n\n  const {\n    data,\n    isLoading: isLoadingConfig,\n    isFetching: isFetchingConfig,\n    error,\n  } = useGetComponentConfigurationQuery(model ?? '');\n\n  React.useEffect(() => {\n    if (error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    }\n  }, [error, formatAPIError, toggleNotification]);\n\n  /**\n   * you **must** check if we're loading or fetching in case the component gets new props\n   * but nothing was unmounted, it then becomes a fetch, not a load.\n   */\n  const isLoading = isLoadingConfig || isLoadingSchema || isFetchingConfig || isFetchingSchema;\n\n  const editLayout = React.useMemo(\n    () =>\n      data && !isLoading\n        ? formatEditLayout(data, { schema, components })\n        : ({\n            layout: [],\n            components: {},\n            metadatas: {},\n            options: {},\n            settings: DEFAULT_SETTINGS,\n          } as EditLayout),\n    [data, isLoading, schema, components]\n  );\n\n  const [updateConfiguration] = useUpdateComponentConfigurationMutation();\n  const handleSubmit: ConfigurationFormProps['onSubmit'] = async (formData) => {\n    try {\n      /**\n       * We reconstruct the metadatas object by taking the existing list metadatas\n       * and re-merging that by attribute name with the current list metadatas, whilst overwriting\n       * the data from the form we've built.\n       */\n      const meta = Object.entries(data?.component.metadatas ?? {}).reduce<Metadatas>(\n        (acc, [name, { edit, list }]) => {\n          const {\n            __temp_key__,\n            size: _size,\n            name: _name,\n            ...editedMetadata\n          } = formData.layout.flatMap((row) => row.children).find((field) => field.name === name) ??\n          {};\n\n          acc[name] = {\n            edit: {\n              ...edit,\n              ...editedMetadata,\n            },\n            list,\n          };\n\n          return acc;\n        },\n        {}\n      );\n\n      const res = await updateConfiguration({\n        layouts: {\n          edit: formData.layout.map((row) =>\n            row.children.reduce<Array<{ name: string; size: number }>>((acc, { name, size }) => {\n              if (name !== TEMP_FIELD_NAME) {\n                return [...acc, { name, size }];\n              }\n\n              return acc;\n            }, [])\n          ),\n          list: data?.component.layouts.list,\n        },\n        settings: setIn(formData.settings, 'displayName', undefined),\n        metadatas: meta,\n        uid: model,\n      });\n\n      if ('data' in res) {\n        toggleNotification({\n          type: 'success',\n          message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),\n        });\n      } else {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n      }\n    } catch {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),\n      });\n    }\n  };\n\n  if (isLoading) {\n    return <Page.Loading />;\n  }\n\n  if (error || errorSchema || !schema) {\n    return <Page.Error />;\n  }\n\n  return (\n    <>\n      <Page.Title>{`Configure ${editLayout.settings.displayName} Edit View`}</Page.Title>\n      <ConfigurationForm\n        onSubmit={handleSubmit}\n        attributes={schema.attributes}\n        fieldSizes={fieldSizes}\n        layout={editLayout}\n      />\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\nconst formatEditLayout = (\n  data: FindComponentConfiguration.Response['data'],\n  { schema, components }: { schema?: Component; components: ComponentsDictionary }\n) => {\n  const editAttributes = convertEditLayoutToFieldLayouts(\n    data.component.layouts.edit,\n    schema?.attributes,\n    data.component.metadatas,\n    { configurations: data.components, schemas: components }\n  );\n\n  const componentEditAttributes = Object.entries(data.components).reduce<EditLayout['components']>(\n    (acc, [uid, configuration]) => {\n      acc[uid] = {\n        layout: convertEditLayoutToFieldLayouts(\n          configuration.layouts.edit,\n          components[uid].attributes,\n          configuration.metadatas\n        ),\n        settings: {\n          ...configuration.settings,\n          icon: components[uid].info.icon,\n          displayName: components[uid].info.displayName,\n        },\n      };\n      return acc;\n    },\n    {}\n  );\n\n  const editMetadatas = Object.entries(data.component.metadatas).reduce<EditLayout['metadatas']>(\n    (acc, [attribute, metadata]) => {\n      return {\n        ...acc,\n        [attribute]: metadata.edit,\n      };\n    },\n    {}\n  );\n\n  return {\n    layout: [editAttributes],\n    components: componentEditAttributes,\n    metadatas: editMetadatas,\n    options: {\n      ...schema?.options,\n      ...schema?.pluginOptions,\n    },\n    settings: {\n      ...data.component.settings,\n      displayName: schema?.info.displayName,\n    },\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Header\n * -----------------------------------------------------------------------------------------------*/\n\nconst ProtectedComponentConfigurationPage = () => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.contentManager?.componentsConfigurations\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ComponentConfigurationPage />\n    </Page.Protect>\n  );\n};\n\nexport { ComponentConfigurationPage, ProtectedComponentConfigurationPage };\n"],"names":["ComponentConfigurationPage","slug","model","useParams","toggleNotification","useNotification","formatMessage","useIntl","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","components","fieldSizes","schema","error","errorSchema","isLoading","isLoadingSchema","isFetching","isFetchingSchema","useGetInitialDataQuery","undefined","selectFromResult","res","data","find","ct","uid","componentsByKey","reduce","acc","component","extractContentTypeComponents","attributes","Object","entries","attributeName","default","size","React","useEffect","type","message","isLoadingConfig","isFetchingConfig","useGetComponentConfigurationQuery","editLayout","useMemo","formatEditLayout","layout","metadatas","options","settings","DEFAULT_SETTINGS","updateConfiguration","useUpdateComponentConfigurationMutation","handleSubmit","formData","meta","name","edit","list","__temp_key__","_size","_name","editedMetadata","flatMap","row","children","field","layouts","map","TEMP_FIELD_NAME","setIn","id","defaultMessage","_jsx","Page","Loading","Error","_jsxs","_Fragment","Title","displayName","ConfigurationForm","onSubmit","editAttributes","convertEditLayoutToFieldLayouts","configurations","schemas","componentEditAttributes","configuration","icon","info","editMetadatas","attribute","metadata","pluginOptions","ProtectedComponentConfigurationPage","permissions","useTypedSelector","state","admin_app","contentManager","componentsConfigurations","Protect"],"mappings":"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"}

package/dist/admin/pages/ComponentConfigurationPage.mjs

@@ -0,0 +1,226 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useNotification, useAPIErrorHandler, Page } from '@strapi/admin/strapi-admin';
+import { useIntl } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import { TEMP_FIELD_NAME } from '../components/ConfigurationForm/Fields.mjs';
+import { ConfigurationForm } from '../components/ConfigurationForm/Form.mjs';
+import { extractContentTypeComponents } from '../hooks/useContentTypeSchema.mjs';
+import { DEFAULT_SETTINGS, convertEditLayoutToFieldLayouts } from '../hooks/useDocumentLayout.mjs';
+import { useTypedSelector } from '../modules/hooks.mjs';
+import { useGetComponentConfigurationQuery, useUpdateComponentConfigurationMutation } from '../services/components.mjs';
+import { useGetInitialDataQuery } from '../services/init.mjs';
+import { setIn } from '../utils/objects.mjs';
+
+/* -------------------------------------------------------------------------------------------------
+ * ComponentConfigurationPage
+ * -----------------------------------------------------------------------------------------------*/ const ComponentConfigurationPage = ()=>{
+    /**
+   * useDocumentLayout only works for documents, not components,
+   * it feels weird to make that hook work for both when this is SUCH
+   * a unique use case and we only do it here, so in short, we essentially
+   * just extracted the logic to make an edit view layout and reproduced it here.
+   */ const { slug: model } = useParams();
+    const { toggleNotification } = useNotification();
+    const { formatMessage } = useIntl();
+    const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+    const { components, fieldSizes, schema, error: errorSchema, isLoading: isLoadingSchema, isFetching: isFetchingSchema } = useGetInitialDataQuery(undefined, {
+        selectFromResult: (res)=>{
+            const schema = res.data?.components.find((ct)=>ct.uid === model);
+            const componentsByKey = res.data?.components.reduce((acc, component)=>{
+                acc[component.uid] = component;
+                return acc;
+            }, {});
+            const components = extractContentTypeComponents(schema?.attributes, componentsByKey);
+            const fieldSizes = Object.entries(res.data?.fieldSizes ?? {}).reduce((acc, [attributeName, { default: size }])=>{
+                acc[attributeName] = size;
+                return acc;
+            }, {});
+            return {
+                isFetching: res.isFetching,
+                isLoading: res.isLoading,
+                error: res.error,
+                components,
+                schema,
+                fieldSizes
+            };
+        }
+    });
+    React.useEffect(()=>{
+        if (errorSchema) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(errorSchema)
+            });
+        }
+    }, [
+        errorSchema,
+        formatAPIError,
+        toggleNotification
+    ]);
+    const { data, isLoading: isLoadingConfig, isFetching: isFetchingConfig, error } = useGetComponentConfigurationQuery(model ?? '');
+    React.useEffect(()=>{
+        if (error) {
+            toggleNotification({
+                type: 'danger',
+                message: formatAPIError(error)
+            });
+        }
+    }, [
+        error,
+        formatAPIError,
+        toggleNotification
+    ]);
+    /**
+   * you **must** check if we're loading or fetching in case the component gets new props
+   * but nothing was unmounted, it then becomes a fetch, not a load.
+   */ const isLoading = isLoadingConfig || isLoadingSchema || isFetchingConfig || isFetchingSchema;
+    const editLayout = React.useMemo(()=>data && !isLoading ? formatEditLayout(data, {
+            schema,
+            components
+        }) : {
+            layout: [],
+            components: {},
+            metadatas: {},
+            options: {},
+            settings: DEFAULT_SETTINGS
+        }, [
+        data,
+        isLoading,
+        schema,
+        components
+    ]);
+    const [updateConfiguration] = useUpdateComponentConfigurationMutation();
+    const handleSubmit = async (formData)=>{
+        try {
+            /**
+       * We reconstruct the metadatas object by taking the existing list metadatas
+       * and re-merging that by attribute name with the current list metadatas, whilst overwriting
+       * the data from the form we've built.
+       */ const meta = Object.entries(data?.component.metadatas ?? {}).reduce((acc, [name, { edit, list }])=>{
+                const { __temp_key__, size: _size, name: _name, ...editedMetadata } = formData.layout.flatMap((row)=>row.children).find((field)=>field.name === name) ?? {};
+                acc[name] = {
+                    edit: {
+                        ...edit,
+                        ...editedMetadata
+                    },
+                    list
+                };
+                return acc;
+            }, {});
+            const res = await updateConfiguration({
+                layouts: {
+                    edit: formData.layout.map((row)=>row.children.reduce((acc, { name, size })=>{
+                            if (name !== TEMP_FIELD_NAME) {
+                                return [
+                                    ...acc,
+                                    {
+                                        name,
+                                        size
+                                    }
+                                ];
+                            }
+                            return acc;
+                        }, [])),
+                    list: data?.component.layouts.list
+                },
+                settings: setIn(formData.settings, 'displayName', undefined),
+                metadatas: meta,
+                uid: model
+            });
+            if ('data' in res) {
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'notification.success.saved',
+                        defaultMessage: 'Saved'
+                    })
+                });
+            } else {
+                toggleNotification({
+                    type: 'danger',
+                    message: formatAPIError(res.error)
+                });
+            }
+        } catch  {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occurred'
+                })
+            });
+        }
+    };
+    if (isLoading) {
+        return /*#__PURE__*/ jsx(Page.Loading, {});
+    }
+    if (error || errorSchema || !schema) {
+        return /*#__PURE__*/ jsx(Page.Error, {});
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Page.Title, {
+                children: `Configure ${editLayout.settings.displayName} Edit View`
+            }),
+            /*#__PURE__*/ jsx(ConfigurationForm, {
+                onSubmit: handleSubmit,
+                attributes: schema.attributes,
+                fieldSizes: fieldSizes,
+                layout: editLayout
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/ const formatEditLayout = (data, { schema, components })=>{
+    const editAttributes = convertEditLayoutToFieldLayouts(data.component.layouts.edit, schema?.attributes, data.component.metadatas, {
+        configurations: data.components,
+        schemas: components
+    });
+    const componentEditAttributes = Object.entries(data.components).reduce((acc, [uid, configuration])=>{
+        acc[uid] = {
+            layout: convertEditLayoutToFieldLayouts(configuration.layouts.edit, components[uid].attributes, configuration.metadatas),
+            settings: {
+                ...configuration.settings,
+                icon: components[uid].info.icon,
+                displayName: components[uid].info.displayName
+            }
+        };
+        return acc;
+    }, {});
+    const editMetadatas = Object.entries(data.component.metadatas).reduce((acc, [attribute, metadata])=>{
+        return {
+            ...acc,
+            [attribute]: metadata.edit
+        };
+    }, {});
+    return {
+        layout: [
+            editAttributes
+        ],
+        components: componentEditAttributes,
+        metadatas: editMetadatas,
+        options: {
+            ...schema?.options,
+            ...schema?.pluginOptions
+        },
+        settings: {
+            ...data.component.settings,
+            displayName: schema?.info.displayName
+        }
+    };
+};
+/* -------------------------------------------------------------------------------------------------
+ * Header
+ * -----------------------------------------------------------------------------------------------*/ const ProtectedComponentConfigurationPage = ()=>{
+    const permissions = useTypedSelector((state)=>state.admin_app.permissions.contentManager?.componentsConfigurations);
+    return /*#__PURE__*/ jsx(Page.Protect, {
+        permissions: permissions,
+        children: /*#__PURE__*/ jsx(ComponentConfigurationPage, {})
+    });
+};
+
+export { ComponentConfigurationPage, ProtectedComponentConfigurationPage };
+//# sourceMappingURL=ComponentConfigurationPage.mjs.map