strapi-plugin-comments 2.0.2 → 2.0.6

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test:unit

package/README.md

@@ -84,7 +84,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.7 (recently tested)
+- Strapi v4.1.0 (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-comments/tree/strapi-v3).
@@ -92,6 +92,16 @@ In our minimum support we're following [official Node.js releases timelines](htt
 **We recommend always using the latest version of Strapi to start your new projects**.
 
 ## 🔧 Configuration
+
+### In `v2.0.3` and newest
+
+Version `2.0.3` introduce the intuitive **Settings** page which you can easly access via `Strapi Settings -> Section: Comments Plugin -> Configuration`. On dedicated page you will be able to setup all crucial properties which drives the plugin and customize each individual collection for which **Comments plugin** should be enabled.
+
+> *Note*
+> Default configuration for your plugin is fetched from `config/plugins.js` or 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 newest
+
 To setup amend default plugin configuration we recommend to put following snippet as part of `config/plugins.js` or `config/<env>/plugins.js` file. If the file does not exist yet, you have to create it manually. If you've got already configurations for other plugins stores by this way, use just the `comments` part within exising `plugins` item.
 
 
@@ -99,6 +109,8 @@ To setup amend default plugin configuration we recommend to put following snippe
     module.exports = ({ env }) => ({
         //...
         comments: {
+          enabled: true,
+          config: {
             badWords: false,
             moderatorRoles: ["Authenticated"],
             approvalFlow: ['api::page.page'],
@@ -112,6 +124,7 @@ To setup amend default plugin configuration we recommend to put following snippe
             gql: { 
               // ...
             },
+          },
         },
         //...
     });
@@ -128,11 +141,14 @@ To setup amend default plugin configuration we recommend to put following snippe
 ## Additional GQL Configuration
 All you need to do is to install and enable `@strapi/plugin-graphql` for you instance based on the **[official Strapi v4 docs](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#configurations)** and decide if you would like to call it by anyone (open for world) or only by authenticated users (Strapi users).
 
+> **Important!**
+> If you're using `config/plugins.js` to configure your plugins , please put `comments` 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 `boostrap` stage, not `register`. This is not valid if you're using `graphql` plugin without any custom configuration, so most of cases in real.
+
 ```json
   {
     // ...
-    gql: {
-      auth: true, // Default: false
+    "gql": {
+      "auth": true, // Default: false
     },
     // ...
   }
@@ -213,10 +229,10 @@ Return a hierarchical tree structure of comments for specified instance of Conte
 [
     {
         // -- Comment Model fields ---,
-        children: [
+        "children": [
             {
                 // -- Comment Model fields ---,
-                children: [
+                "children": [
                     // ...
                 ]
             },
@@ -242,7 +258,8 @@ Return a flat structure of comments for specified instance of Content Type like
 **Example response body**
 
 ```json
-[
+{
+  "data": [
     {
         // -- Comment Model fields ---
     },
@@ -250,7 +267,13 @@ Return a flat structure of comments for specified instance of Content Type like
         // -- Comment Model fields ---
     },
     // ...
-]
+  ],
+  "meta": {
+    "pagination": {
+      // payload based on Strapi REST Pagination specification
+    }
+  }
+}
 ```
 
 **Possible response codes**
@@ -360,7 +383,7 @@ Updates a specified Comment content based on it `commentId` and related to speci
 
 *GraphQL equivalent: [Public GraphQL API -> Delete Comment](#delete-comment-1)*
 
-`DELETE <host>/api/comments/api::<collection name>.<content type name>:<entity id>/<commentId>?authorId=<authorId>`
+`DELETE <host>/api/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>?authorId=<authorId>`
 
 Deletes a specified Comment based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1`.
 

package/__mocks__/initSetup.js

@@ -1,13 +1,42 @@
 const { get, set } = require('lodash');
 
