strapi-plugin-comments 2.1.8 → 2.2.0

package/admin/src/pages/Details/components/DetailsEntity/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DetailsEntity: {
     ({ data, schema, config, filters, onFiltersChange, }: {
         data?: {} | undefined;
@@ -5,13 +7,13 @@ declare const DetailsEntity: {
         config?: {} | undefined;
         filters: any;
         onFiltersChange: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        data: any;
-        schema: any;
-        config: any;
-        filters: any;
-        onFiltersChange: any;
+        data: PropTypes.Validator<object>;
+        schema: PropTypes.Validator<object>;
+        config: PropTypes.Validator<object>;
+        filters: PropTypes.Validator<object>;
+        onFiltersChange: PropTypes.Validator<(...args: any[]) => any>;
     };
 };
 export default DetailsEntity;

package/admin/src/pages/Details/components/DetailsFilters/index.d.ts

@@ -1,11 +1,13 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DetailsFilters: {
     ({ data, onChange }: {
         data: any;
         onChange: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        data: any;
-        onChange: any;
+        data: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
     };
 };
 export default DetailsFilters;

package/admin/src/pages/Details/index.js

@@ -37,7 +37,7 @@ const Layout_1 = require("@strapi/design-system/Layout");
 const Box_1 = require("@strapi/design-system/Box");
 const Link_1 = require("@strapi/design-system/Link");
 const LiveRegions_1 = require("@strapi/design-system/LiveRegions");
-const icons_1 = require("@strapi/icons");
+const icons_1 = require("../../components/icons");
 const lodash_1 = require("lodash");
 const helper_plugin_1 = require("@strapi/helper-plugin");
 const getMessage_1 = __importDefault(require("../../utils/getMessage"));
@@ -47,6 +47,7 @@ const utils_1 = require("../../utils");
 const DetailsEntity_1 = __importDefault(require("./components/DetailsEntity"));
 const DiscussionThread_1 = __importDefault(require("../../components/DiscussionThread"));
 const selectors_1 = __importDefault(require("../App/reducer/selectors"));
+const index_1 = __importDefault(require("../../components/ModeratorResponse/index"));
 const Details = ({ config }) => {
     (0, helper_plugin_1.useFocusWhenNavigate)();
     const { params: { id }, } = (0, react_router_dom_1.useRouteMatch)((0, utils_1.getUrl)(`discover/:id`));
@@ -77,13 +78,15 @@ const Details = ({ config }) => {
     if (canAccess) {
         return (react_1.default.createElement(Box_1.Box, { background: "neutral100" },
             react_1.default.createElement(Layout_1.Layout, null, (isLoading || isLoadingForPermissions) && (0, lodash_1.isEmpty)(data) ? (react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Layout_1.HeaderLayout, { navigationAction: react_1.default.createElement(Link_1.Link, { startIcon: react_1.default.createElement(icons_1.ArrowLeft, null), to: (0, utils_1.getUrl)(`discover`) }, (0, getMessage_1.default)("HeaderLayout.link.go-back", "Back", false)), title: (0, getMessage_1.default)("page.details.header"), subtitle: (0, getMessage_1.default)("page.details.header.description"), as: "h2" }),
+                react_1.default.createElement(Layout_1.HeaderLayout, { navigationAction: react_1.default.createElement(Link_1.Link, { startIcon: icons_1.arrowLeft, to: (0, utils_1.getUrl)(`discover`) }, (0, getMessage_1.default)("HeaderLayout.link.go-back", "Back", false)), title: (0, getMessage_1.default)("page.details.header"), subtitle: (0, getMessage_1.default)("page.details.header.description"), as: "h2" }),
                 react_1.default.createElement(Layout_1.ContentLayout, null,
-                    react_1.default.createElement(Layout_1.TwoColsLayout, { startCol: react_1.default.createElement(DiscussionThread_1.default, { level: level, selected: selected, isReloading: isLoading, allowedActions: {
-                                canModerate,
-                                canAccessReports,
-                                canReviewReports,
-                            } }), endCol: react_1.default.createElement(DetailsEntity_1.default, { data: entity, schema: contentTypeData?.schema, config: config, filters: filters, onFiltersChange: handleChangeFilters }) })))))));
+                    react_1.default.createElement(Layout_1.TwoColsLayout, { startCol: react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(DiscussionThread_1.default, { level: level, selected: selected, isReloading: isLoading, allowedActions: {
+                                    canModerate,
+                                    canAccessReports,
+                                    canReviewReports,
+                                } }),
+                            selected?.threadOf && (react_1.default.createElement(index_1.default, { rootThread: { ...selected.threadOf } }))), endCol: react_1.default.createElement(DetailsEntity_1.default, { data: entity, schema: contentTypeData?.schema, config: config, filters: filters, onFiltersChange: handleChangeFilters }) })))))));
     }
     return null;
 };

