strapi-plugin-comments 2.0.0-beta.2 → 2.0.0-beta.6

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

@@ -23,9 +23,10 @@ import { REPORT_REASON, REPORT_STATUS } from '../../utils/constants';
 const ReportsReviewTable = ({ 
     commentId,
     items,
-    mutation
+    mutation,
+    allowedActions: { canAccessReports, canReviewReports },
+    onBlockButtonsStateChange,
 }) => {
-
     const [storedItems, setStoredItems] = useState([]);
 
     const { formatDate } = useIntl();
@@ -58,18 +59,21 @@ const ReportsReviewTable = ({
     };
 
     const handleClickResolve = async (reportId) => {
+      if (canReviewReports) {
         lockApp();
         const item = await mutation.mutateAsync({
             id: commentId,
             reportId,
         });
-        console.log(item);
         if (item) {
-            setStoredItems(storedItems.map(_ => ({
-                ..._,
-                resolved: reportId === _.id ? true : _.resolved,
-            })));
+          const updatedItems = storedItems.map(_ => ({
+              ..._,
+              resolved: reportId === _.id ? true : _.resolved,
+          }));
+          setStoredItems(updatedItems);
+          onBlockButtonsStateChange(updatedItems.filter(_ => !_.resolved).length === 0);
         }
+      }
     }
 
     useEffect(() => {
@@ -82,61 +86,69 @@ 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,
 };
 
   export default ReportsReviewTable;

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

@@ -0,0 +1,6 @@
+import CommentsIcon from './comments';
+import ReviewIcon from './review';
+import LockIcon from './lock';
+import UnlockIcon from './unlock';
+
+export { CommentsIcon, ReviewIcon, LockIcon, UnlockIcon };

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

@@ -0,0 +1,22 @@
+
+import React from 'react';
+
+const initSize = 330;
+
+const LockIcon = ({ width, height, size = 16 }) =>     
+  <svg 
+    width={width || size} 
+    height={height || size} 
+    viewBox={`0 0 ${width || size} ${height || size}`} 
+    style={{ width: `${width || size}px`, height: `${height || size}px`, }} 
+    xmlns="http://www.w3.org/2000/svg">
+    <g style={ { transform: `scale(${(width || size)/initSize})` } }>
+      <path d="M165,330c63.411,0,115-51.589,115-115c0-29.771-11.373-56.936-30-77.379V85c0-46.869-38.131-85-85-85
+      S80.001,38.131,80.001,85v52.619C61.373,158.064,50,185.229,50,215C50,278.411,101.589,330,165,330z M180,219.986V240
+      c0,8.284-6.716,15-15,15s-15-6.716-15-15v-20.014c-6.068-4.565-10-11.824-10-19.986c0-13.785,11.215-25,25-25s25,11.215,25,25
+      C190,208.162,186.068,215.421,180,219.986z M110.001,85c0-30.327,24.673-55,54.999-55c30.327,0,55,24.673,55,55v29.029
+      C203.652,105.088,184.91,100,165,100c-19.909,0-38.651,5.088-54.999,14.028V85z"/>
+    </g>
+  </svg>
+
+  export default LockIcon;

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

@@ -0,0 +1,18 @@
+
+import React from 'react';
+
+const initSize = 16;
+
+const ReviewIcon = ({ width, height, size = 16 }) =>     
+  <svg 
+    width={width || size} 
+    height={height || size} 
+    viewBox={`0 0 ${width || size} ${height || size}`} 
+    style={{ width: `${width || size}px`, height: `${height || size}px`, }} 
+    xmlns="http://www.w3.org/2000/svg">
+    <g style={ {transform: `scale(${(width || size)/initSize})` } }>
+      <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>
+
+  export default ReviewIcon;

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

@@ -0,0 +1,20 @@
+
+import React from 'react';
+
+const initSize = 330;
+
+const UnlockIcon = ({ width, height, size = 16 }) =>     
+  <svg 
+    width={width || size} 
+    height={height || size} 
+    viewBox={`0 0 ${width || size} ${height || size}`} 
+    style={{ width: `${width || size}px`, height: `${height || size}px`, }} 
+    xmlns="http://www.w3.org/2000/svg">
+    <g style={ { transform: `scale(${(width || size)/initSize})` } }>
+      <path d="M15,160c8.283,0,15-6.716,15-15V85c0-30.327,24.672-55,55-55c30.326,0,55,24.673,55,55v42.893
+      c-24.479,21.105-40,52.327-40,87.107c0,63.411,51.588,115,115,115c63.41,0,115-51.589,115-115s-51.59-115-115-115
+      c-15.961,0-31.172,3.271-45,9.174V85c0-46.869-38.131-85-85-85S0,38.131,0,85v60C0,153.284,6.715,160,15,160z"/>
+    </g>
+  </svg>
+
+  export default UnlockIcon;

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/App/index.js

@@ -5,7 +5,9 @@
  *
  */
 
-import React, { useReducer } from 'react';
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
 import { Switch, Route } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { 
@@ -18,23 +20,19 @@ import getUrl from '../../utils/getUrl';
 import Discover from '../Discover';
 import Details from '../Details';
 import { fetchConfig } from './utils/api';
-import initReducer from './reducer/init';
-import reducer, { initialState } from './reducer';
 import { setConfig } from './reducer/actions';
+import makeAppView from './reducer/selectors';
 
-const App = () => {
+const App = ({ setConfig }) => {
 
   const toggleNotification = useNotification();
-  const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
-    initReducer(initialState)
-  );
 
   const { isLoading, isFetching } = useQuery(
     'get-config', () => fetchConfig(toggleNotification),
     {
       initialData: { },
       onSuccess: (response) => {
-        dispatch(setConfig(response));
+        setConfig(response);
       }
     }
   );
@@ -57,4 +55,17 @@ const App = () => {
   );
 };
 
-export default App;
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    { setConfig },
+    dispatch
+  );
+}
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps
+);
+
+export default compose(withConnect)(App);

package/admin/src/pages/App/reducer/index.js

@@ -18,7 +18,6 @@ const reducer = (state = initialState, action) =>
         return draftState?.config;
       }
       default:
-        console.log('draftState', draftState);
         return draftState;
     }
   });

package/admin/src/pages/App/reducer/selectors.js

@@ -26,7 +26,7 @@ const makeAppView = () =>
   );
 
 const selectConfig = state => {
-  const { config } = state[REDUCER_NAME];
+  const { config } = state;
 
   return config;
 };

package/admin/src/pages/App/utils/api.js

@@ -1,7 +1,4 @@
-import { stringify } from 'qs';
-import { isEmpty } from 'lodash';
-
-import { getApiURL, axiosInstance } from '../../../utils';
+import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
 
 // eslint-disable-next-line import/prefer-default-export
 export const fetchConfig = async (toggleNotification) => {
@@ -10,11 +7,6 @@ export const fetchConfig = async (toggleNotification) => {
 
     return data;
   } catch (err) {
-    toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error' },
-    });
-
-    throw new Error('error');
+    handleAPIError(err, toggleNotification);
   }
 };

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('button.back.label', '', 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));