strapi-plugin-comments 2.0.0 → 2.0.4

package/.husky/pre-commit

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

package/README.md

@@ -37,10 +37,10 @@ A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provid
 
 - **Comments Public REST + GraphQL API:** Elegant, entirely customizable and a fully extensible admin panel.
 - **Strapi & generic users:** Support for built-in & also generic non-Strapi users that might be the comments authors.
-- **Any Content Type relation:** Comments can by linked to any of your Content Types by default. Simply, you're controlling it.
+- **Any Content Type relation:** Comments can be linked to any of your Content Types by default. Simply, you're controlling it.
 - **Moderation Panel:** Search & Filter through the bucket with your auditory comments. Manage them by blocking single ones or full threads. All in combined list & hierarchical tree view of threads.
-- **Automated Bad Words filtering:** By detault end users are not allowed to post abusing comments where bad words have been used.
-- **Abuse Reporting & Reviewing:** Don't allow inferior language, react to reports from your community, send email notifiactions about abuse reports
+- **Automated Bad Words filtering:** By default end users are not allowed to post abusing comments where bad words have been used.
+- **Abuse Reporting & Reviewing:** Don't allow inferior language, react to reports from your community, send email notifications about issued reports
 
 ## ⚙️ Versions
 
@@ -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.
 
 
@@ -128,6 +138,9 @@ 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
   {
     // ...
@@ -203,7 +216,7 @@ Feature / Capability focused permissions:
 
 `GET <host>/api/comments/api::<collection name>.<content type name>:<entity id>`
 
-Return a hierarchical tree structure of comments for specified instance of Content Type like for example `Page` with `ID: 1`
+Return a hierarchical tree structure of comments for specified instance of Content Type like for example `Page` with `ID: 1`.
 
 **Example URL**: `https://localhost:1337/comments/api::page.page:1`
 
@@ -226,6 +239,8 @@ Return a hierarchical tree structure of comments for specified instance of Conte
     // ...
 ]
 ```
+#### Strapi REST API properties support:
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#sorting)
 
 ### Get Comments (flat structure)
 
@@ -255,6 +270,11 @@ Return a flat structure of comments for specified instance of Content Type like
 - `200` - Successful. Response with list of comments (can be empty)
 - `400` - Bad Request. Requested list for not valid / not existing Content Type
 
+#### Strapi REST API properties support:
+- [filtering](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/filtering-locale-publication.html#filtering)
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#sorting)
+- [pagination](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#pagination)
+
 ### Post a Comment
 
 *GraphQL equivalent: [Public GraphQL API -> Post a Comments](#post-a-comment-1)*
@@ -353,7 +373,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`.
 
@@ -460,6 +480,9 @@ query {
   }
 ```
 
+#### Strapi GraphQL API properties support:
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#sorting)
+
 ### Get Comments (flat structure)
 
 *REST API equivalent: [Public REST API -> Get Comments (flat structure)](#get-comments-flat-structure)*
@@ -516,6 +539,11 @@ query {
 }
 ```
 
+#### Strapi GraphQL API properties support:
+- [filtering](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#filters)
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#sorting)
+- [pagination](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#pagination)
+
 ### Post a Comment
 
 *REST API equivalent: [Public REST API -> Post a Comment](#post-a-comment)*

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

@@ -37,8 +37,10 @@ const DetailsEntity = ({
         .map(_ => capitalize(_))
         .join(' ');
 
+    const entityIsRenderable = data && !isEmpty(data) && !isEmpty(itemKeys);
+
     return (<Box padding={4}>
-        { !isEmpty(keys) && (<Box marginBottom={4}>
+        { entityIsRenderable && (<Box marginBottom={4}>
             <Typography variant="sigma" textColor="neutral600" id="entity-details">
                 { getMessage('page.details.panel.entity', 'Details') }
             </Typography>

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],
@@ -102,15 +105,12 @@ const Details = ({ config }) => {
                 <ContentLayout>
                   <TwoColsLayout 
                     startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} allowedActions={{ canModerate, canAccessReports, canReviewReports }} />} 
-                    endCol={!contentTypeData?.schema ? (<Box padding={4}>
-                      <Loader small>{ getMessage('page.details.panel.loading', 'Loading...') }</Loader>
-                    </Box>) : 
-                    (<DetailsEntity 
+                    endCol={<DetailsEntity 
                       data={entity} 
                       schema={contentTypeData?.schema} 
                       config={config}
                       filters={filters}
-                      onFiltersChange={handleChangeFilters} />)} 
+                      onFiltersChange={handleChangeFilters} />}
                   />
                 </ContentLayout>
               </>) }

package/admin/src/pages/Discover/components/DiscoverTableRow/index.js

@@ -98,7 +98,7 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
         }, status) }</StatusBadge>);
       };
     
-      const renderEntryUrl = entry => `/content-manager/collectionType/${entry.uid}/${entry.id}`;
+      const renderEntryUrl = entry => entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
       const renderDetailsUrl = entry => getUrl(`discover/${entry.id}`);
 
       const gotApprovalFlow = !isNil(item.approvalStatus);
@@ -130,7 +130,7 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
                 }, '#' + item.threadOf.id) }</Link>) : '-' }
             </Td>
             <Td style={{ maxWidth: '15vw' }}>
-                <TableLink to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related, config) }</TableLink>
+                { item.related ? (<TableLink to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related, config) }</TableLink>) : '-' }
             </Td>
             <Td>
                 <Typography textColor="neutral800">{ formatDate(item.updatedAt || item.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>

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;
+    }
+`