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

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.)
 
@@ -74,8 +81,13 @@ To setup amend default plugin configuration we recommend to put following snippe
 ```js
     ...
     comments: {
-      badWords: false,
-      moderatorRoles: ["Authenticated"]
+        badWords: false,
+        moderatorRoles: ["Authenticated"],
+        approvalFlow: ['api::page.page'],
+        entryLabel: {
+            '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
+            'api::page.page': ['MyField'],
+        },
     },
     ...
 ```
@@ -83,11 +95,27 @@ 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.
+- `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 `*`.
 
 ## Additional GQL Configuration
 
 > 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 &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
 
 ### Generic (non Strapi User)
@@ -215,7 +243,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"
 }
 ```
 
@@ -225,7 +252,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"
 }
 ```
 

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,15 @@ const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
             <Divider />
         </Box>
         <Flex as="ul" direction="column" alignItems="flex-start">
-            { rootThread && (<DiscussionThreadItem {...rootThread} isThreadAuthor root />) }
+            { 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} 
                     isThreadAuthor={isThreadAuthor} 
@@ -52,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, blocked, 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,16 +76,16 @@ const DiscussionThreadItem = (item) => {
                         <Box as={Flex} grow={1} alignItems="center">
                             <Typography variant="omega">{ content }</Typography>
                         </Box>
-                        { !preview && (<DiscussionThreadItemActions { ...item } root={root} />) }
+                        { !preview && (<DiscussionThreadItemActions { ...props } root={root || pinned} />) }
                     </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } />) }
+                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...props } gotThread={gotThread || root} />) }
                 </Flex>
                 <Divider background={dividerColor} />
-                <DiscussionThreadItemMeta { ...item } />
+                <DiscussionThreadItemMeta { ...props } />
             </DiscussionThreadItemBox>
         </DiscussionThreadItemContent>
 
-        { (gotThread && !preview) && (<DiscussionThreadItemLinkBox direction="row" 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 +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/DiscussionThreadItem/styles.js

@@ -6,6 +6,7 @@ export const AvatarWrapper = styled(Box)``;
 export const InitialsWrapper = styled(Box)``;
 
 export const DiscussionThreadItemLinkBox = styled(Flex)`
