strapi-plugin-comments 2.0.0-beta.3 → 2.0.0-beta.7

package/README.md

@@ -50,9 +50,16 @@ Enjoy 🎉
 
 Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under [Installation Requirements](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html).
 
+**Minimum environment requirements**
+- Node.js `>=14.x.x`
+- NPM `>=7.x.x`
+
+In our minimum support we're following [official Node.js releases timelines](https://nodejs.org/en/about/releases/).
+
 **Supported Strapi versions**:
 
-- Strapi v4.0.2 (recently tested)
+- Strapi v4.0.5 (recently tested)
+- Strapi v4.x
 
 (This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
 
@@ -76,10 +83,14 @@ To setup amend default plugin configuration we recommend to put following snippe
     comments: {
         badWords: false,
         moderatorRoles: ["Authenticated"],
+        approvalFlow: ['api::page.page'],
         entryLabel: {
             '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
             'api::page.page': ['MyField'],
         },
+        reportReasons: {
+            'MY_CUSTOM_REASON': 'MY_CUSTOM_REASON',
+        },
     },
     ...
 ```
@@ -87,11 +98,28 @@ To setup amend default plugin configuration we recommend to put following snippe
 ### Properties
 - `badWords` - Enabled support for [bad words filtering](https://www.npmjs.com/package/bad-words). Can be turned off or overwritten using [options reference](https://www.npmjs.com/package/bad-words#constructor). Default value: `true`. 
 - `moderatorRoles` - Optional list of names of roles. Users with those roles will be notified by email when a new abuse report is created. This feature requires a built-in [Strapi email plugin](https://docs.strapi.io/developer-docs/latest/plugins/email.html) configured.
-- `entryLabel` - ordered list of property names per Content Type to generate related entity label. Default set as `*`.
+- `approvalFlow` - list of Content Types which are supporting approval flow. Values must be in format like `'api::<collection name>.<content type name>'`. For not included, posted comments are going to be immediately visible. 
+- `entryLabel` - ordered list of property names per Content Type to generate related entity label. Keys must be in format like `'api::<collection name>.<content type name>'`. Default formatting set as `*`.
+- `reportReasons` - set of enums you would like to use for issuing abuse reports. Provided by default `'BAD_LANGUAGE'`, `'DISCRIMINATION'` and `'OTHER'`.
 
 ## 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)**.
+
+See [available GQL specification section](#public-graphql-specification).
+
+## RBAC
+Plugin provides granular permissions based on Strapi RBAC functionality.
+
+### Mandatory permissions
+For any role different than **Super Admin**, to access the **Comments panel** you must set following permissions:
+- _Plugins_ -> _Content-type-builder_ -> _Read_ - gives you ability to fetch Content Type schema
+- _Plugins_ -> _Comments_ -> _Comments: Read_ - gives you the basic read access to **Comments Panel**
 
-> To be done
+### Optional permissions
+Feature / Capability focused permissions:
+- _Plugins_ -> _Comments_ -> _Comments: Moderate_ - allows you to block, unblock, approve &amp; reject comments
+- _Plugins_ -> _Comments_ -> _Reports: Read_ - allows you to see the list of issued abuse reports against comments
+- _Plugins_ -> _Comments_ -> _Reports: Moderate_ - allows you to review (resolve) issued abuse reports against comments
 
 ## Public API Comment model
 
@@ -104,10 +132,14 @@ To setup amend default plugin configuration we recommend to put following snippe
     "blockedThread": true,
     "blockReason": null,
     "authorUser": null,
-    "authorId": "207ccfdc-94ba-45eb-979c-790f6f49c392",
-    "authorName": "Joe Doe",
-    "authorEmail": "jdoe@sample.com",
-    "authorAvatar": null,
+    "removed": null,
+    "approvalStatus": "APPROVED", // Only in case of enabled approval flow. Default: null
+    "author": {
+        "id": "207ccfdc-94ba-45eb-979c-790f6f49c392",
+        "name": "Joe Doe",
+        "email": "jdoe@sample.com",
+        "avatar": null,
+    },
     "createdAt": "2020-07-14T20:13:01.649Z",
     "updatedAt": "2020-07-14T20:13:01.670Z",
     "related": {}, // Related content type entity
@@ -122,6 +154,8 @@ To setup amend default plugin configuration we recommend to put following snippe
     "blocked": true,
     "blockedThread": null,
     "blockReason": null,
+    "removed": null,
+    "approvalStatus": "REJECTED", // Only in case of enabled approval flow. Default: null
     "authorUser": {
         "id": 1,
         "username": "Sample User",
@@ -220,7 +254,6 @@ Posts a Comment related to specified instance of Content Type like for example `
     },
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
-	"related": "api::page.page:1"
 }
 ```
 
@@ -230,7 +263,6 @@ Posts a Comment related to specified instance of Content Type like for example `
 	"authorUser": 1, // id of a author user. Optional in case of 'enableUsers: true' in the plugin configuration
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
-	"related": "api::page.page:1"
 }
 ```
 
@@ -308,7 +340,7 @@ Deletes a specified Comment based on it `commentId` and related to specified ins
 - `409` - Conflict. Occurs when trying to delete a non existing comment.
 
 
-### Report abuse in the Comment
+### Issue Abuse Report against specified Comment
 
 `POST <host>/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>/report-abuse`
 
@@ -325,7 +357,7 @@ Reports abuse in specified Comment content based on it `commentId` and related t
 }
 ```
 
