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

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

@@ -0,0 +1,210 @@
+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, allowedActions: { canModerate, canAccessReports, canReviewReports }, 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 = () => {
+        if (canAccessReports) {
+            setReportsReviewVisible(true);
+        }
+    };
+    const handleBlockItemClick = async () => {
+        if (canModerate) {
+            lockApp();
+            blockItemMutation.mutate(id);
+        }
+    };
+    const handleBlockItemThreadClick = async () => {
+        if (canModerate) {
+            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 = (canAccessReports && 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 />} />)}
+                        { (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={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') }
+                        </Typography>
+                        <Box paddingTop={2} paddingBottom={6}>
+                            <Divider />
+                        </Box>
+                        <ReportsReviewTable
+                                commentId={item.id} 
+                                items={orderBy(reports, ['resolved', 'createdAt'], ['DESC', 'DESC'])} 
+                                mutation={resolveReportMutation}
+                                allowedActions={{ canAccessReports, canReviewReports }}
+                                onBlockButtonsStateChange={handleBlockButtonsStateChange}
+                            />
+                </ReportsReviewModal>) }
+            </Td>
+        </Tr>
+    );
+};
+
+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,
+};
+
+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;
+`

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,21 +48,23 @@ const Discover = ({ config }) => {
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
-  const { formatDate } = useIntl();
   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-providers', queryParams],
+    ['get-data', queryParams, canAccess],
     () => fetchData(queryParams, toggleNotification),
     {
       initialData: { },
@@ -94,97 +89,69 @@ 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;
 
-  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>
-                        <BaseCheckbox aria-label="Select all entries" />
-                      </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 => <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>)}
-                  </Tbody>
-                </Table>
-                <TablePagination pagination={{ pageCount: pagination?.pageCount || 1 }} />
-                </>) : (<EmptyStateLayout content={emptyLayout[emptyContent]} />) }
-              </ContentLayout>
-            </>) }
-          </Layout>
-        </Box>;
+  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.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/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/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,23 +7,29 @@
     "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.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",
-    "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.",
     "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",
@@ -51,6 +57,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?",
@@ -66,6 +73,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

@@ -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/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/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) {