strapi-plugin-comments 2.0.0-beta.5 → 2.0.0-beta.6

package/README.md

@@ -58,7 +58,8 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.4 (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.)
 
@@ -101,6 +102,20 @@ To setup amend default plugin configuration we recommend to put following snippe
 
 > To be done
 
+## 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**
+
+### Optional permissions
+Feature / Capability focused permissions:
+- _Plugins_ -> _Comments_ -> _Comments: Moderate_ - allows you to block, unblock, approve & 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
 
 ### Generic (non Strapi User)

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,13 +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} 
@@ -54,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

@@ -20,8 +20,22 @@ import DiscussionThreadItemActions from '../DiscussionThreadItemActions';
 import { getMessage, getUrl } from '../../utils';
 import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
 
-const DiscussionThreadItem = (item) => {
-    const { id, isSelected, isThreadAuthor, content, root, preview, pinned, blocked, removed, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+const DiscussionThreadItem = (props) => {
+    const { 
+        isSelected, 
+        isThreadAuthor, 
+        content, 
+        root, 
+        preview, 
+        pinned, 
+        blocked, 
+        removed, 
+        blockedThread, 
+        gotThread, 
+        threadFirstItemId, 
+        authorUser, 
+        authorAvatar, 
+        authorName } = props;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -62,12 +76,12 @@ 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 || removed) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
+                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...props } gotThread={gotThread || root} />) }
                 </Flex>
                 <Divider background={dividerColor} />
-                <DiscussionThreadItemMeta { ...item } />
+                <DiscussionThreadItemMeta { ...props } />
             </DiscussionThreadItemBox>
         </DiscussionThreadItemContent>
 
@@ -81,6 +95,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;

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

@@ -7,7 +7,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
-import { isNil } from 'lodash';
+import { isNil, isEmpty } from 'lodash';
 import { Button } from '@strapi/design-system/Button';
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
@@ -20,7 +20,7 @@ import pluginId from '../../pluginId';
 import { LockIcon, UnlockIcon } from '../icons';
 import DiscussionThreadItemApprovalFlowActions from '../DiscussionThreadItemApprovalFlowActions';
 
-const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotThread, pinned, approvalStatus, root }) => {
+const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotThread, pinned, reports = [], approvalStatus, root, allowedActions: { canModerate, canAccessReports, canReviewReports } }) => {
 
     const [blockConfirmationVisible, setBlockConfirmationVisible] = useState(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = useState(false);
@@ -72,9 +72,12 @@ const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotT
     const needsApproval = gotApprovalFlow && (approvalStatus === 'PENDING');
     const isBlocked = blocked || blockedThread;
     const isRejected = gotApprovalFlow && (approvalStatus === 'REJECTED');
+    const openReports = reports?.filter(_ => !_.resolved);
+    const hasReports = !isEmpty(openReports);
+    const reviewFlowEnabled = (canAccessReports || canReviewReports) && hasReports;
 
     const resolveStatusBadge = () => {
-        const status = resolveCommentStatus({ removed, blocked, blockedThread, approvalStatus });
+        const status = resolveCommentStatus({ removed, blocked, blockedThread, approvalStatus, reviewFlowEnabled: !isBlocked && reviewFlowEnabled });
         return {
             badgeVisible: isBlocked || gotApprovalFlow || removed,
             badgeColor: resolveCommentStatusColor(status),
@@ -86,44 +89,68 @@ const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotT
 
     const handleBlockClick = () => setBlockConfirmationVisible(true);
     const handleBlockConfirm = async () => {
-        lockApp();
-        blockItemMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            blockItemMutation.mutate(id);
+        }
     };
     const handleBlockCancel = () => {
         setBlockConfirmationVisible(false);
     };
     const handleUnblockClick = async () => {
-        lockApp();
-        unblockItemMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            unblockItemMutation.mutate(id);
+        }
     };
 
     const handleBlockThreadClick = () => setBlockThreadConfirmationVisible(true);
     const handleBlockThreadConfirm = async () => {
-        lockApp();
-        blockItemThreadMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            blockItemThreadMutation.mutate(id);
+        }
     };
     const handleBlockThreadCancel = () => {
         setBlockThreadConfirmationVisible(false);
     };
     const handleUnblockThreadClick = async () => {
-        lockApp();
-        unblockItemThreadMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            unblockItemThreadMutation.mutate(id);
+        }
     };
 
