strapi-plugin-navigation 1.0.2 → 1.1.1

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/.github/stale.yml

@@ -0,0 +1,15 @@
+daysUntilStale: 30
+daysUntilClose: 7
+exemptLabels:
+  - pinned
+  - security
+  - backlog
+  - enhancement
+  - feature request
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+closeComment: false

package/.nvmrc

@@ -1 +1 @@
-v12.13.0
+v14.17.3

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/another-plugin/blog-post.settings.json

@@ -0,0 +1,31 @@
+{
+  "uid": "plugins::another-plugin.blog-post",
+  "plugin": "another-plugin",
+  "kind": "collectionType",
+  "collectionName": "blog_posts",
+  "info": {
+    "name": "Blog post"
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true,
+    "searchable": true,
+    "previewable": true
+  },
+  "attributes": {
+    "title": {
+      "type": "string",
+      "required": true
+    },
+    "altTitle": {
+      "type": "string"
+    },
+    "navigation": {
+      "model": "navigationitem",
+      "plugin": "navigation",
+      "via": "related",
+      "configurable": false,
+      "hidden": true
+    }
+  }
+}

package/__mocks__/helpers/another-plugin/pages.settings.json

@@ -0,0 +1,28 @@
+{
+  "uid": "plugins::another-plugin.pages",
+  "plugin": "another-plugin",
+  "kind": "collectionType",
+  "collectionName": "pages",
+  "info": {
+    "name": "Pages"
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true,
+    "searchable": true,
+    "previewable": true
+  },
+  "attributes": {
+    "title": {
+      "type": "string",
+      "required": true
+    },
+    "navigation": {
+      "model": "navigationitem",
+      "plugin": "navigation",
+      "via": "related",
+      "configurable": false,
+      "hidden": true
+    }
+  }
+}

package/__mocks__/helpers/blog-post.settings.json

@@ -9,7 +9,8 @@
     "increments": true,
     "timestamps": true,
     "searchable": true,
