strapi-plugin-comments 2.0.0-rc.2 → 2.0.3

package/.husky/pre-commit

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

package/README.md

@@ -3,7 +3,7 @@
 </div>
 <div align="center">
   <h1>Strapi v4 - Comments plugin</h1>
-  <p>Powerfull Strapi based comments moderation tool for you and your users</p>
+  <p>Powerful Strapi based comments moderation tool for you and your users</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-comments">
     <img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-comments?label=npm&logo=npm">
   </a>
@@ -16,6 +16,12 @@
   <a href="https://codecov.io/gh/VirtusLab-Open-Source/strapi-plugin-comments">
     <img src="https://codecov.io/gh/VirtusLab-Open-Source/strapi-plugin-comments/coverage.svg?branch=master" alt="codecov.io" />
   </a>
+  <a href="https://sharing.clickup.com/tl/xhcmx-83/strapiv-4-comments-roadmap">
+    <img src="https://img.shields.io/website?down_message=roadmap&label=product&up_message=roadmap&url=https%3A%2F%2Fsharing.clickup.com%2Ftl%2Fxhcmx-83%2Fstrapiv-4-comments-roadmap" />
+  </a>
+  <a href="https://sharing.clickup.com/b/xhcmx-63/strapiv-4-comments-board">
+    <img src="https://img.shields.io/website?down_message=board&label=product&up_color=blue&up_message=board&url=https%3A%2F%2Fsharing.clickup.com%2Fb%2Fxhcmx-63%2Fstrapiv-4-comments-board" />
+  </a>
 </div>
 
 ---
@@ -31,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 &amp; generic users:** Support for built-in &amp; 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 &amp; 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
 
@@ -62,7 +68,7 @@ or just run Strapi in the development mode with `--watch-admin` option:
 yarn develop --watch-admin
 ```
 
-The **Comments** plugin should appear in the navigation menu of Strapi after you run app again.
+The **Comments** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
 Enjoy 🎉
 
@@ -78,7 +84,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.6 (recently tested)
+- Strapi v4.0.7 (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).
@@ -86,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.
 
 
@@ -122,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
   {
     // ...
@@ -197,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`
 
@@ -220,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)
 
