strapi-plugin-comments 2.1.0-beta.1 → 2.1.2

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test:unit

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2021 VirtusLab Sp. z o.o. & Strapi Solutions.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -32,6 +32,19 @@
 
 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 much more.
 
+### Table of Contents
+
+1. [✨ Features](#-features)
+2. [⏳ Installation](#-installation)
+3. [🖐 Requirements](#-requirements)
+4. [🔧 Configuration](#-configuration)
+   - [Settings page](#in-v203-and-newer)
+   - [Plugin file](#in-v202-and-older--default-configuration-state-for-v203-and-newer)
+5. [🕸️ Public API - REST](#%EF%B8%8F-public-rest-api-specification)
+6. [🕸️ Public API - GraphQL](#%EF%B8%8F-public-graphql-specification)
+7. [🤝 Contributing](#-contributing)
+8. [👨‍💻 Community support](#-community-support)
+
 ## ✨ Features
 
 - **Comments Public REST + GraphQL API:** Elegant, entirely customizable and a fully extensible admin panel.
@@ -48,13 +61,23 @@ A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provid
 
 ## ⏳ Installation
 
+### Via Strapi Markerplace
+
+As a ✅ **verified** plugin by Strapi team we're available on the [**Strapi Marketplace**](https://market.strapi.io/plugins/strapi-plugin-comments) as well as **In-App Marketplace** where you can follow the installation instructions.
+
+<div style="margin: 20px 0" align="center">
+  <img style="width: 100%; height: auto;" src="public/assets/marketplace.png" alt="Strapi In-App Marketplace" />
+</div>
+
+### Via command line
+
 (Use **yarn** to install this plugin within your Strapi project (recommended). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/).)
 
 ```bash
 yarn add strapi-plugin-comments@latest
 ```
 
-After successful installation you've to build a fresh package that includes plugin UI. To archive that simply use:
+After successful installation you've to re-build your Strapi instance. To archive that simply use:
 
 ```bash
 yarn build
@@ -69,7 +92,9 @@ yarn develop --watch-admin
 
 The **Comments** plugin should appear in the **Plugins** section of Strapi sidebar after you run app again.
 
-Enjoy 🎉
+As a next step you must configure your the plugin by the way you want to. See [**Configuration**](#🔧-configuration) section.
+
+All done. Enjoy 🎉
 
 ### Working in development mode
 
@@ -107,7 +132,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.1.2 (recently tested)
+- Strapi v4.1.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).
@@ -116,14 +141,22 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 ## 🔧 Configuration
 
-### In `v2.0.3` and newest
+To start your journey with **Comments plugin** you must first setup it using the dedicated Settings page (`v2.0.3` and newer) or for any version, put your configuration in `config/plugins.js`. Anyway we're recommending the click-through option where your configuration is going to be properly validated.
+
+### In `v2.0.3` and newer
 
 Version `2.0.3` introduce the intuitive **Settings** page which you can easly access via `Strapi Settings -> Section: Comments Plugin -> Configuration`. On dedicated page you will be able to setup all crucial properties which drives the plugin and customize each individual collection for which **Comments plugin** should be enabled.
 
+On the dedicated page, you will be able to set up all crucial properties which drive the plugin and customize each individual collection for which **Comments plugin** should be enabled.
+
+<div style="margin: 20px 0" align="center">
+  <img style="width: 100%; height: auto;" src="public/assets/configuration.png" alt="Plugin configuration" />
+</div>
+
 > _Note_
 > Default configuration for your plugin is fetched from `config/plugins.js` or directly from the plugin itself. If you would like to customize the default state to which you might revert, please follow the next section.
 
-### In `v2.0.2` and older + default configuration state for `v2.0.3` and newest
+### In `v2.0.2` and older + default configuration state for `v2.0.3` and newer
 
 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.
 
@@ -154,6 +187,7 @@ module.exports = ({ env }) => ({
 
 ### Properties
 
+- `enabledCollections` - list of Collection and Single Types for which plugin should be enabled in format like `'api::<collection name>.<content type name>'`. By default it's empty and none comments are not enabled for any of type in Strapi.
 - `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.
 - `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.
@@ -276,6 +310,7 @@ Return a hierarchical tree structure of comments for specified instance of Conte
 
 #### Strapi REST API properties support:
 
+- [field selection](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html#field-selection)
 - [sorting](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/sort-pagination.html#sorting)
 
 ### Get Comments (flat structure)
@@ -317,6 +352,7 @@ Return a flat structure of comments for specified instance of Content Type like
 #### Strapi REST API properties support:
 
 - [filtering](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/filtering-locale-publication.html#filtering)
+- [field selection](https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest/populating-fields.html#field-selection)
 - [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)
 

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

@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+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/Avatar/index.tsx

@@ -0,0 +1,31 @@
+/**
+ *
+ * Avatar
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { isObject } from "lodash";
+import { Avatar, Initials } from "@strapi/design-system/Avatar";
+import { renderInitials } from "../../utils";
+
+const UserAvatar = ({ avatar, name }) => {
+  if (avatar) {
+    let image = avatar;
+    if (isObject(avatar)) {
+      image = avatar?.formats?.thumbnail.url || avatar.url;
+    }
+    return <Avatar src={image} alt={name} />;
+  }
+  return <Initials>{renderInitials(name)}</Initials>;
+};
+
+UserAvatar.propTypes = {
+  avatar: PropTypes.oneOfType(PropTypes.string, PropTypes.object).isRequired,
+  name: PropTypes.string,
+};
+
+export default UserAvatar;

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

@@ -0,0 +1,88 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+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.tsx

@@ -0,0 +1,36 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+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.tsx

@@ -0,0 +1,97 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { isNil } from "lodash";
+import { Box } from "@strapi/design-system/Box";
+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 = {},
+  allowedActions,
+  isReloading,
+}) => {
+  const rootThread = selected?.threadOf;
+  return (
+    <LoadingIndicatorContainer as={Box} padding={4}>
+      {isReloading && <LoadingIndicatorOverlay />}
+      <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>
+      <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?.author?.id) &&
+            selected?.threadOf?.author?.id === item?.author?.id;
+          return (
+            <DiscussionThreadItem
+              key={`comment-${item.id}`}
+              {...item}
+              allowedActions={allowedActions}
+              root={isNil(rootThread)}
+              blockedThread={rootThread?.blockedThread || item.blockedThread}
+              isSelected={isSelected}
+              isThreadAuthor={isThreadAuthor}
+            />
+          );
+        })}
+      </Flex>
+    </LoadingIndicatorContainer>
+  );
+};
+
+DiscussionThread.propTypes = {
+  level: PropTypes.array.isRequired,
+  selected: PropTypes.object.isRequired,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+  isReloading: PropTypes.bool,
+};
+
+export default DiscussionThread;

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

@@ -0,0 +1,71 @@
+/**
+ *
+ * Discussion thread - Item
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "@strapi/design-system/Box";
+import { Flex } from "@strapi/design-system/Flex";
+import { Typography } from "@strapi/design-system/Typography";
+import DiscussionThreadItemFooter from "../DiscussionThreadItemFooter";
+import DiscussionThreadItemActions from "../DiscussionThreadItemActions";
+import {
+  DiscussionThreadItemContainer,
+  DiscussionThreadFullsize,
+  DiscussionThreadItemContent,
+} from "./styles";
+
+const DiscussionThreadItem = (props) => {
+  const { as = "li", isSelected, content, root, preview, pinned } = props;
+
+  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 = {
+  content: PropTypes.string.isRequired,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+};
+
+export default DiscussionThreadItem;

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

@@ -0,0 +1,15 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { Box } from "@strapi/design-system/Box";
+
+export const DiscussionThreadFullsize = styled(Box)`
+  width: 100%;
+`;
+export const DiscussionThreadItemContent = styled(DiscussionThreadFullsize)`
+  align-items: flex-start;
+`;
+
+export const DiscussionThreadItemContainer = styled(DiscussionThreadFullsize)`
+  align-items: flex-start;
+`;