strapi-plugin-comments 2.0.0-beta.4 → 2.0.0-rc.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,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;

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

@@ -4,23 +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 { Check, Cross } 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, 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);
@@ -71,75 +71,86 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, gotThread, pi
     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>)}
+            { 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')} />)}
+            { !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 && (<DiscussionThreadItemActionsGroupWrapper>
-                <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} />
-                <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} />
-            </DiscussionThreadItemActionsGroupWrapper>) }
+            { needsApproval && (<DiscussionThreadItemApprovalFlowActions id={id} allowedActions={{ canModerate }} queryToInvalidate="get-details-data" />) }
         </DiscussionThreadItemActionsWrapper>
         { !blocked && (<ConfirmationDialog 
             isVisible={blockConfirmationVisible}
@@ -169,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/DiscussionThreadItemMeta/index.js

@@ -9,22 +9,33 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 
-const DiscussionThreadItemMeta = ({ authorName, authorEmail, createdAt, updatedAt }) => {
+const DiscussionThreadItemMeta = ({ author, createdAt, updatedAt }) => {
 
     const { formatDate } = useIntl();
 
     const dateTime = formatDate(updatedAt || createdAt, { dateStyle: 'short', timeStyle: 'short' });
+    const { name } = author;
 
-    return (<Flex as={Box} paddingTop={2} direction="row" justifyContent="space-between">
-        <Typography variant="pi" fontWeight="bold">{ authorName }</Typography>
-        <Typography variant="pi">{ dateTime }</Typography>
+    return (<Flex as={Box} paddingTop={2} direction="row">
+        <Stack size={2} horizontal style={{ flexGrow: 1, justifyContent: 'space-between'}}>
+            <Typography variant="pi" fontWeight="bold">{ name }</Typography>
+            <Typography variant="pi">{ dateTime }</Typography>
+        </Stack>
     </Flex>);
 };
 
 DiscussionThreadItemMeta.propTypes = {
-
+    author: PropTypes.shape({
+        id: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
+        name: PropTypes.string.isRequired,
+        email: PropTypes.string,
+        avatar: PropTypes.string,
+    }).isRequired,
+    createdAt: PropTypes.string.isRequired,
+    updatedAt: PropTypes.string,
 };
 
 export default DiscussionThreadItemMeta;

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';
@@ -15,7 +16,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 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';
@@ -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/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

@@ -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,
 };