strapi-plugin-comments 2.1.2 → 2.1.3

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

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

@@ -1,9 +0,0 @@
-// @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/Discover/index.tsx

@@ -1,230 +0,0 @@
-/*
- *
- * Discover
- *
- */
-
-// @ts-nocheck
-
-import React, { memo, useRef, useMemo } from "react";
-import { connect } from "react-redux";
-import { bindActionCreators, compose } from "redux";
-import isEqual from "react-fast-compare";
-import { useQuery } from "react-query";
-import { useHistory } from "react-router-dom";
-import { isEmpty } from "lodash";
-import { Box } from "@strapi/design-system/Box";
-import {
-  Layout,
-  HeaderLayout,
-  ActionLayout,
-  ContentLayout,
-} from "@strapi/design-system/Layout";
-import { Table, Thead, Tbody, Tr, Th, Td } from "@strapi/design-system/Table";
-import { Typography } from "@strapi/design-system/Typography";
-import { VisuallyHidden } from "@strapi/design-system/VisuallyHidden";
-import { useNotifyAT } from "@strapi/design-system/LiveRegions";
-
-import {
-  EmptyStateLayout,
-  SearchURLQuery,
-  LoadingIndicatorPage,
-  useTracking,
-  useNotification,
-  useRBAC,
-  useFocusWhenNavigate,
-  useQueryParams,
-} from "@strapi/helper-plugin";
-import getMessage from "../../utils/getMessage";
-import { fetchData } from "./utils/api";
-import pluginPermissions from "../../permissions";
-
-import getUrl from "../../utils/getUrl";
-import Nav from "../../components/Nav";
-import TablePagination from "../../components/TablePagination";
-import filtersSchema from "./utils/filtersSchema";
-import TableFilters from "../../components/TableFilters";
-import makeAppView from "../App/reducer/selectors";
-import DiscoverTableRow from "./components/DiscoverTableRow";
-
-const Discover = ({ config }) => {
-  useFocusWhenNavigate();
-
-  const { push } = useHistory();
-  const { notifyStatus } = useNotifyAT();
-  const { trackUsage } = useTracking();
-  const trackUsageRef = useRef(trackUsage);
-  const toggleNotification = useNotification();
-  const [{ query: queryParams }] = useQueryParams();
-  const _q = queryParams?._q || "";
-
-  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 {
-    isLoading: isLoadingForData,
-    data: { result, pagination = {} },
-    isFetching,
-  } = useQuery(
-    ["get-data", queryParams, canAccess],
-    () => fetchData(queryParams, toggleNotification),
-    {
-      initialData: {},
-    }
-  );
-
-  const handleClickDisplay = (id) => {
-    push(getUrl(`discover/${id}`));
-  };
-
-  const isLoading = isLoadingForData || isFetching;
-  const { total } = pagination;
-
-  const emptyLayout = {
-    comments: {
-      id: getMessage("page.discover.table.empty"),
-      defaultMessage: "You don't have any comments yet.",
-    },
-    search: {
-      id: getMessage("page.discover.table.empty.search"),
-      defaultMessage: "No comments match the search.",
-    },
-  };
-
-  const emptyContent = _q ? "search" : "comments";
-
-  const COL_COUNT = 8;
-
-  if (canAccess) {
-    return (
-      <Box background="neutral100">
-        <Layout>
-          {isLoading || isLoadingForPermissions ? (
-            <LoadingIndicatorPage />
-          ) : (
-            <>
-              <HeaderLayout
-                title={getMessage("page.discover.header")}
-                subtitle={`${total} ${getMessage(
-                  "page.discover.header.count"
-                )}`}
-                as="h2"
-              />
-              <ActionLayout
-                startActions={
-                  <>
-                    <SearchURLQuery
-                      label={getMessage("search.label", "Search", false)}
-                    />
-                    <TableFilters displayedFilters={filtersSchema} />
-                  </>
-                }
-              />
-              <ContentLayout>
-                {!isEmpty(result) ? (
-                  <>
-                    <Table colCount={COL_COUNT} rowCount={result.length}>
-                      <Thead>
-                        <Tr>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage("page.discover.table.header.id")}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage("page.discover.table.header.author")}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage("page.discover.table.header.message")}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage("page.discover.table.header.thread")}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage("page.discover.table.header.entry")}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage(
-                                "page.discover.table.header.lastUpdate"
-                              )}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <Typography variant="sigma">
-                              {getMessage("page.discover.table.header.status")}
-                            </Typography>
-                          </Th>
-                          <Th>
-                            <VisuallyHidden>
-                              {getMessage("page.discover.table.header.actions")}
-                            </VisuallyHidden>
-                          </Th>
-                        </Tr>
-                      </Thead>
-                      <Tbody>
-                        {result.map((entry) => (
-                          <DiscoverTableRow
-                            key={`comment-${entry.id}`}
-                            config={config}
-                            item={entry}
-                            allowedActions={{
-                              canModerate,
-                              canAccessReports,
-                              canReviewReports,
-                            }}
-                            onClick={() => handleClickDisplay(entry.id)}
-                          />
-                        ))}
-                      </Tbody>
-                    </Table>
-                    <TablePagination
-                      pagination={{ pageCount: pagination?.pageCount || 1 }}
-                    />
-                  </>
-                ) : (
-                  <EmptyStateLayout content={emptyLayout[emptyContent]} />
-                )}
-              </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(Discover, isEqual));

package/admin/src/pages/Discover/utils/api.ts

@@ -1,22 +0,0 @@
-// @ts-nocheck
-
-import { stringify } from "qs";
-
-import { getApiURL, axiosInstance, handleAPIError } from "../../../utils";
-
-// eslint-disable-next-line import/prefer-default-export
-export const fetchData = async (queryParams, toggleNotification) => {
-  try {
-    const { data } = await axiosInstance.get(
-      getApiURL(
-        `moderate/all${
-          queryParams ? `?${stringify(queryParams, { encode: false })}` : ""
-        }`
-      )
-    );
-
-    return data;
-  } catch (err) {
-    handleAPIError(err, toggleNotification);
-  }
-};

package/admin/src/pages/Discover/utils/filtersSchema.ts

@@ -1,9 +0,0 @@
-const filtersSchema = [
-  {
-    name: "content",
-    metadatas: { label: "Message" },
-    fieldSchema: { type: "string" },
-  },
-];
-
-export default filtersSchema;

package/admin/src/pages/Settings/components/RestartAlert/styles.ts

@@ -1,10 +0,0 @@
-// @ts-nocheck
-
-import styled from "styled-components";
-import { Alert } from "@strapi/design-system/Alert";
-
-export const RestartAlert = styled(Alert)`
-  [role="status"] {
-    flex-direction: column;
-  }
-`;