strapi-plugin-comments 2.0.11 → 2.1.1

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

@@ -1,35 +0,0 @@
-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.js

@@ -1,8 +0,0 @@
-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.js

@@ -1,136 +0,0 @@
-/*
- *
- * Details
- *
- */
-
-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.js

@@ -1,180 +0,0 @@
-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 { Avatar, Initials } from '@strapi/design-system/Avatar';
-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, renderInitials, 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';
-
-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>
-                    { item.author?.avatar ? <Avatar src={item.author?.avatar} alt={item.author.name} /> : <Initials>{ renderInitials(item.author.name) }</Initials> }
-                    <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.js

@@ -1,8 +0,0 @@
-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.js

@@ -1,173 +0,0 @@
-/*
- *
- * Discover
- *
- */
-
-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.js

@@ -1,14 +0,0 @@
-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.js

@@ -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.js

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