+    width: 100%;
     margin-top: .5rem;
     margin-bottom: .5rem;
 `

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

@@ -4,21 +4,23 @@
  *
  */
 
-import React, { useState, useEffect } from 'react';
+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';
-import { Lock, Check, Cross, Key } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { getMessage, handleAPIError } from '../../utils';
-import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsGroupWrapper, DiscussionThreadItemActionsWrapper } from './styles';
+import { getMessage, handleAPIError, resolveCommentStatus, resolveCommentStatusColor } from '../../utils';
+import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsWrapper } from './styles';
 import ConfirmationDialog from '../ConfirmationDialog';
-import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/Details/utils/api';
+import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/utils/api';
+import pluginId from '../../pluginId';
+import { LockIcon, UnlockIcon } from '../icons';
+import DiscussionThreadItemApprovalFlowActions from '../DiscussionThreadItemApprovalFlowActions';
 
-const DiscussionThreadItemActions = ({ id, blocked, blockedThread, 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);
@@ -31,7 +33,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
         await queryClient.invalidateQueries('get-details-data');
         toggleNotification({
             type: 'success',
-            message,
+            message: `${pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
@@ -69,82 +71,93 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
     const gotApprovalFlow = !isNil(approvalStatus);
     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 = () => {
-        let color = 'primary';
-        let label = '';
-
-        if (isBlocked) {
-            color = 'danger';
-            label = 'blocked';
-        } else if (gotApprovalFlow) {
-            label = approvalStatus.toLowerCase();
-            switch (approvalStatus) {
-                case 'APPROVED': 
-                    color = 'success';
-                    break;
-                case 'REJECTED': 
-                    color = 'danger';
-                    break;
-                default: 
-                    color = 'alternative';
-                    break;
-            };
-        }
-
+        const status = resolveCommentStatus({ removed, blocked, blockedThread, approvalStatus, reviewFlowEnabled: !isBlocked && reviewFlowEnabled });
         return {
-            badgeVisible: isBlocked || gotApprovalFlow,
-            badgeColor: color,
-            badgeLabel: label,
-        }
-    }
+            badgeVisible: isBlocked || gotApprovalFlow || removed,
+            badgeColor: resolveCommentStatusColor(status),
+            badgeLabel: status,
+        };
+    };
 
     const {badgeVisible, badgeColor, badgeLabel } = resolveStatusBadge();
 
     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 || !canModerate) {
+        return (<DiscussionThreadItemActionsWrapper as={Flex} direction="row">
+            <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.details.panel.discussion.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>)}
-            { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<Lock />} label={getMessage('page.details.actions.comment.block', 'Block')} />)}
-            { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<Key />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')} />)}
-            { (!blockedThread && root) && (<Button onClick={handleBlockThreadClick} startIcon={<Lock />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</Button>) }
-            { (blockedThread && root) && (<Button onClick={handleUnblockThreadClick} startIcon={<Key />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</Button>) }
-            { needsApproval && (<DiscussionThreadItemActionsGroupWrapper>
-                <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} />
-                <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} />
-            </DiscussionThreadItemActionsGroupWrapper>) }
+            { 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} allowedActions={{ canModerate }} queryToInvalidate="get-details-data" />) }
         </DiscussionThreadItemActionsWrapper>
         { !blocked && (<ConfirmationDialog 
             isVisible={blockConfirmationVisible}
             isActionAsync={blockItemMutation.isLoading}
             header={getMessage('page.details.actions.comment.block.confirmation.header')}
             labelConfirm={getMessage('page.details.actions.comment.block.confirmation.button.confirm')}
-            iconConfirm={<Lock />}
+            iconConfirm={<LockIcon />}
             onConfirm={handleBlockConfirm} 
             onCancel={handleBlockCancel}>
                 { getMessage('page.details.actions.comment.block.confirmation.description') }
@@ -154,7 +167,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
             isActionAsync={blockItemThreadMutation.isLoading}
             header={getMessage('page.details.actions.thread.block.confirmation.header')}
             labelConfirm={getMessage('page.details.actions.thread.block.confirmation.button.confirm')}
-            iconConfirm={<Lock />}
+            iconConfirm={<LockIcon />}
             onConfirm={handleBlockThreadConfirm} 
             onCancel={handleBlockThreadCancel}>
                 { getMessage('page.details.actions.thread.block.confirmation.description') }
@@ -167,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/DiscussionThreadItemActions/styles.js

@@ -15,8 +15,4 @@ export const DiscussionThreadItemActionsWrapper = styled(Box)`
         margin-top: .175rem;
         margin-right: .5rem;
     }
-`;
-
-export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
-    margin-left: .5rem;
 `;

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

@@ -0,0 +1,81 @@
+/**
+ *
+ * Approval Flow Actions
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useMutation, useQueryClient } from 'react-query';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Check, Cross } from '@strapi/icons';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../utils';
+import { DiscussionThreadItemActionsGroupWrapper } from './styles';
+import { approveItem, rejectItem } from '../../pages/utils/api';
+import pluginId from '../../pluginId';
+
+const DiscussionThreadItemApprovalFlowActions = ({ id, allowedActions: { canModerate }, queryToInvalidate }) => {
+
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message) => async () => {
+        if (queryToInvalidate) {
+            await queryClient.invalidateQueries(queryToInvalidate);
+        }
+        toggleNotification({
+            type: 'success',
+            message: `${pluginId}.${message}`,
+        });
+        unlockApp();
+    };
+
+    const onError = err => { handleAPIError(err, toggleNotification); };
+
+    const approveItemMutation = useMutation(approveItem, {
+        onSuccess: onSuccess('page.details.actions.comment.approve.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+    const rejectItemMutation = useMutation(rejectItem, {
+        onSuccess: onSuccess('page.details.actions.comment.reject.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+
+    const handleApproveClick = () => {
+        if (canModerate) {
+            lockApp();
+            approveItemMutation.mutate(id);
+        }
+    };
+
+    const handleRejectClick = () => {
+        if (canModerate) {
+            lockApp();
+            rejectItemMutation.mutate(id);
+        }
+    };
+
+    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,
+};
+
+export default DiscussionThreadItemApprovalFlowActions;
+ 

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { IconButtonGroup } from '@strapi/design-system/IconButton';
+
+export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
+    margin-left: .5rem;
+`;

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

@@ -14,18 +14,20 @@ import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight, Lock } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage, handleAPIError } from '../../utils';
-import { blockItem, blockItemThread, resolveReport } from '../../pages/Details/utils/api';
+import { blockItem, blockItemThread, resolveReport } from '../../pages/utils/api';
 import { DiscussionThreadItemWarningsWrapper } from './styles';
 import ReportsReviewModal from '../ReportsReviewModal';
 import ReportsReviewTable from '../ReportsReviewTable';