package/admin/src/pages/Discover/components/DiscoverTableRow/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
 declare const DiscoverTableRow: {
     ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick, }: {
         config: any;
@@ -8,12 +10,16 @@ declare const DiscoverTableRow: {
             canReviewReports: any;
         };
         onClick: any;
-    }): any;
+    }): JSX.Element;
     propTypes: {
-        config: any;
-        item: any;
-        allowedActions: any;
-        onClick: any;
+        config: PropTypes.Validator<object>;
+        item: PropTypes.Validator<object>;
+        allowedActions: PropTypes.Requireable<PropTypes.InferProps<{
+            canModerate: PropTypes.Requireable<boolean>;
+            canAccessReports: PropTypes.Requireable<boolean>;
+            canReviewReports: PropTypes.Requireable<boolean>;
+        }>>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
     };
 };
 export default DiscoverTableRow;

package/admin/src/pages/Discover/components/DiscoverTableRow/index.js

@@ -1,35 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const prop_types_1 = __importDefault(require("prop-types"));
 const react_intl_1 = require("react-intl");
-const react_query_1 = require("react-query");
 const lodash_1 = require("lodash");
 const Flex_1 = require("@strapi/design-system/Flex");
 const IconButton_1 = require("@strapi/design-system/IconButton");
@@ -37,11 +13,8 @@ const Link_1 = require("@strapi/design-system/Link");
 const Stack_1 = require("@strapi/design-system/Stack");
 const Table_1 = require("@strapi/design-system/Table");
 const Typography_1 = require("@strapi/design-system/Typography");
-const icons_1 = require("@strapi/icons");
-const helper_plugin_1 = require("@strapi/helper-plugin");
 const utils_1 = require("../../../../utils");
-const api_1 = require("../../../utils/api");
-const pluginId_1 = require("../../../../pluginId");
+const icons_1 = require("../../../../components/icons");
 const styles_1 = require("./styles");
 const renderEntryTitle_1 = __importDefault(require("../../../../utils/renderEntryTitle"));
 const DiscussionThreadItemApprovalFlowActions_1 = __importDefault(require("../../../../components/DiscussionThreadItemApprovalFlowActions"));
@@ -50,59 +23,12 @@ const styles_2 = require("../../../../components/IconButton/styles");
 const DiscussionThreadItemReviewAction_1 = __importDefault(require("../../../../components/DiscussionThreadItemReviewAction"));
 const Avatar_1 = __importDefault(require("../../../../components/Avatar"));
 const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick, }) => {
-    const { id, reports } = item;
-    const [blockButtonsDisabled, setBlockButtonsDisabled] = (0, react_1.useState)(false);
+    const { reports } = item;
     const { formatDate } = (0, react_intl_1.useIntl)();
-    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 = () => { }, indalidate = true) => async () => {
-        if (indalidate) {
-            await queryClient.invalidateQueries("get-data");
-        }
-        toggleNotification({
-            type: "success",
-            message: `${pluginId_1.pluginId}.${message}`,
-        });
-        stateAction(false);
-        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"),
-        onError,
-        refetchActive: false,
-    });
-    const blockItemThreadMutation = (0, react_query_1.useMutation)(api_1.blockItemThread, {
-        onSuccess: onSuccess("page.details.actions.thread.block.confirmation.success"),
-        onError,
-        refetchActive: false,
-    });
-    const handleBlockItemClick = async () => {
-        if (canModerate) {
-            lockApp();
-            blockItemMutation.mutate(id);
-        }
-    };
-    const handleBlockItemThreadClick = async () => {
-        if (canModerate) {
-            lockApp();
-            blockItemThreadMutation.mutate(id);
-        }
-    };
-    const handleBlockActionClick = async (mutation, onCallback) => {
-        lockApp();
-        await mutation.mutateAsync(id);
-        onCallback();
-    };
-    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading;
     const openReports = reports?.filter((_) => !_.resolved);
     const hasReports = !(0, lodash_1.isEmpty)(openReports);
     const reviewFlowEnabled = canAccessReports && hasReports && !(item.blocked || item.blockedThread);
     const handleClick = () => onClick();
