strapi-plugin-comments 1.0.2 → 2.0.0-beta.3

package/.circleci/config.yml

@@ -20,7 +20,7 @@ jobs:
       - restore_cache:
           keys:
             # when lock file changes, use increasingly general patterns to restore cache
-            - strapi-plugin-comments-v1-{{ checksum "yarn.lock" }}
+            - strapi-plugin-comments-v2-{{ checksum "yarn.lock" }}
             - strapi-plugin-comments-
       - run:
           name: Echo versions
@@ -41,7 +41,7 @@ jobs:
       - save_cache:
           paths:
             - ./node_modules
-          key: strapi-plugin-comments-v1-{{ checksum "yarn.lock" }}
+          key: strapi-plugin-comments-v2-{{ checksum "yarn.lock" }}
 workflows:
     build-and-test:
       jobs:

package/README.md

@@ -1,4 +1,4 @@
-# Strapi - Comments plugin
+# Strapi v4 - Comments plugin - BETA
 
 <p align="center">
   <a href="https://www.npmjs.org/package/strapi-plugin-comments">
@@ -7,17 +7,19 @@
   <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" />
   </a>
-  <a href="https://circleci.com/gh/VirtusLab/strapi-plugin-comments">
-    <img src="https://circleci.com/gh/VirtusLab/strapi-plugin-comments.svg?style=shield" alt="CircleCI" />
+  <a href="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-comments">
+    <img src="https://circleci.com/gh/VirtusLab-Open-Source/strapi-plugin-comments.svg?style=shield" alt="CircleCI" />
   </a>
-  <a href="https://codecov.io/gh/VirtusLab/strapi-plugin-comments">
-    <img src="https://codecov.io/gh/VirtusLab/strapi-plugin-comments/coverage.svg?branch=master" alt="codecov.io" />
+  <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>
 </p>
 
 A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provides end to end comments feature with their moderation panel, bad words filtering, abuse reporting and more.
 
-<img src="public/assets/preview.png" alt="UI preview" />
+### Versions
+- **Stable** - [v1.0.4](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments)
+- **Beta** - v4 support - [v2.0.0-beta.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/tree/feat/strapi-v4)
 
 ### ⏳ Installation
 
@@ -46,14 +48,13 @@ Enjoy 🎉
 
 ### 🖐 Requirements
 
-Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under <a href="https://strapi.io/documentation/v3.x/installation/cli.html#step-1-make-sure-requirements-are-met">Installation Requirements</a>.
+Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under [Installation Requirements](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html).
 
 **Supported Strapi versions**:
 
-- Strapi v3.6.8 (recently tested)
-- Strapi v3.x
+- Strapi v4.0.2 (recently tested)
 