-module.exports = (config = {}) => {
+module.exports = (config = {}, toStore = false) => {
   const mock = {
+    db: toStore ? {
+      plugin: {
+        comments: {
+          config: { ...config },
+        },
+      },
+    }: {},
     getRef: function() {
       return this;
     },
     plugin: function(name) {
       return this.plugins[name];
     },
+    store: async function(storeProps) {
+      const { type, name } = storeProps; // { type: 'plugin', name: 'comments' }
+
+      const mockedStore = {
+        get: async function(props) { // { key: 'config' }
+          const { key } = props;
+          return new Promise(resolve => resolve(get(mock.db, `${type}.${name}.${key}`, undefined)));
+        },
+        set: async function(props) { // { key: 'config', value: {...} }
+          const { key, value } = props;
+          set(mock.db, `${type}.${name}.${key}`, value);
+          return this.get(key);
+        },
+        delete: async function(props) { // { key: 'config' }
+          const { key } = props;
+          set(mock.db, `${type}.${name}.${key}`, undefined);
+          return new Promise(resolve => resolve(true));
+        },
+      };
+
+      return new Promise(resolve => resolve(mockedStore));
+    },
     plugins: {
       comments: {
         service: function(name) {
@@ -44,7 +73,7 @@ module.exports = (config = {}) => {
           entryLabel: {
             'api::blog-post.blog-post': ['alternative_subject'],
           },
-          ...config
+          ...(toStore ? {} : config)
         }
       }
     }

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

@@ -0,0 +1,18 @@
+/**
+ *
+ * Form Switch
+ *
+ */
+
+ import React from 'react';
+ import { Stack } from '@strapi/design-system/Stack';
+ import { Typography } from '@strapi/design-system/Typography';
+import { StyledSwitch } from './styles';
+
+const FormSwitch = ({ label, hint, ...props }) => (<Stack size={1}>
+    { label && (<Typography variant="pi" as="label" fontWeight="bold" textColor="neutral800">{ label }</Typography>) }
+    <StyledSwitch label={label} { ...props } />
+    { hint && (<Typography variant="pi" as="label" textColor="neutral600">{ hint }</Typography>) }
+</Stack>);
+
+export default FormSwitch;

package/admin/src/components/FormSwitch/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Switch } from '@strapi/design-system/Switch';
+
+export const StyledSwitch = styled(Switch)`
+    &>div>span {
+        font-size: 12px;
+    }
+`;

package/admin/src/hooks/useConfig.js

@@ -0,0 +1,49 @@
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { fetchConfig, restartStrapi, restoreConfig, updateConfig } from '../pages/Settings/utils/api';
+import pluginId from '../pluginId';
+
+const useConfig = (toggleNotification) => {
+  const queryClient = useQueryClient();
+
+  const fetch = useQuery('get-config', () =>
+    fetchConfig(toggleNotification)
+  );
+
+  const handleError = (type, callback = () => {}) => {
+    toggleNotification({
+      type: 'warning',
+      message: `${pluginId}.page.settings.notification.${type}.error`,
+    });
+    callback();
+  };
+
+  const handleSuccess = (type, callback = () => {}, invalidateQueries = true) => {
+    if (invalidateQueries) {
+      queryClient.invalidateQueries('get-config');
+    };
+    toggleNotification({
+      type: 'success',
+      message: `${pluginId}.page.settings.notification.${type}.success`,
+    });
+    callback();
+  };
+
+  const submitMutation = useMutation(updateConfig, {
+    onSuccess: () => handleSuccess('submit'),
+    onError: () => handleError('submit'),
+  });
+
+  const restoreMutation = useMutation(restoreConfig, {
+    onSuccess: () => handleSuccess('restore'),
+    onError: () => handleError('restore'),
+  });
+
+  const restartMutation = useMutation(restartStrapi, {
+    onSuccess: () => handleSuccess('restart', () => {}, false),
+    onError: () => handleError('restart'),
+  });
+
+  return { fetch, restartMutation, submitMutation, restoreMutation };
+};
+
+export default useConfig;

package/admin/src/index.js

@@ -6,7 +6,7 @@ import PluginIcon from './components/PluginIcon';
 import pluginPermissions from './permissions';
 import reducers from './reducers';
 
-const name = pluginPkg.strapi.name;
+const { name, displayName } = pluginPkg.strapi;
 
 export default {
   register(app) {
@@ -16,7 +16,7 @@ export default {
       icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
-        defaultMessage: name,
+        defaultMessage: displayName,
       },
       Component: async () => {
         const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
@@ -25,6 +25,35 @@ export default {
       },
       permissions: pluginPermissions.access,
     });
+
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.plugin.section`,
+          defaultMessage: `${displayName} plugin`,
+        },
+      },
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.plugin.section.item`,
+            defaultMessage: 'Configuration',
+          },
+          id: 'comments',
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "documentation-settings" */ './pages/Settings'
+            );
+    
+            return component;
+          },
+          permissions: pluginPermissions.settings,
+        },
+      ]
+    );
+
     app.addReducers(reducers);
     app.registerPlugin({
       id: pluginId,

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

@@ -28,7 +28,7 @@ import {
 import getMessage from '../../utils/getMessage';
 import { fetchDetailsData, fetchContentTypeData } from '../utils/api';
 import pluginPermissions from '../../permissions';
-import { getUrl } from '../../utils';
+import { getUrl, parseRegExp } from '../../utils';
 import Nav from '../../components/Nav';
 import DetailsEntity from './components/DetailsEntity';
 import DiscussionThread from '../../components/DiscussionThread';
@@ -60,7 +60,10 @@ const Details = ({ config }) => {
 
   const [filters, setFilters] = useState({});
 
-  const regexUID = new RegExp(config.regex.uid);
+  const regexUID = new RegExp(
+    parseRegExp(config.regex.uid).value,
+    parseRegExp(config.regex.uid).flags
+  );
 
   const { isLoading: isLoadingForData, data, isFetching } = useQuery(
     ['get-details-data', id, filters, canAccess],

package/admin/src/pages/Settings/components/RestartAlert/styles.js

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