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

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

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useMutation, useQueryClient } from 'react-query';
+import { isNil, isEmpty, orderBy } from 'lodash';
+import { Button } from '@strapi/design-system/Button'; 
+import { IconButton } from '@strapi/design-system/IconButton';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { ReviewIcon, LockIcon } from '../icons';
+import { resolveReport } from '../../pages/utils/api';
+import { getMessage, handleAPIError } from '../../utils';
+import ReportsReviewTable from '../ReportsReviewTable';
+import ReportsReviewModal from '../ReportsReviewModal';
+import pluginId from '../../pluginId';
+
+const DiscussionThreadItemReviewAction = ({ 
+    item, 
+    isAnyActionLoading: isAnyActionLoading,
+    queryToInvalidate, 
+    areBlockButtonsDisabled, 
+    allowedActions: { canModerate, canAccessReports, canReviewReports }, 
+    blockItemMutation,
+    blockItemThreadMutation,
+    onBlockButtonsStateChange,
+    onBlockActionClick }) => {
+
+    const { reports } = item;
+
+    const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message, stateAction = () => {}, indalidate = true) => async () => {
+        if (indalidate) {
+            await queryClient.invalidateQueries(queryToInvalidate);
+        }
+        toggleNotification({
+            type: 'success',
+            message: `${pluginId}.${message}`,
+        });
+        stateAction(false);
+        unlockApp();
+    };
+
+    const onError = err => { handleAPIError(err, toggleNotification); };
+
+    const resolveReportMutation = useMutation(resolveReport, {
+        onSuccess: onSuccess('page.details.panel.discussion.warnings.reports.dialog.confirmation.success', () => {}, false),
+        onError,
+        refetchActive: false,
+    });
+
+    const handleBlockActionClick = () => setReportsReviewVisible(false);
+
+    const handleReportsReviewClick = () => {
+        if (canAccessReports) {
+            setReportsReviewVisible(true);
+        }
+    };
+    const handleBlockItemClick = async () => {
+        if (canModerate) {
+            await onBlockActionClick(blockItemMutation, handleBlockActionClick);
+        }
+    };
+    const handleBlockItemThreadClick = async () => {
+        if (canModerate) {
+            await onBlockActionClick(blockItemThreadMutation, handleBlockActionClick);
+        }
+    };
+
+    const handleReportsReviewClose = async () => {
+        await queryClient.invalidateQueries(queryToInvalidate);
+        setReportsReviewVisible(false);
+    };
+
+    const isLoading = isAnyActionLoading && resolveReportMutation.isLoading;
+    const openReports = reports?.filter(_ => !_.resolved);
+    const hasReports = !isEmpty(openReports);
+    const reviewFlowEnabled = (canAccessReports && hasReports) && !(item.blocked || item.blockedThread);
+
+    if (reviewFlowEnabled) {
+        return (<>
+            <IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />
+            <ReportsReviewModal 
+                isVisible={reportsReviewVisible}
+                isActionAsync={isLoading}
+                allowedActions={{ canModerate, canAccessReports, canReviewReports }}
+                onClose={handleReportsReviewClose}
+                startActions={<Button onClick={handleReportsReviewClose} variant="tertiary">
+                    { getMessage('compontents.confirmation.dialog.button.cancel', 'Cancel') }
+                </Button>}
+                endActions={canModerate && (<>
+                    <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={areBlockButtonsDisabled}>
+                        { getMessage(`page.details.actions.comment.block`, 'Block comment') }
+                    </Button>
+                    { item.gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={areBlockButtonsDisabled}>
+                        { getMessage(`page.details.actions.thread.block`, 'Block thread') }
+                    </Button>) }
+                </>)}
+                item={item}>
+                    <ReportsReviewTable
+                            commentId={item.id} 
+                            items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
+                            mutation={resolveReportMutation}
+                            allowedActions={{ canAccessReports, canReviewReports }}
+                            onBlockButtonsStateChange={onBlockButtonsStateChange}
+                        />
+            </ReportsReviewModal>
+        </>);
+    }
+    return null;
+};
+
+DiscussionThreadItemReviewAction.propTypes = {
+    item: PropTypes.object.isRequired,
+    isLoading: PropTypes.bool, 
+    queryToInvalidate: PropTypes.string.isRequired, 
+    areBlockButtonsDisabled: PropTypes.bool, 
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool, 
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool, 
+    }),
+    blockItemMutation: PropTypes.func.isRequired,
+    blockItemThreadMutation: PropTypes.func.isRequired,
+    onBlockButtonsStateChange: PropTypes.func.isRequired,
+    onBlockActionClick: PropTypes.func.isRequired,
+};
+
+export default DiscussionThreadItemReviewAction;

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