-    if (removed || isRejected) {
+    if (removed || isRejected || !canModerate) {
         return (<DiscussionThreadItemActionsWrapper as={Flex} direction="row">
-            <DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.common.item.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>
+            <DiscussionThreadItemActionsBadge 
+                color={badgeColor} 
+                backgroundColor={`${badgeColor}100`} 
+                textColor={`${badgeColor}600`}>
+                    { getMessage({
+                        id: `page.common.item.status.${badgeLabel}`,
+                        props: { count: openReports.length },
+                    }, badgeLabel)}
+            </DiscussionThreadItemActionsBadge>
         </DiscussionThreadItemActionsWrapper>);
     }
 
     return (<>
         <DiscussionThreadItemActionsWrapper as={Flex} direction="row">
-            { badgeVisible && (<DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.common.item.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>)}
+            { badgeVisible && (<DiscussionThreadItemActionsBadge 
+                color={badgeColor} 
+                backgroundColor={`${badgeColor}100`} 
+                textColor={`${badgeColor}600`}>
+                    { getMessage({
+                        id: `page.common.item.status.${badgeLabel}`,
+                        props: { count: openReports.length },
+                    }, badgeLabel)}
+            </DiscussionThreadItemActionsBadge>)}
             { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<LockIcon />} label={getMessage('page.details.actions.comment.block', 'Block')} style={(!blockedThread && root) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />)}
             { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<UnlockIcon />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')}  style={(blocked && !blockedThread) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />)}
             { (!blockedThread && (gotThread || pinned)) && (<Button onClick={handleBlockThreadClick} startIcon={<LockIcon />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</Button>) }
             { (blockedThread && (gotThread || pinned)) && (<Button onClick={handleUnblockThreadClick} startIcon={<UnlockIcon />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</Button>) }
-            { needsApproval && (<DiscussionThreadItemApprovalFlowActions id={id} queryToInvalidate="get-details-data" />) }
+            { needsApproval && (<DiscussionThreadItemApprovalFlowActions id={id} allowedActions={{ canModerate }} queryToInvalidate="get-details-data" />) }
         </DiscussionThreadItemActionsWrapper>
         { !blocked && (<ConfirmationDialog 
             isVisible={blockConfirmationVisible}
@@ -153,9 +180,9 @@ DiscussionThreadItemActions.propTypes = {
     blocked: PropTypes.bool.isRequired,
     blockedThread: PropTypes.bool.isRequired,
     approvalStatus: PropTypes.oneOfType([PropTypes.nullable, PropTypes.oneOf(['PENDING', 'APPROVED', 'REJECTED'])]),
-    onBlockClick: PropTypes.func.isRequired,
-    onUnBlockClick: PropTypes.func.isRequired,
-    onApprovalGroupClick: PropTypes.func.isRequired,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool,
+    }),
 };
 
 export default DiscussionThreadItemActions;

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

@@ -15,13 +15,13 @@ import { DiscussionThreadItemActionsGroupWrapper } from './styles';
 import { approveItem, rejectItem } from '../../pages/utils/api';
 import pluginId from '../../pluginId';
 
-const DiscussionThreadItemApprovalFlowActions = ({ id, queryToInvalidate }) => {
+const DiscussionThreadItemApprovalFlowActions = ({ id, allowedActions: { canModerate }, queryToInvalidate }) => {
 
     const toggleNotification = useNotification();
     const queryClient = useQueryClient();
     const { lockApp, unlockApp } = useOverlayBlocker();
 
-    const onSuccess = (message, stateAction = () => {}) => async () => {
+    const onSuccess = (message) => async () => {
         if (queryToInvalidate) {
             await queryClient.invalidateQueries(queryToInvalidate);
         }
@@ -45,26 +45,35 @@ const DiscussionThreadItemApprovalFlowActions = ({ id, queryToInvalidate }) => {
         refetchActive: false,
     });
 
-
     const handleApproveClick = () => {
-        lockApp();
-        approveItemMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            approveItemMutation.mutate(id);
+        }
     };
 
     const handleRejectClick = () => {
-        lockApp();
-        rejectItemMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            rejectItemMutation.mutate(id);
+        }
     };
 
-    return (<DiscussionThreadItemActionsGroupWrapper>
-        <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} onClick={handleApproveClick} />
-        <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} onClick={handleRejectClick} />
-    </DiscussionThreadItemActionsGroupWrapper>);
+    if (canModerate) {
+        return (<DiscussionThreadItemActionsGroupWrapper>
+            <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} onClick={handleApproveClick} />
+            <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} onClick={handleRejectClick} />
+        </DiscussionThreadItemActionsGroupWrapper>);
+        }
+    return null;
 };
 
 DiscussionThreadItemApprovalFlowActions.propTypes = {
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     queryToInvalidate: PropTypes.string,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool,
+    }),
     wrapped: PropTypes.bool,
 };
 

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

