strapi-plugin-comments 2.0.0-rc.1 → 2.0.2

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

@@ -1,88 +1,13 @@
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
 
-export const AvatarWrapper = styled(Box)``;
-export const InitialsWrapper = styled(Box)``;
-
-export const DiscussionThreadItemLinkBox = styled(Flex)`
+export const DiscussionThreadFullsize = styled(Box)`
     width: 100%;
-    margin-top: .5rem;
-    margin-bottom: .5rem;
 `
-
-const DiscussionThreadItemStyled = styled(Box)`
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin-bottom: 1rem;
-
-    ${AvatarWrapper},
-    ${InitialsWrapper} {
-        align-self: flex-start;
-        margin-top: .4rem;
-    }
-`;
-
-export const DiscussionThreadItemContent = styled(Box)`
-    max-width: 45%;
-`;
-
-export const DiscussionThreadItemLeft = styled(DiscussionThreadItemStyled)`
+export const DiscussionThreadItemContent = styled(DiscussionThreadFullsize)`
     align-items: flex-start;
-    padding-left: 4rem;
-    text-align: left;
-
-    ${DiscussionThreadItemContent} {
-        align-self: flex-start;
-    }
-
-    ${AvatarWrapper},
-    ${InitialsWrapper} {
-        margin-right: 1rem;
-    }
 `;
 
