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

package/README.md

@@ -50,9 +50,15 @@ Enjoy 🎉
 
 Complete installation requirements are exact same as for Strapi itself and can be found in the documentation under [Installation Requirements](https://docs.strapi.io/developer-docs/latest/getting-started/introduction.html).
 
+**Minimum environment requirements**
+- Node.js `>=14.x.x`
+- NPM `>=7.x.x`
+
+In our minimum support we're following [official Node.js releases timelines](https://nodejs.org/en/about/releases/).
+
 **Supported Strapi versions**:
 
-- Strapi v4.0.2 (recently tested)
+- Strapi v4.0.4 (recently tested)
 
 (This plugin is not working with v3.x and not may work with the older Strapi v4 versions, but these are not tested nor officially supported at this time.)
 
@@ -76,6 +82,7 @@ To setup amend default plugin configuration we recommend to put following snippe
     comments: {
         badWords: false,
         moderatorRoles: ["Authenticated"],
+        approvalFlow: ['api::page.page'],
         entryLabel: {
             '*': ['Title', 'title', 'Name', 'name', 'Subject', 'subject'],
             'api::page.page': ['MyField'],
@@ -87,7 +94,8 @@ 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 `*`.
+- `approvalFlow` - list of Content Types which are supporting approval flow. Values must be in format like `'api::<collection name>.<content type name>'`. For not included, posted comments are going to be immediately visible. 
+- `entryLabel` - ordered list of property names per Content Type to generate related entity label. Keys must be in format like `'api::<collection name>.<content type name>'`. Default formatting set as `*`.
 
 ## Additional GQL Configuration
 
@@ -220,7 +228,6 @@ Posts a Comment related to specified instance of Content Type like for example `
     },
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
-	"related": "api::page.page:1"
 }
 ```
 
@@ -230,7 +237,6 @@ Posts a Comment related to specified instance of Content Type like for example `
 	"authorUser": 1, // id of a author user. Optional in case of 'enableUsers: true' in the plugin configuration
 	"content": "My sample response",
 	"threadOf": 2, // id of comment we would like to start / continue the thread (Optional)
-	"related": "api::page.page:1"
 }
 ```
 

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

@@ -39,6 +39,7 @@ const DiscussionThread = ({ level = [], selected = {}, isReloading }) => {
                 const isSelected = selected.id === item.id;
                 const isThreadAuthor = !isNil(selected?.threadOf?.authorId) && (selected?.threadOf?.authorId === item.authorId);
                 return (<DiscussionThreadItem 
+                    key={`comment-${item.id}`}
                     {...item} 
                     root={isNil(rootThread)}
                     blockedThread={rootThread?.blockedThread || item.blockedThread}

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, pinned, blocked, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
+    const { id, isSelected, isThreadAuthor, content, root, preview, pinned, blocked, removed, blockedThread, gotThread, threadFirstItemId, authorUser, authorAvatar, authorName } = item;
 
     let background = 'neutral100';
     let borderColor = 'neutral200';
@@ -64,14 +64,14 @@ const DiscussionThreadItem = (item) => {
                         </Box>
                         { !preview && (<DiscussionThreadItemActions { ...item } root={root || pinned} />) }
                     </DiscussionThreadItemBoxContent>
-                    { !(preview || isBlocked) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
+                    { !(preview || isBlocked || removed) && (<DiscussionThreadItemWarnings { ...item } gotThread={gotThread || root} />) }
                 </Flex>
                 <Divider background={dividerColor} />
                 <DiscussionThreadItemMeta { ...item } />
             </DiscussionThreadItemBox>
         </DiscussionThreadItemContent>
 
-        { (gotThread && !(preview || pinned)) && (<DiscussionThreadItemLinkBox direction="column" alignItems="flex-end">
+        { (gotThread && !(removed || 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/DiscussionThreadItemActions/index.js

@@ -4,23 +4,23 @@
  *
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useMutation, useQueryClient } from 'react-query';
 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 { Check, Cross } from '@strapi/icons';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
-import { getMessage, handleAPIError } from '../../utils';
-import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsGroupWrapper, DiscussionThreadItemActionsWrapper } from './styles';
+import { getMessage, handleAPIError, resolveCommentStatus, resolveCommentStatusColor } from '../../utils';
+import { DiscussionThreadItemActionsBadge, DiscussionThreadItemActionsWrapper } from './styles';
 import ConfirmationDialog from '../ConfirmationDialog';
-import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/Details/utils/api';
+import { blockItem, blockItemThread, unblockItem, unblockItemThread } from '../../pages/utils/api';
 import pluginId from '../../pluginId';
 import { LockIcon, UnlockIcon } from '../icons';
+import DiscussionThreadItemApprovalFlowActions from '../DiscussionThreadItemApprovalFlowActions';
 
-const DiscussionThreadItemActions = ({ id, blocked, blockedThread, gotThread, pinned, approvalStatus, root }) => {
+const DiscussionThreadItemActions = ({ id, blocked, removed, blockedThread, gotThread, pinned, approvalStatus, root }) => {
 
     const [blockConfirmationVisible, setBlockConfirmationVisible] = useState(false);
     const [blockThreadConfirmationVisible, setBlockThreadConfirmationVisible] = useState(false);
@@ -71,35 +71,16 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, gotThread, pi
     const gotApprovalFlow = !isNil(approvalStatus);
     const needsApproval = gotApprovalFlow && (approvalStatus === 'PENDING');
     const isBlocked = blocked || blockedThread;
+    const isRejected = gotApprovalFlow && (approvalStatus === 'REJECTED');
 
     const resolveStatusBadge = () => {
-        let color = 'primary';
-        let label = '';
-
-        if (isBlocked) {
-            color = 'danger';
-            label = 'blocked';
-        } else if (gotApprovalFlow) {
-            label = approvalStatus.toLowerCase();
-            switch (approvalStatus) {
-                case 'APPROVED': 
-                    color = 'success';
-                    break;
-                case 'REJECTED': 
-                    color = 'danger';
-                    break;
-                default: 
-                    color = 'alternative';
-                    break;
-            };
-        }
-
+        const status = resolveCommentStatus({ removed, blocked, blockedThread, approvalStatus });
         return {
-            badgeVisible: isBlocked || gotApprovalFlow,
-            badgeColor: color,
-            badgeLabel: label,
-        }
-    }
+            badgeVisible: isBlocked || gotApprovalFlow || removed,
+            badgeColor: resolveCommentStatusColor(status),
+            badgeLabel: status,
+        };
+    };
 
     const {badgeVisible, badgeColor, badgeLabel } = resolveStatusBadge();
 
@@ -129,17 +110,20 @@ const DiscussionThreadItemActions = ({ id, blocked, blockedThread, gotThread, pi
         unblockItemThreadMutation.mutate(id);
     };
 
+    if (removed || isRejected) {
+        return (<DiscussionThreadItemActionsWrapper as={Flex} direction="row">
+            <DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.common.item.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>
+        </DiscussionThreadItemActionsWrapper>);
+    }
+
     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>)}
+            { badgeVisible && (<DiscussionThreadItemActionsBadge color={badgeColor} backgroundColor={`${badgeColor}100`} textColor={`${badgeColor}600`}>{getMessage(`page.common.item.status.${badgeLabel}`, badgeLabel)}</DiscussionThreadItemActionsBadge>)}
             { !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 && blocked && (<IconButton onClick={handleUnblockClick} loading={unblockItemMutation.isLoading} icon={<UnlockIcon />} label={getMessage('page.details.actions.comment.unblock', 'Unblock')}  style={(blocked && !blockedThread) ? { marginTop: '1px', marginRight: '.5rem' } : {}} />)}
             { (!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')} />
-            </DiscussionThreadItemActionsGroupWrapper>) }
+            { needsApproval && (<DiscussionThreadItemApprovalFlowActions id={id} queryToInvalidate="get-details-data" />) }
         </DiscussionThreadItemActionsWrapper>
         { !blocked && (<ConfirmationDialog 
             isVisible={blockConfirmationVisible}

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

@@ -15,8 +15,4 @@ export const DiscussionThreadItemActionsWrapper = styled(Box)`
         margin-top: .175rem;
         margin-right: .5rem;
     }
-`;
-
-export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
-    margin-left: .5rem;
 `;

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

@@ -0,0 +1,72 @@
+/**
+ *
+ * Approval Flow Actions
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useMutation, useQueryClient } from 'react-query';
+import { IconButton } from '@strapi/design-system/IconButton';
+import { Check, Cross } from '@strapi/icons';
+import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import { getMessage, handleAPIError } from '../../utils';
+import { DiscussionThreadItemActionsGroupWrapper } from './styles';
+import { approveItem, rejectItem } from '../../pages/utils/api';
+import pluginId from '../../pluginId';
+
+const DiscussionThreadItemApprovalFlowActions = ({ id, queryToInvalidate }) => {
+
+    const toggleNotification = useNotification();
+    const queryClient = useQueryClient();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+
+    const onSuccess = (message, stateAction = () => {}) => async () => {
+        if (queryToInvalidate) {
+            await queryClient.invalidateQueries(queryToInvalidate);
+        }
+        toggleNotification({
+            type: 'success',
+            message: `${pluginId}.${message}`,
+        });
+        unlockApp();
+    };
+
+    const onError = err => { handleAPIError(err, toggleNotification); };
+
+    const approveItemMutation = useMutation(approveItem, {
+        onSuccess: onSuccess('page.details.actions.comment.approve.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+    const rejectItemMutation = useMutation(rejectItem, {
+        onSuccess: onSuccess('page.details.actions.comment.reject.confirmation.success'),
+        onError,
+        refetchActive: false,
+    });
+
+
+    const handleApproveClick = () => {
+        lockApp();
+        approveItemMutation.mutate(id);
+    };
+
+    const handleRejectClick = () => {
+        lockApp();
+        rejectItemMutation.mutate(id);
+    };
+
+    return (<DiscussionThreadItemActionsGroupWrapper>
+        <IconButton icon={<Check />} label={getMessage('page.details.actions.comment.approve', 'Approve')} onClick={handleApproveClick} />
+        <IconButton icon={<Cross />} label={getMessage('page.details.actions.comment.reject', 'Reject')} onClick={handleRejectClick} />
+    </DiscussionThreadItemActionsGroupWrapper>);
+};
+
+DiscussionThreadItemApprovalFlowActions.propTypes = {
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    queryToInvalidate: PropTypes.string,
+    wrapped: PropTypes.bool,
+};
+
+export default DiscussionThreadItemApprovalFlowActions;
+ 

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { IconButtonGroup } from '@strapi/design-system/IconButton';
+
+export const DiscussionThreadItemActionsGroupWrapper = styled(IconButtonGroup)`
+    margin-left: .5rem;
+`;

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

@@ -15,7 +15,7 @@ import { Flex } from '@strapi/design-system/Flex';
 import { Typography } from '@strapi/design-system/Typography';
 import { useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
 import { getMessage, handleAPIError } from '../../utils';
-import { blockItem, blockItemThread, resolveReport } from '../../pages/Details/utils/api';
+import { blockItem, blockItemThread, resolveReport } from '../../pages/utils/api';
 import { DiscussionThreadItemWarningsWrapper } from './styles';
 import ReportsReviewModal from '../ReportsReviewModal';
 import ReportsReviewTable from '../ReportsReviewTable';

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

@@ -18,7 +18,11 @@ import getMessage from '../../utils/getMessage';
 // import PropTypes from 'prop-types';
 import getUrl from '../../utils/getUrl';
 
-const Nav = ({ hasNewComments, hasNewReports }) => {
+const Nav = ({ visible = false, hasNewComments, hasNewReports }) => {
+  if (!visible) {
+    return null;
+  }
+
   return <SubNav ariaLabel="Comments sub nav">
     <SubNavHeader label={getMessage('plugin.name')} />
     <SubNavSections>

package/admin/src/components/icons/review.js

@@ -1,7 +1,7 @@
 
 import React from 'react';
 
-const initSize = 24;
+const initSize = 16;
 
 const ReviewIcon = ({ width, height, size = 16 }) =>     
   <svg 
@@ -11,7 +11,7 @@ const ReviewIcon = ({ width, height, size = 16 }) =>
     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"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 4a4 4 0 014-4h8a4 4 0 014 4v8a4 4 0 01-4 4H4a4 4 0 01-4-4V4zm6.996.165a1.017 1.017 0 112.012 0L8 11 6.996 4.165zM8 11a1 1 0 110 2 1 1 0 010-2z" />
     </g>
   </svg>
 

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

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

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

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

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

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

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

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