strapi-plugin-comments 2.0.11 → 2.1.1

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

@@ -0,0 +1,88 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Button } from "@strapi/design-system/Button";
+import { Dialog, DialogBody, DialogFooter } from "@strapi/design-system/Dialog";
+import { Flex } from "@strapi/design-system/Flex";
+import { Stack } from "@strapi/design-system/Stack";
+import { Typography } from "@strapi/design-system/Typography";
+import { ExclamationMarkCircle, Check } from "@strapi/icons";
+import { getMessage } from "../../utils";
+
+const ConfirmationDialog = ({
+  isVisible = false,
+  isActionAsync = false,
+  children,
+  onConfirm,
+  onCancel,
+  header,
+  labelCancel,
+  labelConfirm,
+  iconConfirm,
+}) => (
+  <Dialog
+    onClose={onCancel}
+    title={
+      header ||
+      getMessage("compontents.confirmation.dialog.header", "Confirmation")
+    }
+    isOpen={isVisible}
+  >
+    <DialogBody icon={<ExclamationMarkCircle />}>
+      <Stack size={2}>
+        <Flex justifyContent="center">
+          <Typography id="dialog-confirm-description">
+            {children ||
+              getMessage("compontents.confirmation.dialog.description")}
+          </Typography>
+        </Flex>
+      </Stack>
+    </DialogBody>
+    <DialogFooter
+      startAction={
+        <Button onClick={onCancel} variant="tertiary" disabled={isActionAsync}>
+          {labelCancel ||
+            getMessage(
+              "compontents.confirmation.dialog.button.cancel",
+              "Cancel"
+            )}
+        </Button>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="danger-light"
+          startIcon={iconConfirm || <Check />}
+          disabled={isActionAsync}
+        >
+          {labelConfirm ||
+            getMessage(
+              "compontents.confirmation.dialog.button.confirm",
+              "Confirm"
+            )}
+        </Button>
+      }
+    />
+  </Dialog>
+);
+
+ConfirmationDialog.propTypes = {
+  isVisible: PropTypes.bool,
+  isActionAsync: PropTypes.bool,
+  children: PropTypes.array.isRequired,
+  header: PropTypes.string,
+  labelCancel: PropTypes.string,
+  labelConfirm: PropTypes.string,
+  iconConfirm: PropTypes.object,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default ConfirmationDialog;

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

@@ -0,0 +1,36 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { isNil } from "lodash";
+import { Box } from "@strapi/design-system/Box";
+import { Status } from "@strapi/design-system/Status";
+import { Typography } from "@strapi/design-system/Typography";
+import { getMessage } from "../../utils";
+
+const DiscussionStatus = ({ blocked, blockedThread }) => {
+  let variant = "success";
+
+  return (
+    <Box styles={{ marginBottom: 10 }}>
+      <Status variant={variant}>
+        <Typography>
+          {getMessage("page.details.panel.status", "Discussion is")}{" "}
+          <Typography fontWeight="bold">
+            {getMessage("page.details.panel.open", "OPEN")}{" "}
+          </Typography>
+        </Typography>
+      </Status>
+    </Box>
+  );
+};
+
+DiscussionStatus.propTypes = {};
+
+export default DiscussionStatus;

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

@@ -0,0 +1,97 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { isNil } from "lodash";
+import { Box } from "@strapi/design-system/Box";
+import { Flex } from "@strapi/design-system/Flex";
+import { Link } from "@strapi/design-system/Link";
+import { Typography } from "@strapi/design-system/Typography";
+import { ArrowUp } from "@strapi/icons";
+import DiscussionThreadItem from "../DiscussionThreadItem";
+import { getMessage, getUrl } from "../../utils";
+import LoadingIndicatorOverlay from "../LoadingIndicatorOverlay";
+import { LoadingIndicatorContainer } from "../LoadingIndicatorOverlay/styles";
+
+const DiscussionThread = ({
+  level = [],
+  selected = {},
+  allowedActions,
+  isReloading,
+}) => {
+  const rootThread = selected?.threadOf;
+  return (
+    <LoadingIndicatorContainer as={Box} padding={4}>
+      {isReloading && <LoadingIndicatorOverlay />}
+      <Flex
+        as={Box}
+        direction="row"
+        justifyContent="space-between"
+        marginBottom={2}
+      >
+        <Typography
+          variant="delta"
+          textColor="neutral800"
+          id="discussion-thread"
+        >
+          {getMessage("page.details.panel.discussion", "Discussion")}
+        </Typography>
+        {rootThread && (
+          <Link
+            to={getUrl(`discover/${rootThread.id}`)}
+            startIcon={<ArrowUp />}
+          >
+            {getMessage("page.details.panel.discussion.nav.back")}
+          </Link>
+        )}
+      </Flex>
+      <Flex as="ul" direction="column" alignItems="flex-start">
+        {rootThread && (
+          <DiscussionThreadItem
+            {...rootThread}
+            allowedActions={allowedActions}
+            isThreadAuthor
+            root
+            pinned
+          />
+        )}
+        {level.map((item) => {
+          const isSelected = selected.id === item.id;
+          const isThreadAuthor =
+            !isNil(selected?.threadOf?.author?.id) &&
+            selected?.threadOf?.author?.id === item?.author?.id;
+          return (
+            <DiscussionThreadItem
+              key={`comment-${item.id}`}
+              {...item}
+              allowedActions={allowedActions}
+              root={isNil(rootThread)}
+              blockedThread={rootThread?.blockedThread || item.blockedThread}
+              isSelected={isSelected}
+              isThreadAuthor={isThreadAuthor}
+            />
+          );
+        })}
+      </Flex>
+    </LoadingIndicatorContainer>
+  );
+};
+
+DiscussionThread.propTypes = {
+  level: PropTypes.array.isRequired,
+  selected: PropTypes.object.isRequired,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+  isReloading: PropTypes.bool,
+};
+
+export default DiscussionThread;

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

@@ -0,0 +1,71 @@
+/**
+ *
+ * Discussion thread - Item
+ *
+ */
+
+// @ts-nocheck
+
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "@strapi/design-system/Box";
+import { Flex } from "@strapi/design-system/Flex";
+import { Typography } from "@strapi/design-system/Typography";
+import DiscussionThreadItemFooter from "../DiscussionThreadItemFooter";
+import DiscussionThreadItemActions from "../DiscussionThreadItemActions";
+import {
+  DiscussionThreadItemContainer,
+  DiscussionThreadFullsize,
+  DiscussionThreadItemContent,
+} from "./styles";
+
+const DiscussionThreadItem = (props) => {
+  const { as = "li", isSelected, content, root, preview, pinned } = props;
+
+  return (
+    <DiscussionThreadFullsize as={as} marginBottom={preview ? 4 : 0}>
+      <DiscussionThreadItemContainer
+        as={Flex}
+        direction="column"
+        alignItems="flex-start"
+        hasRadius
+        background={isSelected ? "neutral100" : null}
+        paddingLeft={2}
+        paddingRight={2}
+        paddingTop={4}
+        paddingBottom={4}
+      >
+        <DiscussionThreadItemContent
+          as={Flex}
+          paddingBottom={2}
+          direction="row"
+        >
+          <Box as={Flex} grow={1} alignItems="center" marginTop="6px">
+            <Typography variant="omega" textColor="neutral800">
+              {content}
+            </Typography>
+          </Box>
+          {!preview && (
+            <DiscussionThreadItemActions
+              {...props}
+              root={root || pinned}
+              preview={preview}
+            />
+          )}
+        </DiscussionThreadItemContent>
+        <DiscussionThreadItemFooter {...props} />
+      </DiscussionThreadItemContainer>
+    </DiscussionThreadFullsize>
+  );
+};
+
+DiscussionThreadItem.propTypes = {
+  content: PropTypes.string.isRequired,
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+    canAccessReports: PropTypes.bool,
+    canReviewReports: PropTypes.bool,
+  }),
+};
+
+export default DiscussionThreadItem;