-export const DiscussionThreadItemRight = styled(DiscussionThreadItemStyled)`
-    align-items: flex-end;
-    padding-right: 4rem;
-    text-align: left;
-
-    ${DiscussionThreadItemContent} {
-        align-self: flex-end;
-        flex-direction: row-reverse;
-    }
-
-    ${AvatarWrapper},
-    ${InitialsWrapper} {
-        margin-left: 1rem;
-    }
-
-    ${DiscussionThreadItemLinkBox} {
-        margin-right: 3rem;
-    }
-`;
-
-export const DiscussionThreadItemBox = styled(Box)`
-    
+export const DiscussionThreadItemContainer = styled(DiscussionThreadFullsize)`
+    align-items: flex-start;
 `;
-
-export const DiscussionThreadItemBoxContent = styled(Box)`
-    width: 100%;
-    align-items: stretch;
-`
-
-export const DiscussionThreadItemRoot = styled(DiscussionThreadItemLeft)`
-    padding-left: 0;
-    padding-right: 0;
-
-
-    ${DiscussionThreadItemContent} {
-        width: 100%;
-        max-width: 100%;
-    }
-
-    ${DiscussionThreadItemBox} {
-        flex-grow: 1;
-    }
-`;

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

@@ -7,24 +7,42 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
+import { useHistory } from 'react-router-dom';
 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 { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { getMessage, handleAPIError, resolveCommentStatus, resolveCommentStatusColor } from '../../utils';
-import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsWrapper } from './styles';
+import { Eye } from '@strapi/icons';
+import { getMessage, getUrl, handleAPIError, resolveCommentStatus, resolveCommentStatusColor } from '../../utils';
+import { DiscussionThreadItemActionsWrapper } from './styles';
 import ConfirmationDialog from '../ConfirmationDialog';
 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, removed, blockedThread, gotThread, pinned, reports = [], approvalStatus, root, allowedActions: { canModerate, canAccessReports, canReviewReports } }) => {
+import StatusBadge from '../StatusBadge';
+import { IconButtonGroupStyled } from '../IconButton/styles';
+import { ActionButton } from '../ActionButton/styles';
+import DiscussionThreadItemReviewAction from '../DiscussionThreadItemReviewAction';
+
+const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessReports, canReviewReports }, ...item }) => {
+    const { id, 
+        blocked, 
+        removed, 
+        blockedThread, 
+        gotThread, 
+        threadItemsCount,
+        threadFirstItemId,
+        pinned, 
+        preview,
+        reports = [], 
+        approvalStatus } = item;
 
     const [blockConfirmationVisible, setBlockConfirmationVisible] = useState(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = useState(false);
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(blockedThread);
 
+    const { push } = useHistory();
     const toggleNotification = useNotification();
     const queryClient = useQueryClient();
     const { lockApp, unlockApp } = useOverlayBlocker();
@@ -75,17 +93,20 @@ const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotT
     const openReports = reports?.filter(_ => !_.resolved);
     const hasReports = !isEmpty(openReports);
     const reviewFlowEnabled = (canAccessReports || canReviewReports) && hasReports;
-
-    const resolveStatusBadge = () => {
-        const status = resolveCommentStatus({ removed, blocked, blockedThread, approvalStatus, reviewFlowEnabled: !isBlocked && reviewFlowEnabled });
-        return {
-            badgeVisible: isBlocked || gotApprovalFlow || removed,
-            badgeColor: resolveCommentStatusColor(status),
-            badgeLabel: status,
-        };
-    };
-
-    const {badgeVisible, badgeColor, badgeLabel } = resolveStatusBadge();
+    const hasActiveThread = gotThread && !(removed || preview || pinned || blockedThread);
+    const isStatusBadgeVisible = isBlocked || reviewFlowEnabled;
+
+    const renderStatus = (props) => {
+        const status = resolveCommentStatus({ ...props, reviewFlowEnabled });
+        const color = resolveCommentStatusColor(status);
+   
+        return (<StatusBadge backgroundColor={`${color}100`} textColor={`${color}700`} color={color}>{ getMessage({
+            id: `page.common.item.status.${status}`,
+            props: {
+                count: openReports.length
+            }
+        }, status) }</StatusBadge>);
+      };
 
     const handleBlockClick = () => setBlockConfirmationVisible(true);
     const handleBlockConfirm = async () => {
@@ -121,36 +142,57 @@ const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotT
         }
     };
 
+    const handleDrilldownClick = () => {
+        if (hasActiveThread) {
+            push(getUrl(`discover/${threadFirstItemId}`));
+        }
+    };
+
+    const handleBlockActionClick = async (mutation, onCallback) => {
+        lockApp();
+        await mutation.mutateAsync(id);
+        onCallback();
+    };
+
+    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
+
+    const anyGroupButtonsVisible = needsApproval || reviewFlowEnabled || !blockedThread;
+    const isLoading = unblockItemMutation.isLoading || blockItemMutation.isLoading || blockItemThreadMutation.isLoading || unblockItemThreadMutation.isLoading;
+
     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>
+            { renderStatus(item) }
         </DiscussionThreadItemActionsWrapper>);
     }
 
     return (<>
         <DiscussionThreadItemActionsWrapper as={Flex} direction="row">
-            { 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" />) }
+            { isStatusBadgeVisible && (renderStatus(item))}
+            { (!blockedThread && (gotThread || pinned)) && (<ActionButton onClick={handleBlockThreadClick} startIcon={<LockIcon />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</ActionButton>) }
+            { (blockedThread && (gotThread || pinned)) && (<ActionButton onClick={handleUnblockThreadClick} startIcon={<UnlockIcon />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</ActionButton>) }
+            { anyGroupButtonsVisible && (<IconButtonGroupStyled isSingle withMargin>
+                { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<LockIcon />} label={getMessage('page.details.actions.comment.block', 'Block')} />)}
+                { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<UnlockIcon />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')} />)}
+                { needsApproval && (<DiscussionThreadItemApprovalFlowActions id={id} allowedActions={{ canModerate }} queryToInvalidate="get-details-data" />) }
+                <DiscussionThreadItemReviewAction
+                    item={item}
+                    queryToInvalidate="get-details-data"
+                    areBlockButtonsDisabled={blockButtonsDisabled}
+                    isLoading={isLoading}
+                    allowedActions={{ canModerate, canAccessReports, canReviewReports }}
+                    blockItemMutation={blockItemMutation}
+                    blockItemThreadMutation={blockItemThreadMutation}
+                    onBlockButtonsStateChange={handleBlockButtonsStateChange}
+                    onBlockActionClick={handleBlockActionClick}
+                />
+            </IconButtonGroupStyled>)}
+            { hasActiveThread && (<IconButtonGroupStyled isSingle withMargin>
+                <IconButton 
+                    onClick={handleDrilldownClick} 
+                    icon={<Eye />} 
+                    label={getMessage('page.details.panel.discussion.nav.drilldown', 'Drilldown thread')}  
+                    style={(blocked && !blockedThread) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />
+            </IconButtonGroupStyled>) }
         </DiscussionThreadItemActionsWrapper>
         { !blocked && (<ConfirmationDialog 
             isVisible={blockConfirmationVisible}
@@ -162,7 +204,7 @@ const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotT
             onCancel={handleBlockCancel}>
                 { getMessage('page.details.actions.comment.block.confirmation.description') }
         </ConfirmationDialog>) }
-        { (!blockedThread && root) && (<ConfirmationDialog 
+        { !blockedThread && (<ConfirmationDialog 
             isVisible={blockThreadConfirmationVisible}
             isActionAsync={blockItemThreadMutation.isLoading}
             header={getMessage('page.details.actions.thread.block.confirmation.header')}

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

@@ -1,18 +1,7 @@
 import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
-import { Badge } from '@strapi/design-system/Badge';
-import { IconButtonGroup } from '@strapi/design-system/IconButton';
-
-export const DiscussionThreadItemActionsBadge = styled(Badge)`
-    border: 1px ${ ({ theme, color }) => theme.colors[`${color}200`] } solid;
-`;
 
 export const DiscussionThreadItemActionsWrapper = styled(Box)`
     margin-left: 1rem;
