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

package/admin/src/pages/Details/components/DetailsEntity/index.tsx

@@ -0,0 +1,106 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+import React from "react";
+import PropTypes from "prop-types";
+import { capitalize, isNil, isEmpty, first, take } from "lodash";
+import { Box } from "@strapi/design-system/Box";
+import { Divider } from "@strapi/design-system/Divider";
+import { Flex } from "@strapi/design-system/Flex";
+import { Stack } from "@strapi/design-system/Stack";
+import { Typography } from "@strapi/design-system/Typography";
+import { getMessage } from "../../../../utils";
+import DetailsFilters from "../DetailsFilters";
+
+const DetailsEntity = ({
+  data = {},
+  schema = {},
+  config = {},
+  filters,
+  onFiltersChange,
+}) => {
+  const { entryLabel = {} } = config;
+  const { attributes = {} } = schema;
+  const keys = Object.keys(attributes);
+  const entityLabelKey = first(entryLabel[data?.uid]);
+
+  const FIELDS_LIMIT = 5;
+  const itemKeys = take(
+    keys.filter(
+      (_) =>
+        attributes[_].type === "string" &&
+        !isNil(data[_]) &&
+        _ !== entityLabelKey
+    ),
+    FIELDS_LIMIT
+  );
+
+  const formatLabel = (label = "") =>
+    label
+      .split("_")
+      .map((_) => capitalize(_))
+      .join(" ");
+
+  const entityIsRenderable =
+    data && !isEmpty(data) && (!isEmpty(itemKeys) || data[entityLabelKey]);
+
+  return (
+    <Box padding={4}>
+      {entityIsRenderable && (
+        <Box marginBottom={4}>
+          <Typography
+            variant="sigma"
+            textColor="neutral600"
+            id="entity-details"
+          >
+            {getMessage("page.details.panel.entity", "Details")}
+          </Typography>
+          <Box paddingTop={2} paddingBottom={4}>
+            <Divider />
+          </Box>
+          <Stack size={itemKeys.length}>
+            <Flex direction="column" alignItems="flex-start">
+              <Typography fontWeight="bold">
+                {formatLabel(entityLabelKey)}
+              </Typography>
+              <Typography>{data[entityLabelKey]}</Typography>
+            </Flex>
+            {itemKeys.map((_) => (
+              <Flex
+                key={`prop_${_}`}
+                direction="column"
+                alignItems="flex-start"
+              >
+                <Typography fontWeight="bold">{formatLabel(_)}</Typography>
+                <Typography>{data[_]}</Typography>
+              </Flex>
+            ))}
+          </Stack>
+        </Box>
+      )}
+      <Box>
+        <Typography variant="sigma" textColor="neutral600" id="view-filters">
+          {getMessage("page.details.filters.label", "View")}
+        </Typography>
+        <Box paddingTop={2} paddingBottom={4}>
+          <Divider />
+        </Box>
+        <DetailsFilters data={filters} onChange={onFiltersChange} />
+      </Box>
+    </Box>
+  );
+};
+
+DetailsEntity.propTypes = {
+  data: PropTypes.object.isRequired,
+  schema: PropTypes.object.isRequired,
+  config: PropTypes.object.isRequired,
+  filters: PropTypes.object.isRequired,
+  onFiltersChange: PropTypes.func.isRequired,
+};
+
+export default DetailsEntity;

package/admin/src/pages/Details/components/DetailsFilters/index.tsx

