strapi-plugin-navigation 2.1.0 → 2.2.0

package/README.md

@@ -155,25 +155,38 @@ Config for this plugin is stored as a part of the `config/plugins.js` or `config
         navigation: {
             enabled: true,
             config: {
-                additionalFields: ['audience'],
+                additionalFields: ['audience', { name: 'my_custom_field', type: 'boolean', label: 'My custom field' }],
                 contentTypes: ['api::page.page'],
                 contentTypesNameFields: {
                     'api::page.page': ['title']
                 },
                 allowedLevels: 2,
                 gql: {...},
+                slugify: {
+                  customReplacements: [
+                    ["🤔", "thinking"],
+                  ],
+                }
             }
         }
     });
 ```
 
 ### Properties
-- `additionalFields` - Additional fields: 'audience', more in the future
+- `additionalFields` - Additional fields for navigation items. More **[ here ](#additional-fields)**
 - `allowedLevels` - Maximum level for which you're able to mark item as "Menu attached"
 - `contentTypes` - UIDs of related content types
 - `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 - `i18nEnabled` - should you want to manage multi-locale content via navigation set this value `Enabled`. More **[ here ](#i18n-internationalization)**
+- `slugify` - allows to extend configuration of our "slugging" solution of choice. To learn more visit the [documentation](https://github.com/sindresorhus/slugify#api). It can be left unset since it's optional. **This option can only be handled by configuration in config file**.
+
+### Properties
+
+### Additional Fields
+It is advised to configure additional fields through the plugin's Settings Page. There you can find the table of custom fields and toggle input for the audience field. When enabled, the audience field can be customized through the content manager. Custom fields can be added, edited, toggled, and removed with the use of the table provided on the Settings Page. When removing custom fields be advised that their values in navigation items will be lost. Disabling the custom fields will not affect the data and can be done with no consequence of loosing information. 
+
+Creating configuration for additional fields with the `config.js` file should be done with caution. Config object contains the `additionalFields` property of type `Array<CustomField | 'audience'>`, where CustomField is of type `{type: 'string' | 'boolean', name: string, label: string}`. When creating custom fields be advised that the `name` property has to be unique. When editing a custom field it is advised not to edit its `name` and `type` properties. After config has been restored the custom fields that are not present in `config.js` file will be deleted and their values in navigation items will be lost.
 
 ## 🔧 GQL Configuration
 Using navigation with GraphQL requires both plugins to be installed and working. You can find installation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
@@ -579,11 +592,8 @@ query {
         "title": "Another page",
         "path": "/another",
         "related": {
-          "id": 2,
-          "attributes": {
-            "__typename": "Page",
-            "Title": "dfdfdf"
-          }
+          "__typename": "Page",
+          "Title": "Eg. Page title"
         },
         "items": []
       }

package/admin/src/components/AdditionalFieldInput/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { AdditionalFieldInputProps } from './types';
+declare const AdditionalFieldInput: React.FC<AdditionalFieldInputProps>;
+export default AdditionalFieldInput;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/components/AdditionalFieldInput/index.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../../../types");
+const ToggleInput_1 = require("@strapi/design-system/ToggleInput");
+const TextInput_1 = require("@strapi/design-system/TextInput");
+const Select_1 = require("@strapi/design-system/Select");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const translations_1 = require("../../translations");
+const lodash_1 = require("lodash");
+const react_intl_1 = require("react-intl");
+const DEFAULT_STRING_VALUE = "";
+const handlerFactory = ({ field, prop, onChange }) => ({ target }) => {
+    onChange(field.name, target[prop]);
+};
+const AdditionalFieldInput = ({ field, isLoading, onChange, value, error }) => {
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    const defaultInputProps = (0, react_1.useMemo)(() => ({
+        id: field.name,
+        name: field.name,
+        label: field.label,
+        disabled: isLoading,
+        error: error && formatMessage(error),
+    }), [field, isLoading, error]);
+    const handleBoolean = (0, react_1.useMemo)(() => handlerFactory({ field, onChange, prop: "checked" }), [onChange, field]);
+    const handleString = (0, react_1.useMemo)(() => handlerFactory({ field, onChange, prop: "value" }), [onChange, field]);
+    switch (field.type) {
+        case 'boolean':
+            if (!(0, lodash_1.isNil)(value))
+                (0, types_1.assertBoolean)(value);
+            return (react_1.default.createElement(ToggleInput_1.ToggleInput, { ...defaultInputProps, checked: !!value, onChange: handleBoolean, onLabel: "true", offLabel: "false" }));
+        case 'string':
+            if (!(0, lodash_1.isNil)(value))
+                (0, types_1.assertString)(value);
+            return (react_1.default.createElement(TextInput_1.TextInput, { ...defaultInputProps, onChange: handleString, value: value || DEFAULT_STRING_VALUE }));
+        case 'select':
+            return (react_1.default.createElement(Select_1.Select, { ...defaultInputProps, onChange: (v) => onChange(field.name, v), value: (0, lodash_1.isNil)(value) ? field.multi ? [] : null : value, multi: field.multi, withTags: field.multi }, field.options.map((option, index) => (react_1.default.createElement(Select_1.Option, { key: `${field.name}-option-${index}`, value: option }, option)))));
+        default:
+            toggleNotification({
+                type: 'warning',
+                message: (0, translations_1.getTrad)('notification.error.customField.type'),
+            });
+            throw new Error(`Type of custom field is unsupported`);
+    }
+};
+exports.default = AdditionalFieldInput;
+//# sourceMappingURL=index.js.map

package/admin/src/components/AdditionalFieldInput/types.d.ts

@@ -0,0 +1,14 @@
+import { MessageDescriptor } from "react-intl";
+import { NavigationItemCustomField } from "../../../../types";
+export declare type AdditionalFieldInputProps = {
+    field: NavigationItemCustomField;
+    isLoading: boolean;
+    onChange: (name: string, value: string) => void;
+    value: string | boolean | string[] | null;
+    error: MessageDescriptor | null;
+};
+export declare type TargetProp = "value" | "checked";
+export declare type Input = {
+    prop: TargetProp;
+} & Pick<AdditionalFieldInputProps, "onChange" | "field">;
+//# sourceMappingURL=types.d.ts.map

package/admin/src/components/AdditionalFieldInput/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/admin/src/components/Item/index.js

@@ -37,7 +37,6 @@ const Link_1 = require("@strapi/design-system/Link");
 const TextButton_1 = require("@strapi/design-system/TextButton");
 const Typography_1 = require("@strapi/design-system/Typography");
 const icons_1 = require("@strapi/icons");
-const enums_1 = require("../../pages/View/utils/enums");
 const ItemCardHeader_1 = __importDefault(require("./ItemCardHeader"));
 const NavigationItemList_1 = __importDefault(require("../NavigationItemList"));
 const Wrapper_1 = __importDefault(require("./Wrapper"));
@@ -50,8 +49,8 @@ const Item = (props) => {
     const { item, isLast = false, level = 0, levelPath = '', allowedLevels, relatedRef, isParentAttachedToMenu, onItemLevelAdd, onItemRemove, onItemRestore, onItemEdit, onItemReOrder, onItemToggleCollapse, error, displayChildren, config = {}, } = props;
     const { viewId, title, type, path, removed, externalPath, menuAttached, collapsed, structureId, items = [], } = item;
     const { contentTypes = [], contentTypesNameFields } = config;
-    const isExternal = type === enums_1.navigationItemType.EXTERNAL;
-    const isWrapper = type === enums_1.navigationItemType.WRAPPER;
+    const isExternal = type === utils_1.navigationItemType.EXTERNAL;
+    const isWrapper = type === utils_1.navigationItemType.WRAPPER;
     const isHandledByPublishFlow = contentTypes.find(_ => _.uid === relatedRef?.__collectionUid)?.draftAndPublish;
     const isPublished = isHandledByPublishFlow && relatedRef.publishedAt;
     const isNextMenuAllowedLevel = (0, lodash_1.isNumber)(allowedLevels) ? level < (allowedLevels - 1) : true;

package/admin/src/components/RestartAlert/index.d.ts

@@ -1,3 +1,3 @@
-declare var _default: any;
+declare const _default: any;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/admin/src/components/TextArrayInput/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Effect } from '../../../../types';
+interface IProps {
+    onChange: Effect<string[]>;
+    initialValue?: string[];
+    id?: string;
+    name?: string;
+    label?: string;
+    disabled?: boolean;
+    error?: string | string[];
+}
+declare const TextArrayInput: React.FC<IProps>;
+export default TextArrayInput;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/components/TextArrayInput/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const TextInput_1 = require("@strapi/design-system/TextInput");
+const lodash_1 = require("lodash");
+const TextArrayInput = ({ onChange, initialValue, ...props }) => {
+    const [value, setValue] = (0, react_1.useState)((0, lodash_1.isArray)(initialValue)
+        ? initialValue.reduce((acc, cur) => `${acc}${cur}; `, "")
+        : "");
+    const handleOnChange = ({ target: { value } }) => {
+        const newValue = value;
+        const valuesArray = newValue
+            .split(';')
+            .map(v => v.trim())
+            .filter(v => !!v.length);
+        setValue(value);
+        onChange(valuesArray);
+    };
+    return (react_1.default.createElement(TextInput_1.TextInput, { ...props, onChange: handleOnChange, value: value }));
+};
+exports.default = TextArrayInput;
+//# sourceMappingURL=index.js.map

package/admin/src/hooks/useAllContentTypes.d.ts

@@ -1,6 +1,3 @@
+declare const useAllContentTypes: () => Pick<any, "data" | "isLoading" | "error">;
 export default useAllContentTypes;
-declare function useAllContentTypes(): {
-    data: any;
-    isLoading: any;
-};
 //# sourceMappingURL=useAllContentTypes.d.ts.map

package/admin/src/hooks/useAllContentTypes.js

@@ -1,12 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_query_1 = require("react-query");
-const helper_plugin_1 = require("@strapi/helper-plugin");
-const api_1 = require("../utils/api");
-const useAllContentTypes = () => {
-    const toggleNotification = (0, helper_plugin_1.useNotification)();
-    const { isLoading, data } = (0, react_query_1.useQuery)('contentTypes', () => (0, api_1.fetchAllContentTypes)(toggleNotification));
-    return { data, isLoading, };
-};
+const lodash_1 = require("lodash");
+const utils_1 = require("../utils");
+const useAllContentTypes = () => (0, lodash_1.pick)((0, react_query_1.useQuery)('contentTypes', () => (0, utils_1.fetchAllContentTypes)()), ["data", "isLoading", "error"]);
 exports.default = useAllContentTypes;
 //# sourceMappingURL=useAllContentTypes.js.map

package/admin/src/hooks/useNavigationConfig.d.ts

@@ -2,7 +2,7 @@ export default useNavigationConfig;
 declare function useNavigationConfig(): {
     data: any;
     isLoading: any;
-    err: any;
+    error: any;
     submitMutation: (...args: any[]) => Promise<void>;
     restoreMutation: (...args: any[]) => Promise<void>;
     restartMutation: (...args: any[]) => Promise<void>;

package/admin/src/hooks/useNavigationConfig.js

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_query_1 = require("react-query");
 const helper_plugin_1 = require("@strapi/helper-plugin");
-const api_1 = require("../utils/api");
+const utils_1 = require("../utils");
 const translations_1 = require("../translations");
 const useNavigationConfig = () => {
     const queryClient = (0, react_query_1.useQueryClient)();
     const toggleNotification = (0, helper_plugin_1.useNotification)();
-    const { isLoading, data, err } = (0, react_query_1.useQuery)('navigationConfig', () => (0, api_1.fetchNavigationConfig)(toggleNotification));
+    const { isLoading, data, error } = (0, react_query_1.useQuery)('navigationConfig', () => (0, utils_1.fetchNavigationConfig)(toggleNotification));
     const handleError = (type) => {
         toggleNotification({
             type: 'warning',
@@ -23,7 +23,7 @@ const useNavigationConfig = () => {
     };
     const submitMutation = async (...args) => {
         try {
-            await (0, api_1.updateNavigationConfig)(...args);
+            await (0, utils_1.updateNavigationConfig)(...args);
             await handleSuccess('submit');
         }
         catch (e) {
@@ -32,7 +32,7 @@ const useNavigationConfig = () => {
     };
     const restoreMutation = async (...args) => {
         try {
-            await (0, api_1.restoreNavigationConfig)(...args);
+            await (0, utils_1.restoreNavigationConfig)(...args);
             await handleSuccess('restore');
         }
         catch (e) {
@@ -41,14 +41,14 @@ const useNavigationConfig = () => {
     };
     const restartMutation = async (...args) => {
         try {
-            await (0, api_1.restartStrapi)(...args);
+            await (0, utils_1.restartStrapi)(...args);
             await handleSuccess('restart');
         }
         catch (e) {
             handleError('restart');
         }
     };
-    return { data, isLoading, err, submitMutation, restoreMutation, restartMutation };
+    return { data, isLoading, error, submitMutation, restoreMutation, restartMutation };
 };
 exports.default = useNavigationConfig;
 //# sourceMappingURL=useNavigationConfig.js.map

package/admin/src/pages/DataManagerProvider/index.d.ts

@@ -1,4 +1,4 @@
-declare var _default: React.MemoExoticComponent<{
+declare const _default: React.MemoExoticComponent<{
     ({ children }: {
         children: any;
     }): JSX.Element;

package/admin/src/pages/DataManagerProvider/index.js

@@ -33,9 +33,9 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = require("lodash");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const DataManagerContext_1 = __importDefault(require("../../contexts/DataManagerContext"));
-const getTrad_1 = __importDefault(require("../../utils/getTrad"));
 const pluginId_1 = __importDefault(require("../../pluginId"));
 const init_1 = __importDefault(require("./init"));
+const translations_1 = require("../../translations");
 const reducer_1 = __importStar(require("./reducer"));
 const actions_1 = require("./actions");
 const parsers_1 = require("../View/utils/parsers");
@@ -87,7 +87,7 @@ const DataManagerProvider = ({ children }) => {
             console.error({ err });
             toggleNotification({
                 type: 'warning',
-                message: { id: (0, getTrad_1.default)('notification.error') },
+                message: (0, translations_1.getTrad)('notification.error'),
             });
         }
     };
@@ -123,7 +123,7 @@ const DataManagerProvider = ({ children }) => {
             console.error({ err });
             toggleNotification({
                 type: 'warning',
-                message: { id: (0, getTrad_1.default)('notification.error') },
+                message: (0, translations_1.getTrad)('notification.error'),
             });
         }
     };
@@ -139,7 +139,7 @@ const DataManagerProvider = ({ children }) => {
         if (!autoReload) {
             toggleNotification({
                 type: 'info',
-                message: { id: (0, getTrad_1.default)('notification.info.autoreaload-disable') },
+                message: { id: 'notification.info.autoreaload-disable' },
             });
         }
     }, [autoReload]);
@@ -259,7 +259,7 @@ const DataManagerProvider = ({ children }) => {
             });
             toggleNotification({
                 type: 'success',
-                message: { id: (0, getTrad_1.default)('notification.navigation.submit') },
+                message: (0, translations_1.getTrad)('notification.navigation.submit'),
             });
         }
         catch (err) {
@@ -272,24 +272,22 @@ const DataManagerProvider = ({ children }) => {
                 return toggleNotification({
                     type: 'warning',
                     message: {
-                        id: formatMessage((0, getTrad_1.default)('notification.navigation.error'), { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') })
+                        id: formatMessage((0, translations_1.getTrad)('notification.navigation.error'), { ...err.response.payload.data, errorTitles: err.response.payload.data.errorTitles.join(' and ') })
                     },
                 });
             }
             toggleNotification({
                 type: 'warning',
-                message: { id: (0, getTrad_1.default)('notification.error') },
+                message: (0, translations_1.getTrad)('notification.error'),
             });
         }
     };
-    const handleNavigationsDeletion = async (ids) => Promise.all(ids.map((id) => handleNavigationDeletion(id)));
+    const handleNavigationsDeletion = (ids) => Promise.all(ids.map(handleNavigationDeletion));
     const handleNavigationDeletion = (id) => (0, helper_plugin_1.request)(`/${pluginId_1.default}/${id}`, {
         method: "DELETE",
         signal,
     });
-    const hardReset = () => {
-        return getDataRef.current();
-    };
+    const hardReset = () => getDataRef.current();
     return (react_1.default.createElement(DataManagerContext_1.default.Provider, { value: {
             items: passedActiveItems,
             activeItem,

package/admin/src/pages/SettingsPage/components/CustomFieldForm/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Effect, NavigationItemCustomField, VoidEffect } from '../../../../../../types';
+interface ICustomFieldFormProps {
+    customField: Partial<NavigationItemCustomField>;
+    isEditForm: boolean;
+    onSubmit: Effect<NavigationItemCustomField>;
+    onClose: VoidEffect;
+    usedCustomFieldNames: string[];
+}
+declare const CustomFieldForm: React.FC<ICustomFieldFormProps>;
+export default CustomFieldForm;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/SettingsPage/components/CustomFieldForm/index.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const Button_1 = require("@strapi/design-system/Button");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Grid_1 = require("@strapi/design-system/Grid");
+const formik_1 = require("formik");
+const formDefinition = __importStar(require("../../utils/form"));
+const utils_1 = require("../../../../utils");
+const lodash_1 = require("lodash");
+const translations_1 = require("../../../../translations");
+const TextArrayInput_1 = __importDefault(require("../../../../components/TextArrayInput"));
+const tradPrefix = 'pages.settings.form.customFields.popup.';
+const customFieldsTypes = ["string", "boolean", "select"];
+const prepareSelectOptions = (options) => options.map((option, index) => ({
+    key: index,
+    metadatas: {
+        intlLabel: {
+            id: option,
+            defaultMessage: option,
+        }
+    },
+    value: option,
+    label: option,
+}));
+const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, usedCustomFieldNames }) => {
+    const typeSelectOptions = prepareSelectOptions(customFieldsTypes);
+    const initialValues = (0, react_1.useMemo)(() => {
+        if ((0, lodash_1.isNil)(customField.type)) {
+            return formDefinition.defaultValues;
+        }
+        else if (customField.type === 'select') {
+            return {
+                type: customField.type,
+                name: customField.name || formDefinition.defaultValues.name,
+                label: customField.label || formDefinition.defaultValues.label,
+                required: customField.required || formDefinition.defaultValues.required,
+                options: customField.options || formDefinition.defaultValues.options,
+                multi: customField.multi || formDefinition.defaultValues.multi,
+            };
+        }
+        else {
+            return {
+                type: customField.type,
+                name: customField.name || formDefinition.defaultValues.name,
+                label: customField.label || formDefinition.defaultValues.label,
+                required: customField.required || formDefinition.defaultValues.required,
+                options: [],
+                multi: false,
+            };
+        }
+    }, [customField]);
+    const { handleChange, setFieldValue, values, errors, handleSubmit, isSubmitting, } = (0, formik_1.useFormik)({
+        initialValues,
+        onSubmit,
+        validationSchema: formDefinition.schemaFactory(usedCustomFieldNames),
+        validateOnChange: false,
+    });
+    const defaultProps = (0, react_1.useCallback)((fieldName) => ({
+        intlLabel: (0, translations_1.getTrad)(`${tradPrefix}${fieldName}.label`),
+        onChange: handleChange,
+        name: fieldName,
+        value: values[fieldName],
+        error: errors[fieldName],
+    }), [values, errors, handleChange]);
+    return (react_1.default.createElement("form", null,
+        react_1.default.createElement(ModalLayout_1.ModalBody, null,
+            react_1.default.createElement(Grid_1.Grid, { gap: 5 },
+                react_1.default.createElement(Grid_1.GridItem, { key: "name", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("name"), autoFocused: true, placeholder: (0, translations_1.getTrad)(`${tradPrefix}name.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}name.description`), type: "text", disabled: isEditForm })),
+                react_1.default.createElement(Grid_1.GridItem, { key: "label", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("label"), placeholder: (0, translations_1.getTrad)(`${tradPrefix}label.placeholder`), description: (0, translations_1.getTrad)(`${tradPrefix}label.description`), type: "text" })),
+                react_1.default.createElement(Grid_1.GridItem, { key: "type", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("type"), options: typeSelectOptions, type: "select", disabled: isEditForm })),
+                values.type === 'select' && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Grid_1.GridItem, { key: "multi", col: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("multi"), type: "bool" })),
+                    react_1.default.createElement(Grid_1.GridItem, { key: "options", col: 12 },
+                        react_1.default.createElement(TextArrayInput_1.default, { ...defaultProps("options"), onChange: v => setFieldValue("options", v), label: (0, utils_1.getMessage)(`${tradPrefix}options.label`), initialValue: values.options })))),
+                react_1.default.createElement(Grid_1.GridItem, { key: "required", col: 12 },
+                    react_1.default.createElement(helper_plugin_1.GenericInput, { ...defaultProps("required"), type: "bool", description: (0, translations_1.getTrad)(`${tradPrefix}required.description`) })))),
+        react_1.default.createElement(ModalLayout_1.ModalFooter, { startActions: react_1.default.createElement(Button_1.Button, { onClick: onClose, variant: "tertiary" }, (0, utils_1.getMessage)('popup.item.form.button.cancel')), endActions: react_1.default.createElement(Button_1.Button, { onClick: handleSubmit, disabled: !(0, lodash_1.isEmpty)(errors) || isSubmitting }, (0, utils_1.getMessage)(`popup.item.form.button.save`)) })));
+};
+exports.default = CustomFieldForm;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/components/CustomFieldModal/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Effect, NavigationItemCustomField, VoidEffect } from '../../../../../../types';
+interface ICustomFieldModalProps {
+    data: NavigationItemCustomField | null;
+    isOpen: boolean;
+    onClose: VoidEffect;
+    onSubmit: Effect<NavigationItemCustomField>;
+    usedCustomFieldNames: string[];
+}
+declare const CustomFieldModal: React.FC<ICustomFieldModalProps>;
+export default CustomFieldModal;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/SettingsPage/components/CustomFieldModal/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Typography_1 = require("@strapi/design-system/Typography");
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const CustomFieldForm_1 = __importDefault(require("../CustomFieldForm"));
+const utils_1 = require("../../../../utils");
+const lodash_1 = require("lodash");
+const CustomFieldModal = ({ isOpen, onClose, onSubmit, data, usedCustomFieldNames, }) => {
+    const isEditMode = !!data;
+    return (react_1.default.createElement(ModalLayout_1.ModalLayout, { onClose: onClose, isOpen: isOpen, labelledBy: "custom-field-modal" },
+        react_1.default.createElement(ModalLayout_1.ModalHeader, null,
+            react_1.default.createElement(Typography_1.Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", id: "asset-dialog-title" }, (0, utils_1.getMessage)(`pages.settings.form.customFields.popup.header.${isEditMode ? 'edit' : 'new'}`))),
+        react_1.default.createElement(CustomFieldForm_1.default, { isEditForm: isEditMode, customField: (0, lodash_1.pick)(data, "name", "label", "type", "required", "options", "multi"), onSubmit: onSubmit, onClose: onClose, usedCustomFieldNames: usedCustomFieldNames })));
+};
+exports.default = CustomFieldModal;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/SettingsPage/components/CustomFieldTable/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Effect, NavigationItemCustomField } from '../../../../../../types';
+interface ICustomFieldTableProps {
+    data: NavigationItemCustomField[];
+    onOpenModal: (field: NavigationItemCustomField | null) => void;
+    onRemoveCustomField: Effect<NavigationItemCustomField>;
+    onToggleCustomField: Effect<NavigationItemCustomField>;
+}
+declare const CustomFieldTable: React.FC<ICustomFieldTableProps>;
+export default CustomFieldTable;
+//# sourceMappingURL=index.d.ts.map