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

package/README.md

@@ -1,9 +1,11 @@
-<div align="center">
+<div align="center" width="150px">
   <img style="width: 150px; height: auto;" src="public/assets/logo.png" alt="Logo - Strapi Comments plugin" />
+</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 src="https://img.shields.io/npm/v/strapi-plugin-comments/latest.svg" alt="NPM Version" />
+    <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>
   <a href="https://www.npmjs.org/package/strapi-plugin-comments">
     <img src="https://img.shields.io/npm/dm/strapi-plugin-comments.svg" alt="Monthly download on NPM" />
@@ -14,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>
 
 ---
@@ -29,10 +37,10 @@ A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provid
 
 - **Comments Public REST + GraphQL API:** Elegant, entirely customizable and a fully extensible admin panel.
 - **Strapi &amp; generic users:** Support for built-in &amp; also generic non-Strapi users that might be the comments authors.
-- **Any Content Type relation:** Comments can by linked to any of your Content Types by default. Simply, you're controlling it.
+- **Any Content Type relation:** Comments can be linked to any of your Content Types by default. Simply, you're controlling it.
 - **Moderation Panel:** Search & Filter through the bucket with your auditory comments. Manage them by blocking single ones or full threads. All in combined list &amp; hierarchical tree view of threads.
-- **Automated Bad Words filtering:** By detault end users are not allowed to post abusing comments where bad words have been used.
-- **Abuse Reporting & Reviewing:** Don't allow inferior language, react to reports from your community, send email notifiactions about abuse reports
+- **Automated Bad Words filtering:** By default end users are not allowed to post abusing comments where bad words have been used.
+- **Abuse Reporting & Reviewing:** Don't allow inferior language, react to reports from your community, send email notifications about issued reports
 
 ## ⚙️ Versions
 
@@ -60,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 🎉
 
@@ -76,7 +84,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.5 (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).
@@ -101,6 +109,9 @@ To setup amend default plugin configuration we recommend to put following snippe
             reportReasons: {
                 'MY_CUSTOM_REASON': 'MY_CUSTOM_REASON',
             },
+            gql: { 
+              // ...
+            },
         },
         //...
     });
@@ -112,12 +123,36 @@ To setup amend default plugin configuration we recommend to put following snippe
 - `approvalFlow` - list of Content Types which are supporting approval flow. Values must be in format like `'api::<collection name>.<content type name>'`. For not included, posted comments are going to be immediately visible. 
 - `entryLabel` - ordered list of property names per Content Type to generate related entity label. Keys must be in format like `'api::<collection name>.<content type name>'`. Default formatting set as `*`.
 - `reportReasons` - set of enums you would like to use for issuing abuse reports. Provided by default `'BAD_LANGUAGE'`, `'DISCRIMINATION'` and `'OTHER'`.
