strapi-plugin-comments 2.0.0-rc.2 → 2.0.3

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

@@ -6,24 +6,27 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { capitalize, isNil, first, take } from 'lodash';
+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 = {} }) => {
+const DetailsEntity = ({ 
+    data = {}, 
+    schema = {}, 
+    config = {}, 
+    filters,
+    onFiltersChange
+}) => {
     const { entryLabel = {} } = config;
     const { attributes = {} } = schema;
     const keys = Object.keys(attributes);
     const entityLabelKey = first(entryLabel[data?.uid]);
-    
-    if (keys.length === 0) {
-        return null;
-    }
-
+ 
     const FIELDS_LIMIT = 5;
     const itemKeys = take(
         keys.filter(_ => (attributes[_].type === 'string') && !isNil(data[_]) && (_ !== entityLabelKey)),
@@ -34,25 +37,38 @@ const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
         .map(_ => capitalize(_))
         .join(' ');
 
+    const entityIsRenderable = data && !isEmpty(data) && !isEmpty(itemKeys);
+
     return (<Box padding={4}>
-        <Typography variant="sigma" textColor="neutral600" id="entity-details">
-            { getMessage('page.details.panel.entity', 'Details') }
-        </Typography>
-        <Box paddingTop={2} paddingBottom={6}>
-            <Divider />
+        { 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>
-        <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>);
 };
 
@@ -60,6 +76,8 @@ 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.js

@@ -3,8 +3,7 @@ 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 { Switch } from '@strapi/design-system/Switch';
-import { Typography } from '@strapi/design-system/Typography'; 
+import { Checkbox } from '@strapi/design-system/Checkbox';
 import { getMessage } from '../../../../utils';
 
 const DetailsFilters = ({ data, onChange }) => {
@@ -17,14 +16,13 @@ const DetailsFilters = ({ data, onChange }) => {
     });
 
     return (<Box as={Flex}>
-        <Stack size={2} horizontal>
-            <Typography variant="epsilon">{getMessage('page.details.filters.label', '')}</Typography>
-            <Switch 
-                label={getMessage('page.details.filters.removed.label', 'Comments visibility')} 
-                onLabel={getMessage('page.details.filters.removed.show', 'Show')} 
-                offLabel={getMessage('page.details.filters.removed.hide', 'Hide')}
-                selected={removed} onChange={() => handleOnChange('removed', !removed)} 
-                visibleLabels />
+        <Stack size={2} vertical>
+            <Checkbox 
+                checked={removed} 
+                onChange={() => handleOnChange('removed', !removed)} 
+                visibleLabels>
+                    { getMessage('page.details.filters.removed.label', 'Show removed comments') }
+                </Checkbox>
         </Stack>
     </Box>);
 };

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

@@ -12,10 +12,8 @@ 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 { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Loader } from '@strapi/design-system/Loader';
-import { Stack } from '@strapi/design-system/Stack';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { ArrowLeft } from '@strapi/icons';
 
@@ -30,13 +28,11 @@ import {
 import getMessage from '../../utils/getMessage';
 import { fetchDetailsData, fetchContentTypeData } from '../utils/api';
 import pluginPermissions from '../../permissions';
-import { getUrl } from '../../utils';
+import { getUrl, parseRegExp } from '../../utils';
 import Nav from '../../components/Nav';
 import DetailsEntity from './components/DetailsEntity';
 import DiscussionThread from '../../components/DiscussionThread';
-import DiscussionStatus from '../../components/DiscussionStatus';
 import makeAppView from '../App/reducer/selectors';
-import DetailsFilters from './components/DetailsFilters';
 
 const Details = ({ config }) => {
   useFocusWhenNavigate();
@@ -64,7 +60,10 @@ const Details = ({ config }) => {
 
   const [filters, setFilters] = useState({});
 
-  const regexUID = new RegExp(config.regex.uid);
+  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],
@@ -102,21 +101,16 @@ const Details = ({ config }) => {
                   </Link>}
                   title={ getMessage('page.details.header') } 
                   subtitle={ getMessage('page.details.header.description') } 
-                  primaryAction={<DetailsFilters data={filters} onChange={handleChangeFilters} />}
-                  secondaryAction={<Box as={Flex}>&nbsp;</Box>}
                   as="h2" />
                 <ContentLayout>
                   <TwoColsLayout 
                     startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} allowedActions={{ canModerate, canAccessReports, canReviewReports }} />} 
-                    endCol={ <Stack size={2}>
-                      <DiscussionStatus item={selected} />
-                      { !contentTypeData?.schema ? (<Box padding={4}>
-                          <Loader small>{ getMessage('page.details.panel.loading', 'Loading...') }</Loader>
-                        </Box>) : 
-                        (<DetailsEntity data={entity} schema={contentTypeData?.schema} config={config} />)
-                      }
-                    </Stack>
-                    } 
+                    endCol={<DetailsEntity 
+                      data={entity} 
+                      schema={contentTypeData?.schema} 
+                      config={config}
+                      filters={filters}
+                      onFiltersChange={handleChangeFilters} />}
                   />
                 </ContentLayout>
               </>) }

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

