strapi-plugin-navigation 2.0.4 → 2.0.7

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Formik } from 'formik';
-import { isEmpty, capitalize, isEqual } from 'lodash';
+import { isEmpty, capitalize, isEqual, orderBy } from 'lodash';
 
 import {
   CheckPermissions,
@@ -8,9 +8,11 @@ import {
   Form,
   useOverlayBlocker,
   useAutoReloadOverlayBlocker,
+  SettingsPageTitle,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
+import { Accordion, AccordionToggle, AccordionContent, AccordionGroup } from '@strapi/design-system/Accordion';
 import { Button } from '@strapi/design-system/Button';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
@@ -19,13 +21,8 @@ import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { ToggleInput } from '@strapi/design-system/ToggleInput';
 import { NumberInput } from '@strapi/design-system/NumberInput';
 import { Select, Option } from '@strapi/design-system/Select';
-import { Check, Refresh, Play } from '@strapi/icons';
-import { SettingsPageTitle } from '@strapi/helper-plugin';
-import {
-  Card,
-  CardBody,
-  CardContent,
-} from '@strapi/design-system/Card';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+import { Check, Refresh, Play, Information } from '@strapi/icons';
 
 import permissions from '../../permissions';
 import useNavigationConfig from '../../hooks/useNavigationConfig';
@@ -40,20 +37,29 @@ const SettingsPage = () => {
   const { lockAppWithAutoreload, unlockAppWithAutoreload } = useAutoReloadOverlayBlocker();
   const [isRestorePopupOpen, setIsRestorePopupOpen] = useState(false);
   const [isRestartRequired, setIsRestartRequired] = useState(false);
+  const [contentTypeExpanded, setContentTypeExpanded] = useState(undefined);
   const { data: navigationConfigData, isLoading: isConfigLoading, err: configErr, submitMutation, restoreMutation, restartMutation } = useNavigationConfig();
   const { data: allContentTypesData, isLoading: isContentTypesLoading, err: contentTypesErr } = useAllContentTypes();
   const isLoading = isConfigLoading || isContentTypesLoading;
   const isError = configErr || contentTypesErr;
-
-  const preparePayload = ({ selectedContentTypes, nameFields, audienceFieldChecked, allowedLevels }) => ({
+  const boxDefaultProps = {
+		background: "neutral0",
+		hasRadius: true,
+		shadow: "filterShadow",
+		padding: 6,
+	};
+  
+  const preparePayload = ({ selectedContentTypes, nameFields, audienceFieldChecked, allowedLevels, populate }) => ({
     contentTypes: selectedContentTypes,
     contentTypesNameFields: nameFields,
+    contentTypesPopulate: populate,
     additionalFields: audienceFieldChecked ? [navigationItemAdditionalFields.AUDIENCE] : [],
     allowedLevels: allowedLevels,
     gql: {
-      navigationItemRelated: selectedContentTypes.map(uid => allContentTypes.find(ct => ct.uid === uid).info.displayName)
+      navigationItemRelated: selectedContentTypes.map(uid => allContentTypes.find(ct => ct.uid === uid).info.displayName.replace(/\s+/g, ''))
     }
-  })
+  });
+
   const onSave = async (form) => {
     lockApp();
     const payload = preparePayload(form);
@@ -82,6 +88,7 @@ const SettingsPage = () => {
     unlockAppWithAutoreload();
   };
   const handleRestartDiscard = () => setIsRestartRequired(false);
+	const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
 
   const prepareNameFieldFor = (uid, current, value) => ({
     ...current,
@@ -104,8 +111,9 @@ const SettingsPage = () => {
   const allContentTypes = !isLoading && Object.values(allContentTypesData).filter(item => item.uid.includes('api::'));
   const selectedContentTypes = navigationConfigData?.contentTypes.map(item => item.uid);
   const audienceFieldChecked = navigationConfigData?.additionalFields.includes(navigationItemAdditionalFields.AUDIENCE);
-  const allowedLevels = navigationConfigData?.allowedLevels;
-  const nameFields = navigationConfigData?.contentTypesNameFields
+  const allowedLevels = navigationConfigData?.allowedLevels || 2;
+  const nameFields = navigationConfigData?.contentTypesNameFields || {}
+  const populate = navigationConfigData?.contentTypesPopulate || {}
 
   return (
     <>
@@ -119,6 +127,7 @@ const SettingsPage = () => {
             audienceFieldChecked,
             allowedLevels,
             nameFields,
+            populate,
           }}
           onSubmit={onSave}
         >
@@ -145,12 +154,7 @@ const SettingsPage = () => {
                       onClose={handleRestartDiscard}>
                       {getMessage('pages.settings.actions.restart.alert.description')}
                     </RestartAlert>)}
-                  <Box
-                    background="neutral0"
-                    hasRadius
-                    shadow="filterShadow"
-                    padding={6}
-                  >
+                  <Box {...boxDefaultProps} >
                     <Stack size={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.general.title')}
@@ -172,6 +176,75 @@ const SettingsPage = () => {
                             {allContentTypes.map((item) => <Option key={item.uid} value={item.uid}>{item.info.displayName}</Option>)}
                           </Select>
                         </GridItem>
+                        {!isEmpty(values.selectedContentTypes) && (
+                          <GridItem col={12}>
+                            <AccordionGroup
+                              label={getMessage('pages.settings.form.contentTypesSettings.label')}
+                              labelAction={<Tooltip description={getMessage('pages.settings.form.contentTypesSettings.tooltip')}>
+                                <Information aria-hidden={true} />
+                              </Tooltip>}>
+                              {orderBy(values.selectedContentTypes).map(uid => {
+                                const { attributes, info: { displayName } } = allContentTypes.find(item => item.uid == uid);
+                                const stringAttributes = Object.keys(attributes).filter(_ => attributes[_].type === 'string');
+                                const relationAttributes = Object.keys(attributes).filter(_ => attributes[_].type === 'relation');
+                                const key = `collectionSettings-${uid}`;
+                                return (<Accordion
+                                  expanded={contentTypeExpanded === key}
+                                  toggle={() => handleSetContentTypeExpanded(key)}
+                                  key={key}
+                                  id={key}
+                                  size="S">
+                                  <AccordionToggle title={displayName} togglePosition="left" />
+                                  <AccordionContent>
+                                    <Box padding={6}>
+                                      <Stack size={4}>
+                                        <Select
+                                          name={`collectionSettings-${uid}-entryLabel`}
+                                          label={getMessage('pages.settings.form.nameField.label')}
+                                          hint={getMessage(`pages.settings.form.populate.${isEmpty(stringAttributes) ? 'empty' : 'hint'}`)}
+                                          placeholder={getMessage('pages.settings.form.nameField.placeholder')}
+                                          onClear={() => null}
+                                          value={values.nameFields[uid] || []}
+                                          onChange={(value) => setFieldValue('nameFields', prepareNameFieldFor(uid, values.nameFields, value))}
+                                          multi
+                                          withTags
+                                          disabled={isRestartRequired || isEmpty(stringAttributes)}
+                                        >
+                                          {stringAttributes.map(key =>
+                                            (<Option key={uid + key} value={key}>{capitalize(key.split('_').join(' '))}</Option>))}
+                                        </Select>                                    
+                                        <Select
+                                          name={`collectionSettings-${uid}-populate`}
+                                          label={getMessage('pages.settings.form.populate.label')}
+                                          hint={getMessage(`pages.settings.form.populate.${isEmpty(relationAttributes) ? 'empty' : 'hint'}`)}
+                                          placeholder={getMessage('pages.settings.form.populate.placeholder')}
+                                          onClear={() => null}
+                                          value={values.populate[uid] || []}
+                                          onChange={(value) => setFieldValue('populate', prepareNameFieldFor(uid, values.populate, value))}
+                                          multi
+                                          withTags
+                                          disabled={isRestartRequired || isEmpty(relationAttributes)}
+                                        >
+                                          {relationAttributes.map(key =>
+                                            (<Option key={uid + key} value={key}>{capitalize(key.split('_').join(' '))}</Option>))}
+                                        </Select>
+                                      </Stack>
+                                    </Box>
+
+                                  </AccordionContent>
+                                </Accordion>);
+                              })}
+                            </AccordionGroup>
+                          </GridItem>)}
+                      </Grid>
+                    </Stack>
+                  </Box>
+                  <Box {...boxDefaultProps} >
+                    <Stack size={4}>
+                      <Typography variant="delta" as="h2">
+                        {getMessage('pages.settings.additional.title')}
+                      </Typography>
+                      <Grid gap={4}>
                         <GridItem col={3} s={6} xs={12}>
                           <NumberInput
                             name="allowedLevels"
@@ -183,20 +256,6 @@ const SettingsPage = () => {
                             disabled={isRestartRequired}
                           />
                         </GridItem>
-                      </Grid>
-                    </Stack>
-                  </Box>
-                  <Box
-                    background="neutral0"
-                    hasRadius
-                    shadow="filterShadow"
-                    padding={6}
-                  >
-                    <Stack size={4}>
-                      <Typography variant="delta" as="h2">
-                        {getMessage('pages.settings.additional.title')}
-                      </Typography>
-                      <Grid gap={4}>
                         <GridItem col={6} s={12} xs={12}>
                           <ToggleInput
                             name="audienceFieldChecked"
@@ -212,62 +271,7 @@ const SettingsPage = () => {
                       </Grid>
                     </Stack>
                   </Box>
-                  {!isEmpty(values.selectedContentTypes) && (
-                    <Box
-                      background="neutral0"
-                      hasRadius
-                      shadow="filterShadow"
-                      padding={6}
-                    >
-                      <Stack size={4}>
-                        <Typography variant="delta" as="h2">
-                          {getMessage('pages.settings.nameField.title')}
-                        </Typography>
-                        <Grid gap={4}>
-                          {values.selectedContentTypes.map(uid => {
-                            const { attributes, info: { displayName } } = allContentTypes.find(item => item.uid == uid);
-                            const stringAttributes = Object.keys(attributes).filter(_ => attributes[_].type === 'string');
-
-                            return !isEmpty(stringAttributes) && (
-                              <GridItem key={`collectionSettings-${uid}`} col={6} s={12} xs={12}>
-                                <Card background="primary100" borderColor="primary200">
-                                  <CardBody>
-                                    <CardContent style={{ width: '100%' }}>
-                                      <Stack size={4}>
-                                        <Typography variant="epsilon" fontWeight="semibold" as="h3">{displayName}</Typography>
-                                        <Select
-                                          name={`collectionSettings-${uid}-entryLabel`}
-                                          label={getMessage('pages.settings.form.nameField.label')}
-                                          hint={getMessage('pages.settings.form.nameField.hint')}
-                                          placeholder={getMessage('pages.settings.form.nameField.placeholder')}
-                                          onClear={() => null}
-                                          value={values.nameFields[uid] || []}
-                                          onChange={(value) => setFieldValue('nameFields', prepareNameFieldFor(uid, values.nameFields, value))}
-                                          multi
-                                          withTags
-                                          disabled={isRestartRequired}
-                                        >
-                                          {stringAttributes.map(key =>
-                                            (<Option key={uid + key} value={key}>{capitalize(key.split('_').join(' '))}</Option>))}
-                                        </Select>
-                                      </Stack>
-                                    </CardContent>
-                                  </CardBody>
-                                </Card>
-                              </GridItem>
-                            );
-                          })
-                          }
-                        </Grid>
-                      </Stack>
-                    </Box>
-                  )}
-                  <Box
-                    background="neutral0"
-                    hasRadius
-                    shadow="filterShadow"
-                    padding={6}
-                  >
+                  <Box {...boxDefaultProps} >
                     <Stack size={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.restoring.title')}
@@ -308,4 +312,4 @@ const SettingsPage = () => {
 }
 
 
-export default SettingsPage;
+export default SettingsPage;

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

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { debounce, find, get, 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';
@@ -10,10 +11,7 @@ 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 slugify from 'slugify';
 import { extractRelatedItemLabel } from '../../utils/parsers';
 import { form as formDefinition } from './utils/form';
 import { checkFormValidity } from '../../utils/form';
@@ -76,18 +74,19 @@ const NavigationItemForm = ({
   };
 
   const sanitizePayload = (payload = {}) => {
-    const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, ...purePayload } = payload;
-    const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
+    const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, type, ...purePayload } = payload;
     const relatedId = related
     const relatedCollectionType = relatedType;
+    const title = payload.title || relatedSelectOptions.find(v => v.key == relatedId)?.label
     return {
       ...purePayload,
+      title,
+      type,
       menuAttached: isNil(menuAttached) ? false : menuAttached,
-      type: sanitizedType,
-      path: sanitizedType === navigationItemType.INTERNAL ? purePayload.path : undefined,
-      externalPath: sanitizedType === navigationItemType.EXTERNAL ? purePayload.externalPath : undefined,
-      related: relatedId,
-      relatedType: relatedCollectionType,
+      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,
       uiRouterKey: generateUiRouterKey(purePayload.title, relatedId, relatedCollectionType),
     };
@@ -107,11 +106,8 @@ const NavigationItemForm = ({
     }
   };
 
-  const onTypeChange = ({ target: { name, value } }) =>
-    onChange({ target: { name, value: value ? navigationItemType.INTERNAL : navigationItemType.EXTERNAL } });
-
   const onAudienceChange = (value) => {
-    onChange({target: {name: `${inputsPrefix}audience`, value}});
+    onChange({ target: { name: `${inputsPrefix}audience`, value } });
   }
 
   const onChange = ({ target: { name, value } }) => {
@@ -146,6 +142,20 @@ const NavigationItemForm = ({
     [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 relatedSelectOptions = contentTypeEntities
     .filter((item) => {
       const usedContentTypeEntitiesOfSameType = usedContentTypeEntities
@@ -176,7 +186,9 @@ const NavigationItemForm = ({
   const isExternal = form.type === navigationItemType.EXTERNAL;
   const pathSourceName = isExternal ? 'externalPath' : 'path';
 
-  const submitDisabled = (form.type !== navigationItemType.EXTERNAL) && isNil(form.related);
+  const submitDisabled =
+    (form.type === navigationItemType.INTERNAL && isNil(get(form, `${inputsPrefix}related`))) ||
+    (form.type === navigationItemType.WRAPPER && isNil(get(form, `${inputsPrefix}title`)));
 
   const debouncedSearch = useCallback(
     debounce(nextValue => setContentTypeSearchQuery(nextValue), 500),
@@ -283,7 +295,21 @@ const NavigationItemForm = ({
                   value={get(form, `${inputsPrefix}title`, '')}
                 />
               </GridItem>
-              <GridItem key={`${inputsPrefix}menuAttached`} col={6} lg={12}>
+              <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'),
@@ -297,19 +323,6 @@ const NavigationItemForm = ({
                   disabled={!(data.isMenuAllowedLevel && data.parentAttachedToMenu)}
                 />
               </GridItem>
-              <GridItem key={`${inputsPrefix}type`} col={6} lg={12}>
-                <GenericInput
-                  intlLabel={{
-                    id: getTradId('popup.item.form.type.label'),
-                    defaultMessage: 'Internal link',
-                  }}
-                  name={`${inputsPrefix}type`}
-                  type='bool'
-                  error={get(formErrors, `${inputsPrefix}type.id`)}
-                  onChange={onTypeChange}
-                  value={get(form, `${inputsPrefix}type`, '') === navigationItemType.INTERNAL}
-                />
-              </GridItem>
               <GridItem key={`${inputsPrefix}path`} col={12}>
                 <GenericInput
                   intlLabel={{
@@ -328,7 +341,7 @@ const NavigationItemForm = ({
                   description={generatePreviewPath()}
                 />
               </GridItem>
-              {!isExternal && (
+              {get(form, `${inputsPrefix}type`) === navigationItemType.INTERNAL && (
                 <>
                   <GridItem col={6} lg={12}>
                     <GenericInput
@@ -400,8 +413,14 @@ const NavigationItemForm = ({
                     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>

package/admin/src/pages/View/components/NavigationItemPopup/NavigationItemPopupHeader.js

@@ -1,16 +1,16 @@
 
 
 import React from 'react';
-import { ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { getMessage } from '../../../../utils';
 
 export const NavigationItemPopupHeader = ({isNewItem}) => {
 	return (
 		<ModalHeader>
-			<ButtonText textColor="neutral800" as="h2" id="asset-dialog-title">
+			<Typography variant="omega" fontWeight="bold" textColor="neutral800" as="h2" id="asset-dialog-title">
 				{getMessage(`popup.item.header.${isNewItem ? 'new' : 'edit'}`)}
-			</ButtonText>
+			</Typography>
 		</ModalHeader>
 	);
 };

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

@@ -120,6 +120,44 @@ const View = () => {
   }, []);
   const filteredList = !isSearchEmpty ? filteredListFactory(changedActiveNavigation.items, (item) => item?.title.includes(searchValue)) : [];
 
+  const changeCollapseItemDeep = (item, collapse) => {
+    if (item.collapsed !== collapse) {
+      return {
+        ...item,
+        collapsed: collapse,
+        updated: true,
+        items: item.items?.map(el => changeCollapseItemDeep(el, collapse))
+      }
+    }
+    return {
+      ...item,
+      items: item.items?.map(el => changeCollapseItemDeep(el, collapse))
+    }
+  }
+
+  const handleCollapseAll = () => {
+    handleChangeNavigationData({
+      ...changedActiveNavigation,
+      items: changedActiveNavigation.items.map(item => changeCollapseItemDeep(item, true))
+    }, true);
+    setStructureChanged(true);
+  }
+
+  const handleExpandAll = () => {
+    handleChangeNavigationData({
+      ...changedActiveNavigation,
+      items: changedActiveNavigation.items.map(item => changeCollapseItemDeep(item, false))
+    }, true);
+    setStructureChanged(true);
+  }
+
+  const handleItemReOrder = (item, newOrder) => {
+    handleSubmitNavigationItem({
+      ...item,
+      order: newOrder,
+    })
+  }
+
   const handleItemRemove = (item) => {
     handleSubmitNavigationItem({
       ...item,
@@ -134,6 +172,14 @@ const View = () => {
     });
   };
 
+  const handleItemToggleCollapse = (item) => {
+    handleSubmitNavigationItem({
+      ...item,
+      collapsed: !item.collapsed,
+      updated: true,
+    });
+  }
+
   const handleItemEdit = (
     item,
     levelPath = '',
@@ -157,6 +203,33 @@ const View = () => {
     setSearchValue('');
   }
 
+  const endActions = [
+    {
+      onClick: handleExpandAll,
+      disabled: isLoadingForSubmit,
+      type: "submit",
+      variant: 'tertiary',
+      tradId: 'header.action.expandAll',
+      margin: '8px',
+    },
+    {
+      onClick: handleCollapseAll,
+      disabled: isLoadingForSubmit,
+      type: "submit",
+      variant: 'tertiary',
+      tradId: 'header.action.collapseAll',
+      margin: '8px',
+    },
+    {
+      onClick: addNewNavigationItem,
+      startIcon: <PlusIcon />,
+      disabled: isLoadingForSubmit,
+      type: "submit",
+      tradId: 'header.action.newItem',
+      margin: '16px',
+    },
+  ]
+
   return (
     <Main labelledBy="title" aria-busy={isLoadingForSubmit}>
       <NavigationHeader
@@ -173,18 +246,15 @@ const View = () => {
           <>
             <NavigationContentHeader
               startActions={<Search value={searchValue} setValue={setSearchValue} />}
-              endActions={<Button
-                onClick={addNewNavigationItem}
-                startIcon={<PlusIcon />}
-                disabled={isLoadingForSubmit}
-                type="submit"
-              >
-                {formatMessage(getTrad('header.action.newItem'))}
-              </Button>}
+              endActions={endActions.map(({ tradId, margin, ...item }, i) =>
+                <Box marginLeft={margin} key={i}>
+                  <Button {...item}> {formatMessage(getTrad(tradId))} </Button>
+                </Box>
+              )}
             />
             {isEmpty(changedActiveNavigation.items || []) && (
               <Flex direction="column" minHeight="400px" justifyContent="center">
-                <Icon as={EmptyDocumentsIcon} width="160px" height="88px" color=""/>
+                <Icon as={EmptyDocumentsIcon} width="160px" height="88px" color="" />
                 <Box padding={4}>
                   <Typography variant="beta" textColor="neutral600">{formatMessage(getTrad('empty'))}</Typography>
                 </Box>
@@ -206,6 +276,8 @@ const View = () => {
                 onItemRemove={handleItemRemove}
                 onItemEdit={handleItemEdit}
                 onItemRestore={handleItemRestore}
+                onItemReOrder={handleItemReOrder}
+                onItemToggleCollapse={handleItemToggleCollapse}
                 displayFlat={!isSearchEmpty}
                 root
                 error={error}

package/admin/src/pages/View/utils/enums.js

@@ -1,6 +1,7 @@
 export const navigationItemType = {
   INTERNAL: "INTERNAL",
   EXTERNAL: "EXTERNAL",
+  WRAPPER: "WRAPPER",
 };
 
 export const navigationItemAdditionalFields = {

package/admin/src/pages/View/utils/parsers.js

@@ -24,12 +24,14 @@ export const transformItemToRESTPayload = (
     order,
     audience = [],
     items = [],
+    collapsed,
   } = item;
   const isExternal = type === navigationItemType.EXTERNAL;
+  const isWrapper = type === navigationItemType.WRAPPER;
   const { contentTypes = [] } = config;
 
   const parsedRelated = Number(related);
-  const relatedId = isExternal || isNaN(parsedRelated) ? related?.value || related : parsedRelated;
+  const relatedId = isExternal || isWrapper || isNaN(parsedRelated) ? related?.value || related : parsedRelated;
 
   const relatedContentType = relatedType ?
     find(contentTypes,
@@ -46,13 +48,14 @@ export const transformItemToRESTPayload = (
     removed,
     order,
     uiRouterKey,
+    collapsed,
     menuAttached: itemAttachedToMenu,
     audience: audience.map((audienceItem) =>
       isObject(audienceItem) ? audienceItem.value : audienceItem,
     ),
     path: isExternal ? undefined : path,
     externalPath: isExternal ? externalPath : undefined,
-    related: isExternal
+    related: isExternal || isWrapper
       ? undefined
       : [
         {
@@ -274,7 +277,7 @@ export const usedContentTypes = (items = []) => items.flatMap(
 
 export const isRelationCorrect = ({ related, type }) => {
   const isRelationDefined = !isNil(related);
-  return type === navigationItemType.EXTERNAL || (type === navigationItemType.INTERNAL && isRelationDefined);
+  return type !== navigationItemType.INTERNAL || (type === navigationItemType.INTERNAL && isRelationDefined);
 };
 
 export const isRelationPublished = ({ relatedRef, relatedType = {}, type, isCollection }) => {