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

package/.circleci/config.yml

@@ -6,7 +6,7 @@ jobs:
     environment:
       CODECOV_TOKEN: 02e2d4e8-88c4-4e5d-99da-a9a2888634c6
     docker:
-      - image: circleci/node:12.13.0
+      - image: circleci/node:14.17.3
     working_directory: ~/repo
     steps:
       - checkout

package/README.md

@@ -3,7 +3,7 @@
 </div>
 <div align="center">
   <h1>Strapi v4 - Comments plugin</h1>
-  <p>Powerfull Strapi based comments moderation tool for you and your users</p>
+  <p>Powerful Strapi based comments moderation tool for you and your users</p>
   <a href="https://www.npmjs.org/package/strapi-plugin-comments">
     <img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/VirtusLab-Open-Source/strapi-plugin-comments?label=npm&logo=npm">
   </a>
@@ -16,6 +16,12 @@
   <a href="https://codecov.io/gh/VirtusLab-Open-Source/strapi-plugin-comments">
     <img src="https://codecov.io/gh/VirtusLab-Open-Source/strapi-plugin-comments/coverage.svg?branch=master" alt="codecov.io" />
   </a>
+  <a href="https://sharing.clickup.com/tl/xhcmx-83/strapiv-4-comments-roadmap">
+    <img src="https://img.shields.io/website?down_message=roadmap&label=product&up_message=roadmap&url=https%3A%2F%2Fsharing.clickup.com%2Ftl%2Fxhcmx-83%2Fstrapiv-4-comments-roadmap" />
+  </a>
+  <a href="https://sharing.clickup.com/b/xhcmx-63/strapiv-4-comments-board">
+    <img src="https://img.shields.io/website?down_message=board&label=product&up_color=blue&up_message=board&url=https%3A%2F%2Fsharing.clickup.com%2Fb%2Fxhcmx-63%2Fstrapiv-4-comments-board" />
+  </a>
 </div>
 
 ---
