strapi-plugin-navigation 2.0.0-rc.1 → 2.0.0

package/README.md

@@ -1,7 +1,9 @@
-<div align="center">
+<div align="center" width="150px">
   <img style="width: 150px; height: auto;" src="public/assets/logo.png" alt="Logo - Strapi Navigation plugin" />
+</div>
+<div align="center">
   <h1>Strapi v4 - Navigation plugin</h1>
-  <p>Create consumable navigation with a simple and straighthforward visual builder</p>
+  <p>Create consumable navigation with a simple and straightforward visual builder</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-navigation">
     <img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-navigation?label=npm&logo=npm">
   </a>
@@ -73,7 +75,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.5 (recently tested)
+- Strapi v4.0.7 (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).
@@ -393,7 +395,7 @@ Feel free to fork and make a Pull Request to this plugin project. All the input
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
-- [Slack](http://slack.strapi.io) We're present on official Strapi slack workspace. Look for @cyp3r and DM.
+- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Find us by `[VirtusLab]` prefix and DM.
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab/strapi-plugin-navigation/issues) (Bug reports, Contributions, Questions and Discussions)
 - [E-mail](mailto:strapi@virtuslab.com) - we will respond back as soon as possible

package/__mocks__/pages.settings.json

@@ -0,0 +1,25 @@
+{
+  "kind": "collectionType",
+  "collectionName": "pages",
+  "info": {
+    "singularName": "page",
+    "pluralName": "pages",
+    "displayName": "Page",
+    "name": "page"
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true,
+    "searchable": true,
+    "previewable": true,
+    "draftAndPublish": false
+  },
+  "pluginOptions": {},
+  "attributes": {
+    "title": {
+      "type": "string",
+      "required": true
+    }
+  }
+}
+

package/__mocks__/strapi.js