-(This plugin may work with the older Strapi versions, but these are not tested nor officially supported at this time.)
+(This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
 
 **We recommend always using the latest version of Strapi to start your new projects**.
 
@@ -64,81 +65,63 @@ Complete installation requirements are exact same as for Strapi itself and can b
 - **Any Content Type relation:** Comments can by 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
-
-## Content Type model relation to Comment
-
-To enable Content Type to work with Comments, you've to add following field to your model `*.settings.json`:
-
-```
-    "comments": {
-      "plugin": "comments",
-      "collection": "comment",
-      "via": "related"
-    }
-```
-
-inside the `attributes` section like in example below:
-
-```
-    "attributes": {
-        ...,
-        "comments": {
-            "plugin": "comments",
-            "collection": "comment",
-            "via": "related"
-        },
-        ...
-    },
-```
+- **Abuse Reporting & Reviewing:** Don't allow inferior language, react to reports from your community, send email notifiactions about abuse reports
 
 ## Configuration
-To setup amend default plugin configuration we recommend to put following snippet as part of `config/custom.js` or `config/<env>/custom.js` file. If you've got already configurations for other plugins stores by this way, use just the `navigation` part within exising `plugins` item.
+To setup amend default plugin configuration we recommend to put following snippet as part of `config/plugins.js` or `config/<env>/plugins.js` file. If the file does not exist yet, you have to create it manually. If you've got already configurations for other plugins stores by this way, use just the `comments` part within exising `plugins` item.
 
-```
+
+```js
     ...
-    plugins: {
-      comments: {
-        enableUsers: true,
+    comments: {
         badWords: false,
-      },
+        moderatorRoles: ["Authenticated"],
+        entryLabel: {
+            '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
+            'api::page.page': ['MyField'],
+        },
     },
     ...
 ```
 
 ### Properties
-- `enableUsers` - Enabled support for built-in Strapi users, if endpoints are exposed with usage of `Authenticated` policy or JWT tokens are in use by the Client App. Default value: `false`.
-- `badWords` - Enabled support for (bad words filtering)[https://www.npmjs.com/package/bad-words]. Can be turned off or overwritten using (options reference)[https://www.npmjs.com/package/bad-words#constructor]. Default value: `true`. 
+- `badWords` - Enabled support for [bad words filtering](https://www.npmjs.com/package/bad-words). Can be turned off or overwritten using [options reference](https://www.npmjs.com/package/bad-words#constructor). Default value: `true`. 
+- `moderatorRoles` - Optional list of names of roles. Users with those roles will be notified by email when a new abuse report is created. This feature requires a built-in [Strapi email plugin](https://docs.strapi.io/developer-docs/latest/plugins/email.html) configured.
+- `entryLabel` - ordered list of property names per Content Type to generate related entity label. Default set as `*`.
+
+## Additional GQL Configuration
+
+> To be done
 
 ## Public API Comment model
 
 ### Generic (non Strapi User)
-```
+```json
 {
     "id": 1,
     "content": "My comment content",
     "blocked": null,
     "blockedThread": true,
     "blockReason": null,
-    "points": 1,
     "authorUser": null,
     "authorId": "207ccfdc-94ba-45eb-979c-790f6f49c392",
     "authorName": "Joe Doe",
     "authorEmail": "jdoe@sample.com",
     "authorAvatar": null,
-    "created_at": "2020-07-14T20:13:01.649Z",
-    "updated_at": "2020-07-14T20:13:01.670Z"
+    "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
 }
 ```
 ### Strapi User
-```
+```json
 {
     "id": 1,
     "content": "My comment content",
     "blocked": true,
     "blockedThread": null,
     "blockReason": null,
-    "points": null,
     "authorUser": {
         "id": 1,
         "username": "Sample User",
@@ -154,8 +137,10 @@ To setup amend default plugin configuration we recommend to put following snippe
     "authorName": null,
     "authorEmail": null,
     "authorAvatar": null,
-    "created_at": "2020-07-14T20:13:01.649Z",
-    "updated_at": "2020-07-14T20:13:01.670Z"
+    "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
 }
 
 ```
@@ -164,11 +149,11 @@ To setup amend default plugin configuration we recommend to put following snippe
 
 ### Get Comments
 
-`GET <host>/comments/<content-type>:<id>`
+`GET <host>/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 `Article` 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/article:1`
+**Example URL**: `https://localhost:1337/comments/api::page.page:1`
 
 **Example response body**
 
@@ -190,11 +175,11 @@ Return a hierarchical tree structure of comments for specified instance of Conte
 
 ### Get Comments (flat structure)
 
-`GET <host>/comments/<content-type>:<id>/flat`
+`GET <host>/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 `Article` with `ID: 1`
+Return a flat structure of comments for specified instance of Content Type like for example `Page` with `ID: 1`
 
-**Example URL**: `https://localhost:1337/comments/article:1/flat`
+**Example URL**: `https://localhost:1337/comments/api::page.page:1/flat`
 
 **Example response body**
 
@@ -216,27 +201,26 @@ Return a flat structure of comments for specified instance of Content Type like
 
 ### Post a Comment
 
-`POST <host>/comments/<content-type>:<id>`
+`POST <host>/comments/api::<collection name>.<content type name>:<entity id>`
 
-Posts a Comment related to specified instance of Content Type like for example `Article` with `ID: 1`
+Posts a Comment related to specified instance of Content Type like for example `Page` with `ID: 1`
 
-**Example URL**: `https://localhost:1337/comments/article:1`
+**Example URL**: `https://localhost:1337/comments/api::page.page:1`
 
 **Example request body**
 
 *Generic (non Strapi User)*
 ```
 {
-	"authorId": "<any ID like value>",
-	"authorName": "Joe Doe",
-	"authorEmail": "jdoe@sample.com",
+    "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)
-	"related": [{
-		"refId": 1,
-		"ref": "article",
-		"field": "comments"
-	}] 
+	"related": "api::page.page:1"
 }
 ```
 
@@ -246,11 +230,7 @@ Posts a Comment related to specified instance of Content Type like for example `
 	"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)
-	"related": [{
-		"refId": 1,
-		"ref": "article",
-		"field": "comments"
-	}] 
+	"related": "api::page.page:1"
 }
 ```
 
@@ -268,20 +248,20 @@ Posts a Comment related to specified instance of Content Type like for example `
 
 ### Update Comment
 
-`PUT <host>/comments/<content-type>:<id>/comment/<commentId>`
+`PUT <host>/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 `Article` with `ID: 1`
+Updates a specified Comment content based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1`
 
-**Example URL**: `https://localhost:1337/comments/article:1/comment/2`
+**Example URL**: `https://localhost:1337/comments/api::page.page:1/comment/2`
 
 **Example request body**
 
 *Generic (non Strapi User)*
 ```
 {
-	"authorId": "<any ID like value>",
-	"authorName": "Joe Doe",
-	"authorEmail": "jdoe@sample.com",
+    "author": {
+        "id": "<any ID like value>"
+    },
 	"content": "My sample response"
 }
 ```
@@ -309,11 +289,11 @@ Updates a specified Comment content based on it `commentId` and related to speci
 
 ### Delete Comment
 
-`DELETE <host>/comments/<content-type>:<id>/<commentId>?authorId=<authorId>`
+`DELETE <host>/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 `Article` with `ID: 1`.
+Deletes a specified Comment based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1`.
 
-**Example URL**: `https://localhost:1337/comments/article:1/1?authorId=1`
+**Example URL**: `https://localhost:1337/comments/api::page.page:1/comment/1?authorId=1`
 
 **Example response body**
 
@@ -327,33 +307,14 @@ Deletes a specified Comment based on it `commentId` and related to specified ins
 - `200` - Successful with blank Response.
 - `409` - Conflict. Occurs when trying to delete a non existing comment.
 
-### Like Comment
-
-`PATCH <host>/comments/<content-type>:<id>/comment/<commentId>/like`
-
-Likes a specified Comment based on it `commentId` and related to specified instance of Content Type like for example `Article` with `ID: 1`.
-
-**Example URL**: `https://localhost:1337/comments/article:1/comment/2/like`
-
-**Example response body**
-
-```
-{
-    -- Comment Model fields ---
-}
-```
-
-**Possible response codes**
-- `200` - Successful. Response with liked Comment Model.
-- `409` - Conflict. Occurs when trying to like a non existing comment.
 
 ### Report abuse in the Comment
 
-`POST <host>/comments/<content-type>:<id>/comment/<commentId>/report-abuse`
+`POST <host>/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 `Article` with `ID: 1` and requests moderator attention.
+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.
 
-**Example URL**: `https://localhost:1337/comments/article:1/comment/2/report-abuse`
+**Example URL**: `https://localhost:1337/comments/api::page.page:1/comment/2/report-abuse`
 
 **Example request body**
 
@@ -390,10 +351,10 @@ Feel free to fork and make a Pull Request to this plugin project. All the input
 
 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:
 
-- [Slack](http://slack.strapi.io) We're present on official Strapi slack workspace. Look for @cyp3r and DM.
+- [Discord](https://discord.strapi.io/) We're present on official Strapi Discord workspace. Look for @cyp3r 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/strapi-plugin-comments/issues) (Bug reports, Contributions, Questions and Discussions)
+- [GitHub](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/issues) (Bug reports, Contributions, Questions and Discussions)
 
 ## License
 
-[MIT License](LICENSE.md) Copyright (c) 2020 [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).
+[MIT License](LICENSE.md) Copyright (c) [VirtusLab Sp. z o.o.](https://virtuslab.com/) &amp; [Strapi Solutions](https://strapi.io/).

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

@@ -0,0 +1,56 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+ import React from 'react';
+ import PropTypes from 'prop-types';
+ import { Button } from '@strapi/design-system/Button';
+ import { Dialog, DialogBody, DialogFooter } from '@strapi/design-system/Dialog';
+ import { Flex } from '@strapi/design-system/Flex';
+ import { Stack } from '@strapi/design-system/Stack';
+ import { Typography } from '@strapi/design-system/Typography';
+ import { ExclamationMarkCircle, Check } from '@strapi/icons';
+import { getMessage } from '../../utils';
+
+const ConfirmationDialog = ({ 
+    isVisible = false,
+    isActionAsync = false,
+    children, 
+    onConfirm, 
+    onCancel, 
+    header, 
+    labelCancel, 
+    labelConfirm, 
+    iconConfirm 
+}) => (
+    <Dialog onClose={onCancel} title={header || getMessage('compontents.confirmation.dialog.header', 'Confirmation')} isOpen={isVisible}>
+        <DialogBody icon={<ExclamationMarkCircle />}>
+        <Stack size={2}>
+            <Flex justifyContent="center">
+                <Typography id="dialog-confirm-description">{children || getMessage('compontents.confirmation.dialog.description') }</Typography>
+            </Flex>
+        </Stack>
+        </DialogBody>
+        <DialogFooter startAction={<Button onClick={onCancel} variant="tertiary" disabled={isActionAsync}>
+            { labelCancel || getMessage('compontents.confirmation.dialog.button.cancel', 'Cancel') }
+            </Button>} endAction={<Button onClick={onConfirm} variant="danger-light" startIcon={iconConfirm || <Check />} disabled={isActionAsync}>
+            { labelConfirm || getMessage('compontents.confirmation.dialog.button.confirm', 'Confirm') }
+            </Button>} />
+    </Dialog>
+  );
+
+  ConfirmationDialog.propTypes = {
+    isVisible: PropTypes.bool,
+    isActionAsync: PropTypes.bool,
+    children: PropTypes.array.isRequired,
+    header: PropTypes.string,
+    labelCancel: PropTypes.string,
+    labelConfirm: PropTypes.string,
+    iconConfirm: PropTypes.object,
+    onConfirm: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+};
+
+  export default ConfirmationDialog;

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

@@ -0,0 +1,33 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isNil } from 'lodash';
+import { Box } from '@strapi/design-system/Box';
+import { Status } from '@strapi/design-system/Status';
+import { Typography } from '@strapi/design-system/Typography';
+import { getMessage } from '../../utils';
+
+const DiscussionStatus = ({ blocked, blockedThread }) => {
+    let variant = 'success';
+
+    return (
+        <Box styles={{ marginBottom: 10 }}>
+            <Status variant={variant}>
+                <Typography>
+                    { getMessage('page.details.panel.status', 'Discussion is') } <Typography fontWeight="bold">{ getMessage('page.details.panel.open', 'OPEN') } </Typography>
+                </Typography>
+            </Status>
+        </Box>);
+};
+
+DiscussionStatus.propTypes = {
+
+};
+
+export default DiscussionStatus;
+ 

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

@@ -0,0 +1,59 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+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';
+import { ArrowUp } from '@strapi/icons';
+import DiscussionThreadItem from '../DiscussionThreadItem';
+import { getMessage, getUrl } from '../../utils';
+import LoadingIndicatorOverlay from '../LoadingIndicatorOverlay';
+import { LoadingIndicatorContainer } from '../LoadingIndicatorOverlay/styles';
+
+const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
+    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">
+                { 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} isThreadAuthor root pinned />) }
+            { level.map(item => {
+                const isSelected = selected.id === item.id;
+                const isThreadAuthor = !isNil(selected?.threadOf?.authorId) && (selected?.threadOf?.authorId === item.authorId);
+                return (<DiscussionThreadItem 
+                    {...item} 
+                    root={isNil(rootThread)}
+                    blockedThread={rootThread?.blockedThread || item.blockedThread}
+                    isSelected={isSelected} 
+                    isThreadAuthor={isThreadAuthor} 
+                />);
+            })}
+        </Flex>
+    </LoadingIndicatorContainer>);
+};
+
+DiscussionThread.propTypes = {
+    level: PropTypes.array.isRequired,
+    selected: PropTypes.object.isRequired,
+    isReloading: PropTypes.bool,
+};
+
+export default DiscussionThread;

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

@@ -0,0 +1,87 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { first } from 'lodash';
+import { Avatar, Initials } from '@strapi/design-system/Avatar';
+import { Box } from '@strapi/design-system/Box';
+import { Divider } from '@strapi/design-system/Divider';
+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 DiscussionThreadItemActions from '../DiscussionThreadItemActions';
+import { getMessage, getUrl } from '../../utils';
+import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
+
+const DiscussionThreadItem = (item) => {
+    const { id, isSelected, isThreadAuthor, content, root, preview, pinned, blocked, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+
+    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 = authorAvatar || authorUser?.avatar;
+    const name = authorName || `${authorUser?.firstName} ${authorUser?.lastName}`;
+    const isBlocked = blocked || blockedThread;
+
+    const renderInitials = value => value.split(' ').map(_ => first(_)).join('').toUpperCase();
+    
+    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 { ...item } root={root || pinned} />) }
+                    </DiscussionThreadItemBoxContent>
+                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
+                </Flex>
+                <Divider background={dividerColor} />
+                <DiscussionThreadItemMeta { ...item } />
+            </DiscussionThreadItemBox>
+        </DiscussionThreadItemContent>
+
+        { (gotThread && !(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>);
+};
+
+DiscussionThreadItem.propTypes = {
+    content: PropTypes.string.isRequired,
+};
+
+export default DiscussionThreadItem;
+