strapi-plugin-navigation 2.0.13 → 2.1.0

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

@@ -1,471 +1,434 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { debounce, find, get, first, isEmpty, isEqual, isNil, isString } from 'lodash';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik'
-import slugify from 'slugify';
-
-// Design System
-import { ModalBody } from '@strapi/design-system/ModalLayout';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Form, GenericInput } from '@strapi/helper-plugin';
-
-import { NavigationItemPopupFooter } from '../NavigationItemPopup/NavigationItemPopupFooter';
-import { navigationItemAdditionalFields, navigationItemType } from '../../utils/enums';
-import { extractRelatedItemLabel } from '../../utils/parsers';
-import { form as formDefinition } from './utils/form';
-import { checkFormValidity } from '../../utils/form';
-import { getTradId } from '../../../../translations';
-import { getMessage } from '../../../../utils';
-
-const NavigationItemForm = ({
-  isLoading,
-  inputsPrefix,
-  data = {},
-  contentTypes = [],
-  contentTypeEntities = [],
-  usedContentTypeEntities = [],
-  availableAudience = [],
-  additionalFields = [],
-  contentTypesNameFields = {},
-  onSubmit,
-  onCancel,
-  getContentTypeEntities,
-  usedContentTypesData,
-  appendLabelPublicationStatus = () => '',
-}) => {
-  const [hasBeenInitialized, setInitializedState] = useState(false);
-  const [hasChanged, setChangedState] = useState(false);
-  const [contentTypeSearchQuery, setContentTypeSearchQuery] = useState(undefined);
-  const [contentTypeSearchInputValue, setContentTypeSearchInputValue] = useState(undefined);
-  const [form, setFormState] = useState({});
-  const [formErrors, setFormErrorsState] = useState({});
-  const { relatedType } = form;
-
-  const relatedFieldName = `${inputsPrefix}related`;
-
-  if (!hasBeenInitialized && !isEmpty(data)) {
-    setInitializedState(true);
-    setFormState({
-      ...data,
-      type: data.type || navigationItemType.INTERNAL,
-      related: data.related?.value,
-      relatedType: data.relatedType?.value,
-      audience: data.audience?.map(item => item.id),
-    });
-  }
-
-  const audience = get(form, `${inputsPrefix}audience`, []);
-  const audienceOptions = availableAudience.map((item) => ({
-    value: get(item, 'id', " "),
-    label: get(item, 'name', " "),
-  }));
-
-  const generatePreviewPath = () => {
-    if (!isExternal) {
-      const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path !== '/' ? form.path || '' : ''}`;
-      return {
-        id: getTradId('popup.item.form.type.external.description'),
-        defaultMessage: '',
-        values: { value }
-      }
-    }
-    return null;
-  };
-
-  const sanitizePayload = (payload = {}) => {
-    const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, type, ...purePayload } = payload;
-    const relatedId = related;
-    const singleRelatedItem = isSingleSelected ? first(contentTypeEntities) : undefined;
-    const relatedCollectionType = relatedType;
-    const title = payload.title;
-    
-    return {
-      ...purePayload,
-      title,
-      type,
-      menuAttached: isNil(menuAttached) ? false : menuAttached,
-      path: type !== navigationItemType.EXTERNAL ? purePayload.path : undefined,
-      externalPath: type === navigationItemType.EXTERNAL ? purePayload.externalPath : undefined,
-      related: type === navigationItemType.INTERNAL ? relatedId : undefined,
-      relatedType: type === navigationItemType.INTERNAL ? relatedCollectionType : undefined,
-      isSingle: isSingleSelected,
-      singleRelatedItem,
-      uiRouterKey: generateUiRouterKey(title, relatedId, relatedCollectionType),
-    };
-  };
-
-  const handleSubmit = async e => {
-    if (e) {
-      e.preventDefault();
+"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]; } };
     }
-
-    const payload = sanitizePayload(form);
-    const errors = await checkFormValidity(payload, formDefinition.schema(isSingleSelected));
-    if (!errors || isEmpty(errors)) {
-      return onSubmit(payload);
-    } else {
-      setFormErrorsState(errors);
+    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 lodash_1 = require("lodash");
+const prop_types_1 = __importDefault(require("prop-types"));
+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 parsers_1 = require("../../utils/parsers");
+const form_1 = require("./utils/form");
+const form_2 = require("../../utils/form");
+const translations_1 = require("../../../../translations");
+const utils_1 = 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 [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 isI18nBootstrapAvailable = !!(config.i18nEnabled && availableLocale && availableLocale.length);
+    const availableLocaleOptions = (0, react_1.useMemo)(() => availableLocale.map((locale) => ({
+        value: locale,
+        label: locale,
+        metadatas: {
+            intlLabel: {
+                id: `i18n.locale.${locale}`,
+                defaultMessage: locale,
+            }
+        },
+    })), [availableLocale]);
+    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),
+        });
     }
-  };
-
-  const onAudienceChange = (value) => {
-    onChange({ target: { name: `${inputsPrefix}audience`, value } });
-  }
-
-  const onChange = ({ target: { name, value } }) => {
-    setFormState(prevState => ({
-      ...prevState,
-      updated: true,
-      [name]: value,
+    const audience = (0, lodash_1.get)(form, `${inputsPrefix}audience`, []);
+    const audienceOptions = availableAudience.map((item) => ({
+        value: (0, lodash_1.get)(item, 'id', " "),
+        label: (0, lodash_1.get)(item, 'name', " "),
     }));
-    if (!hasChanged) {
-      setChangedState(true);
-    }
-  };
-
-  const generateUiRouterKey = (title, related, relatedType) => {
-    if (title) {
-      return isString(title) && !isEmpty(title) ? slugify(title).toLowerCase() : undefined;
-    } else if (related) {
-      const relationTitle = extractRelatedItemLabel({
-        ...contentTypeEntities.find(_ => _.id === related),
-        __collectionUid: relatedType
-      }, contentTypesNameFields, { contentTypes });
-      return isString(relationTitle) && !isEmpty(relationTitle) ? slugify(relationTitle).toLowerCase() : undefined;
-    }
-    return undefined;
-  };
-
-  const initialRelatedTypeSelected = data?.relatedType?.value;
-  const relatedTypeSelectValue = form.relatedType;
-  const relatedSelectValue = form.related;
-
-  const isSingleSelected = useMemo(
-    () => relatedTypeSelectValue ? contentTypes.find(_ => _.uid === relatedTypeSelectValue)?.isSingle || false : false,
-    [relatedTypeSelectValue, contentTypes],
-  );
-
-  const navigationItemTypeOptions = Object.keys(navigationItemType).map(key => {
-    const value = navigationItemType[key].toLowerCase();
-    return {
-      key,
-      value: navigationItemType[key],
-      metadatas: {
-        intlLabel: {
-          id: getTradId(`popup.item.form.type.${value}.label`),
-          defaultMessage: getTradId(`popup.item.form.type.${value}.label`),
+    const generatePreviewPath = () => {
+        if (!isExternal) {
+            const value = `${data.levelPath !== '/' ? `${data.levelPath}` : ''}/${form.path !== '/' ? form.path || '' : ''}`;
+            return {
+                id: (0, translations_1.getTradId)('popup.item.form.type.external.description'),
+                defaultMessage: '',
+                values: { value }
+            };
         }
-      }
-    }
-  });
-
-  const relatedSelectOptions = contentTypeEntities
-    .filter((item) => {
-      const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
-        .filter(uctItem => relatedTypeSelectValue === uctItem.__collectionUid);
-      return !find(usedContentTypeEntitiesOfSameType, uctItem => (item.id === uctItem.id && uctItem.id !== form.related));
+        return null;
+    };
+    const getDefaultTitle = (0, react_1.useCallback)((related, relatedType, isSingleSelected) => {
+        if (isSingleSelected) {
+            return contentTypes.find(_ => _.uid === relatedType)?.label;
+        }
+        else {
+            return (0, parsers_1.extractRelatedItemLabel)({
+                ...contentTypeEntities.find(_ => _.id === related),
+                __collectionUid: relatedType
+            }, contentTypesNameFields, { contentTypes });
+        }
+    }, [contentTypeEntities, contentTypesNameFields, contentTypes]);
+    const sanitizePayload = (payload = {}) => {
+        const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, type, ...purePayload } = payload;
+        const relatedId = related;
+        const singleRelatedItem = isSingleSelected ? (0, lodash_1.first)(contentTypeEntities) : undefined;
+        const relatedCollectionType = relatedType;
+        const title = !!payload.title?.trim()
+            ? payload.title
+            : getDefaultTitle(related, relatedType, isSingleSelected);
+        return {
+            ...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,
+            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 => ({
+            ...prevState,
+            updated: true,
+            [name]: value,
+        }));
+        if (!hasChanged) {
+            setChangedState(true);
+        }
+    };
+    const generateUiRouterKey = (title, related, relatedType) => {
+        if (title) {
+            return (0, lodash_1.isString)(title) && !(0, lodash_1.isEmpty)(title) ? (0, slugify_1.default)(title).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 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();
+        return {
+            key,
+            value: enums_1.navigationItemType[key],
+            metadatas: {
+                intlLabel: {
+                    id: (0, translations_1.getTradId)(`popup.item.form.type.${value}.label`),
+                    defaultMessage: (0, translations_1.getTradId)(`popup.item.form.type.${value}.label`),
+                }
+            }
+        };
+    });
+    const relatedSelectOptions = contentTypeEntities
+        .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));
     })
-    .map((item) => {
-      const label = appendLabelPublicationStatus(
-        extractRelatedItemLabel({
-          ...item,
-          __collectionUid: get(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
-        }, contentTypesNameFields, { contentTypes }),
-        item
-      );
-      return ({
-        key: get(item, 'id'),
-        metadatas: {
-          intlLabel: {
-            id: label || `${item.__collectionUid} ${item.id}`,
-            defaultMessage: label || `${item.__collectionUid} ${item.id}`,
-          }
-        },
-        value: item.id,
-        label: label,
-      })
+        .map((item) => {
+        const label = appendLabelPublicationStatus((0, parsers_1.extractRelatedItemLabel)({
+            ...item,
+            __collectionUid: (0, lodash_1.get)(relatedTypeSelectValue, 'value', relatedTypeSelectValue),
+        }, contentTypesNameFields, { contentTypes }), item);
+        return ({
+            key: (0, lodash_1.get)(item, 'id'),
+            metadatas: {
+                intlLabel: {
+                    id: label || `${item.__collectionUid} ${item.id}`,
+                    defaultMessage: label || `${item.__collectionUid} ${item.id}`,
+                }
+            },
+            value: item.id,
+            label: label,
+        });
     });
-
-  const isExternal = form.type === navigationItemType.EXTERNAL;
-  const pathSourceName = isExternal ? 'externalPath' : 'path';
-
-  const submitDisabled =
-    (form.type === navigationItemType.INTERNAL && !isSingleSelected && isNil(get(form, `${inputsPrefix}related`))) ||
-    (form.type === navigationItemType.WRAPPER && isNil(get(form, `${inputsPrefix}title`)));
-
-  const debouncedSearch = useCallback(
-    debounce(nextValue => setContentTypeSearchQuery(nextValue), 500),
-    [],
-  );
-
-  const debounceContentTypeSearchQuery = value => {
-    setContentTypeSearchInputValue(value);
-    debouncedSearch(value);
-  };
-
-  const onChangeRelatedType = ({ target: { name, value } }) => {
-    const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === get(value, 'value', value));
-    setContentTypeSearchQuery(undefined);
-    setContentTypeSearchInputValue(undefined);
-    setFormState(prevState => ({
-      ...prevState,
-      updated: true,
-      related: relatedTypeBeingReverted ? data.related?.value : undefined,
-      [name]: value,
-    }));
-    if (!hasChanged) {
-      setChangedState(true);
-    }
-  };
-
-  const relatedTypeSelectOptions = useMemo(
-    () => contentTypes
-      .filter((contentType) => {
+    const isExternal = form.type === enums_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 debouncedSearch = (0, react_1.useCallback)((0, lodash_1.debounce)(nextValue => setContentTypeSearchQuery(nextValue), 500), []);
+    const debounceContentTypeSearchQuery = value => {
+        setContentTypeSearchInputValue(value);
+        debouncedSearch(value);
+    };
+    const onChangeRelatedType = ({ target: { name, value } }) => {
+        const relatedTypeBeingReverted = data.relatedType && (data.relatedType.value === (0, lodash_1.get)(value, 'value', value));
+        setContentTypeSearchQuery(undefined);
+        setContentTypeSearchInputValue(undefined);
+        setFormState(prevState => ({
+            ...prevState,
+            updated: true,
+            related: relatedTypeBeingReverted ? data.related?.value : undefined,
+            [name]: value,
+        }));
+        if (!hasChanged) {
+            setChangedState(true);
+        }
+    };
+    const relatedTypeSelectOptions = (0, react_1.useMemo)(() => contentTypes
+        .filter((contentType) => {
         if (contentType.isSingle) {
-          if (relatedTypeSelectValue && [relatedTypeSelectValue, initialRelatedTypeSelected].includes(contentType.uid)) {
-            return true;
-          }
-          return !usedContentTypesData.some((_) => _.__collectionUid === contentType.uid && _.__collectionUid !== form.relatedType);
+            if (relatedTypeSelectValue && [relatedTypeSelectValue, initialRelatedTypeSelected].includes(contentType.uid)) {
+                return true;
+            }
+            return !usedContentTypesData.some((_) => _.__collectionUid === contentType.uid && _.__collectionUid !== form.relatedType);
         }
         return true;
-      })
-      .map((item) => ({
-        key: get(item, 'uid'),
+    })
+        .map((item) => ({
+        key: (0, lodash_1.get)(item, 'uid'),
         metadatas: {
-          intlLabel: {
-            id: get(item, 'label', get(item, 'name')),
-            defaultMessage: get(item, 'label', get(item, 'name')),
-          }
+            intlLabel: {
+                id: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
+                defaultMessage: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
+            }
         },
-        value: get(item, 'uid'),
-        label: get(item, 'label', get(item, 'name')),
-      })),
-    [contentTypes, usedContentTypesData, relatedTypeSelectValue],
-  );
-
-  const thereAreNoMoreContentTypes = isEmpty(relatedSelectOptions) && !contentTypeSearchQuery;
-
-  useEffect(
-    () => {
-      const value = get(relatedSelectOptions, '0');
-      if (isSingleSelected && relatedSelectOptions.length === 1 && !isEqual(value, relatedSelectValue)) {
-        onChange({ target: { name: relatedFieldName, value } });
-      }
-    },
-    [isSingleSelected, relatedSelectOptions],
-  );
-
-  useEffect(() => {
-    const value = relatedType;
-    const fetchContentTypeEntities = async () => {
-      if (value) {
-        const item = find(
-          contentTypes,
-          (_) => _.uid === value,
-        );
-        if (item) {
-          await getContentTypeEntities({
-            modelUID: item.uid,
-            query: contentTypeSearchQuery,
-          }, item.plugin);
+        value: (0, lodash_1.get)(item, 'uid'),
+        label: (0, lodash_1.get)(item, 'label', (0, lodash_1.get)(item, 'name')),
+    })), [contentTypes, usedContentTypesData, relatedTypeSelectValue]);
+    const thereAreNoMoreContentTypes = (0, lodash_1.isEmpty)(relatedSelectOptions) && !contentTypeSearchQuery;
+    (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 } });
+        }
+    }, [isSingleSelected, relatedSelectOptions]);
+    (0, react_1.useEffect)(() => {
+        const value = relatedType;
+        if (value) {
+            const item = (0, lodash_1.find)(contentTypes, (_) => _.uid === value);
+            if (item) {
+                getContentTypeEntities({
+                    modelUID: item.uid,
+                    query: contentTypeSearchQuery,
+                    locale,
+                }, item.plugin);
+            }
         }
-      }
+    }, [relatedType, contentTypeSearchQuery]);
+    const resetCopyItemFormErrors = () => {
+        setFormErrorsState((prevState) => ({
+            ...prevState,
+            [itemLocaleCopyField]: null,
+        }));
     };
-    fetchContentTypeEntities();
-  }, [relatedType, contentTypeSearchQuery]);
-  return (
-    <>
-      <Formik>
-        <Form>
-          <ModalBody>
-            <Grid gap={5}>
-              <GridItem key={`${inputsPrefix}title`} col={12}>
-                <GenericInput
-                  autoFocused={true}
-                  intlLabel={{
-                    id: getTradId('popup.item.form.title.label'),
-                    defaultMessage: 'Title',
-                  }}
-                  name={`${inputsPrefix}title`}
-                  placeholder={{
-                    id: "e.g. Blog",
-                    defaultMessage: 'e.g. Blog',
-                  }}
-                  description={{
-                    id: getTradId('popup.item.form.title.placeholder'),
-                    defaultMessage: 'e.g. Blog',
-                  }}
-                  type='text'
-                  error={get(formErrors, `${inputsPrefix}title.id`)}
-                  onChange={onChange}
-                  value={get(form, `${inputsPrefix}title`, '')}
-                />
-              </GridItem>
-              <GridItem key={`${inputsPrefix}type`} col={4} lg={12}>
-                <GenericInput
-                  intlLabel={{
-                    id: getTradId('popup.item.form.type.label'),
-                    defaultMessage: 'Internal link',
-                  }}
-                  name={`${inputsPrefix}type`}
-                  options={navigationItemTypeOptions}
-                  type='select'
-                  error={get(formErrors, `${inputsPrefix}type.id`)}
-                  onChange={onChange}
-                  value={get(form, `${inputsPrefix}type`, '')}
-                />
-              </GridItem>
-              <GridItem key={`${inputsPrefix}menuAttached`} col={4} lg={12}>
-                <GenericInput
-                  intlLabel={{
-                    id: getTradId('popup.item.form.menuAttached.label'),
-                    defaultMessage: 'MenuAttached',
-                  }}
-                  name={`${inputsPrefix}menuAttached`}
-                  type='bool'
-                  error={get(formErrors, `${inputsPrefix}menuAttached.id`)}
-                  onChange={onChange}
-                  value={get(form, `${inputsPrefix}menuAttached`, '')}
-                  disabled={!(data.isMenuAllowedLevel && data.parentAttachedToMenu)}
-                />
-              </GridItem>
-              <GridItem key={`${inputsPrefix}path`} col={12}>
-                <GenericInput
-                  intlLabel={{
-                    id: getTradId(`popup.item.form.${pathSourceName}.label`),
-                    defaultMessage: 'Path',
-                  }}
-                  name={`${inputsPrefix}${pathSourceName}`}
-                  placeholder={{
-                    id: getTradId(`popup.item.form.${pathSourceName}.placeholder`),
-                    defaultMessage: 'e.g. Blog',
-                  }}
-                  type='text'
-                  error={get(formErrors, `${inputsPrefix}${pathSourceName}.id`)}
-                  onChange={onChange}
-                  value={get(form, `${inputsPrefix}${pathSourceName}`, '')}
-                  description={generatePreviewPath()}
-                />
-              </GridItem>
-              {get(form, `${inputsPrefix}type`) === navigationItemType.INTERNAL && (
-                <>
-                  <GridItem col={6} lg={12}>
-                    <GenericInput
-                      type="select"
-                      intlLabel={{
-                        id: getTradId('popup.item.form.relatedType.label'),
-                        defaultMessage: 'Related Type'
-                      }}
-                      placeholder={{
-                        id: getTradId('popup.item.form.relatedType.placeholder'),
-                        defaultMessage: 'Related Type'
-                      }}
-                      name={`${inputsPrefix}relatedType`}
-                      error={get(formErrors, `${inputsPrefix}relatedType.id`)}
-                      onChange={onChangeRelatedType}
-                      options={relatedTypeSelectOptions}
-                      value={relatedTypeSelectValue}
-                      disabled={isLoading || isEmpty(relatedTypeSelectOptions)}
-                      description={
-                        !isLoading && isEmpty(relatedTypeSelectOptions)
-                          ? {
-                            id: getTradId('popup.item.form.relatedType.empty'),
-                            defaultMessage: 'There are no more content types',
-                          }
-                          : undefined
-                      }
-                    />
-                  </GridItem>
-                  {relatedTypeSelectValue && !isSingleSelected && (
-                    <GridItem col={6} lg={12}>
-                      <GenericInput
-                        type="select"
-                        intlLabel={{
-                          id: getTradId('popup.item.form.related.label'),
-                          defaultMessage: 'Related'
-                        }}
-                        placeholder={{
-                          id: getTradId('popup.item.form.related.label'),
-                          defaultMessage: 'Related'
-                        }}
-                        name={relatedFieldName}
-                        error={get(formErrors, `${relatedFieldName}.id`)}
-                        onChange={onChange}
-                        onInputChange={debounceContentTypeSearchQuery}
-                        inputValue={contentTypeSearchInputValue}
-                        options={relatedSelectOptions}
-                        value={relatedSelectValue}
-                        disabled={isLoading || thereAreNoMoreContentTypes}
-                        description={
-                          !isLoading && thereAreNoMoreContentTypes
-                            ? {
-                              id: getTradId('popup.item.form.related.empty'),
-                              defaultMessage: 'There are no more entities',
-                              values: { contentTypeName: relatedTypeSelectValue },
-                            }
-                            : undefined
-                        }
-                      />
-                    </GridItem>
-                  )}
-                </>
-              )}
-
-              {additionalFields.includes(navigationItemAdditionalFields.AUDIENCE) && (
-                <GridItem key={`${inputsPrefix}audience`} col={6} lg={12}>
-                  <Select
-                    id={`${inputsPrefix}audience`}
-                    placeholder={getMessage('popup.item.form.audience.placeholder')}
-                    label={getMessage('popup.item.form.audience.label')}
-                    onChange={onAudienceChange}
-                    value={audience}
-                    hint={
-                      !isLoading && isEmpty(audienceOptions)
-                        ? getMessage('popup.item.form.audience.empty', 'There are no more audiences')
-                        : undefined
-                    }
-                    multi
-                    withTags
-                    disabled={isEmpty(audienceOptions)}
-                  >
-                    {audienceOptions.map(({ value, label }) => <Option key={value} value={value}>{label}</Option>)}
-                  </Select>
-                </GridItem>
-              )}
-            </Grid>
-          </ModalBody>
-        </Form>
-      </Formik>
-      <NavigationItemPopupFooter handleSubmit={handleSubmit} handleCancel={onCancel} submitDisabled={submitDisabled} />
-    </>
-  );
+    const itemLocaleCopyField = `${inputsPrefix}i18n.locale`;
+    const itemLocaleCopyValue = form[itemLocaleCopyField];
+    const onCopyFromLocale = (0, react_1.useCallback)(async (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsLoading(true);
+        resetCopyItemFormErrors();
+        try {
+            const result = await readNavigationItemFromLocale({
+                locale: itemLocaleCopyValue,
+                structureId: data.structureId
+            });
+            if (result.type === utils_1.ResourceState.RESOLVED) {
+                const { value: { related, ...rest } } = result;
+                setFormState((prevState) => ({
+                    ...prevState,
+                    ...rest,
+                }));
+                if (related) {
+                    const relatedType = relatedTypeSelectOptions
+                        .find(({ value }) => value === related.__contentType)?.value;
+                    setFormState((prevState) => ({
+                        ...prevState,
+                        relatedType,
+                        [relatedFieldName]: related.id,
+                    }));
+                }
+            }
+            if (result.type === utils_1.ResourceState.ERROR) {
+                setFormErrorsState((prevState) => ({
+                    ...prevState,
+                    [itemLocaleCopyField]: (0, utils_1.getMessage)(result.errors[0]),
+                }));
+            }
+        }
+        catch (error) {
+            setFormErrorsState((prevState) => ({
+                ...prevState,
+                [itemLocaleCopyField]: (0, utils_1.getMessage)('popup.item.form.i18n.locale.error.generic'),
+            }));
+        }
+        setIsLoading(false);
+    }, [setIsLoading, setFormState, setFormErrorsState]);
+    const onChangeLocaleCopy = (0, react_1.useCallback)(({ target: { value } }) => {
+        resetCopyItemFormErrors();
+        onChange({ target: { name: itemLocaleCopyField, value } });
+    }, [onChange, itemLocaleCopyField]);
+    const itemCopyProps = (0, react_1.useMemo)(() => ({
+        intlLabel: {
+            id: (0, translations_1.getTradId)('popup.item.form.i18n.locale.label'),
+            defaultMessage: 'Copy details from'
+        },
+        placeholder: {
+            id: (0, translations_1.getTradId)('popup.item.form.i18n.locale.placeholder'),
+            defaultMessage: 'locale'
+        },
+    }), [translations_1.getTradId]);
+    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(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,
+    fieldsToDisable: [],
+    formErrors: {},
+    inputsPrefix: '',
+    onSubmit: (e) => e.preventDefault(),
+    requestError: null,
 };
-
 NavigationItemForm.propTypes = {
-  isLoading: PropTypes.bool,
-  fieldsToDisable: PropTypes.array,
-  formErrors: PropTypes.object.isRequired,
-  inputsPrefix: PropTypes.string,
-  data: PropTypes.object.isRequired,
-  onSubmit: PropTypes.func,
-  requestError: PropTypes.object,
-  contentTypes: PropTypes.array,
-  contentTypeEntities: PropTypes.array,
-  usedContentTypeEntities: PropTypes.array,
-  availableAudience: PropTypes.array,
-  additionalFields: PropTypes.array,
-  getContentTypeEntities: PropTypes.func.isRequired,
-  appendLabelPublicationStatus: PropTypes.func,
-  onCancel: PropTypes.func,
+    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,
 };
-
-export default NavigationItemForm;
+exports.default = NavigationItemForm;
+//# sourceMappingURL=index.js.map