strapi-plugin-navigation 1.0.3 → 1.1.2

package/.circleci/config.yml

@@ -6,7 +6,7 @@ jobs:
     environment:
       CODECOV_TOKEN: a9097475-0b5b-481f-8733-7b84574d583e
     docker:
-      - image: circleci/node:12.13.0
+      - image: circleci/node:14.17.2
     working_directory: ~/repo
     steps:
       - checkout

package/README.md

@@ -55,7 +55,7 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 **Supported Strapi versions**:
 
-- Strapi v3.6.0 (recently tested)
+- Strapi v3.6.8 (recently tested)
 - Strapi v3.x
 
 (This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.)
@@ -73,40 +73,22 @@ Complete installation requirements are exact same as for Strapi itself and can b
 
 ## Content Type model relation to Navigation Item
 
-To enable Content Type to work with Navigation Item, you've to add following field to your model `*.settings.json`:
-
-```
-    "navigation": {
-      "model": "navigationitem",
-      "plugin": "navigation",
-      "via": "related",
-      "configurable": false,
-      "hidden": true
-    }
-```
-
-inside the `attributes` section like in example below:
-
-```
-    "attributes": {
-        ...,
-        "navigation": {
-            "model": "navigationitem",
-            "plugin": "navigation",
-            "via": "related",
-            "configurable": false,
-            "hidden": true
-        },
-        ...
-    },
+We can define in `config/plugins.js`
+```js
+  navigation: {
+    ...
+    relatedContentTypes: [
+      'application::pages.pages'
+    ],
+    ...
+  },
 ```
 
 ## Configuration
-To setup the plugin properly we recommend to put following snippet as part of `config/custom.js` or `config/<env>/custom.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+To setup the plugin properly we recommend to put following snippet as part of `config/plugins.js` or `config/<env>/plugins.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
 
-```
+```js
     ...
-    plugins: {
       navigation: {
         additionalFields: ['audience'],
         allowedLevels: 2,
@@ -114,8 +96,8 @@ To setup the plugin properly we recommend to put following snippet as part of `c
           'blog_posts': ['altTitle'],
           'pages': ['title'],
         },
+        gql: { ... }
       },
-    },
     ...
 ```
 
@@ -123,6 +105,34 @@ To setup the plugin properly we recommend to put following snippet as part of `c
 - `additionalFields` - Additional fields: 'audience', more in the future
 - `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
 - `contentTypesNameFields` - Definition of content type title fields like `'content_type_name': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`
+- `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
+
+## GQL Configuration
+To properly configure GQL to work with navigation you should provide `gql` prop which should contain union types which will be used for define GQL response format for your data while fetching:
+
+```gql
+master: Int
+items: [NavigationItem]
+related: NavigationRelated
+```
+
+as follows:   
+
+```js
+gql: {
+    navigationItemRelated: 'union NavigationRelated = <your GQL related entities>',
+},
+```
+
+for example:   
+
+```js
+gql: {
+        navigationItemRelated: 'union NavigationRelated = Pages | UploadFile',
+},
+```
+where `Pages` and `UploadFile` are your types to the **Content Types** you're referring by navigation items relations. 
+
 
 ## Public API Navigation Item model
 

package/__mocks__/helpers/strapi.js

