strapi-plugin-comments 2.1.2 → 2.1.3

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

@@ -1,31 +0,0 @@
-/**
- *
- * Avatar
- *
- */
-
-// @ts-nocheck
-
-import React from "react";
-import PropTypes from "prop-types";
-import { isObject } from "lodash";
-import { Avatar, Initials } from "@strapi/design-system/Avatar";
-import { renderInitials } from "../../utils";
-
-const UserAvatar = ({ avatar, name }) => {
-  if (avatar) {
-    let image = avatar;
-    if (isObject(avatar)) {
-      image = avatar?.formats?.thumbnail.url || avatar.url;
-    }
-    return <Avatar src={image} alt={name} />;
-  }
-  return <Initials>{renderInitials(name)}</Initials>;
-};
-
-UserAvatar.propTypes = {
-  avatar: PropTypes.oneOfType(PropTypes.string, PropTypes.object).isRequired,
-  name: PropTypes.string,
-};
-
-export default UserAvatar;

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

@@ -1,88 +0,0 @@
-/**
- *
- * 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

@@ -1,36 +0,0 @@
-/**
- *
- * 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

@@ -1,97 +0,0 @@
-/**
- *
- * 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

@@ -1,71 +0,0 @@
-/**
- *
- * 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.ts

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

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

@@ -1,365 +0,0 @@
-/**
- *
- * 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;