@@ -0,0 +1,14 @@
+
+import styled from 'styled-components';
+import { IconButtonGroup } from '@strapi/design-system/IconButton';
+
+export const IconButtonGroupStyled = styled(IconButtonGroup)`
+    ${ ({ isSingle }) => isSingle && (`
+        span:first-child button {
+            border-radius: 4px;
+        }
+    `)}
+    ${ ({ withMargin }) => withMargin && (`
+        margin-left: .5rem;
+    `)}
+`;

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

@@ -24,7 +24,7 @@ const ReportsReviewModal = ({
             <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.header', 'Open reports') }</Typography>
         </ModalHeader>
         <ModalBody>
-            <DiscussionThreadItem {...item} root preview isSelected={false} />
+            <DiscussionThreadItem as="div" {...item} root preview isSelected={true} />
             { children }
         </ModalBody>
         <ModalFooter variant="tertiary" startActions={startActions} endActions={endActions} />

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

@@ -8,8 +8,6 @@
  import { useIntl } from 'react-intl';
  import PropTypes from 'prop-types';
  import { isEmpty } from 'lodash';
- import { Badge } from '@strapi/design-system/Badge'; 
- import { Button } from '@strapi/design-system/Button'; 
  import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; 
  import { Flex } from '@strapi/design-system/Flex'; 
  import { Table, Thead, Tbody, TFooter, Tr, Th, Td } from '@strapi/design-system/Table'; 
@@ -19,6 +17,8 @@
 import { useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage } from '../../utils';
 import { REPORT_REASON, REPORT_STATUS } from '../../utils/constants';
+import StatusBadge from '../StatusBadge';
+import { ActionButton } from '../ActionButton/styles';
 
 const ReportsReviewTable = ({ 
     commentId,
@@ -43,7 +43,7 @@ const ReportsReviewTable = ({
             case REPORT_STATUS.OPEN:
                 color = 'danger';
         };
-        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.details.panel.discussion.warnings.reports.dialog.status.${status}`, status) }</Badge>);
+        return (<StatusBadge backgroundColor={`${color}100`} textColor={`${color}600`} color={color}>{ getMessage(`page.details.panel.discussion.warnings.reports.dialog.status.${status}`, status) }</StatusBadge>);
     };
 
     const renderReason = reason => {
@@ -55,7 +55,7 @@ const ReportsReviewTable = ({
             case REPORT_REASON.BAD_LANGUAGE:
                 color = 'warning';
         };
-        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.details.panel.discussion.warnings.reports.dialog.reason.${reason}`, reason) }</Badge>);
+        return (<StatusBadge backgroundColor={`${color}100`} textColor={`${color}600`}  color={color}>{ getMessage(`page.details.panel.discussion.warnings.reports.dialog.reason.${reason}`, reason) }</StatusBadge>);
     };
 
     const handleClickResolve = async (reportId) => {
@@ -125,11 +125,17 @@ const ReportsReviewTable = ({
                   <Typography textColor="neutral800">{ formatDate(entry.createdAt, { dateStyle: 'short', timeStyle: 'short' }) }</Typography>
                 </Td>
                 <Td>
-                  <Typography textColor="neutral800">{ renderStatus(entry.resolved) }</Typography>
+                  { renderStatus(entry.resolved) }
                 </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>
+                          <ActionButton 
+                            isSingle
+                            onClick={() => handleClickResolve(entry.id)} 
+                            startIcon={<Check />} 
+                            variant="success">
+                            { getMessage('page.details.panel.discussion.warnings.reports.dialog.actions.resolve', 'resolve') }
+                          </ActionButton>
                       </Flex>) }
                 </Td>)}
               </Tr>)}

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

@@ -0,0 +1,17 @@
+/**
+ *
+ * Status badge
+ *
+ */
+
+ import React from 'react';
+ import { Typography } from '@strapi/design-system/Typography';
+ import { StatusBadge as StatusBadgeStyled } from './styles';
+
+const StatusBadge = ({ children, textColor, ...rest }) => (<StatusBadgeStyled {...rest} >
+    <Typography variant="omega" fontWeight="semibold" textColor={textColor}>
+        { children }
+    </Typography>
+</StatusBadgeStyled>);
+
+export default StatusBadge;

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

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import { Badge } from '@strapi/design-system/Badge';
+
+export const StatusBadge = styled(Badge)`
+    padding: 5px 8px;
+    border: 1px ${ ({ theme, color }) => theme.colors[`${color}200`] } solid;
+
+    overflow: hidden;
+
+    text-overflow: ellipsis;
+
+    cursor: default;
+    
+    span {
+        text-transform: none;
+    }
+`;

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