@@ -5,6 +5,7 @@
  */
 
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
 import { isEmpty, orderBy } from 'lodash';
 import { Badge } from '@strapi/design-system/Badge';
@@ -23,7 +24,7 @@ import pluginId from '../../pluginId';
 import { LockIcon, ReviewIcon } from '../icons';
 
 const DiscussionThreadItemWarnings = (item) => {
-    const { id, reports, gotThread } = item;
+    const { id, reports, gotThread, allowedActions: { canModerate, canAccessReports, canReviewReports }} = item;
 
     const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
     const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
@@ -93,7 +94,7 @@ const DiscussionThreadItemWarnings = (item) => {
     }
 
     return (<>
-        <DiscussionThreadItemWarningsWrapper as={Flex} direction="row" padding={2} background="danger100" borderColor="danger200" border={1} hasRadius>
+        { canAccessReports && (<DiscussionThreadItemWarningsWrapper as={Flex} direction="row" padding={2} background="danger100" borderColor="danger200" border={1} hasRadius>
             <Box as={Flex} paddingRight={2} direction="row" grow={1}>
                 <Badge textColor="neutral0" backgroundColor="warning600">{ openReports.length }</Badge>
                 <Box paddingLeft={2}>
@@ -103,19 +104,19 @@ const DiscussionThreadItemWarnings = (item) => {
             <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ReviewIcon />}>
                 { getMessage(`page.details.actions.comment.report.review`, 'review') }
             </Button>
-        </DiscussionThreadItemWarningsWrapper>
-        <ReportsReviewModal 
+        </DiscussionThreadItemWarningsWrapper>) }
+        { (canAccessReports || canReviewReports) && (<ReportsReviewModal 
             isVisible={reportsReviewVisible}
             isActionAsync={isLoading}
             onClose={handleReportsReviewClose}
-            startActions={<>
+            startActions={canModerate && (<>
                 <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.comment.block`, 'Block comment') }
                 </Button>
                 { gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.thread.block`, 'Block thread') }
                 </Button>) }
-            </>}
+            </>)}
             item={item}>
                 <Typography variant="sigma" textColor="neutral600" id="reports-list">
                     { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
@@ -124,17 +125,22 @@ const DiscussionThreadItemWarnings = (item) => {
                     <Divider />
                 </Box>
                 <ReportsReviewTable
-                    commentId={item.id} 
+                    commentId={id} 
                     items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
                     mutation={resolveReportMutation}
+                    allowedActions={{ canAccessReports, canReviewReports }}
                     onBlockButtonsStateChange={handleBlockButtonsStateChange}
                 />
-        </ReportsReviewModal>
+        </ReportsReviewModal>) }
     </>);
 };
 
 DiscussionThreadItemWarnings.propTypes = {
-
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool,
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool,
+    }),
 };
 
 export default DiscussionThreadItemWarnings;

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

@@ -37,6 +37,11 @@ const ReportsReviewModal = ({
     endActions: PropTypes.array,
     item: PropTypes.object.isRequired,
     children: PropTypes.array.isRequired,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool, 
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool, 
+    }),
     onClose: PropTypes.func.isRequired,
 };
 

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

