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

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

@@ -2,7 +2,8 @@ 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 { isNil, isEmpty, orderBy } from 'lodash';
+import { Avatar, Initials } from '@strapi/design-system/Avatar';
 import { Badge } from '@strapi/design-system/Badge';
 import { Box } from '@strapi/design-system/Box'; 
 import { Button } from '@strapi/design-system/Button'; 
@@ -13,17 +14,19 @@ 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 { Eye } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { getMessage, handleAPIError } from '../../../../utils';
-import { COMMENT_STATUS } from '../../../../utils/constants';
+import { getMessage, getUrl, handleAPIError, renderInitials, resolveCommentStatus, resolveCommentStatusColor } from '../../../../utils';
 import ReportsReviewModal from '../../../../components/ReportsReviewModal';
 import ReportsReviewTable from '../../../../components/ReportsReviewTable';
-import { blockItem, blockItemThread, resolveReport } from '../../../Details/utils/api';
+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 DiscoverTableRow = ({ config, item, allowedActions: { canModerate, canAccessReports, canReviewReports }, onClick }) => {
 
     const { id, reports } = item;
 
@@ -72,14 +75,22 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
         refetchActive: false,
     });
 
-    const handleReportsReviewClick = () => setReportsReviewVisible(true);
+    const handleReportsReviewClick = () => {
+        if (canAccessReports) {
+            setReportsReviewVisible(true);
+        }
+    };
     const handleBlockItemClick = async () => {
-        lockApp();
-        blockItemMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            blockItemMutation.mutate(id);
+        }
     };
     const handleBlockItemThreadClick = async () => {
-        lockApp();
-        blockItemThreadMutation.mutate(id);
+        if (canModerate) {
+            lockApp();
+            blockItemThreadMutation.mutate(id);
+        }
     };
     const handleReportsReviewClose = async () => {
         await queryClient.invalidateQueries('get-data');
@@ -89,59 +100,56 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
     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 reviewFlowEnabled = (canAccessReports && 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;
-        };
+    const renderStatus = (props) => {
+        const status = resolveCommentStatus({ ...props, reviewFlowEnabled });
+        const color = resolveCommentStatusColor(status);
+   
         return (<Badge backgroundColor={`${color}100`} textColor={`${color}600`}>{ getMessage({
-            id: `page.discover.table.header.status.${status}`,
+            id: `page.common.item.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}`;
+      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 style={{ maxWidth: '40vw' }}>
-                <Typography textColor="neutral800" ellipsis>{item.content}</Typography>
+            <Td>
+                <Typography textColor="neutral800" fontWeight="bold">#{ item.id }</Typography>
             </Td>
             <Td>
-                <Typography textColor="neutral800">{item.threadOf?.id || '-'}</Typography>
+                <Stack size={2} horizontal>
+                    { item.author?.avatar ? <Avatar src={item.author?.avatar} alt={item.author.name} /> : <Initials>{ renderInitials(item.author.name) }</Initials> }
+                    <Typography textColor="neutral800" variant="pi">{ item.author.name }</Typography>
+                </Stack>
+            </Td>
+            <Td style={{ maxWidth: '30vw' }}>
+                <Typography textColor="neutral800" ellipsis>{item.content}</Typography>
             </Td>
             <Td>
-                <Link to={ renderEntryUrl(item.related) }>{ renderEntryTitle(item.related) }</Link>
+                { 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>
@@ -151,23 +159,30 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
             </Td>
             <Td>
                 <Flex direction="column" alignItems="flex-end">
-                    <Stack size={reviewFlowEnabled ? 2 : 1} horizontal>
+                    <Stack size={actionItemsCount} horizontal>
                         { reviewFlowEnabled && (<IconButton onClick={handleReportsReviewClick} label={ getMessage('page.discover.table.reports.review') } icon={<ReviewIcon />} />)}
+                        { (canModerate && needsApproval) &&  (
+                        <DiscussionThreadItemApprovalFlowActions 
+                            id={item.id} 
+                            allowedActions={{ canModerate }}
+                            queryToInvalidate="get-data" />
+                        )}
                         <IconButton onClick={handleClick} label={ getMessage('page.discover.table.action.display') } icon={<Eye />} />
                     </Stack>
                 </Flex>
                 { reviewFlowEnabled && (<ReportsReviewModal 
                     isVisible={reportsReviewVisible}
                     isActionAsync={isLoading}
+                    allowedActions={{ canModerate, canAccessReports, canReviewReports }}
                     onClose={handleReportsReviewClose}
-                    startActions={<>
+                    startActions={canModerate && (<>
                         <Button onClick={handleBlockItemClick} variant="danger-light" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                             { getMessage(`page.details.actions.comment.block`, 'Block comment') }
                         </Button>
                         { item.gotThread && (<Button onClick={handleBlockItemThreadClick} variant="danger" startIcon={<LockIcon />} disabled={blockButtonsDisabled}>
                             { getMessage(`page.details.actions.thread.block`, 'Block thread') }
                         </Button>) }
-                    </>}
+                    </>)}
                     item={item}>
                         <Typography variant="sigma" textColor="neutral600" id="reports-list">
                             { getMessage('page.details.panel.discussion.warnings.reports.list', 'List') }
@@ -179,6 +194,7 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
                                 commentId={item.id} 
                                 items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
                                 mutation={resolveReportMutation}
+                                allowedActions={{ canAccessReports, canReviewReports }}
                                 onBlockButtonsStateChange={handleBlockButtonsStateChange}
                             />
                 </ReportsReviewModal>) }
@@ -190,6 +206,11 @@ const DiscoverTableRow = ({ config, item, onClick }) => {
 DiscoverTableRow.propTypes = {
     config: PropTypes.object.isRequired,
     item: PropTypes.object.isRequired,
+    allowedActions: PropTypes.shape({
+        canModerate: PropTypes.bool, 
+        canAccessReports: PropTypes.bool,
+        canReviewReports: PropTypes.bool, 
+    }),
     onClick: PropTypes.func.isRequired,
 };
 

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;
+`

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

@@ -51,17 +51,20 @@ const Discover = ({ config }) => {
   const [{ query: queryParams }] = useQueryParams();
   const _q = queryParams?._q || '';
 
-  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 { isLoading: isLoadingForData, data: { result, pagination = {} }, isFetching } = useQuery(
-    ['get-data', queryParams],
+    ['get-data', queryParams, canAccess],
     () => fetchData(queryParams, toggleNotification),
     {
       initialData: { },
@@ -86,59 +89,72 @@ const Discover = ({ config }) => {
     },
   };
 
-
-
   const emptyContent = _q ? 'search' : 'comments';
   
-  const COL_COUNT = 6;
-
-  return <Box background="neutral100">
-          <Layout sideNav={<Nav />}>
-            {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
-            <>
-              <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
-              <ActionLayout 
-                    startActions={<>
-                      <SearchURLQuery
-                        label={ getMessage('search.label', 'Search', false) }
-                      />
-                      <TableFilters displayedFilters={filtersSchema} />
-                    </>} />
-              <ContentLayout>
-                { !isEmpty(result) ? (<>
-                <Table colCount={COL_COUNT} rowCount={result.length}>
-                  <Thead>
-                    <Tr>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.thread') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.entry') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.lastUpdate') }</Typography>
-                      </Th>
-                      <Th>
-                        <Typography variant="sigma">{ getMessage('page.discover.table.header.status') }</Typography>
-                      </Th>
-                      <Th>
-                        <VisuallyHidden>{ getMessage('page.discover.table.header.actions') }</VisuallyHidden>
-                      </Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {result.map(entry => (<DiscoverTableRow config={config} item={entry} onClick={() => handleClickDisplay(entry.id)}/>))}
-                  </Tbody>
-                </Table>
-                <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
-                </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
-              </ContentLayout>
-            </>) }
-          </Layout>
-        </Box>;
+  const COL_COUNT = 8;
+
+  if (canAccess) {
+    return <Box background="neutral100">
+            <Layout>
+              {isLoading || isLoadingForPermissions ? (<LoadingIndicatorPage />) : (
+              <>
+                <HeaderLayout title={ getMessage('page.discover.header') } subtitle={ `${total} ${ getMessage('page.discover.header.count')}` } as="h2" />
+                <ActionLayout 
+                      startActions={<>
+                        <SearchURLQuery
+                          label={ getMessage('search.label', 'Search', false) }
+                        />
+                        <TableFilters displayedFilters={filtersSchema} />
+                      </>} />
+                <ContentLayout>
+                  { !isEmpty(result) ? (<>
+                  <Table colCount={COL_COUNT} rowCount={result.length}>
+                    <Thead>
+                      <Tr>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.id') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.author') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.message') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.thread') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.entry') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.lastUpdate') }</Typography>
+                        </Th>
+                        <Th>
+                          <Typography variant="sigma">{ getMessage('page.discover.table.header.status') }</Typography>
+                        </Th>
+                        <Th>
+                          <VisuallyHidden>{ getMessage('page.discover.table.header.actions') }</VisuallyHidden>
+                        </Th>
+                      </Tr>
+                    </Thead>
+                    <Tbody>
+                      {result.map(entry => (<DiscoverTableRow 
+                        key={`comment-${entry.id}`} 
+                        config={config} 
+                        item={entry} 
+                        allowedActions={{ canModerate, canAccessReports, canReviewReports }}
+                        onClick={() => handleClickDisplay(entry.id)}
+                        />))}
+                    </Tbody>
+                  </Table>
+                  <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
+                  </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
+                </ContentLayout>
+              </>) }
+            </Layout>
+          </Box>;
+  }
+  return null;
 }
 
 const mapStateToProps = makeAppView();

package/admin/src/pages/{Details/utils → utils}/api.js

@@ -1,9 +1,13 @@
-import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
+import { stringify } from 'qs';
+import { isEmpty } from 'lodash';
+
+import { getApiURL, axiosInstance, handleAPIError } from '../../utils';
 
 // eslint-disable-next-line import/prefer-default-export
-export const fetchDetailsData = async (id, toggleNotification) => {
+export const fetchDetailsData = async (id, queryParams, toggleNotification) => {
   try {
-    const { data } = await axiosInstance.get(getApiURL(`moderate/single/${id}`));
+    const stringifiedProps = !isEmpty(queryParams) ? `?${stringify(queryParams, { encode: false })}` : '';
+    const { data } = await axiosInstance.get(getApiURL(`moderate/single/${id}${stringifiedProps}`));
 
     return data;
   } catch (err) {
@@ -28,6 +32,14 @@ export const unblockItem = id => {
   return axiosInstance.patch(getApiURL(`moderate/single/${id}/unblock`));
 };
 
+export const approveItem = id => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/approve`));
+};
+
+export const rejectItem = id => {
+  return axiosInstance.patch(getApiURL(`moderate/single/${id}/reject`));
+};
+
 export const blockItemThread = id => {
   return axiosInstance.patch(getApiURL(`moderate/thread/${id}/block`));
 };

package/admin/src/permissions.js

@@ -1,14 +1,16 @@
+const permissions = require('./../../permissions');
+
 const pluginPermissions = {
     access: [
-      { action: 'plugin::comments.read', subject: null },
-      { action: 'plugin::comments.reports.read', subject: null },
-      { action: 'plugin::comments.discovery.read', subject: null },
-      { action: 'plugin::comments.settings.read', subject: null },
+      { action: permissions.render(permissions.comments.read), subject: null },
+      { action: permissions.render(permissions.reports.read), subject: null },
+      // { action: 'plugin::comments.discover.read', subject: null },
+      { action: permissions.render(permissions.settings.read), subject: null },
     ],
-    discover: [{ action: 'plugin::comments.read', subject: null }],
-    moderate: [{ action: 'plugin::comments.moderate', subject: null }],
-    reports: [{ action: 'plugin::comments.reports.read', subject: null }],
-    reportsReview: [{ action: 'plugin::comments.reports.action', subject: null }],
+    // discover: [{ action: 'plugin::comments.discover.read', subject: null }],
+    moderate: [{ action: permissions.render(permissions.comments.moderate), subject: null }],
+    reports: [{ action: permissions.render(permissions.reports.read), subject: null }],
+    reportsReview: [{ action: permissions.render(permissions.reports.action), subject: null }],
   };
   
   export default pluginPermissions;

package/admin/src/translations/en.json

@@ -7,18 +7,24 @@
     "nav.item.discover": "Discover",
     "nav.item.reports": "Reports",
     "nav.item.settings": "Settings",
+    "page.common.item.status.OPEN": "OPEN",
+    "page.common.item.status.BLOCKED": "BLOCKED",
+    "page.common.item.status.APPROVED": "APPROVED",
+    "page.common.item.status.TO_REVIEW": "TO REVIEW ({count, number})",
+    "page.common.item.status.REJECTED": "REJECTED",
+    "page.common.item.status.REMOVED": "REMOVED BY AUTHOR",
     "page.updates.header": "Recent updates",
     "page.discover.header": "Discover threads",
     "page.discover.header.count": "entries found",
+    "page.discover.table.header.id": "ID",
+    "page.discover.table.header.author": "Author",
     "page.discover.table.header.message": "Message",
     "page.discover.table.header.thread": "Thread of",
     "page.discover.table.header.entry": "Entry",
     "page.discover.table.header.lastUpdate": "Last update",
     "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 ({count, number})",
-    "page.discover.table.header.actions": "Status",
+    "page.discover.table.header.actions": "Actions",
+    "page.discover.table.cell.thread": "Comment #{id}",
     "page.discover.table.action.display": "Display",
     "page.discover.table.action.reports": "Reports",
     "page.discover.table.empty": "You don't have any comments yet.",
@@ -52,6 +58,7 @@
     "page.details.panel.status.open": "OPEN",
     "page.details.panel.status.blocked": "BLOCKED",
     "page.details.panel.status.pending": "PENDING",
+    "page.details.panel.loading": "Fetching entity...",
     "page.details.actions.comment.block": "Block comment",
     "page.details.actions.comment.block.confirmation.header": "Moderation: Block comment",
     "page.details.actions.comment.block.confirmation.description": "Do you really want to block this comment?",
@@ -67,6 +74,12 @@
     "page.details.actions.thread.block.confirmation.success": "Thread has been blocked",
     "page.details.actions.thread.unblock": "Unblock thread",
     "page.details.actions.thread.unblock.confirmation.success": "Thread has been unblocked",
+    "page.details.actions.comment.approve.confirmation.success": "Comment has been approved",
+    "page.details.actions.comment.reject.confirmation.success": "Comment has been rejected",
+    "page.details.filters.label": "View",
+    "page.details.filters.removed.visibility": "Comments visibility",
+    "page.details.filters.removed.show": "Show removed",
+    "page.details.filters.removed.hide": "Hide removed",
     "page.coming.soon": "Wait for what is coming soon...",
     "compontents.confirmation.dialog.header": "Confirmation",
     "compontents.confirmation.dialog.description": "Do you really want to perform this action?",

package/admin/src/utils/constants.js

@@ -16,13 +16,10 @@ export const REPORT_REASON = {
 };
 
 export const COMMENT_STATUS = {
+  'UNKNOWN': 'UNKNOWN',
   'BLOCKED': 'BLOCKED',
   'OPEN': 'OPEN',
+  'REMOVED': 'REMOVED',
   'TO_REVIEW': 'TO_REVIEW',
-};
-
-export const REGEX = {
-  uid: new RegExp(/^(?<type>[a-z]+)\:{2}(?<api>[a-z]+)\.{1}(?<contentType>[a-z]+)$/gmi),
-  relatedUid: new RegExp(/^(?<uid>[a-z]+\:{2}[a-z]+\.[a-z]+)\:{1}(?<id>[0-9]+)$/gmi),
-  email: new RegExp(/\S+@\S+\.\S+/),
+  ...APPROVAL_STATUS,
 };

package/admin/src/utils/getMessage.js

@@ -4,7 +4,7 @@ import { isString } from 'lodash';
 
 import pluginId from '../pluginId';
 
-const getMessage = (input, defaultMessage, inPluginScope = true) => {
+const getMessage = (input, defaultMessage = '', inPluginScope = true) => {
     const { formatMessage } = useIntl();
     let formattedId = ''
     if (isString(input)) {

package/admin/src/utils/getRelatedGroups.js

@@ -1,5 +1,3 @@
-import { REGEX } from "./constants";
-
-const getRelatedGroups = related => related.split(REGEX.relatedUid).filter(s => s && s.length > 0);
+const getRelatedGroups = (related, config) => related.split(config.regex.relatedUid).filter(s => s && s.length > 0);
 
 export default getRelatedGroups;

package/admin/src/utils/index.js

@@ -3,4 +3,8 @@ export { default as getApiURL } from './getApiUrl';
 export { default as getUrl } from './getUrl';
 export { default as getMessage } from './getMessage';
 export { default as handleAPIError } from './handleAPIError';
-export { default as getRelatedGroups } from './getRelatedGroups';
+export { default as getRelatedGroups } from './getRelatedGroups';
+export { default as renderEntryTitle } from './renderEntryTitle';
+export { default as renderInitials } from './renderInitials';
+export { default as resolveCommentStatus } from './resolveCommentStatus';
+export { default as resolveCommentStatusColor } from './resolveCommentStatusColor';

package/admin/src/utils/renderEntryTitle.js

@@ -0,0 +1,14 @@
+import { first } from 'lodash';
+
+const renderEntryTitle = (entry, config = {}) => {
+    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(_ => _)
+    );
+  };
+
+export default renderEntryTitle;

package/admin/src/utils/renderInitials.js

@@ -0,0 +1,5 @@
+import { first } from 'lodash';
+
+const renderInitials = (value = '') => value.split(' ').map(_ => first(_)).join('').toUpperCase();
+
+export default renderInitials;

package/admin/src/utils/resolveCommentStatus.js

@@ -0,0 +1,30 @@
+import { isNil } from 'lodash';
+import { COMMENT_STATUS } from './constants';
+
+const resolveCommentStatus = ({ removed, blocked, blockedThread, approvalStatus, reviewFlowEnabled }) => {
+    const gotApprovalFlow = !isNil(approvalStatus);
+
+    if (reviewFlowEnabled) {
+        return COMMENT_STATUS.TO_REVIEW;
+    }
+
+    if (removed) {
+        return COMMENT_STATUS.REMOVED;
+    } 
+    
+    if (blocked || blockedThread) {
+        return COMMENT_STATUS.BLOCKED;
+    } 
+    
+    if (gotApprovalFlow) {
+        const status = approvalStatus.toUpperCase();
+        if (Object.keys(COMMENT_STATUS).includes(status)) {
+            return status;
+        }
+        return COMMENT_STATUS.UNKNOWN;
+    }
+
+    return COMMENT_STATUS.OPEN;
+}
+
+export default resolveCommentStatus;

package/admin/src/utils/resolveCommentStatusColor.js

@@ -0,0 +1,22 @@
+import { isNil } from 'lodash';
+import { COMMENT_STATUS } from './constants';
+
+const resolveCommentStatusColor = (status) => {
+    if (Object.keys(COMMENT_STATUS).includes(status)) {
+        switch (status) {
+            case COMMENT_STATUS.REMOVED:
+                return 'secondary';
+            case COMMENT_STATUS.TO_REVIEW:
+            case COMMENT_STATUS.REJECTED:
+                return 'warning';
+            case COMMENT_STATUS.BLOCKED:
+                return 'danger';
+            case COMMENT_STATUS.OPEN:
+            case COMMENT_STATUS.APPROVED:
+                return 'success';
+        };
+    }
+    return 'secondary';
+}
+
+export default resolveCommentStatusColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-rc.1",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",
@@ -15,6 +15,8 @@
     "url": "https://github.com/VirtusLab-Open-Source/strapi-plugin-comments"
   },
   "dependencies": {
+    "@strapi/utils": "^4.0.5",
+    "@strapi/plugin-graphql": "^4.0.5",
     "bad-words": "^3.0.4"
   },
   "devDependencies": {
@@ -23,6 +25,9 @@
     "jest-cli": "^26.0.1",
     "jest-styled-components": "^7.0.2"
   },
+  "peerDependencies": {
+    "@strapi/strapi": "4.x"
+  },
   "author": {
     "name": "VirtusLab // Mateusz Ziarko",
     "email": "mziarko@virtuslab.com",
@@ -41,8 +46,8 @@
     }
   ],
   "engines": {
-    "node": ">=12.x. <=16.x.x",
-    "npm": ">=6.0.0"
+    "node": ">=14.x.x <=17.x.x",
+    "npm": ">=7.x.x"
   },
   "keywords": ["strapi", "plugin", "comments"],
   "license": "MIT"