strapi-plugin-comments 2.0.8 → 2.1.0-beta.1

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

@@ -1,392 +1,226 @@
-import React, { useRef, useMemo, useState } from 'react';
-import { useQuery } from 'react-query';
-import { Formik } from 'formik';
-import { capitalize, first, orderBy, isEmpty, isEqual, isNil } from 'lodash';
-import {
-	CheckPermissions,
-	LoadingIndicatorPage,
-	Form,
-	useTracking,
-	useNotification,
-	useRBAC,
-	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 { 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';
-
-
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_query_1 = require("react-query");
+const formik_1 = require("formik");
+const lodash_1 = require("lodash");
+const helper_plugin_1 = require("@strapi/helper-plugin");
+const Accordion_1 = require("@strapi/design-system/Accordion");
+const Main_1 = require("@strapi/design-system/Main");
+const Layout_1 = require("@strapi/design-system/Layout");
+const Button_1 = require("@strapi/design-system/Button");
+const Box_1 = require("@strapi/design-system/Box");
+const Stack_1 = require("@strapi/design-system/Stack");
+const Typography_1 = require("@strapi/design-system/Typography");
+const Grid_1 = require("@strapi/design-system/Grid");
+const ToggleInput_1 = require("@strapi/design-system/ToggleInput");
+const Select_1 = require("@strapi/design-system/Select");
+const LiveRegions_1 = require("@strapi/design-system/LiveRegions");
+const Tooltip_1 = require("@strapi/design-system/Tooltip");
+const icons_1 = require("@strapi/icons");
+const permissions_1 = __importDefault(require("../../permissions"));
+const useConfig_1 = __importDefault(require("../../hooks/useConfig"));
+const api_1 = require("./utils/api");
+const utils_1 = require("../../utils");
+const ConfirmationDialog_1 = __importDefault(require("../../components/ConfirmationDialog"));
+const styles_1 = require("./components/RestartAlert/styles");
+const FormSwitch_1 = __importDefault(require("../../components/FormSwitch"));
 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 [restartRequired, setRestartRequired] = useState(false);
-	const [contentTypeExpanded, setContentTypeExpanded] = useState(undefined);
-
-	const { fetch, restartMutation, 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 = isNil(configData?.badWords) ? true : configData?.badWords;
-	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();
-			const payload = preparePayload(form);
-			await submitMutation.mutateAsync(payload);
-			const enabledCollectionsChanged = !isEqual(payload.enabledCollections, configData?.enabledCollections);
-			const gqlAuthChanged = !isEqual(payload.gql?.auth, configData?.gql?.auth);
-			if (enabledCollectionsChanged || gqlAuthChanged) {
-				setRestartRequired(true);
-			}
-			unlockApp();
-		}
-	};
-
-	const handleRestoreConfirmation = () => setRestoreConfigmationVisible(true);
-	const handleRestoreConfiguration = async () => {
-		if (canChange) {
-			lockApp();
-			await restoreMutation.mutateAsync();
-			unlockApp();
-			setRestartRequired(true);
-			setRestoreConfigmationVisible(false);
-		}
-	};
-	const handleRestoreCancel = () => setRestoreConfigmationVisible(false);
-
-	const handleRestart = async () => {
-		if (canChange) {
-			lockApp();
-			await restartMutation.mutateAsync();
-			setRestartRequired(false);
-			unlockApp();
-		}
-	};
-	const handleRestartDiscard = () => setRestartRequired(false);
-
-	const handleSetContentTypeExpanded = key => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
-
-	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 />} disabled={restartRequired} >
-										{getMessage('page.settings.actions.submit')}
-									</Button>
-								</CheckPermissions>
-							}
-						/>
-						<ContentLayout>
-							<Stack size={4}>
-								{ restartRequired && (
-									<RestartAlert 
-										closeLabel={getMessage('page.settings.actions.restart.alert.cancel')} 
-										title={getMessage('page.settings.actions.restart.alert.title')}
-										action={<Box><Button onClick={handleRestart} startIcon={<Play />}>{getMessage('page.settings.actions.restart')}</Button></Box>}
-										onClose={handleRestartDiscard}>
-										{ getMessage('page.settings.actions.restart.alert.description')}
-									</RestartAlert>)}
-
-								<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)}
-													disabled={restartRequired}
-													multi
-													withTags
-												>
-													{ allCollections.map(({ uid, schema: { displayName } }) => 
-														(<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"
-													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)}
-													disabled={restartRequired}
-													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')}
-													disabled={restartRequired}
-												/>
-											</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')}
-													disabled={restartRequired}
-												/>
-											</GridItem>) }
-										</Grid>
-									</Stack>
-								</Box>
-
-								<CheckPermissions permissions={pluginPermissions.settingsChange}>
-									<Box {...boxDefaultProps}>
-										<Stack size={4}>
-											<Stack size={2}>
-												<Typography variant="delta" 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;
+    (0, helper_plugin_1.useFocusWhenNavigate)();
+    const { notifyStatus } = (0, LiveRegions_1.useNotifyAT)();
+    const { trackUsage } = (0, helper_plugin_1.useTracking)();
+    const trackUsageRef = (0, react_1.useRef)(trackUsage);
+    const toggleNotification = (0, helper_plugin_1.useNotification)();
+    const { lockApp, unlockApp } = (0, helper_plugin_1.useOverlayBlocker)();
+    const viewPermissions = (0, react_1.useMemo)(() => ({
+        access: permissions_1.default.settings.read,
+        change: permissions_1.default.settings.change,
+    }), []);
+    const { isLoading: isLoadingForPermissions, allowedActions: { canAccess, canChange }, } = (0, helper_plugin_1.useRBAC)(viewPermissions);
+    const [restoreConfigmationVisible, setRestoreConfigmationVisible] = (0, react_1.useState)(false);
+    const [restartRequired, setRestartRequired] = (0, react_1.useState)(false);
+    const [contentTypeExpanded, setContentTypeExpanded] = (0, react_1.useState)(undefined);
+    const { fetch, restartMutation, submitMutation, restoreMutation } = (0, useConfig_1.default)(toggleNotification);
+    const { data: configData, isLoading: isConfigLoading, err: configErr, } = fetch;
+    const { data: allCollectionsData, isLoading: areCollectionsLoading, err: collectionsErr, } = (0, react_query_1.useQuery)(["get-all-content-types", canAccess], () => (0, api_1.fetchAllContentTypes)(toggleNotification));
+    const { data: allRolesData, isLoading: areRolesLoading, err: rolesErr, } = (0, react_query_1.useQuery)(["get-all-roles", canAccess], () => (0, api_1.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 (react_1.default.createElement(helper_plugin_1.LoadingIndicatorPage, null, (0, utils_1.getMessage)("page.settings.loading")));
+    }
+    const regexUID = !isLoading
+        ? new RegExp((0, utils_1.parseRegExp)(fetch.data.regex?.uid).value, (0, utils_1.parseRegExp)(fetch.data.regex?.uid).flags)
+        : null;
+    const allRoles = allRolesData?.data || [];
+    const allCollections = !isLoading &&
+        allCollectionsData.filter(({ uid }) => (0, lodash_1.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 = (0, lodash_1.isNil)(configData?.badWords) ? true : configData?.badWords;
+    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 && !(0, lodash_1.isEmpty)(value) ? [...value] : undefined,
+    });
+    const handleUpdateConfiguration = async (form) => {
+        if (canChange) {
+            lockApp();
+            const payload = preparePayload(form);
+            await submitMutation.mutateAsync(payload);
+            const enabledCollectionsChanged = !(0, lodash_1.isEqual)(payload.enabledCollections, configData?.enabledCollections);
+            const gqlAuthChanged = !(0, lodash_1.isEqual)(payload.gql?.auth, configData?.gql?.auth);
+            if (enabledCollectionsChanged || gqlAuthChanged) {
+                setRestartRequired(true);
+            }
+            unlockApp();
+        }
+    };
+    const handleRestoreConfirmation = () => setRestoreConfigmationVisible(true);
+    const handleRestoreConfiguration = async () => {
+        if (canChange) {
+            lockApp();
+            await restoreMutation.mutateAsync();
+            unlockApp();
+            setRestartRequired(true);
+            setRestoreConfigmationVisible(false);
+        }
+    };
+    const handleRestoreCancel = () => setRestoreConfigmationVisible(false);
+    const handleRestart = async () => {
+        if (canChange) {
+            lockApp();
+            await restartMutation.mutateAsync();
+            setRestartRequired(false);
+            unlockApp();
+        }
+    };
+    const handleRestartDiscard = () => setRestartRequired(false);
+    const handleSetContentTypeExpanded = (key) => setContentTypeExpanded(key === contentTypeExpanded ? undefined : key);
+    const boxDefaultProps = {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        padding: 6,
+    };
+    return (react_1.default.createElement(Main_1.Main, null,
+        react_1.default.createElement(formik_1.Formik, { initialValues: {
+                enabledCollections,
+                moderatorRoles,
+                badWords,
+                approvalFlow,
+                entryLabel,
+                gqlAuthEnabled,
+            }, enableReinitialize: true, onSubmit: handleUpdateConfiguration }, ({ handleSubmit, setFieldValue, values }) => (react_1.default.createElement(helper_plugin_1.Form, { noValidate: true, onSubmit: handleSubmit },
+            react_1.default.createElement(Layout_1.HeaderLayout, { title: (0, utils_1.getMessage)("page.settings.header.title"), subtitle: (0, utils_1.getMessage)("page.settings.header.description"), primaryAction: react_1.default.createElement(helper_plugin_1.CheckPermissions, { permissions: permissions_1.default.settingsChange },
+                    react_1.default.createElement(Button_1.Button, { type: "submit", startIcon: react_1.default.createElement(icons_1.Check, null), disabled: restartRequired }, (0, utils_1.getMessage)("page.settings.actions.submit"))) }),
+            react_1.default.createElement(Layout_1.ContentLayout, null,
+                react_1.default.createElement(Stack_1.Stack, { size: 4 },
+                    restartRequired && (react_1.default.createElement(styles_1.RestartAlert, { closeLabel: (0, utils_1.getMessage)("page.settings.actions.restart.alert.cancel"), title: (0, utils_1.getMessage)("page.settings.actions.restart.alert.title"), action: react_1.default.createElement(Box_1.Box, null,
+                            react_1.default.createElement(Button_1.Button, { onClick: handleRestart, startIcon: react_1.default.createElement(icons_1.Play, null) }, (0, utils_1.getMessage)("page.settings.actions.restart"))), onClose: handleRestartDiscard }, (0, utils_1.getMessage)("page.settings.actions.restart.alert.description"))),
+                    react_1.default.createElement(Box_1.Box, { ...boxDefaultProps },
+                        react_1.default.createElement(Stack_1.Stack, { size: 4 },
+                            react_1.default.createElement(Typography_1.Typography, { variant: "delta", as: "h2" }, (0, utils_1.getMessage)("page.settings.section.general")),
+                            react_1.default.createElement(Grid_1.Grid, { gap: 4 },
+                                react_1.default.createElement(Grid_1.GridItem, { col: 12 },
+                                    react_1.default.createElement(Select_1.Select, { name: "enabledCollections", label: (0, utils_1.getMessage)("page.settings.form.enabledCollections.label"), placeholder: (0, utils_1.getMessage)("page.settings.form.enabledCollections.placeholder"), hint: (0, utils_1.getMessage)("page.settings.form.enabledCollections.hint"), onClear: () => setFieldValue("enabledCollections", [], false), value: values.enabledCollections, onChange: (value) => setFieldValue("enabledCollections", value, false), disabled: restartRequired, multi: true, withTags: true }, allCollections.map(({ uid, schema: { displayName } }) => (react_1.default.createElement(Select_1.Option, { key: uid, value: uid }, displayName))))),
+                                !(0, lodash_1.isEmpty)(values.enabledCollections) && (react_1.default.createElement(Grid_1.GridItem, { col: 12 },
+                                    react_1.default.createElement(Accordion_1.AccordionGroup, { label: (0, utils_1.getMessage)("page.settings.form.contentTypesSettings.label"), labelAction: react_1.default.createElement(Tooltip_1.Tooltip, { description: (0, utils_1.getMessage)("page.settings.form.contentTypesSettings.tooltip") },
+                                            react_1.default.createElement(icons_1.Information, { "aria-hidden": true })) }, (0, lodash_1.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 (react_1.default.createElement(Accordion_1.Accordion, { expanded: contentTypeExpanded === key, toggle: () => handleSetContentTypeExpanded(key), key: key, id: key, size: "S" },
+                                            react_1.default.createElement(Accordion_1.AccordionToggle, { title: displayName, togglePosition: "left" }),
+                                            react_1.default.createElement(Accordion_1.AccordionContent, null,
+                                                react_1.default.createElement(Box_1.Box, { padding: 6 },
+                                                    react_1.default.createElement(Stack_1.Stack, { size: 4 },
+                                                        react_1.default.createElement(FormSwitch_1.default, { name: `collectionSettings-${uid}-approvalFlow`, label: (0, utils_1.getMessage)("page.settings.form.approvalFlow.label"), hint: (0, utils_1.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: (0, utils_1.getMessage)("compontents.toogle.enabled"), offLabel: (0, utils_1.getMessage)("compontents.toogle.disabled"), disabled: restartRequired, visibleLabels: true }),
+                                                        !(0, lodash_1.isEmpty)(stringAttributes) && (react_1.default.createElement(Select_1.Select, { name: `collectionSettings-${uid}-entryLabel`, label: (0, utils_1.getMessage)("page.settings.form.entryLabel.label"), placeholder: (0, utils_1.getMessage)("page.settings.form.entryLabel.placeholder"), hint: (0, utils_1.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: true, withTags: true, disabled: restartRequired }, stringAttributes.map((key) => (react_1.default.createElement(Select_1.Option, { key: `collectionSettings-${uid}-entryLabel-${key}`, value: key }, (0, lodash_1.capitalize)(key.split("_").join(" "))))))))))));
+                                    }))))))),
+                    react_1.default.createElement(Box_1.Box, { ...boxDefaultProps },
+                        react_1.default.createElement(Stack_1.Stack, { size: 4 },
+                            react_1.default.createElement(Typography_1.Typography, { variant: "delta", as: "h2" }, (0, utils_1.getMessage)("page.settings.section.additional")),
+                            react_1.default.createElement(Grid_1.Grid, { gap: 4 },
+                                react_1.default.createElement(Grid_1.GridItem, { col: 6, xs: 12 },
+                                    react_1.default.createElement(Select_1.Select, { name: "moderatorRoles", label: (0, utils_1.getMessage)("page.settings.form.moderatorRoles.label"), placeholder: (0, utils_1.getMessage)("page.settings.form.moderatorRoles.placeholder"), hint: (0, utils_1.getMessage)("page.settings.form.moderatorRoles.hint"), onClear: () => setFieldValue("moderatorRoles", [], false), value: values.moderatorRoles, onChange: (value) => setFieldValue("moderatorRoles", value, false), disabled: restartRequired, multi: true, withTags: true }, allRoles.map(({ code, name }) => (react_1.default.createElement(Select_1.Option, { key: code, value: code }, name))))),
+                                react_1.default.createElement(Grid_1.GridItem, { col: 6, xs: 12 },
+                                    react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "badWords", label: (0, utils_1.getMessage)("page.settings.form.badWords.label"), hint: (0, utils_1.getMessage)("page.settings.form.badWords.hint"), checked: values.badWords, onChange: ({ target: { checked } }) => setFieldValue("badWords", checked, false), onLabel: (0, utils_1.getMessage)("compontents.toogle.enabled"), offLabel: (0, utils_1.getMessage)("compontents.toogle.disabled"), disabled: restartRequired })),
+                                isGQLPluginEnabled && (react_1.default.createElement(Grid_1.GridItem, { col: 6, xs: 12 },
+                                    react_1.default.createElement(ToggleInput_1.ToggleInput, { name: "badWords", label: (0, utils_1.getMessage)("page.settings.form.gqlAuth.label"), hint: (0, utils_1.getMessage)("page.settings.form.gqlAuth.hint"), checked: values.gqlAuthEnabled, onChange: ({ target: { checked } }) => setFieldValue("gqlAuthEnabled", checked, false), onLabel: (0, utils_1.getMessage)("compontents.toogle.enabled"), offLabel: (0, utils_1.getMessage)("compontents.toogle.disabled"), disabled: restartRequired })))))),
+                    react_1.default.createElement(helper_plugin_1.CheckPermissions, { permissions: permissions_1.default.settingsChange },
+                        react_1.default.createElement(Box_1.Box, { ...boxDefaultProps },
+                            react_1.default.createElement(Stack_1.Stack, { size: 4 },
+                                react_1.default.createElement(Stack_1.Stack, { size: 2 },
+                                    react_1.default.createElement(Typography_1.Typography, { variant: "delta", as: "h2" }, (0, utils_1.getMessage)("page.settings.section.restore")),
+                                    react_1.default.createElement(Typography_1.Typography, { variant: "pi", as: "h4" }, (0, utils_1.getMessage)("page.settings.section.restore.subtitle"))),
+                                react_1.default.createElement(Grid_1.Grid, { gap: 4 },
+                                    react_1.default.createElement(Grid_1.GridItem, { col: 6 },
+                                        react_1.default.createElement(Button_1.Button, { variant: "danger-light", startIcon: react_1.default.createElement(icons_1.Refresh, null), onClick: handleRestoreConfirmation }, (0, utils_1.getMessage)("page.settings.actions.restore")),
+                                        react_1.default.createElement(ConfirmationDialog_1.default, { isVisible: restoreConfigmationVisible, isActionAsync: restoreMutation.isLoading, header: (0, utils_1.getMessage)("page.settings.actions.restore.confirmation.header"), labelConfirm: (0, utils_1.getMessage)("page.settings.actions.restore.confirmation.button.confirm"), iconConfirm: react_1.default.createElement(icons_1.Refresh, null), onConfirm: handleRestoreConfiguration, onCancel: handleRestoreCancel }, (0, utils_1.getMessage)("page.settings.actions.restore.confirmation.description"))))))))))))));
+};
+exports.default = Settings;
+//# sourceMappingURL=index.js.map