@@ -0,0 +1,196 @@
+const { isMatch } = require('lodash');
+
+const masterModelMock = {
+    findOne: () => ({
+        id: 1,
+        name: "Main navigation",
+        slug: "main-navigation",
+        visible: true,
+        createdAt: "2021-12-30T14:05:50.276Z",
+        updatedAt: "2021-12-30T14:05:50.276Z",
+    }),
+    findMany: () => [{
+        id: 1,
+        name: "Main navigation",
+        slug: "main-navigation",
+        visible: true,
+        createdAt: "2021-12-30T14:05:50.276Z",
+        updatedAt: "2021-12-30T14:05:50.276Z",
+    }],
+};
+
+const itemModelMock = {
+    findOne: async () => ({
+        id: 1,
+        title: "home",
+        type: "INTERNAL",
+        path: "home1",
+        externalPath: null,
+        uiRouterKey: "home",
+        menuAttached: true,
+        order: 1,
+        createdAt: "2021-12-31T10:04:54.812Z",
+        updatedAt: "2022-01-14T13:36:29.430Z",
+        related: {
+            id: 1,
+            related_id: "1",
+            related_type: "api::pages.pages",
+            field: "navigation",
+            order: 1,
+            master: "3",
+            createdAt: "2021-12-31T10:04:54.800Z",
+            updatedAt: "2021-12-31T10:04:54.800Z",
+            navigationItemId: 56,
+        },
+        parent: null,
+    }),
+    findMany: async ({where}) => [{
+        id: 1,
+        title: "home",
+        type: "INTERNAL",
+        path: "home1",
+        externalPath: null,
+        uiRouterKey: "home",
+        menuAttached: true,
+        order: 1,
+        createdAt: "2021-12-31T10:04:54.812Z",
+        updatedAt: "2022-01-14T13:36:29.430Z",
+        master: 1, 
+        related: {
+            id: 1,
+            related_id: "1",
+            related_type: "api::pages.pages",
+            field: "navigation",
+            order: 1,
+            master: "3",
+            createdAt: "2021-12-31T10:04:54.800Z",
+            updatedAt: "2021-12-31T10:04:54.800Z",
+            navigationItemId: 56,
+        },
+        parent: null,
+    }, {
+        id: 2,
+        title: "side",
+        type: "INTERNAL",
+        path: "side",
+        externalPath: null,
+        uiRouterKey: "side",
+        menuAttached: false,
+        order: 1,
+        createdAt: "2021-12-31T10:04:54.824Z",
+        updatedAt: "2021-12-31T12:47:20.508Z",
+        master: 1,
+        related: {
+            id: 2,
+            related_id: "2",
+            related_type: "api::pages.pages",
+            field: "navigation",
+            order: 1,
+            master: "3",
+            createdAt: "2021-12-31T10:04:54.823Z",
+            updatedAt: "2021-12-31T10:04:54.823Z",
+            navigationItemId: 57,
+        },
+        parent: {
+            id: 1,
+            title: "home",
+            type: "INTERNAL",
+            path: "home1",
+            externalPath: null,
+            uiRouterKey: "home",
+            menuAttached: true,
+            order: 1,
+            createdAt: "2021-12-31T10:04:54.812Z",
+            updatedAt: "2022-01-14T13:36:29.430Z",
+        },
+    }].filter(item => isMatch(item, where)),
+};
+
+const pageModelMock = {
+    findOne: async ({ where }) => ({
+        "id": 1,
+        "attributes": {
+            "title": "Page nr 1",
+            "createdAt": "2022-01-19T08:22:31.244Z",
+            "updatedAt": "2022-01-19T08:22:31.244Z",
+            "publishedAt": null
+        }
+    }),
+    findMany: async ({ where }) => [{
+            "id": 1,
+            "attributes": {
+                "title": "Page nr 1",
+                "createdAt": "2022-01-19T08:22:31.244Z",
+                "updatedAt": "2022-01-19T08:22:31.244Z",
+                "publishedAt": null
+            }
+        }, {
+            "id": 2,
+            "attributes": {
+                "title": "Page nr 2",
+                "createdAt": "2022-01-19T08:22:50.821Z",
+                "updatedAt": "2022-01-19T08:22:50.821Z",
+                "publishedAt": null
+            }
+        }]
+
+};
+
+const plugins = (strapi) => ({
+    navigation: {
+        get services() { return require('../server/services') },
+        service: (key) => (require('../server/services'))[key]({ strapi }),
+        get contentTypes() { return require('../server/content-types') },
+        contentType: (key) => preparePluginContentType(require('../server/content-types')[key].schema, 'navigation'),
+        config: (key) => ({
+            ...require('../server/config').default,
+            contentTypes: ['api::pages.pages'],
+        })[key],
+    }
+});
+
+const contentTypes = {
+    'api::pages.pages': {
+        ...require('./pages.settings.json'),
+        uid: 'api::pages.pages',
+        modelName: 'page',
+    },
+};
+
+const preparePluginContentType = (schema, plugin) => {
+    const { name } = schema.info;
+
+    return {
+        ...schema,
+        uid: `plugin::${plugin}.${name}`,
+        modelName: name,
+    }
+}
+
+const strapiFactory = (plugins, contentTypes) => ({
+    get plugins() { return plugins(strapi) },
+    plugin: (name) => plugins(strapi)[name],
+    get contentTypes() { return contentTypes },
+    contentType: (key) => contentTypes[key],
+    query: (model) => {
+        switch (model) {
+            case 'plugin::navigation.navigation':
+                return masterModelMock;
+            case 'plugin::navigation.navigation-item':
+                return itemModelMock;
+            case 'api::pages.pages':
+                return pageModelMock;
+            default:
+                return {
+                    findOne: () => ({}),
+                    findMany: () => [],
+                }
+        }
+    }
+});
+
+const setupStrapi = () => {
+    Object.defineProperty(global, 'strapi', { value: strapiFactory(plugins, contentTypes) });
+}
+
+module.exports = { setupStrapi };

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

@@ -6,6 +6,7 @@ const ItemCardBadge = styled(Badge)`
 
 		${ props => props.small && `
 			padding: 0 4px;
+			margin: 0px ${props.theme.spaces[3]};
 			vertical-align: middle;
 
 			cursor: default;

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

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 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 PencilIcon from '@strapi/icons/Pencil';
 import TrashIcon from '@strapi/icons/Trash';
 import RefreshIcon from '@strapi/icons/Refresh';
