strapi-plugin-navigation 2.0.1 → 2.0.2

package/README.md

@@ -89,7 +89,20 @@ Complete installation requirements are exact same as for Strapi itself and can b
 **We recommend always using the latest version of Strapi to start your new projects**.
 
 ## 🔧 Configuration
-Config for this plugin is stored as a part of `config/plugins.js` or `config/<env>/plugins.js` file. You can use following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
+
+### In `v2.0.3` and newer
+
+Version `2.0.3` introduces the intuitive **Settings** page which you can easily access via `Strapi Settings -> Section: Navigation Plugin -> Configuration`. On the dedicated page, you will be able to set up all crucial properties which drive the plugin and customize each individual collection for which **Navigation plugin** should be enabled.
+
+> *Note*
+> The default configuration for your plugin is fetched from `config/plugins.js` or, if the file is not there, directly from the plugin itself. If you would like to customize the default state to which you might revert, please follow the next section.
+
+### In `v2.0.2` and older + default configuration state for `v2.0.3` and newer
+
+Config for this plugin is stored as a part of the `config/plugins.js` or `config/<env>/plugins.js` file. You can use the following snippet to make sure that the config structure is correct. If you've got already configurations for other plugins stores by this way, you can use the `navigation` along with them. 
+
+> *Note v2.0.3 and newer only*
+> Changing this file will not automatically change plugin configuration. To synchronize plugin's config with plugins.js file, it is necessary to restore configuration through the settings page 
 
 ```js
     module.exports = ({ env }) => ({
@@ -111,13 +124,16 @@ Config for this plugin is stored as a part of `config/plugins.js` or `config/<en
 
 ### Properties
 - `additionalFields` - Additional fields: 'audience', more in the future
