strapi-plugin-comments 2.0.4 → 2.0.5

package/README.md

@@ -84,7 +84,7 @@ In our minimum support we're following [official Node.js releases timelines](htt
 
 **Supported Strapi versions**:
 
-- Strapi v4.0.7 (recently tested)
+- Strapi v4.0.8 (recently tested)
 - Strapi v4.x
 
 > This plugin is designed for **Strapi v4** and is not working with v3.x. To get version for **Strapi v3** install version [v1.x](https://github.com/VirtusLab-Open-Source/strapi-plugin-comments/tree/strapi-v3).

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

@@ -0,0 +1,18 @@
+/**
+ *
+ * Form Switch
+ *
+ */
+
+ import React from 'react';
+ import { Stack } from '@strapi/design-system/Stack';
+ import { Typography } from '@strapi/design-system/Typography';
+import { StyledSwitch } from './styles';
+
+const FormSwitch = ({ label, hint, ...props }) => (<Stack size={1}>
+    { label && (<Typography variant="pi" as="label" fontWeight="bold" textColor="neutral800">{ label }</Typography>) }
+    <StyledSwitch label={label} { ...props } />
+    { hint && (<Typography variant="pi" as="label" textColor="neutral600">{ hint }</Typography>) }
+</Stack>);
+
+export default FormSwitch;

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Switch } from '@strapi/design-system/Switch';
+
+export const StyledSwitch = styled(Switch)`
+    &>div>span {
+        font-size: 12px;
+    }
+`;

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

@@ -12,22 +12,20 @@ import {
 	useFocusWhenNavigate,
 	useOverlayBlocker,
 } from '@strapi/helper-plugin';
+import { Accordion, AccordionToggle, AccordionContent, AccordionGroup } from '@strapi/design-system/Accordion';
 import { Main } from '@strapi/design-system/Main';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { Button } from '@strapi/design-system/Button';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
+import { Switch } from '@strapi/design-system/Switch';
 import { Typography } from '@strapi/design-system/Typography';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { ToggleInput } from '@strapi/design-system/ToggleInput';
 import { Select, Option } from '@strapi/design-system/Select';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import {
-  Card,
-  CardBody,
-  CardContent,
-} from '@strapi/design-system/Card';
-import { Check, Refresh, Play } from '@strapi/icons';
+import { Tooltip } from '@strapi/design-system/Tooltip';
+import { Check, Refresh, Play, Information } from '@strapi/icons';
 
 import pluginPermissions from '../../permissions';
 import useConfig from '../../hooks/useConfig';
@@ -35,6 +33,7 @@ import { fetchAllContentTypes, fetchRoles } from './utils/api';
 import { getMessage, parseRegExp } from '../../utils';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import { RestartAlert } from './components/RestartAlert/styles';