-    "previewable": true
+    "previewable": true,
+    "draftAndPublish": true
   },
   "attributes": {
     "title": {

package/__mocks__/helpers/home-page.settings.json

@@ -0,0 +1,4 @@
+{ 
+    
+  "uid": "application::page-homes.home-page",
+  "kind": "singleType", "collectionName": "page_homes", "info": { "name": "Page Home" }, "options": { "increments": true, "timestamps": true, "draftAndPublish": true }, "attributes": { "Subtitle": { "type": "string" }, "Title": { "type": "string" }, "Summary": { "type": "text" }, "Image": { "model": "file", "via": "related", "allowedTypes": [ "images" ], "plugin": "upload", "required": false }, "Components": { "type": "dynamiczone", "components": [] }, "navigation": { "model": "navigationitem", "plugin": "navigation", "via": "related", "configurable": false, "hidden": true } } }

package/__mocks__/helpers/my-homepage.settings.json

@@ -0,0 +1,27 @@
+{
+  "uid": "application::my-homepages.my-homepage",
+  "kind": "singleType",
+  "collectionName": "my-homepages",
+  "info": {
+    "name": "My Homepage",
+    "description": ""
+  },
+  "options": {
+    "increments": true,
+    "timestamps": true,
+    "draftAndPublish": true,
+    "templateName": "AwesomeTemplate"
+  },
+  "attributes": {
+    "Welcome": {
+      "type": "string"
+    },
+    "navigation": {
+      "model": "navigationitem",
+      "plugin": "navigation",
+      "via": "related",
+      "configurable": false,
+      "hidden": true
+    }
+  }
+}

package/__mocks__/helpers/strapi.js

@@ -1,6 +1,10 @@
+const {get} = require('lodash');
 function setupStrapi() {
     Object.defineProperty(global, 'strapi', {
         value: {
+          query: jest.fn().mockImplementation(() => ({
+              count: jest.fn().mockImplementation(),
+          })),
           config: {
               custom: {
                   plugins: {
@@ -11,27 +15,82 @@ function setupStrapi() {
                       },
                   },
               },
+            get(path, defaultValue) {
+              return get(strapi, path, defaultValue);
+            },
+          },
+          api: {
+              'home-page': {
+                  config: {
+                      routes: [
+                        {
+                          method: 'GET',
+                          path: '/custom-api',
+                          handler: 'home-page.find',
+                        },
+                        {
+                          method: 'PUT',
+                          path: '/custom-api',
+                          handler: 'home-page.update',
+                        },
+                      ]
+                  }
+              }
           },
           contentTypes: {
-            'page': {
+            'pages': {
                 ...require('./pages.settings.json'),
                 apiName: 'pages',
+                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' }],
+            },
+            'application::my-homepages.my-homepage': {
+                ...require('./my-homepage.settings.json'),
+                apiName: 'my-homepage',
+                modelName: 'my-homepage',
                 associations: [{ model: 'navigationitem' }],
             },
+            'application::page-homes.home-page': {
+                ...require('./home-page.settings.json'),
+                apiName: 'custom-api',
+                modelName: 'home-page',
+                associations: [{ model: 'navigationitem' }],
+            },
+            'plugins::another-plugin.pages': {
+                ...require('./another-plugin/pages.settings.json'),
+                modelName: 'plugin-pages',
+                associations: [{ model: 'navigationitem' }],
+            },
+            'plugins::another-plugin.blog-post': {
+                ...require('./another-plugin/blog-post.settings.json'),
+                modelName: 'plugin-blog-posts',
+                associations: [{ model: 'navigationitem' }],
+            }
           },
           plugins: {
               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: {
-                      'pages': require('./pages.settings.json'),
-                      'blog-post': require('./blog-post.settings.json'),
+                      'plugin-pages': require('./another-plugin/pages.settings.json'),
+                      'plugin-blog-post': require('./another-plugin/blog-post.settings.json'),
                   }
               }
           },

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/index.js

@@ -58,13 +58,13 @@ const View = () => {
   const navigationSelectValue = get(activeNavigation, "id", null);
   const actions = [
     {
-      label: "Cancel",
+      label: formatMessage(getTrad('submit.cta.cancel')),
       onClick: () => isLoadingForSubmit ? null : handleResetNavigationData(),
       color: "cancel",
       type: "button",
     },
     {
-      label: "Save",
+      label: formatMessage(getTrad('submit.cta.save')),
       onClick: () =>
         isLoadingForSubmit || structureHasErrors ? null : handleSubmitNavigation(formatMessage, transformToRESTPayload(changedActiveNavigation, config)),
       color: "success",

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/admin/src/translations/en.json

@@ -2,6 +2,8 @@
   "plugin.name": "UI Navigation",
   "header.title": "Navigation",
   "header.description": "Define your portal navigation",
+  "submit.cta.cancel": "Cancel",
+  "submit.cta.save": "Save",
   "empty": "Navigation container is empty",
   "empty.cta": "Create first item",
   "popup.item.header": "Manage navigation item",

package/admin/src/translations/fr.json

@@ -0,0 +1,39 @@
+{
+  "plugin.name": "UI Navigation",
+  "header.title": "Navigation",
+  "header.description": "Définisser votre menu de navigation",
+  "submit.cta.cancel": "Annuler",
+  "submit.cta.save": "Sauvegarder",
+  "empty": "Le menu de navigation est vide",
+  "empty.cta": "Créer un premier élément",
+  "popup.item.header": "Modifiez les éléments de navigation",
+  "popup.item.form.title.label": "Titre",
+  "popup.item.form.title.placeholder": "Saisissez le titre de l'élément ou laissez le champ vide pour utiliser celui de l'entité associée",
+  "popup.item.form.uiRouterKey.label": "Clé de routeur pour l'interface utilisateur",
+  "popup.item.form.uiRouterKey.placeholder": "Si vide, généré automatiquement par \"Title\"",
+  "popup.item.form.path.label": "URL",
+  "popup.item.form.path.placeholder": "Une partie d'URL unique identifie cet élément",
+  "popup.item.form.path.preview": "Aperçu:",
+  "popup.item.form.externalPath.label": "URL externe",
+  "popup.item.form.externalPath.placeholder": "Lien vers la source externe",
+  "popup.item.form.externalPath.validation.type": "Cette valeur d'URL n'est pas correcte.",
+  "popup.item.form.menuAttached.label": "Ajouter au menu",
+  "popup.item.form.type.label": "Type",
+  "popup.item.form.type.internal.label": "Interne",
+  "popup.item.form.type.external.label": "Externe",
+  "popup.item.form.audience.label": "Audience",
+  "popup.item.form.audience.placeholder": "Écrivez pour lancer la recherche...",
+  "popup.item.form.relatedSection.label": "Relation avec",
+  "popup.item.form.relatedType.label": "Type de contenu",
+  "popup.item.form.related.label": "Entitée",
+  "popup.item.form.related.empty": "Il n'y a plus d'entitée \"{ contentTypeName }\", que vous pouvez sélectionner",
+  "popup.item.form.button.create": "Créer un élément",
+  "popup.item.form.button.update": "Modifier l'élément",
+  "popup.item.form.button.restore": "Restaurer l'élément",
+  "popup.item.form.button.remove": "Supprimer",
+  "notification.navigation.submit": "Les modifications de navigation ont été enregistrées",
+  "notification.navigation.error": "Chemin indisponible: { path } dans le parent: { parentTitle } pour l'élément { errorTitles }",
+  "notification.navigation.item.relation": "L'entitée n'a pas de relations!",
+  "notification.navigation.item.relation.status.draft": "brouillon",
+  "notification.navigation.item.relation.status.published": "publié"
+}

package/admin/src/translations/index.js

@@ -1,8 +1,10 @@
 import pluginId from "../pluginId";
 import en from "./en.json";
+import fr from "./fr.json";
 
 const trads = {
-  en,
+	en,
+	fr,
 };
 
 export const getTradId = (msg) => `${pluginId}.${msg}`;

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/routes.json

@@ -47,6 +47,14 @@
       "config": {
         "policies": []
       }
+    },
+    {
+      "method": "GET",
+      "path": "/render/:idOrSlug/:childUIKey",
+      "handler": "navigation.renderChild",
+      "config": {
+        "policies": []
+      }
     }
   ]
 }