Skip to content

Commit

Permalink
feat: [CU-23e4bnk]
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyp3rius
cyp3rius committed Feb 17, 2022
1 parent a9741e4 commit d363b6f
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 67 deletions.
18 changes: 18 additions & 0 deletions admin/src/components/FormSwitch/index.js
View file
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions admin/src/components/FormSwitch/styles.js
View file
Original file line number Diff line number Diff line change
@@ -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;
}
`;
136 changes: 76 additions & 60 deletions admin/src/pages/Settings/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,29 +12,28 @@ 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';
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 = () => {
Expand All @@ -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;
Expand Down Expand Up @@ -166,6 +166,8 @@ const Settings = () => {
};
const handleRestartDiscard = () => setRestartRequired(false);

const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);

const boxDefaultProps = {
background: "neutral0",
hasRadius: true,
Expand Down Expand Up @@ -201,7 +203,7 @@ const Settings = () => {
}
/>
<ContentLayout>
<Stack size={6}>
<Stack size={4}>
{ restartRequired && (
<RestartAlert
closeLabel={getMessage('page.settings.actions.restart.alert.cancel')}
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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">
Expand Down
16 changes: 9 additions & 7 deletions admin/src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,24 +85,26 @@
"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",
"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.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\"",
Expand Down

0 comments on commit d363b6f

Please sign in to comment.