strapi-plugin-comments 2.0.0-beta.1 → 2.0.0-beta.5

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

@@ -0,0 +1,8 @@
+import { GET_CONFIG, SET_CONFIG } from "./constants";
+
+export const setConfig = data => ({
+    data,
+    type: SET_CONFIG,
+  });
+
+export const getConfig = () => ({ type: GET_CONFIG });

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

@@ -0,0 +1,4 @@
+export const REDUCER_NAME = 'plugin-comments_app';
+
+export const SET_CONFIG = 'SET_CONFIG';
+export const GET_CONFIG = 'GET_CONFIG';

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

@@ -0,0 +1,26 @@
+import produce from 'immer'; // current
+import { set } from 'lodash';
+import { GET_CONFIG, SET_CONFIG } from './constants';
+
+const initialState = {
+  config: {},
+};
+
+const reducer = (state = initialState, action) =>
+  // eslint-disable-next-line consistent-return
+  produce(state, draftState => {
+    switch (action.type) {
+      case SET_CONFIG: {
+        set(draftState, 'config', action.data);
+        break;
+      }
+      case GET_CONFIG: {
+        return draftState?.config;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;
+export { initialState };

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

@@ -0,0 +1,7 @@
+const initReducer = (initialState) => {
+    return {
+      ...initialState,
+    };
+  };
+  
+  export default initReducer;

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

@@ -0,0 +1,35 @@
+
+   
+import { createSelector } from 'reselect';
+import { initialState } from './';
+import { REDUCER_NAME } from './constants';
+
+/**
+ * Direct selector to the listView state domain
+ */
+const appView = () => state => state[REDUCER_NAME] || initialState;
+
+/**
+ * Other specific selectors
+ */
+
+/**
+ * Default selector used by listView
+ */
+
+const makeAppView = () =>
+  createSelector(
+    appView(),
+    substate => {
+      return substate;
+    }
+  );
+
+const selectConfig = state => {
+  const { config } = state;
+
+  return config;
+};
+
+export default makeAppView;
+export { appView, selectConfig };

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

@@ -0,0 +1,12 @@
+import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchConfig = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getApiURL(`moderate/config`));
+
+    return data;
+  } catch (err) {
+    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 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,36 @@
+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 
+                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 {
@@ -54,16 +59,20 @@ const Details = () => {
     allowedActions: { canView },
   } = 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],
+    () => 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],
@@ -74,28 +83,33 @@ const Details = () => {
     }
   )
 
+  const handleChangeFilters = props => setFilters(props);
+
   const isLoading = isLoadingForData || isFetching;
 
   return <Box background="neutral100">
-          <Layout sideNav={<Nav />}>
+          <Layout>
             {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (<LoadingIndicatorPage />) : (
             <>
               <HeaderLayout 
                 navigationAction={
                 <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
-                  { getMessage('button.back.label', '', false) }
+                  { getMessage('HeaderLayout.link.go-back', 'Back', false) }
                 </Link>}
                 title={ getMessage('page.details.header') } 
-                subtitle={ getMessage('page.details.header.description') } as="h2" />
+                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} />} 
                   endCol={ <Stack size={2}>
                     <DiscussionStatus item={selected} />
                     { !contentTypeData?.schema ? (<Box padding={4}>
-                        <Loader small>Fetching entity...</Loader>
+                        <Loader small>{ getMessage('page.details.panel.loading', 'Loading...') }</Loader>
                       </Box>) : 
-                      (<EntityDetails data={entity} schema={contentTypeData?.schema} />)
+                      (<DetailsEntity data={entity} schema={contentTypeData?.schema} config={config} />)
                     }
                   </Stack>
                   } 
@@ -106,4 +120,17 @@ const Details = () => {
         </Box>;
 }
 
-export default Details;
+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

@@ -0,0 +1,190 @@
+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 { 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';
+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 ReportsReviewModal from '../../../../components/ReportsReviewModal';
+import ReportsReviewTable from '../../../../components/ReportsReviewTable';
+import { blockItem, blockItemThread, resolveReport } 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';
+
+const DiscoverTableRow = ({ config, item, onClick }) => {
+
+    const { id, reports } = item;
+
+    const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+    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 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
+        ),
+        onError,
+        refetchActive: false,
+    });
+    const blockItemThreadMutation = useMutation(blockItemThread, {
+        onSuccess: onSuccess(
+            'page.details.actions.thread.block.confirmation.success', 
+            setReportsReviewVisible
+        ),
+        onError,
+        refetchActive: false,
+    });
+
+    const handleReportsReviewClick = () => setReportsReviewVisible(true);
+    const handleBlockItemClick = async () => {
+        lockApp();
+        blockItemMutation.mutate(id);
+    };
+    const handleBlockItemThreadClick = async () => {
+        lockApp();
+        blockItemThreadMutation.mutate(id);
+    };
+    const handleReportsReviewClose = async () => {
+        await queryClient.invalidateQueries('get-data');
+        setReportsReviewVisible(false);
+    };
+
+    const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
+    const openReports = reports?.filter(_ => !_.resolved);
+    const hasReports = !isEmpty(openReports);
+    const reviewFlowEnabled = 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 (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage({
+            id: `page.common.item.status.${status}`,
+            props: {
+                count: openReports.length
+            }
+        }, status) }</Badge>);
+      };
+    
+      const renderEntryUrl = entry => `/content-manager/collectionType/${entry.uid}/${entry.id}`;
+      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 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' }}>
+                <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">
+                    <Stack size={actionItemsCount} horizontal>
+                        { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
+                        { needsApproval &&  (<DiscussionThreadItemApprovalFlowActions id={item.id} queryToInvalidate="get-data" />)}
+                        <IconButton onClick={handleClick} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
+                    </Stack>
+                </Flex>
+                { reviewFlowEnabled && (<ReportsReviewModal 
+                    isVisible={reportsReviewVisible}
+                    isActionAsync={isLoading}
+                    onClose={handleReportsReviewClose}
+                    startActions={<>
+                        <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}
+                                onBlockButtonsStateChange={handleBlockButtonsStateChange}
+                            />
+                </ReportsReviewModal>) }
+            </Td>
+        </Tr>
+    );
+};
+
+DiscoverTableRow.propTypes = {
+    config: PropTypes.object.isRequired,
+    item: PropTypes.object.isRequired,
+    onClick: PropTypes.func.isRequired,
+};
+
+export default DiscoverTableRow;

package/admin/src/pages/Discover/components/DiscoverTableRow/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;
+`