@@ -2,12 +2,8 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from 'react-query';
-import { isNil, isEmpty, orderBy } from 'lodash';
+import { isNil, isEmpty } from 'lodash';
 import { Avatar, Initials } from '@strapi/design-system/Avatar';
-import { Badge } from '@strapi/design-system/Badge';
-import { Box } from '@strapi/design-system/Box'; 
-import { Button } from '@strapi/design-system/Button'; 
-import { Divider } from '@strapi/design-system/Divider'; 
 import { Flex } from '@strapi/design-system/Flex'; 
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Link } from '@strapi/design-system/Link';
@@ -17,20 +13,20 @@ 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 ReportsReviewModal from '../../../../components/ReportsReviewModal';
-import ReportsReviewTable from '../../../../components/ReportsReviewTable';
-import { blockItem, blockItemThread, resolveReport } from '../../../utils/api';
+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 [reportsReviewVisible, setReportsReviewVisible] = useState(false);
     const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
 
     const { formatDate } = useIntl();
@@ -52,34 +48,17 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
 
     const onError = err => { handleAPIError(err, toggleNotification); };
 
-    const resolveReportMutation = useMutation(resolveReport, {
-        onSuccess: onSuccess('page.details.panel.discussion.warnings.reports.dialog.confirmation.success', () => {}, false),
-        onError,
-        refetchActive: false,
-    });
-
     const blockItemMutation = useMutation(blockItem, {
-        onSuccess: onSuccess(
-            'page.details.actions.comment.block.confirmation.success', 
-            setReportsReviewVisible
-        ),
+        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', 
-            setReportsReviewVisible
-        ),
+        onSuccess: onSuccess('page.details.actions.thread.block.confirmation.success'),
         onError,
         refetchActive: false,
     });
 
-    const handleReportsReviewClick = () => {
-        if (canAccessReports) {
-            setReportsReviewVisible(true);
-        }
-    };
     const handleBlockItemClick = async () => {
         if (canModerate) {
             lockApp();
@@ -92,12 +71,14 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
             blockItemThreadMutation.mutate(id);
         }
     };
-    const handleReportsReviewClose = async () => {
-        await queryClient.invalidateQueries('get-data');
-        setReportsReviewVisible(false);
+
+    const handleBlockActionClick = async (mutation, onCallback) => {
+        lockApp();
+        await mutation.mutateAsync(id);
+        onCallback();
     };
 
-    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
+    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading;
     const openReports = reports?.filter(_ => !_.resolved);
     const hasReports = !isEmpty(openReports);
     const reviewFlowEnabled = (canAccessReports && hasReports) && !(item.blocked || item.blockedThread);
@@ -109,15 +90,15 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
         const status = resolveCommentStatus({ ...props, reviewFlowEnabled });
         const color = resolveCommentStatusColor(status);
    
-        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage({
+        return (<StatusBadge backgroundColor={`${color}100`} textColor={`${color}700`} color={color}>{ getMessage({
             id: `page.common.item.status.${status}`,
             props: {
                 count: openReports.length
             }
-        }, status) }</Badge>);
+        }, status) }</StatusBadge>);
       };
     
-      const renderEntryUrl = entry => `/content-manager/collectionType/${entry.uid}/${entry.id}`;
+      const renderEntryUrl = entry => entry ? `/content-manager/collectionType/${entry.uid}/${entry.id}` : null;
       const renderDetailsUrl = entry => getUrl(`discover/${entry.id}`);
 
       const gotApprovalFlow = !isNil(item.approvalStatus);
@@ -149,7 +130,7 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
                 }, '#' + item.threadOf.id) }</Link>) : '-' }
             </Td>
             <Td style={{ maxWidth: '15vw' }}>
-                <TableLink to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related, config) }</TableLink>
+                { 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>
@@ -159,45 +140,27 @@ const DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAcce
             </Td>
             <Td>
                 <Flex direction="column" alignItems="flex-end">
-                    <Stack size={actionItemsCount} horizontal>
-                        { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
+                    <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 />} />
-                    </Stack>
+                    </IconButtonGroupStyled>
                 </Flex>
-                { reviewFlowEnabled && (<ReportsReviewModal 
-                    isVisible={reportsReviewVisible}
-                    isActionAsync={isLoading}
-                    allowedActions={{ canModerate, canAccessReports, canReviewReports }}
-                    onClose={handleReportsReviewClose}
-                    startActions={canModerate && (<>
-                        <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
-                            { getMessage(`page.details.actions.comment.block`, 'Block comment') }
-                        </Button>
-                        { item.gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
-                            { getMessage(`page.details.actions.thread.block`, 'Block thread') }
-                        </Button>) }
-                    </>)}
-                    item={item}>
-                        <Typography variant="sigma" textColor="neutral600" id="reports-list">
-                            { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
-                        </Typography>
-                        <Box paddingTop={2} paddingBottom={6}>
-                            <Divider />
-                        </Box>
-                        <ReportsReviewTable
-                                commentId={item.id} 
-                                items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
-                                mutation={resolveReportMutation}
-                                allowedActions={{ canAccessReports, canReviewReports }}
-                                onBlockButtonsStateChange={handleBlockButtonsStateChange}
-                            />
-                </ReportsReviewModal>) }
             </Td>
         </Tr>
     );