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

package/README.md

@@ -74,8 +74,12 @@ To setup amend default plugin configuration we recommend to put following snippe
 ```js
     ...
     comments: {
-      badWords: false,
-      moderatorRoles: ["Authenticated"]
+        badWords: false,
+        moderatorRoles: ["Authenticated"],
+        entryLabel: {
+            '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
+            'api::page.page': ['MyField'],
+        },
     },
     ...
 ```
@@ -83,6 +87,7 @@ To setup amend default plugin configuration we recommend to put following snippe
 ### Properties
 - `badWords` - Enabled support for [bad words filtering](https://www.npmjs.com/package/bad-words). Can be turned off or overwritten using [options reference](https://www.npmjs.com/package/bad-words#constructor). Default value: `true`. 
 - `moderatorRoles` - Optional list of names of roles. Users with those roles will be notified by email when a new abuse report is created. This feature requires a built-in [Strapi email plugin](https://docs.strapi.io/developer-docs/latest/plugins/email.html) configured.
+- `entryLabel` - ordered list of property names per Content Type to generate related entity label. Default set as `*`.
 
 ## Additional GQL Configuration
 

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

@@ -34,12 +34,13 @@ const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
             <Divider />
         </Box>
         <Flex as="ul" direction="column" alignItems="flex-start">
-            { rootThread && (<DiscussionThreadItem {...rootThread} isThreadAuthor root />) }
+            { rootThread && (<DiscussionThreadItem {...rootThread} isThreadAuthor root pinned />) }
             { level.map(item => {
                 const isSelected = selected.id === item.id;
                 const isThreadAuthor = !isNil(selected?.threadOf?.authorId) && (selected?.threadOf?.authorId === item.authorId);
                 return (<DiscussionThreadItem 
                     {...item} 
+                    root={isNil(rootThread)}
                     blockedThread={rootThread?.blockedThread || item.blockedThread}
                     isSelected={isSelected} 
                     isThreadAuthor={isThreadAuthor} 

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

@@ -21,7 +21,7 @@ import { getMessage, getUrl } from '../../utils';
 import DiscussionThreadItemWarnings from '../DiscussionThreadItemWarnings';
 
 const DiscussionThreadItem = (item) => {
-    const { id, isSelected, isThreadAuthor, content, root, preview, blocked, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+    const { id, isSelected, isThreadAuthor, content, root, preview, pinned, blocked, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -62,16 +62,16 @@ const DiscussionThreadItem = (item) => {
                         <Box as={Flex} grow={1} alignItems="center">
                             <Typography variant="omega">{ content }</Typography>
                         </Box>
-                        { !preview && (<DiscussionThreadItemActions { ...item } root={root} />) }
+                        { !preview && (<DiscussionThreadItemActions { ...item } root={root || pinned} />) }
                     </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } />) }
+                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
                 </Flex>
                 <Divider background={dividerColor} />
                 <DiscussionThreadItemMeta { ...item } />
             </DiscussionThreadItemBox>
         </DiscussionThreadItemContent>
 
-        { (gotThread && !preview) && (<DiscussionThreadItemLinkBox direction="row" alignItems="flex-end">
+        { (gotThread && !(preview || pinned)) && (<DiscussionThreadItemLinkBox direction="column" alignItems="flex-end">
             <Link to={getUrl(`discover/${threadFirstItemId}`)} endIcon={<ArrowRight />}>
                 { getMessage('page.details.panel.discussion.nav.drilldown') }
             </Link>

package/admin/src/components/DiscussionThreadItem/styles.js

@@ -6,6 +6,7 @@ export const AvatarWrapper = styled(Box)``;
 export const InitialsWrapper = styled(Box)``;
 
 export const DiscussionThreadItemLinkBox = styled(Flex)`
+    width: 100%;
     margin-top: .5rem;
     margin-bottom: .5rem;
 `

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

@@ -11,14 +11,16 @@ import { isNil } from 'lodash';
 import { Button } from '@strapi/design-system/Button';
 import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
-import { Lock, Check, Cross, Key } from '@strapi/icons';
+import { Check, Cross } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage, handleAPIError } from '../../utils';
 import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsGroupWrapper, DiscussionThreadItemActionsWrapper } from './styles';
 import ConfirmationDialog from '../ConfirmationDialog';
 import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/Details/utils/api';
+import pluginId from '../../pluginId';
+import { LockIcon, UnlockIcon } from '../icons';
 
-const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatus, root }) => {
+const DiscussionThreadItemActions = ({ id, blocked, blockedThread, gotThread, pinned, approvalStatus, root }) => {
 
     const [blockConfirmationVisible, setBlockConfirmationVisible] = useState(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = useState(false);
@@ -31,7 +33,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
         await queryClient.invalidateQueries('get-details-data');
         toggleNotification({
             type: 'success',
-            message,
+            message: `${pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
@@ -130,10 +132,10 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
     return (<>
         <DiscussionThreadItemActionsWrapper as={Flex} direction="row">
             { badgeVisible && (<DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.details.panel.discussion.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>)}
-            { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<Lock />} label={getMessage('page.details.actions.comment.block', 'Block')} />)}
-            { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<Key />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')} />)}
-            { (!blockedThread && root) && (<Button onClick={handleBlockThreadClick} startIcon={<Lock />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</Button>) }
-            { (blockedThread && root) && (<Button onClick={handleUnblockThreadClick} startIcon={<Key />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</Button>) }
+            { !blockedThread && !(blocked || needsApproval) && (<IconButton onClick={handleBlockClick} loading={blockItemMutation.isLoading} icon={<LockIcon />} label={getMessage('page.details.actions.comment.block', 'Block')} style={(!blockedThread && root) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />)}
+            { !blockedThread && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<UnlockIcon />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')} />)}
+            { (!blockedThread && (gotThread || pinned)) && (<Button onClick={handleBlockThreadClick} startIcon={<LockIcon />} loading={blockItemThreadMutation.isLoading} variant="danger">{ getMessage('page.details.actions.thread.block', 'Block thread') }</Button>) }
+            { (blockedThread && (gotThread || pinned)) && (<Button onClick={handleUnblockThreadClick} startIcon={<UnlockIcon />} loading={unblockItemThreadMutation.isLoading} variant="success">{ getMessage('page.details.actions.thread.unblock', 'Unblock thread') }</Button>) }
             { needsApproval && (<DiscussionThreadItemActionsGroupWrapper>
                 <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} />
                 <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} />
@@ -144,7 +146,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
             isActionAsync={blockItemMutation.isLoading}
             header={getMessage('page.details.actions.comment.block.confirmation.header')}
             labelConfirm={getMessage('page.details.actions.comment.block.confirmation.button.confirm')}
-            iconConfirm={<Lock />}
+            iconConfirm={<LockIcon />}
             onConfirm={handleBlockConfirm} 
             onCancel={handleBlockCancel}>
                 { getMessage('page.details.actions.comment.block.confirmation.description') }
@@ -154,7 +156,7 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, approvalStatu
             isActionAsync={blockItemThreadMutation.isLoading}
             header={getMessage('page.details.actions.thread.block.confirmation.header')}
             labelConfirm={getMessage('page.details.actions.thread.block.confirmation.button.confirm')}
-            iconConfirm={<Lock />}
+            iconConfirm={<LockIcon />}
             onConfirm={handleBlockThreadConfirm} 
             onCancel={handleBlockThreadCancel}>
                 { getMessage('page.details.actions.thread.block.confirmation.description') }

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

@@ -5,7 +5,6 @@
  */
 
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
 import { isEmpty, orderBy } from 'lodash';
 import { Badge } from '@strapi/design-system/Badge';
@@ -14,18 +13,20 @@ import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
 import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
-import { ArrowRight, Lock } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage, handleAPIError } from '../../utils';
 import { blockItem, blockItemThread, resolveReport } from '../../pages/Details/utils/api';
 import { DiscussionThreadItemWarningsWrapper } from './styles';
 import ReportsReviewModal from '../ReportsReviewModal';
 import ReportsReviewTable from '../ReportsReviewTable';
+import pluginId from '../../pluginId';
+import { LockIcon, ReviewIcon } from '../icons';
 
 const DiscussionThreadItemWarnings = (item) => {
-    const { id, reports } = item;
+    const { id, reports, gotThread } = item;
 
     const [reportsReviewVisible, setReportsReviewVisible] = useState(false);
+    const [blockButtonsDisabled, setBlockButtonsDisabled] = useState(false);
 
     const toggleNotification = useNotification();
     const queryClient = useQueryClient();
@@ -37,7 +38,7 @@ const DiscussionThreadItemWarnings = (item) => {
         }
         toggleNotification({
             type: 'success',
-            message,
+            message: `${pluginId}.${message}`,
         });
         stateAction(false);
         unlockApp();
@@ -82,6 +83,8 @@ const DiscussionThreadItemWarnings = (item) => {
         setReportsReviewVisible(false);
     };
 
+    const handleBlockButtonsStateChange = disabled => setBlockButtonsDisabled(disabled);
+
     const isLoading = blockItemMutation.isLoading || blockItemThreadMutation.isLoading || resolveReportMutation.isLoading;
     const openReports = reports?.filter(_ => !_.resolved);
 
@@ -97,7 +100,7 @@ const DiscussionThreadItemWarnings = (item) => {
                     <Typography textColor="warning600" fontWeight="bold">{getMessage(`page.details.panel.discussion.warnings.reports.description`, 'abuse reports')}</Typography>
                 </Box>
             </Box>
-            <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ArrowRight />}>
+            <Button onClick={handleReportsReviewClick} variant="ghost" endIcon={<ReviewIcon />}>
                 { getMessage(`page.details.actions.comment.report.review`, 'review') }
             </Button>
         </DiscussionThreadItemWarningsWrapper>
@@ -106,12 +109,12 @@ const DiscussionThreadItemWarnings = (item) => {
             isActionAsync={isLoading}
             onClose={handleReportsReviewClose}
             startActions={<>
-                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<Lock />}>
+                <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.comment.block`, 'Block comment') }
                 </Button>
-                <Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<Lock />}>
+                { gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                     { getMessage(`page.details.actions.thread.block`, 'Block thread') }
-                </Button>
+                </Button>) }
             </>}
             item={item}>
                 <Typography variant="sigma" textColor="neutral600" id="reports-list">
@@ -124,6 +127,7 @@ const DiscussionThreadItemWarnings = (item) => {
                     commentId={item.id} 
                     items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
                     mutation={resolveReportMutation}
+                    onBlockButtonsStateChange={handleBlockButtonsStateChange}
                 />
         </ReportsReviewModal>
     </>);

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

@@ -13,7 +13,6 @@ import DiscussionThreadItem from '../DiscussionThreadItem';
 
 const ReportsReviewModal = ({ 
     isVisible = false,
-    isActionAsync = false,
     item,
     children, 
     onClose, 
@@ -34,7 +33,6 @@ const ReportsReviewModal = ({
 
   ReportsReviewModal.propTypes = {
     isVisible: PropTypes.bool,
-    isActionAsync: PropTypes.bool,
     startActions: PropTypes.array,
     endActions: PropTypes.array,
     item: PropTypes.object.isRequired,

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

@@ -23,7 +23,8 @@ import { REPORT_REASON, REPORT_STATUS } from '../../utils/constants';
 const ReportsReviewTable = ({ 
     commentId,
     items,
-    mutation
+    mutation,
+    onBlockButtonsStateChange,
 }) => {
 
     const [storedItems, setStoredItems] = useState([]);
@@ -65,10 +66,12 @@ const ReportsReviewTable = ({
         });
         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);
         }
     }
 
@@ -137,6 +140,7 @@ ReportsReviewTable.propTypes = {
     commentId: PropTypes.string.isRequired,
     items: PropTypes.array.isRequired,
     mutation: PropTypes.func.isRequired,
+    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 = 24;
+
+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 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"/>
+    </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/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/index.js

@@ -83,7 +83,7 @@ const Details = () => {
               <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" />

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

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useMutation, useQueryClient } from 'react-query';
+import { first, 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, Lock } from '@strapi/icons';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../../../utils';
+import { COMMENT_STATUS } from '../../../../utils/constants';
+import ReportsReviewModal from '../../../../components/ReportsReviewModal';
+import ReportsReviewTable from '../../../../components/ReportsReviewTable';
+import { blockItem, blockItemThread, resolveReport } from '../../../Details/utils/api';
+import pluginId from '../../../../pluginId';
+import { ReviewIcon, LockIcon } from '../../../../components/icons';
+
+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 = ({ blocked, blockedThread }) => {
+        let status = blocked || blockedThread ? COMMENT_STATUS.BLOCKED : COMMENT_STATUS.OPEN;
+        if (reviewFlowEnabled) {
+            status = COMMENT_STATUS.TO_REVIEW;
+        }
+        let color = 'secondary';
+        switch (status) {
+            case COMMENT_STATUS.OPEN:
+                color = 'success';
+                break;
+            case COMMENT_STATUS.TO_REVIEW:
+                color = 'warning';
+                break;
+            case COMMENT_STATUS.BLOCKED:
+                color = 'danger';
+                break;
+        };
+        return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage({
+            id: `page.discover.table.header.status.${status}`,
+            props: {
+                count: openReports.length
+            }
+        }, status) }</Badge>);
+      };
+    
+      const renderEntryTitle = entry => {
+        const { entryLabel } = config;
+        const rule = entry.uid in entryLabel ? entryLabel[entry.uid] : entryLabel['*'];
+        return first(
+          Object.keys(entry)
+            .filter(_ => (rule === _) || rule.includes(_))
+            .map(_ => entry[_])
+            .filter(_ => _)
+        );
+      };
+    
+      const renderEntryUrl = entry => `/content-manager/collectionType/${entry.uid}/${entry.id}`;
+
+    return (
+        <Tr key={item.id}>
+            <Td style={{ maxWidth: '40vw' }}>
+                <Typography textColor="neutral800" ellipsis>{item.content}</Typography>
+            </Td>
+            <Td>
+                <Typography textColor="neutral800">{item.threadOf?.id || '-'}</Typography>
+            </Td>
+            <Td>
+                <Link to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related) }</Link>
+            </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={reviewFlowEnabled ? 2 : 1} horizontal>
+                        { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
+                        <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/index.js

@@ -8,21 +8,15 @@ import React, { memo, useRef, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 import isEqual from 'react-fast-compare';
-import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { isEmpty } from 'lodash';
-import { Badge } from '@strapi/design-system/Badge';
-import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; 
 import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex'; 
-import { IconButton } from '@strapi/design-system/IconButton';
 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 { Eye } from '@strapi/icons';
 
 import {
   EmptyStateLayout,
@@ -40,12 +34,11 @@ import pluginPermissions from '../../permissions';
 
 import getUrl from '../../utils/getUrl';
 import Nav from '../../components/Nav';
-import { COMMENT_STATUS } from '../../utils/constants';
 import TablePagination from '../../components/TablePagination';
 import filtersSchema from './utils/filtersSchema';
 import TableFilters from '../../components/TableFilters';
-import appReducer from '../App/reducer';
-import makeAppView, { selectConfig } from '../App/reducer/selectors';
+import makeAppView from '../App/reducer/selectors';
+import DiscoverTableRow from './components/DiscoverTableRow';
 
 const Discover = ({ config }) => {
   useFocusWhenNavigate();
@@ -55,7 +48,6 @@ const Discover = ({ config }) => {
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
-  const { formatDate } = useIntl();
   const [{ query: queryParams }] = useQueryParams();
   const _q = queryParams?._q || '';
 
@@ -69,7 +61,7 @@ const Discover = ({ config }) => {
   } = useRBAC(viewPermissions);
 
   const { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching } = useQuery(
-    ['get-providers', queryParams],
+    ['get-data', queryParams],
     () => fetchData(queryParams, toggleNotification),
     {
       initialData: { },
@@ -94,22 +86,11 @@ const Discover = ({ config }) => {
     },
   };
 
-  const renderStatus = ({ blocked, blockedThread }) => {
-    const status = blocked || blockedThread ? COMMENT_STATUS.BLOCKED : COMMENT_STATUS.OPEN;
-    let color = 'secondary';
-    switch (status) {
-        case COMMENT_STATUS.OPEN:
-            color = 'success';
-            break;
-        case COMMENT_STATUS.BLOCKED:
-            color = 'danger';
-    };
-    return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage(`page.discover.table.header.status.${status}`, status) }</Badge>);
-  };
+
 
   const emptyContent = _q ? 'search' : 'comments';
   
-  const COL_COUNT = 7;
+  const COL_COUNT = 6;
 
   return <Box background="neutral100">
           <Layout sideNav={<Nav />}>
@@ -128,9 +109,6 @@ const Discover = ({ config }) => {
                 <Table colCount={COL_COUNT} rowCount={result.length}>
                   <Thead>
                     <Tr>
-                      <Th>
-                        <BaseCheckbox aria-label="Select all entries" />
-                      </Th>
                       <Th>
                         <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
                       </Th>
@@ -152,31 +130,7 @@ const Discover = ({ config }) => {
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {result.map(entry => <Tr key={entry.id}>
-                        <Td>
-                          <BaseCheckbox aria-label={`Select ${entry.content}`} />
-                        </Td>
-                        <Td style={{ maxWidth: '40vw' }}>
-                          <Typography textColor="neutral800" ellipsis>{entry.content}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{entry.threadOf?.id || '-'}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{entry.related?.id}</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{ formatDate(entry.updatedAt || entry.createdAt, { dateStyle: 'long', timeStyle: 'short' }) }</Typography>
-                        </Td>
-                        <Td>
-                          <Typography textColor="neutral800">{ renderStatus(entry) }</Typography>
-                        </Td>
-                        <Td>
-                          <Flex direction="column" alignItems="flex-end">
-                            <IconButton onClick={() => handleClickDisplay(entry.id)} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
-                          </Flex>
-                        </Td>
-                      </Tr>)}
+                    {result.map(entry => (<DiscoverTableRow config={config} item={entry} onClick={() => handleClickDisplay(entry.id)}/>))}
                   </Tbody>
                 </Table>
                 <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />

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

@@ -1,7 +1,6 @@
 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 fetchData = async (queryParams, toggleNotification) => {
@@ -10,11 +9,6 @@ export const fetchData = async (queryParams, toggleNotification) => {
 
     return data;
   } catch (err) {
-    toggleNotification({
-      type: 'warning',
-      message: { id: 'notification.error' },
-    });
-
-    throw new Error('error');
+    handleAPIError(err, toggleNotification);
   }
 };

package/admin/src/translations/en.json

@@ -17,13 +17,14 @@
     "page.discover.table.header.status": "Status",
     "page.discover.table.header.status.OPEN": "OPEN",
     "page.discover.table.header.status.BLOCKED": "BLOCKED",
-    "page.discover.table.header.status.TO_REVIEW": "TO REVIEW",
+    "page.discover.table.header.status.TO_REVIEW": "TO REVIEW ({count, number})",
     "page.discover.table.header.actions": "Status",
     "page.discover.table.action.display": "Display",
     "page.discover.table.action.reports": "Reports",
     "page.discover.table.empty": "You don't have any comments yet.",
     "page.discover.table.empty.search": "No comments match the search.",
     "page.discover.table.filters": "Filtering",
+    "page.discover.table.reports.review": "Review reports",
     "page.details.header": "Discussion panel",
     "page.details.header.description": "Drilldown and manage discussion related to the entity",
     "page.details.panel.discussion": "Discussion",

package/admin/src/utils/getMessage.js

@@ -1,14 +1,21 @@
 
 import { useIntl } from 'react-intl';
+import { isString } from 'lodash';
 
 import pluginId from '../pluginId';
 
-const getMessage = (id, defaultMessage, inPluginScope = true) => {
+const getMessage = (input, defaultMessage, inPluginScope = true) => {
     const { formatMessage } = useIntl();
+    let formattedId = ''
+    if (isString(input)) {
+        formattedId = input;
+    } else {
+        formattedId = input?.id;
+    }
     return formatMessage({
-        id: `${inPluginScope ? pluginId : 'app.component'}.${id}`,
+        id: `${inPluginScope ? pluginId : 'app.components'}.${formattedId}`,
         defaultMessage,
-    })
+    }, input?.props || undefined)
 };
 
 export default getMessage;

package/admin/src/utils/handleAPIError.js

@@ -2,7 +2,7 @@
 const handleAPIError = (err = null, toggleNotification = null) => {
     toggleNotification({
         type: 'warning',
-        message: { id: 'notification.error' },
+        message: 'app.components.notification.error',
     });
 
     if (err) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",

package/server/controllers/client.js

@@ -16,8 +16,13 @@ module.exports = {
     try {
       return this.getService('common')
         .findAllFlat({
-          ...query,
-          related: relation,
+          query: {
+            ...query,
+            related: relation,
+          },
+          populate: {
+            threadOf: true,
+          },
         });
     } catch (e) {
       throwError(ctx, e);
@@ -34,6 +39,9 @@ module.exports = {
             ...query,
             related: relation,
           },
+          populate: {
+            threadOf: true,
+          },
           dropBlockedThreads: true,
         });
     } catch (e) {

package/server/services/admin.js

@@ -55,7 +55,17 @@ const { APPROVAL_STATUS, REGEX } = require('./../utils/constants')
         }
     
         const entities = await strapi.db.query(getModelUid('comment'))
-            .findMany(params, ['authorUser', 'reports']);
+            .findMany({
+                ...params, 
+                populate: {
+                    authorUser: true,
+                    reports: {
+                        where: { 
+                            resolved: false
+                        },
+                    },
+                },
+            });
         const total = await strapi.db.query(getModelUid('comment'))
             .count({
                 where: params.where,
@@ -78,11 +88,27 @@ const { APPROVAL_STATUS, REGEX } = require('./../utils/constants')
 
     // Find single comment
     async findOneAndThread(id) {
+        const reportsPopulation = {
+            reports: {
+                where: { 
+                    resolved: false,
+                },
+            }
+        };
+
         const entity = await strapi.db.query(getModelUid('comment')).findOne({ 
             where: {
                 id
             },
-            populate: ['threadOf', 'threadOf.reports', 'authorUser', 'reports'] 
+            populate: {
+                authorUser: true,
+                threadOf: {
+                    populate: { 
+                        ...reportsPopulation
+                    },
+                },
+                ...reportsPopulation,
+            },
         });
 
         if (!entity){
@@ -109,19 +135,22 @@ const { APPROVAL_STATUS, REGEX } = require('./../utils/constants')
                     threadOf: levelThreadId,
                     related: entity.related,
                 },
+                populate: {
+                    ...reportsPopulation,
+                },
                 startingFromId: levelThreadId,
                 isAdmin: true
             }, false);
 
-        const selectedEntity = filterOurResolvedReports(this.getCommonService().sanitizeCommentEntity(entity));
+        const selectedEntity = this.getCommonService().sanitizeCommentEntity(entity);
         
         return {
             entity: relatedEntity,
             selected: {
                 ...selectedEntity,
-                threadOf: selectedEntity.threadOf ? filterOurResolvedReports(selectedEntity.threadOf) : null,
+                threadOf: selectedEntity.threadOf ? selectedEntity.threadOf : null,
             },
-            level: entitiesOnSameLevel.map(_ => filterOurResolvedReports(_))
+            level: entitiesOnSameLevel,
         };
     },
 

package/server/services/client.js

@@ -160,7 +160,7 @@ module.exports = ({ strapi }) => ({
                 try {
                     await this.sendAbuseReportEmail(entity.reason, entity.content); // Could also add some info about relation
                 } catch (err) {
-                    throw err;
+                    return entity;
                 }
             } else {
                 throw new PluginError(500, 'Report cannot be created');

package/server/services/common.js

@@ -63,7 +63,7 @@ module.exports = ({ strapi }) => ({
     },
 
     // Find comments in the flat structure
-    async findAllFlat(query, isAdmin = false, relatedEntity = null) {
+    async findAllFlat({ query, populate = {} }, isAdmin = false, relatedEntity = null) {
         const criteria = { 
             ...query,
             $or: [{ removed: { $null: true } }, { removed: false }],
@@ -73,14 +73,19 @@ module.exports = ({ strapi }) => ({
             delete criteria.$or;
         }
 
-        const populate = { authorUser: true, reports: true };
+        const defaultPopulate = {
+            authorUser: true,
+        };
 
         const entries = await strapi.db.query(getModelUid('comment'))
         .findMany({
             where: {
                 ...criteria,
             },
-            populate,
+            populate: {
+                ...defaultPopulate,
+                ...populate,
+            },
         });
 
         const entriesWithThreads = await Promise.all(entries.map(async _ => {
@@ -97,12 +102,12 @@ module.exports = ({ strapi }) => ({
         const result = entries
             .map(_ => {
                 const threadedItem = entriesWithThreads.find(item => item.id === _.id);
-                return filterOurResolvedReports(this.sanitizeCommentEntity({
+                return this.sanitizeCommentEntity({
                     ..._,
                     threadOf: query.threadOf || _.threadOf || null,
                     gotThread: (threadedItem?.itemsInTread || 0) > 0,
                     threadFirstItemId: threadedItem?.firstThreadItemId,
-                }))
+                });
             });
 
         if (relatedEntities.filter(_ => _).length > 0) {
@@ -114,11 +119,12 @@ module.exports = ({ strapi }) => ({
     // Find comments and create relations tree structure
     async findAllInHierarchy ({
         query,
+        populate = {},
         startingFromId = null,
         dropBlockedThreads = false,
         isAdmin = false,
     }, relatedEntity) {
-        const entities = await this.findAllFlat(query, isAdmin, relatedEntity);
+        const entities = await this.findAllFlat({ query, populate }, isAdmin, relatedEntity);
         return buildNestedStructure(entities, startingFromId, 'threadOf', dropBlockedThreads, false);
     },