strapi-plugin-comments 2.0.2 → 2.0.3

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn test:unit

package/README.md

@@ -92,6 +92,16 @@ In our minimum support we're following [official Node.js releases timelines](htt
 **We recommend always using the latest version of Strapi to start your new projects**.
 
 ## 🔧 Configuration
+
+### In `v2.0.3` and newest
+
+Version `2.0.3` introduce the intuitive **Settings** page which you can easly access via `Strapi Settings -> Section: Comments Plugin -> Configuration`. On dedicated page you will be able to setup all crucial properties which drives the plugin and customize each individual collection for which **Comments plugin** should be enabled.
+
+> *Note*
+> Default configuration for your plugin is fetched from `config/plugins.js` or directly from the plugin itself. If you would like to customize the default state to which you might revert, please follow the next section.
+
+### In `v2.0.2` and older + default configuration state for `v2.0.3` and newest
+
 To setup amend default plugin configuration we recommend to put following snippet as part of `config/plugins.js` or `config/<env>/plugins.js` file. If the file does not exist yet, you have to create it manually. If you've got already configurations for other plugins stores by this way, use just the `comments` part within exising `plugins` item.
 
 
@@ -128,6 +138,9 @@ To setup amend default plugin configuration we recommend to put following snippe
 ## Additional GQL Configuration
 All you need to do is to install and enable `@strapi/plugin-graphql` for you instance based on the **[official Strapi v4 docs](https://docs.strapi.io/developer-docs/latest/plugins/graphql.html#configurations)** and decide if you would like to call it by anyone (open for world) or only by authenticated users (Strapi users).
 
+> **Important!**
+> If you're using `config/plugins.js` to configure your plugins , please put `comments` property before `graphql`. Otherwise types are not going to be properly added to GraphQL Schema. That's because of dynamic types which base on plugin configuration which are added on `boostrap` stage, not `register`. This is not valid if you're using `graphql` plugin without any custom configuration, so most of cases in real.
+
 ```json
   {
     // ...
@@ -360,7 +373,7 @@ Updates a specified Comment content based on it `commentId` and related to speci
 
 *GraphQL equivalent: [Public GraphQL API -> Delete Comment](#delete-comment-1)*
 
-`DELETE <host>/api/comments/api::<collection name>.<content type name>:<entity id>/<commentId>?authorId=<authorId>`
+`DELETE <host>/api/comments/api::<collection name>.<content type name>:<entity id>/comment/<commentId>?authorId=<authorId>`
 
 Deletes a specified Comment based on it `commentId` and related to specified instance of Content Type like for example `Page` with `ID: 1`.
 

package/__mocks__/initSetup.js

@@ -1,13 +1,42 @@
 const { get, set } = require('lodash');
 
-module.exports = (config = {}) => {
+module.exports = (config = {}, toStore = false) => {
   const mock = {
+    db: toStore ? {
+      plugin: {
+        comments: {
+          config: { ...config },
+        },
+      },
+    }: {},
     getRef: function() {
       return this;
     },
     plugin: function(name) {
       return this.plugins[name];
     },
+    store: async function(storeProps) {
+      const { type, name } = storeProps; // { type: 'plugin', name: 'comments' }
+
+      const mockedStore = {
+        get: async function(props) { // { key: 'config' }
+          const { key } = props;
+          return new Promise(resolve => resolve(get(mock.db, `${type}.${name}.${key}`, undefined)));
+        },
+        set: async function(props) { // { key: 'config', value: {...} }
+          const { key, value } = props;
+          set(mock.db, `${type}.${name}.${key}`, value);
+          return this.get(key);
+        },
+        delete: async function(props) { // { key: 'config' }
+          const { key } = props;
+          set(mock.db, `${type}.${name}.${key}`, undefined);
+          return new Promise(resolve => resolve(true));
+        },
+      };
+
+      return new Promise(resolve => resolve(mockedStore));
+    },
     plugins: {
       comments: {
         service: function(name) {
@@ -44,7 +73,7 @@ module.exports = (config = {}) => {
           entryLabel: {
             'api::blog-post.blog-post': ['alternative_subject'],
           },
-          ...config
+          ...(toStore ? {} : config)
         }
       }
     }

package/admin/src/hooks/useConfig.js

@@ -0,0 +1,43 @@
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { fetchConfig, restoreConfig, updateConfig } from '../pages/Settings/utils/api';
+import pluginId from '../pluginId';
+import { getMessage } from '../utils';
+
+const useConfig = (toggleNotification) => {
+  const queryClient = useQueryClient();
+
+  const fetch = useQuery('get-config', () =>
+    fetchConfig(toggleNotification)
+  );
+
+  const handleError = (type, callback = () => {}) => {
+    toggleNotification({
+      type: 'warning',
+      message: `${pluginId}.page.settings.notification.${type}.error`,
+    });
+    callback();
+  };
+
+  const handleSuccess = (type, callback = () => {}) => {
+    queryClient.invalidateQueries('get-config');
+    toggleNotification({
+      type: 'success',
+      message: `${pluginId}.page.settings.notification.${type}.success`,
+    });
+    callback();
+  };
+
+  const submitMutation = useMutation(updateConfig, {
+    onSuccess: () => handleSuccess('submit'),
+    onError: () => handleError('submit'),
+  });
+
+  const restoreMutation = useMutation(restoreConfig, {
+    onSuccess: () => handleSuccess('restore'),
+    onError: () => handleError('restore'),
+  });
+
+  return { fetch, submitMutation, restoreMutation };
+};
+
+export default useConfig;

package/admin/src/index.js

@@ -6,7 +6,7 @@ import PluginIcon from './components/PluginIcon';
 import pluginPermissions from './permissions';
 import reducers from './reducers';
 
-const name = pluginPkg.strapi.name;
+const { name, displayName } = pluginPkg.strapi;
 
 export default {
   register(app) {
@@ -16,7 +16,7 @@ export default {
       icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.plugin.name`,
-        defaultMessage: name,
+        defaultMessage: displayName,
       },
       Component: async () => {
         const component = await import(/* webpackChunkName: "[request]" */ './pages/App');
@@ -25,6 +25,35 @@ export default {
       },
       permissions: pluginPermissions.access,
     });