+import FormSwitch from '../../components/FormSwitch';
 
 
 const Settings = () => {
@@ -58,6 +57,7 @@ const Settings = () => {
 
 	const [restoreConfigmationVisible, setRestoreConfigmationVisible] = useState(false);
 	const [restartRequired, setRestartRequired] = useState(false);
+	const [contentTypeExpanded, setContentTypeExpanded] = useState(undefined);
 
 	const { fetch, restartMutation, submitMutation, restoreMutation } = useConfig(toggleNotification);
 	const { data: configData, isLoading: isConfigLoading, err: configErr } = fetch;
@@ -166,6 +166,8 @@ const Settings = () => {
 	};
 	const handleRestartDiscard = () => setRestartRequired(false);
 
+	const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
+
 	const boxDefaultProps = {
 		background: "neutral0",
 		hasRadius: true,
@@ -201,7 +203,7 @@ const Settings = () => {
 							}
 						/>
 						<ContentLayout>
-							<Stack size={6}>
+							<Stack size={4}>
 								{ restartRequired && (
 									<RestartAlert 
 										closeLabel={getMessage('page.settings.actions.restart.alert.cancel')} 
@@ -234,6 +236,72 @@ const Settings = () => {
 														(<Option key={uid} value={uid}>{displayName}</Option>))}
 												</Select>
 											</GridItem>
+											{ !isEmpty(values.enabledCollections) && (
+											<GridItem col={12}>
+												<AccordionGroup 
+													label={getMessage('page.settings.form.contentTypesSettings.label')} 
+													labelAction={<Tooltip description={getMessage('page.settings.form.contentTypesSettings.tooltip')}>
+														<Information aria-hidden={true} />
+													</Tooltip>}>
+													{ orderBy(values.enabledCollections).map(uid => {
+														const { schema: { displayName, attributes = {} } } = allCollections.find(_ => _.uid === uid);
+														const stringAttributes = Object.keys(attributes).filter(_ => attributes[_].type === 'string');
+														const key = `collectionSettings-${uid}`;
+														return (<Accordion 
+															expanded={contentTypeExpanded === key} 
+															toggle={() => handleSetContentTypeExpanded(key)} 
+															key={key} 
+															id={key} 
+															size="S">
+															<AccordionToggle title={displayName} togglePosition="left" />
+															<AccordionContent>
+																<Box padding={6}>
+																	<Stack size={4}>
+																		<FormSwitch 
+																			name={`collectionSettings-${uid}-approvalFlow`}
+																			label={getMessage('page.settings.form.approvalFlow.label')}
+																			hint={getMessage({
+																				id: 'page.settings.form.approvalFlow.hint',
+																				props: { name: displayName },
+																			})}
+																			selected={values.approvalFlow.includes(uid)}
+																			onChange={() => setFieldValue('approvalFlow', changeApprovalFlowFor(uid, values.approvalFlow, !values.approvalFlow.includes(uid)), [])} 
+																			onLabel={getMessage('compontents.toogle.enabled')}
+																			offLabel={getMessage('compontents.toogle.disabled')}
+																			disabled={restartRequired}
+																			visibleLabels />
+																		{ !isEmpty(stringAttributes) && (<Select
+																			name={`collectionSettings-${uid}-entryLabel`}
+																			label={getMessage('page.settings.form.entryLabel.label')}
+																			placeholder={getMessage('page.settings.form.entryLabel.placeholder')}
+																			hint={getMessage('page.settings.form.entryLabel.hint')}
+																			onClear={() => setFieldValue('entryLabel', changeEntryLabelFor(uid, values.entryLabel))}
+																			value={values.entryLabel[uid] || []}
+																			onChange={(value) => setFieldValue('entryLabel', changeEntryLabelFor(uid, values.entryLabel, value))}
+																			multi
+																			withTags
+																			disabled={restartRequired}
+																		>
+																			{ stringAttributes.map(key => 
+																				(<Option key={`collectionSettings-${uid}-entryLabel-${key}`} value={key}>{ capitalize(key.split('_').join(' ')) }</Option>))}
+																		</Select>) }
+																	</Stack>
+																</Box>
+															</AccordionContent>
+														</Accordion>);
+												})}
+												</AccordionGroup>
+											</GridItem>)}
+										</Grid>
+									</Stack>
+								</Box>
+
+								<Box {...boxDefaultProps}>
+									<Stack size={4}>
+										<Typography variant="delta" as="h2">
+											{getMessage('page.settings.section.additional')}
+										</Typography>
+										<Grid gap={4}>
 											<GridItem col={6} xs={12}>
 												<Select
 													name="moderatorRoles"
@@ -278,64 +346,12 @@ const Settings = () => {
 										</Grid>
 									</Stack>
 								</Box>
-								{ !isEmpty(values.enabledCollections) && (<Box {...boxDefaultProps}>
-									<Stack size={4}>
-										<Typography variant="delta" as="h2">
-											{getMessage('page.settings.section.collections')}
-										</Typography>
-										<Grid gap={4}>
-											{ orderBy(values.enabledCollections).map(uid => {
-												const { schema: { displayName, attributes = {} } } = allCollections.find(_ => _.uid === uid);
-												const stringAttributes = Object.keys(attributes).filter(_ => attributes[_].type === 'string');
-												return (<GridItem key={`collectionSettings-${uid}`} col={6} s={12} xs={12}>
-													<Card background="primary100" borderColor="primary200">
-														<CardBody>
-															<CardContent style={{ width: '100%' }}>
-																<Stack size={4}>
-																	<Typography variant="epsilon" fontWeight="semibold" as="h3">{ displayName }</Typography>
-																	<ToggleInput
-																		name={`collectionSettings-${uid}-approvalFlow`}
-																		label={getMessage('page.settings.form.approvalFlow.label')}
-																		hind={getMessage({
-																			id: 'page.settings.form.approvalFlow.hint',
-																			params: { name: displayName },
-																		})}
-																		checked={values.approvalFlow.includes(uid)}
-																		onChange={({ target: { checked } }) => setFieldValue('approvalFlow', changeApprovalFlowFor(uid, values.approvalFlow, checked), [])}
-																		onLabel={getMessage('compontents.toogle.enabled')}
-																		offLabel={getMessage('compontents.toogle.disabled')}
-																		disabled={restartRequired}
-																	/>
-																	{ !isEmpty(stringAttributes) && (<Select
-																		name={`collectionSettings-${uid}-entryLabel`}
-																		label={getMessage('page.settings.form.entryLabel.label')}
-																		placeholder={getMessage('page.settings.form.entryLabel.placeholder')}
-																		hint={getMessage('page.settings.form.entryLabel.hint')}
-																		onClear={() => setFieldValue('entryLabel', changeEntryLabelFor(uid, values.entryLabel))}
-																		value={values.entryLabel[uid] || []}
-																		onChange={(value) => setFieldValue('entryLabel', changeEntryLabelFor(uid, values.entryLabel, value))}
-																		multi
-																		withTags
-																		disabled={restartRequired}
-																	>
-																		{ stringAttributes.map(key => 
-																			(<Option key={`collectionSettings-${uid}-entryLabel-${key}`} value={key}>{ capitalize(key.split('_').join(' ')) }</Option>))}
-																	</Select>) }
-																</Stack>
-															</CardContent>
-														</CardBody>
-													</Card>
-												</GridItem>);
-											})}
-										</Grid>
-									</Stack>
-								</Box>)}
 
 								<CheckPermissions permissions={pluginPermissions.settingsChange}>
 									<Box {...boxDefaultProps}>
 										<Stack size={4}>
 											<Stack size={2}>
-												<Typography variant="delta" textColor="danger700" as="h2">
+												<Typography variant="delta" as="h2">
 													{getMessage('page.settings.section.restore')}
 												</Typography>
 												<Typography variant="pi"as="h4">

package/admin/src/translations/en.json

@@ -85,15 +85,17 @@
     "page.settings.header.title": "Comments",
     "page.settings.header.description": "Configure your comments moderation capabilities",
     "page.settings.actions.submit": "Save",
-    "page.settings.actions.restore": "Restore",
+    "page.settings.actions.restore": "Restore default settings",
     "page.settings.actions.restart": "Restart Strapi",
     "page.settings.section.general": "General configuration",
-    "page.settings.section.collections": "Collection(s) configuration",
-    "page.settings.section.restore": "Restore default configuration",
+    "page.settings.section.additional": "Additional configuration",
+    "page.settings.section.restore": "Restore default settings",
     "page.settings.section.restore.subtitle": "Discarding all of applied settings and getting back to plugin default ones. Use reasonable.",
-    "page.settings.form.enabledCollections.label": "Enable Comments for Collection(s)",
+    "page.settings.form.enabledCollections.label": "Enable comments only for",
     "page.settings.form.enabledCollections.placeholder": "Select one or more collection",
-    "page.settings.form.enabledCollections.hint": "If none of collection is selected, feature are enabled for any of exsiting",
+    "page.settings.form.enabledCollections.hint": "If none is selected, all the content types are enabled",
+    "page.settings.form.contentTypesSettings.label": "Content types",
+    "page.settings.form.contentTypesSettings.tooltip": "Custom configuration per content type",
     "page.settings.form.moderatorRoles.label": "Send significant notifications to",
     "page.settings.form.moderatorRoles.placeholder": "Select one or more roles",
     "page.settings.form.moderatorRoles.hint": "Roles which are going to be notified by the plugin about significant actions to perform",
@@ -101,8 +103,8 @@
     "page.settings.form.badWords.hint": "If enabled, every post / update of comment is going to be checked against bad wording",
     "page.settings.form.gqlAuth.label": "GraphQL queries authorization",
     "page.settings.form.gqlAuth.hint": "If enabled, GraphQL API queries & mutations can be triggered only by Authenticated Strapi users. Otherwise API remains open.",
-    "page.settings.form.approvalFlow.label": "Enable approval flow",
-    "page.settings.form.approvalFlow.hint": "Comments for \"{name}\" are going to be taken through manual approval flow",
+    "page.settings.form.approvalFlow.label": "Approval flow",
+    "page.settings.form.approvalFlow.hint": "Comments associated with content type \"{name}\" are going to be taken through manual approval flow",
     "page.settings.form.entryLabel.label": "Title fields",
     "page.settings.form.entryLabel.placeholder": "Select at least one or leave empty to apply defaults",
     "page.settings.form.entryLabel.hint": "If left empty title rendering is going to take following ordered fields: \"Title\", \"Subject\" & \"Name\"",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-comments",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Strapi - Comments plugin",
   "strapi": {
     "name": "comments",
@@ -18,8 +18,8 @@
     "url": "https://github.com/VirtusLab-Open-Source/strapi-plugin-comments"
   },
   "dependencies": {
-    "@strapi/utils": "^4.0.7",
-    "@strapi/plugin-graphql": "^4.0.7",
+    "@strapi/utils": "^4.0.8",
+    "@strapi/plugin-graphql": "^4.0.8",
     "bad-words": "^3.0.4"
   },
   "devDependencies": {

package/server/controllers/client.js

@@ -13,9 +13,15 @@ module.exports = {
   async findAllFlat(ctx) {
     const { params = {}, query, sort, pagination } = ctx;
     const { relation } = parseParams(params);
+
+    const { sort: querySort, pagination: queryPagination, ...filterQuery } = query || {};
+
+
+console.log(filterQuery);
+
     try {
       return this.getService('common')
-        .findAllFlat(flatInput(relation, query, sort, pagination));
+        .findAllFlat(flatInput(relation, filterQuery, sort || querySort, pagination || queryPagination));
     } catch (e) {
       throwError(ctx, e);
     }
@@ -24,10 +30,13 @@ module.exports = {
   async findAllInHierarchy(ctx) {
     const { params = {}, query, sort } = ctx;
     const { relation } = parseParams(params);
+
+    const { sort: querySort, ...filterQuery } = query || {};
+
     try {
       return await this.getService('common')
         .findAllInHierarchy({
-          ...flatInput(relation, query, sort),
+          ...flatInput(relation, filterQuery, sort || querySort),
           dropBlockedThreads: true,
         });
     } catch (e) {

package/server/controllers/utils/__tests__/parsers.test.js

@@ -0,0 +1,94 @@
+const { flatInput } = require('../parsers');
+
+jest.mock
+
+describe('Test Comments controller parsers utils', () => {
+  
+  describe('Flat Input properties', () => {
+    const relation = 'api::test.relation';
+    const filters = {
+      content: {
+        '$eq': 'Test'
+      }
+    };
+    const sort = {
+      createdAt: 'desc'
+    };
+    const pagination = {
+      page: 3,
+      pageSize: 5,
+    };
+
+    test('Should contain default property \'populate\'', () => {
+      expect(flatInput()).toHaveProperty(['populate', 'threadOf', 'populate', 'authorUser'], true);
+    });
+
+    test('Should assign relation to \'query\'', () => {
+      expect(flatInput(relation)).toHaveProperty(['query', 'related'], relation);
+    });
+
+    test('Should assign filters to \'query\'', () => {
+      const result = flatInput(relation, filters);
+      expect(result).toHaveProperty(['query', 'content', '$eq'], filters.content['$eq']);
+    });
+
+    test('Should assign not allow to overwrite \'removed\' in $or operator', () => {
+      const overwrittenOrOperator = {
+        $or: [{ removed: true }, { removed: false }, { removed: null }]
+      };
+      const result = flatInput(relation, overwrittenOrOperator);
+      expect(result).toHaveProperty(['query', '$or', 0, 'removed', '$null'], true);
+      expect(result).toHaveProperty(['query', '$or', 1, 'removed'], false);
+    });
+
+    test('Should assign sort', () => {
+      const result = flatInput(relation, filters, sort);
+      expect(result).toHaveProperty(['sort', 'createdAt'], sort.createdAt);
+    });
+
+    test('Should assign pagination', () => {
+      const result = flatInput(relation, filters, sort, pagination);
+      expect(result).toHaveProperty(['pagination', 'page'], pagination.page);
+      expect(result).toHaveProperty(['pagination', 'pageSize'], pagination.pageSize);
+    });
+
+    test('Should build complex output', () => {
+      const day = 24 * 60 * 60 * 1000;
+      const now = Date.now().toString();
+      const oneDayBefore = new Date(Date.now().valueOf() - day).toString();
+      const complexFilters = {
+        '$or': [{
+          createdAt: {
+            '$lte':  oneDayBefore
+          }
+        }, {
+          createdAt: {
+            '$eq':  now
+          }
+        }],
+        content: {
+          '$contains': 'Test'
+        }
+      };
+
+      const complexSort = [{
+        createdAt: 'desc'
+      }, {
+        title: 'asc'
+      }];
+
+      const result = flatInput(relation, complexFilters, complexSort, pagination);
+
+      expect(result).toHaveProperty(['query', 'related'], relation);
+      expect(result).toHaveProperty(['query', '$or', 0, 'createdAt', '$lte'], oneDayBefore);
+      expect(result).toHaveProperty(['query', '$or', 1, 'createdAt', '$eq'], now);
+      expect(result).toHaveProperty(['query', '$or', 2, 'removed', '$null'], true);
+      expect(result).toHaveProperty(['query', '$or', 3, 'removed'], false);
+      expect(result).toHaveProperty(['query', 'content', '$contains'], complexFilters.content['$contains']);
+      expect(result).toHaveProperty(['sort', 0, 'createdAt'], complexSort[0].createdAt);
+      expect(result).toHaveProperty(['sort', 1, 'title'], complexSort[1].title);
+      expect(result).toHaveProperty(['pagination', 'page'], pagination.page);
+      expect(result).toHaveProperty(['pagination', 'pageSize'], pagination.pageSize);
+    });
+  });
+});

package/server/controllers/utils/parsers.js

@@ -2,20 +2,22 @@
 
 module.exports = {
     flatInput(relation, query, sort, pagination) {
-        return {
-            query: {
-              ...query,
-              $or: [{ removed: { $null: true } }, { removed: false }],
-              related: relation,
+      const filters = query?.filters || query;
+      const orOperator = (filters?.$or || []).filter(_ => !Object.keys(_).includes('removed'));
+      return {
+          query: {
+            ...filters,
+            $or: [...orOperator, { removed: { $null: true } }, { removed: false }],
+            related: relation,
+          },
+          populate: {
+            threadOf: {
+              populate: { authorUser: true },
             },
-            populate: {
-              threadOf: {
-                populate: { authorUser: true },
-              },
-            },
-            pagination,
-            sort,
-          };
+          },
+          pagination,
+          sort,
+        };
     },
   
 };