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

package/admin/src/pages/Details/components/DetailsEntity/index.js

@@ -0,0 +1,66 @@
+/**
+ *
+ * Entity Details
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { capitalize, isNil, first, take } from 'lodash';
+import { Box } from '@strapi/design-system/Box';
+import { Divider } from '@strapi/design-system/Divider';
+import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
+import { Typography } from '@strapi/design-system/Typography';
+import { getMessage } from '../../../../utils';
+
+const DetailsEntity = ({ data = {}, schema = {}, config = {} }) => {
+    const { entryLabel = {} } = config;
+    const { attributes = {} } = schema;
+    const keys = Object.keys(attributes);
+    const entityLabelKey = first(entryLabel[data?.uid]);
+    
+    if (keys.length === 0) {
+        return null;
+    }
+
+    const FIELDS_LIMIT = 5;
+    const itemKeys = take(
+        keys.filter(_ => (attributes[_].type === 'string') && !isNil(data[_]) && (_ !== entityLabelKey)),
+        FIELDS_LIMIT
+    );
+
+    const formatLabel = (label = '') => label.split('_')
+        .map(_ => capitalize(_))
+        .join(' ');
+
+    return (<Box padding={4}>
+        <Typography variant="sigma" textColor="neutral600" id="entity-details">
+            { getMessage('page.details.panel.entity', 'Details') }
+        </Typography>
+        <Box paddingTop={2} paddingBottom={6}>
+            <Divider />
+        </Box>
+        <Stack size={itemKeys.length}>
+            <Flex direction="column" alignItems="flex-start">
+                <Typography fontWeight="bold">{ formatLabel(entityLabelKey) }</Typography>
+                <Typography>{ data[entityLabelKey] }</Typography>
+            </Flex>
+            {  itemKeys.map(_ => 
+                (<Flex key={`prop_${_}`} direction="column" alignItems="flex-start">
+                    <Typography fontWeight="bold">{ formatLabel(_) }</Typography>
+                    <Typography>{ data[_] }</Typography>
+                </Flex>))
+            }
+        </Stack>
+    </Box>);
+};
+
+DetailsEntity.propTypes = {
+    data: PropTypes.object.isRequired,
+    schema: PropTypes.object.isRequired,
+    config: PropTypes.object.isRequired,
+};
+
+export default DetailsEntity;
+ 

package/admin/src/pages/Details/components/DetailsFilters/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box'; 
+import { Flex } from '@strapi/design-system/Flex'; 
+import { Stack } from '@strapi/design-system/Stack';
+import { Switch } from '@strapi/design-system/Switch';
+import { Typography } from '@strapi/design-system/Typography'; 
+import { getMessage } from '../../../../utils';
+
+const DetailsFilters = ({ data, onChange }) => {
+
+    const { removed = false } = data;
+
+    const handleOnChange = (prop, value) => onChange({
+        ...data,
+        [prop]: !value ? undefined : value,
+    });
+
+    return (<Box as={Flex}>
+        <Stack size={2} horizontal>
+            <Typography variant="epsilon">{getMessage('page.details.filters.label', '')}</Typography>
+            <Switch 
+                label={getMessage('page.details.filters.removed.label', 'Comments visibility')} 
+                onLabel={getMessage('page.details.filters.removed.show', 'Show')} 
+                offLabel={getMessage('page.details.filters.removed.hide', 'Hide')}
+                selected={removed} onChange={() => handleOnChange('removed', !removed)} 
+                visibleLabels />
+        </Stack>
+    </Box>);
+};
+
+DetailsFilters.propTypes = {
+    data: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+};
+
+export default DetailsFilters;

package/admin/src/pages/Details/components/DetailsFilters/styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Link } from '@strapi/design-system/Link';
+
+export const TableLink = styled(Link)`
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+`

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

@@ -4,11 +4,15 @@
  *
  */
 
