strapi-plugin-navigation 2.0.2 → 2.0.5

package/README.md

@@ -81,7 +81,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.7 (recently tested)
+- Strapi v4.1.0 (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-navigation/tree/strapi-v3).
@@ -233,6 +233,20 @@ For any role different than **Super Admin**, to access the **Navigation panel**
 
 ## 🕸️ Public API specification
 
+### Query Params 
+
+- `type` - Enum value representing structure type of returned navigation 
+
+    **Example URL**: `https://localhost:1337/api/navigation/render/1?type=FLAT`
+
+- `menu` - Boolean value for querying only navigation items that are attached to menu should be rendered eg.
+
+    **Example URL**: `https://localhost:1337/api/navigation/render/1?menu=true`
+
+- `path` - String value for querying navigation items by its path 
+
+    **Example URL**: `https://localhost:1337/api/navigation/render/1?path=/home/about-us`
+
 ### Render
 
 `GET <host>/api/navigation/render/<idOrSlug>?type=<type>`

package/__mocks__/strapi.js

@@ -48,7 +48,7 @@ const itemModelMock = {
         id: 1,
         title: "home",
         type: "INTERNAL",
-        path: "home1",
+        path: "home",
         externalPath: null,
         uiRouterKey: "home",
         menuAttached: true,

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

@@ -4,13 +4,13 @@ import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Typography } from '@strapi/design-system/Typography';
 import { Icon } from '@strapi/design-system/Icon';
-import { Pencil, Trash, Refresh } from '@strapi/icons/';
+import { Pencil, Trash, Refresh, Drag } from '@strapi/icons/';
 
 import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getMessage } from '../../../utils';
 
