strapi-plugin-comments 2.0.0-beta.5 → 2.0.0-rc.2

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);
+                const isThreadAuthor = !isNil(selected?.threadOf?.author?.id) && (selected?.threadOf?.author?.id === item?.author?.id);
                 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

@@ -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,23 @@ 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, removed, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+const DiscussionThreadItem = (props) => {
+    const { 
+        isSelected, 
+        isThreadAuthor, 
+        content, 
+        root, 
+        preview, 
+        pinned, 
+        blocked, 
+        removed, 
+        blockedThread, 
+        gotThread, 
+        threadFirstItemId, 
+        author = {} } = props;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -45,11 +56,8 @@ const DiscussionThreadItem = (item) => {
         StyledComponent = DiscussionThreadItemRoot;
     }
 
-    const avatar = authorAvatar || authorUser?.avatar;
-    const name = authorName || `${authorUser?.firstName} ${authorUser?.lastName}`;
+    const { name, avatar } = author;
     const isBlocked = blocked || blockedThread;
-
-    const renderInitials = value => value.split(' ').map(_ => first(_)).join('').toUpperCase();
     
     return (<StyledComponent as="li">
         <DiscussionThreadItemContent as={Flex} direction="row">
@@ -62,12 +70,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 +89,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/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';
@@ -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)}