-import React, { useRef, useMemo } from 'react';
+import React, { memo, useRef, useMemo, useState } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+import isEqual from 'react-fast-compare';
 import { useQuery } from 'react-query';
 import { useRouteMatch } from 'react-router-dom';
 import { Layout, HeaderLayout, TwoColsLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
 import { Link } from '@strapi/design-system/Link';
 import { Loader } from '@strapi/design-system/Loader';
 import { Stack } from '@strapi/design-system/Stack';
@@ -24,16 +28,17 @@ import {
   useFocusWhenNavigate,
 } from '@strapi/helper-plugin';
 import getMessage from '../../utils/getMessage';
-import { fetchDetailsData, fetchContentTypeData } from './utils/api';
+import { fetchDetailsData, fetchContentTypeData } from '../utils/api';
 import pluginPermissions from '../../permissions';
 import { getUrl } from '../../utils';
 import Nav from '../../components/Nav';
-import { REGEX } from '../../utils/constants';
-import EntityDetails from '../../components/EntityDetails';
+import DetailsEntity from './components/DetailsEntity';
 import DiscussionThread from '../../components/DiscussionThread';
 import DiscussionStatus from '../../components/DiscussionStatus';
+import makeAppView from '../App/reducer/selectors';
+import DetailsFilters from './components/DetailsFilters';
 
-const Details = () => {
+const Details = ({ config }) => {
   useFocusWhenNavigate();
 
   const {
@@ -45,28 +50,35 @@ const Details = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
 
-  const viewPermissions = useMemo(() => {
-    return { view: pluginPermissions.view };
-  }, []);
+  const viewPermissions = useMemo(() => ({ 
+    access: pluginPermissions.access,
+    moderate: pluginPermissions.moderate,
+    accessReports:  pluginPermissions.reports,
+    reviewReports: pluginPermissions.reportsReview,
+  }), []);
 
   const {
     isLoading: isLoadingForPermissions,
-    allowedActions: { canView },
+    allowedActions: { canAccess, canModerate, canAccessReports, canReviewReports },
   } = useRBAC(viewPermissions);
 
+  const [filters, setFilters] = useState({});
+
+  const regexUID = new RegExp(config.regex.uid);
+
   const { isLoading: isLoadingForData, data, isFetching } = useQuery(
-    ['get-details-data', id],
-    () => fetchDetailsData(id, toggleNotification),
+    ['get-details-data', id, filters, canAccess],
+    () => fetchDetailsData(id, filters, toggleNotification),
     {
       initialData: { },
     }
   );
 
   const { entity, level, selected } = data;
-  const entityUidValid = entity?.uid && REGEX.uid.test(entity?.uid);
+  const entityUidValid = entity?.uid && regexUID.test(entity.uid);
 
   const { data: contentTypeData } = useQuery(
-    ['get-additional-data', entity?.uid],
+    ['get-additional-data', entity?.uid, canAccess],
     () => fetchContentTypeData(entity?.uid, toggleNotification),
     {
       enabled: !!entity?.uid, 
@@ -74,36 +86,57 @@ const Details = () => {
     }
   )
 
+  const handleChangeFilters = props => setFilters(props);
+
   const isLoading = isLoadingForData || isFetching;
 
-  return <Box background="neutral100">
-          <Layout sideNav={<Nav />}>
-            {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (<LoadingIndicatorPage />) : (
-            <>
-              <HeaderLayout 
-                navigationAction={
-                <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
-                  { getMessage('HeaderLayout.link.go-back', 'Back', false) }
-                </Link>}
-                title={ getMessage('page.details.header') } 
-                subtitle={ getMessage('page.details.header.description') } as="h2" />
-              <ContentLayout>
-                <TwoColsLayout 
-                  startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} />} 
-                  endCol={ <Stack size={2}>
-                    <DiscussionStatus item={selected} />
-                    { !contentTypeData?.schema ? (<Box padding={4}>
-                        <Loader small>Fetching entity...</Loader>
-                      </Box>) : 
-                      (<EntityDetails data={entity} schema={contentTypeData?.schema} />)
-                    }
-                  </Stack>
-                  } 
-                />
-              </ContentLayout>
-            </>) }
-          </Layout>
-        </Box>;
+  if (canAccess) {
+    return <Box background="neutral100">
+            <Layout>
+              {(isLoading || isLoadingForPermissions) && isEmpty(data) ? (<LoadingIndicatorPage />) : (
+              <>
+                <HeaderLayout 
+                  navigationAction={
+                  <Link startIcon={<ArrowLeft />} to={getUrl(`discover`)}>
+                    { getMessage('HeaderLayout.link.go-back', 'Back', false) }
+                  </Link>}
+                  title={ getMessage('page.details.header') } 
+                  subtitle={ getMessage('page.details.header.description') } 
+                  primaryAction={<DetailsFilters data={filters} onChange={handleChangeFilters} />}
+                  secondaryAction={<Box as={Flex}>&nbsp;</Box>}
+                  as="h2" />
+                <ContentLayout>
+                  <TwoColsLayout 
+                    startCol={<DiscussionThread level={level} selected={selected} isReloading={isLoading} allowedActions={{ canModerate, canAccessReports, canReviewReports }} />} 
+                    endCol={ <Stack size={2}>
+                      <DiscussionStatus item={selected} />
+                      { !contentTypeData?.schema ? (<Box padding={4}>
+                          <Loader small>{ getMessage('page.details.panel.loading', 'Loading...') }</Loader>
+                        </Box>) : 
+                        (<DetailsEntity data={entity} schema={contentTypeData?.schema} config={config} />)
+                      }
+                    </Stack>
+                    } 
+                  />
+                </ContentLayout>
+              </>) }
+            </Layout>
+          </Box>;
+  }
+  return null;
+}
+
+const mapStateToProps = makeAppView();
+
+export function mapDispatchToProps(dispatch) {
+  return bindActionCreators(
+    { },
+    dispatch
+  );
 }
+const withConnect = connect(
+  mapStateToProps,
+  mapDispatchToProps
+);
 
-export default Details;
+export default compose(withConnect)(memo(Details, isEqual));

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();