@@ -6,24 +6,27 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { capitalize, isNil, first, take } from 'lodash';
+import { capitalize, isNil, isEmpty, first, take } from 'lodash';
 import { Box } from '@strapi/design-system/Box';
 import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 import { getMessage } from '../../../../utils';
+import DetailsFilters from '../DetailsFilters';
 
-const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
+const DetailsEntity = ({ 
+    data = {}, 
+    schema = {}, 
+    config = {}, 
+    filters,
+    onFiltersChange
+}) => {
     const { entryLabel = {} } = config;
     const { attributes = {} } = schema;
     const keys = Object.keys(attributes);
     const entityLabelKey = first(entryLabel[data?.uid]);
-    
-    if (keys.length === 0) {
-        return null;
-    }
-
+ 
     const FIELDS_LIMIT = 5;
     const itemKeys = take(
         keys.filter(_ => (attributes[_].type === 'string') && !isNil(data[_]) && (_ !== entityLabelKey)),
@@ -34,25 +37,38 @@ const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
         .map(_ => capitalize(_))
         .join(' ');
 
+    const entityIsRenderable = data && !isEmpty(data) && !isEmpty(itemKeys);
+
     return (<Box padding={4}>
-        <Typography variant="sigma" textColor="neutral600" id="entity-details">
-            { getMessage('page.details.panel.entity', 'Details') }
-        </Typography>
-        <Box paddingTop={2} paddingBottom={6}>
-            <Divider />
+        { entityIsRenderable && (<Box marginBottom={4}>
+            <Typography variant="sigma" textColor="neutral600" id="entity-details">
+                { getMessage('page.details.panel.entity', 'Details') }
+            </Typography>
+            <Box paddingTop={2} paddingBottom={4}>
+                <Divider />
+            </Box>
+            <Stack size={itemKeys.length}>
+                <Flex direction="column" alignItems="flex-start">
+                    <Typography fontWeight="bold">{ formatLabel(entityLabelKey) }</Typography>
+                    <Typography>{ data[entityLabelKey] }</Typography>
+                </Flex>
+                {  itemKeys.map(_ => 
+                    (<Flex key={`prop_${_}`} direction="column" alignItems="flex-start">
+                        <Typography fontWeight="bold">{ formatLabel(_) }</Typography>
+                        <Typography>{ data[_] }</Typography>
+                    </Flex>))
+                }
+            </Stack>
+        </Box>) }
+        <Box>
+            <Typography variant="sigma" textColor="neutral600" id="view-filters">
+                { getMessage('page.details.filters.label', 'View') }
+            </Typography>
+            <Box paddingTop={2} paddingBottom={4}>
+                <Divider />
+            </Box>
+            <DetailsFilters data={filters} onChange={onFiltersChange} />
         </Box>
-        <Stack size={itemKeys.length}>
-            <Flex direction="column" alignItems="flex-start">
-                <Typography fontWeight="bold">{ formatLabel(entityLabelKey) }</Typography>
-                <Typography>{ data[entityLabelKey] }</Typography>
-            </Flex>
-            {  itemKeys.map(_ => 
-                (<Flex key={`prop_${_}`} direction="column" alignItems="flex-start">
-                    <Typography fontWeight="bold">{ formatLabel(_) }</Typography>
-                    <Typography>{ data[_] }</Typography>
-                </Flex>))
-            }
-        </Stack>
     </Box>);
 };
 
@@ -60,6 +76,8 @@ DetailsEntity.propTypes = {
     data: PropTypes.object.isRequired,
     schema: PropTypes.object.isRequired,
     config: PropTypes.object.isRequired,
+    filters: PropTypes.object.isRequired,
+    onFiltersChange: PropTypes.func.isRequired,
 };
 
 export default DetailsEntity;

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

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import { Box } from '@strapi/design-system/Box'; 
 import { Flex } from '@strapi/design-system/Flex'; 
 import { Stack } from '@strapi/design-system/Stack';
-import { Switch } from '@strapi/design-system/Switch';
-import { Typography } from '@strapi/design-system/Typography'; 
+import { Checkbox } from '@strapi/design-system/Checkbox';
 import { getMessage } from '../../../../utils';
 
 const DetailsFilters = ({ data, onChange }) => {
@@ -17,14 +16,13 @@ const DetailsFilters = ({ data, onChange }) => {
     });
 
     return (<Box as={Flex}>
-        <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)} 
-                visibleLabels />
+        <Stack size={2} vertical>
+            <Checkbox 
+                checked={removed} 
+                onChange={() => handleOnChange('removed', !removed)} 
+                visibleLabels>
+                    { getMessage('page.details.filters.removed.label', 'Show removed comments') }
+                </Checkbox>
         </Stack>
     </Box>);
 };

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

