strapi-plugin-comments 2.0.8 → 2.0.11

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

@@ -0,0 +1,344 @@
+"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 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 Avatar_1 = require("@strapi/design-system/Avatar");
+const Flex_1 = require("@strapi/design-system/Flex");
+const IconButton_1 = require("@strapi/design-system/IconButton");
+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 styles_1 = require("./styles");
+const renderEntryTitle_1 = __importDefault(
+  require("../../../../utils/renderEntryTitle")
+);
+const DiscussionThreadItemApprovalFlowActions_1 = __importDefault(
+  require("../../../../components/DiscussionThreadItemApprovalFlowActions")
+);
+const StatusBadge_1 = __importDefault(
+  require("../../../../components/StatusBadge")
+);
+const styles_2 = require("../../../../components/IconButton/styles");
+const DiscussionThreadItemReviewAction_1 = __importDefault(
+  require("../../../../components/DiscussionThreadItemReviewAction")
+);
+const DiscoverTableRow = ({
+  config,
+  item,
+  allowedActions: { canModerate, canAccessReports, canReviewReports },
+  onClick,
+}) => {
+  const { id, reports } = item;
+  const [blockButtonsDisabled, setBlockButtonsDisabled] = (0, react_1.useState)(
+    false
+  );
+  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);
+    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
+      )
+    );
+  };
+  const renderEntryUrl = (entry) =>
+    entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
+  const renderDetailsUrl = (entry) =>
+    (0, utils_1.getUrl)(`discover/${entry.id}`);
+  const gotApprovalFlow = !(0, lodash_1.isNil)(item.approvalStatus);
+  const needsApproval = gotApprovalFlow && item.approvalStatus === "PENDING";
+  let actionItemsCount = 1;
+  if (reviewFlowEnabled || needsApproval) {
+    actionItemsCount = 2;
+  }
+  return react_1.default.createElement(
+    Table_1.Tr,
+    { key: item.id },
+    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(
+        Stack_1.Stack,
+        { size: 2, horizontal: true },
+        item.author?.avatar
+          ? react_1.default.createElement(Avatar_1.Avatar, {
+              src: item.author?.avatar,
+              alt: item.author.name,
+            })
+          : react_1.default.createElement(
+              Avatar_1.Initials,
+              null,
+              (0, utils_1.renderInitials)(item.author.name)
+            ),
+        react_1.default.createElement(
+          Typography_1.Typography,
+          { textColor: "neutral800", variant: "pi" },
+          item.author.name
+        )
+      )
+    ),
+    react_1.default.createElement(
+      Table_1.Td,
+      { style: { maxWidth: "30vw" } },
+      react_1.default.createElement(
+        Typography_1.Typography,
+        { textColor: "neutral800", ellipsis: true },
+        item.content
+      )
+    ),
+    react_1.default.createElement(
+      Table_1.Td,
+      null,
+      item.threadOf?.id
+        ? react_1.default.createElement(
+            Link_1.Link,
+            { to: renderDetailsUrl(item.threadOf) },
+            (0, utils_1.getMessage)(
+              {
+                id: "page.discover.table.cell.thread",
+                props: { id: item.threadOf.id },
+              },
+              "#" + item.threadOf.id
+            )
+          )
+        : "-"
+    ),
+    react_1.default.createElement(
+      Table_1.Td,
+      { style: { maxWidth: "15vw" } },
+      item.related
+        ? react_1.default.createElement(
+            styles_1.TableLink,
+            { to: renderEntryUrl(item.related) },
+            (0, renderEntryTitle_1.default)(item.related, config)
+          )
+        : "-"
+    ),
+    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(
+        Typography_1.Typography,
+        { textColor: "neutral800" },
+        renderStatus(item)
+      )
+    ),
+    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,
+                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),
+          })
+        )
+      )
+    )
+  );
+};
+DiscoverTableRow.propTypes = {
+  config: prop_types_1.default.object.isRequired,
+  item: prop_types_1.default.object.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,
+  }),
+  onClick: prop_types_1.default.func.isRequired,
+};
+exports.default = DiscoverTableRow;
+//# sourceMappingURL=index.js.map