@@ -24,9 +24,9 @@ const ReportsReviewTable = ({
     commentId,
     items,
     mutation,
+    allowedActions: { canAccessReports, canReviewReports },
     onBlockButtonsStateChange,
 }) => {
-
     const [storedItems, setStoredItems] = useState([]);
 
     const { formatDate } = useIntl();
@@ -59,12 +59,12 @@ const ReportsReviewTable = ({
     };
 
     const handleClickResolve = async (reportId) => {
+      if (canReviewReports) {
         lockApp();
         const item = await mutation.mutateAsync({
             id: commentId,
             reportId,
         });
-        console.log(item);
         if (item) {
           const updatedItems = storedItems.map(_ => ({
               ..._,
@@ -73,6 +73,7 @@ const ReportsReviewTable = ({
           setStoredItems(updatedItems);
           onBlockButtonsStateChange(updatedItems.filter(_ => !_.resolved).length === 0);
         }
+      }
     }
 
     useEffect(() => {
@@ -85,61 +86,68 @@ const ReportsReviewTable = ({
 
     const COL_COUNT = 6;
 
-    return (<Table colCount={COL_COUNT} rowCount={storedItems.length}>
-        <Thead>
-          <Tr>
-            <Th>
-              <BaseCheckbox aria-label="Select all entries" />
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.reason') }</Typography>
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.content') }</Typography>
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.createdAt') }</Typography>
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.status') }</Typography>
-            </Th>
-            <Th>
-              <VisuallyHidden>{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions') }</VisuallyHidden>
-            </Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {storedItems.map(entry => <Tr key={entry.id}>
-              <Td>
-                <BaseCheckbox aria-label={`Select report`} />
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{renderReason(entry.reason)}</Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{entry.content}</Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{ formatDate(entry.createdAt, { dateStyle: 'short', timeStyle: 'short' }) }</Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{ renderStatus(entry.resolved) }</Typography>
-              </Td>
-              <Td>
-                  { !entry.resolved && (<Flex direction="column" alignItems="flex-end">
-                        <Button onClick={() => handleClickResolve(entry.id)} startIcon={<Check />} variant="success">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions.resolve', 'resolve') }</Button>
-                    </Flex>) }
-              </Td>
-            </Tr>)}
-        </Tbody>
-        {/* <TFooter /> */}
-      </Table>)
+    if (canAccessReports) {
+      return (<Table colCount={COL_COUNT} rowCount={storedItems.length}>
+          <Thead>
+            <Tr>
+              <Th>
+                <BaseCheckbox aria-label="Select all entries" />
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.reason') }</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.content') }</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.createdAt') }</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.status') }</Typography>
+              </Th>
+              { canReviewReports && (<Th>
+                <VisuallyHidden>{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions') }</VisuallyHidden>
+              </Th>)}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {storedItems.map(entry => <Tr key={entry.id}>
+                <Td>
+                  <BaseCheckbox aria-label={`Select report`} />
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{renderReason(entry.reason)}</Typography>
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{entry.content}</Typography>
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{ formatDate(entry.createdAt, { dateStyle: 'short', timeStyle: 'short' }) }</Typography>
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{ renderStatus(entry.resolved) }</Typography>
+                </Td>
+                { canReviewReports && (<Td>
+                    { !entry.resolved && (<Flex direction="column" alignItems="flex-end">
+                          <Button onClick={() => handleClickResolve(entry.id)} startIcon={<Check />} variant="success">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions.resolve', 'resolve') }</Button>
+                      </Flex>) }
+                </Td>)}
+              </Tr>)}
+          </Tbody>
+          {/* <TFooter /> */}
+        </Table>);
+    }
+    return null;
 };
 
 ReportsReviewTable.propTypes = {
-    commentId: PropTypes.string.isRequired,
+    commentId: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
     items: PropTypes.array.isRequired,
     mutation: PropTypes.func.isRequired,
+    allowedActions: PropTypes.shape({
+      canAccessReports: PropTypes.bool,
+      canReviewReports: PropTypes.bool, 
+    }),
     onBlockButtonsStateChange: PropTypes.func.isRequired,
 };
 

package/admin/src/components/icons/review.js

@@ -11,7 +11,7 @@ const ReviewIcon = ({ width, height, size = 16 }) =>
     style={{ width: `${width || size}px`, height: `${height || size}px`, }} 
     xmlns="http://www.w3.org/2000/svg">
     <g style={ {transform: `scale(${(width || size)/initSize})` } }>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H4a4 4 0 01-4-4V4zm6.996.165a1.017 1.017 0 112.012 0L8 11 6.996 4.165zM8 11a1 1 0 110 2 1 1 0 010-2z" />
+      <path fillRule="evenodd" clipRule="evenodd" d="M0 4a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H4a4 4 0 01-4-4V4zm6.996.165a1.017 1.017 0 112.012 0L8 11 6.996 4.165zM8 11a1 1 0 110 2 1 1 0 010-2z" />
     </g>
   </svg>
 

package/admin/src/index.js

@@ -23,7 +23,7 @@ export default {
 
         return component;
       },
-      permissions: pluginPermissions,
+      permissions: pluginPermissions.access,
     });
     app.addReducers(reducers);
     app.registerPlugin({

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

@@ -30,7 +30,7 @@ const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
         FIELDS_LIMIT
     );
 
-    const formatLabel = label => label.split('_')
+    const formatLabel = (label = '') => label.split('_')
         .map(_ => capitalize(_))
         .join(' ');
 
@@ -47,7 +47,7 @@ const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
                 <Typography>{ data[entityLabelKey] }</Typography>
             </Flex>
             {  itemKeys.map(_ => 
-                (<Flex direction="column" alignItems="flex-start">
+                (<Flex key={`prop_${_}`} direction="column" alignItems="flex-start">
                     <Typography fontWeight="bold">{ formatLabel(_) }</Typography>
                     <Typography>{ data[_] }</Typography>
                 </Flex>))

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

@@ -20,6 +20,7 @@ const DetailsFilters = ({ data, onChange }) => {
         <Stack size={2} horizontal>
             <Typography variant="epsilon">{getMessage('page.details.filters.label', '')}</Typography>
             <Switch 
+                label={getMessage('page.details.filters.removed.label', 'Comments visibility')} 
                 onLabel={getMessage('page.details.filters.removed.show', 'Show')} 
                 offLabel={getMessage('page.details.filters.removed.hide', 'Hide')}
                 selected={removed} onChange={() => handleOnChange('removed', !removed)} 

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

@@ -50,13 +50,16 @@ const Details = ({ config }) => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
 
-  const viewPermissions = useMemo(() => {
-    return { view: pluginPermissions.view };
-  }, []);
+  const viewPermissions = useMemo(() => ({ 
+    access: pluginPermissions.access,
+    moderate: pluginPermissions.moderate,
+    accessReports:  pluginPermissions.reports,
+    reviewReports: pluginPermissions.reportsReview,
+  }), []);
 
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canView },
+    allowedActions: { canAccess, canModerate, canAccessReports, canReviewReports },
   } = useRBAC(viewPermissions);
 
   const [filters, setFilters] = useState({});
@@ -64,7 +67,7 @@ const Details = ({ config }) => {
   const regexUID = new RegExp(config.regex.uid);
 
   const { isLoading: isLoadingForData, data, isFetching } = useQuery(
-    ['get-details-data', id, filters],
+    ['get-details-data', id, filters, canAccess],
     () => fetchDetailsData(id, filters, toggleNotification),
     {
       initialData: { },
@@ -75,7 +78,7 @@ const Details = ({ config }) => {
   const entityUidValid = entity?.uid && regexUID.test(entity.uid);
 
   const { data: contentTypeData } = useQuery(
-    ['get-additional-data', entity?.uid],
+    ['get-additional-data', entity?.uid, canAccess],
     () => fetchContentTypeData(entity?.uid, toggleNotification),
     {
       enabled: !!entity?.uid, 
@@ -87,37 +90,40 @@ const Details = ({ config }) => {
 
   const isLoading = isLoadingForData || isFetching;
 
-  return <Box background="neutral100">
-          <Layout>
-            {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (<LoadingIndicatorPage />) : (
-            <>
-              <HeaderLayout 
-                navigationAction={
-                <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
-                  { getMessage('HeaderLayout.link.go-back', 'Back', false) }
-                </Link>}
-                title={ getMessage('page.details.header') } 
-                subtitle={ getMessage('page.details.header.description') } 
-                primaryAction={<DetailsFilters data={filters} onChange={handleChangeFilters} />}
-                secondaryAction={<Box as={Flex}>&nbsp;</Box>}
-                as="h2" />
-              <ContentLayout>
-                <TwoColsLayout 
-                  startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} />} 
-                  endCol={ <Stack size={2}>
-                    <DiscussionStatus item={selected} />
-                    { !contentTypeData?.schema ? (<Box padding={4}>
-                        <Loader small>{ getMessage('page.details.panel.loading', 'Loading...') }</Loader>
-                      </Box>) : 
-                      (<DetailsEntity data={entity} schema={contentTypeData?.schema} config={config} />)
-                    }
-                  </Stack>
-                  } 
-                />
-              </ContentLayout>
-            </>) }
-          </Layout>
-        </Box>;
+  if (canAccess) {
+    return <Box background="neutral100">
+            <Layout>
+              {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (<LoadingIndicatorPage />) : (
+              <>
+                <HeaderLayout 
+                  navigationAction={
+                  <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
+                    { getMessage('HeaderLayout.link.go-back', 'Back', false) }
+                  </Link>}
+                  title={ getMessage('page.details.header') } 
+                  subtitle={ getMessage('page.details.header.description') } 
+                  primaryAction={<DetailsFilters data={filters} onChange={handleChangeFilters} />}
+                  secondaryAction={<Box as={Flex}>&nbsp;</Box>}
+                  as="h2" />
+                <ContentLayout>
+                  <TwoColsLayout 
+                    startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} allowedActions={{ canModerate, canAccessReports, canReviewReports }} />} 
+                    endCol={ <Stack size={2}>
+                      <DiscussionStatus item={selected} />
+                      { !contentTypeData?.schema ? (<Box padding={4}>
+                          <Loader small>{ getMessage('page.details.panel.loading', 'Loading...') }</Loader>
+                        </Box>) : 
+                        (<DetailsEntity data={entity} schema={contentTypeData?.schema} config={config} />)
+                      }
+                    </Stack>
+                    } 
+                  />
+                </ContentLayout>
+              </>) }
+            </Layout>
+          </Box>;
+  }
+  return null;
 }
 
 const mapStateToProps = makeAppView();

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

@@ -25,7 +25,7 @@ import { TableLink } from './styles';
 import renderEntryTitle from '../../../../utils/renderEntryTitle';
 import DiscussionThreadItemApprovalFlowActions from '../../../../components/DiscussionThreadItemApprovalFlowActions';
 
-const DiscoverTableRow = ({ config, item, onClick }) => {
+const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick }) => {
 
     const { id, reports } = item;
 
@@ -74,14 +74,22 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
         refetchActive: false,
     });
 
-    const handleReportsReviewClick = () => setReportsReviewVisible(true);
+    const handleReportsReviewClick = () => {
+        if (canAccessReports) {
+            setReportsReviewVisible(true);
+        }
+    };
     const handleBlockItemClick = async () => {
-        lockApp();
-        blockItemMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            blockItemMutation.mutate(id);
+        }
     };
     const handleBlockItemThreadClick = async () => {
-        lockApp();
-        blockItemThreadMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            blockItemThreadMutation.mutate(id);
+        }
     };
     const handleReportsReviewClose = async () => {
         await queryClient.invalidateQueries('get-data');
@@ -91,7 +99,7 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
     const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
     const openReports = reports?.filter(_ => !_.resolved);
     const hasReports = !isEmpty(openReports);
-    const reviewFlowEnabled = hasReports && !(item.blocked || item.blockedThread);
+    const reviewFlowEnabled = (canAccessReports && hasReports) && !(item.blocked || item.blockedThread);
 
     const handleClick = () => onClick();
     const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
@@ -146,22 +154,28 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
                 <Flex direction="column" alignItems="flex-end">
                     <Stack size={actionItemsCount} horizontal>
                         { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
-                        { needsApproval &&  (<DiscussionThreadItemApprovalFlowActions id={item.id} queryToInvalidate="get-data" />)}
+                        { (canModerate && needsApproval) &&  (
+                        <DiscussionThreadItemApprovalFlowActions 
+                            id={item.id} 
+                            allowedActions={{ canModerate }}
+                            queryToInvalidate="get-data" />
+                        )}
                         <IconButton onClick={handleClick} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
                     </Stack>
                 </Flex>
                 { reviewFlowEnabled && (<ReportsReviewModal 
                     isVisible={reportsReviewVisible}
                     isActionAsync={isLoading}
+                    allowedActions={{ canModerate, canAccessReports, canReviewReports }}
                     onClose={handleReportsReviewClose}
-                    startActions={<>
+                    startActions={canModerate && (<>
                         <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                             { getMessage(`page.details.actions.comment.block`, 'Block comment') }
                         </Button>
                         { item.gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                             { getMessage(`page.details.actions.thread.block`, 'Block thread') }
                         </Button>) }
-                    </>}
+                    </>)}
                     item={item}>
                         <Typography variant="sigma" textColor="neutral600" id="reports-list">
                             { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
@@ -173,6 +187,7 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
                                 commentId={item.id} 
                                 items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
                                 mutation={resolveReportMutation}
+                                allowedActions={{ canAccessReports, canReviewReports }}
                                 onBlockButtonsStateChange={handleBlockButtonsStateChange}
                             />
                 </ReportsReviewModal>) }
@@ -184,6 +199,11 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
 DiscoverTableRow.propTypes = {
     config: PropTypes.object.isRequired,
     item: PropTypes.object.isRequired,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool, 
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool, 
+    }),
     onClick: PropTypes.func.isRequired,
 };
 

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

@@ -51,17 +51,20 @@ const Discover = ({ config }) => {
   const [{ query: queryParams }] = useQueryParams();
   const _q = queryParams?._q || '';
 
-  const viewPermissions = useMemo(() => {
-    return { view: pluginPermissions.view };
-  }, []);
+  const viewPermissions = useMemo(() => ({ 
+    access: pluginPermissions.access,
+    moderate: pluginPermissions.moderate,
+    accessReports:  pluginPermissions.reports,
+    reviewReports: pluginPermissions.reportsReview,
+  }), []);
 
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canView },
+    allowedActions: { canAccess, canModerate, canAccessReports, canReviewReports },
   } = useRBAC(viewPermissions);
 
   const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching } = useQuery(
-    ['get-data', queryParams],
+    ['get-data', queryParams, canAccess],
     () => fetchData(queryParams, toggleNotification),
     {
       initialData: { },
@@ -86,62 +89,69 @@ const Discover = ({ config }) => {
     },
   };
 
-
-
   const emptyContent = _q ? 'search' : 'comments';
   
   const COL_COUNT = 7;
 
-  return <Box background="neutral100">
-          <Layout>
-            {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
-            <>
-              <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
-              <ActionLayout 
-                    startActions={<>
-                      <SearchURLQuery
-                        label={ getMessage('search.label', 'Search', false) }
-                      />
-                      <TableFilters displayedFilters={filtersSchema} />
-                    </>} />
-              <ContentLayout>
-                { !isEmpty(result) ? (<>
-                <Table colCount={COL_COUNT} rowCount={result.length}>
-                  <Thead>
-                    <Tr>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.id') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.thread') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.entry') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.lastUpdate') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.status') }</Typography>
-                      </Th>
-                      <Th>
-                        <VisuallyHidden>{ getMessage('page.discover.table.header.actions') }</VisuallyHidden>
-                      </Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {result.map(entry => (<DiscoverTableRow key={`comment-${entry.id}`} config={config} item={entry} onClick={() => handleClickDisplay(entry.id)}/>))}
-                  </Tbody>
-                </Table>
-                <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
-                </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
-              </ContentLayout>
-            </>) }
-          </Layout>
-        </Box>;
+  if (canAccess) {
+    return <Box background="neutral100">
+            <Layout>
+              {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
+              <>
+                <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
+                <ActionLayout 
+                      startActions={<>
+                        <SearchURLQuery
+                          label={ getMessage('search.label', 'Search', false) }
+                        />
+                        <TableFilters displayedFilters={filtersSchema} />
+                      </>} />
+                <ContentLayout>
+                  { !isEmpty(result) ? (<>
+                  <Table colCount={COL_COUNT} rowCount={result.length}>
+                    <Thead>
+                      <Tr>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.id') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.thread') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.entry') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.lastUpdate') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.status') }</Typography>
+                        </Th>
+                        <Th>
+                          <VisuallyHidden>{ getMessage('page.discover.table.header.actions') }</VisuallyHidden>
+                        </Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {result.map(entry => (<DiscoverTableRow 
+                        key={`comment-${entry.id}`} 
+                        config={config} 
+                        item={entry} 
+                        allowedActions={{ canModerate, canAccessReports, canReviewReports }}
+                        onClick={() => handleClickDisplay(entry.id)}
+                        />))}
+                    </Tbody>
+                  </Table>
+                  <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
+                  </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
+                </ContentLayout>
+              </>) }
+            </Layout>
+          </Box>;
+  }
+  return null;
 }
 
 const mapStateToProps = makeAppView();

package/admin/src/permissions.js

@@ -1,14 +1,16 @@
+const permissions = require('./../../permissions');
+
 const pluginPermissions = {
     access: [
-      { action: 'plugin::comments.read', subject: null },
-      { action: 'plugin::comments.reports.read', subject: null },
-      { action: 'plugin::comments.discovery.read', subject: null },
-      { action: 'plugin::comments.settings.read', subject: null },
+      { action: permissions.render(permissions.comments.read), subject: null },
+      { action: permissions.render(permissions.reports.read), subject: null },
+      // { action: 'plugin::comments.discover.read', subject: null },
+      { action: permissions.render(permissions.settings.read), subject: null },
     ],
-    discover: [{ action: 'plugin::comments.read', subject: null }],
-    moderate: [{ action: 'plugin::comments.moderate', subject: null }],
-    reports: [{ action: 'plugin::comments.reports.read', subject: null }],
-    reportsReview: [{ action: 'plugin::comments.reports.action', subject: null }],
+    // discover: [{ action: 'plugin::comments.discover.read', subject: null }],
+    moderate: [{ action: permissions.render(permissions.comments.moderate), subject: null }],
+    reports: [{ action: permissions.render(permissions.reports.read), subject: null }],
+    reportsReview: [{ action: permissions.render(permissions.reports.action), subject: null }],
   };
   
   export default pluginPermissions;

package/admin/src/translations/en.json

@@ -76,6 +76,7 @@
     "page.details.actions.comment.approve.confirmation.success": "Comment has been approved",
     "page.details.actions.comment.reject.confirmation.success": "Comment has been rejected",
     "page.details.filters.label": "View",
+    "page.details.filters.removed.visibility": "Comments visibility",
     "page.details.filters.removed.show": "Show removed",
     "page.details.filters.removed.hide": "Hide removed",
     "page.coming.soon": "Wait for what is coming soon...",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",

package/permissions.js

@@ -0,0 +1,19 @@
+'use strict';
+
+module.exports = {
+    render: function(uid) {
+        return `plugin::comments.${uid}`;
+    },
+    comments: {
+        read: 'read',
+        moderate: 'moderate',
+    },
+    reports: {
+        read: 'reports.read',
+        action: 'reports.action',
+    },
+    settings: {
+        read: 'settings.read',
+        change: 'settings.change',
+    },
+};

package/server/bootstrap.js

@@ -1,5 +1,41 @@
 'use strict';
 
-module.exports = ({ strapi }) => {
-  // bootstrap phase
+const permissions = require('./../permissions');
+
+module.exports = async ({ strapi }) => {
+  // Check if the plugin users-permissions is installed because the navigation needs it
+  if (Object.keys(strapi.plugins).indexOf("users-permissions") === -1) {
+    throw new Error(
+      "In order to make the comments plugin work the users-permissions plugin is required",
+    );
+  }
+  // Add permissions
+  const actions = [
+    {
+      section: "plugins",
+      displayName: "Comments: Read",
+      uid: permissions.comments.read,
+      pluginName: "comments",
+    },
+    {
+      section: "plugins",
+      displayName: "Comments: Moderate",
+      uid: permissions.comments.moderate,
+      pluginName: "comments",
+    },
+    {
+      section: "plugins",
+      displayName: "Reports: Read",
+      uid: permissions.reports.read,
+      pluginName: "comments",
+    },
+    {
+      section: "plugins",
+      displayName: "Reports: Moderate",
+      uid: permissions.reports.action,
+      pluginName: "comments",
+    },
+  ];
+
+  await strapi.admin.services.permission.actionProvider.registerMany(actions);
 };

package/server/config/index.js

@@ -2,10 +2,10 @@
 
 module.exports = {
   default: {
+    moderatorRoles: [],
     approvalFlow: [],
     entryLabel: {
       '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject']
     },
-  },
-  validator() {},
+  }
 };

package/server/services/admin.js

@@ -88,12 +88,13 @@ const { APPROVAL_STATUS, REGEX } = require('./../utils/constants')
             .map(_ => filterOurResolvedReports(this.getCommonService().sanitizeCommentEntity(_)))
             .map(_ => this.getCommonService().mergeRelatedEntityTo(_, relatedEntities));
 
+        const pageCount = Math.floor(total / pageSize);
         return {
             result,
             pagination: {
                 page: page,
                 pageSize: pageSize,
-                pageCount: Math.floor(total / pageSize) + 1,
+                pageCount: total % pageSize === 0 ? pageCount : pageCount + 1,
                 total,
             },
         };

package/server/services/client.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const config = require('./../config');
+const config = require('../config');
 const { getPluginService } = require('./../utils/functions');
 const { isNil, isEmpty } = require('lodash');
 const PluginError = require('./../utils/error');

package/strapi-server.js

@@ -1,9 +1,42 @@
 'use strict';
 
+const { isArray, isEmpty, isString } = require('lodash');
+
 const server = require('./server');
 const contentTypes = require('./content-types');
+const { REGEX } = require('./server/utils/constants');
 
 module.exports = () => ({
     ...server,
     contentTypes,
+    config: {
+      ...server.config,
+      default: ({ env }) => ({
+        ...server.config.default,
+      }),
+      validator: (config) => { 
+        // Check moderatorRoles values
+        const moderatorRolesValid = config.moderatorRoles
+          .filter(_ => !isString(_)).length === 0;
+        if (!moderatorRolesValid) {
+          throw new Error(`'moderatorRoles' must roles keys`);
+        }
+
+        // Check approvalFlow values
+        const approvalFlowValid = config.approvalFlow
+          .filter(_ => !REGEX.uid.test(_)).length === 0;
+        if (!approvalFlowValid) {
+          throw new Error(`'approvalFlow' must contain Content Types identifiers in the format like 'api::<collection name>.<content type name>'`);
+        }
+
+        // Check entryLabel keys and values
+        const entryLabelKeysValid = Object.keys(config.entryLabel)
+          .filter(_ => _ !== '*')
+          .filter(_ => !(REGEX.uid.test(_) && isArray(config.entryLabel[_]) && !isEmpty(config.entryLabel[_]))).length === 0;
+
+        if (!entryLabelKeysValid) {
+          throw new Error(`'entryLabel' must contain records in the format like 'api::<collection name>.<content type name>': ['Field1', 'field_2']`);
+        }
+      },
+    },
   });