+- `gql` - specific configuration for GraphQL. See [Additional GQL Configuration](#additional-gql-configuration)
 
 ## Additional GQL Configuration
-All you need to do is to install and enable `@strapi/plugin-graphql` for you instance based on the **[official Strapi v4 docs](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#configurations)**.
+All you need to do is to install and enable `@strapi/plugin-graphql` for you instance based on the **[official Strapi v4 docs](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#configurations)** and decide if you would like to call it by anyone (open for world) or only by authenticated users (Strapi users).
+
+```json
+  {
+    // ...
+    gql: {
+      auth: true, // Default: false
+    },
+    // ...
+  }
+```
+
+### Properties
+- `auth` - does GraphQL Queries should be authenticated or not? Default: `false`
+
+### Queries
 
 See [available GQL specification section](#public-graphql-specification).
 
+>  If `auth` is set to `true` you must provide relevant authentication headers to all requests like for example:
+>  
+> ```json
+> {
+>  "Authorization": "Bearer <your token here>"
+> }
+> ```
+
 ## 👤 RBAC
 Plugin provides granular permissions based on Strapi RBAC functionality.
 
@@ -134,7 +169,6 @@ Feature / Capability focused permissions:
 
 ## Base Comment model
 
-### Generic (non Strapi User)
 ```json
 {
     "id": 1,
@@ -146,8 +180,8 @@ Feature / Capability focused permissions:
     "removed": null,
     "approvalStatus": "APPROVED", // Only in case of enabled approval flow. Default: null
     "author": {
-        "id": "207ccfdc-94ba-45eb-979c-790f6f49c392",
-        "name": "Joe Doe",
+        "id": "207ccfdc-94ba-45eb-979c-790f6f49c392", // For Strapi users id reflects to the format used by your Strapi
+        "name": "Joe Doe", // For Strapi users it is equal to 'username' field
         "email": "jdoe@sample.com",
         "avatar": null,
     },
@@ -156,49 +190,20 @@ Feature / Capability focused permissions:
     "related": {}, // Related content type entity
     "reports": [] // Reports issued against this comment
 }
-```
-### Strapi User
-```json
-{
-    "id": 1,
-    "content": "My comment content",
-    "blocked": true,
-    "blockedThread": null,
-    "blockReason": null,
-    "removed": null,
-    "approvalStatus": "REJECTED", // Only in case of enabled approval flow. Default: null
-    "authorUser": {
-        "id": 1,
-        "username": "Sample User",
-        "email": "user@sample.com",
-        "provider": "local",
-        "confirmed": true,
-        "blocked": false,
-        "role": 1,
-        "created_at": "2020-07-10T08:38:03.157Z",
-        "updated_at": "2020-07-10T08:38:03.170Z"
-    },
-    "authorId": null,
-    "authorName": null,
-    "authorEmail": null,
-    "authorAvatar": null,
-    "createdAt": "2020-07-14T20:13:01.649Z",
-    "updatedAt": "2020-07-14T20:13:01.670Z",
-    "related": {}, // Related content type entity
-    "reports": [] // Reports issued against this comment
-}
-
 ```
 
 ## 🕸️ Public REST API specification
 
+**Strapi Users vs. Generic authors**
+> Keep in mind that if you're using auth / authz your requests to setup proper user contexts it has got higher priority in order to take author data comparing to `author` property provided as part of your payload.
+
 ### Get Comments
 
 *GraphQL equivalent: [Public GraphQL API -> Get Comments](#get-comments-1)*
 
-`GET <host>/comments/api::<collection name>.<content type name>:<entity id>`
+`GET <host>/api/comments/api::<collection name>.<content type name>:<entity id>`
 
-Return a hierarchical tree structure of comments for specified instance of Content Type like for example `Page` with `ID: 1`
+Return a hierarchical tree structure of comments for specified instance of Content Type like for example `Page` with `ID: 1`.
 
 **Example URL**: `https://localhost:1337/comments/api::page.page:1`
 
@@ -221,12 +226,14 @@ Return a hierarchical tree structure of comments for specified instance of Conte
     // ...
 ]
 ```
+#### Strapi REST API properties support:
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#sorting)
 
 ### Get Comments (flat structure)
 
 *GraphQL equivalent: [Public GraphQL API -> Get Comments (flat structure)](#get-comments-flat-structure-1)*
 
-`GET <host>/comments/api::<collection name>.<content type name>:<entity id>/flat`
+`GET <host>/api/comments/api::<collection name>.<content type name>:<entity id>/flat`
 
 Return a flat structure of comments for specified instance of Content Type like for example `Page` with `ID: 1`
 
@@ -250,11 +257,16 @@ Return a flat structure of comments for specified instance of Content Type like
 - `200` - Successful. Response with list of comments (can be empty)
 - `400` - Bad Request. Requested list for not valid / not existing Content Type
 
+#### Strapi REST API properties support:
+- [filtering](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/filtering-locale-publication.html#filtering)
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#sorting)
+- [pagination](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#pagination)
+
 ### Post a Comment
 
 *GraphQL equivalent: [Public GraphQL API -> Post a Comments](#post-a-comment-1)*
 
-`POST <host>/comments/api::<collection name>.<content type name>:<entity id>`
+`POST <host>/api/comments/api::<collection name>.<content type name>:<entity id>`
 
 Posts a Comment related to specified instance of Content Type like for example `Page` with `ID: 1`
 
@@ -265,21 +277,23 @@ Posts a Comment related to specified instance of Content Type like for example `
 *Generic (non Strapi User)*
 ```json
 {
-    "author": {
-        "id": "<any ID like value>",
-        "name": "Joe Doe",
-        "email": "jdoe@sample.com",
-        "avatar": "<any image url>"
-    },
+  "author": {
+      "id": "<any ID like value>",
+      "name": "Joe Doe",
+      "email": "jdoe@sample.com",
+      "avatar": "<any image url>"
+  },
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
 }
 ```
 
 *Strapi user*
+
+> Author is taken directly from the request context
+
 ```json
 {
-	"authorUser": 1, // id of a author user. Optional in case of 'enableUsers: true' in the plugin configuration
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
 }
@@ -301,7 +315,7 @@ Posts a Comment related to specified instance of Content Type like for example `
 
 *GraphQL equivalent: [Public GraphQL API -> Update Comments](#update-comment-1)*
 
-`PUT <host>/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>`
+`PUT <host>/api/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>`
 
 Updates a specified Comment content based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1`
 
@@ -312,17 +326,19 @@ Updates a specified Comment content based on it `commentId` and related to speci
 *Generic (non Strapi User)*
 ```json
 {
-    "author": {
-        "id": "<any ID like value>"
-    },
+  "author": {
+      "id": "<any ID like value>"
+  },
 	"content": "My sample response"
 }
 ```
 
 *Strapi user*
+
+> Author is taken directly from the request context
+
 ```json
 {
-	"authorUser": 1, // id of a author user. Optional in case of 'enableUsers: true' in the plugin configuration
 	"content": "My sample response"
 }
 ```
@@ -344,7 +360,7 @@ Updates a specified Comment content based on it `commentId` and related to speci
 
 *GraphQL equivalent: [Public GraphQL API -> Delete Comment](#delete-comment-1)*
 
-`DELETE <host>/comments/api::<collection name>.<content type name>:<entity id>/<commentId>?authorId=<authorId>`
+`DELETE <host>/api/comments/api::<collection name>.<content type name>:<entity id>/<commentId>?authorId=<authorId>`
 
 Deletes a specified Comment based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1`.
 
@@ -367,7 +383,7 @@ Deletes a specified Comment based on it `commentId` and related to specified ins
 
 *GraphQL equivalent: [Public GraphQL API -> Issue Abuse Report against specified Comment](#issue-abuse-report-against-specified-comment-1)*
 
-`POST <host>/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>/report-abuse`
+`POST <host>/api/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>/report-abuse`
 
 Reports abuse in specified Comment content based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1` and requests moderator attention.
 
@@ -398,7 +414,11 @@ Reports abuse in specified Comment content based on it `commentId` and related t
 
 ## 🕸️ Public GraphQL specification
 
-> *To test all queries and understand the schemas use GraphQL Playground exposed by `@strapi/plugin-graphql` on `http://localhost:1337/graphql`*
+**Strapi Users vs. Generic authors**
+> Keep in mind that if you're using auth / authz your requests to setup proper user contexts it has got higher priority in order to take author data comparing to `author` property provided as part of your payload.
+
+**Testing**
+> To test all queries and understand the schemas use GraphQL Playground exposed by `@strapi/plugin-graphql` on `http://localhost:1337/graphql`
 
 ### Get Comments
 
@@ -447,6 +467,9 @@ query {
   }
 ```
 
+#### Strapi GraphQL API properties support:
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#sorting)
+
 ### Get Comments (flat structure)
 
 *REST API equivalent: [Public REST API -> Get Comments (flat structure)](#get-comments-flat-structure)*
@@ -503,6 +526,11 @@ query {
 }
 ```
 
+#### Strapi GraphQL API properties support:
+- [filtering](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#filters)
+- [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#sorting)
+- [pagination](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/graphql-api.html#pagination)
+
 ### Post a Comment
 
 *REST API equivalent: [Public REST API -> Post a Comment](#post-a-comment)*
@@ -516,7 +544,7 @@ mutation createComment {
       relation: "api::page.page:1"
       content: "Hello World!"
       threadOf: 3
-      author: { id: "12345678", name: "John Wick", email: "test@test.pl" }
+      author: { id: "12345678", name: "John Wick", email: "test@test.pl" } # Optional if using auth / authz requests
     }
   ) {
     id
@@ -565,7 +593,7 @@ mutation updateComment {
       id: 34
       relation: "api::page.page:1"
       content: "I've changed it!"
-      author: { id: "12345678" }
+      author: { id: "12345678" } # Optional if using auth / authz requests
     }
   ) {
     id
@@ -614,7 +642,11 @@ mutation updateComment {
 ```graphql
 mutation removeComment {
   removeComment(
-    input: { id: 33, relation: "api::page.page:1", author: { id: "12345678" } }
+    input: { 
+      id: 33, 
+      relation: "api::page.page:1", 
+      author: { id: "12345678" } # Optional if using auth / authz requests
+    }
   ) {
     id
     removed
@@ -694,15 +726,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,22 +21,19 @@ 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 => {
                 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} 

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

@@ -1,92 +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, 
-        authorUser, 
-        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 avatar = author?.avatar || authorUser?.avatar;
-    const name = author?.name || `${authorUser?.firstName} ${authorUser?.lastName}`;
-    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 = {