package/build/admin/src/pages/Discover/components/DiscoverTableRow/styles.d.ts

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

package/build/admin/src/pages/Discover/components/DiscoverTableRow/styles.js

@@ -0,0 +1,16 @@
+"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/build/admin/src/pages/Discover/index.d.ts

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

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

@@ -0,0 +1,332 @@
+"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 });
+exports.mapDispatchToProps = void 0;
+const react_1 = __importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const redux_1 = require("redux");
+const react_fast_compare_1 = __importDefault(require("react-fast-compare"));
+const react_query_1 = require("react-query");
+const react_router_dom_1 = require("react-router-dom");
+const lodash_1 = require("lodash");
+const Box_1 = require("@strapi/design-system/Box");
+const Layout_1 = require("@strapi/design-system/Layout");
+const Table_1 = require("@strapi/design-system/Table");
+const Typography_1 = require("@strapi/design-system/Typography");
+const VisuallyHidden_1 = require("@strapi/design-system/VisuallyHidden");
+const LiveRegions_1 = require("@strapi/design-system/LiveRegions");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+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 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 Discover = ({ config }) => {
+  (0, helper_plugin_1.useFocusWhenNavigate)();
+  const { push } = (0, react_router_dom_1.useHistory)();
+  const { notifyStatus } = (0, LiveRegions_1.useNotifyAT)();
+  const { trackUsage } = (0, helper_plugin_1.useTracking)();
+  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 viewPermissions = (0, react_1.useMemo)(
+    () => ({
+      access: permissions_1.default.access,
+      moderate: permissions_1.default.moderate,
+      accessReports: permissions_1.default.reports,
+      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),
+    {
+      initialData: {},
+    }
+  );
+  const handleClickDisplay = (id) => {
+    push((0, getUrl_1.default)(`discover/${id}`));
+  };
+  const isLoading = isLoadingForData || isFetching;
+  const { total } = pagination;
+  const emptyLayout = {
+    comments: {
+      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.",
+    },
+  };
+  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,
+              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
+                      ),
+                    }
+                  ),
+                  react_1.default.createElement(TableFilters_1.default, {
+                    displayedFilters: filtersSchema_1.default,
+                  })
+                ),
+              }),
+              react_1.default.createElement(
+                Layout_1.ContentLayout,
+                null,
+                !(0, lodash_1.isEmpty)(result)
+                  ? react_1.default.createElement(
+                      react_1.default.Fragment,
+                      null,
+                      react_1.default.createElement(
+                        Table_1.Table,
+                        { colCount: COL_COUNT, rowCount: result.length },
+                        react_1.default.createElement(
+                          Table_1.Thead,
+                          null,
+                          react_1.default.createElement(
+                            Table_1.Tr,
+                            null,
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.id"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.author"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.message"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.thread"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.entry"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.lastUpdate"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                Typography_1.Typography,
+                                { variant: "sigma" },
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.status"
+                                )
+                              )
+                            ),
+                            react_1.default.createElement(
+                              Table_1.Th,
+                              null,
+                              react_1.default.createElement(
+                                VisuallyHidden_1.VisuallyHidden,
+                                null,
+                                (0, getMessage_1.default)(
+                                  "page.discover.table.header.actions"
+                                )
+                              )
+                            )
+                          )
+                        ),
+                        react_1.default.createElement(
+                          Table_1.Tbody,
+                          null,
+                          result.map((entry) =>
+                            react_1.default.createElement(
+                              DiscoverTableRow_1.default,
+                              {
+                                key: `comment-${entry.id}`,
+                                config: config,
+                                item: entry,
+                                allowedActions: {
+                                  canModerate,
+                                  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;
+};
+const mapStateToProps = (0, selectors_1.default)();
+function mapDispatchToProps(dispatch) {
+  return (0, redux_1.bindActionCreators)({}, dispatch);
+}
+exports.mapDispatchToProps = mapDispatchToProps;
+const withConnect = (0, react_redux_1.connect)(
+  mapStateToProps,
+  mapDispatchToProps
+);
+exports.default = (0, redux_1.compose)(withConnect)(
+  (0, react_1.memo)(Discover, react_fast_compare_1.default)
+);
+//# sourceMappingURL=index.js.map