@@ -12,10 +12,8 @@ import { useQuery } from 'react-query';
 import { useRouteMatch } from 'react-router-dom';
 import { Layout, HeaderLayout, TwoColsLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Loader } from '@strapi/design-system/Loader';
-import { Stack } from '@strapi/design-system/Stack';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { ArrowLeft } from '@strapi/icons';
 
@@ -34,9 +32,7 @@ import { getUrl } from '../../utils';
 import Nav from '../../components/Nav';
 import DetailsEntity from './components/DetailsEntity';
 import DiscussionThread from '../../components/DiscussionThread';
-import DiscussionStatus from '../../components/DiscussionStatus';
 import makeAppView from '../App/reducer/selectors';
-import DetailsFilters from './components/DetailsFilters';
 
 const Details = ({ config }) => {
   useFocusWhenNavigate();
@@ -102,21 +98,16 @@ const Details = ({ config }) => {
                   </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>
-                    } 
+                    endCol={<DetailsEntity 
+                      data={entity} 
+                      schema={contentTypeData?.schema} 
+                      config={config}
+                      filters={filters}
+                      onFiltersChange={handleChangeFilters} />}
                   />
                 </ContentLayout>
               </>) }

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

@@ -2,12 +2,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from 'react-query';
-import { isNil, isEmpty, orderBy } from 'lodash';
+import { isNil, isEmpty } from 'lodash';
 import { Avatar, Initials } from '@strapi/design-system/Avatar';
-import { Badge } from '@strapi/design-system/Badge';
-import { Box } from '@strapi/design-system/Box'; 
-import { Button } from '@strapi/design-system/Button'; 
-import { Divider } from '@strapi/design-system/Divider'; 
 import { Flex } from '@strapi/design-system/Flex'; 
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Link } from '@strapi/design-system/Link';
@@ -17,20 +13,20 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Eye } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage, getUrl, handleAPIError, renderInitials, resolveCommentStatus, resolveCommentStatusColor } from '../../../../utils';
-import ReportsReviewModal from '../../../../components/ReportsReviewModal';
-import ReportsReviewTable from '../../../../components/ReportsReviewTable';
-import { blockItem, blockItemThread, resolveReport } from '../../../utils/api';
+import { blockItem, blockItemThread } from '../../../utils/api';
 import pluginId from '../../../../pluginId';
 import { ReviewIcon, LockIcon } from '../../../../components/icons';
 import { TableLink } from './styles';
 import renderEntryTitle from '../../../../utils/renderEntryTitle';
 import DiscussionThreadItemApprovalFlowActions from '../../../../components/DiscussionThreadItemApprovalFlowActions';
