strapi-plugin-navigation 2.0.3 → 2.0.6

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.1.0 (recently tested)
+- Strapi v4.1.5 (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).

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,20 +37,28 @@ 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,
     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 +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')}
@@ -308,4 +292,4 @@ const SettingsPage = () => {
 }
 
 
-export default SettingsPage;
+export default SettingsPage;

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,

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,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.3",
+  "version": "2.0.6",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
@@ -17,9 +17,8 @@
     "test:unit": "jest --verbose --coverage"
   },
   "dependencies": {
-    "@strapi/utils": "^4.1.0",
+    "@strapi/utils": "^4.1.5",
     "uuid": "^8.3.0",
-    "bad-words": "^3.0.3",
     "lodash": "^4.17.11",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",

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")