-    align-items: start;
-
-    ${DiscussionThreadItemActionsBadge} {
-        margin-top: .175rem;
-        margin-right: .5rem;
-    }
+    align-items: flex-start;
 `;

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

@@ -11,7 +11,6 @@ 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';
 
@@ -60,10 +59,10 @@ const DiscussionThreadItemApprovalFlowActions = ({ id, allowedActions: { canMode
     };
 
     if (canModerate) {
-        return (<DiscussionThreadItemActionsGroupWrapper>
+        return (<>
             <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;
 };

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

@@ -0,0 +1,47 @@
+/**
+ *
+ * Discussion thread - Item footer
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Avatar, Initials } from '@strapi/design-system/Avatar';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { renderInitials } from '../../utils';
+import { DiscussionThreadItemFooterMeta, DiscussionThreadItemFooterStyled } from './styles';
+
+const DiscussionThreadItemFooter = ({ children, author, createdAt, updatedAt }) => {
+
+    const { formatDate } = useIntl();
+
+    const dateTime = formatDate(updatedAt || createdAt, { dateStyle: 'medium', timeStyle: 'short' });
+    const { name, avatar } = author;
+
+
+    return (<DiscussionThreadItemFooterStyled as={Box} paddingTop={2} direction="row">
+        <DiscussionThreadItemFooterMeta size={3} horizontal>
+            { avatar ? <Avatar src={avatar} alt={name} /> : <Initials>{ renderInitials(name) }</Initials> } 
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">{ name }</Typography>
+            <Typography variant="pi" textColor="neutral600">{ dateTime }</Typography>
+        </DiscussionThreadItemFooterMeta>
+        { children }
+    </DiscussionThreadItemFooterStyled>);
+};
+
+DiscussionThreadItemFooter.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,
+    children: PropTypes.array,
+};
+
+export default DiscussionThreadItemFooter;
+ 

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

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
+
+export const DiscussionThreadItemFooterStyled = styled(Flex)`
+    width: 100%;
+`;
+
+export const DiscussionThreadItemFooterMeta = styled(Stack)`
+    * + * {
+        margin-left: 8px;
+    }
+`;

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;
+    }
+`;