@@ -249,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)*
@@ -347,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`.
 
@@ -454,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)*
@@ -510,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)*
@@ -705,15 +739,25 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 ## 🤝 Contributing
 
+<div>
+  <a href="https://sharing.clickup.com/tl/xhcmx-83/strapiv-4-comments-roadmap">
+    <img src="https://img.shields.io/website?down_message=roadmap&label=product&up_message=roadmap&url=https%3A%2F%2Fsharing.clickup.com%2Ftl%2Fxhcmx-83%2Fstrapiv-4-comments-roadmap" />
+  </a>
+  <a href="https://sharing.clickup.com/b/xhcmx-63/strapiv-4-comments-board">
+    <img src="https://img.shields.io/website?down_message=board&label=product&up_color=blue&up_message=board&url=https%3A%2F%2Fsharing.clickup.com%2Fb%2Fxhcmx-63%2Fstrapiv-4-comments-board" />
+  </a>
+</div>
+
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
 ## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
-- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Look for @cyp3r and DM.
+- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Find us by `[VirtusLab]` prefix and DM.
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/issues) (Bug reports, Contributions, Questions and Discussions)
+- [E-mail](mailto:strapi@virtuslab.com) - we will respond back as soon as possible
 
 ## 📝 License
 

package/__mocks__/initSetup.js

@@ -0,0 +1,82 @@
+const { get, set } = require('lodash');
+
+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) {
+            return this.services[name]({ strapi: mock.getRef() });
+        },
+        package: require('../package.json'),
+        services: {
+          common: require('../server/services/common'),
+          client: require('../server/services/client'),
+          admin: require('../server/services/admin'),
+        },
+        contentTypes: {
+          comment: {
+            ...require('../content-types/comment'),
+            uid: 'plugins::comments.comment',
+          },
+          'comment-report': {
+            ...require('../content-types/report'),
+            uid: 'plugins::comments.comment-report'
+          },
+        }
+      }
+    },
+    config: {
+      get: function(prop = '') {
+        return get(this.plugins, prop.replace('plugin.', ''));
+      },
+      set: function(prop = '', value) {
+        return set(this.plugins, prop.replace('plugin.', ''), value);
+      },
+      plugins: {
+        comments: {
+          approvalFlow: ['api::blog-post.blog-post'],
+          entryLabel: {
+            'api::blog-post.blog-post': ['alternative_subject'],
+          },
+          ...(toStore ? {} : config)
+        }
+      }
+    }
+  };
+  return mock;
+};

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

@@ -0,0 +1,10 @@
+
+import styled from 'styled-components';
+import { Button } from '@strapi/design-system/Button';
+
+export const ActionButton = styled(Button)`
+    padding: 7px 16px;
+    margin-left: ${({ isSingle }) => isSingle ? '0' : '.5rem'};
+
+    white-space: nowrap;
+`;

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

@@ -8,7 +8,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isNil } from 'lodash';
 import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
@@ -22,17 +21,14 @@ const DiscussionThread = ({ level = [], selected = {}, allowedActions, isReloadi
     const rootThread = selected?.threadOf;
     return (<LoadingIndicatorContainer as={Box} padding={4}>
         { isReloading && <LoadingIndicatorOverlay />}
-        <Flex as={Box} direction="row" justifyContent="space-between">
-            <Typography variant="sigma" textColor="neutral600" id="entity-details">
+        <Flex as={Box} direction="row" justifyContent="space-between" marginBottom={2}>
+            <Typography variant="delta" textColor="neutral800" id="discussion-thread">
                 { getMessage('page.details.panel.discussion', 'Discussion') }
             </Typography>
             { rootThread && (<Link to={getUrl(`discover/${rootThread.id}`)} startIcon={<ArrowUp />}>
                         { getMessage('page.details.panel.discussion.nav.back') }
                     </Link>) }
         </Flex>
-        <Box paddingTop={2} paddingBottom={6}>
-            <Divider />
-        </Box>
         <Flex as="ul" direction="column" alignItems="flex-start">
             { rootThread && (<DiscussionThreadItem {...rootThread} allowedActions={allowedActions} isThreadAuthor root pinned />) }
             { level.map(item => {

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

@@ -1,90 +1,47 @@
 /**
  *
- * Entity Details
+ * Discussion thread - Item
  *
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Avatar, Initials } from '@strapi/design-system/Avatar';
 import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight } from '@strapi/icons';
-import DiscussionThreadItemMeta from '../DiscussionThreadItemMeta';
-import { AvatarWrapper, DiscussionThreadItemBox, DiscussionThreadItemBoxContent, DiscussionThreadItemContent, DiscussionThreadItemLeft, DiscussionThreadItemLinkBox, DiscussionThreadItemRight, DiscussionThreadItemRoot } from './styles';
+import DiscussionThreadItemFooter from '../DiscussionThreadItemFooter';
 import DiscussionThreadItemActions from '../DiscussionThreadItemActions';
-import { getMessage, getUrl, renderInitials } from '../../utils';
-import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
+import { DiscussionThreadItemContainer, DiscussionThreadFullsize, DiscussionThreadItemContent } from './styles';
 
 const DiscussionThreadItem = (props) => {
     const { 
+        as = "li",
         isSelected, 
-        isThreadAuthor, 
         content, 
         root, 
         preview, 
-        pinned, 
-        blocked, 
-        removed, 
-        blockedThread, 
-        gotThread, 
-        threadFirstItemId, 
-        author = {} } = props;
-
-    let background = 'neutral100';
-    let borderColor = 'neutral200';
-    let dividerColor = 'neutral200';
-    let StyledComponent = DiscussionThreadItemRight;
-
-    if(isThreadAuthor || root){
-        StyledComponent = DiscussionThreadItemLeft;
-        borderColor = 'neutral100';
-        dividerColor = 'neutral100';
-        background = null;
-    } 
-    
-    if (isSelected) {
-        background = 'secondary100'
-        borderColor = 'secondary500';
-        dividerColor = 'secondary200';
-    }
-
-    if (root) {
-        StyledComponent = DiscussionThreadItemRoot;
-    }
-
-    const { name, avatar } = author;
-    const isBlocked = blocked || blockedThread;
+        pinned } = props;
     
-    return (<StyledComponent as="li">
-        <DiscussionThreadItemContent as={Flex} direction="row">
-            <AvatarWrapper>
-                { avatar ? <Avatar src={avatar} alt={name} /> : <Initials>{ renderInitials(name) }</Initials> }
-            </AvatarWrapper>
-            <DiscussionThreadItemBox hasRadius shadow="filterShadow" borderColor={borderColor} background={background} padding={2}>
-                <Flex as={Box} paddingBottom={2} direction="column">
-                    <DiscussionThreadItemBoxContent as={Flex} direction="row">
-                        <Box as={Flex} grow={1} alignItems="center">
-                            <Typography variant="omega">{ content }</Typography>
-                        </Box>
-                        { !preview && (<DiscussionThreadItemActions { ...props } root={root || pinned} />) }
-                    </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...props } gotThread={gotThread || root} />) }
-                </Flex>
-                <Divider background={dividerColor} />
-                <DiscussionThreadItemMeta { ...props } />
-            </DiscussionThreadItemBox>
-        </DiscussionThreadItemContent>
-
-        { (gotThread && !(removed || preview || pinned)) && (<DiscussionThreadItemLinkBox direction="column" alignItems="flex-end">
-            <Link to={getUrl(`discover/${threadFirstItemId}`)} endIcon={<ArrowRight />}>
-                { getMessage('page.details.panel.discussion.nav.drilldown') }
-            </Link>
-        </DiscussionThreadItemLinkBox>) }
-    </StyledComponent>);
+    return (<DiscussionThreadFullsize as={as} marginBottom={preview ? 4 : 0}>
+        <DiscussionThreadItemContainer 
+            as={Flex} 
+            direction="column" 
+            alignItems="flex-start" 
+            hasRadius 
+            background={isSelected ? 'neutral100' : null} 
+            paddingLeft={2} paddingRight={2} paddingTop={4} paddingBottom={4}>
+            <DiscussionThreadItemContent 
+                as={Flex} 
+                paddingBottom={2} 
+                direction="row">
+                <Box as={Flex} grow={1} alignItems="center" marginTop="6px">
+                    <Typography variant="omega" textColor="neutral800">{ content }</Typography>
+                </Box>
+                { !preview && (<DiscussionThreadItemActions { ...props } root={root || pinned} preview={preview} />) }
+            </DiscussionThreadItemContent>
+            <DiscussionThreadItemFooter { ...props } />
+        </DiscussionThreadItemContainer>
+    </DiscussionThreadFullsize>);
 };
 
 DiscussionThreadItem.propTypes = {

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

@@ -1,88 +1,13 @@
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
-export const AvatarWrapper = styled(Box)``;
-export const InitialsWrapper = styled(Box)``;
-
-export const DiscussionThreadItemLinkBox = styled(Flex)`
+export const DiscussionThreadFullsize = styled(Box)`
     width: 100%;
-    margin-top: .5rem;
-    margin-bottom: .5rem;
 `