+
+    app.createSettingSection(
+      {
+        id: pluginId,
+        intlLabel: {
+          id: `${pluginId}.plugin.section`,
+          defaultMessage: `${displayName} plugin`,
+        },
+      },
+      [
+        {
+          intlLabel: {
+            id: `${pluginId}.plugin.section.item`,
+            defaultMessage: 'Configuration',
+          },
+          id: 'comments',
+          to: `/settings/${pluginId}`,
+          Component: async () => {
+            const component = await import(
+              /* webpackChunkName: "documentation-settings" */ './pages/Settings'
+            );
+    
+            return component;
+          },
+          permissions: pluginPermissions.settings,
+        },
+      ]
+    );
+
     app.addReducers(reducers);
     app.registerPlugin({
       id: pluginId,

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

@@ -28,7 +28,7 @@ import {
 import getMessage from '../../utils/getMessage';
 import { fetchDetailsData, fetchContentTypeData } from '../utils/api';
 import pluginPermissions from '../../permissions';
-import { getUrl } from '../../utils';
+import { getUrl, parseRegExp } from '../../utils';
 import Nav from '../../components/Nav';
 import DetailsEntity from './components/DetailsEntity';
 import DiscussionThread from '../../components/DiscussionThread';
@@ -60,7 +60,10 @@ const Details = ({ config }) => {
 
   const [filters, setFilters] = useState({});
 
-  const regexUID = new RegExp(config.regex.uid);
+  const regexUID = new RegExp(
+    parseRegExp(config.regex.uid).value,
+    parseRegExp(config.regex.uid).flags
+  );
 
   const { isLoading: isLoadingForData, data, isFetching } = useQuery(
     ['get-details-data', id, filters, canAccess],

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

@@ -0,0 +1,342 @@
+import React, { useRef, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { Formik } from 'formik';
+import { capitalize, first, orderBy, isEmpty } from 'lodash';
+import {
+	CheckPermissions,
+	LoadingIndicatorPage,
+	Form,
+	useTracking,
+	useNotification,
+	useRBAC,
+	useFocusWhenNavigate,
+	useOverlayBlocker,
+} from '@strapi/helper-plugin';
+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 { 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 } from '@strapi/icons';
+
+import pluginPermissions from '../../permissions';
+import useConfig from '../../hooks/useConfig';
+import { fetchAllContentTypes, fetchRoles } from './utils/api';
+import { getMessage, parseRegExp } from '../../utils';
+import ConfirmationDialog from '../../components/ConfirmationDialog';
+
+
+const Settings = () => {
+	useFocusWhenNavigate();
+
+	const { notifyStatus } = useNotifyAT();
+	const { trackUsage } = useTracking();
+	const trackUsageRef = useRef(trackUsage);
+	const toggleNotification = useNotification();
+    const { lockApp, unlockApp } = useOverlayBlocker();
+  
+	const viewPermissions = useMemo(() => ({ 
+	  access: pluginPermissions.settings.read,
+	  change: pluginPermissions.settings.change,
+	}), []);
+  
+	const {
+	  isLoading: isLoadingForPermissions,
+	  allowedActions: { canAccess, canChange },
+	} = useRBAC(viewPermissions);
+
+	const [restoreConfigmationVisible, setRestoreConfigmationVisible] = useState(false);
+
+	const { fetch, submitMutation, restoreMutation } = useConfig(toggleNotification);
+	const { data: configData, isLoading: isConfigLoading, err: configErr } = fetch;
+
+	const { data: allCollectionsData, isLoading: areCollectionsLoading, err: collectionsErr } = useQuery(
+		['get-all-content-types', canAccess],
+		() => fetchAllContentTypes(toggleNotification)
+	  );
+
+	const { data: allRolesData, isLoading: areRolesLoading, err: rolesErr } = useQuery(
+		['get-all-roles', canAccess],
+		() => fetchRoles(toggleNotification)
+	);
+
+	const isLoading = isLoadingForPermissions || isConfigLoading || areCollectionsLoading || areRolesLoading;
+	const isError = configErr || collectionsErr || rolesErr;
+
+	const preparePayload = ({ enabledCollections, gqlAuthEnabled, approvalFlow, entryLabel, ...rest }) => ({
+		...rest,
+		enabledCollections,
+		approvalFlow: approvalFlow.filter(_ => enabledCollections.includes(_)),
+		entryLabel: {
+			...Object.keys(entryLabel).reduce((prev, curr) => ({
+				...prev,
+				[curr]: enabledCollections.includes(curr) ? entryLabel[curr] : undefined,
+			}), {}),
+			'*': entryLabel['*'],
+		},
+		reportReasons: configData?.reportReasons,
+		gql: gqlAuthEnabled ? { auth: true } : undefined,
+	});
+
+	if (isLoading || isError) {
+		return (<LoadingIndicatorPage>
+				{ getMessage('page.settings.loading')}
+			</LoadingIndicatorPage>);
+	}
+
+	const regexUID = !isLoading ? new RegExp(
+		parseRegExp(fetch.data.regex?.uid).value,
+		parseRegExp(fetch.data.regex?.uid).flags
+	) : null;
+
+	const allRoles = allRolesData?.data || [];
+	const allCollections = !isLoading && allCollectionsData
+		.filter(({ uid }) => first(uid.split(regexUID).filter(s => s && s.length > 0)) === 'api');
+	const enabledCollections = configData?.enabledCollections
+		?.map(uid => allCollections.find(_ => _.uid === uid) ? uid : undefined)
+		.filter(_ => _) || [];
+	const entryLabel = configData?.entryLabel || {};
+	const approvalFlow = configData?.approvalFlow || [];
+	const badWords = configData?.badWords || undefined;
+	const isGQLPluginEnabled = configData?.isGQLPluginEnabled;
+	const gqlAuthEnabled = configData?.gql?.auth || undefined;
+	const moderatorRoles = configData?.moderatorRoles
+		?.filter(code => allRoles.find(_ => _.code === code)) || [];
+
+	const changeApprovalFlowFor = (uid, current, value) => {
+		const currentSet = new Set(current);
+		if (value) {
+			currentSet.add(uid);
+		} else {
+			currentSet.delete(uid);
+		}
+		return Array.from(currentSet);
+	};
+
+	const changeEntryLabelFor = (uid, current, value) => ({
+		...current,
+		[uid]: value && !isEmpty(value) ? [...value] : undefined,
+	});
+
+	const handleUpdateConfiguration = async (form) => {
+		if (canChange) {
+			lockApp();
+			await submitMutation.mutateAsync(preparePayload(form));
+			unlockApp();
+		}
+	};
+
+	const handleRestoreConfirmation = () => setRestoreConfigmationVisible(true);
+	const handleRestoreConfiguration = async () => {
+		if (canChange) {
+			lockApp();
+			await restoreMutation.mutateAsync();
+			unlockApp();
+			setRestoreConfigmationVisible(false);
+		}
+	};
+	const handleRestoreCancel = () => setRestoreConfigmationVisible(false);
+
+	const boxDefaultProps = {
+		background: "neutral0",
+		hasRadius: true,
+		shadow: "filterShadow",
+		padding: 6,
+	};
+
+	return (
+		<Main>
+			<Formik
+				initialValues={{
+					enabledCollections,
+					moderatorRoles,
+					badWords,
+					approvalFlow,
+					entryLabel,
+					gqlAuthEnabled,
+				}}
+				enableReinitialize={true}
+				onSubmit={handleUpdateConfiguration}
+			>
+				{({ handleSubmit, setFieldValue, values }) => (
+					<Form noValidate onSubmit={handleSubmit}>
+						<HeaderLayout
+							title={getMessage('page.settings.header.title')}
+							subtitle={getMessage('page.settings.header.description')}
+							primaryAction={
+								<CheckPermissions permissions={pluginPermissions.settingsChange}>
+									<Button type="submit" startIcon={<Check />} >
+										{getMessage('page.settings.actions.submit')}
+									</Button>
+								</CheckPermissions>
+							}
+						/>
+						<ContentLayout>
+							<Stack size={6}>
+								<Box {...boxDefaultProps}>
+									<Stack size={4}>
+										<Typography variant="delta" as="h2">
+											{getMessage('page.settings.section.general')}
+										</Typography>
+										<Grid gap={4}>
+											<GridItem col={12}>
+												<Select
+													name="enabledCollections"
+													label={getMessage('page.settings.form.enabledCollections.label')}
+													placeholder={getMessage('page.settings.form.enabledCollections.placeholder')}
+													hint={getMessage('page.settings.form.enabledCollections.hint')}
+													onClear={() => setFieldValue('enabledCollections', [], false)}
+													value={values.enabledCollections}
+													onChange={(value) => setFieldValue('enabledCollections', value, false)}
+													multi
+													withTags
+												>
+													{ allCollections.map(({ uid, schema: { displayName } }) => 
+														(<Option key={uid} value={uid}>{displayName}</Option>))}
+												</Select>
+											</GridItem>
+											<GridItem col={6} xs={12}>
+												<Select
+													name="moderatorRoles"
+													label={getMessage('page.settings.form.moderatorRoles.label')}
+													placeholder={getMessage('page.settings.form.moderatorRoles.placeholder')}
+													hint={getMessage('page.settings.form.moderatorRoles.hint')}
+													onClear={() => setFieldValue('moderatorRoles', [], false)}
+													value={values.moderatorRoles}
+													onChange={(value) => setFieldValue('moderatorRoles', value, false)}
+													multi
+													withTags
+												>
+													{ allRoles.map(({ code, name }) => 
+														(<Option key={code} value={code}>{name}</Option>))}
+												</Select>
+											</GridItem>
+											<GridItem col={6} xs={12}>
+												<ToggleInput
+													name="badWords"
+													label={getMessage('page.settings.form.badWords.label')}
+													hint={getMessage('page.settings.form.badWords.hint')}
+													checked={values.badWords}
+													onChange={({ target: { checked } }) => setFieldValue('badWords', checked, false)}
+													onLabel={getMessage('compontents.toogle.enabled')}
+													offLabel={getMessage('compontents.toogle.disabled')}
+												/>
+											</GridItem>
+											{ isGQLPluginEnabled && (<GridItem col={6} xs={12}>
+												<ToggleInput
+													name="badWords"
+													label={getMessage('page.settings.form.gqlAuth.label')}
+													hint={getMessage('page.settings.form.gqlAuth.hint')}
+													checked={values.gqlAuthEnabled}
+													onChange={({ target: { checked } }) => setFieldValue('gqlAuthEnabled', checked, false)}
+													onLabel={getMessage('compontents.toogle.enabled')}
+													offLabel={getMessage('compontents.toogle.disabled')}
+												/>
+											</GridItem>) }
+										</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')}
+																	/>
+																	{ !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
+																	>
+																		{ 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">
+													{getMessage('page.settings.section.restore')}
+												</Typography>
+												<Typography variant="pi"as="h4">
+													{getMessage('page.settings.section.restore.subtitle')}
+												</Typography>
+											</Stack>
+											<Grid gap={4}>
+												<GridItem col={6}>
+													<Button variant="danger-light" startIcon={<Refresh />} onClick={handleRestoreConfirmation}>
+														{getMessage('page.settings.actions.restore')}
+													</Button>
+
+													<ConfirmationDialog 
+														isVisible={restoreConfigmationVisible}
+														isActionAsync={restoreMutation.isLoading}
+														header={getMessage('page.settings.actions.restore.confirmation.header')}
+														labelConfirm={getMessage('page.settings.actions.restore.confirmation.button.confirm')}
+														iconConfirm={<Refresh />}
+														onConfirm={handleRestoreConfiguration} 
+														onCancel={handleRestoreCancel}>
+															{ getMessage('page.settings.actions.restore.confirmation.description') }
+													</ConfirmationDialog>
+												</GridItem>
+											</Grid>
+										</Stack>
+									</Box>				
+								</CheckPermissions>
+							</Stack>
+						</ContentLayout>
+					</Form>
+				)}
+			</Formik>
+		</Main>
+	);
+}
+
+
+export default Settings;

package/admin/src/pages/Settings/utils/api.js

@@ -0,0 +1,50 @@
+import { getApiURL, axiosInstance, handleAPIError } from '../../../utils';
+
+// eslint-disable-next-line import/prefer-default-export
+export const fetchConfig = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(getApiURL(`settings/config`));
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};
+
+export const updateConfig = async (body, toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.put(getApiURL(`settings/config`), body);
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};
+
+export const restoreConfig = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.delete(getApiURL(`settings/config`));
+
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};
+
+export const fetchAllContentTypes = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(`/content-type-builder/content-types`);
+    return data?.data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};
+
+export const fetchRoles = async (toggleNotification) => {
+  try {
+    const { data } = await axiosInstance.get(`/admin/roles`);
+    return data;
+  } catch (err) {
+    handleAPIError(err, toggleNotification);
+  }
+};

package/admin/src/permissions.js

@@ -6,11 +6,14 @@ const pluginPermissions = {
       { action: permissions.render(permissions.reports.read), subject: null },
       // { action: 'plugin::comments.discover.read', subject: null },
       { action: permissions.render(permissions.settings.read), subject: null },
+      { action: permissions.render(permissions.settings.read), 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 }],
+    settings: [{ action: permissions.render(permissions.settings.read), subject: null }],
+    settingsChange: [{ action: permissions.render(permissions.settings.change), subject: null }],
   };
   
   export default pluginPermissions;

package/admin/src/translations/en.json

@@ -1,5 +1,7 @@
 {
     "plugin.name": "Comments",
+    "plugin.section": "Comments plugin",
+    "plugin.section.item": "Configuration",
     "common.button.back": "Go back",
     "nav.header.moderation": "Moderation",
     "nav.header.settings": "Settings",
@@ -79,8 +81,42 @@
     "page.details.filters.label": "View",
     "page.details.filters.removed.visibility": "Show removed comments",
     "page.coming.soon": "Wait for what is coming soon...",
+    "page.settings": "Settings",
+    "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.section.general": "General configuration",
+    "page.settings.section.collections": "Collection(s) configuration",
+    "page.settings.section.restore": "Restore default configuration",
+    "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.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.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",
+    "page.settings.form.badWords.label": "Bad words filtering",
+    "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.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\"",
+    "page.settings.actions.restore.confirmation.header": "Restore default configuration",
+    "page.settings.actions.restore.confirmation.description": "You're about to restore plugin configuration to it default values. It might have destructive impact on already collected content. Do you really want to proceed?",
+    "page.settings.actions.restore.confirmation.button.confirm": "Yes, I want to restore",
+    "page.settings.notification.submit.success": "Configuration has been saved successfully",
+    "page.settings.notification.submit.error": "Failed to save configuration. Try again.",
+    "page.settings.notification.restore.success": "Configuration has been restored successfully",
+    "page.settings.notification.restore.error": "Failed to restore configuration. Try again.",
+    "page.settings.loading": "Fetching configuration...",
     "compontents.confirmation.dialog.header": "Confirmation",
     "compontents.confirmation.dialog.description": "Do you really want to perform this action?",
     "compontents.confirmation.dialog.button.confirm": "Yes, I do",
-    "compontents.confirmation.dialog.button.cancel": "Cancel"
+    "compontents.confirmation.dialog.button.cancel": "Cancel",
+    "compontents.toogle.enabled": "Enabled",
+    "compontents.toogle.disabled": "Disabled"
 }