+import StatusBadge from '../../../../components/StatusBadge';
+import { IconButtonGroupStyled } from '../../../../components/IconButton/styles';
+import DiscussionThreadItemReviewAction from '../../../../components/DiscussionThreadItemReviewAction';
 
 const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick }) => {
 
     const { id, reports } = item;
 
-    const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
     const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
 
     const { formatDate } = useIntl();
@@ -52,34 +48,17 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
 
     const onError = err => { handleAPIError(err, toggleNotification); };
 
-    const resolveReportMutation = useMutation(resolveReport, {
-        onSuccess: onSuccess('page.details.panel.discussion.warnings.reports.dialog.confirmation.success', () => {}, false),
-        onError,
-        refetchActive: false,
-    });
-
     const blockItemMutation = useMutation(blockItem, {
-        onSuccess: onSuccess(
-            'page.details.actions.comment.block.confirmation.success', 
-            setReportsReviewVisible
-        ),
+        onSuccess: onSuccess('page.details.actions.comment.block.confirmation.success'),
         onError,
         refetchActive: false,
     });
     const blockItemThreadMutation = useMutation(blockItemThread, {
-        onSuccess: onSuccess(
-            'page.details.actions.thread.block.confirmation.success', 
-            setReportsReviewVisible
-        ),
+        onSuccess: onSuccess('page.details.actions.thread.block.confirmation.success'),
         onError,
         refetchActive: false,
     });
 
-    const handleReportsReviewClick = () => {
-        if (canAccessReports) {
-            setReportsReviewVisible(true);
-        }
-    };
     const handleBlockItemClick = async () => {
         if (canModerate) {
             lockApp();
@@ -92,12 +71,14 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
             blockItemThreadMutation.mutate(id);
         }
     };
-    const handleReportsReviewClose = async () => {
-        await queryClient.invalidateQueries('get-data');
-        setReportsReviewVisible(false);
+
+    const handleBlockActionClick = async (mutation, onCallback) => {
+        lockApp();
+        await mutation.mutateAsync(id);
+        onCallback();
     };
 
-    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
+    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading;
     const openReports = reports?.filter(_ => !_.resolved);
     const hasReports = !isEmpty(openReports);
     const reviewFlowEnabled = (canAccessReports && hasReports) && !(item.blocked || item.blockedThread);
@@ -109,15 +90,15 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
         const status = resolveCommentStatus({ ...props, reviewFlowEnabled });
         const color = resolveCommentStatusColor(status);
    
-        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage({
+        return (<StatusBadge backgroundColor={`${color}100`} textColor={`${color}700`} color={color}>{ getMessage({
             id: `page.common.item.status.${status}`,
             props: {
                 count: openReports.length
             }
-        }, status) }</Badge>);
+        }, status) }</StatusBadge>);
       };
     
-      const renderEntryUrl = entry => `/content-manager/collectionType/${entry.uid}/${entry.id}`;
+      const renderEntryUrl = entry => entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
       const renderDetailsUrl = entry => getUrl(`discover/${entry.id}`);
 
       const gotApprovalFlow = !isNil(item.approvalStatus);
@@ -149,7 +130,7 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
                 }, '#' + item.threadOf.id) }</Link>) : '-' }
             </Td>
             <Td style={{ maxWidth: '15vw' }}>
-                <TableLink to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related, config) }</TableLink>
+                { item.related ? (<TableLink to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related, config) }</TableLink>) : '-' }
             </Td>
             <Td>
                 <Typography textColor="neutral800">{ formatDate(item.updatedAt || item.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>
@@ -159,45 +140,27 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
             </Td>
             <Td>
                 <Flex direction="column" alignItems="flex-end">
-                    <Stack size={actionItemsCount} horizontal>
-                        { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
+                    <IconButtonGroupStyled isSingle={!(reviewFlowEnabled || (canModerate && needsApproval))}>
                         { (canModerate && needsApproval) &&  (
                         <DiscussionThreadItemApprovalFlowActions 
                             id={item.id} 
                             allowedActions={{ canModerate }}
                             queryToInvalidate="get-data" />
                         )}
+                        <DiscussionThreadItemReviewAction
+                            item={item}
+                            queryToInvalidate="get-data"
+                            areBlockButtonsDisabled={blockButtonsDisabled}
+                            isLoading={isLoading}
+                            allowedActions={{ canModerate, canAccessReports, canReviewReports }}
+                            blockItemMutation={blockItemMutation}
+                            blockItemThreadMutation={blockItemThreadMutation}
+                            onBlockButtonsStateChange={handleBlockButtonsStateChange}
+                            onBlockActionClick={handleBlockActionClick}
+                        />
                         <IconButton onClick={handleClick} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
-                    </Stack>
+                    </IconButtonGroupStyled>
                 </Flex>
-                { reviewFlowEnabled && (<ReportsReviewModal 
-                    isVisible={reportsReviewVisible}
-                    isActionAsync={isLoading}
-                    allowedActions={{ canModerate, canAccessReports, canReviewReports }}
-                    onClose={handleReportsReviewClose}
-                    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') }
-                        </Typography>
-                        <Box paddingTop={2} paddingBottom={6}>
-                            <Divider />
-                        </Box>
-                        <ReportsReviewTable
-                                commentId={item.id} 
-                                items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
-                                mutation={resolveReportMutation}
-                                allowedActions={{ canAccessReports, canReviewReports }}
-                                onBlockButtonsStateChange={handleBlockButtonsStateChange}
-                            />
-                </ReportsReviewModal>) }
             </Td>
         </Tr>
     );