strapi-plugin-navigation 2.0.6 → 2.0.7

package/README.md

@@ -41,6 +41,7 @@ Strapi Navigation Plugin provides a website navigation / menu builder feature fo
 - **Navigation Public API:** Simple and ready for use API endpoint for consuming the navigation structure you've created
 - **Visual builder:** Elegant and easy to use visual builder
 - **Any Content Type relation:** Navigation can by linked to any of your Content Types by default. Simply, you're controlling it and also limiting available content types by configuration props
+- **Different types of navigation items:** Create navigation with items linked to internal types, to external links or wrapper elements to keep structure clean 
 - **Multiple navigations:** Create as many Navigation containers as you want, setup them and use in the consumer application
 - **Customizable:** Possibility to customize the options like: available Content Types, Maximum level for "attach to menu", Additional fields (audience)
 - **[Audit log](https://github.com/VirtusLab/strapi-molecules/tree/master/packages/strapi-plugin-audit-log):** integration with Strapi Molecules Audit Log plugin that provides changes track record

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components'
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+import { Icon } from '@strapi/design-system/Icon';
+import { CarretUp, CarretDown } from '@strapi/icons';
+
+const Wrapper = styled.div`
+	border-radius: 50%;
+	background: #DCDCE4;
+	width: 25px;
+	height: 25px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-right: 8px;
+`;
+
+const CollapseButton = ({ toggle, collapsed, itemsCount }) => (
+	<Flex justifyContent='space-between' alignItems='center' onClick={toggle} cursor="pointer" style={{ marginRight: '16px' }}>
+		<Wrapper>
+			{ collapsed ?
+				<Icon as={CarretDown} width='7px' height='4px' /> :
+				<Icon as={CarretUp} width='7px' height='4px' />
+			}
+		</Wrapper>
+		<Typography variant="pi">{itemsCount} nested items</Typography>
+	</Flex >
+);
+
+export default CollapseButton;

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

@@ -4,15 +4,15 @@ import { Badge } from '@strapi/design-system/Badge';
 const ItemCardBadge = styled(Badge)`
 		border: 1px solid ${({ theme, borderColor }) => theme.colors[borderColor]};
 
-		${ props => props.small && `
-			padding: ${props.theme.spaces[1]};
-			margin: 0px ${props.theme.spaces[3]};
+		${ ({small, theme}) => small && `
+			padding: ${theme.spaces[1]} ${theme.spaces[2]};
+			margin: 0px ${theme.spaces[3]};
 			vertical-align: middle;
 
 			cursor: default;
 
 			span {
-				font-size: .55rem;
+				font-size: .65rem;
 				line-height: 1;
 				vertical-align: middle;
 			}

package/admin/src/components/Item/ItemCardHeader/Wrapper.js

@@ -9,10 +9,6 @@ const CardItemTitle = styled(CardTitle)`
 	justify-content: space-between;
 	align-items: center;
 	
-	color: ${({ theme }) => theme.colors.neutral800};
-	font-size: ${({ theme }) => theme.fontSizes[2]};
-	font-weight: ${({ theme }) => theme.fontWeights.bold};
-
 	> div > * {
 			margin: 0px ${({ theme }) => theme.spaces[1]};
 	}

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

@@ -14,16 +14,17 @@ const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit,
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
-				<Icon as={icon} />
+				<IconButton ref={dragRef} label="Drag" icon={<Drag />} />
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>
 				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
 					{path}
 				</Typography>
+				<Icon as={icon}/>
 			</Flex>
 			<Flex alignItems="center" style={{ zIndex: 2 }}>
-				{removed && 
+				{removed &&
 					(<ItemCardBadge
 						borderColor={`danger200`}
 						backgroundColor={`danger100`}
@@ -36,10 +37,7 @@ const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit,
 				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<Pencil />} />
 				{removed ?
 					<IconButton onClick={onItemRestore} label="Restore" icon={<Refresh />} /> :
-					<>
-						<IconButton ref={dragRef} label="Drag" icon={<Drag />} />
-						<IconButton onClick={onItemRemove} label="Remove" icon={<Trash />} />
-					</>
+					<IconButton onClick={onItemRemove} label="Remove" icon={<Trash />} />
 				}
 			</Flex>
 		</Wrapper>

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

@@ -3,7 +3,7 @@ import styled from "styled-components";
 const Wrapper = styled.div`
 position: relative;
 margin-top: ${({theme}) => theme.spaces[2]};
-margin-left: ${({ theme, level }) => level && theme.spaces[8]}};
+margin-left: ${({ level }) => level && '54px'}};
 
 ${({ level, theme, isLast }) => level && `
 	&::before {

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

@@ -11,7 +11,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight, Link as LinkIcon, Earth, Plus } from '@strapi/icons';
+import { ArrowRight, Link as LinkIcon, Earth, Plus, Cog } from '@strapi/icons';
 
 import { navigationItemType } from '../../pages/View/utils/enums';
 import ItemCardHeader from './ItemCardHeader';
@@ -21,6 +21,7 @@ import { extractRelatedItemLabel } from '../../pages/View/utils/parsers';
 import ItemCardBadge from './ItemCardBadge';
 import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
 import { getMessage, ItemTypes } from '../../utils';
+import CollapseButton from '../CollapseButton';
 
 const Item = (props) => {
   const {
@@ -36,6 +37,7 @@ const Item = (props) => {
     onItemRestore,
     onItemEdit,
     onItemReOrder,
+    onItemToggleCollapse,
     error,
     displayChildren,
     config = {},
@@ -49,10 +51,12 @@ const Item = (props) => {
     removed,
     externalPath,
     menuAttached,
+    collapsed,
   } = item;
 
   const { contentTypes, contentTypesNameFields } = config;
   const isExternal = type === navigationItemType.EXTERNAL;
+  const isWrapper = type === navigationItemType.WRAPPER;
   const isPublished = relatedRef && relatedRef?.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
   const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
@@ -97,7 +101,7 @@ const Item = (props) => {
   const [{ isDragging }, drag, dragPreview] = useDrag({
     type: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
     item: () => {
-      return { ...item };
+      return { ...item, relatedRef };
     },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
@@ -119,7 +123,7 @@ const Item = (props) => {
             <ItemCardHeader
               title={title}
               path={isExternal ? externalPath : absolutePath}
-              icon={isExternal ? Earth : LinkIcon}
+              icon={isExternal ? Earth : isWrapper ? Cog : LinkIcon}
               onItemRemove={() => onItemRemove({
                 ...item,
                 relatedRef,
@@ -128,6 +132,7 @@ const Item = (props) => {
                 ...item,
                 isMenuAllowedLevel,
                 isParentAttachedToMenu,
+                relatedRef,
               }, levelPath, isParentAttachedToMenu)}
               onItemRestore={() => onItemRestore({
                 ...item,
@@ -138,49 +143,50 @@ const Item = (props) => {
             />
           </CardBody>
           <Divider />
-          {!isExternal && (<CardBody style={{ margin: '8px' }}>
-            <Flex style={{ width: '100%' }} direction="row" alignItems="center" justifyContent="space-between">
-              <TextButton
-                disabled={removed}
-                startIcon={<Plus />}
-                onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
-              >
-                <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
-                  {getMessage("components.navigationItem.action.newItem")}
-                </Typography>
-              </TextButton>
-              {relatedItemLabel && (<Box>
-                <ItemCardBadge
-                  borderColor={`${relatedBadgeColor}200`}
-                  backgroundColor={`${relatedBadgeColor}100`}
-                  textColor={`${relatedBadgeColor}600`}
-                  className="action"
-                  small
-                >
-                  {getMessage({
-                    id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`, props: {
-                      type: relatedTypeLabel
-                    }
-                  })}
-                </ItemCardBadge>
-                <Typography variant="pi" fontWeight="bold" textColor="neutral600">
-                  {relatedItemLabel}
-                  <Link
-                    to={`/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`}
-                    endIcon={<ArrowRight />}>&nbsp;</Link>
-                </Typography>
-              </Box>)
-              }
-            </Flex>
-          </CardBody>)}
+          {!isExternal && (
+            <CardBody style={{ padding: '8px' }}>
+              <Flex style={{ width: '100%' }} direction="row" alignItems="center" justifyContent="space-between">
+                <Flex>
+                  {!isEmpty(item.items) && <CollapseButton toggle={() => onItemToggleCollapse({...item, relatedRef})} collapsed={collapsed} itemsCount={item.items.length}/>}
+                  <TextButton
+                    disabled={removed}
+                    startIcon={<Plus />}
+                    onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
+                  >
+                    <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
+                      {getMessage("components.navigationItem.action.newItem")}
+                    </Typography>
+                  </TextButton>
+                </Flex>
+                {relatedItemLabel && (
+                  <Flex justifyContent='center' alignItems='center'>
+                    <ItemCardBadge
+                      borderColor={`${relatedBadgeColor}200`}
+                      backgroundColor={`${relatedBadgeColor}100`}
+                      textColor={`${relatedBadgeColor}600`}
+                      className="action"
+                      small
+                    >
+                      {getMessage({id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`})}
+                    </ItemCardBadge>
+                    <Typography variant="omega" textColor='neutral600'>{relatedTypeLabel}&nbsp;/&nbsp;</Typography>
+                    <Typography variant="omega" textColor='neutral800'>{relatedItemLabel}</Typography>
+                      <Link
+                        to={`/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`}
+                        endIcon={<ArrowRight />}>&nbsp;</Link>
+                  </Flex>)
+                }
+              </Flex>
+            </CardBody>)}
         </div>
       </Card>
-      {hasChildren && !removed && <List
+      {hasChildren && !removed && !collapsed && <List
         onItemLevelAdd={onItemLevelAdd}
         onItemRemove={onItemRemove}
         onItemEdit={onItemEdit}
         onItemRestore={onItemRestore}
         onItemReOrder={onItemReOrder}
+        onItemToggleCollapse={onItemToggleCollapse}
         error={error}
         allowedLevels={allowedLevels}
         isParentAttachedToMenu={menuAttached}
@@ -204,7 +210,8 @@ Item.propTypes = {
     path: PropTypes.string,
     externalPath: PropTypes.string,
     related: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    menuAttached: PropTypes.bool
+    menuAttached: PropTypes.bool,
+    collapsed: PropTypes.bool,
   }).isRequired,
   relatedRef: PropTypes.object,
   level: PropTypes.number,
@@ -214,6 +221,7 @@ Item.propTypes = {
   onItemLevelAdd: PropTypes.func.isRequired,
   onItemRemove: PropTypes.func.isRequired,
   onItemReOrder: PropTypes.func.isRequired,
+  onItemToggleCollapse: PropTypes.func.isRequired,
   config: PropTypes.shape({
     contentTypes: PropTypes.array.isRequired,
     contentTypesNameFields: PropTypes.object.isRequired,

package/admin/src/components/NavigationItemList/Wrapper.js

@@ -11,7 +11,7 @@ const Wrapper = styled.div`
 
       position: absolute;
       top: -${theme.spaces[2]};
-      left: ${theme.spaces[4]};
+      left: 30px;
       
       border: 0px solid transparent;
       border-left: 4px solid ${theme.colors.neutral300};

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

@@ -16,6 +16,7 @@ const List = ({
   onItemRemove,
   onItemRestore,
   onItemReOrder,
+  onItemToggleCollapse,
   displayFlat,
   contentTypes,
   contentTypesNameFields,
@@ -38,6 +39,7 @@ const List = ({
           onItemRemove={onItemRemove}
           onItemEdit={onItemEdit}
           onItemReOrder={onItemReOrder}
+          onItemToggleCollapse={onItemToggleCollapse}
           error={error}
           displayChildren={displayFlat}
           config={{
@@ -60,6 +62,7 @@ List.propTypes = {
   onItemRestore: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
   onItemReOrder: PropTypes.func.isRequired,
+  onItemToggleCollapse: PropTypes.func.isRequired,
   contentTypes: PropTypes.array.isRequired,
   contentTypesNameFields: PropTypes.object.isRequired
 };

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

@@ -49,9 +49,10 @@ const SettingsPage = () => {
 		padding: 6,
 	};
   
-  const preparePayload = ({ selectedContentTypes, nameFields, audienceFieldChecked, allowedLevels }) => ({
+  const preparePayload = ({ selectedContentTypes, nameFields, audienceFieldChecked, allowedLevels, populate }) => ({
     contentTypes: selectedContentTypes,
     contentTypesNameFields: nameFields,
+    contentTypesPopulate: populate,
     additionalFields: audienceFieldChecked ? [navigationItemAdditionalFields.AUDIENCE] : [],
     allowedLevels: allowedLevels,
     gql: {
@@ -110,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 (
     <>
@@ -125,6 +127,7 @@ const SettingsPage = () => {
             audienceFieldChecked,
             allowedLevels,
             nameFields,
+            populate,
           }}
           onSubmit={onSave}
         >
@@ -183,6 +186,7 @@ const SettingsPage = () => {
                               {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}
@@ -197,20 +201,36 @@ const SettingsPage = () => {
                                         <Select
                                           name={`collectionSettings-${uid}-entryLabel`}
                                           label={getMessage('pages.settings.form.nameField.label')}
-                                          hint={getMessage('pages.settings.form.nameField.hint')}
+                                          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}
+                                          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>);
                               })}
@@ -226,16 +246,16 @@ const SettingsPage = () => {
                       </Typography>
                       <Grid gap={4}>
                         <GridItem col={3} s={6} xs={12}>
-                            <NumberInput
-                              name="allowedLevels"
-                              label={getMessage('pages.settings.form.allowedLevels.label')}
-                              placeholder={getMessage('pages.settings.form.allowedLevels.placeholder')}
-                              hint={getMessage('pages.settings.form.allowedLevels.hint')}
-                              onValueChange={(value) => setFieldValue('allowedLevels', value, false)}
-                              value={values.allowedLevels}
-                              disabled={isRestartRequired}
-                            />
-                          </GridItem>
+                          <NumberInput
+                            name="allowedLevels"
+                            label={getMessage('pages.settings.form.allowedLevels.label')}
+                            placeholder={getMessage('pages.settings.form.allowedLevels.placeholder')}
+                            hint={getMessage('pages.settings.form.allowedLevels.hint')}
+                            onValueChange={(value) => setFieldValue('allowedLevels', value, false)}
+                            value={values.allowedLevels}
+                            disabled={isRestartRequired}
+                          />
+                        </GridItem>
                         <GridItem col={6} s={12} xs={12}>
                           <ToggleInput
                             name="audienceFieldChecked"

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,20 +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),
     };
@@ -109,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 } }) => {
@@ -148,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
@@ -178,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),
@@ -285,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'),
@@ -299,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={{
@@ -330,7 +341,7 @@ const NavigationItemForm = ({
                   description={generatePreviewPath()}
                 />
               </GridItem>
-              {!isExternal && (
+              {get(form, `${inputsPrefix}type`) === navigationItemType.INTERNAL && (
                 <>
                   <GridItem col={6} lg={12}>
                     <GenericInput
@@ -402,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/index.js

@@ -120,6 +120,37 @@ 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,
@@ -141,6 +172,14 @@ const View = () => {
     });
   };
 
+  const handleItemToggleCollapse = (item) => {
+    handleSubmitNavigationItem({
+      ...item,
+      collapsed: !item.collapsed,
+      updated: true,
+    });
+  }
+
   const handleItemEdit = (
     item,
     levelPath = '',
@@ -164,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
@@ -180,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>
@@ -214,6 +277,7 @@ const View = () => {
                 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 }) => {

package/admin/src/translations/en.json

@@ -3,6 +3,8 @@
 	"header.title": "Navigation",
 	"header.description": "Define your portal navigation",
 	"header.action.newItem": "New Item",
+	"header.action.collapseAll": "Collapse All",
+	"header.action.expandAll": "Expand All",
 	"submit.cta.cancel": "Cancel",
 	"submit.cta.save": "Save",
 	"empty": "Your navigation is empty",
@@ -20,12 +22,14 @@
 	"popup.item.form.externalPath.placeholder": "Link to the external source",
 	"popup.item.form.externalPath.validation.type": "This value is not a proper url.",
 	"popup.item.form.menuAttached.label": "Attach to menu",
-	"popup.item.form.type.label": "Internal link",
+	"popup.item.form.type.label": "Navigation item type",
 	"popup.item.form.type.internal.label": "Internal source",
 	"popup.item.form.type.external.label": "External source",
+	"popup.item.form.type.wrapper.label": "Wrapper element",
 	"popup.item.form.type.external.description": "Output path: {value}",
 	"popup.item.form.audience.label": "Audience",
 	"popup.item.form.audience.placeholder": "Select audience...",
+	"popup.item.form.audience.empty": "There are no more audiences",
 	"popup.item.form.relatedSection.label": "Relation to",
 	"popup.item.form.relatedType.label": "Content Type",
 	"popup.item.form.relatedType.placeholder": "Select content type...",
@@ -81,12 +85,17 @@
 	"pages.settings.form.nameField.label": "Name fields",
 	"pages.settings.form.nameField.placeholder": "Select at least one or leave empty to apply defaults",
 	"pages.settings.form.nameField.hint": "If left empty name field is going to take following ordered fields: \"title\", \"subject\" and \"name\"",
+	"pages.settings.form.nameField.empty": "This content type doesn't have any string attributes",
+	"pages.settings.form.populate.label": "Fields to populate",
+	"pages.settings.form.populate.placeholder": "Select at least one or leave empty to disable populating relation fields",
+	"pages.settings.form.populate.hint": "Selected relation fields will be populated inside API responses",
+	"pages.settings.form.populate.empty": "This content type doesn't have any relation fields",
 	"pages.settings.form.contentTypesSettings.label": "Content types",
 	"pages.settings.form.contentTypesSettings.tooltip": "Custom configuration per content type",
 	"components.navigationItem.action.newItem": "Add nested item",
 	"components.navigationItem.badge.removed": "Removed",
-	"components.navigationItem.badge.draft": "{type}: Draft",
-	"components.navigationItem.badge.published": "{type}: Published",
+	"components.navigationItem.badge.draft": "Draft",
+	"components.navigationItem.badge.published": "Published",
 	"components.confirmation.dialog.button.cancel": "Cancel",
 	"components.confirmation.dialog.button.confirm": "Confirm",
 	"components.confirmation.dialog.description": "Do you want to continue?",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",

package/server/bootstrap.js

@@ -42,30 +42,11 @@ module.exports = async ({ strapi }) => {
   }
   
   // Initialize configuration
-  const pluginStore = strapi.store({
-    environment: '',
-    type: 'plugin',
-    name: 'navigation',
-  });
-
-  const config = await pluginStore.get({ key: 'config' });
-  const pluginDefaultConfig = await strapi.plugin('navigation').config
-  const defaultConfigValue = {
-    additionalFields: pluginDefaultConfig('additionalFields'),
-    contentTypes: pluginDefaultConfig('contentTypes'),
-    contentTypesNameFields: pluginDefaultConfig('contentTypesNameFields'),
-    allowedLevels: pluginDefaultConfig('allowedLevels'),
-    gql: pluginDefaultConfig('gql'),
-  }
-  
-  if (!config) {
-    pluginStore.set({
-      key: 'config', value: defaultConfigValue
-    });
-  }
+  const config = await strapi.plugin('navigation').service('navigation').setDefaultConfig()
 
+  // Initialize graphql configuration
   if (strapi.plugin('graphql')) {
     const graphqlConfiguration = require('./graphql')
-    await graphqlConfiguration({ strapi, config: config || defaultConfigValue });
+    await graphqlConfiguration({ strapi, config });
   }
 };

package/server/config/index.js

@@ -3,6 +3,7 @@ module.exports = {
 		additionalFields: [],
 		contentTypes: [],
 		contentTypesNameFields: {},
+		contentTypesPopulate: {},
 		allowedLevels: 2
 	}
 }

package/server/config.js

@@ -3,6 +3,7 @@ module.exports = {
 		additionalFields: [],
 		contentTypes: [],
 		contentTypesNameFields: {},
+		contentTypesPopulate: {},
 		allowedLevels: 2
 	}
 }

package/server/content-types/navigation-item/lifecycle.js

@@ -10,6 +10,7 @@ module.exports = {
   type: {
     INTERNAL: 'INTERNAL',
     EXTERNAL: 'EXTERNAL',
+    WRAPPER: 'WRAPPER',
   },
   additionalFields: {
     AUDIENCE: 'audience',

package/server/content-types/navigation-item/schema.json

@@ -37,7 +37,8 @@
       "type": "enumeration",
       "enum": [
         "INTERNAL",
-        "EXTERNAL"
+        "EXTERNAL",
+        "WRAPPER"
       ],
       "default": "INTERNAL",
       "configurable": false
@@ -65,6 +66,11 @@
       "default": 0,
       "configurable": false
     },
+    "collapsed": {
+      "type": "boolean",
+      "default": false,
+      "configurable": false
+    },
     "related": {
       "type": "relation",
       "relation": "oneToOne",

package/server/graphql/types/content-types-name-fields.js

@@ -1,8 +1,8 @@
-module.exports = ({ nexus }) => nexus.objectType({
+module.exports = ({ nexus, strapi }) => nexus.objectType({
   name: "ContentTypesNameFields",
   async definition(t) {
 		t.nonNull.list.nonNull.string("default")
-		const pluginStore = strapi.store({ type: 'plugin', name: 'navigation' });
+		const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore();
 		const config = await pluginStore.get({ key: 'config' });
 		const contentTypesNameFields = config.contentTypesNameFields;
 		Object.keys(contentTypesNameFields || {}).forEach(key => t.nonNull.list.string(key))

package/server/services/navigation.js

@@ -72,10 +72,11 @@ module.exports = ({ strapi }) => {
     // Get plugin config
     async config(viaSettingsPage = false) {
       const { audienceModel, service } = utilsFunctions.extractMeta(strapi.plugins);
-      const pluginStore = await strapi.store({ type: 'plugin', name: 'navigation' });
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
       const config = await pluginStore.get({ key: 'config' });
       const additionalFields = config.additionalFields;
       const contentTypesNameFields = config.contentTypesNameFields;
+      const contentTypesPopulate = config.contentTypesPopulate;
       const allowedLevels = config.allowedLevels;
       const isGQLPluginEnabled = !isNil(strapi.plugin('graphql'));
 
@@ -86,6 +87,9 @@ module.exports = ({ strapi }) => {
           default: contentTypesNameFieldsDefaults,
           ...(isObject(contentTypesNameFields) ? contentTypesNameFields : {}),
         },
+        contentTypesPopulate: {
+          ...(isObject(contentTypesPopulate) ? contentTypesPopulate : {}),
+        },
         allowedLevels,
         additionalFields,
         isGQLPluginEnabled: viaSettingsPage ? isGQLPluginEnabled : undefined,
@@ -111,28 +115,42 @@ module.exports = ({ strapi }) => {
     },
 
     async updateConfig(newConfig) {
-      const pluginStore = await strapi.store({ type: 'plugin', name: 'navigation' });
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
       await pluginStore.set({ key: 'config', value: newConfig });
     },
 
+    async getPluginStore() {
+      return await strapi.store({ type: 'plugin', name: 'navigation' });
+    },
+
+    async setDefaultConfig() {
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
+      const config = await pluginStore.get({ key: 'config' });
+      const pluginDefaultConfig = await strapi.plugin('navigation').config
+
+      // If new value gets introduced to the config it either is read from plugin store or from default plugin config
+      // This is fix for backwards compatibility and migration of config to newer version of the plugin
+      const defaultConfigValue = {
+        additionalFields: get(config, 'additionalFields', pluginDefaultConfig('additionalFields')),
+        contentTypes: get(config, 'contentTypes', pluginDefaultConfig('contentTypes')),
+        contentTypesNameFields: get(config, 'contentTypesNameFields',  pluginDefaultConfig('contentTypesNameFields')),
+        contentTypesPopulate: get(config, 'contentTypesPopulate',  pluginDefaultConfig('contentTypesPopulate')),
+        allowedLevels: get(config, 'allowedLevels',  pluginDefaultConfig('allowedLevels')),
+        gql: get(config, 'gql',  pluginDefaultConfig('gql')),
+      }
+      pluginStore.set({ key: 'config', value: defaultConfigValue });
+
+      return defaultConfigValue;
+    },
+
     async restoreConfig() {
-      const pluginStore = await strapi.store({ type: 'plugin', name: 'navigation' });
-      const defaultConfig = await strapi.plugin('navigation').config
-
-      await pluginStore.delete({ key: 'config' })
-      await pluginStore.set({
-        key: 'config', value: {
-          additionalFields: defaultConfig('additionalFields'),
-          contentTypes: defaultConfig('contentTypes'),
-          contentTypesNameFields: defaultConfig('contentTypesNameFields'),
-          allowedLevels: defaultConfig('allowedLevels'),
-          gql: defaultConfig('gql'),
-        }
-      });
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
+      await pluginStore.delete({ key: 'config' });
+      await strapi.plugin('navigation').service('navigation').setDefaultConfig();
     },
 
     async configContentTypes() {
-      const pluginStore = strapi.store({ type: 'plugin', name: 'navigation' });
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
       const config = await pluginStore.get({ key: 'config' });
       const eligibleContentTypes =
         await Promise.all(
@@ -212,6 +230,8 @@ module.exports = ({ strapi }) => {
     },
 
     async getRelatedItems(entityItems) {
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
+      const config = await pluginStore.get({ key: 'config' });
       const relatedTypes = new Set(entityItems.flatMap((item) => get(item.related, 'related_type')));
       const groupedItems = Array.from(relatedTypes).filter((relatedType) => relatedType).reduce(
         (acc, relatedType) => Object.assign(acc, {
@@ -233,8 +253,9 @@ module.exports = ({ strapi }) => {
                   .query(model)
                   .findMany({
                     where: {
-                      id: { $in: map(related, 'related_id') }
-                    }
+                      id: { $in: map(related, 'related_id') },
+                    },
+                    populate: config.contentTypesPopulate[model] || []
                   });
                 return relationData
                   .flatMap(_ =>
@@ -264,8 +285,12 @@ module.exports = ({ strapi }) => {
     },
 
     async getContentTypeItems(model) {
+      const pluginStore = await strapi.plugin('navigation').service('navigation').getPluginStore()
+      const config = await pluginStore.get({ key: 'config' });
       try {
-        const contentTypeItems = await strapi.query(model).findMany()
+        const contentTypeItems = await strapi.query(model).findMany({
+          populate: config.contentTypesPopulate[model] || []
+        })
         return contentTypeItems;
       } catch (err) {
         return [];

package/server/services/utils/functions.js

@@ -213,7 +213,7 @@ module.exports = ({ strapi }) => {
           false;
         return item.type === itemType.INTERNAL ? isRelatedDefinedAndPublished : true;
       }
-      return (item.type === itemType.EXTERNAL) || relatedItem;
+      return (item.type !== itemType.INTERNAL) || relatedItem;
     },
   };
 }