strapi-plugin-navigation 2.1.0 → 2.2.0

package/admin/src/pages/View/components/NavigationItemForm/index.js

@@ -28,31 +28,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
-const prop_types_1 = __importDefault(require("prop-types"));
+const slugify_1 = __importDefault(require("@sindresorhus/slugify"));
 const formik_1 = require("formik");
-const slugify_1 = __importDefault(require("slugify"));
 const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
 const Select_1 = require("@strapi/design-system/Select");
 const Grid_1 = require("@strapi/design-system/Grid");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const Button_1 = require("@strapi/design-system/Button");
 const NavigationItemPopupFooter_1 = require("../NavigationItemPopup/NavigationItemPopupFooter");
-const enums_1 = require("../../utils/enums");
+const utils_1 = require("../../../../utils");
 const parsers_1 = require("../../utils/parsers");
-const form_1 = require("./utils/form");
-const form_2 = require("../../utils/form");
+const formDefinition = __importStar(require("./utils/form"));
+const form_1 = require("../../utils/form");
 const translations_1 = require("../../../../translations");
-const utils_1 = require("../../../../utils");
+const types_1 = require("../../../../../../types");
+const AdditionalFieldInput_1 = __importDefault(require("../../../../components/AdditionalFieldInput"));
+const utils_2 = require("../../../../utils");
 const appendLabelPublicationStatusFallback = () => '';