-*Available reason enums:* `OTHER`, `BAD_WORDS`, `DISCRIMINATION`
+*Available reason enums:* `BAD_WORDS`, `OTHER`, `DISCRIMINATION` (want more? See [configuration section](#configuration).)
 
 **Example response body**
 
@@ -339,6 +371,298 @@ Reports abuse in specified Comment content based on it `commentId` and related t
 - `200` - Successful. Response with reported abuse.
 - `409` - Conflict. Occurs when trying to report an abuse to a non existing comment.
 
+## Public GraphQL specification
+
+> *To test all queries and understand the schemas use GraphQL Playground exposed by `@strapi/plugin-graphql` on `http://localhost:1337/graphql`*
+
+### Get Comments
+
+*REST API equivalent: [Public API -> Get Comments](#get-comments)*
+
+**Example request**
+
+```graphql
+query {
+  findAllFlat(
+    relation: "api::page.page:1"
+    filters: { content: { contains: "Test" } }
+  ) {
+        id
+        content
+        blocked
+        threadOf {
+            id
+        }
+        author {
+            id
+            name
+        }
+    }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "findAllFlat": [
+      {
+        "id": 3,  
+        "content": "Test",
+        "blocked": false,
+        "threadOf": null,
+        "author": {
+          "id": "123456",
+          "name": "Joe Doe"
+        }
+      },
+      //...
+    ]
+  }
+```
+
+### Get Comments (flat structure)
+
+*REST API equivalent: [Public API -> Get Comments (flat structure)](#get-comments-flat-structure)*
+
+**Example request**
+
+```graphql
+query {
+  findAllInHierarchy(relation: "api::page.page:1") {
+    id
+    content
+    blocked
+    children {
+      id
+      content
+    }
+    threadOf {
+      id
+    }
+    author {
+      id
+      name
+    }
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "findAllInHierarchy": [
+      {
+        "id": 1,
+        "content": "Test",
+        "blocked": false,
+        "children": [
+          {
+            "id": 6,
+            "content": "Text to search for"
+          },
+          //...
+        ],
+        "threadOf": null,
+        "author": {
+          "id": "123456",
+          "name": "Joe Doe"
+        }
+      },
+      //...
+    ]
+  }
+}
+```
+
+### Post a Comment
+
+*REST API equivalent: [Public API -> Post a Comment](#post-a-comment)*
+
+**Example request**
+
+```graphql
+mutation createComment {
+  createComment(
+    input: {
+      relation: "api::page.page:1"
+      content: "Hello World!"
+      threadOf: 3
+      author: { id: "12345678", name: "John Wick", email: "test@test.pl" }
+    }
+  ) {
+    id
+    content
+    threadOf {
+      id
+    }
+    author {
+      id
+      name
+    }
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "createComment": {
+      "id": 34,
+      "content": "Hello World!",
+      "threadOf": {
+        "id": 3
+      },
+      "author": {
+        "id": "12345678",
+        "name": "John Wick"
+      }
+    }
+  }
+}
+```
+
+### Update Comment
+
+*REST API equivalent: [Public API -> Update Comment](#update-comment)*
+
+**Example request**
+
+```graphql
+mutation updateComment {
+  updateComment(
+    input: {
+      id: 34
+      relation: "api::page.page:1"
+      content: "I've changed it!"
+      author: { id: "12345678" }
+    }
+  ) {
+    id
+    content
+    threadOf {
+      id
+    }
+    author {
+      id
+      name
+    }
+    createdAt
+    updatedAt
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "updateComment": {
+      "id": 34,
+      "content": "I've changed it!",
+      "threadOf": {
+        "id": 3
+      },
+      "author": {
+        "id": "12345678",
+        "name": "John Wick"
+      },
+      "createdAt": "2022-01-26T07:45:35.978Z",
+      "updatedAt": "2022-01-26T07:47:44.659Z"
+    }
+  }
+}
+```
+
+### Delete Comment
+
+*REST API equivalent: [Public API -> Delete Comment](#delete-comment)*
+
+**Example request**
+
+```graphql
+mutation removeComment {
+  removeComment(
+    input: { id: 33, relation: "api::page.page:1", author: { id: "12345678" } }
+  ) {
+    id
+    removed
+  }
+}
+```
+
+**Example response**
+
+```json
+{
+  "data": {
+    "removeComment": {
+      "id": 33,
+      "removed": true
+    }
+  }
+}
+```
+
+### Issue Abuse Report against specified Comment
+
+*REST API equivalent: [Public API -> Issue Abuse Report against specified Comment](#issue-abuse-report-against-specified-comment)*
+
+**Example request body**
+
+```graphql
+mutation createAbuseReport {
+  createAbuseReport(
+    input: {
+      commentId: 34
+      relation: "api::page.page:1"
+      reason: BAD_LANGUAGE
+      content: "Rude language"
+    }
+  ) {
+    id
+    reason
+    content
+    related {
+      id
+      author {
+        id
+        name
+      }
+    }
+  }
+}
+```
+
+*Available reason enums:* `BAD_WORDS`, `OTHER`, `DISCRIMINATION` (want more? See [configuration section](#configuration).)
+
+**Example response**
+
+```json
+{
+  "data": {
+    "createAbuseReport": {
+      "id": 28,
+      "content": "Rude language",
+      "reason": "DISCRIMINATION",
+      "related": {
+        "id": 34,
+        "author": {
+          "id": "12345678",
+          "name": "John Wick"
+        }
+      }
+    }
+  }
+}
+```
+
 ## Examples
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-plugin-comments) repository.

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

@@ -18,7 +18,7 @@ import { getMessage, getUrl } from '../../utils';
 import LoadingIndicatorOverlay from '../LoadingIndicatorOverlay';
 import { LoadingIndicatorContainer } from '../LoadingIndicatorOverlay/styles';
 
-const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
+const DiscussionThread = ({ level = [], selected = {}, allowedActions, isReloading }) => {
     const rootThread = selected?.threadOf;
     return (<LoadingIndicatorContainer as={Box} padding={4}>
         { isReloading && <LoadingIndicatorOverlay />}
@@ -34,12 +34,14 @@ const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
             <Divider />
         </Box>
         <Flex as="ul" direction="column" alignItems="flex-start">
-            { rootThread && (<DiscussionThreadItem {...rootThread} isThreadAuthor root pinned />) }
+            { rootThread && (<DiscussionThreadItem {...rootThread} allowedActions={allowedActions} isThreadAuthor root pinned />) }
             { level.map(item => {
                 const isSelected = selected.id === item.id;
                 const isThreadAuthor = !isNil(selected?.threadOf?.authorId) && (selected?.threadOf?.authorId === item.authorId);
                 return (<DiscussionThreadItem 
+                    key={`comment-${item.id}`}
                     {...item} 
+                    allowedActions={allowedActions}
                     root={isNil(rootThread)}
                     blockedThread={rootThread?.blockedThread || item.blockedThread}
                     isSelected={isSelected} 
@@ -53,6 +55,11 @@ const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
 DiscussionThread.propTypes = {
     level: PropTypes.array.isRequired,
     selected: PropTypes.object.isRequired,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool,
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool,
+    }),
     isReloading: PropTypes.bool,
 };
 

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

@@ -6,7 +6,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { first } from 'lodash';
 import { Avatar, Initials } from '@strapi/design-system/Avatar';
 import { Box } from '@strapi/design-system/Box';
 import { Divider } from '@strapi/design-system/Divider';
@@ -17,11 +16,24 @@ import { ArrowRight } from '@strapi/icons';
 import DiscussionThreadItemMeta from '../DiscussionThreadItemMeta';
 import { AvatarWrapper, DiscussionThreadItemBox, DiscussionThreadItemBoxContent, DiscussionThreadItemContent, DiscussionThreadItemLeft, DiscussionThreadItemLinkBox, DiscussionThreadItemRight, DiscussionThreadItemRoot } from './styles';
 import DiscussionThreadItemActions from '../DiscussionThreadItemActions';
-import { getMessage, getUrl } from '../../utils';
+import { getMessage, getUrl, renderInitials } from '../../utils';
 import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
 
-const DiscussionThreadItem = (item) => {
-    const { id, isSelected, isThreadAuthor, content, root, preview, pinned, blocked, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+const DiscussionThreadItem = (props) => {
+    const { 
+        isSelected, 
+        isThreadAuthor, 
+        content, 
+        root, 
+        preview, 
+        pinned, 
+        blocked, 
+        removed, 
+        blockedThread, 
+        gotThread, 
+        threadFirstItemId, 
+        authorUser, 
+        author } = props;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -45,11 +57,9 @@ const DiscussionThreadItem = (item) => {
         StyledComponent = DiscussionThreadItemRoot;
     }
 
-    const avatar = authorAvatar || authorUser?.avatar;
-    const name = authorName || `${authorUser?.firstName} ${authorUser?.lastName}`;
+    const avatar = author?.avatar || authorUser?.avatar;
+    const name = author?.name || `${authorUser?.firstName} ${authorUser?.lastName}`;
     const isBlocked = blocked || blockedThread;
-
-    const renderInitials = value => value.split(' ').map(_ => first(_)).join('').toUpperCase();
     
     return (<StyledComponent as="li">
         <DiscussionThreadItemContent as={Flex} direction="row">
@@ -62,16 +72,16 @@ const DiscussionThreadItem = (item) => {
                         <Box as={Flex} grow={1} alignItems="center">
                             <Typography variant="omega">{ content }</Typography>
                         </Box>
-                        { !preview && (<DiscussionThreadItemActions { ...item } root={root || pinned} />) }
+                        { !preview && (<DiscussionThreadItemActions { ...props } root={root || pinned} />) }
                     </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
+                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...props } gotThread={gotThread || root} />) }
                 </Flex>
                 <Divider background={dividerColor} />
-                <DiscussionThreadItemMeta { ...item } />
+                <DiscussionThreadItemMeta { ...props } />
             </DiscussionThreadItemBox>
         </DiscussionThreadItemContent>
 
-        { (gotThread && !(preview || pinned)) && (<DiscussionThreadItemLinkBox direction="column" alignItems="flex-end">
+        { (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>
@@ -81,6 +91,11 @@ const DiscussionThreadItem = (item) => {
 
 DiscussionThreadItem.propTypes = {
     content: PropTypes.string.isRequired,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool,
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool,
+    }),
 };
 
 export default DiscussionThreadItem;