strapi-plugin-navigation 2.0.7 → 2.0.10

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

@@ -27,7 +27,7 @@ const ConfirmationDialog = ({
 }) => (
 	<Dialog onClose={onCancel} title={header || getMessage('components.confirmation.dialog.header', 'Confirmation')} isOpen={isVisible}>
 		<DialogBody icon={<ExclamationMarkCircle />}>
-			<Stack size={2}>
+			<Stack spacing={2}>
 				<Flex justifyContent="center">
 					<Typography id="dialog-confirm-description">{children || getMessage('components.confirmation.dialog.description')}</Typography>
 				</Flex>

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -10,18 +11,41 @@ import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
 import { getMessage } from '../../../utils';
 
+const IconWrapper = styled.div`
+display: flex;
+align-items: center;
+justify-content: center;
+height: ${32 / 16}rem;
+width: ${32 / 16}rem;
+
+cursor: pointer;
+  padding: ${({ theme }) => theme.spaces[2]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  background: ${({ theme }) => theme.colors.neutral0};
+  border: 1px solid ${({ theme }) => theme.colors.neutral200};
+	
+svg {
+	> g,
+	path {
+		fill: ${({ theme }) => theme.colors.neutral500};
+	}
+}
+`
+
 const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore, dragRef }) => {
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
-				<IconButton ref={dragRef} label="Drag" icon={<Drag />} />
+				<IconWrapper ref={dragRef}>
+					<Icon as={Drag} />
+				</IconWrapper>
 				<Typography variant="omega" fontWeight="bold">
 					{title}
 				</Typography>
 				<Typography variant="omega" fontWeight="bold" textColor='neutral500'>
 					{path}
 				</Typography>
-				<Icon as={icon}/>
+				<Icon as={icon} />
 			</Flex>
 			<Flex alignItems="center" style={{ zIndex: 2 }}>
 				{removed &&

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

@@ -1,10 +1,8 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
-import { drop, isEmpty, isNumber } from 'lodash';
+import { isEmpty, isNumber } from 'lodash';
 
-import { Box } from '@strapi/design-system/Box';
 import { Card, CardBody } from '@strapi/design-system/Card';
 import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
@@ -57,7 +55,8 @@ const Item = (props) => {
   const { contentTypes, contentTypesNameFields } = config;
   const isExternal = type === navigationItemType.EXTERNAL;
   const isWrapper = type === navigationItemType.WRAPPER;
-  const isPublished = relatedRef && relatedRef?.publishedAt;
+  const isHandledByPublishFlow = relatedRef && typeof relatedRef.publishedAt !== 'undefined';
+  const isPublished = isHandledByPublishFlow && relatedRef.publishedAt;
   const isNextMenuAllowedLevel = isNumber(allowedLevels) ? level < (allowedLevels - 1) : true;
   const isMenuAllowedLevel = isNumber(allowedLevels) ? level < allowedLevels : true;
   const hasChildren = !isEmpty(item.items) && !isExternal && !displayChildren;
@@ -91,7 +90,16 @@ const Item = (props) => {
       const isAfter = hoverClientY > hoverMiddleY;
       const newOrder = isAfter ? item.order + 0.5 : item.order - 0.5;
 
+      if (dragIndex < dropIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > dropIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+
       onItemReOrder({ ...hoveringItem }, newOrder);
+      hoveringItem.order = newOrder;
     },
     collect: monitor => ({
       isOverCurrent: monitor.isOver({ shallow: true }),
@@ -160,15 +168,15 @@ const Item = (props) => {
                 </Flex>
                 {relatedItemLabel && (
                   <Flex justifyContent='center' alignItems='center'>
-                    <ItemCardBadge
+                    {isHandledByPublishFlow && <ItemCardBadge
                       borderColor={`${relatedBadgeColor}200`}
                       backgroundColor={`${relatedBadgeColor}100`}
                       textColor={`${relatedBadgeColor}600`}
                       className="action"
                       small
                     >
-                      {getMessage({id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`})}
-                    </ItemCardBadge>
+                      {getMessage({ id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}` })}
+                    </ItemCardBadge>}
                     <Typography variant="omega" textColor='neutral600'>{relatedTypeLabel}&nbsp;/&nbsp;</Typography>
                     <Typography variant="omega" textColor='neutral800'>{relatedItemLabel}</Typography>
                       <Link

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

@@ -94,8 +94,8 @@ const DataManagerProvider = ({ children }) => {
     } catch (err) {
       console.error({ err });
       toggleNotification({
-        type: 'error',
-        message: { id: 'notification.error' },
+        type: 'warning',
+        message: { id: getTrad('notification.error') },
       });
     }
   };
@@ -133,8 +133,8 @@ const DataManagerProvider = ({ children }) => {
     } catch (err) {
       console.error({ err });
       toggleNotification({
-        type: 'error',
-        message: { id: 'notification.error' },
+        type: 'warning',
+        message: { id: getTrad('notification.error') },
       });
     }
   };
@@ -254,7 +254,7 @@ const DataManagerProvider = ({ children }) => {
 
        if (err.response.payload.data && err.response.payload.data.errorTitles) {
          return toggleNotification({
-           type: 'error',
+           type: 'warning',
            message: {
              id: formatMessage(
                getTrad('notification.navigation.error'),
@@ -264,7 +264,7 @@ const DataManagerProvider = ({ children }) => {
          });
        }
        toggleNotification({
-         type: 'error',
+         type: 'warning',
          message: { id: getTrad('notification.error') },
        });
      }

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

@@ -56,7 +56,13 @@ const SettingsPage = () => {
     additionalFields: audienceFieldChecked ? [navigationItemAdditionalFields.AUDIENCE] : [],
     allowedLevels: allowedLevels,
     gql: {
-      navigationItemRelated: selectedContentTypes.map(uid => allContentTypes.find(ct => ct.uid === uid).info.displayName.replace(/\s+/g, ''))
+      navigationItemRelated: selectedContentTypes.map(uid => {
+        const singularName = allContentTypes.find(ct => ct.uid === uid).info.singularName;
+        const globalIdLike = singularName.split('-')
+          .map(_ => capitalize(_))
+          .join('')
+        return globalIdLike;
+      })
     }
   });
 
@@ -145,7 +151,7 @@ const SettingsPage = () => {
                 }
               />
               <ContentLayout>
-                <Stack size={7}>
+                <Stack spacing={7}>
                   {isRestartRequired && (
                     <RestartAlert
                       closeLabel={getMessage('pages.settings.actions.restart.alert.cancel')}
@@ -155,7 +161,7 @@ const SettingsPage = () => {
                       {getMessage('pages.settings.actions.restart.alert.description')}
                     </RestartAlert>)}
                   <Box {...boxDefaultProps} >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.general.title')}
                       </Typography>
@@ -197,7 +203,7 @@ const SettingsPage = () => {
                                   <AccordionToggle title={displayName} togglePosition="left" />
                                   <AccordionContent>
                                     <Box padding={6}>
-                                      <Stack size={4}>
+                                      <Stack spacing={4}>
                                         <Select
                                           name={`collectionSettings-${uid}-entryLabel`}
                                           label={getMessage('pages.settings.form.nameField.label')}
@@ -240,7 +246,7 @@ const SettingsPage = () => {
                     </Stack>
                   </Box>
                   <Box {...boxDefaultProps} >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.additional.title')}
                       </Typography>
@@ -272,7 +278,7 @@ const SettingsPage = () => {
                     </Stack>
                   </Box>
                   <Box {...boxDefaultProps} >
-                    <Stack size={4}>
+                    <Stack spacing={4}>
                       <Typography variant="delta" as="h2">
                         {getMessage('pages.settings.restoring.title')}
                       </Typography>

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

@@ -22,7 +22,7 @@ const NavigationHeader = ({
   return (
     <HeaderLayout
       primaryAction={
-        <Stack horizontal size={2}>
+        <Stack horizontal spacing={2}>
           <Box width="10vw">
             <Select
               type="select"

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { debounce, find, get, isEmpty, isEqual, isNil, isString } from 'lodash';
+import { debounce, find, get, first, isEmpty, isEqual, isNil, isString } from 'lodash';
 import PropTypes from 'prop-types';
 import { Formik } from 'formik'
 import slugify from 'slugify';
@@ -75,9 +75,11 @@ const NavigationItemForm = ({
 
   const sanitizePayload = (payload = {}) => {
     const { onItemClick, onItemLevelAddClick, related, relatedType, menuAttached, type, ...purePayload } = payload;
-    const relatedId = related
+    const relatedId = related;
+    const singleRelatedItem = isSingleSelected ? first(contentTypeEntities) : undefined;
     const relatedCollectionType = relatedType;
-    const title = payload.title || relatedSelectOptions.find(v => v.key == relatedId)?.label
+    const title = payload.title;
+    
     return {
       ...purePayload,
       title,
@@ -88,7 +90,8 @@ const NavigationItemForm = ({
       related: type === navigationItemType.INTERNAL ? relatedId : undefined,
       relatedType: type === navigationItemType.INTERNAL ? relatedCollectionType : undefined,
       isSingle: isSingleSelected,
-      uiRouterKey: generateUiRouterKey(purePayload.title, relatedId, relatedCollectionType),
+      singleRelatedItem,
+      uiRouterKey: generateUiRouterKey(title, relatedId, relatedCollectionType),
     };
   };
 
@@ -134,6 +137,7 @@ const NavigationItemForm = ({
     return undefined;
   };
 
+  const initialRelatedTypeSelected = data?.relatedType?.value;
   const relatedTypeSelectValue = form.relatedType;
   const relatedSelectValue = form.related;
 
@@ -187,7 +191,7 @@ const NavigationItemForm = ({
   const pathSourceName = isExternal ? 'externalPath' : 'path';
 
   const submitDisabled =
-    (form.type === navigationItemType.INTERNAL && isNil(get(form, `${inputsPrefix}related`))) ||
+    (form.type === navigationItemType.INTERNAL && !isSingleSelected && isNil(get(form, `${inputsPrefix}related`))) ||
     (form.type === navigationItemType.WRAPPER && isNil(get(form, `${inputsPrefix}title`)));
 
   const debouncedSearch = useCallback(
@@ -219,6 +223,9 @@ const NavigationItemForm = ({
     () => contentTypes
       .filter((contentType) => {
         if (contentType.isSingle) {
+          if (relatedTypeSelectValue && [relatedTypeSelectValue, initialRelatedTypeSelected].includes(contentType.uid)) {
+            return true;
+          }
           return !usedContentTypesData.some((_) => _.__collectionUid === contentType.uid && _.__collectionUid !== form.relatedType);
         }
         return true;
@@ -232,9 +239,9 @@ const NavigationItemForm = ({
           }
         },
         value: get(item, 'uid'),
-        label: appendLabelPublicationStatus(get(item, 'label', get(item, 'name')), item, true),
+        label: get(item, 'label', get(item, 'name')),
       })),
-    [contentTypes, usedContentTypesData],
+    [contentTypes, usedContentTypesData, relatedTypeSelectValue],
   );
 
   const thereAreNoMoreContentTypes = isEmpty(relatedSelectOptions) && !contentTypeSearchQuery;

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

@@ -89,10 +89,12 @@ const linkRelations = (item, config) => {
 
   if (isSingle && relatedType) {
     const relatedContentType = contentTypes.find(_ => relatedType === _.uid) || {};
+    const { singleRelatedItem = {} } = item;
     return {
       ...item,
       relatedType,
       relatedRef: {
+        ...singleRelatedItem,
         ...omit(relatedContentType, 'collectionName'),
         isSingle,
         __collectionUid: relatedContentType.uid,
@@ -122,7 +124,7 @@ const linkRelations = (item, config) => {
 
   const shouldFindRelated = (isNumber(related) || isUuid(related) || isString(related)) && !relatedRef;
   const shouldBuildRelated = !relatedRef || (relatedRef && (relatedRef.id !== relatedId));
-  
+
   if (shouldBuildRelated && !shouldFindRelated) {
     const relatedContentType = find(contentTypes,
       ct => ct.uid === relatedItem.__contentType, {});
@@ -295,9 +297,10 @@ export const isRelationPublished = ({ relatedRef, relatedType = {}, type, isColl
 
 export const validateNavigationStructure = (items = []) =>
   items.map(item =>
-    (item.removed || isRelationCorrect({
-      related: item.related,
-      type: item.type,
-    })) &&
+    (
+      item.removed ||
+      isRelationCorrect({ related: item.related, type: item.type }) ||
+      (item.isSingle && isRelationCorrect({ related: item.relatedType, type: item.type }))
+    ) &&
     validateNavigationStructure(item.items)
   ).filter(item => !item).length === 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",

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

@@ -8,7 +8,9 @@ module.exports = ({ strapi, nexus, config }) => {
 			definition(t) {
 				t.members(...related)
 			},
-			resolveType: (item) => strapi.contentTypes[item.__contentType]?.globalId
+			resolveType: (item) => {
+				return strapi.contentTypes[item.__contentType]?.globalId
+			}
 		});
 	}
 	

package/server/services/navigation.js

@@ -33,9 +33,7 @@ module.exports = ({ strapi }) => {
       const entities = await strapi
         .query(masterModel.uid)
         .findMany({
-          paggination: {
-            limit: -1,
-          }
+          limit: 0
         });
       return entities;
     },
@@ -52,9 +50,7 @@ module.exports = ({ strapi }) => {
           where: {
             master: id,
           },
-          paggination: {
-            limit: -1,
-          },
+          limit: 0,
           sort: ['order:asc'],
           populate: ['related', 'parent', 'audience']
         });
@@ -99,9 +95,7 @@ module.exports = ({ strapi }) => {
         const audienceItems = await strapi
           .query(audienceModel.uid)
           .findMany({
-            paggination: {
-              limit: -1,
-            }
+            limit: 0
           });
         extendedResult = {
           ...extendedResult,
@@ -133,10 +127,10 @@ module.exports = ({ strapi }) => {
       const defaultConfigValue = {
         additionalFields: get(config, 'additionalFields', pluginDefaultConfig('additionalFields')),
         contentTypes: get(config, 'contentTypes', pluginDefaultConfig('contentTypes')),
-        contentTypesNameFields: get(config, 'contentTypesNameFields',  pluginDefaultConfig('contentTypesNameFields')),
-        contentTypesPopulate: get(config, 'contentTypesPopulate',  pluginDefaultConfig('contentTypesPopulate')),
-        allowedLevels: get(config, 'allowedLevels',  pluginDefaultConfig('allowedLevels')),
-        gql: get(config, 'gql',  pluginDefaultConfig('gql')),
+        contentTypesNameFields: get(config, 'contentTypesNameFields', pluginDefaultConfig('contentTypesNameFields')),
+        contentTypesPopulate: get(config, 'contentTypesPopulate', pluginDefaultConfig('contentTypesPopulate')),
+        allowedLevels: get(config, 'allowedLevels', pluginDefaultConfig('allowedLevels')),
+        gql: get(config, 'gql', pluginDefaultConfig('gql')),
       }
       pluginStore.set({ key: 'config', value: defaultConfigValue });
 
@@ -399,9 +393,7 @@ module.exports = ({ strapi }) => {
             master: entity.id,
             ...itemCriteria,
           },
-          paggination: {
-            limit: -1,
-          },
+          limit: 0,
           sort: ['order:asc'],
           populate: ['related', 'audience', 'parent'],
         });
@@ -428,6 +420,7 @@ module.exports = ({ strapi }) => {
                 id: item.id,
                 title: utilsFunctions.composeItemTitle(item, contentTypesNameFields, contentTypes),
                 menuAttached: item.menuAttached,
+                order: item.order,
                 path: isExternal ? item.externalPath : parentPath,
                 type: item.type,
                 uiRouterKey: item.uiRouterKey,
@@ -511,7 +504,10 @@ module.exports = ({ strapi }) => {
         .filter(utilsFunctions.filterOutUnpublished)
         .map(item => itemParser({
           ...item,
-        }, path, field));
+        }, path, field))
+        .sort((x, y) => {
+          return x.order - y.order;
+       });
     },
 
     renderRFR({ items, parent = null, parentNavItem = null, contentTypes = [] }) {
@@ -632,7 +628,7 @@ module.exports = ({ strapi }) => {
           }
           const navigationItem = await strapi
             .query(itemModel.uid)
-            .create({ data });
+            .create({ data, populate: ['related', 'items'] });
           return !isEmpty(item.items)
             ? service.createBranch(
               item.items,
@@ -735,7 +731,6 @@ module.exports = ({ strapi }) => {
       if (relatedItems) {
         return Promise.all(relatedItems.map(async relatedItem => {
           try {
-
             const model = strapi.query('plugin::navigation.navigations-items-related');
             const entity = await model
               .findOne({

package/server/services/utils/functions.js

@@ -7,7 +7,8 @@ const {
   isString,
   get,
   isNil,
-  isArray
+  isArray,
+  first,
 } = require('lodash');
 
 const { type: itemType } = require('../../content-types/navigation-item/lifecycle');