-const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore }) => {
+const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => {
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
@@ -36,7 +36,10 @@ 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 onClick={onItemRemove} label="Remove" icon={<Trash />} />
+					<>
+						<IconButton ref={dragRef} label="Drag" icon={<Drag />} />
+						<IconButton onClick={onItemRemove} label="Remove" icon={<Trash />} />
+					</>
 				}
 			</Flex>
 		</Wrapper>

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

@@ -1,6 +1,8 @@
+import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import React from 'react';
-import { isEmpty, isNumber } from 'lodash';
+import { useDrag, useDrop } from 'react-dnd';
+import { getEmptyImage } from 'react-dnd-html5-backend';
+import { drop, isEmpty, isNumber } from 'lodash';
 
 import { Box } from '@strapi/design-system/Box';
 import { Card, CardBody } from '@strapi/design-system/Card';
@@ -18,7 +20,7 @@ import Wrapper from './Wrapper';
 import { extractRelatedItemLabel } from '../../pages/View/utils/parsers';
 import ItemCardBadge from './ItemCardBadge';
 import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
-import { getMessage } from '../../utils';
+import { getMessage, ItemTypes } from '../../utils';
 
 const Item = (props) => {
   const {
@@ -33,6 +35,7 @@ const Item = (props) => {
     onItemRemove,
     onItemRestore,
     onItemEdit,
+    onItemReOrder,
     error,
     displayChildren,
     config = {},
@@ -60,73 +63,124 @@ const Item = (props) => {
   const relatedTypeLabel = relatedRef?.labelSingular;
   const relatedBadgeColor = isPublished ? 'success' : 'secondary';
 
+  const dragRef = useRef(null);
+  const dropRef = useRef(null);
+  const previewRef = useRef(null);
+
+  const [, drop] = useDrop({
+    accept: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
+    hover(hoveringItem, monitor) {
+      const dragIndex = hoveringItem.order;
+      const dropIndex = item.order;
+
+      // Don't replace items with themselves
+      if (dragIndex === dropIndex) {
+        return;
+      }
+
+      const hoverBoundingRect = dropRef.current.getBoundingClientRect();
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      const clientOffset = monitor.getClientOffset();
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+      // Place the hovering item before or after the drop target
+      const isAfter = hoverClientY > hoverMiddleY;
+      const newOrder = isAfter ? item.order + 0.5 : item.order - 0.5;
+
+      onItemReOrder({ ...hoveringItem }, newOrder);
+    },
+    collect: monitor => ({
+      isOverCurrent: monitor.isOver({ shallow: true }),
+    })
+  });
+
+  const [{ isDragging }, drag, dragPreview] = useDrag({
+    type: `${ItemTypes.NAVIGATION_ITEM}_${levelPath}`,
+    item: () => {
+      return { ...item };
+    },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const refs = {
+    dragRef: drag(dragRef),
+    dropRef: drop(dropRef),
+    previewRef: dragPreview(previewRef),
+  }
+
   return (
-    <Wrapper level={level} isLast={isLast}>
+    <Wrapper level={level} isLast={isLast} style={{ opacity: isDragging ? 0.2 : 1 }} ref={refs ? refs.dropRef : null} >
       <Card style={{ width: "728px", zIndex: 1, position: "relative", overflow: 'hidden' }}>
-        { removed && (<ItemCardRemovedOverlay />) }
-        <CardBody>
-          <ItemCardHeader
-            title={title}
-            path={isExternal ? externalPath : absolutePath}
-            icon={isExternal ? Earth : LinkIcon }
-            onItemRemove={() => onItemRemove({
-              ...item,
-              relatedRef,
-            })}
-            onItemEdit={() => onItemEdit({
-              ...item,
-              isMenuAllowedLevel,
-              isParentAttachedToMenu,
-            }, levelPath, isParentAttachedToMenu)}
-            onItemRestore={() => onItemRestore({
-              ...item,
-              relatedRef,
-            })}
-            removed={removed}
-          />
-        </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>
+        {removed && (<ItemCardRemovedOverlay />)}
+        <div ref={refs.previewRef}>
+          <CardBody>
+            <ItemCardHeader
+              title={title}
+              path={isExternal ? externalPath : absolutePath}
+              icon={isExternal ? Earth : LinkIcon}
+              onItemRemove={() => onItemRemove({
+                ...item,
+                relatedRef,
+              })}
+              onItemEdit={() => onItemEdit({
+                ...item,
+                isMenuAllowedLevel,
+                isParentAttachedToMenu,
+              }, levelPath, isParentAttachedToMenu)}
+              onItemRestore={() => onItemRestore({
+                ...item,
+                relatedRef,
+              })}
+              dragRef={refs.dragRef}
+              removed={removed}
+            />
+          </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
-                  }
-                })}
+                >
+                  {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}`} 
+                  {relatedItemLabel}
+                  <Link
+                    to={`/content-manager/collectionType/${relatedRef?.__collectionUid}/${relatedRef?.id}`}
                     endIcon={<ArrowRight />}>&nbsp;</Link>
                 </Typography>
               </Box>)
-            }
-          </Flex>
-        </CardBody>)}
+              }
+            </Flex>
+          </CardBody>)}
+        </div>
       </Card>
       {hasChildren && !removed && <List
         onItemLevelAdd={onItemLevelAdd}
         onItemRemove={onItemRemove}
         onItemEdit={onItemEdit}
         onItemRestore={onItemRestore}
+        onItemReOrder={onItemReOrder}
         error={error}
         allowedLevels={allowedLevels}
         isParentAttachedToMenu={menuAttached}
@@ -159,9 +213,10 @@ Item.propTypes = {
   onItemRestore: PropTypes.func.isRequired,
   onItemLevelAdd: PropTypes.func.isRequired,
   onItemRemove: PropTypes.func.isRequired,
+  onItemReOrder: PropTypes.func.isRequired,
   config: PropTypes.shape({
-    contentTypes: PropTypes.array.isRequired, 
-    contentTypesNameFields: PropTypes.object.isRequired, 
+    contentTypes: PropTypes.array.isRequired,
+    contentTypesNameFields: PropTypes.object.isRequired,
   }).isRequired
 };
 

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

@@ -15,6 +15,7 @@ const List = ({
   onItemLevelAdd,
   onItemRemove,
   onItemRestore,
+  onItemReOrder,
   displayFlat,
   contentTypes,
   contentTypesNameFields,
@@ -36,6 +37,7 @@ const List = ({
           onItemLevelAdd={onItemLevelAdd}
           onItemRemove={onItemRemove}
           onItemEdit={onItemEdit}
+          onItemReOrder={onItemReOrder}
           error={error}
           displayChildren={displayFlat}
           config={{
@@ -57,6 +59,7 @@ List.propTypes = {
   onItemRemove: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
   onItemRestore: PropTypes.func.isRequired,
+  onItemReOrder: PropTypes.func.isRequired,
   contentTypes: PropTypes.array.isRequired,
   contentTypesNameFields: PropTypes.object.isRequired
 };

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

@@ -29,7 +29,7 @@ const Search = ({ value, setValue }) => {
 					onChange={(e) => setValue(e.target.value)}
 					clearLabel="Clearing the search"
 					placeholder={formatMessage({
-						id: getTradId('popup.item.form.audience.placeholder'),
+						id: getTradId('pages.main.search.placeholder'),
 						defaultMessage: 'Type to start searching...',
 					})}
 				>

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,11 +37,18 @@ 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 boxDefaultProps = {
+		background: "neutral0",
+		hasRadius: true,
+		shadow: "filterShadow",
+		padding: 6,
+	};
+  
   const preparePayload = ({ selectedContentTypes, nameFields, audienceFieldChecked, allowedLevels }) => ({
     contentTypes: selectedContentTypes,
     contentTypesNameFields: nameFields,
@@ -53,7 +57,8 @@ const SettingsPage = () => {
     gql: {
       navigationItemRelated: selectedContentTypes.map(uid => allContentTypes.find(ct => ct.uid === uid).info.displayName)
     }
-  })
+  });
+
   const onSave = async (form) => {
     lockApp();
     const payload = preparePayload(form);
@@ -82,6 +87,7 @@ const SettingsPage = () => {
     unlockAppWithAutoreload();
   };
   const handleRestartDiscard = () => setIsRestartRequired(false);
+	const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
 
   const prepareNameFieldFor = (uid, current, value) => ({
     ...current,
@@ -145,12 +151,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,31 +173,69 @@ const SettingsPage = () => {
                             {allContentTypes.map((item) => <Option key={item.uid} value={item.uid}>{item.info.displayName}</Option>)}
                           </Select>
                         </GridItem>
-                        <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>
+                        {!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 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.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>
+                                    </Box>
+                                  </AccordionContent>
+                                </Accordion>);
+                              })}
+                            </AccordionGroup>
+                          </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.additional.title')}
                       </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>
                         <GridItem col={6} s={12} xs={12}>
                           <ToggleInput
                             name="audienceFieldChecked"
@@ -212,62 +251,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')}

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

@@ -80,8 +80,10 @@ const NavigationItemForm = ({
     const sanitizedType = purePayload.type || navigationItemType.INTERNAL;
     const relatedId = related
     const relatedCollectionType = relatedType;
+    const title = payload.title || relatedSelectOptions.find(v => v.key == relatedId)?.label
     return {
       ...purePayload,
+      title,
       menuAttached: isNil(menuAttached) ? false : menuAttached,
       type: sanitizedType,
       path: sanitizedType === navigationItemType.INTERNAL ? purePayload.path : undefined,
@@ -164,8 +166,8 @@ const NavigationItemForm = ({
         key: get(item, 'id'),
         metadatas: {
           intlLabel: {
-            id: label || " ",
-            defaultMessage: label || " ",
+            id: label || `${item.__collectionUid} ${item.id}`,
+            defaultMessage: label || `${item.__collectionUid} ${item.id}`,
           }
         },
         value: item.id,

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

@@ -120,6 +120,13 @@ const View = () => {
   }, []);
   const filteredList = !isSearchEmpty ? filteredListFactory(changedActiveNavigation.items, (item) => item?.title.includes(searchValue)) : [];
 
+  const handleItemReOrder = (item, newOrder) => {
+    handleSubmitNavigationItem({
+      ...item,
+      order: newOrder,
+    })
+  }
+
   const handleItemRemove = (item) => {
     handleSubmitNavigationItem({
       ...item,
@@ -206,6 +213,7 @@ const View = () => {
                 onItemRemove={handleItemRemove}
                 onItemEdit={handleItemEdit}
                 onItemRestore={handleItemRestore}
+                onItemReOrder={handleItemReOrder}
                 displayFlat={!isSearchEmpty}
                 root
                 error={error}

package/admin/src/translations/en.json

@@ -43,6 +43,7 @@
 	"notification.navigation.item.relation": "Entity relation does not exist!",
 	"notification.navigation.item.relation.status.draft": "draft",
 	"notification.navigation.item.relation.status.published": "published",
+	"pages.main.search.placeholder": "Type to start searching...",
 	"pages.settings.general.title": "General settings",
 	"pages.settings.additional.title": "Additional settings",
 	"pages.settings.nameField.title": "Content types settings",
@@ -80,6 +81,8 @@
 	"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.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",

package/admin/src/utils/index.js

@@ -3,7 +3,7 @@ import { isString } from 'lodash';
 
 import pluginId from '../pluginId';
 
-const getMessage = (input, defaultMessage = '', inPluginScope = true) => {
+export const getMessage = (input, defaultMessage = '', inPluginScope = true) => {
     const { formatMessage } = useIntl();
     let formattedId = ''
     if (isString(input)) {
@@ -17,4 +17,6 @@ const getMessage = (input, defaultMessage = '', inPluginScope = true) => {
     }, input?.props || undefined)
 };
 
-export { getMessage };
+export const ItemTypes = {
+    NAVIGATION_ITEM: 'navigationItem'
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
@@ -17,7 +17,7 @@
     "test:unit": "jest --verbose --coverage"
   },
   "dependencies": {
-    "@strapi/utils": "^4.0.7",
+    "@strapi/utils": "^4.1.0",
     "uuid": "^8.3.0",
     "bad-words": "^3.0.3",
     "lodash": "^4.17.11",

package/server/controllers/navigation.js

@@ -74,13 +74,14 @@ module.exports = ({strapi}) => ({
   },
   async render(ctx) {
     const { params, query = {} } = ctx;
-    const { type, menu: menuOnly } = query;
+    const { type, menu: menuOnly, path: rootPath } = query;
     const { idOrSlug } = parseParams(params);
-    return getService().render(
+    return getService().render({
       idOrSlug,
       type,
       menuOnly,
-    );
+      rootPath
+    });
   },
   async renderChild(ctx) {
     const { params, query = {} } = ctx;

package/server/graphql/queries/render-navigation.js

@@ -5,11 +5,12 @@ module.exports = ({ strapi, nexus }) => {
 		args: {
 			navigationIdOrSlug: nonNull(stringArg()),
 			type: 'NavigationRenderType',
-			menuOnly: booleanArg()
+			menuOnly: booleanArg(),
+			path: stringArg(),
 		},
 		resolve(obj, args) {
-			const { navigationIdOrSlug, type, menuOnly } = args;
-			return strapi.plugin('navigation').service('navigation').render(navigationIdOrSlug, type, menuOnly);
+			const { navigationIdOrSlug: idOrSlug, type, menuOnly, path: rootPath } = args;
+			return strapi.plugin('navigation').service('navigation').render({idOrSlug, type, menuOnly, rootPath});
 		},
 	};
 }

package/server/graphql/types/navigation-item.js

@@ -13,7 +13,7 @@ module.exports = ({ nexus }) =>
 			t.int("parent")
 			t.int("master")
 			t.list.field("items", { type: 'NavigationItem' })
-			t.list.field("related", { type: 'NavigationRelated' })
+			t.field("related", { type: 'NavigationRelated' })
 			t.list.string("audience")
 			// SQL
 			t.string("created_at")

package/server/services/__tests__/functions.test.js

@@ -0,0 +1,48 @@
+const { setupStrapi } = require('../../../__mocks__/strapi');
+const utilsFunctionsFactory = require('../utils/functions');
+
+describe('Utilities functions', () => {
+	beforeAll(async () => {
+		setupStrapi();
+	});
+
+	describe('Path rendering functions', () => {
+		it('Can build nested path structure', async () => {
+			const utilsFunctions = utilsFunctionsFactory({ strapi });
+			const { itemModel } = utilsFunctions.extractMeta(strapi.plugins);
+			const rootPath = '/home/side';
+			const entities = await strapi
+				.query(itemModel.uid)
+				.findMany({
+					where: {
+						master: 1
+					}
+				});
+			const nested = utilsFunctions.buildNestedPaths({ items: entities });
+
+			expect(nested.length).toBe(2);
+			expect(nested[1].path).toBe(rootPath);
+		});
+
+		it('Can filter items by path', async () => {
+			const utilsFunctions = utilsFunctionsFactory({ strapi });
+			const { itemModel } = utilsFunctions.extractMeta(strapi.plugins);
+			const rootPath = '/home/side';
+			const entities = await strapi
+				.query(itemModel.uid)
+				.findMany({
+					where: {
+						master: 1
+					}
+				});
+			const {
+				root,
+				items
+			} = utilsFunctions.filterByPath(entities, rootPath);
+
+			expect(root).toBeDefined();
+			expect(root.path).toBe(rootPath);
+			expect(items.length).toBe(1)
+		});
+	});
+});

package/server/services/__tests__/navigation.test.js

@@ -26,7 +26,7 @@ describe('Navigation services', () => {
   describe('Render navigation', () => {
     it('Can render branch in flat format', async () => {
       const service = strapi.plugin('navigation').service('navigation');
-      const result = await service.render(1);
+      const result = await service.render({ idOrSlug: 1 });
 
       expect(result).toBeDefined()
       expect(result.length).toBe(2)
@@ -34,7 +34,10 @@ describe('Navigation services', () => {
 
     it('Can render branch in tree format', async () => {
       const service = strapi.plugin('navigation').service('navigation');
-      const result = await service.render(1, "TREE");
+      const result = await service.render({
+        idOrSlug: 1,
+        type: "TREE"
+      });
 
       expect(result).toBeDefined()
       expect(result.length).toBeGreaterThan(0)
@@ -42,7 +45,10 @@ describe('Navigation services', () => {
 
     it('Can render branch in rfr format', async () => {
       const service = strapi.plugin('navigation').service('navigation');
-      const result = await service.render(1, "RFR");
+      const result = await service.render({
+        idOrSlug: 1,
+        type: "RFR"
+      });
 
       expect(result).toBeDefined()
       expect(result.length).toBeGreaterThan(0)
@@ -50,11 +56,27 @@ describe('Navigation services', () => {
 
     it('Can render only menu attached elements', async () => {
       const service = strapi.plugin('navigation').service('navigation');
-      const result = await service.render(1, "FLAT", true);
+      const result = await service.render({
+        idOrSlug: 1,
+        type: "FLAT",
+        menuOnly: true.valueOf,
+      });
 
       expect(result).toBeDefined()
       expect(result.length).toBe(1)
     });
+
+    it('Can render branch by path', async () => {
+      const service = strapi.plugin('navigation').service('navigation');
+      const result = await service.render({
+        idOrSlug: 1,
+        type: "FLAT",
+        rootPath: '/home/side'
+      });
+
+      expect(result).toBeDefined();
+      expect(result.length).toBe(1);
+    });
   });
 
   describe('Render child', () => {

package/server/services/navigation.js

@@ -66,7 +66,7 @@ module.exports = ({ strapi }) => {
     },
 
     async restart() {
-        setImmediate(() => strapi.reload());
+      setImmediate(() => strapi.reload());
     },
 
     // Get plugin config
@@ -342,20 +342,20 @@ module.exports = ({ strapi }) => {
         ...(type === renderType.FLAT ? { uiRouterKey: childUIKey } : {}),
       };
 
-      return service.renderType(type, criteria, itemCriteria, filter);
+      return service.renderType({ type, criteria, itemCriteria, filter });
     },
 
-    async render(idOrSlug, type = renderType.FLAT, menuOnly = false) {
+    async render({ idOrSlug, type = renderType.FLAT, menuOnly = false, rootPath = null }) {
       const { service } = utilsFunctions.extractMeta(strapi.plugins);
 
       const findById = !isNaN(toNumber(idOrSlug)) || isUuid(idOrSlug);
       const criteria = findById ? { id: idOrSlug } : { slug: idOrSlug };
       const itemCriteria = menuOnly ? { menuAttached: true } : {};
 
-      return service.renderType(type, criteria, itemCriteria);
+      return service.renderType({ type, criteria, itemCriteria, rootPath });
     },
 
-    async renderType(type = renderType.FLAT, criteria = {}, itemCriteria = {}, filter = null) {
+    async renderType({ type = renderType.FLAT, criteria = {}, itemCriteria = {}, filter = null, rootPath = null }) {
       const { pluginName, service, masterModel, itemModel } = utilsFunctions.extractMeta(
         strapi.plugins,
       );
@@ -393,8 +393,8 @@ module.exports = ({ strapi }) => {
             const getTemplateName = await utilsFunctions.templateNameFactory(items, strapi, contentTypes);
             const itemParser = (item, path = '', field) => {
               const isExternal = item.type === itemType.EXTERNAL;
-              const parentPath = isExternal ? undefined : `${path === '/' ? '' : path}/${item.path === '/'
-                ? ''
+              const parentPath = isExternal ? undefined : `${path === '/' ? '' : path}/${first(item.path) === '/'
+                ? item.path.substring(1)
                 : item.path}`;
               const slug = isString(parentPath) ? slugify(
                 (first(parentPath) === '/' ? parentPath.substring(1) : parentPath).replace(/\//g, '-')) : undefined;
@@ -422,9 +422,17 @@ module.exports = ({ strapi }) => {
                 }),
               };
             };
+
+            const {
+              items: itemsFilteredByPath,
+              root: rootElement,
+            } = utilsFunctions.filterByPath(items, rootPath);
+
             const treeStructure = service.renderTree({
-              items,
+              items: isNil(rootPath) ? items : itemsFilteredByPath,
               field: 'parent',
+              id: get(rootElement, 'parent.id'),
+              path: get(rootElement, 'parent.path'),
               itemParser,
             });
 
@@ -440,7 +448,7 @@ module.exports = ({ strapi }) => {
             }
             return filteredStructure;
           default:
-            return items
+            const publishedItems = items
               .filter(utilsFunctions.filterOutUnpublished)
               .map((item) => ({
                 ...item,
@@ -449,6 +457,7 @@ module.exports = ({ strapi }) => {
                 related: item.related?.map(({ localizations, ...item }) => item),
                 items: null,
               }));
+            return isNil(rootPath) ? items : utilsFunctions.filterByPath(publishedItems, rootPath).items;
         }
       }
       throw new NotFoundError();

package/server/services/utils/functions.js

@@ -6,6 +6,8 @@ const {
   find,
   isString,
   get,
+  isNil,
+  isArray
 } = require('lodash');
 
 const { type: itemType } = require('../../content-types/navigation-item/lifecycle');
@@ -52,6 +54,45 @@ module.exports = ({ strapi }) => {
         });
     },
 
+    buildNestedPaths({items, id = null, field = 'parent', parentPath = null}){
+      return items
+        .filter(entity => {
+          if (entity[field] == null && id === null) {
+            return true;
+          }
+          let data = entity[field];
+          if (data && typeof id === 'string') {
+            data = data.toString();
+          }
+          return (data && data === id) || (isObject(entity[field]) && (entity[field].id === id));
+        })
+        .reduce((acc, entity) => {
+          const path = `${parentPath || ''}/${entity.path}`
+          return [
+            {
+              id: entity.id,
+              parent: parentPath && {
+                id: get(entity, 'parent.id'),
+                path: parentPath,
+              },
+              path
+            },
+            ...this.buildNestedPaths({items, id: entity.id, field, parentPath: path}),
+            ...acc,
+          ];
+        }, [])
+    },
+
+    filterByPath(items, path) {
+      const itemsWithPaths = this.buildNestedPaths({ items }).filter(({path: itemPath}) => itemPath.includes(path));
+      const root = itemsWithPaths.find(({ path: itemPath }) => itemPath === path);
+
+      return {
+        root,
+        items: isNil(root) ? [] : items.filter(({ id }) => (itemsWithPaths.find(v => v.id === id))),
+      }
+    },
+
     prepareAuditLog(actions) {
       return [
         ...new Set(