strapi-plugin-comments 2.1.8 → 2.2.0

package/README.md

@@ -42,13 +42,15 @@ A plugin for [Strapi Headless CMS](https://github.com/strapi/strapi) that provid
    - [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)
+7. [⚗️ Custom fields](#-custom-fields)
+8. [🤝 Contributing](#-contributing)
+9. [👨‍💻 Community support](#-community-support)
 
 ## ✨ Features
 
 - **Comments Public REST + GraphQL API:** Elegant, entirely customizable and a fully extensible admin panel.
 - **Strapi & generic users:** Support for built-in & also generic non-Strapi users that might be the comments authors.
+- **Strapi Custom Fields support:** Improve an experience of your Content Types by using [dedicated set of custom fields](https://docs-next.strapi.io/user-docs/latest/plugins/introduction-to-plugins.html#custom-fields) for each of them and automate client side processing of Comments.
 - **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 & hierarchical tree view of threads.
 - **Automated Bad Words filtering:** By default end users are not allowed to post abusing comments where bad words have been used.
@@ -132,7 +134,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.1.12 (recently tested)
+- Strapi v4.4.3 (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).
@@ -828,6 +830,12 @@ _Available reason enums:_ `BAD_WORDS`, `OTHER`, `DISCRIMINATION` (want more? See
 
 Live example of plugin usage can be found in the [VirtusLab Strapi Examples](https://github.com/VirtusLab/strapi-examples/tree/master/strapi-v4-plugin-comments) repository.
 
+## ⚗️ Custom fields
+
+For developers who upgrades their Strapi instance custom field from Comments plugin is available. Custom field can be picked from content types' edit page or added in definition file.
+
+Read more about this feature in [Strapi's docs](https://docs-next.strapi.io/user-docs/latest/plugins/introduction-to-plugins.html#custom-fields).
+
 ## 🤝 Contributing
 
 <div>

package/admin/src/components/Avatar/index.d.ts

@@ -1,11 +1,12 @@
+import PropTypes from "prop-types";
 declare const UserAvatar: {
     ({ avatar, name }: {
         avatar: any;
         name: any;
     }): any;
     propTypes: {
-        avatar: any;
-        name: any;
+        avatar: PropTypes.Validator<any>;
+        name: PropTypes.Requireable<string>;
     };
 };
 export default UserAvatar;

package/admin/src/components/CommentReviewModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare const CommentReviewModal: ({ children, endActions, isVisible, item, onClose, startActions, }: {
+    children: any;
+    endActions: any;
+    isVisible?: boolean | undefined;
+    item: any;
+    onClose: any;
+    startActions: any;
+}) => false | JSX.Element;
+export default CommentReviewModal;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const ModalLayout_1 = require("@strapi/design-system/ModalLayout");
+const Typography_1 = require("@strapi/design-system/Typography");
+const utils_1 = require("../../utils");
+const DiscussionThreadItem_1 = __importDefault(require("../DiscussionThreadItem"));
+const CommentReviewModal = ({ children, endActions, isVisible = false, item, onClose, startActions, }) => isVisible && (react_1.default.createElement(ModalLayout_1.ModalLayout, { onClose: onClose },
+    react_1.default.createElement(ModalLayout_1.ModalHeader, null,
+        react_1.default.createElement(Typography_1.Typography, { fontWeight: "bold", textColor: "neutral800", as: "h2", id: "title" }, (0, utils_1.getMessage)("page.details.panel.discussion.warnings.comments.header", "Open reports"))),
+    react_1.default.createElement(ModalLayout_1.ModalBody, null,
+        react_1.default.createElement(DiscussionThreadItem_1.default, { ...item.related, as: "div", isSelected: true, preview: true, root: true }),
+        children),
+    react_1.default.createElement(ModalLayout_1.ModalFooter, { variant: "tertiary", startActions: startActions, endActions: endActions })));
+exports.default = CommentReviewModal;
+//# sourceMappingURL=index.js.map

package/admin/src/components/ConfirmationDialog/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const ConfirmationDialog: {
     ({ isVisible, isActionAsync, children, onConfirm, onCancel, header, labelCancel, labelConfirm, iconConfirm, }: {
         isVisible?: boolean | undefined;
@@ -9,17 +11,17 @@ declare const ConfirmationDialog: {
         labelCancel: any;
         labelConfirm: any;
         iconConfirm: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        isVisible: any;
-        isActionAsync: any;
-        children: any;
-        header: any;
-        labelCancel: any;
-        labelConfirm: any;
-        iconConfirm: any;
-        onConfirm: any;
-        onCancel: any;
+        isVisible: PropTypes.Requireable<boolean>;
+        isActionAsync: PropTypes.Requireable<boolean>;
+        children: PropTypes.Validator<any[]>;
+        header: PropTypes.Requireable<string>;
+        labelCancel: PropTypes.Requireable<string>;
+        labelConfirm: PropTypes.Requireable<string>;
+        iconConfirm: PropTypes.Requireable<object>;
+        onConfirm: PropTypes.Validator<(...args: any[]) => any>;
+        onCancel: PropTypes.Validator<(...args: any[]) => any>;
     };
 };
 export default ConfirmationDialog;

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

@@ -10,17 +10,17 @@ const Dialog_1 = require("@strapi/design-system/Dialog");
 const Flex_1 = require("@strapi/design-system/Flex");
 const Stack_1 = require("@strapi/design-system/Stack");
 const Typography_1 = require("@strapi/design-system/Typography");
-const icons_1 = require("@strapi/icons");
+const icons_1 = require("../icons");
 const utils_1 = require("../../utils");
 const ConfirmationDialog = ({ isVisible = false, isActionAsync = false, children, onConfirm, onCancel, header, labelCancel, labelConfirm, iconConfirm, }) => (react_1.default.createElement(Dialog_1.Dialog, { onClose: onCancel, title: header ||
         (0, utils_1.getMessage)("compontents.confirmation.dialog.header", "Confirmation"), isOpen: isVisible },
-    react_1.default.createElement(Dialog_1.DialogBody, { icon: react_1.default.createElement(icons_1.ExclamationMarkCircle, null) },
+    react_1.default.createElement(Dialog_1.DialogBody, { icon: icons_1.exclamationMarkCircle },
         react_1.default.createElement(Stack_1.Stack, { size: 2 },
             react_1.default.createElement(Flex_1.Flex, { justifyContent: "center" },
                 react_1.default.createElement(Typography_1.Typography, { id: "dialog-confirm-description" }, children ||
                     (0, utils_1.getMessage)("compontents.confirmation.dialog.description"))))),
     react_1.default.createElement(Dialog_1.DialogFooter, { startAction: react_1.default.createElement(Button_1.Button, { onClick: onCancel, variant: "tertiary", disabled: isActionAsync }, labelCancel ||
-            (0, utils_1.getMessage)("compontents.confirmation.dialog.button.cancel", "Cancel")), endAction: react_1.default.createElement(Button_1.Button, { onClick: onConfirm, variant: "danger-light", startIcon: iconConfirm || react_1.default.createElement(icons_1.Check, null), disabled: isActionAsync }, labelConfirm ||
+            (0, utils_1.getMessage)("compontents.confirmation.dialog.button.cancel", "Cancel")), endAction: react_1.default.createElement(Button_1.Button, { onClick: onConfirm, variant: "danger-light", startIcon: iconConfirm || icons_1.check, disabled: isActionAsync }, labelConfirm ||
             (0, utils_1.getMessage)("compontents.confirmation.dialog.button.confirm", "Confirm")) })));
 ConfirmationDialog.propTypes = {
     isVisible: prop_types_1.default.bool,

package/admin/src/components/DiscussionStatus/index.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 declare const DiscussionStatus: {
     ({ blocked, blockedThread }: {
         blocked: any;
         blockedThread: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {};
 };
 export default DiscussionStatus;

package/admin/src/components/DiscussionThread/index.d.ts

@@ -1,15 +1,21 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DiscussionThread: {
     ({ level, selected, allowedActions, isReloading, }: {
         level?: never[] | undefined;
         selected?: {} | undefined;
         allowedActions: any;
         isReloading: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        level: any;
-        selected: any;
-        allowedActions: any;
-        isReloading: any;
+        level: PropTypes.Validator<any[]>;
+        selected: PropTypes.Validator<object>;
+        allowedActions: PropTypes.Requireable<PropTypes.InferProps<{
+            canModerate: PropTypes.Requireable<boolean>;
+            canAccessReports: PropTypes.Requireable<boolean>;
+            canReviewReports: PropTypes.Requireable<boolean>;
+        }>>;
+        isReloading: PropTypes.Requireable<boolean>;
     };
 };
 export default DiscussionThread;

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

@@ -10,7 +10,7 @@ const Box_1 = require("@strapi/design-system/Box");
 const Flex_1 = require("@strapi/design-system/Flex");
 const Link_1 = require("@strapi/design-system/Link");
 const Typography_1 = require("@strapi/design-system/Typography");
-const icons_1 = require("@strapi/icons");
+const icons_1 = require("../icons");
 const DiscussionThreadItem_1 = __importDefault(require("../DiscussionThreadItem"));
 const utils_1 = require("../../utils");
 const LoadingIndicatorOverlay_1 = __importDefault(require("../LoadingIndicatorOverlay"));
@@ -21,8 +21,8 @@ const DiscussionThread = ({ level = [], selected = {}, allowedActions, isReloadi
         isReloading && react_1.default.createElement(LoadingIndicatorOverlay_1.default, null),
         react_1.default.createElement(Flex_1.Flex, { as: Box_1.Box, direction: "row", justifyContent: "space-between", marginBottom: 2 },
             react_1.default.createElement(Typography_1.Typography, { variant: "delta", textColor: "neutral800", id: "discussion-thread" }, (0, utils_1.getMessage)("page.details.panel.discussion", "Discussion")),
-            rootThread && (react_1.default.createElement(Link_1.Link, { to: (0, utils_1.getUrl)(`discover/${rootThread.id}`), startIcon: react_1.default.createElement(icons_1.ArrowUp, null) }, (0, utils_1.getMessage)("page.details.panel.discussion.nav.back")))),
-        react_1.default.createElement(Flex_1.Flex, { as: "ul", direction: "column", alignItems: "flex-start" },
+            rootThread && (react_1.default.createElement(Link_1.Link, { to: (0, utils_1.getUrl)(`discover/${rootThread.id}`), startIcon: icons_1.arrowUp }, (0, utils_1.getMessage)("page.details.panel.discussion.nav.back")))),
+        react_1.default.createElement(Flex_1.Flex, { as: "ul", direction: "column", alignItems: "flex-start", marginBottom: 4 },
             rootThread && (react_1.default.createElement(DiscussionThreadItem_1.default, { ...rootThread, allowedActions: allowedActions, isThreadAuthor: true, root: true, pinned: true })),
             level.map((item) => {
                 const isSelected = selected.id === item.id;

package/admin/src/components/DiscussionThreadItem/index.d.ts

@@ -1,9 +1,4 @@
-declare const DiscussionThreadItem: {
-    (props: any): any;
-    propTypes: {
-        content: any;
-        allowedActions: any;
-    };
-};
+/// <reference types="react" />
+declare const DiscussionThreadItem: (props: any) => JSX.Element;
 export default DiscussionThreadItem;
 //# sourceMappingURL=index.d.ts.map

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

@@ -3,16 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const Box_1 = require("@strapi/design-system/Box");
 const Flex_1 = require("@strapi/design-system/Flex");
 const Typography_1 = require("@strapi/design-system/Typography");
-const DiscussionThreadItemFooter_1 = __importDefault(require("../DiscussionThreadItemFooter"));
+const react_1 = __importDefault(require("react"));
 const DiscussionThreadItemActions_1 = __importDefault(require("../DiscussionThreadItemActions"));
+const DiscussionThreadItemFooter_1 = __importDefault(require("../DiscussionThreadItemFooter"));
 const styles_1 = require("./styles");
 const DiscussionThreadItem = (props) => {
-    const { as = "li", isSelected, content, root, preview, pinned } = props;
+    const { as = "li", authorAvatar, authorName, content, isSelected, pinned, preview, root, } = props;
     return (react_1.default.createElement(styles_1.DiscussionThreadFullsize, { as: as, marginBottom: preview ? 4 : 0 },
         react_1.default.createElement(styles_1.DiscussionThreadItemContainer, { as: Flex_1.Flex, direction: "column", alignItems: "flex-start", hasRadius: true, background: isSelected ? "neutral100" : null, paddingLeft: 2, paddingRight: 2, paddingTop: 4, paddingBottom: 4 },
             react_1.default.createElement(styles_1.DiscussionThreadItemContent, { as: Flex_1.Flex, paddingBottom: 2, direction: "row" },
@@ -21,13 +20,5 @@ const DiscussionThreadItem = (props) => {
                 !preview && (react_1.default.createElement(DiscussionThreadItemActions_1.default, { ...props, root: root || pinned, preview: preview }))),
             react_1.default.createElement(DiscussionThreadItemFooter_1.default, { ...props }))));
 };
-DiscussionThreadItem.propTypes = {
-    content: prop_types_1.default.string.isRequired,
-    allowedActions: prop_types_1.default.shape({
-        canModerate: prop_types_1.default.bool,
-        canAccessReports: prop_types_1.default.bool,
-        canReviewReports: prop_types_1.default.bool,
-    }),
-};
 exports.default = DiscussionThreadItem;
 //# sourceMappingURL=index.js.map

package/admin/src/components/DiscussionThreadItemActions/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DiscussionThreadItemActions: {
     ({ allowedActions: { canModerate, canAccessReports, canReviewReports }, ...item }: {
         [x: string]: any;
@@ -6,13 +8,15 @@ declare const DiscussionThreadItemActions: {
             canAccessReports: any;
             canReviewReports: any;
         };
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        isRoot: any;
-        blocked: any;
-        blockedThread: any;
-        approvalStatus: any;
-        allowedActions: any;
+        isRoot: PropTypes.Requireable<boolean>;
+        blocked: PropTypes.Validator<boolean>;
+        blockedThread: PropTypes.Validator<boolean>;
+        approvalStatus: PropTypes.Requireable<any>;
+        allowedActions: PropTypes.Requireable<PropTypes.InferProps<{
+            canModerate: PropTypes.Requireable<boolean>;
+        }>>;
     };
 };
 export default DiscussionThreadItemActions;

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

@@ -33,8 +33,8 @@ const react_router_dom_1 = require("react-router-dom");
 const lodash_1 = require("lodash");
 const Flex_1 = require("@strapi/design-system/Flex");
 const IconButton_1 = require("@strapi/design-system/IconButton");
+const icons_1 = require("../../components/icons");
 const helper_plugin_1 = require("@strapi/helper-plugin");
-const icons_1 = require("@strapi/icons");
 const utils_1 = require("../../utils");
 const styles_1 = require("./styles");
 const ConfirmationDialog_1 = __importDefault(require("../ConfirmationDialog"));
@@ -46,47 +46,45 @@ const StatusBadge_1 = __importDefault(require("../StatusBadge"));
 const styles_2 = require("../IconButton/styles");
 const styles_3 = require("../ActionButton/styles");
 const DiscussionThreadItemReviewAction_1 = __importDefault(require("../DiscussionThreadItemReviewAction"));
+const ModeratorResponseModal_1 = __importDefault(require("../ModeratorResponseModal/ModeratorResponseModal"));
 const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessReports, canReviewReports }, ...item }) => {
-    const { id, blocked, removed, blockedThread, gotThread, threadItemsCount, threadFirstItemId, pinned, preview, reports = [], approvalStatus, } = item;
+    const { id, blocked, removed, content, blockedThread, gotThread, threadFirstItemId, pinned, preview, reports = [], approvalStatus, author } = item;
+    const user = helper_plugin_1.auth.get('userInfo');
     const [blockConfirmationVisible, setBlockConfirmationVisible] = (0, react_1.useState)(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = (0, react_1.useState)(false);
     const [blockButtonsDisabled, setBlockButtonsDisabled] = (0, react_1.useState)(blockedThread);
+    const [startThreadVisible, setStartThreadVisible] = (0, react_1.useState)(false);
+    const [updateCommentVisible, setUpdateCommentVisible] = (0, react_1.useState)(false);
     const { push } = (0, react_router_dom_1.useHistory)();
     const toggleNotification = (0, helper_plugin_1.useNotification)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
-    const onSuccess = (message, stateAction = () => { }) => async () => {
-        await queryClient.invalidateQueries("get-details-data");
-        toggleNotification({
-            type: "success",
-            message: `${pluginId_1.pluginId}.${message}`,
-        });
-        stateAction(false);
+    const onSuccess = (message, sideEffectCallback) => () => {
+        queryClient.invalidateQueries("get-details-data");
+        if (message) {
+            toggleNotification({
+                type: "success",
+                message: `${pluginId_1.pluginId}.${message}`,
+            });
+        }
+        sideEffectCallback();
         unlockApp();
     };
     const onError = (err) => {
         (0, utils_1.handleAPIError)(err, toggleNotification);
     };
-    const blockItemMutation = (0, react_query_1.useMutation)(api_1.blockItem, {
-        onSuccess: onSuccess("page.details.actions.comment.block.confirmation.success", setBlockConfirmationVisible),
-        onError,
-        refetchActive: false,
-    });
-    const unblockItemMutation = (0, react_query_1.useMutation)(api_1.unblockItem, {
-        onSuccess: onSuccess("page.details.actions.comment.unblock.confirmation.success"),
-        onError,
-        refetchActive: false,
-    });
-    const blockItemThreadMutation = (0, react_query_1.useMutation)(api_1.blockItemThread, {
-        onSuccess: onSuccess("page.details.actions.thread.block.confirmation.success", setBlockThreadConfirmationVisible),
-        onError,
-        refetchActive: false,
-    });
-    const unblockItemThreadMutation = (0, react_query_1.useMutation)(api_1.unblockItemThread, {
-        onSuccess: onSuccess("page.details.actions.thread.unblock.confirmation.success"),
-        onError,
-        refetchActive: false,
-    });
+    const mutationConfig = (message = "", sideEffectCallback = lodash_1.noop) => {
+        return {
+            onSuccess: onSuccess(message, sideEffectCallback),
+            onError
+        };
+    };
+    const resolveAllAbuseReportsForThreadMutation = (0, react_query_1.useMutation)(api_1.resolveAllAbuseReportsForThread, mutationConfig());
+    const blockItemMutation = (0, react_query_1.useMutation)(api_1.blockItem, mutationConfig("page.details.actions.comment.block.confirmation.success", setBlockConfirmationVisible));
+    const unblockItemMutation = (0, react_query_1.useMutation)(api_1.unblockItem, mutationConfig("page.details.actions.comment.unblock.confirmation.success"));
+    const blockItemThreadMutation = (0, react_query_1.useMutation)(api_1.blockItemThread, mutationConfig("page.details.actions.thread.block.confirmation.success", setBlockThreadConfirmationVisible));
+    const unblockItemThreadMutation = (0, react_query_1.useMutation)(api_1.unblockItemThread, mutationConfig("page.details.actions.thread.unblock.confirmation.success"));
+    const deleteItemMutation = (0, react_query_1.useMutation)(api_1.deleteItem, mutationConfig("page.details.actions.comment.delete.confirmation.success"));
     const gotApprovalFlow = !(0, lodash_1.isNil)(approvalStatus);
     const needsApproval = gotApprovalFlow && approvalStatus === "PENDING";
     const isBlocked = blocked || blockedThread;
@@ -96,6 +94,7 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
     const reviewFlowEnabled = (canAccessReports || canReviewReports) && hasReports;
     const hasActiveThread = gotThread && !(removed || preview || pinned || blockedThread);
     const isStatusBadgeVisible = isBlocked || reviewFlowEnabled;
+    const isAdminAuthor = String(user.id) === author.id;
     const renderStatus = (props) => {
         const status = (0, utils_1.resolveCommentStatus)({ ...props, reviewFlowEnabled });
         const color = (0, utils_1.resolveCommentStatusColor)(status);
@@ -106,8 +105,18 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
             },
         }, status)));
     };
+    const isLoading = unblockItemMutation.isLoading ||
+        blockItemMutation.isLoading ||
+        blockItemThreadMutation.isLoading ||
+        unblockItemThreadMutation.isLoading;
+    const handleResolveAllAbuseReportsForThread = () => {
+        if (canModerate) {
+            lockApp();
+            resolveAllAbuseReportsForThreadMutation.mutate(id);
+        }
+    };
     const handleBlockClick = () => setBlockConfirmationVisible(true);
-    const handleBlockConfirm = async () => {
+    const handleBlockConfirm = () => {
         if (canModerate) {
             lockApp();
             blockItemMutation.mutate(id);
@@ -116,14 +125,20 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
     const handleBlockCancel = () => {
         setBlockConfirmationVisible(false);
     };
-    const handleUnblockClick = async () => {
+    const handleUnblockClick = () => {
         if (canModerate) {
             lockApp();
             unblockItemMutation.mutate(id);
         }
     };
+    const handleDeleteClick = () => {
+        if (canModerate) {
+            lockApp();
+            deleteItemMutation.mutate(id);
+        }
+    };
     const handleBlockThreadClick = () => setBlockThreadConfirmationVisible(true);
-    const handleBlockThreadConfirm = async () => {
+    const handleBlockThreadConfirm = () => {
         if (canModerate) {
             lockApp();
             blockItemThreadMutation.mutate(id);
@@ -132,7 +147,13 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
     const handleBlockThreadCancel = () => {
         setBlockThreadConfirmationVisible(false);
     };
-    const handleUnblockThreadClick = async () => {
+    const toggleStartThreadVisibility = () => {
+        setStartThreadVisible(!startThreadVisible);
+    };
+    const toggleUpdateCommentVisibility = () => {
+        setUpdateCommentVisible(!updateCommentVisible);
+    };
+    const handleUnblockThreadClick = () => {
         if (canModerate) {
             lockApp();
             unblockItemThreadMutation.mutate(id);
@@ -143,40 +164,41 @@ const DiscussionThreadItemActions = ({ allowedActions: { canModerate, canAccessR
             push((0, utils_1.getUrl)(`discover/${threadFirstItemId}`));
         }
     };
-    const handleBlockActionClick = async (mutation, onCallback) => {
-        lockApp();
-        await mutation.mutateAsync(id);
-        onCallback();
-    };
-    const handleBlockButtonsStateChange = (disabled) => setBlockButtonsDisabled(disabled);
+    const handleOnConfirm = (0, react_1.useCallback)(() => {
+        handleBlockThreadConfirm(id);
+        handleResolveAllAbuseReportsForThread(id);
+    }, [handleBlockThreadConfirm, handleResolveAllAbuseReportsForThread]);
     const anyGroupButtonsVisible = needsApproval || reviewFlowEnabled || !blockedThread;
-    const isLoading = unblockItemMutation.isLoading ||
-        blockItemMutation.isLoading ||
-        blockItemThreadMutation.isLoading ||
-        unblockItemThreadMutation.isLoading;
     if (removed || isRejected || !canModerate) {
         return (react_1.default.createElement(styles_1.DiscussionThreadItemActionsWrapper, { as: Flex_1.Flex, direction: "row" }, renderStatus(item)));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(styles_1.DiscussionThreadItemActionsWrapper, { as: Flex_1.Flex, direction: "row" },
             isStatusBadgeVisible && renderStatus(item),
-            !blockedThread && (gotThread || pinned) && (react_1.default.createElement(styles_3.ActionButton, { onClick: handleBlockThreadClick, startIcon: react_1.default.createElement(icons_2.LockIcon, null), loading: blockItemThreadMutation.isLoading, variant: "danger" }, (0, utils_1.getMessage)("page.details.actions.thread.block", "Block thread"))),
-            blockedThread && (gotThread || pinned) && (react_1.default.createElement(styles_3.ActionButton, { onClick: handleUnblockThreadClick, startIcon: react_1.default.createElement(icons_2.UnlockIcon, null), loading: unblockItemThreadMutation.isLoading, variant: "success" }, (0, utils_1.getMessage)("page.details.actions.thread.unblock", "Unblock thread"))),
+            !blockedThread && (gotThread || pinned) && (react_1.default.createElement(styles_3.ActionButton, { onClick: handleBlockThreadClick, startIcon: icons_2.lock, loading: blockItemThreadMutation.isLoading, variant: "danger" }, (0, utils_1.getMessage)("page.details.actions.thread.block", "Block thread"))),
+            blockedThread && (gotThread || pinned) && (react_1.default.createElement(styles_3.ActionButton, { onClick: handleUnblockThreadClick, startIcon: icons_2.unlock, loading: unblockItemThreadMutation.isLoading, variant: "success" }, (0, utils_1.getMessage)("page.details.actions.thread.unblock", "Unblock thread"))),
             anyGroupButtonsVisible && (react_1.default.createElement(styles_2.IconButtonGroupStyled, { isSingle: true, withMargin: true },
-                !blockedThread && !(blocked || needsApproval) && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleBlockClick, loading: blockItemMutation.isLoading, icon: react_1.default.createElement(icons_2.LockIcon, null), label: (0, utils_1.getMessage)("page.details.actions.comment.block", "Block") })),
-                !blockedThread && blocked && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleUnblockClick, loading: unblockItemMutation.isLoading, icon: react_1.default.createElement(icons_2.UnlockIcon, null), label: (0, utils_1.getMessage)("page.details.actions.comment.unblock", "Unblock") })),
+                !blockedThread && !(blocked || needsApproval) && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleBlockClick, loading: blockItemMutation.isLoading, icon: icons_2.lock, label: (0, utils_1.getMessage)("page.details.actions.comment.block", "Block") })),
+                !blockedThread && blocked && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleUnblockClick, loading: unblockItemMutation.isLoading, icon: icons_2.unlock, label: (0, utils_1.getMessage)("page.details.actions.comment.unblock", "Unblock") })),
                 needsApproval && (react_1.default.createElement(DiscussionThreadItemApprovalFlowActions_1.default, { id: id, allowedActions: { canModerate }, queryToInvalidate: "get-details-data" })),
-                react_1.default.createElement(DiscussionThreadItemReviewAction_1.default, { item: item, queryToInvalidate: "get-details-data", areBlockButtonsDisabled: blockButtonsDisabled, isLoading: isLoading, allowedActions: {
+                !blockedThread && !blocked && isAdminAuthor && (react_1.default.createElement(IconButton_1.IconButton, { onClick: handleDeleteClick, loading: deleteItemMutation.isLoading, icon: icons_1.trash, label: (0, utils_1.getMessage)("page.details.actions.comment.delete", "Delete comment") })),
+                isAdminAuthor && !isBlocked && (react_1.default.createElement(IconButton_1.IconButton, { onClick: toggleUpdateCommentVisibility, icon: icons_1.pencil, label: (0, utils_1.getMessage)("page.details.actions.thread.modal.update.comment") })),
+                react_1.default.createElement(DiscussionThreadItemReviewAction_1.default, { item: item, queryToInvalidate: "get-details-data", allowedActions: {
                         canModerate,
                         canAccessReports,
                         canReviewReports,
-                    }, blockItemMutation: blockItemMutation, blockItemThreadMutation: blockItemThreadMutation, onBlockButtonsStateChange: handleBlockButtonsStateChange, onBlockActionClick: handleBlockActionClick }))),
+                    }, isAnyActionLoading: isLoading }))),
             hasActiveThread && (react_1.default.createElement(styles_2.IconButtonGroupStyled, { isSingle: true, withMargin: true },
-                react_1.default.createElement(IconButton_1.IconButton, { onClick: handleDrilldownClick, icon: react_1.default.createElement(icons_1.Eye, null), label: (0, utils_1.getMessage)("page.details.panel.discussion.nav.drilldown", "Drilldown thread"), style: blocked && !blockedThread
+                react_1.default.createElement(IconButton_1.IconButton, { onClick: handleDrilldownClick, icon: icons_2.eye, label: (0, utils_1.getMessage)("page.details.panel.discussion.nav.drilldown", "Drilldown thread"), style: blocked && !blockedThread
                         ? { marginTop: "1px", marginRight: ".5rem" }
-                        : {} })))),
-        !blocked && (react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: blockConfirmationVisible, isActionAsync: blockItemMutation.isLoading, header: (0, utils_1.getMessage)("page.details.actions.comment.block.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("page.details.actions.comment.block.confirmation.button.confirm"), iconConfirm: react_1.default.createElement(icons_2.LockIcon, null), onConfirm: handleBlockConfirm, onCancel: handleBlockCancel }, (0, utils_1.getMessage)("page.details.actions.comment.block.confirmation.description"))),
-        !blockedThread && (react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: blockThreadConfirmationVisible, isActionAsync: blockItemThreadMutation.isLoading, header: (0, utils_1.getMessage)("page.details.actions.thread.block.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("page.details.actions.thread.block.confirmation.button.confirm"), iconConfirm: react_1.default.createElement(icons_2.LockIcon, null), onConfirm: handleBlockThreadConfirm, onCancel: handleBlockThreadCancel }, (0, utils_1.getMessage)("page.details.actions.thread.block.confirmation.description")))));
+                        : {} }))),
+            react_1.default.createElement(styles_2.IconButtonGroupStyled, null, !hasActiveThread && !pinned && (!blockedThread && !blocked) && (react_1.default.createElement(IconButton_1.IconButton, { onClick: toggleStartThreadVisibility, icon: icons_1.plus, label: (0, utils_1.getMessage)("page.details.actions.thread.modal.start.thread") })))),
+        startThreadVisible &&
+            react_1.default.createElement(ModeratorResponseModal_1.default, { content: "", id: id, title: (0, utils_1.getMessage)("page.details.actions.thread.modal.start.thread"), onClose: toggleStartThreadVisibility }),
+        updateCommentVisible &&
+            react_1.default.createElement(ModeratorResponseModal_1.default, { content: content, id: id, title: (0, utils_1.getMessage)("page.details.actions.thread.modal.update.comment"), onClose: toggleUpdateCommentVisibility }),
+        !blocked && (react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: blockConfirmationVisible, isActionAsync: blockItemMutation.isLoading, header: (0, utils_1.getMessage)("page.details.actions.comment.block.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("page.details.actions.comment.block.confirmation.button.confirm"), iconConfirm: icons_2.lock, onConfirm: handleBlockConfirm, onCancel: handleBlockCancel }, (0, utils_1.getMessage)("page.details.actions.comment.block.confirmation.description"))),
+        !blockedThread && (react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: blockThreadConfirmationVisible, isActionAsync: blockItemThreadMutation.isLoading, header: (0, utils_1.getMessage)("page.details.actions.thread.block.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("page.details.actions.thread.block.confirmation.button.confirm"), iconConfirm: icons_2.lock, onConfirm: handleOnConfirm, onCancel: handleBlockThreadCancel }, (0, utils_1.getMessage)("page.details.actions.thread.block.confirmation.description")))));
 };
 DiscussionThreadItemActions.propTypes = {
     isRoot: prop_types_1.default.bool,

package/admin/src/components/DiscussionThreadItemApprovalFlowActions/index.d.ts

@@ -1,16 +1,19 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DiscussionThreadItemApprovalFlowActions: {
-    ({ id, allowedActions: { canModerate }, queryToInvalidate, }: {
+    ({ id, allowedActions: { canModerate }, queryToInvalidate }: {
         id: any;
         allowedActions: {
             canModerate: any;
         };
         queryToInvalidate: any;
-    }): any;
+    }): JSX.Element | null;
     propTypes: {
-        id: any;
-        queryToInvalidate: any;
-        allowedActions: any;
-        wrapped: any;
+        id: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+        allowedActions: PropTypes.Requireable<PropTypes.InferProps<{
+            canModerate: PropTypes.Requireable<boolean>;
+        }>>;
+        wrapped: PropTypes.Requireable<boolean>;
     };
 };
 export default DiscussionThreadItemApprovalFlowActions;

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

@@ -7,19 +7,17 @@ const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_query_1 = require("react-query");
 const IconButton_1 = require("@strapi/design-system/IconButton");
-const icons_1 = require("@strapi/icons");
+const icons_1 = require("../icons");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const utils_1 = require("../../utils");
 const api_1 = require("../../pages/utils/api");
 const pluginId_1 = require("../../pluginId");
-const DiscussionThreadItemApprovalFlowActions = ({ id, allowedActions: { canModerate }, queryToInvalidate, }) => {
+const DiscussionThreadItemApprovalFlowActions = ({ id, allowedActions: { canModerate }, queryToInvalidate }) => {
     const toggleNotification = (0, helper_plugin_1.useNotification)();
     const queryClient = (0, react_query_1.useQueryClient)();
     const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
-    const onSuccess = (message) => async () => {
-        if (queryToInvalidate) {
-            await queryClient.invalidateQueries(queryToInvalidate);
-        }
+    const onSuccess = (message) => () => {
+        queryClient.invalidateQueries(queryToInvalidate);
         toggleNotification({
             type: "success",
             message: `${pluginId_1.pluginId}.${message}`,
@@ -53,14 +51,13 @@ const DiscussionThreadItemApprovalFlowActions = ({ id, allowedActions: { canMode
     };
     if (canModerate) {
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(IconButton_1.IconButton, { icon: react_1.default.createElement(icons_1.Check, null), label: (0, utils_1.getMessage)("page.details.actions.comment.approve", "Approve"), onClick: handleApproveClick }),
-            react_1.default.createElement(IconButton_1.IconButton, { icon: react_1.default.createElement(icons_1.Cross, null), label: (0, utils_1.getMessage)("page.details.actions.comment.reject", "Reject"), onClick: handleRejectClick })));
+            react_1.default.createElement(IconButton_1.IconButton, { icon: icons_1.check, label: (0, utils_1.getMessage)("page.details.actions.comment.approve", "Approve"), onClick: handleApproveClick }),
+            react_1.default.createElement(IconButton_1.IconButton, { icon: icons_1.cross, label: (0, utils_1.getMessage)("page.details.actions.comment.reject", "Reject"), onClick: handleRejectClick })));
     }
     return null;
 };
 DiscussionThreadItemApprovalFlowActions.propTypes = {
     id: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]).isRequired,
-    queryToInvalidate: prop_types_1.default.string,
     allowedActions: prop_types_1.default.shape({
         canModerate: prop_types_1.default.bool,
     }),

package/admin/src/components/DiscussionThreadItemFooter/index.d.ts

@@ -1,15 +1,22 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DiscussionThreadItemFooter: {
-    ({ children, author, createdAt, updatedAt, }: {
-        children: any;
+    ({ author, children, createdAt, updatedAt, }: {
         author: any;
+        children: any;
         createdAt: any;
         updatedAt: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        author: any;
-        createdAt: any;
-        updatedAt: any;
-        children: any;
+        author: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            id: PropTypes.Validator<any>;
+            name: PropTypes.Validator<string>;
+            email: PropTypes.Requireable<string>;
+            avatar: PropTypes.Requireable<any>;
+        }>>>;
+        createdAt: PropTypes.Validator<string>;
+        updatedAt: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<any[]>;
     };
 };
 export default DiscussionThreadItemFooter;