@@ -62,7 +68,7 @@ or just run Strapi in the development mode with `--watch-admin` option:
 yarn develop --watch-admin
 ```
 
-The **Comments** plugin should appear in the navigation menu of Strapi after you run app again.
+The **Comments** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
 Enjoy 🎉
 
@@ -78,7 +84,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.6 (recently tested)
+- Strapi v4.0.7 (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/tree/strapi-v3).
@@ -705,15 +711,25 @@ Live example of plugin usage can be found in the [VirtusLab Strapi Examples](htt
 
 ## 🤝 Contributing
 
+<div>
+  <a href="https://sharing.clickup.com/tl/xhcmx-83/strapiv-4-comments-roadmap">
+    <img src="https://img.shields.io/website?down_message=roadmap&label=product&up_message=roadmap&url=https%3A%2F%2Fsharing.clickup.com%2Ftl%2Fxhcmx-83%2Fstrapiv-4-comments-roadmap" />
+  </a>
+  <a href="https://sharing.clickup.com/b/xhcmx-63/strapiv-4-comments-board">
+    <img src="https://img.shields.io/website?down_message=board&label=product&up_color=blue&up_message=board&url=https%3A%2F%2Fsharing.clickup.com%2Fb%2Fxhcmx-63%2Fstrapiv-4-comments-board" />
+  </a>
+</div>
+
 Feel free to fork and make a Pull Request to this plugin project. All the input is warmly welcome!
 
 ## 👨‍💻 Community support
 
 For general help using Strapi, please refer to [the official Strapi documentation](https://strapi.io/documentation/). For additional help, you can use one of these channels to ask a question:
 
-- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Look for @cyp3r and DM.
+- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Find us by `[VirtusLab]` prefix and DM.
 - [Slack - VirtusLab Open Source](https://virtuslab-oss.slack.com) We're present on a public channel #strapi-molecules
 - [GitHub](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/issues) (Bug reports, Contributions, Questions and Discussions)
+- [E-mail](mailto:strapi@virtuslab.com) - we will respond back as soon as possible
 
 ## 📝 License
 

package/__mocks__/initSetup.js

@@ -0,0 +1,53 @@
+const { get, set } = require('lodash');
+
+module.exports = (config = {}) => {
+  const mock = {
+    getRef: function() {
+      return this;
+    },
+    plugin: function(name) {
+      return this.plugins[name];
+    },
+    plugins: {
+      comments: {
+        service: function(name) {
+            return this.services[name]({ strapi: mock.getRef() });
+        },
+        package: require('../package.json'),
+        services: {
+          common: require('../server/services/common'),
+          client: require('../server/services/client'),
+          admin: require('../server/services/admin'),
+        },
+        contentTypes: {
+          comment: {
+            ...require('../content-types/comment'),
+            uid: 'plugins::comments.comment',
+          },
+          'comment-report': {
+            ...require('../content-types/report'),
+            uid: 'plugins::comments.comment-report'
+          },
+        }
+      }
+    },
+    config: {
+      get: function(prop = '') {
+        return get(this.plugins, prop.replace('plugin.', ''));
+      },
+      set: function(prop = '', value) {
+        return set(this.plugins, prop.replace('plugin.', ''), value);
+      },
+      plugins: {
+        comments: {
+          approvalFlow: ['api::blog-post.blog-post'],
+          entryLabel: {
+            'api::blog-post.blog-post': ['alternative_subject'],
+          },
+          ...config
+        }
+      }
+    }
+  };
+  return mock;
+};

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

@@ -0,0 +1,10 @@
+
+import styled from 'styled-components';
+import { Button } from '@strapi/design-system/Button';
+
+export const ActionButton = styled(Button)`
+    padding: 7px 16px;
+    margin-left: ${({ isSingle }) => isSingle ? '0' : '.5rem'};
+
+    white-space: nowrap;
+`;

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

@@ -8,7 +8,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { isNil } from 'lodash';
 import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
@@ -22,17 +21,14 @@ const DiscussionThread = ({ level = [], selected = {}, allowedActions, isReloadi
     const rootThread = selected?.threadOf;
     return (<LoadingIndicatorContainer as={Box} padding={4}>
         { isReloading && <LoadingIndicatorOverlay />}
-        <Flex as={Box} direction="row" justifyContent="space-between">
-            <Typography variant="sigma" textColor="neutral600" id="entity-details">
+        <Flex as={Box} direction="row" justifyContent="space-between" marginBottom={2}>
+            <Typography variant="delta" textColor="neutral800" id="discussion-thread">
                 { getMessage('page.details.panel.discussion', 'Discussion') }
             </Typography>
             { rootThread && (<Link to={getUrl(`discover/${rootThread.id}`)} startIcon={<ArrowUp />}>
                         { getMessage('page.details.panel.discussion.nav.back') }
                     </Link>) }
         </Flex>
-        <Box paddingTop={2} paddingBottom={6}>
-            <Divider />
-        </Box>
         <Flex as="ul" direction="column" alignItems="flex-start">
             { rootThread && (<DiscussionThreadItem {...rootThread} allowedActions={allowedActions} isThreadAuthor root pinned />) }
             { level.map(item => {

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

@@ -1,90 +1,47 @@
 /**
  *
- * Entity Details
+ * Discussion thread - Item
  *
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Avatar, Initials } from '@strapi/design-system/Avatar';
 import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight } from '@strapi/icons';
-import DiscussionThreadItemMeta from '../DiscussionThreadItemMeta';
-import { AvatarWrapper, DiscussionThreadItemBox, DiscussionThreadItemBoxContent, DiscussionThreadItemContent, DiscussionThreadItemLeft, DiscussionThreadItemLinkBox, DiscussionThreadItemRight, DiscussionThreadItemRoot } from './styles';
+import DiscussionThreadItemFooter from '../DiscussionThreadItemFooter';
 import DiscussionThreadItemActions from '../DiscussionThreadItemActions';
-import { getMessage, getUrl, renderInitials } from '../../utils';
-import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
+import { DiscussionThreadItemContainer, DiscussionThreadFullsize, DiscussionThreadItemContent } from './styles';
 
 const DiscussionThreadItem = (props) => {
     const { 
+        as = "li",
         isSelected, 
-        isThreadAuthor, 
         content, 
         root, 
         preview, 
-        pinned, 
-        blocked, 
-        removed, 
-        blockedThread, 
-        gotThread, 
-        threadFirstItemId, 
-        author = {} } = props;
-
-    let background = 'neutral100';
-    let borderColor = 'neutral200';
-    let dividerColor = 'neutral200';
-    let StyledComponent = DiscussionThreadItemRight;
-
-    if(isThreadAuthor || root){
-        StyledComponent = DiscussionThreadItemLeft;
-        borderColor = 'neutral100';
-        dividerColor = 'neutral100';
-        background = null;
-    } 
-    
-    if (isSelected) {
-        background = 'secondary100'
-        borderColor = 'secondary500';
-        dividerColor = 'secondary200';
-    }
-
-    if (root) {
-        StyledComponent = DiscussionThreadItemRoot;
-    }
-
-    const { name, avatar } = author;
-    const isBlocked = blocked || blockedThread;
+        pinned } = props;
     
-    return (<StyledComponent as="li">
-        <DiscussionThreadItemContent as={Flex} direction="row">
-            <AvatarWrapper>
-                { avatar ? <Avatar src={avatar} alt={name} /> : <Initials>{ renderInitials(name) }</Initials> }
-            </AvatarWrapper>
-            <DiscussionThreadItemBox hasRadius shadow="filterShadow" borderColor={borderColor} background={background} padding={2}>
-                <Flex as={Box} paddingBottom={2} direction="column">
-                    <DiscussionThreadItemBoxContent as={Flex} direction="row">
-                        <Box as={Flex} grow={1} alignItems="center">
-                            <Typography variant="omega">{ content }</Typography>
-                        </Box>
-                        { !preview && (<DiscussionThreadItemActions { ...props } root={root || pinned} />) }
-                    </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...props } gotThread={gotThread || root} />) }
-                </Flex>
-                <Divider background={dividerColor} />
-                <DiscussionThreadItemMeta { ...props } />
-            </DiscussionThreadItemBox>
-        </DiscussionThreadItemContent>
-
-        { (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>
-        </DiscussionThreadItemLinkBox>) }
-    </StyledComponent>);
+    return (<DiscussionThreadFullsize as={as} marginBottom={preview ? 4 : 0}>
+        <DiscussionThreadItemContainer 
+            as={Flex} 
+            direction="column" 
+            alignItems="flex-start" 
+            hasRadius 
+            background={isSelected ? 'neutral100' : null} 
+            paddingLeft={2} paddingRight={2} paddingTop={4} paddingBottom={4}>
+            <DiscussionThreadItemContent 
+                as={Flex} 
+                paddingBottom={2} 
+                direction="row">
+                <Box as={Flex} grow={1} alignItems="center" marginTop="6px">
+                    <Typography variant="omega" textColor="neutral800">{ content }</Typography>
+                </Box>
+                { !preview && (<DiscussionThreadItemActions { ...props } root={root || pinned} preview={preview} />) }
+            </DiscussionThreadItemContent>
+            <DiscussionThreadItemFooter { ...props } />
+        </DiscussionThreadItemContainer>
+    </DiscussionThreadFullsize>);
 };
 
 DiscussionThreadItem.propTypes = {

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