@@ -0,0 +1,43 @@
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "@strapi/design-system/Box";
+import { Flex } from "@strapi/design-system/Flex";
+import { Stack } from "@strapi/design-system/Stack";
+import { Checkbox } from "@strapi/design-system/Checkbox";
+import { getMessage } from "../../../../utils";
+
+const DetailsFilters = ({ data, onChange }) => {
+  const { removed = false } = data;
+
+  const handleOnChange = (prop, value) =>
+    onChange({
+      ...data,
+      [prop]: !value ? undefined : value,
+    });
+
+  return (
+    <Box as={Flex}>
+      <Stack size={2} vertical>
+        <Checkbox
+          checked={removed}
+          onChange={() => handleOnChange("removed", !removed)}
+          visibleLabels
+        >
+          {getMessage(
+            "page.details.filters.removed.label",
+            "Show removed comments"
+          )}
+        </Checkbox>
+      </Stack>
+    </Box>
+  );
+};
+
+DetailsFilters.propTypes = {
+  data: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default DetailsFilters;

package/admin/src/pages/Details/components/DetailsFilters/styles.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import styled from "styled-components";
+import { Link } from "@strapi/design-system/Link";
+
+export const TableLink = styled(Link)`
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;

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

@@ -0,0 +1,169 @@
+/*
+ *
+ * Details
+ *
+ */
+
+// @ts-nocheck
+import React, { memo, useRef, useMemo, useState } from "react";
+import { connect } from "react-redux";
+import { bindActionCreators, compose } from "redux";
+import isEqual from "react-fast-compare";
+import { useQuery } from "react-query";
+import { useRouteMatch } from "react-router-dom";
+import {
+  Layout,
+  HeaderLayout,
+  TwoColsLayout,
+  ContentLayout,
+} from "@strapi/design-system/Layout";
+import { Box } from "@strapi/design-system/Box";
+import { Link } from "@strapi/design-system/Link";
+import { Loader } from "@strapi/design-system/Loader";
+import { useNotifyAT } from "@strapi/design-system/LiveRegions";
+import { ArrowLeft } from "@strapi/icons";
+
+import { isEmpty } from "lodash";
+import {
+  LoadingIndicatorPage,
+  useTracking,
+  useNotification,
+  useRBAC,
+  useFocusWhenNavigate,
+} from "@strapi/helper-plugin";
+import getMessage from "../../utils/getMessage";
+import { fetchDetailsData, fetchContentTypeData } from "../utils/api";
+import pluginPermissions from "../../permissions";
+import { getUrl, parseRegExp } from "../../utils";
+import Nav from "../../components/Nav";
+import DetailsEntity from "./components/DetailsEntity";
+import DiscussionThread from "../../components/DiscussionThread";
+import makeAppView from "../App/reducer/selectors";
+
+const Details = ({ config }) => {
+  useFocusWhenNavigate();
+
+  const {
+    params: { id },
+  } = useRouteMatch(getUrl(`discover/:id`));
+
+  const { notifyStatus } = useNotifyAT();
+  const { trackUsage } = useTracking();
+  const trackUsageRef = useRef(trackUsage);
+  const toggleNotification = useNotification();
+
+  const viewPermissions = useMemo(
+    () => ({
+      access: pluginPermissions.access,
+      moderate: pluginPermissions.moderate,
+      accessReports: pluginPermissions.reports,
+      reviewReports: pluginPermissions.reportsReview,
+    }),
+    []
+  );
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: {
+      canAccess,
+      canModerate,
+      canAccessReports,
+      canReviewReports,
+    },
+  } = useRBAC(viewPermissions);
+
+  const [filters, setFilters] = useState({});
+
+  const regexUID = new RegExp(
+    parseRegExp(config.regex.uid).value,
+    parseRegExp(config.regex.uid).flags
+  );
+
+  const {
+    isLoading: isLoadingForData,
+    data,
+    isFetching,
+  } = useQuery(
+    ["get-details-data", id, filters, canAccess],
+    () => fetchDetailsData(id, filters, toggleNotification),
+    {
+      initialData: {},
+    }
+  );
+
+  const { entity, level, selected } = data;
+  const entityUidValid = entity?.uid && regexUID.test(entity.uid);
+
+  const { data: contentTypeData } = useQuery(
+    ["get-additional-data", entity?.uid, canAccess],
+    () => fetchContentTypeData(entity?.uid, toggleNotification),
+    {
+      enabled: !!entity?.uid,
+      suspense: !entityUidValid,
+    }
+  );
+
+  const handleChangeFilters = (props) => setFilters(props);
+
+  const isLoading = isLoadingForData || isFetching;
+
+  if (canAccess) {
+    return (
+      <Box background="neutral100">
+        <Layout>
+          {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (
+            <LoadingIndicatorPage />
+          ) : (
+            <>
+              <HeaderLayout
+                navigationAction={
+                  <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
+                    {getMessage("HeaderLayout.link.go-back", "Back", false)}
+                  </Link>
+                }
+                title={getMessage("page.details.header")}
+                subtitle={getMessage("page.details.header.description")}
+                as="h2"
+              />
+              <ContentLayout>
+                <TwoColsLayout
+                  startCol={
+                    <DiscussionThread
+                      level={level}
+                      selected={selected}
+                      isReloading={isLoading}
+                      allowedActions={{
+                        canModerate,
+                        canAccessReports,
+                        canReviewReports,
+                      }}
+                    />
+                  }
+                  endCol={
+                    <DetailsEntity
+                      data={entity}
+                      schema={contentTypeData?.schema}
+                      config={config}
+                      filters={filters}
+                      onFiltersChange={handleChangeFilters}
+                    />
+                  }
+                />
+              </ContentLayout>
+            </>
+          )}
+        </Layout>
+      </Box>
+    );
+  }
+  return null;
+};
+
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(withConnect)(memo(Details, isEqual));

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

@@ -0,0 +1,252 @@
+// @ts-nocheck
+
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
+import { useMutation, useQueryClient } from "react-query";
+import { isNil, isEmpty } from "lodash";
+import { Flex } from "@strapi/design-system/Flex";
+import { IconButton } from "@strapi/design-system/IconButton";
+import { Link } from "@strapi/design-system/Link";
+import { Stack } from "@strapi/design-system/Stack";
+import { Tr, Td } from "@strapi/design-system/Table";
+import { Typography } from "@strapi/design-system/Typography";
+import { Eye } from "@strapi/icons";
+import { useNotification, useOverlayBlocker } from "@strapi/helper-plugin";
+import {
+  getMessage,
+  getUrl,
+  handleAPIError,
+  resolveCommentStatus,
+  resolveCommentStatusColor,
+} from "../../../../utils";
+import { blockItem, blockItemThread } from "../../../utils/api";
+import { pluginId } from "../../../../pluginId";
+import { ReviewIcon, LockIcon } from "../../../../components/icons";
+import { TableLink } from "./styles";
+import renderEntryTitle from "../../../../utils/renderEntryTitle";
+import DiscussionThreadItemApprovalFlowActions from "../../../../components/DiscussionThreadItemApprovalFlowActions";
+import StatusBadge from "../../../../components/StatusBadge";
+import { IconButtonGroupStyled } from "../../../../components/IconButton/styles";
+import DiscussionThreadItemReviewAction from "../../../../components/DiscussionThreadItemReviewAction";
+import UserAvatar from "../../../../components/Avatar";
+
+const DiscoverTableRow = ({
+  config,
+  item,
+  allowedActions: { canModerate, canAccessReports, canReviewReports },
+  onClick,
+}) => {
+  const { id, reports } = item;
+
+  const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
+
+  const { formatDate } = useIntl();
+  const toggleNotification = useNotification();
+  const queryClient = useQueryClient();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+
+  const onSuccess =
+    (message, stateAction = () => {}, indalidate = true) =>
+    async () => {
+      if (indalidate) {
+        await queryClient.invalidateQueries("get-data");
+      }
+      toggleNotification({
+        type: "success",
+        message: `${pluginId}.${message}`,
+      });
+      stateAction(false);
+      unlockApp();
+    };
+
+  const onError = (err) => {
+    handleAPIError(err, toggleNotification);
+  };
+
+  const blockItemMutation = useMutation(blockItem, {
+    onSuccess: onSuccess(
+      "page.details.actions.comment.block.confirmation.success"
+    ),
+    onError,
+    refetchActive: false,
+  });
+  const blockItemThreadMutation = useMutation(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 = !isEmpty(openReports);
+  const reviewFlowEnabled =
+    canAccessReports && hasReports && !(item.blocked || item.blockedThread);
+
+  const handleClick = () => onClick();
+  const handleBlockButtonsStateChange = (disabled) =>
+    setBlockButtonsDisabled(disabled);
+
+  const renderStatus = (props) => {
+    const status = resolveCommentStatus({ ...props, reviewFlowEnabled });
+    const color = resolveCommentStatusColor(status);
+
+    return (
+      <StatusBadge
+        backgroundColor={`${color}100`}
+        textColor={`${color}700`}
+        color={color}
+      >
+        {getMessage(
+          {
+            id: `page.common.item.status.${status}`,
+            props: {
+              count: openReports.length,
+            },
+          },
+          status
+        )}
+      </StatusBadge>
+    );
+  };
+
+  const renderEntryUrl = (entry) =>
+    entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
+  const renderDetailsUrl = (entry) => getUrl(`discover/${entry.id}`);
+
+  const gotApprovalFlow = !isNil(item.approvalStatus);
+  const needsApproval = gotApprovalFlow && item.approvalStatus === "PENDING";
+
+  let actionItemsCount = 1;
+  if (reviewFlowEnabled || needsApproval) {
+    actionItemsCount = 2;
+  }
+
+  return (
+    <Tr key={item.id}>
+      <Td>
+        <Typography textColor="neutral800" fontWeight="bold">
+          #{item.id}
+        </Typography>
+      </Td>
+      <Td>
+        <Stack size={2} horizontal>
+          <UserAvatar avatar={item.author?.avatar} name={item.author.name} />
+          <Typography textColor="neutral800" variant="pi">
+            {item.author.name}
+          </Typography>
+        </Stack>
+      </Td>
+      <Td style={{ maxWidth: "30vw" }}>
+        <Typography textColor="neutral800" ellipsis>
+          {item.content}
+        </Typography>
+      </Td>
+      <Td>
+        {item.threadOf?.id ? (
+          <Link to={renderDetailsUrl(item.threadOf)}>
+            {getMessage(
+              {
+                id: "page.discover.table.cell.thread",
+                props: { id: item.threadOf.id },
+              },
+              "#" + item.threadOf.id
+            )}
+          </Link>
+        ) : (
+          "-"
+        )}
+      </Td>
+      <Td style={{ maxWidth: "15vw" }}>
+        {item.related ? (
+          <TableLink to={renderEntryUrl(item.related)}>
+            {renderEntryTitle(item.related, config)}
+          </TableLink>
+        ) : (
+          "-"
+        )}
+      </Td>
+      <Td>
+        <Typography textColor="neutral800">
+          {formatDate(item.updatedAt || item.createdAt, {
+            dateStyle: "long",
+            timeStyle: "short",
+          })}
+        </Typography>
+      </Td>
+      <Td>
+        <Typography textColor="neutral800">{renderStatus(item)}</Typography>
+      </Td>
+      <Td>
+        <Flex direction="column" alignItems="flex-end">
+          <IconButtonGroupStyled
+            isSingle={!(reviewFlowEnabled || (canModerate && needsApproval))}
+          >
+            {canModerate && needsApproval && (
+              <DiscussionThreadItemApprovalFlowActions
+                id={item.id}
+                allowedActions={{ canModerate }}
+                queryToInvalidate="get-data"
+              />
+            )}
+            <DiscussionThreadItemReviewAction
+              item={item}
+              queryToInvalidate="get-data"
+              areBlockButtonsDisabled={blockButtonsDisabled}
+              isLoading={isLoading}
+              allowedActions={{
+                canModerate,
+                canAccessReports,
+                canReviewReports,
+              }}
+              blockItemMutation={blockItemMutation}
+              blockItemThreadMutation={blockItemThreadMutation}
+              onBlockButtonsStateChange={handleBlockButtonsStateChange}
+              onBlockActionClick={handleBlockActionClick}
+            />
+            <IconButton
+              onClick={handleClick}
+              label={getMessage("page.discover.table.action.display")}
+              icon={<Eye />}
+            />
+          </IconButtonGroupStyled>
+        </Flex>
+      </Td>
+    </Tr>
+  );
+};
+
+DiscoverTableRow.propTypes = {
+  config: PropTypes.object.isRequired,
+  item: PropTypes.object.isRequired,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+  onClick: PropTypes.func.isRequired,
+};
+
+export default DiscoverTableRow;

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

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import styled from "styled-components";
+import { Link } from "@strapi/design-system/Link";
+
+export const TableLink = styled(Link)`
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;