-const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data = {}, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, }) => {
+const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading, inputsPrefix, data, contentTypes = [], contentTypeEntities = [], usedContentTypeEntities = [], availableAudience = [], additionalFields = [], contentTypesNameFields = {}, onSubmit, onCancel, getContentTypeEntities, usedContentTypesData, appendLabelPublicationStatus = appendLabelPublicationStatusFallback, locale, readNavigationItemFromLocale, }) => {
     const [isLoading, setIsLoading] = (0, react_1.useState)(isPreloading);
     const [hasBeenInitialized, setInitializedState] = (0, react_1.useState)(false);
     const [hasChanged, setChangedState] = (0, react_1.useState)(false);
     const [contentTypeSearchQuery, setContentTypeSearchQuery] = (0, react_1.useState)(undefined);
     const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = (0, react_1.useState)(undefined);
-    const [form, setFormState] = (0, react_1.useState)({});
-    const [formErrors, setFormErrorsState] = (0, react_1.useState)({});
-    const { relatedType } = form;
+    const formik = (0, formik_1.useFormik)({
+        initialValues: formDefinition.defaultValues,
+        onSubmit: (payload) => onSubmit(sanitizePayload(payload, data)),
+        validate: (values) => (0, form_1.checkFormValidity)(sanitizePayload(values, {}), formDefinition.schemaFactory(isSingleSelected, additionalFields)),
+        validateOnChange: false,
+    });
+    const initialRelatedTypeSelected = (0, lodash_1.get)(data, 'relatedType.value');
+    const relatedTypeSelectValue = formik.values.relatedType;
+    const relatedSelectValue = formik.values.related;
     const isI18nBootstrapAvailable = !!(config.i18nEnabled && availableLocale && availableLocale.length);
     const availableLocaleOptions = (0, react_1.useMemo)(() => availableLocale.map((locale) => ({
         value: locale,
@@ -67,22 +74,30 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     const relatedFieldName = `${inputsPrefix}related`;
     if (!hasBeenInitialized && !(0, lodash_1.isEmpty)(data)) {
         setInitializedState(true);
-        setFormState({
-            ...data,
-            type: data.type || enums_1.navigationItemType.INTERNAL,
-            related: data.related?.value,
-            relatedType: data.relatedType?.value,
-            audience: data.audience?.map(item => item.id),
+        formik.setValues({
+            type: (0, lodash_1.get)(data, "type", formDefinition.defaultValues.type),
+            related: (0, lodash_1.get)(data, "related.value", formDefinition.defaultValues.related),
+            relatedType: (0, lodash_1.get)(data, "relatedType.value", formDefinition.defaultValues.relatedType),
+            audience: (0, lodash_1.get)(data, "audience", formDefinition.defaultValues.audience).map((item) => (0, lodash_1.isObject)(item) ? item.id : item),
+            additionalFields: (0, utils_1.getDefaultCustomFields)({
+                additionalFields,
+                customFieldsValues: (0, lodash_1.get)(data, "additionalFields", []),
+                defaultCustomFieldsValues: formDefinition.defaultValues.additionalFields
+            }),
+            menuAttached: (0, lodash_1.get)(data, "menuAttached", formDefinition.defaultValues.menuAttached),
+            path: (0, lodash_1.get)(data, "path", formDefinition.defaultValues.path),
+            externalPath: (0, lodash_1.get)(data, "externalPath", formDefinition.defaultValues.externalPath),
+            title: (0, lodash_1.get)(data, "title", formDefinition.defaultValues.title),
+            updated: formDefinition.defaultValues.updated,
         });
     }
-    const audience = (0, lodash_1.get)(form, `${inputsPrefix}audience`, []);
-    const audienceOptions = availableAudience.map((item) => ({
+    const audienceOptions = (0, react_1.useMemo)(() => availableAudience.map((item) => ({
         value: (0, lodash_1.get)(item, 'id', " "),
         label: (0, lodash_1.get)(item, 'name', " "),
-    }));
+    })), [availableAudience]);
     const generatePreviewPath = () => {
         if (!isExternal) {
-            const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path !== '/' ? form.path || '' : ''}`;
+            const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${formik.values.path !== '/' ? formik.values.path || '' : ''}`;
             return {
                 id: (0, translations_1.getTradId)('popup.item.form.type.external.description'),
                 defaultMessage: '',
@@ -102,8 +117,8 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             }, contentTypesNameFields, { contentTypes });
         }
     }, [contentTypeEntities, contentTypesNameFields, contentTypes]);
-    const sanitizePayload = (payload = {}) => {
-        const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, type, ...purePayload } = payload;
+    const sanitizePayload = (payload, data) => {
+        const { related, relatedType, menuAttached, type, ...purePayload } = payload;
         const relatedId = related;
         const singleRelatedItem = isSingleSelected ? (0, lodash_1.first)(contentTypeEntities) : undefined;
         const relatedCollectionType = relatedType;
@@ -111,67 +126,78 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             ? payload.title
             : getDefaultTitle(related, relatedType, isSingleSelected);
         return {
+            ...data,
             ...purePayload,
             title,
             type,
             menuAttached: (0, lodash_1.isNil)(menuAttached) ? false : menuAttached,
-            path: type !== enums_1.navigationItemType.EXTERNAL ? purePayload.path : undefined,
-            externalPath: type === enums_1.navigationItemType.EXTERNAL ? purePayload.externalPath : undefined,
-            related: type === enums_1.navigationItemType.INTERNAL ? relatedId : undefined,
-            relatedType: type === enums_1.navigationItemType.INTERNAL ? relatedCollectionType : undefined,
+            path: type !== utils_1.navigationItemType.EXTERNAL ? purePayload.path || getDefaultPath() : undefined,
+            externalPath: type === utils_1.navigationItemType.EXTERNAL ? purePayload.externalPath : undefined,
+            related: type === utils_1.navigationItemType.INTERNAL ? relatedId : undefined,
+            relatedType: type === utils_1.navigationItemType.INTERNAL ? relatedCollectionType : undefined,
             isSingle: isSingleSelected,
             singleRelatedItem,
             uiRouterKey: generateUiRouterKey(title, relatedId, relatedCollectionType),
         };
     };
-    const handleSubmit = async (e) => {
-        if (e) {
-            e.preventDefault();
-        }
-        const payload = sanitizePayload(form);
-        const errors = await (0, form_2.checkFormValidity)(payload, form_1.form.schema(isSingleSelected));
-        if (!errors || (0, lodash_1.isEmpty)(errors)) {
-            return onSubmit(payload);
-        }
-        else {
-            setFormErrorsState(errors);
-        }
-    };
-    const onAudienceChange = (value) => {
-        onChange({ target: { name: `${inputsPrefix}audience`, value } });
-    };
-    const onChange = ({ target: { name, value } }) => {
-        setFormState(prevState => ({
+    const onChange = ({ name, value }) => {
+        formik.setValues(prevState => ({
             ...prevState,
             updated: true,
             [name]: value,
         }));
+        if (name === "type") {
+            formik.setErrors({});
+        }
         if (!hasChanged) {
             setChangedState(true);
         }
     };
+    const getDefaultPath = (0, react_1.useCallback)(() => {
+        if (formik.values.type !== "INTERNAL")
+            return "";
+        (0, types_1.assertString)(relatedTypeSelectValue);
+        const pathDefaultFields = (0, lodash_1.get)(config, ["pathDefaultFields", relatedTypeSelectValue], []);
+        if ((0, lodash_1.isEmpty)(formik.values.path) && !(0, lodash_1.isEmpty)(pathDefaultFields)) {
+            const selectedEntity = contentTypeEntities.find(i => i.id === relatedSelectValue);
+            const pathDefaultValues = pathDefaultFields
+                .map((field) => (0, lodash_1.get)(selectedEntity, field, ""))
+                .filter(value => !(0, lodash_1.isNil)(value) && String(value).match(/^\S+$/));
+            return String((0, lodash_1.first)(pathDefaultValues));
+        }
+        return "";
+    }, [relatedTypeSelectValue, formik, config]);
+    const onAudienceChange = (0, react_1.useCallback)((value) => {
+        onChange({ name: "audience", value });
+    }, [onChange]);
+    const onAdditionalFieldChange = (name, newValue) => {
+        const fieldsValue = formik.values.additionalFields;
+        const value = { ...fieldsValue, [name]: newValue };
+        onChange({
+            name: "additionalFields",
+            value,
+        });
+    };
     const generateUiRouterKey = (title, related, relatedType) => {
+        const { slugify: customSlugifyConfig } = config;
         if (title) {
-            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? (0, slugify_1.default)(title).toLowerCase() : undefined;
+            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? (0, slugify_1.default)(title, customSlugifyConfig).toLowerCase() : undefined;
         }
         else if (related) {
             const relationTitle = (0, parsers_1.extractRelatedItemLabel)({
                 ...contentTypeEntities.find(_ => _.id === related),
                 __collectionUid: relatedType
             }, contentTypesNameFields, { contentTypes });
-            return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? (0, slugify_1.default)(relationTitle).toLowerCase() : undefined;
+            return (0, lodash_1.isString)(relationTitle) && !(0, lodash_1.isEmpty)(relationTitle) ? (0, slugify_1.default)(relationTitle, customSlugifyConfig).toLowerCase() : undefined;
         }
         return undefined;
     };
-    const initialRelatedTypeSelected = data?.relatedType?.value;
-    const relatedTypeSelectValue = form.relatedType;
-    const relatedSelectValue = form.related;
     const isSingleSelected = (0, react_1.useMemo)(() => relatedTypeSelectValue ? contentTypes.find(_ => _.uid === relatedTypeSelectValue)?.isSingle || false : false, [relatedTypeSelectValue, contentTypes]);
-    const navigationItemTypeOptions = Object.keys(enums_1.navigationItemType).map(key => {
-        const value = enums_1.navigationItemType[key].toLowerCase();
+    const navigationItemTypeOptions = Object.keys(utils_1.navigationItemType).map((key) => {
+        const value = utils_1.navigationItemType[key].toLowerCase();
         return {
             key,
-            value: enums_1.navigationItemType[key],
+            value: utils_1.navigationItemType[key],
             metadatas: {
                 intlLabel: {
                     id: (0, translations_1.getTradId)(`popup.item.form.type.${value}.label`),
@@ -184,7 +210,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         .filter((item) => {
         const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
             .filter(uctItem => relatedTypeSelectValue === uctItem.__collectionUid);
-        return !(0, lodash_1.find)(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related));
+        return !(0, lodash_1.find)(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== formik.values.related));
     })
         .map((item) => {
         const label = appendLabelPublicationStatus((0, parsers_1.extractRelatedItemLabel)({
@@ -203,12 +229,11 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             label: label,
         });
     });
-    const isExternal = form.type === enums_1.navigationItemType.EXTERNAL;
+    const isExternal = formik.values.type === utils_1.navigationItemType.EXTERNAL;
     const pathSourceName = isExternal ? 'externalPath' : 'path';
-    const submitDisabled = (form.type === enums_1.navigationItemType.INTERNAL && !isSingleSelected && (0, lodash_1.isNil)((0, lodash_1.get)(form, `${inputsPrefix}related`))) ||
-        (form.type === enums_1.navigationItemType.WRAPPER && (0, lodash_1.isNil)((0, lodash_1.get)(form, `${inputsPrefix}title`)));
+    const submitDisabled = (formik.values.type === utils_1.navigationItemType.INTERNAL && !isSingleSelected && (0, lodash_1.isNil)(formik.values.related));
     const debouncedSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(nextValue => setContentTypeSearchQuery(nextValue), 500), []);
-    const debounceContentTypeSearchQuery = value => {
+    const debounceContentTypeSearchQuery = (value) => {
         setContentTypeSearchInputValue(value);
         debouncedSearch(value);
     };
@@ -216,7 +241,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
         const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === (0, lodash_1.get)(value, 'value', value));
         setContentTypeSearchQuery(undefined);
         setContentTypeSearchInputValue(undefined);
-        setFormState(prevState => ({
+        formik.setValues(prevState => ({
             ...prevState,
             updated: true,
             related: relatedTypeBeingReverted ? data.related?.value : undefined,
@@ -232,7 +257,7 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             if (relatedTypeSelectValue && [relatedTypeSelectValue, initialRelatedTypeSelected].includes(contentType.uid)) {
                 return true;
             }
-            return !usedContentTypesData.some((_) => _.__collectionUid === contentType.uid && _.__collectionUid !== form.relatedType);
+            return !usedContentTypesData.some((_) => _.__collectionUid === contentType.uid && _.__collectionUid !== formik.values.relatedType);
         }
         return true;
     })
@@ -251,11 +276,11 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
     (0, react_1.useEffect)(() => {
         const value = (0, lodash_1.get)(relatedSelectOptions, '0');
         if (isSingleSelected && relatedSelectOptions.length === 1 && !(0, lodash_1.isEqual)(value, relatedSelectValue)) {
-            onChange({ target: { name: relatedFieldName, value } });
+            onChange({ name: "related", value });
         }
     }, [isSingleSelected, relatedSelectOptions]);
     (0, react_1.useEffect)(() => {
-        const value = relatedType;
+        const value = formik.values.relatedType;
         if (value) {
             const item = (0, lodash_1.find)(contentTypes, (_) => _.uid === value);
             if (item) {
@@ -266,15 +291,15 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                 }, item.plugin);
             }
         }
-    }, [relatedType, contentTypeSearchQuery]);
+    }, [formik.values.relatedType, contentTypeSearchQuery]);
     const resetCopyItemFormErrors = () => {
-        setFormErrorsState((prevState) => ({
-            ...prevState,
+        formik.setErrors({
+            ...formik.errors,
             [itemLocaleCopyField]: null,
-        }));
+        });
     };
     const itemLocaleCopyField = `${inputsPrefix}i18n.locale`;
-    const itemLocaleCopyValue = form[itemLocaleCopyField];
+    const itemLocaleCopyValue = (0, lodash_1.get)(formik.values, itemLocaleCopyField);
     const onCopyFromLocale = (0, react_1.useCallback)(async (event) => {
         event.preventDefault();
         event.stopPropagation();
@@ -285,40 +310,40 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
                 locale: itemLocaleCopyValue,
                 structureId: data.structureId
             });
-            if (result.type === utils_1.ResourceState.RESOLVED) {
+            if (result.type === utils_2.ResourceState.RESOLVED) {
                 const { value: { related, ...rest } } = result;
-                setFormState((prevState) => ({
+                formik.setValues((prevState) => ({
                     ...prevState,
                     ...rest,
                 }));
                 if (related) {
                     const relatedType = relatedTypeSelectOptions
                         .find(({ value }) => value === related.__contentType)?.value;
-                    setFormState((prevState) => ({
+                    formik.setValues((prevState) => ({
                         ...prevState,
                         relatedType,
                         [relatedFieldName]: related.id,
                     }));
                 }
             }
-            if (result.type === utils_1.ResourceState.ERROR) {
-                setFormErrorsState((prevState) => ({
-                    ...prevState,
-                    [itemLocaleCopyField]: (0, utils_1.getMessage)(result.errors[0]),
-                }));
+            if (result.type === utils_2.ResourceState.ERROR) {
+                formik.setErrors({
+                    ...formik.errors,
+                    [itemLocaleCopyField]: (0, utils_2.getMessage)(result.errors[0]),
+                });
             }
         }
         catch (error) {
-            setFormErrorsState((prevState) => ({
-                ...prevState,
-                [itemLocaleCopyField]: (0, utils_1.getMessage)('popup.item.form.i18n.locale.error.generic'),
-            }));
+            formik.setErrors({
+                ...formik.errors,
+                [itemLocaleCopyField]: (0, utils_2.getMessage)('popup.item.form.i18n.locale.error.generic'),
+            });
         }
         setIsLoading(false);
-    }, [setIsLoading, setFormState, setFormErrorsState]);
+    }, [setIsLoading, formik.setValues, formik.setErrors]);
     const onChangeLocaleCopy = (0, react_1.useCallback)(({ target: { value } }) => {
         resetCopyItemFormErrors();
-        onChange({ target: { name: itemLocaleCopyField, value } });
+        onChange({ name: itemLocaleCopyField, value });
     }, [onChange, itemLocaleCopyField]);
     const itemCopyProps = (0, react_1.useMemo)(() => ({
         intlLabel: {
@@ -330,105 +355,65 @@ const NavigationItemForm = ({ config, availableLocale, isLoading: isPreloading,
             defaultMessage: 'locale'
         },
     }), [translations_1.getTradId]);
+    (0, react_1.useEffect)(() => {
+        const value = formik.values.relatedType;
+        const fetchContentTypeEntities = async () => {
+            if (value) {
+                const item = (0, lodash_1.find)(contentTypes, (_) => _.uid === value);
+                if (item) {
+                    await getContentTypeEntities({
+                        modelUID: item.uid,
+                        query: contentTypeSearchQuery,
+                        locale,
+                    }, item.plugin);
+                }
+            }
+        };
+        fetchContentTypeEntities();
+    }, [formik.values.relatedType, contentTypeSearchQuery]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(formik_1.Formik, null,
-            react_1.default.createElement(helper_plugin_1.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: `${inputsPrefix}title`, col: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { autoFocused: true, intlLabel: {
-                                    id: (0, translations_1.getTradId)('popup.item.form.title.label'),
-                                    defaultMessage: 'Title',
-                                }, name: `${inputsPrefix}title`, placeholder: {
-                                    id: "e.g. Blog",
-                                    defaultMessage: 'e.g. Blog',
-                                }, description: {
-                                    id: (0, translations_1.getTradId)('popup.item.form.title.placeholder'),
-                                    defaultMessage: 'e.g. Blog',
-                                }, type: 'text', error: (0, lodash_1.get)(formErrors, `${inputsPrefix}title.id`), onChange: onChange, value: (0, lodash_1.get)(form, `${inputsPrefix}title`, '') })),
-                        react_1.default.createElement(Grid_1.GridItem, { key: `${inputsPrefix}type`, col: 4, lg: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: {
-                                    id: (0, translations_1.getTradId)('popup.item.form.type.label'),
-                                    defaultMessage: 'Internal link',
-                                }, name: `${inputsPrefix}type`, options: navigationItemTypeOptions, type: 'select', error: (0, lodash_1.get)(formErrors, `${inputsPrefix}type.id`), onChange: onChange, value: (0, lodash_1.get)(form, `${inputsPrefix}type`, '') })),
-                        react_1.default.createElement(Grid_1.GridItem, { key: `${inputsPrefix}menuAttached`, col: 4, lg: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: {
-                                    id: (0, translations_1.getTradId)('popup.item.form.menuAttached.label'),
-                                    defaultMessage: 'MenuAttached',
-                                }, name: `${inputsPrefix}menuAttached`, type: 'bool', error: (0, lodash_1.get)(formErrors, `${inputsPrefix}menuAttached.id`), onChange: onChange, value: (0, lodash_1.get)(form, `${inputsPrefix}menuAttached`, ''), disabled: !(data.isMenuAllowedLevel && data.parentAttachedToMenu) })),
-                        react_1.default.createElement(Grid_1.GridItem, { key: `${inputsPrefix}path`, col: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: {
-                                    id: (0, translations_1.getTradId)(`popup.item.form.${pathSourceName}.label`),
-                                    defaultMessage: 'Path',
-                                }, name: `${inputsPrefix}${pathSourceName}`, placeholder: {
-                                    id: (0, translations_1.getTradId)(`popup.item.form.${pathSourceName}.placeholder`),
-                                    defaultMessage: 'e.g. Blog',
-                                }, type: 'text', error: (0, lodash_1.get)(formErrors, `${inputsPrefix}${pathSourceName}.id`), onChange: onChange, value: (0, lodash_1.get)(form, `${inputsPrefix}${pathSourceName}`, ''), description: generatePreviewPath() })),
-                        (0, lodash_1.get)(form, `${inputsPrefix}type`) === enums_1.navigationItemType.INTERNAL && (react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                                react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: {
-                                        id: (0, translations_1.getTradId)('popup.item.form.relatedType.label'),
-                                        defaultMessage: 'Related Type'
-                                    }, placeholder: {
-                                        id: (0, translations_1.getTradId)('popup.item.form.relatedType.placeholder'),
-                                        defaultMessage: 'Related Type'
-                                    }, name: `${inputsPrefix}relatedType`, error: (0, lodash_1.get)(formErrors, `${inputsPrefix}relatedType.id`), onChange: onChangeRelatedType, options: relatedTypeSelectOptions, value: relatedTypeSelectValue, disabled: isLoading || (0, lodash_1.isEmpty)(relatedTypeSelectOptions), description: !isLoading && (0, lodash_1.isEmpty)(relatedTypeSelectOptions)
-                                        ? {
-                                            id: (0, translations_1.getTradId)('popup.item.form.relatedType.empty'),
-                                            defaultMessage: 'There are no more content types',
-                                        }
-                                        : undefined })),
-                            relatedTypeSelectValue && !isSingleSelected && (react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                                react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: {
-                                        id: (0, translations_1.getTradId)('popup.item.form.related.label'),
-                                        defaultMessage: 'Related'
-                                    }, placeholder: {
-                                        id: (0, translations_1.getTradId)('popup.item.form.related.label'),
-                                        defaultMessage: 'Related'
-                                    }, name: relatedFieldName, error: (0, lodash_1.get)(formErrors, `${relatedFieldName}.id`), onChange: onChange, onInputChange: debounceContentTypeSearchQuery, inputValue: contentTypeSearchInputValue, options: relatedSelectOptions, value: relatedSelectValue, disabled: isLoading || thereAreNoMoreContentTypes, description: !isLoading && thereAreNoMoreContentTypes
-                                        ? {
-                                            id: (0, translations_1.getTradId)('popup.item.form.related.empty'),
-                                            defaultMessage: 'There are no more entities',
-                                            values: { contentTypeName: relatedTypeSelectValue },
-                                        }
-                                        : undefined }))))),
-                        additionalFields.includes(enums_1.navigationItemAdditionalFields.AUDIENCE) && (react_1.default.createElement(Grid_1.GridItem, { key: `${inputsPrefix}audience`, col: 6, lg: 12 },
-                            react_1.default.createElement(Select_1.Select, { id: `${inputsPrefix}audience`, placeholder: (0, utils_1.getMessage)('popup.item.form.audience.placeholder'), label: (0, utils_1.getMessage)('popup.item.form.audience.label'), onChange: onAudienceChange, value: audience, hint: !isLoading && (0, lodash_1.isEmpty)(audienceOptions)
-                                    ? (0, utils_1.getMessage)('popup.item.form.audience.empty', 'There are no more audiences')
-                                    : undefined, multi: true, withTags: true, disabled: (0, lodash_1.isEmpty)(audienceOptions) }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label)))))),
-                    isI18nBootstrapAvailable ? (react_1.default.createElement(Grid_1.Grid, { gap: 5, paddingTop: 5 },
+        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: "title", col: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { autoFocused: true, intlLabel: (0, translations_1.getTrad)('popup.item.form.title.label', 'Title'), name: "title", placeholder: (0, translations_1.getTrad)("e.g. Blog", 'e.g. Blog'), description: (0, translations_1.getTrad)('popup.item.form.title.placeholder', 'e.g. Blog'), type: "text", error: formik.errors.title, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.title })),
+                    react_1.default.createElement(Grid_1.GridItem, { key: "type", col: 4, lg: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.type.label', 'Internal link'), name: "type", options: navigationItemTypeOptions, type: "select", error: formik.errors.type, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.type })),
+                    react_1.default.createElement(Grid_1.GridItem, { key: "menuAttached", col: 4, lg: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)('popup.item.form.menuAttached.label', 'MenuAttached'), name: "menuAttached", type: "bool", error: formik.errors.menuAttached, onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values.menuAttached, disabled: !(data.isMenuAllowedLevel && data.parentAttachedToMenu) })),
+                    react_1.default.createElement(Grid_1.GridItem, { key: "path", col: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { intlLabel: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.label`, 'Path'), name: pathSourceName, placeholder: (0, translations_1.getTrad)(`popup.item.form.${pathSourceName}.placeholder`, 'e.g. Blog'), type: "text", error: formik.errors[pathSourceName], onChange: ({ target: { name, value } }) => onChange({ name, value }), value: formik.values[pathSourceName], description: generatePreviewPath() })),
+                    formik.values.type === utils_1.navigationItemType.INTERNAL && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
-                            react_1.default.createElement(helper_plugin_1.GenericInput, { ...itemCopyProps, type: "select", name: itemLocaleCopyField, error: (0, lodash_1.get)(formErrors, itemLocaleCopyField), onChange: onChangeLocaleCopy, options: availableLocaleOptions, value: itemLocaleCopyValue, disabled: isLoading })),
-                        react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12, paddingTop: 6 },
-                            react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: onCopyFromLocale, disabled: isLoading || !itemLocaleCopyValue }, (0, utils_1.getMessage)('popup.item.form.i18n.locale.button'))))) : null))),
-        react_1.default.createElement(NavigationItemPopupFooter_1.NavigationItemPopupFooter, { handleSubmit: handleSubmit, handleCancel: onCancel, submitDisabled: submitDisabled })));
-};
-NavigationItemForm.defaultProps = {
-    fieldsToDisable: [],
-    formErrors: {},
-    inputsPrefix: '',
-    onSubmit: (e) => e.preventDefault(),
-    requestError: null,
-};
-NavigationItemForm.propTypes = {
-    config: prop_types_1.default.object.isRequired,
-    availableLocale: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    isLoading: prop_types_1.default.bool,
-    fieldsToDisable: prop_types_1.default.array,
-    formErrors: prop_types_1.default.object.isRequired,
-    inputsPrefix: prop_types_1.default.string,
-    data: prop_types_1.default.object.isRequired,
-    onSubmit: prop_types_1.default.func,
-    requestError: prop_types_1.default.object,
-    contentTypes: prop_types_1.default.array,
-    contentTypeEntities: prop_types_1.default.array,
-    usedContentTypeEntities: prop_types_1.default.array,
-    availableAudience: prop_types_1.default.array,
-    additionalFields: prop_types_1.default.array,
-    getContentTypeEntities: prop_types_1.default.func.isRequired,
-    appendLabelPublicationStatus: prop_types_1.default.func,
-    onCancel: prop_types_1.default.func,
-    readNavigationItemFromLocale: prop_types_1.default.func.isRequired,
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.relatedType.label', 'Related Type'), placeholder: (0, translations_1.getTrad)('popup.item.form.relatedType.placeholder', 'Related Type'), name: "relatedType", error: formik.errors.relatedType, onChange: onChangeRelatedType, options: relatedTypeSelectOptions, value: formik.values.relatedType, disabled: isLoading || (0, lodash_1.isEmpty)(relatedTypeSelectOptions), description: !isLoading && (0, lodash_1.isEmpty)(relatedTypeSelectOptions)
+                                    ? (0, translations_1.getTrad)('popup.item.form.relatedType.empty', 'There are no more content types')
+                                    : undefined })),
+                        formik.values.relatedType && !isSingleSelected && (react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
+                            react_1.default.createElement(helper_plugin_1.GenericInput, { type: "select", intlLabel: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), placeholder: (0, translations_1.getTrad)('popup.item.form.related.label', 'Related'), name: "related", error: formik.errors.related, onChange: ({ target: { name, value } }) => onChange({ name, value }), onInputChange: debounceContentTypeSearchQuery, inputValue: contentTypeSearchInputValue, options: relatedSelectOptions, value: formik.values.related, disabled: isLoading || thereAreNoMoreContentTypes, description: !isLoading && thereAreNoMoreContentTypes
+                                    ? {
+                                        id: (0, translations_1.getTradId)('popup.item.form.related.empty'),
+                                        defaultMessage: 'There are no more entities',
+                                        values: { contentTypeName: relatedTypeSelectValue },
+                                    }
+                                    : undefined }))))),
+                    additionalFields.map((additionalField) => {
+                        if (additionalField === 'audience') {
+                            return (react_1.default.createElement(Grid_1.GridItem, { key: "audience", col: 6, lg: 12 },
+                                react_1.default.createElement(Select_1.Select, { id: "audience", placeholder: (0, utils_2.getMessage)('popup.item.form.audience.placeholder'), label: (0, utils_2.getMessage)('popup.item.form.audience.label'), onChange: onAudienceChange, value: formik.values.audience, hint: !isLoading && (0, lodash_1.isEmpty)(audienceOptions)
+                                        ? (0, utils_2.getMessage)('popup.item.form.audience.empty', 'There are no more audiences')
+                                        : undefined, multi: true, withTags: true, disabled: (0, lodash_1.isEmpty)(audienceOptions) }, audienceOptions.map(({ value, label }) => react_1.default.createElement(Select_1.Option, { key: value, value: value }, label)))));
+                        }
+                        else {
+                            return (react_1.default.createElement(Grid_1.GridItem, { key: additionalField.name, col: 6, lg: 12 },
+                                react_1.default.createElement(AdditionalFieldInput_1.default, { field: additionalField, isLoading: isLoading, onChange: onAdditionalFieldChange, value: (0, lodash_1.get)(formik.values, `additionalFields.${additionalField.name}`, null), error: (0, lodash_1.get)(formik.errors, `additionalFields.${additionalField.name}`, null) })));
+                        }
+                    })),
+                isI18nBootstrapAvailable ? (react_1.default.createElement(Grid_1.Grid, { gap: 5, paddingTop: 5 },
+                    react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12 },
+                        react_1.default.createElement(helper_plugin_1.GenericInput, { ...itemCopyProps, type: "select", name: itemLocaleCopyField, error: (0, lodash_1.get)(formik.errors, itemLocaleCopyField), onChange: onChangeLocaleCopy, options: availableLocaleOptions, value: itemLocaleCopyValue, disabled: isLoading })),
+                    react_1.default.createElement(Grid_1.GridItem, { col: 6, lg: 12, paddingTop: 6 },
+                        react_1.default.createElement(Button_1.Button, { variant: "tertiary", onClick: onCopyFromLocale, disabled: isLoading || !itemLocaleCopyValue }, (0, utils_2.getMessage)('popup.item.form.i18n.locale.button'))))) : null)),
+        react_1.default.createElement(NavigationItemPopupFooter_1.NavigationItemPopupFooter, { handleSubmit: formik.handleSubmit, handleCancel: onCancel, submitDisabled: submitDisabled })));
 };
 exports.default = NavigationItemForm;
 //# sourceMappingURL=index.js.map

package/admin/src/pages/View/components/NavigationItemForm/types.d.ts

@@ -0,0 +1,90 @@
+import { Audience, Effect, ContentTypeEntity, NavigationItemAdditionalField, NavigationItemAdditionalFieldValues, NavigationItemType, NavigationPluginConfig, PluginConfigNameFields, ToBeFixed, VoidEffect } from '../../../../../../types';
+import { Id } from 'strapi-typed';
+import { StrapiContentTypeSchema } from '../../../SettingsPage/types';
+export declare type FormEventTarget<TValue = unknown> = {
+    name: string;
+    value: TValue;
+};
+declare type GetContentTypeEntitiesPayload = {
+    modelUID: string;
+    query: ContentTypeSearchQuery;
+    locale: ToBeFixed;
+};
+export declare type NavigationItemFormData = {
+    isMenuAllowedLevel: boolean;
+    levelPath: string;
+    parentAttachedToMenu: boolean;
+    audience?: Audience[];
+    collapsed?: boolean;
+    externalPath?: string | null;
+    id?: Id;
+    isParentAttachedToMenu?: boolean;
+    items?: ToBeFixed[];
+    menuAttached?: boolean;
+    order?: number;
+    parent?: ToBeFixed;
+    path?: string | null;
+    title?: string;
+    type?: NavigationItemType;
+    uiRouterKey?: string;
+    updated?: boolean;
+    viewId?: string;
+    viewParentId: string | null;
+    related?: {
+        value: string;
+        label: string;
+    };
+    relatedType?: {
+        value: string;
+        label: string;
+    };
+    relatedRef?: ToBeFixed;
+    structureId: ToBeFixed;
+};
+export declare type NavigationItemFormProps = {
+    additionalFields: NavigationItemAdditionalField[];
+    appendLabelPublicationStatus: (label: string, entity: ContentTypeEntity) => string;
+    availableAudience: string[];
+    contentTypeEntities: ContentTypeEntity[];
+    contentTypes: StrapiContentTypeSchema[];
+    contentTypesNameFields: PluginConfigNameFields;
+    data: NavigationItemFormData;
+    getContentTypeEntities: (value: GetContentTypeEntitiesPayload, plugin: string) => ContentTypeEntity;
+    isLoading: boolean;
+    locale: string;
+    onCancel: VoidEffect;
+    onSubmit: Effect<SanitizedFormPayload>;
+    usedContentTypeEntities: ToBeFixed[];
+    usedContentTypesData: ToBeFixed;
+    config: NavigationPluginConfig;
+    availableLocale: string[];
+    readNavigationItemFromLocale: ToBeFixed;
+    inputsPrefix: string;
+};
+export declare type ContentTypeSearchQuery = ToBeFixed;
+export declare type RawFormPayload = {
+    type: NavigationItemType;
+    related?: string;
+    relatedType?: string;
+    audience: Id[];
+    menuAttached: boolean;
+    title: string;
+    externalPath: string | null;
+    path: string | null;
+    additionalFields: NavigationItemAdditionalFieldValues;
+    updated: boolean;
+};
+export declare type SanitizedFormPayload = {
+    title: string;
+    type: NavigationItemType;
+    menuAttached: boolean;
+    path?: string | null;
+    externalPath?: string | null;
+    related: Id | undefined;
+    relatedType: string | undefined;
+    isSingle: boolean;
+    singleRelatedItem: ContentTypeEntity | undefined;
+    uiRouterKey: string | undefined;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/admin/src/pages/View/components/NavigationItemForm/types.js

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