@@ -19,7 +20,7 @@ const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit,
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
-				{icon}
+				<Icon as={icon} />
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>

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

@@ -71,7 +71,7 @@ const Item = (props) => {
           <ItemCardHeader
             title={title}
             path={isExternal ? externalPath : absolutePath}
-            icon={isExternal ? <Earth /> : <LinkIcon />}
+            icon={isExternal ? Earth : LinkIcon }
             onItemRemove={() => onItemRemove({
               ...item,
               relatedRef,
@@ -102,7 +102,6 @@ const Item = (props) => {
             </TextButton>
             { relatedItemLabel && (<Box>
                 <ItemCardBadge
-                  style={{ marginRight: 4 }}
                   borderColor={`${relatedBadgeColor}200`}
                   backgroundColor={`${relatedBadgeColor}100`}
                   textColor={`${relatedBadgeColor}600`}
@@ -131,7 +130,7 @@ const Item = (props) => {
         onItemRestore={onItemRestore}
         error={error}
         allowedLevels={allowedLevels}
-        isParentAttachedToMenu={true}
+        isParentAttachedToMenu={menuAttached}
         items={item.items}
         level={level + 1}
         levelPath={absolutePath}

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
+import { Searchbar } from '@strapi/design-system/Searchbar';
 import SearchIcon from "@strapi/icons/Search";
 import { getTradId } from '../../translations';
 
@@ -11,32 +11,30 @@ const Search = ({ value, setValue }) => {
 	const { formatMessage } = useIntl();
 
 	useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        wrapperRef.current.querySelector('input').focus();
-      }, 0);
-    }
+		if (isOpen) {
+			setTimeout(() => {
+				wrapperRef.current.querySelector('input').focus();
+			}, 0);
+		}
 	}, [isOpen]);
-	
+
 	if (isOpen) {
 		return (
 			<div ref={wrapperRef}>
-				<SearchForm>
-					<Searchbar
-						name="searchbar"
-						onClear={() => setValue('')}
-						value={value}
-						size="S"
-						onChange={(e) => setValue(e.target.value)}
-						clearLabel="Clearing the search"
-						placeholder={formatMessage({
-							id: getTradId('popup.item.form.audience.placeholder'),
-							defaultMessage: 'Type to start searching...',
-						})}
-					>
-						Search for navigation items
-					</Searchbar>
-				</SearchForm>
+				<Searchbar
+					name="searchbar"
+					onClear={() => { setValue(''); setIsOpen(false); }}
+					value={value}
+					size="S"
+					onChange={(e) => setValue(e.target.value)}
+					clearLabel="Clearing the search"
+					placeholder={formatMessage({
+						id: getTradId('popup.item.form.audience.placeholder'),
+						defaultMessage: 'Type to start searching...',
+					})}
+				>
+					Search for navigation items
+				</Searchbar>
 			</div>
 		);
 	} else {

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

@@ -7,43 +7,59 @@ import Check from '@strapi/icons/Check';
 import More from '@strapi/icons/More';
 import { getTrad } from '../../../../translations';
 import { MoreButton } from './styles';
-
+import { Select, Option } from '@strapi/design-system/Select';
+import { Box } from '@strapi/design-system/Box'
 
 const NavigationHeader = ({
+  activeNavigation,
+  availableNavigations,
   structureHasErrors,
-  structureHAsChanged,
+  structureHasChanged,
+  handleChangeSelection,
   handleSave,
 }) => {
   const { formatMessage } = useIntl();
-
   return (
     <HeaderLayout
-        primaryAction={
+      primaryAction={
         <Stack horizontal size={2}>
-            <Button
-              onClick={handleSave}
-              startIcon={<Check />}
-              disabled={structureHasErrors || !structureHAsChanged}
-              type="submit"
+          <Box width="10vw">
+            <Select
+              type="select"
+              placeholder={'Change navigation'}
+              name={`navigationSelect`}
+              onChange={handleChangeSelection}
+              value={activeNavigation?.id}
+              size="S"
+              style={null}
             >
-              {formatMessage(getTrad('submit.cta.save'))}
-            </Button>
-            {/* <MoreButton
+              {availableNavigations.map(({ id, name }) => <Option key={id} value={id}>{name}</Option>)}
+            </Select >
+          </Box>
+          <Button
+            onClick={handleSave}
+            startIcon={<Check />}
+            disabled={structureHasErrors || !structureHasChanged}
+            type="submit"
+          >
+            {formatMessage(getTrad('submit.cta.save'))}
+          </Button>
+          {/* <MoreButton
               id="more"
               label="More"
               icon={<More />}
             /> */}
-          </Stack>
-        }
-        title={formatMessage({
-          id: getTrad('header.title'),
-          defaultMessage: 'UI Navigation',
-        })}
-        subtitle={formatMessage({
-          id: getTrad('header.description'),
-          defaultMessage: 'Define your portal navigation',
-        })}
-      />
+        </Stack>
+      }
+      title={formatMessage({
+        id: getTrad('header.title'),
+        defaultMessage: 'UI Navigation',
+      })}
+      subtitle={formatMessage({
+        id: getTrad('header.description'),
+        defaultMessage: 'Define your portal navigation',
+      })}
+    />
   );
 };
 

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

@@ -259,6 +259,10 @@ const NavigationItemForm = ({
                   }}
                   name={`${inputsPrefix}title`}
                   placeholder={{
+                    id: "e.g. Blog",
+                    defaultMessage: 'e.g. Blog',
+                  }}
+                  description={{
                     id: getTradId('popup.item.form.title.placeholder'),
                     defaultMessage: 'e.g. Blog',
                   }}
@@ -331,6 +335,15 @@ const NavigationItemForm = ({
                       onChange={onChangeRelatedType}
                       options={relatedTypeSelectOptions}
                       value={relatedTypeSelectValue}
+                      disabled={isLoading || isEmpty(relatedTypeSelectOptions)}
+                      description={
+                        !isLoading && isEmpty(relatedTypeSelectOptions)
+                          ? {
+                            id: getTradId('popup.item.form.relatedType.empty'),
+                            defaultMessage: 'There are no more content types',
+                          }
+                          : undefined
+                      }
                     />
                   </GridItem>
                   {relatedTypeSelectValue && !isSingleSelected && (

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

@@ -6,14 +6,12 @@ import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { useIntl } from 'react-intl';
 import { getTrad } from '../../../../translations';
 
-export const NavigationItemPopupHeader = () => {
+export const NavigationItemPopupHeader = ({isNewItem}) => {
 	const { formatMessage } = useIntl();
 	return (
 		<ModalHeader>
 			<ButtonText textColor="neutral800" as="h2" id="asset-dialog-title">
-				{formatMessage(
-					getTrad('popup.item.header'),
-				)}
+				{formatMessage(getTrad(`popup.item.header.${isNewItem ? 'new' : 'edit'}`))}
 			</ButtonText>
 		</ModalHeader>
 	);

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

@@ -80,7 +80,7 @@ const NavigationItemPopUp = ({
 
   return (
     <ModalLayout labelledBy="condition-modal-breadcrumbs" onClose={onClose} isOpen={isOpen}>
-      <NavigationItemPopupHeader />
+      <NavigationItemPopupHeader isNewItem={!data.viewId}/>
       <NavigationItemForm
         data={prepareFormData(data)}
         isLoading={isLoading}

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

@@ -10,11 +10,13 @@ import { isEmpty, get } from "lodash";
 
 // Design System
 import { Main } from '@strapi/design-system/Main';
+import { Flex } from '@strapi/design-system/Flex';
 import { ContentLayout } from '@strapi/design-system/Layout';
+import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
+import { Icon } from '@strapi/design-system/Icon';
 import { Button } from '@strapi/design-system/Button';
 import { LoadingIndicatorPage } from "@strapi/helper-plugin";
-import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
 import EmptyDocumentsIcon from '@strapi/icons/EmptyDocuments';
 import PlusIcon from "@strapi/icons/Plus";
 
@@ -23,6 +25,7 @@ import List from '../../components/NavigationItemList';
 import NavigationContentHeader from './components/NavigationContentHeader';
 import NavigationHeader from './components/NavigationHeader';
 import NavigationItemPopUp from "./components/NavigationItemPopup";
+import Search from '../../components/Search';
 import useDataManager from "../../hooks/useDataManager";
 import { getTrad } from '../../translations';
 import {
@@ -31,7 +34,6 @@ import {
   usedContentTypes,
   validateNavigationStructure,
 } from './utils/parsers';
-import Search from '../../components/Search';
 
 const View = () => {
   const {
@@ -150,11 +152,19 @@ const View = () => {
     changeNavigationItemPopupState(false);
   };
 
+  const handleChangeNavigationSelection = (...args) => {
+    handleChangeSelection(...args);
+    setSearchValue('');
+  }
+
   return (
     <Main labelledBy="title" aria-busy={isLoadingForSubmit}>
       <NavigationHeader
         structureHasErrors={structureHasErrors}
-        structureHAsChanged={structureChanged}
+        structureHasChanged={structureChanged}
+        availableNavigations={availableNavigations}
+        activeNavigation={activeNavigation}
+        handleChangeSelection={handleChangeNavigationSelection}
         handleSave={handleSave}
       />
       <ContentLayout>
@@ -162,7 +172,7 @@ const View = () => {
         {changedActiveNavigation && (
           <>
             <NavigationContentHeader
-              startActions={<Search value={searchValue} setValue={setSearchValue}/>}
+              startActions={<Search value={searchValue} setValue={setSearchValue} />}
               endActions={<Button
                 onClick={addNewNavigationItem}
                 startIcon={<PlusIcon />}
@@ -172,22 +182,21 @@ const View = () => {
                 {formatMessage(getTrad('header.action.newItem'))}
               </Button>}
             />
-            {isEmpty(changedActiveNavigation.items || []) && (<Box paddingTop={4} >
-                <EmptyStateLayout
-                  action={
-                    <Button
-                      variant='secondary'
-                      startIcon={<PlusIcon />}
-                      label={formatMessage(getTrad('empty.cta'))}
-                      onClick={addNewNavigationItem}
-                    >
-                      {formatMessage(getTrad('empty.cta'))}
-                    </Button>
-                  }
-                  icon={<EmptyDocumentsIcon width='10rem' />}
-                  content={formatMessage(getTrad('empty'))}
-                />
-              </Box>
+            {isEmpty(changedActiveNavigation.items || []) && (
+              <Flex direction="column" minHeight="400px" justifyContent="center">
+                <Icon as={EmptyDocumentsIcon} width="160px" height="88px" color=""/>
+                <Box padding={4}>
+                  <Typography variant="beta" textColor="neutral600">{formatMessage(getTrad('empty'))}</Typography>
+                </Box>
+                <Button
+                  variant='secondary'
+                  startIcon={<PlusIcon />}
+                  label={formatMessage(getTrad('empty.cta'))}
+                  onClick={addNewNavigationItem}
+                >
+                  {formatMessage(getTrad('empty.cta'))}
+                </Button>
+              </Flex>
             )}
             {
               !isEmpty(changedActiveNavigation.items || [])

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

@@ -7,6 +7,7 @@ export const transformItemToRESTPayload = (
   parent = undefined,
   master = undefined,
   config = {},
+  parentAttachedToMenu = true,
 ) => {
   const {
     id,
@@ -34,7 +35,7 @@ export const transformItemToRESTPayload = (
     find(contentTypes,
       ct => ct.uid === relatedType) :
     undefined;
-
+  const itemAttachedToMenu = menuAttached && parentAttachedToMenu
   return {
     id,
     parent,
@@ -45,7 +46,7 @@ export const transformItemToRESTPayload = (
     removed,
     order,
     uiRouterKey,
-    menuAttached,
+    menuAttached: itemAttachedToMenu,
     audience: audience.map((audienceItem) =>
       isObject(audienceItem) ? audienceItem.value : audienceItem,
     ),
@@ -60,7 +61,7 @@ export const transformItemToRESTPayload = (
           field: relatedContentType && relatedContentType.relatedField ? relatedContentType.relatedField : 'navigation',
         },
       ],
-    items: items.map((iItem) => transformItemToRESTPayload(iItem, id, master, config)),
+    items: items.map((iItem) => transformItemToRESTPayload(iItem, id, master, config, itemAttachedToMenu)),
   };
 };
 
@@ -251,6 +252,9 @@ export const prepareItemToViewPayload = (items = [], viewParentId = null, config
   }));
 
 export const extractRelatedItemLabel = (item = {}, fields = {}, config = {}) => {
+  if (get(item, 'isSingle', false)) {
+    return get(item, 'labelSingular', '');
+  }
   const { contentTypes = [] } = config;
   const { __collectionUid } = item;
   const contentType = contentTypes.find(_ => _.uid === __collectionUid)

package/admin/src/translations/en.json

@@ -5,9 +5,10 @@
 	"header.action.newItem": "New Item",
 	"submit.cta.cancel": "Cancel",
 	"submit.cta.save": "Save",
-	"empty": "Navigation container is empty",
+	"empty": "Your navigation is empty",
 	"empty.cta": "Create first item",
-	"popup.item.header": "Manage navigation item",
+	"popup.item.header.edit": "Edit navigation item",
+	"popup.item.header.new": "New navigation item",
 	"popup.item.form.title.label": "Title",
 	"popup.item.form.title.placeholder": "Enter the item title or leave blank to pull from related entity",
 	"popup.item.form.uiRouterKey.label": "UI router key",
@@ -28,6 +29,7 @@
 	"popup.item.form.relatedSection.label": "Relation to",
 	"popup.item.form.relatedType.label": "Content Type",
 	"popup.item.form.relatedType.placeholder": "Select content type...",
+	"popup.item.form.relatedType.empty": "There are no content types to select",
 	"popup.item.form.related.label": "Entity",
 	"popup.item.form.related.empty": "There are no more entities of \"{ contentTypeName }\" to select",
 	"popup.item.form.button.create": "Create item",
@@ -41,7 +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",
-	"navigation.item.action.newItem": "New nested item",
+	"navigation.item.action.newItem": "Add nested item",
 	"navigation.item.badge.removed": "Removed",
 	"navigation.item.badge.draft": "{type}: Draft",
 	"navigation.item.badge.published": "{type}: Published"

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
-    "icon": "hamburger",
-    "description": "UI navigation management",
+    "displayName": "Navigation",
+    "description": "Create consumable navigation with a simple and straightforward visual builder",
     "kind": "plugin"
   },
   "repository": {
@@ -13,10 +13,11 @@
     "url": "https://github.com/VirtusLab/strapi-plugin-navigation"
   },
   "scripts": {
+    "publish": "npm publish --tag latest",
     "test:unit": "jest --verbose --coverage"
   },
   "dependencies": {
-    "@strapi/utils": "^4.0.5",
+    "@strapi/utils": "^4.0.7",
     "uuid": "^8.3.0",
     "bad-words": "^3.0.3",
     "lodash": "^4.17.11",

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

@@ -0,0 +1,45 @@
+{
+  "collectionName": "navigations",
+  "info": {
+    "singularName": "navigation",
+    "pluralName": "navigations",
+    "displayName": "Navigation",
+    "name": "navigation"
+  },
+  "options": {
+    "increments": true,
+    "comment": ""
+  },
+  "pluginOptions": {
+    "content-manager": {
+      "visible": true
+    },
+    "content-type-builder": {
+      "visible": false
+    }
+  },
+  "attributes": {
+    "name": {
+      "type": "text",
+      "configurable": false,
+      "required": true
+    },
+    "slug": {
+      "type": "uid",
+      "target": "name",
+      "configurable": false,
+      "required": true
+    },
+    "visible": {
+      "type": "boolean",
+      "default": false,
+      "configurable": false
+    },
+    "items": {
+      "type": "relation",
+      "relation": "oneToMany",
+      "target": "plugin::navigation.navigation-item",
+      "configurable": false
+    }
+  }
+}

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

@@ -4,7 +4,7 @@
     "singularName": "navigation-item",
     "pluralName": "navigation-items",
     "displayName": "Navigation Item",
-    "tableName": "navigation-item"
+    "name": "navigation-item"
   },
   "options": {
     "increments": true,

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

@@ -1,84 +1,69 @@
-const { setupStrapi } = require('../../__mocks__/helpers/strapi');
+const { setupStrapi } = require('../../../__mocks__/strapi');
 
-beforeAll(setupStrapi);
+describe('Navigation services', () => {
+  beforeAll(async () => {
+    setupStrapi();
+  });
+
+  describe('Correct config', () => {
+    it('Declares Strapi instance', () => {
+      expect(strapi).toBeDefined()
+      expect(strapi.plugin('navigation').service('navigation')).toBeDefined()
+    });
 
-describe('Navigation service', () => {
-  it('Strapi is defined', () => {
-    expect(strapi).toBeDefined();
-    expect(strapi.contentTypes).toBeDefined();
-    expect(Object.keys(strapi.contentTypes).length).toBe(6);
+    it('Defines proper content types', () => {
+      expect(strapi.contentTypes).toBeDefined()
+      expect(strapi.plugin('navigation').contentTypes).toBeDefined()
+    });
+
+    it('Can read and return plugins config', () => {
+      expect(strapi.plugin('navigation').config('contentTypes')).toBeDefined()
+      expect(strapi.plugin('navigation').config('allowedLevels')).toBeDefined()
+      expect(strapi.plugin('navigation').config()).not.toBeDefined()
+    });
   });
-  it('Config Content Types', () => {
-    const { configContentTypes } = require('../navigation');
-    const results = [
-      {
-        uid: 'application::pages.pages',
-        collectionName: 'pages',
-        isSingle: false,
-        contentTypeName: 'Pages',
-        endpoint: 'pages',
-        label: 'Pages',
-        labelSingular: 'Page',
-        name: 'page',
-        visible: true,
-      }, {
-        uid: 'application::blog-post.blog-post',
-        collectionName: 'blog_posts',
-        isSingle: false,
-        contentTypeName: 'BlogPost',
-        endpoint: 'blog-posts',
-        label: 'Blog posts',
-        labelSingular: 'Blog post',
-        name: 'blog-post',
-        visible: true,
-      }, {
-        uid: 'application::my-homepages.my-homepage',
-        collectionName: 'my-homepages',
-        isSingle: true,
-        contentTypeName: 'MyHomepage',
-        endpoint: 'my-homepage',
-        label: 'My Homepage',
-        labelSingular: 'My Homepage',
-        name: 'my-homepage',
-        visible: true,
-      }, {
-        uid: 'application::page-homes.home-page',
-        collectionName: 'page_homes',
-        isSingle: true,
-        contentTypeName: 'HomePage',
-        endpoint: 'custom-api',
-        label: 'Page Home',
-        labelSingular: 'Page Home',
-        name: 'home-page',
-        visible: true,
-      }, {
-        uid: 'plugins::another-plugin.pages',
-        collectionName: 'pages',
-        isSingle: false,
-        contentTypeName: 'Plugin-pages',
-        endpoint: 'plugin-pages',
-        label: 'Pages',
-        labelSingular: 'Page',
-        name: 'plugin-page',
-        visible: true,
-        plugin: 'another-plugin',
-      }, {
-        uid: 'plugins::another-plugin.blog-post',
-        collectionName: 'blog_posts',
-        isSingle: false,
-        contentTypeName: 'BlogPost',
-        endpoint: 'plugin-blog-posts',
-        label: 'Blog posts',
-        labelSingular: 'Blog post',
-        name: 'plugin-blog-post',
-        visible: true,
-        plugin: 'another-plugin',
-      }];
-    return configContentTypes().then(types => {
-      types.map(type => {
-        const result = results.find(({ uid }) => uid === type.uid);
-        expect(type).toMatchObject(result);
-      });
+
+  describe('Render navigation', () => {
+    it('Can render branch in flat format', async () => {
+      const service = strapi.plugin('navigation').service('navigation');
+      const result = await service.render(1);
+
+      expect(result).toBeDefined()
+      expect(result.length).toBe(2)
+    });
+
+    it('Can render branch in tree format', async () => {
+      const service = strapi.plugin('navigation').service('navigation');
+      const result = await service.render(1, "TREE");
+
+      expect(result).toBeDefined()
+      expect(result.length).toBeGreaterThan(0)
+    });
+
+    it('Can render branch in rfr format', async () => {
+      const service = strapi.plugin('navigation').service('navigation');
+      const result = await service.render(1, "RFR");
+
+      expect(result).toBeDefined()
+      expect(result.length).toBeGreaterThan(0)
+    });
+
+    it('Can render only menu attached elements', async () => {
+      const service = strapi.plugin('navigation').service('navigation');
+      const result = await service.render(1, "FLAT", true);
+
+      expect(result).toBeDefined()
+      expect(result.length).toBe(1)
+    });
+  });
+
+  describe('Render child', () => {
+    it('Can render child', async () => {
+      const service = strapi.plugin('navigation').service('navigation');
+      const result = await service.renderChildren(1, "home");
+
+      expect(result).toBeDefined();
+      expect(result.length).toBe(1);
     });
   });
 });

package/server/services/navigation.js

@@ -67,14 +67,14 @@ module.exports = ({ strapi }) => {
 
     // Get plugin config
     async config() {
-      const { pluginName, audienceModel } = utilsFunctions.extractMeta(strapi.plugins);
+      const { pluginName, audienceModel, service } = utilsFunctions.extractMeta(strapi.plugins);
       const additionalFields = strapi.plugin(pluginName).config('additionalFields')
       const contentTypesNameFields = strapi.plugin(pluginName).config('contentTypesNameFields');
       const allowedLevels = strapi.plugin(pluginName).config('allowedLevels');
 
       let extendedResult = {};
       const result = {
-        contentTypes: await strapi.plugin(pluginName).service('navigation').configContentTypes(),
+        contentTypes: await service.configContentTypes(),
         contentTypesNameFields: {
           default: contentTypesNameFieldsDefaults,
           ...(isObject(contentTypesNameFields) ? contentTypesNameFields : {}),
@@ -85,7 +85,7 @@ module.exports = ({ strapi }) => {
 
       if (additionalFields.includes(configAdditionalFields.AUDIENCE)) {
         const audienceItems = await strapi
-          .query(`plugin::${pluginName}.${audienceModel.modelName}`)
+          .query(audienceModel.uid)
           .findMany({
             paggination: {
               limit: -1,

package/server/services/utils/functions.js

@@ -20,19 +20,12 @@ module.exports = ({ strapi }) => {
 
     extractMeta(plugins) {
       const { navigation: plugin } = plugins;
-      const { navigation: service } = plugin.services;
-      const {
-        navigation: masterModel,
-        'navigation-item': itemModel,
-        audience: audienceModel,
-        'navigations-items-related': relatedModel,
-      } = plugin.contentTypes;
       return {
-        masterModel,
-        itemModel,
-        relatedModel,
-        audienceModel,
-        service,
+        masterModel: plugin.contentType('navigation'),
+        itemModel: plugin.contentType('navigation-item'),
+        relatedModel: plugin.contentType('navigations-items-related'),
+        audienceModel: plugin.contentType('audience'),
+        service: plugin.service('navigation'),
         plugin,
         pluginName: 'navigation',
       };

package/server/content-types/navigation/schema.js

@@ -1,45 +0,0 @@
-module.exports = {
-  collectionName: "navigations",
-  info: {
-    singularName: "navigation",
-    pluralName: "navigations",
-    displayName: "Navigation",
-    name: "navigation"
-  },
-  options: {
-    increments: true,
-    comment: ""
-  },
-  pluginOptions: {
-    "content-manager": {
-      visible: true
-    },
-    "content-type-builder": {
-      visible: false
-    }
-  },
-  attributes: {
-    name: {
-      type: "text",
-      configurable: false,
-      required: true
-    },
-    slug: {
-      type: "uid",
-      target: "name",
-      configurable: false,
-      required: true
-    },
-    visible: {
-      type: "boolean",
-      default: false,
-      configurable: false
-    },
-    items: {
-      type: "relation",
-      relation: "oneToMany",
-      target: "plugin::navigation.navigation-item",
-      configurable: false
-    }
-  }
-}