strapi-plugin-comments 2.0.0-beta.4 → 2.0.0-rc.1

package/admin/src/components/ReportsReviewTable/index.js

@@ -24,9 +24,9 @@ const ReportsReviewTable = ({
     commentId,
     items,
     mutation,
+    allowedActions: { canAccessReports, canReviewReports },
     onBlockButtonsStateChange,
 }) => {
-
     const [storedItems, setStoredItems] = useState([]);
 
     const { formatDate } = useIntl();
@@ -59,12 +59,12 @@ const ReportsReviewTable = ({
     };
 
     const handleClickResolve = async (reportId) => {
+      if (canReviewReports) {
         lockApp();
         const item = await mutation.mutateAsync({
             id: commentId,
             reportId,
         });
-        console.log(item);
         if (item) {
           const updatedItems = storedItems.map(_ => ({
               ..._,
@@ -73,6 +73,7 @@ const ReportsReviewTable = ({
           setStoredItems(updatedItems);
           onBlockButtonsStateChange(updatedItems.filter(_ => !_.resolved).length === 0);
         }
+      }
     }
 
     useEffect(() => {
@@ -85,61 +86,68 @@ const ReportsReviewTable = ({
 
     const COL_COUNT = 6;
 
-    return (<Table colCount={COL_COUNT} rowCount={storedItems.length}>
-        <Thead>
-          <Tr>
-            <Th>
-              <BaseCheckbox aria-label="Select all entries" />
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.reason') }</Typography>
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.content') }</Typography>
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.createdAt') }</Typography>
-            </Th>
-            <Th>
-              <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.status') }</Typography>
-            </Th>
-            <Th>
-              <VisuallyHidden>{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions') }</VisuallyHidden>
-            </Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {storedItems.map(entry => <Tr key={entry.id}>
-              <Td>
-                <BaseCheckbox aria-label={`Select report`} />
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{renderReason(entry.reason)}</Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{entry.content}</Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{ formatDate(entry.createdAt, { dateStyle: 'short', timeStyle: 'short' }) }</Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">{ renderStatus(entry.resolved) }</Typography>
-              </Td>
-              <Td>
-                  { !entry.resolved && (<Flex direction="column" alignItems="flex-end">
-                        <Button onClick={() => handleClickResolve(entry.id)} startIcon={<Check />} variant="success">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions.resolve', 'resolve') }</Button>
-                    </Flex>) }
-              </Td>
-            </Tr>)}
-        </Tbody>
-        {/* <TFooter /> */}
-      </Table>)
+    if (canAccessReports) {
+      return (<Table colCount={COL_COUNT} rowCount={storedItems.length}>
+          <Thead>
+            <Tr>
+              <Th>
+                <BaseCheckbox aria-label="Select all entries" />
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.reason') }</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.content') }</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.createdAt') }</Typography>
+              </Th>
+              <Th>
+                <Typography variant="sigma">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.status') }</Typography>
+              </Th>
+              { canReviewReports && (<Th>
+                <VisuallyHidden>{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions') }</VisuallyHidden>
+              </Th>)}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {storedItems.map(entry => <Tr key={entry.id}>
+                <Td>
+                  <BaseCheckbox aria-label={`Select report`} />
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{renderReason(entry.reason)}</Typography>
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{entry.content}</Typography>
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{ formatDate(entry.createdAt, { dateStyle: 'short', timeStyle: 'short' }) }</Typography>
+                </Td>
+                <Td>
+                  <Typography textColor="neutral800">{ renderStatus(entry.resolved) }</Typography>
+                </Td>
+                { canReviewReports && (<Td>
+                    { !entry.resolved && (<Flex direction="column" alignItems="flex-end">
+                          <Button onClick={() => handleClickResolve(entry.id)} startIcon={<Check />} variant="success">{ getMessage('page.details.panel.discussion.warnings.reports.dialog.actions.resolve', 'resolve') }</Button>
+                      </Flex>) }
+                </Td>)}
+              </Tr>)}
+          </Tbody>
+          {/* <TFooter /> */}
+        </Table>);
+    }
+    return null;
 };
 
 ReportsReviewTable.propTypes = {
-    commentId: PropTypes.string.isRequired,
+    commentId: PropTypes.oneOfType(PropTypes.string, PropTypes.number).isRequired,
     items: PropTypes.array.isRequired,
     mutation: PropTypes.func.isRequired,
+    allowedActions: PropTypes.shape({
+      canAccessReports: PropTypes.bool,
+      canReviewReports: PropTypes.bool, 
+    }),
     onBlockButtonsStateChange: PropTypes.func.isRequired,
 };
 

package/admin/src/components/icons/review.js

@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-const initSize = 24;
+const initSize = 16;
 
 const ReviewIcon = ({ width, height, size = 16 }) =>     
   <svg 
@@ -11,7 +11,7 @@ const ReviewIcon = ({ width, height, size = 16 }) =>
     style={{ width: `${width || size}px`, height: `${height || size}px`, }} 
     xmlns="http://www.w3.org/2000/svg">
     <g style={ {transform: `scale(${(width || size)/initSize})` } }>
-      <path strokeWidth="1" d="M5.5,21 C7.98528137,21 10,18.9852814 10,16.5 C10,14.0147186 7.98528137,12 5.5,12 C3.01471863,12 1,14.0147186 1,16.5 C1,18.9852814 3.01471863,21 5.5,21 Z M1,16 L1,7 L1,6.5 C1,4.01471863 3.01471863,2 5.5,2 L6,2 M23,16 L23,7 L23,6.5 C23,4.01471863 20.9852814,2 18.5,2 L18,2 M18.5,21 C20.9852814,21 23,18.9852814 23,16.5 C23,14.0147186 20.9852814,12 18.5,12 C16.0147186,12 14,14.0147186 14,16.5 C14,18.9852814 16.0147186,21 18.5,21 Z M10,17 C10,17 10,15 12,15 C14,15 14,17 14,17"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M0 4a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H4a4 4 0 01-4-4V4zm6.996.165a1.017 1.017 0 112.012 0L8 11 6.996 4.165zM8 11a1 1 0 110 2 1 1 0 010-2z" />
     </g>
   </svg>
 

package/admin/src/index.js

@@ -23,7 +23,7 @@ export default {
 
         return component;
       },
-      permissions: pluginPermissions,
+      permissions: pluginPermissions.access,
     });
     app.addReducers(reducers);
     app.registerPlugin({

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

@@ -0,0 +1,66 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { capitalize, isNil, 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';
+
+const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
+    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)),
+        FIELDS_LIMIT
+    );
+
+    const formatLabel = (label = '') => label.split('_')
+        .map(_ => capitalize(_))
+        .join(' ');
+
+    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 />
+        </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>);
+};
+
+DetailsEntity.propTypes = {
+    data: PropTypes.object.isRequired,
+    schema: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+};
+
+export default DetailsEntity;
+ 

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

@@ -0,0 +1,37 @@
+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 { Switch } from '@strapi/design-system/Switch';
+import { Typography } from '@strapi/design-system/Typography'; 
+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} 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>
+    </Box>);
+};
+
+DetailsFilters.propTypes = {
+    data: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+};
+
+export default DetailsFilters;

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

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

@@ -4,11 +4,15 @@
  *
  */
 
-import React, { useRef, useMemo } from 'react';
+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 { 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';
@@ -24,16 +28,17 @@ import {
   useFocusWhenNavigate,
 } from '@strapi/helper-plugin';
 import getMessage from '../../utils/getMessage';
-import { fetchDetailsData, fetchContentTypeData } from './utils/api';
+import { fetchDetailsData, fetchContentTypeData } from '../utils/api';
 import pluginPermissions from '../../permissions';
 import { getUrl } from '../../utils';
 import Nav from '../../components/Nav';
-import { REGEX } from '../../utils/constants';
-import EntityDetails from '../../components/EntityDetails';
+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 = () => {
+const Details = ({ config }) => {
   useFocusWhenNavigate();
 
   const {
@@ -45,28 +50,35 @@ const Details = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
 
-  const viewPermissions = useMemo(() => {
-    return { view: pluginPermissions.view };
-  }, []);
+  const viewPermissions = useMemo(() => ({ 
+    access: pluginPermissions.access,
+    moderate: pluginPermissions.moderate,
+    accessReports:  pluginPermissions.reports,
+    reviewReports: pluginPermissions.reportsReview,
+  }), []);
 
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canView },
+    allowedActions: { canAccess, canModerate, canAccessReports, canReviewReports },
   } = useRBAC(viewPermissions);
 
+  const [filters, setFilters] = useState({});
+
+  const regexUID = new RegExp(config.regex.uid);
+
   const { isLoading: isLoadingForData, data, isFetching } = useQuery(
-    ['get-details-data', id],
-    () => fetchDetailsData(id, toggleNotification),
+    ['get-details-data', id, filters, canAccess],
+    () => fetchDetailsData(id, filters, toggleNotification),
     {
       initialData: { },
     }
   );
 
   const { entity, level, selected } = data;
-  const entityUidValid = entity?.uid && REGEX.uid.test(entity?.uid);
+  const entityUidValid = entity?.uid && regexUID.test(entity.uid);
 
   const { data: contentTypeData } = useQuery(
-    ['get-additional-data', entity?.uid],
+    ['get-additional-data', entity?.uid, canAccess],
     () => fetchContentTypeData(entity?.uid, toggleNotification),
     {
       enabled: !!entity?.uid, 
@@ -74,36 +86,57 @@ const Details = () => {
     }
   )
 
+  const handleChangeFilters = props => setFilters(props);
+
   const isLoading = isLoadingForData || isFetching;
 
-  return <Box background="neutral100">
-          <Layout sideNav={<Nav />}>
-            {(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} />} 
-                  endCol={ <Stack size={2}>
-                    <DiscussionStatus item={selected} />
-                    { !contentTypeData?.schema ? (<Box padding={4}>
-                        <Loader small>Fetching entity...</Loader>
-                      </Box>) : 
-                      (<EntityDetails data={entity} schema={contentTypeData?.schema} />)
-                    }
-                  </Stack>
-                  } 
-                />
-              </ContentLayout>
-            </>) }
-          </Layout>
-        </Box>;
+  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') } 
+                  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>
+                    } 
+                  />
+                </ContentLayout>
+              </>) }
+            </Layout>
+          </Box>;
+  }
+  return null;
+}
+
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    { },
+    dispatch
+  );
 }
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps
+);
 
-export default Details;
+export default compose(withConnect)(memo(Details, isEqual));