@@ -1,3 +1,4 @@
+const {get} = require('lodash');
 function setupStrapi() {
     Object.defineProperty(global, 'strapi', {
         value: {
@@ -14,6 +15,9 @@ function setupStrapi() {
                       },
                   },
               },
+            get(path, defaultValue) {
+              return get(strapi, path, defaultValue);
+            },
           },
           api: {
               'home-page': {
@@ -40,13 +44,13 @@ function setupStrapi() {
                 modelName: 'pages',
                 associations: [{ model: 'navigationitem' }],
             },
-            'blog-post': {
+            'application::blog-post.blog-post': {
                 ...require('./blog-post.settings.json'),
                 apiName: 'blog-posts',
                 modelName: 'blog-posts',
                 associations: [{ model: 'navigationitem' }],
             },
-            'my-homepage': {
+            'application::my-homepages.my-homepage': {
                 ...require('./my-homepage.settings.json'),
                 apiName: 'my-homepage',
                 modelName: 'my-homepage',
@@ -58,12 +62,12 @@ function setupStrapi() {
                 modelName: 'home-page',
                 associations: [{ model: 'navigationitem' }],
             },
-            'plugin-page': {
+            'plugins::another-plugin.pages': {
                 ...require('./another-plugin/pages.settings.json'),
                 modelName: 'plugin-pages',
                 associations: [{ model: 'navigationitem' }],
             },
-            'plugin-blog-post': {
+            'plugins::another-plugin.blog-post': {
                 ...require('./another-plugin/blog-post.settings.json'),
                 modelName: 'plugin-blog-posts',
                 associations: [{ model: 'navigationitem' }],
@@ -73,7 +77,15 @@ function setupStrapi() {
               navigation: {
                   services: {
                       navigation: jest.fn().mockImplementation(),
-                  }
+                  },
+                relatedContentTypes: [
+                  'application::pages.pages',
+                  'application::blog-post.blog-post',
+                  'application::my-homepages.my-homepage',
+                  'application::page-homes.home-page',
+                  'plugins::another-plugin.pages',
+                  'plugins::another-plugin.blog-post'
+                ]
               },
               anotherPlugin: {
                   models: {

package/admin/src/containers/View/components/NavigationItemForm/utils/form.js

@@ -29,7 +29,7 @@ export const form = {
           is: val => val === navigationItemType.EXTERNAL,
           then: yup.string()
             .required(translatedErrors.required)
-            .matches(/(#.*)|(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/, { 
+            .matches(/(#.*)|(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,}|mailto:.+@(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9])\.)+[^.\s]{2,})/, { 
               excludeEmptyString: true,
               message: `${pluginId}.popup.item.form.externalPath.validation.type`,
             }),

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

@@ -1,5 +1,5 @@
 import { isUuid, uuid } from 'uuidv4';
-import { find, get, isArray, isEmpty, isNil, isNumber, isObject, isString, kebabCase, last, omit, orderBy } from 'lodash';
+import { find, get, isArray, isEmpty, isNil, isNumber, isObject, isString, last, omit, orderBy } from 'lodash';
 import { navigationItemType } from './enums';
 
 export const transformItemToRESTPayload = (
@@ -46,8 +46,7 @@ export const transformItemToRESTPayload = (
     order,
     uiRouterKey,
     menuAttached,
-    audience: audience.map((audienceItem) =>
-      isObject(audienceItem) ? audienceItem.value : audienceItem,
+    audience: audience.map((audienceItem) => isObject(audienceItem) ? audienceItem.value || audienceItem.id : audienceItem,
     ),
     path: isExternal ? undefined : path,
     externalPath: isExternal ? externalPath : undefined,
@@ -65,7 +64,7 @@ export const transformItemToRESTPayload = (
 };
 
 export const transformToRESTPayload = (payload, config = {}) => {
-  const { id, name, visible, items } = payload;
+	const { id, name, visible, items } = payload;
   return {
     id,
     name,
@@ -120,7 +119,7 @@ const linkRelations = (item, config) => {
   const shouldBuildRelated = !relatedRef || (relatedRef && (relatedRef.id !== relatedId));
   if (shouldBuildRelated && !shouldFindRelated) {
     const relatedContentType = find(contentTypes,
-      ct => kebabCase(ct.contentTypeName) === kebabCase(relatedItem.__contentType), {});
+      ct => ct.uid === relatedItem.__contentType, {});
     const { uid, labelSingular, isSingle } = relatedContentType;
     relation = {
       related: relatedItem.id,
@@ -262,7 +261,7 @@ export const usedContentTypes = (items = []) => items.flatMap(
     if (item.relatedRef) {
       return [item.relatedRef, ...used];
     }
-    return used; 
+    return used;
   },
 );
 
@@ -284,11 +283,11 @@ export const isRelationPublished = ({ relatedRef, relatedType = {}, type, isColl
   return true;
 };
 
-export const validateNavigationStructure = (items = []) => 
-  items.map(item => 
-    (item.removed || isRelationCorrect({ 
-      related: item.related, 
+export const validateNavigationStructure = (items = []) =>
+  items.map(item =>
+    (item.removed || isRelationCorrect({
+      related: item.related,
       type: item.type,
-    })) && 
+    })) &&
     validateNavigationStructure(item.items)
-  ).filter(item => !item).length === 0;
+  ).filter(item => !item).length === 0;

package/config/functions/bootstrap.js

@@ -1,26 +1,112 @@
-const { isEmpty } = require("lodash");
+const { isEmpty, get, last } = require('lodash');
+
+const saveJSONParse = (value) => {
+  try {
+    return JSON.parse(value).map((_) => ({ ..._, id: _._id }));
+  } catch (e) {
+    return null;
+  }
+};
+
+const getDefaultConnectionName = (strapi) => strapi.config.get('database.defaultConnection');
+
+const isMongo = (strapi) => {
+  const connectionName = getDefaultConnectionName(strapi);
+  return strapi.config.get(`database.connections.${connectionName}.connector`).includes('mongo');
+};
+
+const getNavigationMorphData = (strapi) => {
+  const connectionName = getDefaultConnectionName(strapi);
+  const { [connectionName]: knex } = strapi.connections;
+  return knex.schema.hasTable('navigations_items_morph').then((exist)=> exist ?  knex('navigations_items_morph').select('*') : []);
+};
+
+const getNavigationItemsModel = (strapi) => strapi.query('navigationitem', 'navigation');
+
+const getRelatedModel = (strapi) => strapi.query('navigations_items_related', 'navigation');
+
+const createRelatedData = (relatedModel, navigationItemsModel, items) => ({
+  field,
+  order,
+  related_id,
+  related_type,
+  navigations_items_id,
+}) => {
+  const item = items.find(item => item.id === navigations_items_id);
+  const modelUID = get(strapi.query(related_type), 'model.uid');
+  if (item && modelUID) {
+    const relatedData = {
+      field,
+      order,
+      related_id,
+      related_type: modelUID,
+      master: get(item.master, 'id', item.master),
+    };
+    return relatedModel.create(relatedData)
+      .then(
+        ({ id }) => navigationItemsModel.update({ id: navigations_items_id }, { related: id }),
+      );
+  }
+  return Promise.resolve();
+};
+
+const migrateNavigationItemsSQL = async (strapi) => {
+  const morphData = await getNavigationMorphData(strapi);
+  if (morphData.length) {
+    const relatedModel = getRelatedModel(strapi);
+    const navigationItemsModel = getNavigationItemsModel(strapi);
+    const items = await navigationItemsModel.find({});
+    await Promise.all(morphData.map(createRelatedData(relatedModel, navigationItemsModel, items)));
+  }
+};
+
+const migrateNavigationItemsMongo = async (strapi) => {
+  const navigationItemsModel = getNavigationItemsModel(strapi);
+  const connectionName = getDefaultConnectionName(strapi);
+  const models = strapi.connections[connectionName].models;
+  const items = (await models.NavigationNavigationitem.find({}))
+    // workaround to change type from object to int
+    .map(_ => ({ ..._.toObject(), related: last(saveJSONParse(get(_.errors, 'related.properties.value', null))) }))
+    .filter(_ => _.related);
+
+  if (items.length) {
+    await Promise.all(items.map(item => {
+      const data = {
+        related_id: item.related.ref,
+        related_type: models[item.related.kind].uid,
+        field: item.related.field,
+        order: 1,
+        master: item.master,
+      };
+      return getRelatedModel(strapi)
+        .create(data)
+        .then(result => navigationItemsModel.update({ id: item.id }, { related: [result.id] }));
+    }));
+
+  }
+};
 
 module.exports = async () => {
   // Check if the plugin users-permissions is installed because the navigation needs it
-  if (Object.keys(strapi.plugins).indexOf("users-permissions") === -1) {
+  if (Object.keys(strapi.plugins).indexOf('users-permissions') === -1) {
     throw new Error(
-      "In order to make the navigation plugin work the users-permissions plugin is required",
+      'In order to make the navigation plugin work the users-permissions plugin is required',
     );
   }
 
   // Add permissions
   const actions = [
     {
-      section: "plugins",
-      displayName: "Access the Navigation",
-      uid: "read",
-      pluginName: "navigation",
+      section: 'plugins',
+      displayName: 'Access the Navigation',
+      uid: 'read',
+      pluginName: 'navigation',
     },
     {
-      section: "plugins",
-      displayName: "Ability to change the Navigation",
-      uid: "update",
-      pluginName: "navigation",
+      section: 'plugins',
+      displayName: 'Ability to change the Navigation',
+      uid: 'update',
+      pluginName: 'navigation',
     },
   ];
 
@@ -36,6 +122,16 @@ module.exports = async () => {
         visible: true,
       });
   }
+  const relatedModel = getRelatedModel(global.strapi);
+  const isMigrated = !!(await relatedModel.count({}));
+  if (!isMigrated) {
+    const isMongoDB = isMongo(global.strapi);
+    if (isMongoDB) {
+      await migrateNavigationItemsMongo(global.strapi);
+    } else {
+      await migrateNavigationItemsSQL(global.strapi);
+    }
+  }
 
   const { actionProvider } = strapi.admin.services.permission;
   await actionProvider.registerMany(actions);

package/config/schema.graphql.js

@@ -0,0 +1,204 @@
+const NAVIGATION_DATE = `
+# SQL
+  created_at: String
+  updated_at: String
+# MONGO
+  createdAt: String
+  updatedAt: String
+`;
+
+const NAVIGATION_USER = `
+# SQL
+ created_by: String
+ updated_by: String
+# MONGO
+ createdBy: String
+ updatedBy: String
+`;
+
+const NAVIGATION = `
+ id: String!
+ name: String!
+ slug: String!
+ visible: Boolean!
+`;
+
+const getContentTypesNamesFields = () => {
+  const contentTypesNameFields = strapi.config.get('plugins.navigation.contentTypesNameFields');
+  return Object.keys(contentTypesNameFields || {}).map(key => `${key}: [String]!`).join('\n');
+};
+
+const getNavigationRelated = () => {
+  const related = strapi.config.get('plugins.navigation.gql.navigationItemRelated');
+  if (related) {
+    return related;
+  }
+  return `
+    type NavigationRelated { 
+      id: Int
+      title: String
+      name: String
+    }
+  `;
+};
+
+module.exports = {
+  // language=GraphQL
+  definition: `
+  enum NavigationRenderType {
+      FLAT,
+      TREE,
+      RFR
+  }
+  
+  ${getNavigationRelated()}
+
+
+  type NavigationItem { 
+    id: Int!
+    title: String!
+    type: String!
+    path: String
+    externalPath: String
+    uiRouterKey: String!
+    menuAttached: Boolean!
+    order: Int!
+    parent: Int
+    master: Int
+    items: [NavigationItem]
+    related: NavigationRelated
+    audience: [String]
+    ${NAVIGATION_DATE}
+    ${NAVIGATION_USER}
+  }
+
+  type Navigation { 
+    ${NAVIGATION}
+  }
+  
+  type NavigationDetails { 
+    ${NAVIGATION}  
+    items: [NavigationItem]!
+  }
+  
+  
+  type ContentTypesNameFields { 
+    default: [String!]!
+    ${getContentTypesNamesFields()}
+  }
+
+  type ContentTypes { 
+    uid: String!
+    name: String!
+    isSingle: Boolean!
+    collectionName: String!
+    contentTypeName: String!
+    label: String!
+    relatedField: String!
+    labelSingular: String!
+    endpoint: String!
+    available: Boolean!
+    visible: Boolean!
+  }
+
+  type NavigationConfig { 
+    allowedLevels: Int
+    availableAudience: [NavigationAudience]!
+    additionalFields: [String]!
+    contentTypesNameFields: ContentTypesNameFields
+    contentTypes: [ContentTypes] 
+  }
+
+  input CreateNavigationRelated {
+    ref: String!
+    field: String!
+    refId: String!
+  }
+  
+  input CreateNavigationItem {
+    title: String!
+    type: String!
+    path: String
+    externalPath: String
+    uiRouterKey: String!
+    menuAttached: Boolean!
+    order: Int!
+    parent: Int
+    master: Int
+    items: [CreateNavigationItem]
+    audience: [String]
+    related: CreateNavigationRelated
+  }
+
+  input CreateNavigation {
+    name: String!
+    items: [CreateNavigationItem]!
+  }
+  `,
+  query: `
+    renderNavigation(navigationIdOrSlug: String!, type: NavigationRenderType, menuOnly: Boolean): [NavigationItem]!
+    renderNavigationChild(id: String!, childUIKey: String!, type: NavigationRenderType, menuOnly: Boolean): [NavigationItem]!
+    getNavigation: [Navigation]!
+    configNavigation: NavigationConfig
+    getByIdNavigation(id: String!): NavigationItem
+  `,
+  type: {},
+  mutation: `
+    navigationCreate(newNavigation: CreateNavigation!): Navigation!
+    navigationUpdate(id: String!, navigation: CreateNavigation!): Navigation!
+  `,
+  resolver: {
+    Query: {
+      renderNavigation: {
+        resolverOf: 'plugins::navigation.navigation.render',
+        resolver(obj, options) {
+          const { navigationIdOrSlug, type, menuOnly } = options;
+          return strapi.plugins.navigation.services.navigation.render(navigationIdOrSlug, type, menuOnly);
+        },
+      },
+      renderNavigationChild: {
+        resolverOf: 'plugins::navigation.navigation.renderChild',
+        async resolver(obj, options) {
+          const { id, childUIKey, type, menuOnly } = options;
+          return strapi.plugins.navigation.services.navigation.renderChildren(id, childUIKey, type, menuOnly);
+        },
+      },
+      getNavigation: {
+        resolverOf: 'plugins::navigation.navigation.get',
+        resolver() {
+          return strapi.plugins.navigation.services.navigation.get();
+        },
+      },
+      configNavigation: {
+        resolverOf: 'plugins::navigation.navigation.config',
+        resolver() {
+          return strapi.plugins.navigation.services.navigation.config();
+        },
+      },
+      getByIdNavigation: {
+        resolverOf: 'plugins::navigation.navigation.getById',
+        async resolver(obj, options) {
+          const { id } = options;
+          return strapi.plugins.navigation.services.navigation.getById(id);
+        },
+      },
+    },
+    Mutation: {
+      navigationCreate: {
+        resolverOf: 'plugins::navigation.navigation.post',
+        resolver(obj, options) {
+          const { newNavigation } = options;
+          return strapi.plugins.navigation.services.navigation.post(newNavigation);
+        },
+      },
+      navigationUpdate: {
+        resolverOf: 'plugins::navigation.navigation.put',
+        resolver(obj, options) {
+          const { id, navigation } = options;
+          return  strapi.plugins.navigation.services.navigation.put(id, navigation);
+        },
+      },
+    },
+  },
+};
+

package/controllers/navigation.js

@@ -23,35 +23,33 @@ const errorHandler = (ctx) => (error) => {
   }
   throw error;
 };
+const getService = () => strapi.plugins.navigation.services.navigation;
 
 module.exports = {
-  getService() {
-    return strapi.plugins.navigation.services.navigation;
-  },
   /**
    * Default action.
    *
    * @return {Object}
    */
   async config() {
-    return await this.getService().config();
+    return getService().config();
   },
 
   async get() {
-    return await this.getService().get();
+    return getService().get();
   },
 
   async getById(ctx) {
     const { params } = ctx;
     const { id } = parseParams(params);
-    return await this.getService().getById(id);
+    return getService().getById(id);
   },
 
   async render(ctx) {
     const { params, query = {} } = ctx;
     const { type, menu: menuOnly } = query;
     const { idOrSlug } = parseParams(params);
-    return await this.getService().render(
+    return getService().render(
       idOrSlug,
       type,
       menuOnly,
@@ -61,7 +59,7 @@ module.exports = {
     const { params, query = {} } = ctx;
     const { type, menu: menuOnly } = query;
     const { idOrSlug, childUIKey } = parseParams(params);
-    return await this.getService().renderChildren(
+    return getService().renderChildren(
       idOrSlug,
       childUIKey,
       type,
@@ -72,14 +70,14 @@ module.exports = {
   post(ctx) {
     const { auditLog } = ctx;
     const { body = {} } = ctx.request;
-    return this.getService().post(body, auditLog);
+    return getService().post(body, auditLog);
   },
 
   put(ctx) {
     const { params, auditLog } = ctx;
     const { id } = parseParams(params);
     const { body = {} } = ctx.request;
-    return this.getService().put(id, body, auditLog)
+    return getService().put(id, body, auditLog)
       .catch(errorHandler(ctx));
   },
 };

package/models/navigation.settings.json

@@ -10,7 +10,7 @@
   },
   "pluginOptions": {
     "content-manager": {
-      "visible": false
+      "visible": true
     },
     "content-type-builder": {
       "visible": false