+import pluginId from '../../pluginId';
+import { LockIcon, ReviewIcon } from '../icons';
 
 const DiscussionThreadItemWarnings = (item) => {
-    const { id, reports } = item;
+    const { id, reports, gotThread, allowedActions: { canModerate, canAccessReports, canReviewReports }} = item;
 
     const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
 
     const toggleNotification = useNotification();
     const queryClient = useQueryClient();
@@ -37,7 +39,7 @@ const DiscussionThreadItemWarnings = (item) => {
         }
         toggleNotification({
             type: 'success',
-            message,
+            message: `${pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
@@ -82,6 +84,8 @@ const DiscussionThreadItemWarnings = (item) => {
         setReportsReviewVisible(false);
     };
 
+    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
+
     const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
     const openReports = reports?.filter(_ => !_.resolved);
 
@@ -90,29 +94,29 @@ 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}>
                     <Typography textColor="warning600" fontWeight="bold">{getMessage(`page.details.panel.discussion.warnings.reports.description`, 'abuse reports')}</Typography>
                 </Box>
             </Box>
-            <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ArrowRight />}>
+            <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={<>
-                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<Lock />}>
+            startActions={canModerate && (<>
+                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.comment.block`, 'Block comment') }
                 </Button>
-                <Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<Lock />}>
+                { gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.thread.block`, 'Block thread') }
-                </Button>
-            </>}
+                </Button>) }
+            </>)}
             item={item}>
                 <Typography variant="sigma" textColor="neutral600" id="reports-list">
                     { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
@@ -121,16 +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/Nav/index.js

@@ -18,7 +18,11 @@ import getMessage from '../../utils/getMessage';
 // import PropTypes from 'prop-types';
 import getUrl from '../../utils/getUrl';
 
-const Nav = ({ hasNewComments, hasNewReports }) => {
+const Nav = ({ visible = false, hasNewComments, hasNewReports }) => {
+  if (!visible) {
+    return null;
+  }
+
   return <SubNav ariaLabel="Comments sub nav">
     <SubNavHeader label={getMessage('plugin.name')} />
     <SubNavSections>

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

@@ -13,7 +13,6 @@ import DiscussionThreadItem from '../DiscussionThreadItem';
 
 const ReportsReviewModal = ({ 
     isVisible = false,
-    isActionAsync = false,
     item,
     children, 
     onClose, 
@@ -34,11 +33,15 @@ const ReportsReviewModal = ({
 
   ReportsReviewModal.propTypes = {
     isVisible: PropTypes.bool,
-    isActionAsync: PropTypes.bool,
     startActions: PropTypes.array,
     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,
 };