-
-const DiscussionThreadItemStyled = styled(Box)`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin-bottom: 1rem;
-
-    ${AvatarWrapper},
-    ${InitialsWrapper} {
-        align-self: flex-start;
-        margin-top: .4rem;
-    }
-`;
-
-export const DiscussionThreadItemContent = styled(Box)`
-    max-width: 45%;
-`;
-
-export const DiscussionThreadItemLeft = styled(DiscussionThreadItemStyled)`
+export const DiscussionThreadItemContent = styled(DiscussionThreadFullsize)`
     align-items: flex-start;
-    padding-left: 4rem;
-    text-align: left;
-
-    ${DiscussionThreadItemContent} {
-        align-self: flex-start;
-    }
-
-    ${AvatarWrapper},
-    ${InitialsWrapper} {
-        margin-right: 1rem;
-    }
 `;
 
-export const DiscussionThreadItemRight = styled(DiscussionThreadItemStyled)`
-    align-items: flex-end;
-    padding-right: 4rem;
-    text-align: left;
-
-    ${DiscussionThreadItemContent} {
-        align-self: flex-end;
-        flex-direction: row-reverse;
-    }
-
-    ${AvatarWrapper},
-    ${InitialsWrapper} {
-        margin-left: 1rem;
-    }
-
-    ${DiscussionThreadItemLinkBox} {
-        margin-right: 3rem;
-    }
-`;
-
-export const DiscussionThreadItemBox = styled(Box)`
-    
+export const DiscussionThreadItemContainer = styled(DiscussionThreadFullsize)`
+    align-items: flex-start;
 `;
-
-export const DiscussionThreadItemBoxContent = styled(Box)`
-    width: 100%;
-    align-items: stretch;
-`
-
-export const DiscussionThreadItemRoot = styled(DiscussionThreadItemLeft)`
-    padding-left: 0;
-    padding-right: 0;
-
-
-    ${DiscussionThreadItemContent} {
-        width: 100%;
-        max-width: 100%;
-    }
-
-    ${DiscussionThreadItemBox} {
-        flex-grow: 1;
-    }
-`;