-- `allowedLevels` - Maximum level for which your're able to mark item as "Menu attached"
+- `allowedLevels` - Maximum level for which you're able to mark item as "Menu attached"
 - `contentTypes` - UIDs of related content types
 - `contentTypesNameFields` - Definition of content type title fields like `'api::<collection name>.<content type name>': ['field_name_1', 'field_name_2']`, if not set titles are pulled from fields like `['title', 'subject', 'name']`. **TIP** - Proper content type uid you can find in the URL of Content Manager where you're managing relevant entities like: `admin/content-manager/collectionType/< THE UID HERE >?page=1&pageSize=10&sort=Title:ASC&plugins[i18n][locale]=en`
 - `gql` - If you're using GraphQL that's the right place to put all necessary settings. More **[ here ](#gql-configuration)**
 
 ## 🔧 GQL Configuration
-Using navigation with GraphQL requires both plugins to be installed and working. You can find instalation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
+Using navigation with GraphQL requires both plugins to be installed and working. You can find installation guide for GraphQL plugin **[here](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#graphql)**.  To properly configure GQL to work with navigation you should provide `gql` prop. This should contain union types that will be used to define GQL response format for your data while fetching:
+
+> **Important!**
+> If you're using `config/plugins.js` to configure your plugins , please put `navigation` property before `graphql`. Otherwise types are not going to be properly added to GraphQL Schema. That's because of dynamic types which base on plugin configuration which are added on `bootstrap` stage, not `register`. This is not valid if you're using `graphql` plugin without any custom configuration, so most of cases in real.
 
 ```gql
 master: Int

package/__mocks__/strapi.js

@@ -44,7 +44,7 @@ const itemModelMock = {
         },
         parent: null,
     }),
-    findMany: async ({where}) => [{
+    findMany: async ({ where }) => [{
         id: 1,
         title: "home",
         type: "INTERNAL",
@@ -55,7 +55,7 @@ const itemModelMock = {
         order: 1,
         createdAt: "2021-12-31T10:04:54.812Z",
         updatedAt: "2022-01-14T13:36:29.430Z",
-        master: 1, 
+        master: 1,
         related: {
             id: 1,
             related_id: "1",
@@ -117,22 +117,22 @@ const pageModelMock = {
         }
     }),
     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
-            }
-        }]
+        "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
+        }
+    }]
 
 };
 
@@ -186,6 +186,17 @@ const strapiFactory = (plugins, contentTypes) => ({
                     findMany: () => [],
                 }
         }
+    },
+    store: ({ type, name }) => {
+        if (type === 'plugin' && name === 'navigation') {
+            return {
+                get: ({ key }) => key === 'config' ? {
+                    ...require('../server/config').default,
+                    contentTypes: ['api::pages.pages']
+                } : null,
+                set: () => null,
+            }
+        }
     }
 });
 

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

@@ -0,0 +1,56 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@strapi/design-system/Button';
+import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
+import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
+import { ExclamationMarkCircle, Check } from '@strapi/icons';
+import { getMessage } from '../../utils';
+
+const ConfirmationDialog = ({
+	isVisible = false,
+	isActionAsync = false,
+	children,
+	onConfirm,
+	onCancel,
+	header,
+	labelCancel,
+	labelConfirm,
+	iconConfirm
+}) => (
+	<Dialog onClose={onCancel} title={header || getMessage('components.confirmation.dialog.header', 'Confirmation')} isOpen={isVisible}>
+		<DialogBody icon={<ExclamationMarkCircle />}>
+			<Stack size={2}>
+				<Flex justifyContent="center">
+					<Typography id="dialog-confirm-description">{children || getMessage('components.confirmation.dialog.description')}</Typography>
+				</Flex>
+			</Stack>
+		</DialogBody>
+		<DialogFooter startAction={<Button onClick={onCancel} variant="tertiary" disabled={isActionAsync}>
+			{labelCancel || getMessage('components.confirmation.dialog.button.cancel', 'Cancel')}
+		</Button>} endAction={<Button onClick={onConfirm} variant="danger-light" startIcon={iconConfirm || <Check />} disabled={isActionAsync}>
+			{labelConfirm || getMessage('components.confirmation.dialog.button.confirm', 'Confirm')}
+		</Button>} />
+	</Dialog>
+);
+
+ConfirmationDialog.propTypes = {
+	isVisible: PropTypes.bool,
+	isActionAsync: PropTypes.bool,
+	children: PropTypes.string.isRequired,
+	header: PropTypes.string,
+	labelCancel: PropTypes.string,
+	labelConfirm: PropTypes.string,
+	iconConfirm: PropTypes.object,
+	onConfirm: PropTypes.func.isRequired,
+	onCancel: PropTypes.func.isRequired,
+};
+
+export default ConfirmationDialog;

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

@@ -1,22 +1,16 @@
 import React from 'react';
-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';
+import { Pencil, Trash, Refresh } from '@strapi/icons/';
 
 import Wrapper from './Wrapper';
 import ItemCardBadge from '../ItemCardBadge';
-import { getTrad } from "../../../translations";
+import { getMessage } from '../../../utils';
 
 const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit, onItemRestore }) => {
-
-	const { formatMessage } = useIntl();
-
 	return (
 		<Wrapper>
 			<Flex alignItems="center">
@@ -35,14 +29,14 @@ const ItemCardHeader = ({ title, path, icon, removed, onItemRemove, onItemEdit,
 						backgroundColor={`danger100`}
 						textColor={`danger600`}
 					>
-						{formatMessage(getTrad("navigation.item.badge.removed"))}
+						{getMessage("components.navigationItem.badge.removed")}
 					</ItemCardBadge>)
 				}
 
-				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<PencilIcon />} />
+				<IconButton disabled={removed} onClick={onItemEdit} label="Edit" icon={<Pencil />} />
 				{removed ?
-					<IconButton onClick={onItemRestore} label="Restore" icon={<RefreshIcon />} /> :
-					<IconButton onClick={onItemRemove} label="Remove" icon={<TrashIcon />} />
+					<IconButton onClick={onItemRestore} label="Restore" icon={<Refresh />} /> :
+					<IconButton onClick={onItemRemove} label="Remove" icon={<Trash />} />
 				}
 			</Flex>
 		</Wrapper>

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

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { isEmpty, isNumber, get } from 'lodash';
-import { useIntl } from "react-intl";
+import { isEmpty, isNumber } from 'lodash';
 
 import { Box } from '@strapi/design-system/Box';
 import { Card, CardBody } from '@strapi/design-system/Card';
@@ -10,17 +9,16 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { TextButton } from '@strapi/design-system/TextButton';
 import { Typography } from '@strapi/design-system/Typography';
-
 import { ArrowRight, Link as LinkIcon, Earth, Plus } from '@strapi/icons';
 
 import { navigationItemType } from '../../pages/View/utils/enums';
 import ItemCardHeader from './ItemCardHeader';
 import List from '../NavigationItemList';
 import Wrapper from './Wrapper';
-import { getTrad } from '../../translations';
 import { extractRelatedItemLabel } from '../../pages/View/utils/parsers';
 import ItemCardBadge from './ItemCardBadge';
 import { ItemCardRemovedOverlay } from './ItemCardRemovedOverlay';
+import { getMessage } from '../../utils';
 
 const Item = (props) => {
   const {
@@ -50,7 +48,6 @@ const Item = (props) => {
     menuAttached,
   } = item;
 
-  const { formatMessage } = useIntl();
   const { contentTypes, contentTypesNameFields } = config;
   const isExternal = type === navigationItemType.EXTERNAL;
   const isPublished = relatedRef && relatedRef?.publishedAt;
@@ -97,7 +94,7 @@ const Item = (props) => {
               onClick={(e) => onItemLevelAdd(e, viewId, isNextMenuAllowedLevel, absolutePath, menuAttached)}
             >
               <Typography variant="pi" fontWeight="bold" textColor={removed ? "neutral600" : "primary600"}>
-                {formatMessage(getTrad("navigation.item.action.newItem"))}
+                {getMessage("components.navigationItem.action.newItem")}
               </Typography>
             </TextButton>
             { relatedItemLabel && (<Box>
@@ -108,9 +105,11 @@ const Item = (props) => {
                   className="action"
                   small
                   >
-                    {formatMessage(getTrad(`navigation.item.badge.${isPublished ? 'published' : 'draft'}`), {
-                      type: relatedTypeLabel
-                    })}
+                {getMessage({
+                  id: `components.navigationItem.badge.${isPublished ? 'published' : 'draft'}`, props: {
+                    type: relatedTypeLabel
+                  }
+                })}
                 </ItemCardBadge>
                 <Typography variant="pi" fontWeight="bold" textColor="neutral600">
                   { relatedItemLabel }

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Alert } from '@strapi/design-system/Alert';
+
+export default styled(Alert)`
+    [role="status"] {
+        flex-direction: column;
+    }
+`

package/admin/src/hooks/useAllContentTypes.js

@@ -0,0 +1,13 @@
+import { useQuery } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchAllContentTypes } from '../utils/api';
+
+const useAllContentTypes = () => {
+  const toggleNotification = useNotification();
+  const { isLoading, data } = useQuery('contentTypes', () =>
+    fetchAllContentTypes(toggleNotification)
+  );
+  return { data, isLoading, };
+};
+
+export default useAllContentTypes;

package/admin/src/hooks/useNavigationConfig.js

@@ -0,0 +1,58 @@
+import { useQuery, useQueryClient } from 'react-query';
+import { useNotification } from '@strapi/helper-plugin';
+import { fetchNavigationConfig, restartStrapi, restoreNavigationConfig, updateNavigationConfig } from '../utils/api';
+import { getTrad } from '../translations';
+
+const useNavigationConfig = () => {
+  const queryClient = useQueryClient();
+  const toggleNotification = useNotification();
+  const { isLoading, data, err } = useQuery('navigationConfig', () =>
+    fetchNavigationConfig(toggleNotification)
+  );
+
+  const handleError = (type) => {
+    toggleNotification({
+      type: 'warning',
+      message: getTrad(`pages.settings.notification.${type}.error`),
+    });
+  };
+
+  const handleSuccess = async (type) => {
+    await queryClient.invalidateQueries('navigationConfig');
+    toggleNotification({
+      type: 'success',
+      message: getTrad(`pages.settings.notification.${type}.success`),
+    });
+  };
+  
+  const submitMutation = async (...args) => {
+    try {
+      await updateNavigationConfig(...args);
+      await handleSuccess('submit');
+    } catch (e) {
+      handleError('submit');
+    }
+  } 
+
+  const restoreMutation = async (...args) => {
+    try {
+      await restoreNavigationConfig(...args);
+      await handleSuccess('restore');
+    } catch (e) {
+      handleError('restore');
+    }
+  }
+
+  const restartMutation = async (...args) => {
+    try {
+      await restartStrapi(...args);
+      await handleSuccess('restart');
+    } catch (e) {
+      handleError('restart');
+    }
+  }
+
+  return { data, isLoading, err, submitMutation, restoreMutation, restartMutation };
+};
+
+export default useNavigationConfig;

package/admin/src/index.js

@@ -3,11 +3,34 @@ import pluginPkg from '../../package.json';
 import pluginId from './pluginId';
 import pluginPermissions from './permissions';
 import NavigationIcon from './components/icons/navigation';
-
+import { getTrad } from './translations';
 const name = pluginPkg.strapi.name;
 
 export default {
   register(app) {
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: { id: getTrad('pages.settings.section.title'), defaultMessage: 'Navigation Plugin' },
+      },
+      [
+        {
+          intlLabel: {
+            id: getTrad('pages.settings.section.subtitle'),
+            defaultMessage: 'Configuration',
+          },
+          id: 'navigation',
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "navigation-settings" */ './pages/SettingsPage'
+            );
+    
+            return component;
+          },
+          permissions: pluginPermissions.access,
+        }
+      ]);
     app.addMenuLink({
       to: `/plugins/${pluginId}`,
       icon: NavigationIcon,