-    const handleBlockButtonsStateChange = (disabled) => setBlockButtonsDisabled(disabled);
     const renderStatus = (props) => {
         const status = (0, utils_1.resolveCommentStatus)({ ...props, reviewFlowEnabled });
         const color = (0, utils_1.resolveCommentStatusColor)(status);
@@ -147,13 +73,13 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
         react_1.default.createElement(Table_1.Td, null,
             react_1.default.createElement(Flex_1.Flex, { direction: "column", alignItems: "flex-end" },
                 react_1.default.createElement(styles_2.IconButtonGroupStyled, { isSingle: !(reviewFlowEnabled || (canModerate && needsApproval)) },
-                    canModerate && needsApproval && (react_1.default.createElement(DiscussionThreadItemApprovalFlowActions_1.default, { id: item.id, allowedActions: { canModerate }, queryToInvalidate: "get-data" })),
-                    react_1.default.createElement(DiscussionThreadItemReviewAction_1.default, { item: item, queryToInvalidate: "get-data", areBlockButtonsDisabled: blockButtonsDisabled, isLoading: isLoading, allowedActions: {
+                    canModerate && needsApproval && (react_1.default.createElement(DiscussionThreadItemApprovalFlowActions_1.default, { id: item.id, allowedActions: { canModerate } })),
+                    react_1.default.createElement(DiscussionThreadItemReviewAction_1.default, { item: item, queryToInvalidate: "get-data", allowedActions: {
                             canModerate,
                             canAccessReports,
                             canReviewReports,
-                        }, blockItemMutation: blockItemMutation, blockItemThreadMutation: blockItemThreadMutation, onBlockButtonsStateChange: handleBlockButtonsStateChange, onBlockActionClick: handleBlockActionClick }),
-                    react_1.default.createElement(IconButton_1.IconButton, { onClick: handleClick, label: (0, utils_1.getMessage)("page.discover.table.action.display"), icon: react_1.default.createElement(icons_1.Eye, null) }))))));
+                        } }),
+                    react_1.default.createElement(IconButton_1.IconButton, { onClick: handleClick, label: (0, utils_1.getMessage)("page.discover.table.action.display"), icon: icons_1.eye }))))));
 };
 DiscoverTableRow.propTypes = {
     config: prop_types_1.default.object.isRequired,

package/admin/src/pages/Discover/index.js

@@ -45,11 +45,14 @@ const getMessage_1 = __importDefault(require("../../utils/getMessage"));
 const api_1 = require("./utils/api");
 const permissions_1 = __importDefault(require("../../permissions"));
 const getUrl_1 = __importDefault(require("../../utils/getUrl"));
+const Nav_1 = __importDefault(require("../../components/Nav"));
 const TablePagination_1 = __importDefault(require("../../components/TablePagination"));
 const filtersSchema_1 = __importDefault(require("./utils/filtersSchema"));
 const TableFilters_1 = __importDefault(require("../../components/TableFilters"));
 const selectors_1 = __importDefault(require("../App/reducer/selectors"));
 const DiscoverTableRow_1 = __importDefault(require("./components/DiscoverTableRow"));
+const NoAccessPage_1 = __importDefault(require("../NoAccessPage"));
+const COL_COUNT = 8;
 const Discover = ({ config }) => {
     (0, helper_plugin_1.useFocusWhenNavigate)();
     const { push } = (0, react_router_dom_1.useHistory)();
@@ -58,7 +61,7 @@ const Discover = ({ config }) => {
     const trackUsageRef = (0, react_1.useRef)(trackUsage);
     const toggleNotification = (0, helper_plugin_1.useNotification)();
     const [{ query: queryParams }] = (0, helper_plugin_1.useQueryParams)();
-    const _q = queryParams?._q || "";
+    const _q = queryParams?._q || '';
     const viewPermissions = (0, react_1.useMemo)(() => ({
         access: permissions_1.default.access,
         moderate: permissions_1.default.moderate,
@@ -66,7 +69,7 @@ const Discover = ({ config }) => {
         reviewReports: permissions_1.default.reportsReview,
     }), []);
     const { isLoading: isLoadingForPermissions, allowedActions: { canAccess, canModerate, canAccessReports, canReviewReports, }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
-    const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching, } = (0, react_query_1.useQuery)(["get-data", queryParams, canAccess], () => (0, api_1.fetchData)(queryParams, toggleNotification), {
+    const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching, } = (0, react_query_1.useQuery)(['get-data', queryParams, canAccess], () => (0, api_1.fetchData)(queryParams, toggleNotification), {
         initialData: {},
     });
     const handleClickDisplay = (id) => {
@@ -76,19 +79,18 @@ const Discover = ({ config }) => {
     const { total } = pagination;
     const emptyLayout = {
         comments: {
-            id: (0, getMessage_1.default)("page.discover.table.empty"),
+            id: (0, getMessage_1.default)('page.discover.table.empty'),
             defaultMessage: "You don't have any comments yet.",
         },
         search: {
-            id: (0, getMessage_1.default)("page.discover.table.empty.search"),
-            defaultMessage: "No comments match the search.",
+            id: (0, getMessage_1.default)('page.discover.table.empty.search'),
+            defaultMessage: 'No comments match the search.',
         },
     };
-    const emptyContent = _q ? "search" : "comments";
-    const COL_COUNT = 8;
-    if (canAccess) {
-        return (react_1.default.createElement(Box_1.Box, { background: "neutral100" },
-            react_1.default.createElement(Layout_1.Layout, null, isLoading || isLoadingForPermissions ? (react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+    const emptyContent = _q ? 'search' : 'comments';
+    return canAccess ? (react_1.default.createElement(Box_1.Box, { background: "neutral100" },
+        react_1.default.createElement(Layout_1.Layout, null, isLoading || isLoadingForPermissions ? (react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null)) : (react_1.default.createElement(Layout_1.Layout, { sideNav: react_1.default.createElement(Nav_1.default, { visible: true }) },
+            react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Layout_1.HeaderLayout, { title: (0, getMessage_1.default)("page.discover.header"), subtitle: `${total} ${(0, getMessage_1.default)("page.discover.header.count")}`, as: "h2" }),
                 react_1.default.createElement(Layout_1.ActionLayout, { startActions: react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(helper_plugin_1.SearchURLQuery, { label: (0, getMessage_1.default)("search.label", "Search", false) }),
@@ -118,9 +120,8 @@ const Discover = ({ config }) => {
                                 canAccessReports,
                                 canReviewReports,
                             }, onClick: () => handleClickDisplay(entry.id) }))))),
-                    react_1.default.createElement(TablePagination_1.default, { pagination: { pageCount: pagination?.pageCount || 1 } }))) : (react_1.default.createElement(helper_plugin_1.EmptyStateLayout, { content: emptyLayout[emptyContent] }))))))));
-    }
-    return null;
+                    react_1.default.createElement(TablePagination_1.default, { pagination: { pageCount: pagination?.pageCount || 1 } }))) : (react_1.default.createElement(helper_plugin_1.EmptyStateLayout, { content: emptyLayout[emptyContent] }))))))))) :
+        react_1.default.createElement(NoAccessPage_1.default, null);
 };
 const mapStateToProps = (0, selectors_1.default)();
 function mapDispatchToProps(dispatch) {

package/admin/src/pages/NoAccessPage/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const NoAcccessPage: () => JSX.Element;
+export default NoAcccessPage;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/NoAccessPage/index.js

@@ -0,0 +1,31 @@
+"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 helper_plugin_1 = require("@strapi/helper-plugin");
+const Main_1 = require("@strapi/design-system/Main");
+const Layout_1 = require("@strapi/design-system/Layout");
+const EmptyStateLayout_1 = require("@strapi/design-system/EmptyStateLayout");
+const icons_1 = require("../../components/icons");
+const react_intl_1 = require("react-intl");
+const NoAcccessPage = () => {
+    const { formatMessage } = (0, react_intl_1.useIntl)();
+    (0, helper_plugin_1.useFocusWhenNavigate)();
+    return (react_1.default.createElement(Main_1.Main, { labelledBy: "title" },
+        react_1.default.createElement(Layout_1.HeaderLayout, { id: "title", title: formatMessage({
+                id: 'page.auth.noAccess',
+                defaultMessage: 'No access',
+            }) }),
+        react_1.default.createElement(Layout_1.ContentLayout, null,
+            react_1.default.createElement(EmptyStateLayout_1.EmptyStateLayout, { action: react_1.default.createElement(helper_plugin_1.LinkButton, { variant: "secondary", endIcon: icons_1.arrowRight, to: "/" }, formatMessage({
+                    id: 'components.notAccessPage.back',
+                    defaultMessage: 'Back to homepage',
+                })), content: formatMessage({
+                    id: 'page.auth.not.allowed',
+                    defaultMessage: "Oops! It seems like You do not have access to this page...",
+                }), hasRadius: true, icon: icons_1.emptyPictures, shadow: "tableShadow" }))));
+};
+exports.default = NoAcccessPage;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/Reports/components/ReportsTableRow/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+declare const ReportsTableRow: ({ allowedActions, config, handleItemSelectionChange, isChecked, item, mutation, onClick, onSelectionChange, reports, selectedReports, updateReports, }: {
+    allowedActions: any;
+    config: any;
+    handleItemSelectionChange: any;
+    isChecked: any;
+    item: any;
+    mutation: any;
+    onClick: any;
+    onSelectionChange: any;
+    reports: any;
+    selectedReports: any;
+    updateReports: any;
+}) => JSX.Element;
+export default ReportsTableRow;
+//# sourceMappingURL=index.d.ts.map

package/admin/src/pages/Reports/components/ReportsTableRow/index.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseCheckbox_1 = require("@strapi/design-system/BaseCheckbox");
+const Button_1 = require("@strapi/design-system/Button");
+const Table_1 = require("@strapi/design-system/Table");
+const Typography_1 = require("@strapi/design-system/Typography");
+;
+const icons_1 = require("../../../../components/icons");
+const react_1 = __importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const CommentReviewModal_1 = __importDefault(require("../../../../components/CommentReviewModal"));
+const StatusBadge_1 = __importDefault(require("../../../../components/StatusBadge"));
+const utils_1 = require("../../../../utils");
+const ReportsActions_1 = __importDefault(require("../../../../components/ReportsActions"));
+const cellMaxWidth = { maxWidth: "30vw" };
+const ReportsTableRow = ({ allowedActions, config, handleItemSelectionChange, isChecked, item, mutation, onClick, onSelectionChange, reports, selectedReports, updateReports, }) => {
+    const { reports: reportedReports, } = item;
+    const [modalVisible, setModalVisible] = (0, react_1.useState)(false);
+    const { formatDate } = (0, react_intl_1.useIntl)();
+    const openReports = reportedReports?.filter((_) => !_.resolved);
+    const handleOpenModal = (0, react_1.useCallback)(() => {
+        setModalVisible(true);
+    }, [setModalVisible]);
+    const handleCloseModal = (0, react_1.useCallback)(() => {
+        setModalVisible(false);
+    }, [setModalVisible]);
+    const renderStatus = (props) => {
+        const status = (0, utils_1.resolveReportStatus)(props);
+        const color = (0, utils_1.resolveReportStatusColor)(status);
+        return (react_1.default.createElement(StatusBadge_1.default, { backgroundColor: `${color}100`, textColor: `${color}700`, color: color }, (0, utils_1.getMessage)({
+            id: `page.common.item.status.${status}`,
+            props: {
+                count: openReports.length,
+            },
+        }, status)));
+    };
+    return (react_1.default.createElement(Table_1.Tr, { key: item.id },
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(BaseCheckbox_1.BaseCheckbox, { "aria-label": (0, utils_1.getMessage)("page.details.panel.discussion.warnings.reports.dialog.select"), value: isChecked(item.id), onValueChange: (value) => handleItemSelectionChange(item.id, value) })),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", fontWeight: "bold" },
+                "#",
+                item.id)),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", variant: "pi" }, item.reason || (0, utils_1.getMessage)("compontents.reason.unknown"))),
+        react_1.default.createElement(Table_1.Td, { style: cellMaxWidth },
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", ellipsis: true }, item.content || (0, utils_1.getMessage)("compontents.content.unknown"))),
+        react_1.default.createElement(Table_1.Td, { style: cellMaxWidth },
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800", ellipsis: true }, renderStatus(item))),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Typography_1.Typography, { textColor: "neutral800" }, formatDate(item.updatedAt || item.createdAt, {
+                dateStyle: "long",
+                timeStyle: "short",
+            }))),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(Button_1.Button, { variant: "tertiary", startIcon: icons_1.eye, onClick: handleOpenModal }, (0, utils_1.getMessage)({
+                id: "page.discover.table.cell.thread",
+                props: { id: item.related.id },
+            }, `#${item.related.id}`)),
+            react_1.default.createElement(CommentReviewModal_1.default, { isVisible: modalVisible, onClose: handleCloseModal, item: item })),
+        react_1.default.createElement(Table_1.Td, null,
+            react_1.default.createElement(ReportsActions_1.default, { item: item, allowedActions: allowedActions, mutation: mutation, reports: reports, updateReports: updateReports, onSelectionChange: onSelectionChange, selectedReports: selectedReports }))));
+};
+exports.default = ReportsTableRow;
+//# sourceMappingURL=index.js.map

package/admin/src/pages/Reports/components/ReportsTableRow/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const TableLink: any;
+//# sourceMappingURL=styles.d.ts.map

package/admin/src/pages/Reports/components/ReportsTableRow/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableLink = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Link_1 = require("@strapi/design-system/Link");
+exports.TableLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+//# sourceMappingURL=styles.js.map

package/admin/src/pages/Reports/index.d.ts

@@ -0,0 +1,4 @@
+export declare const mapDispatchToProps: (dispatch: any) => any;
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=index.d.ts.map