package/admin/src/components/DiscussionThreadItem/{styles.js → styles.ts}

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

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

@@ -0,0 +1,365 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+// @ts-nocheck
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { useMutation, useQueryClient } from "react-query";
+import { useHistory } from "react-router-dom";
+import { isNil, isEmpty } from "lodash";
+import { Flex } from "@strapi/design-system/Flex";
+import { IconButton } from "@strapi/design-system/IconButton";
+import { useNotification, useOverlayBlocker } from "@strapi/helper-plugin";
+import { Eye } from "@strapi/icons";
+import {
+  getMessage,
+  getUrl,
+  handleAPIError,
+  resolveCommentStatus,
+  resolveCommentStatusColor,
+} from "../../utils";
+import { DiscussionThreadItemActionsWrapper } from "./styles";
+import ConfirmationDialog from "../ConfirmationDialog";
+import {
+  blockItem,
+  blockItemThread,
+  unblockItem,
+  unblockItemThread,
+} from "../../pages/utils/api";
+import { pluginId } from "../../pluginId";
+import { LockIcon, UnlockIcon } from "../icons";
+import DiscussionThreadItemApprovalFlowActions from "../DiscussionThreadItemApprovalFlowActions";
+import StatusBadge from "../StatusBadge";
+import { IconButtonGroupStyled } from "../IconButton/styles";
+import { ActionButton } from "../ActionButton/styles";
+import DiscussionThreadItemReviewAction from "../DiscussionThreadItemReviewAction";
+
+const DiscussionThreadItemActions = ({
+  allowedActions: { canModerate, canAccessReports, canReviewReports },
+  ...item
+}) => {
+  const {
+    id,
+    blocked,
+    removed,
+    blockedThread,
+    gotThread,
+    threadItemsCount,
+    threadFirstItemId,
+    pinned,
+    preview,
+    reports = [],
+    approvalStatus,
+  } = item;
+
+  const [blockConfirmationVisible, setBlockConfirmationVisible] =
+    useState(false);
+  const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] =
+    useState(false);
+  const [blockButtonsDisabled, setBlockButtonsDisabled] =
+    useState(blockedThread);
+
+  const { push } = useHistory();
+  const toggleNotification = useNotification();
+  const queryClient = useQueryClient();
+  const { lockApp, unlockApp } = useOverlayBlocker();
+
+  const onSuccess =
+    (message, stateAction = () => {}) =>
+    async () => {
+      await queryClient.invalidateQueries("get-details-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",
+      setBlockConfirmationVisible
+    ),
+    onError,
+    refetchActive: false,
+  });
+  const unblockItemMutation = useMutation(unblockItem, {
+    onSuccess: onSuccess(
+      "page.details.actions.comment.unblock.confirmation.success"
+    ),
+    onError,
+    refetchActive: false,
+  });
+  const blockItemThreadMutation = useMutation(blockItemThread, {
+    onSuccess: onSuccess(
+      "page.details.actions.thread.block.confirmation.success",
+      setBlockThreadConfirmationVisible
+    ),
+    onError,
+    refetchActive: false,
+  });
+  const unblockItemThreadMutation = useMutation(unblockItemThread, {
+    onSuccess: onSuccess(
+      "page.details.actions.thread.unblock.confirmation.success"
+    ),
+    onError,
+    refetchActive: false,
+  });
+
+  const gotApprovalFlow = !isNil(approvalStatus);
+  const needsApproval = gotApprovalFlow && approvalStatus === "PENDING";
+  const isBlocked = blocked || blockedThread;
+  const isRejected = gotApprovalFlow && approvalStatus === "REJECTED";
+  const openReports = reports?.filter((_) => !_.resolved);
+  const hasReports = !isEmpty(openReports);
+  const reviewFlowEnabled =
+    (canAccessReports || canReviewReports) && hasReports;
+  const hasActiveThread =
+    gotThread && !(removed || preview || pinned || blockedThread);
+  const isStatusBadgeVisible = isBlocked || reviewFlowEnabled;
+
+  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 handleBlockClick = () => setBlockConfirmationVisible(true);
+  const handleBlockConfirm = async () => {
+    if (canModerate) {
+      lockApp();
+      blockItemMutation.mutate(id);
+    }
+  };
+  const handleBlockCancel = () => {
+    setBlockConfirmationVisible(false);
+  };
+  const handleUnblockClick = async () => {
+    if (canModerate) {
+      lockApp();
+      unblockItemMutation.mutate(id);
+    }
+  };
+
+  const handleBlockThreadClick = () => setBlockThreadConfirmationVisible(true);
+  const handleBlockThreadConfirm = async () => {
+    if (canModerate) {
+      lockApp();
+      blockItemThreadMutation.mutate(id);
+    }
+  };
+  const handleBlockThreadCancel = () => {
+    setBlockThreadConfirmationVisible(false);
+  };
+  const handleUnblockThreadClick = async () => {
+    if (canModerate) {
+      lockApp();
+      unblockItemThreadMutation.mutate(id);
+    }
+  };
+
+  const handleDrilldownClick = () => {
+    if (hasActiveThread) {
+      push(getUrl(`discover/${threadFirstItemId}`));
+    }
+  };
+
+  const handleBlockActionClick = async (mutation, onCallback) => {
+    lockApp();
+    await mutation.mutateAsync(id);
+    onCallback();
+  };
+
+  const handleBlockButtonsStateChange = (disabled) =>
+    setBlockButtonsDisabled(disabled);
+
+  const anyGroupButtonsVisible =
+    needsApproval || reviewFlowEnabled || !blockedThread;
+  const isLoading =
+    unblockItemMutation.isLoading ||
+    blockItemMutation.isLoading ||
+    blockItemThreadMutation.isLoading ||
+    unblockItemThreadMutation.isLoading;
+
+  if (removed || isRejected || !canModerate) {
+    return (
+      <DiscussionThreadItemActionsWrapper as={Flex} direction="row">
+        {renderStatus(item)}
+      </DiscussionThreadItemActionsWrapper>
+    );
+  }
+
+  return (
+    <>
+      <DiscussionThreadItemActionsWrapper as={Flex} direction="row">
+        {isStatusBadgeVisible && renderStatus(item)}
+        {!blockedThread && (gotThread || pinned) && (
+          <ActionButton
+            onClick={handleBlockThreadClick}
+            startIcon={<LockIcon />}
+            loading={blockItemThreadMutation.isLoading}
+            variant="danger"
+          >
+            {getMessage("page.details.actions.thread.block", "Block thread")}
+          </ActionButton>
+        )}
+        {blockedThread && (gotThread || pinned) && (
+          <ActionButton
+            onClick={handleUnblockThreadClick}
+            startIcon={<UnlockIcon />}
+            loading={unblockItemThreadMutation.isLoading}
+            variant="success"
+          >
+            {getMessage(
+              "page.details.actions.thread.unblock",
+              "Unblock thread"
+            )}
+          </ActionButton>
+        )}
+        {anyGroupButtonsVisible && (
+          <IconButtonGroupStyled isSingle withMargin>
+            {!blockedThread && !(blocked || needsApproval) && (
+              <IconButton
+                onClick={handleBlockClick}
+                loading={blockItemMutation.isLoading}
+                icon={<LockIcon />}
+                label={getMessage(
+                  "page.details.actions.comment.block",
+                  "Block"
+                )}
+              />
+            )}
+            {!blockedThread && blocked && (
+              <IconButton
+                onClick={handleUnblockClick}
+                loading={unblockItemMutation.isLoading}
+                icon={<UnlockIcon />}
+                label={getMessage(
+                  "page.details.actions.comment.unblock",
+                  "Unblock"
+                )}
+              />
+            )}
+            {needsApproval && (
+              <DiscussionThreadItemApprovalFlowActions
+                id={id}
+                allowedActions={{ canModerate }}
+                queryToInvalidate="get-details-data"
+              />
+            )}
+            <DiscussionThreadItemReviewAction
+              item={item}
+              queryToInvalidate="get-details-data"
+              areBlockButtonsDisabled={blockButtonsDisabled}
+              isLoading={isLoading}
+              allowedActions={{
+                canModerate,
+                canAccessReports,
+                canReviewReports,
+              }}
+              blockItemMutation={blockItemMutation}
+              blockItemThreadMutation={blockItemThreadMutation}
+              onBlockButtonsStateChange={handleBlockButtonsStateChange}
+              onBlockActionClick={handleBlockActionClick}
+            />
+          </IconButtonGroupStyled>
+        )}
+        {hasActiveThread && (
+          <IconButtonGroupStyled isSingle withMargin>
+            <IconButton
+              onClick={handleDrilldownClick}
+              icon={<Eye />}
+              label={getMessage(
+                "page.details.panel.discussion.nav.drilldown",
+                "Drilldown thread"
+              )}
+              style={
+                blocked && !blockedThread
+                  ? { marginTop: "1px", marginRight: ".5rem" }
+                  : {}
+              }
+            />
+          </IconButtonGroupStyled>
+        )}
+      </DiscussionThreadItemActionsWrapper>
+      {!blocked && (
+        <ConfirmationDialog
+          isVisible={blockConfirmationVisible}
+          isActionAsync={blockItemMutation.isLoading}
+          header={getMessage(
+            "page.details.actions.comment.block.confirmation.header"
+          )}
+          labelConfirm={getMessage(
+            "page.details.actions.comment.block.confirmation.button.confirm"
+          )}
+          iconConfirm={<LockIcon />}
+          onConfirm={handleBlockConfirm}
+          onCancel={handleBlockCancel}
+        >
+          {getMessage(
+            "page.details.actions.comment.block.confirmation.description"
+          )}
+        </ConfirmationDialog>
+      )}
+      {!blockedThread && (
+        <ConfirmationDialog
+          isVisible={blockThreadConfirmationVisible}
+          isActionAsync={blockItemThreadMutation.isLoading}
+          header={getMessage(
+            "page.details.actions.thread.block.confirmation.header"
+          )}
+          labelConfirm={getMessage(
+            "page.details.actions.thread.block.confirmation.button.confirm"
+          )}
+          iconConfirm={<LockIcon />}
+          onConfirm={handleBlockThreadConfirm}
+          onCancel={handleBlockThreadCancel}
+        >
+          {getMessage(
+            "page.details.actions.thread.block.confirmation.description"
+          )}
+        </ConfirmationDialog>
+      )}
+    </>
+  );
+};
+
+DiscussionThreadItemActions.propTypes = {
+  isRoot: PropTypes.bool,
+  blocked: PropTypes.bool.isRequired,
+  blockedThread: PropTypes.bool.isRequired,
+  approvalStatus: PropTypes.oneOfType([
+    PropTypes.nullable,
+    PropTypes.oneOf(["PENDING", "APPROVED", "REJECTED"]),
+  ]),
+  allowedActions: PropTypes.shape({
+    canModerate: PropTypes.bool,
+  }),
+};
+
+export default DiscussionThreadItemActions;

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

@@ -0,0 +1,9 @@
+// @ts-nocheck
+
+import styled from "styled-components";
+import { Box } from "@strapi/design-system/Box";
+
+export const DiscussionThreadItemActionsWrapper = styled(Box)`
+  margin-left: 1rem;
+  align-items: flex-start;
+`;