strapi-plugin-navigation 2.5.4 → 3.0.0-beta.0

package/admin/pages/SettingsPage/hooks/index.js

@@ -0,0 +1,111 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { getFetchClient } from '@strapi/strapi/admin';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { getApiClient } from '../../../api';
+import { configSchema } from '../../../schemas';
+import { resolveGlobalLikeId } from '../utils';
+export const useConfig = () => {
+    // TODO: Resolve useQuery issues to use useFetchClient
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readSettingsConfigIndex(),
+        queryFn() {
+            return apiClient.readSettingsConfig();
+        },
+        staleTime: 1000 * 60 * 5,
+    });
+};
+export const useRestart = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useMutation({
+        mutationFn: () => apiClient.restart(),
+    });
+};
+export const useRestoreConfig = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useMutation({
+        mutationFn: () => apiClient.restoreConfig(),
+    });
+};
+export const useContentTypes = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readContentTypeIndex(),
+        queryFn: () => apiClient.readContentType(),
+        staleTime: Infinity,
+    });
+};
+export const useSaveConfig = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useMutation({
+        mutationFn(data) {
+            return apiClient.updateConfig({
+                ...data,
+                contentTypesNameFields: Object.fromEntries(data.contentTypesNameFields.map(({ key, fields }) => [key, fields])),
+                contentTypesPopulate: Object.fromEntries(data.contentTypesPopulate.map(({ key, fields }) => [key, fields])),
+                pathDefaultFields: Object.fromEntries(data.pathDefaultFields.map(({ key, fields }) => [key, fields])),
+                additionalFields: data.audienceFieldChecked
+                    ? [...data.additionalFields, 'audience']
+                    : data.additionalFields,
+                gql: {
+                    navigationItemRelated: data.contentTypes.map((uid) => {
+                        return resolveGlobalLikeId(uid);
+                    }),
+                },
+            });
+        },
+    });
+};
+export const uiFormSchema = configSchema.omit({ contentTypesNameFields: true }).extend({
+    audienceFieldChecked: z.boolean(),
+    contentTypesNameFields: z
+        .object({
+        key: z.string(),
+        fields: z.string().array(),
+    })
+        .array(),
+    contentTypesPopulate: z
+        .object({
+        key: z.string(),
+        fields: z.string().array(),
+    })
+        .array(),
+    pathDefaultFields: z
+        .object({
+        key: z.string(),
+        fields: z.string().array(),
+    })
+        .array(),
+});
+export const useSettingsForm = (config) => {
+    const form = useForm({
+        resolver: zodResolver(uiFormSchema),
+        values: config
+            ? {
+                ...config,
+                additionalFields: config.additionalFields.filter((field) => typeof field !== 'string'),
+                audienceFieldChecked: config.additionalFields.includes('audience'),
+                contentTypesNameFields: Object.entries(config.contentTypesNameFields).map(([key, fields]) => ({
+                    key,
+                    fields,
+                })),
+                contentTypesPopulate: Object.entries(config.contentTypesPopulate).map(([key, fields]) => ({
+                    key,
+                    fields,
+                })),
+                pathDefaultFields: Object.entries(config.pathDefaultFields).map(([key, fields]) => ({
+                    key,
+                    fields,
+                })),
+            }
+            : undefined,
+    });
+    return { form };
+};

package/admin/pages/SettingsPage/index.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DesignSystemProvider, lightTheme } from '@strapi/design-system';
+import { Check, Play, Typhoon } from '@strapi/icons';
+import { Layouts, Page, useAuth } from '@strapi/strapi/admin';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { Accordion, Box, Button, Field, Flex, Grid, MultiSelect, MultiSelectOption, NumberInput, Toggle, Typography, } from '@strapi/design-system';
+import { isEmpty, sortBy } from 'lodash';
+import { Controller } from 'react-hook-form';
+import { ConfirmationDialog } from '../../components/ConfirmationDialog';
+import { RestartAlert } from '../../components/RestartAlert';
+import { getTrad } from '../../utils/getTranslation';
+import pluginPermissions from '../../utils/permissions';
+import CustomFieldModal from './components/CustomFieldModal';
+import CustomFieldTable from './components/CustomFieldTable';
+import { uiFormSchema, useConfig, useContentTypes, useRestart, useRestoreConfig, useSaveConfig, useSettingsForm, } from './hooks';
+import { isContentTypeEligible } from './utils';
+const BOX_DEFAULT_PROPS = {
+    background: 'neutral0',
+    hasRadius: true,
+    shadow: 'filterShadow',
+    padding: 6,
+};
+const queryClient = new QueryClient();
+const Inner = () => {
+    const configQuery = useConfig();
+    const contentTypesQuery = useContentTypes();
+    const configSaveMutation = useSaveConfig();
+    const restoreMutation = useRestoreConfig();
+    const restartMutation = useRestart();
+    const { formatMessage } = useIntl();
+    const { form: { control, watch, setValue, getValues, handleSubmit }, } = useSettingsForm(configQuery.data);
+    const [contentTypeNameFieldsCurrent, contentTypesCurrent, additionalFields, preferCustomContentTypes,] = watch([
+        'contentTypesNameFields',
+        'contentTypes',
+        'additionalFields',
+        'preferCustomContentTypes',
+    ]);
+    const [restartStatus, setRestartStatus] = useState({ required: false });
+    const readPermissions = useAuth('SettingsPage', (state) => state.permissions);
+    const hasSettingsPermissions = useMemo(() => {
+        return !!readPermissions.find(({ action }) => action === pluginPermissions.settings[0].action);
+    }, [readPermissions]);
+    const hasSettingsReadPermissions = useMemo(() => {
+        return !!readPermissions.find(({ action }) => action === pluginPermissions.access[0].action);
+    }, [readPermissions]);
+    const isLoading = configQuery.isPending ||
+        contentTypesQuery.isPending ||
+        configSaveMutation.isPending ||
+        restartMutation.isPending ||
+        restoreMutation.isPending;
+    const [isCustomFieldModalOpen, setIsCustomFieldModalOpen] = useState(false);
+    const [isRestorePopupOpen, setIsRestorePopupOpen] = useState(false);
+    const [customFieldSelected, setCustomFieldSelected] = useState(null);
+    const handleOpenCustomFieldModal = (field) => {
+        setCustomFieldSelected(field);
+        setIsCustomFieldModalOpen(true);
+    };
+    const handleRemoveCustomField = (field) => {
+        const filteredFields = additionalFields.filter((f) => typeof f !== 'string' ? f.name !== field.name : true);
+        setValue('additionalFields', filteredFields);
+        setCustomFieldSelected(null);
+        setIsCustomFieldModalOpen(false);
+    };
+    const handleToggleCustomField = (current) => {
+        const next = { ...current, enabled: !current.enabled };
+        const nextAdditionalFields = additionalFields.map((field) => typeof field !== 'string' && current.name === field.name ? next : field);
+        setValue('additionalFields', nextAdditionalFields);
+    };
+    const handleSubmitCustomField = (next) => {
+        const hasFieldAlready = !!additionalFields.find((field) => typeof field !== 'string' ? field.name === next.name : false);
+        const nextAdditionalFields = hasFieldAlready
+            ? additionalFields.map((field) => typeof field !== 'string' && next.name === field.name ? next : field)
+            : [...additionalFields, next];
+        setValue('additionalFields', nextAdditionalFields);
+        setCustomFieldSelected(null);
+        setIsCustomFieldModalOpen(false);
+    };
+    const allContentTypes = !isLoading
+        ? sortBy(Object.values(contentTypesQuery.data ?? [])
+            .filter(({ uid }) => isContentTypeEligible(uid, {
+            allowedContentTypes: configQuery.data?.allowedContentTypes,
+            restrictedContentTypes: configQuery.data?.restrictedContentTypes,
+            preferCustomContentTypes,
+            contentTypes: contentTypesCurrent,
+        }))
+            .map((ct) => {
+            const type = contentTypesQuery.data?.find((_) => _.uid === ct.uid);
+            if (type) {
+                const { isDisplayed: available, kind } = type;
+                const isSingle = kind === 'singleType';
+                return {
+                    ...ct,
+                    available,
+                    isSingle,
+                };
+            }
+            return ct;
+        }), (ct) => ct.info.displayName)
+        : [];
+    const onSubmit = (rawData) => {
+        const parsed = uiFormSchema.safeParse(rawData);
+        if (parsed.success) {
+            configSaveMutation.mutate(parsed.data, {
+                onSuccess() {
+                    setRestartStatus({ required: true });
+                    configSaveMutation.reset();
+                },
+            });
+        }
+        else {
+            console.warn('Invalid form data', parsed.error);
+        }
+    };
+    const onPopupClose = async (isConfirmed) => {
+        setIsRestorePopupOpen(false);
+        if (isConfirmed) {
+            restoreMutation.mutate();
+            setRestartStatus({ required: true });
+        }
+    };
+    const handleRestart = async () => {
+        restartMutation.mutate(undefined, {
+            onSuccess() {
+                setRestartStatus({ required: false });
+            },
+            onError() {
+                setRestartStatus({ required: false });
+            },
+        });
+        // TODO: Reload
+        window.location.reload();
+    };
+    const handleRestartDiscard = () => setRestartStatus({ required: false });
+    if (!hasSettingsPermissions) {
+        return _jsx(Page.NoPermissions, {});
+    }
+    if (isLoading) {
+        return _jsx(Page.Loading, {});
+    }
+    return (_jsxs(Layouts.Root, { children: [_jsxs(Page.Main, { children: [_jsx(Page.Title, { children: formatMessage(getTrad('pages.settings.header.title')) }), _jsx(Layouts.Header, { title: formatMessage(getTrad('pages.settings.header.title')), subtitle: formatMessage(getTrad('pages.settings.header.description')), primaryAction: hasSettingsReadPermissions ? (_jsx(Button, { startIcon: _jsx(Check, {}), disabled: restartStatus.required, onClick: handleSubmit(onSubmit), children: formatMessage(getTrad('pages.settings.actions.submit')) })) : null }), _jsx(Layouts.Content, { children: _jsxs(Flex, { direction: "column", gap: 4, children: [restartStatus.required && (_jsx(Box, { ...BOX_DEFAULT_PROPS, width: "100%", children: _jsx(RestartAlert, { closeLabel: formatMessage(getTrad('pages.settings.actions.restart.alert.cancel')), title: formatMessage(getTrad('pages.settings.actions.restart.alert.title')), action: _jsx(Box, { children: _jsx(Button, { onClick: handleRestart, startIcon: _jsx(Play, {}), children: formatMessage(getTrad('pages.settings.actions.restart')) }) }), onClose: handleRestartDiscard, children: _jsxs(_Fragment, { children: [_jsx(Box, { paddingBottom: 1, children: formatMessage(getTrad('pages.settings.actions.restart.alert.description')) }), restartStatus.reasons?.map((reason, i) => (_jsx(Box, { paddingBottom: 1, children: formatMessage(getTrad(`pages.settings.actions.restart.alert.reason.${reason}`)) }, i)))] }) }) })), _jsx(Box, { ...BOX_DEFAULT_PROPS, width: "100%", children: _jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [_jsx(Typography, { variant: "delta", as: "h2", children: formatMessage(getTrad('pages.settings.general.title')) }), _jsx(Grid.Root, { gap: 4, width: "100%", children: _jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: _jsxs(Grid.Root, { gap: 4, width: "100%", children: [_jsx(Grid.Item, { col: 4, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: "preferCustomContentTypes", render: ({ field: { name, value, onChange } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.preferCustomContentTypes.label')) }), _jsx(Toggle, { name: name, checked: value, onChange: ({ currentTarget: { checked }, }) => {
+                                                                                    onChange(checked);
+                                                                                }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required, width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad('pages.settings.form.preferCustomContentTypes.hint')) })] })) }) }), _jsx(Grid.Item, { col: 8, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: "contentTypes", render: ({ field: { name, value, onChange }, fieldState: { error } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.contentTypes.label')) }), _jsx(MultiSelect, { name: name, label: formatMessage(getTrad('pages.settings.form.contentTypes.label')), "aria-label": formatMessage(getTrad('pages.settings.form.contentTypes.label')), placeholder: formatMessage(getTrad('pages.settings.form.contentTypes.placeholder')), hint: formatMessage(getTrad('pages.settings.form.contentTypes.hint')), value: value, onChange: (value) => {
+                                                                                    onChange(value);
+                                                                                    const { contentTypesNameFields = [], contentTypesPopulate = [], pathDefaultFields, } = getValues();
+                                                                                    const missingKeys = value.filter((key) => !contentTypesNameFields.find((nameFields) => nameFields.key === key)) ?? [];
+                                                                                    const redundantKeys = contentTypesNameFields
+                                                                                        .filter((nameFields) => !value.includes(nameFields.key) ||
+                                                                                        nameFields.key === 'default')
+                                                                                        .map(({ key }) => key) ?? [];
+                                                                                    setValue('contentTypesNameFields', [
+                                                                                        ...(contentTypesNameFields.filter(({ key }) => !redundantKeys.includes(key) || key === 'default') ?? []),
+                                                                                        ...missingKeys.map((key) => ({ key, fields: [] })),
+                                                                                    ], { shouldDirty: true, shouldTouch: true, shouldValidate: true });
+                                                                                    setValue('contentTypesPopulate', [
+                                                                                        ...(contentTypesPopulate.filter(({ key }) => !redundantKeys.includes(key) || key === 'default') ?? []),
+                                                                                        ...missingKeys.map((key) => ({ key, fields: [] })),
+                                                                                    ], { shouldDirty: true, shouldTouch: true, shouldValidate: true });
+                                                                                    setValue('pathDefaultFields', [
+                                                                                        ...(pathDefaultFields.filter(({ key }) => !redundantKeys.includes(key) || key === 'default') ?? []),
+                                                                                        ...missingKeys.map((key) => ({ key, fields: [] })),
+                                                                                    ], { shouldDirty: true, shouldTouch: true, shouldValidate: true });
+                                                                                }, disabled: restartStatus.required, error: !!error, withTags: true, width: "100%", children: allContentTypes.map((item) => (_jsx(MultiSelectOption, { value: item.uid, children: item.info.displayName }, item.uid))) })] })) }) }), _jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: contentTypesCurrent?.length ? (_jsx(Accordion.Root, { style: { width: '100%' }, children: contentTypeNameFieldsCurrent.map((nameFields, index) => {
+                                                                        const current = contentTypesQuery.data?.find(({ uid }) => uid === nameFields.key);
+                                                                        const attributeKeys = Object.keys(current?.attributes ?? {}).sort();
+                                                                        return current ? (_jsxs(Accordion.Item, { value: nameFields.key, children: [_jsx(Accordion.Header, { children: _jsx(Accordion.Trigger, { children: current?.info.displayName ??
+                                                                                            formatMessage(getTrad('pages.settings.form.nameField.default')) }) }), _jsx(Accordion.Content, { children: _jsxs(Grid.Root, { gap: 4, padding: 2, children: [_jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: `contentTypesNameFields.${index}`, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.nameField.label')) }), _jsx(MultiSelect, { name: name, placeholder: formatMessage(getTrad('pages.settings.form.nameField.placeholder')), value: value.fields, onChange: (fields) => onChange({
+                                                                                                                    ...value,
+                                                                                                                    fields,
+                                                                                                                }), disabled: restartStatus.required, error: !!error, withTags: true, children: attributeKeys.map((attribute) => (_jsx(MultiSelectOption, { value: attribute, children: attribute }, attribute))) }), _jsx(Field.Hint, { children: formatMessage(getTrad(`pages.settings.form.nameField.${isEmpty(value?.fields) ? 'empty' : 'hint'}`)) })] })) }) }), _jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: `contentTypesPopulate.${index - 1}`, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.populate.label')) }), _jsx(MultiSelect, { width: "100%", name: name, placeholder: formatMessage(getTrad('pages.settings.form.populate.placeholder')), value: value?.fields ?? [], onChange: (fields) => onChange({
+                                                                                                                    ...value,
+                                                                                                                    fields,
+                                                                                                                }), disabled: restartStatus.required, error: !!error, withTags: true, children: attributeKeys.map((attribute) => (_jsx(MultiSelectOption, { value: attribute, children: attribute }, attribute))) }), _jsx(Field.Hint, { children: formatMessage(getTrad(`pages.settings.form.populate.${isEmpty(value?.fields) ? 'empty' : 'hint'}`)) })] })) }) }), _jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: `pathDefaultFields.${index - 1}`, render: ({ field: { name, value, onChange }, fieldState: { error }, }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.pathDefaultFields.label')) }), _jsx(MultiSelect, { name: name, width: "100%", placeholder: formatMessage(getTrad('pages.settings.form.pathDefaultFields.placeholder')), value: value?.fields ?? [], onChange: (fields) => onChange({
+                                                                                                                    ...value,
+                                                                                                                    fields,
+                                                                                                                }), disabled: restartStatus.required, error: !!error, withTags: true, children: attributeKeys.map((attribute) => (_jsx(MultiSelectOption, { value: attribute, children: attribute }, attribute))) }), _jsx(Field.Hint, { children: formatMessage(getTrad(`pages.settings.form.pathDefaultFields.${isEmpty(value?.fields) ? 'empty' : 'hint'}`)) })] })) }) })] }) })] }, nameFields.key)) : null;
+                                                                    }) })) : null })] }) }) })] }) }), _jsx(Box, { ...BOX_DEFAULT_PROPS, width: "100%", children: _jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [_jsx(Typography, { variant: "delta", as: "h2", children: formatMessage(getTrad('pages.settings.additional.title')) }), _jsxs(Grid.Root, { gap: 4, width: "100%", children: [_jsx(Grid.Item, { col: 4, s: 12, xs: 12, children: _jsx(Box, { width: "100%", children: _jsx(Controller, { control: control, name: "allowedLevels", render: ({ field: { onChange, value, name } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.allowedLevels.label')) }), _jsx(NumberInput, { width: "100%", name: name, placeholder: formatMessage(getTrad('pages.settings.form.allowedLevels.placeholder')), onValueChange: (nextValue) => onChange(nextValue), value: value, disabled: restartStatus.required }), _jsx(Field.Hint, { children: formatMessage(getTrad('pages.settings.form.allowedLevels.hint')) })] })) }) }) }), _jsx(Grid.Item, { col: 4, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: "cascadeMenuAttached", render: ({ field: { name, value, onChange } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.cascadeMenuAttached.label')) }), _jsx(Toggle, { width: "100%", name: name, checked: value, onChange: ({ currentTarget: { checked }, }) => {
+                                                                            onChange(checked);
+                                                                        }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required }), _jsx(Field.Hint, { children: formatMessage(getTrad('pages.settings.form.cascadeMenuAttached.hint')) })] })) }) }), _jsx(Grid.Item, { col: 4, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: "audienceFieldChecked", render: ({ field: { name, value, onChange } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.audience.label')) }), _jsx(Toggle, { name: name, checked: value, onChange: ({ currentTarget: { checked }, }) => {
+                                                                            onChange(checked);
+                                                                        }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required, width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad('pages.settings.form.audience.hint')) })] })) }) }), configQuery.data?.isCachePluginEnabled && (_jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: _jsx(Controller, { control: control, name: "isCacheEnabled", render: ({ field: { name, value, onChange } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad('pages.settings.form.cache.label')) }), _jsx(Toggle, { name: name, checked: value, onChange: ({ currentTarget: { checked }, }) => {
+                                                                            onChange(checked);
+                                                                        }, onLabel: "Enabled", offLabel: "Disabled", disabled: restartStatus.required, width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad('pages.settings.form.cache.hint')) })] })) }) }))] })] }) }), _jsxs(Box, { ...BOX_DEFAULT_PROPS, width: "100%", gap: 2, direction: "column", alignItems: "flex-start", children: [_jsx(Typography, { variant: "delta", as: "h2", children: formatMessage(getTrad('pages.settings.customFields.title')) }), _jsx(Box, { padding: 1 }), _jsx(CustomFieldTable, { data: additionalFields, onOpenModal: handleOpenCustomFieldModal, onRemoveCustomField: handleRemoveCustomField, onToggleCustomField: handleToggleCustomField })] }), _jsx(Box, { ...BOX_DEFAULT_PROPS, width: "100%", children: _jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 2, children: [_jsx(Typography, { variant: "delta", as: "h2", children: formatMessage(getTrad('pages.settings.restoring.title')) }), _jsxs(Grid.Root, { gap: 4, width: "100%", children: [_jsx(Grid.Item, { col: 12, s: 12, xs: 12, children: _jsx(Typography, { children: formatMessage(getTrad('pages.settings.actions.restore.description')) }) }), _jsxs(Grid.Item, { col: 12, s: 12, xs: 12, children: [hasSettingsReadPermissions ? (_jsx(Button, { variant: "danger-light", startIcon: _jsx(Check, {}), onClick: () => setIsRestorePopupOpen(true), children: formatMessage(getTrad('pages.settings.actions.restore')) })) : null, _jsx(ConfirmationDialog, { isVisible: isRestorePopupOpen, header: formatMessage(getTrad('pages.settings.actions.restore.confirmation.header')), labelConfirm: formatMessage(getTrad('pages.settings.actions.restore.confirmation.confirm')), iconConfirm: _jsx(Typhoon, {}), onConfirm: () => onPopupClose(true), onCancel: () => onPopupClose(false), children: formatMessage(getTrad('pages.settings.actions.restore.confirmation.description')) })] })] })] }) })] }) })] }), isCustomFieldModalOpen && (_jsx(CustomFieldModal, { onClose: () => setIsCustomFieldModalOpen(false), onSubmit: handleSubmitCustomField, isOpen: isCustomFieldModalOpen, data: customFieldSelected }))] }));
+};
+export default function SettingsPage() {
+    queryClient.invalidateQueries();
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DesignSystemProvider, { locale: "en-GB", theme: lightTheme, children: _jsx(Inner, {}) }) }));
+}

package/admin/pages/SettingsPage/types.js

@@ -0,0 +1 @@
+export {};

package/admin/pages/SettingsPage/utils/index.js

@@ -0,0 +1,25 @@
+import { capitalize } from 'lodash';
+const UID_REGEX = /^(?<type>[a-z0-9-]+)\:{2}(?<api>[a-z0-9-]+)\.{1}(?<contentType>[a-z0-9-]+)$/i;
+export const isContentTypeEligible = (uid = '', config = {}) => {
+    const { allowedContentTypes: baseAllowedContentTypes = [], restrictedContentTypes = [], contentTypes = [], preferCustomContentTypes = false, } = config;
+    const allowedContentTypes = preferCustomContentTypes
+        ? ['api::', ...contentTypes]
+        : baseAllowedContentTypes;
+    const isOneOfAllowedType = allowedContentTypes.filter((_) => uid.includes(_) || uid === _).length > 0;
+    const isNoneOfRestricted = restrictedContentTypes.filter((_) => uid.includes(_) || uid === _).length === 0;
+    return !!uid && isOneOfAllowedType && isNoneOfRestricted;
+};
+export const resolveGlobalLikeId = (uid = '') => {
+    const parse = (str) => str
+        .split('-')
+        .map((_) => capitalize(_))
+        .join('');
+    const [type, scope, contentTypeName] = splitTypeUid(uid);
+    if (type === 'api') {
+        return parse(contentTypeName);
+    }
+    return `${parse(scope)}${parse(contentTypeName)}`;
+};
+const splitTypeUid = (uid = '') => {
+    return uid.split(UID_REGEX).filter((s) => s && s.length > 0);
+};

package/admin/pluginId.js

@@ -0,0 +1 @@
+export const PLUGIN_ID = 'navigation';

package/admin/schemas/config.js

@@ -0,0 +1,53 @@
+import { z } from 'zod';
+const navigationCustomFieldBase = z.object({
+    name: z.string(),
+    label: z.string(),
+    required: z.boolean().optional(),
+    enabled: z.boolean().optional(),
+});
+const navigationItemCustomFieldSelect = navigationCustomFieldBase.extend({
+    type: z.literal('select'),
+    multi: z.boolean(),
+    options: z.array(z.string()),
+});
+const navigationItemCustomFieldPrimitive = navigationCustomFieldBase.extend({
+    type: z.enum(['boolean', 'string']),
+    multi: z.literal(false).optional(),
+    options: z.array(z.string()).max(0).optional(),
+});
+const navigationItemCustomFieldMedia = navigationCustomFieldBase.extend({
+    type: z.literal('media'),
+    multi: z.literal(false).optional(),
+    options: z.array(z.string()).max(0).optional(),
+});
+export const navigationItemCustomField = z.union([
+    navigationItemCustomFieldPrimitive,
+    navigationItemCustomFieldMedia,
+    navigationItemCustomFieldSelect,
+]);
+export const navigationItemAdditionalField = z.union([
+    z.literal('audience'),
+    navigationItemCustomField,
+]);
+export const configSchema = z.object({
+    additionalFields: z.array(navigationItemAdditionalField),
+    allowedLevels: z.number(),
+    availableAudience: z
+        .object({
+        id: z.number(),
+        name: z.string(),
+        key: z.string(),
+    })
+        .array(),
+    contentTypes: z.array(z.string()),
+    contentTypesNameFields: z.record(z.string(), z.array(z.string())),
+    contentTypesPopulate: z.record(z.string(), z.array(z.string())),
+    gql: z.object({
+        navigationItemRelated: z.array(z.string()),
+    }),
+    pathDefaultFields: z.record(z.string(), z.any()),
+    cascadeMenuAttached: z.boolean(),
+    preferCustomContentTypes: z.boolean(),
+    isCacheEnabled: z.boolean().optional(),
+    isCachePluginEnabled: z.boolean().optional(),
+});

package/admin/schemas/content-type.js

@@ -0,0 +1,14 @@
+import { z } from 'zod';
+export const strapiContentTypeSchema = z.object({
+    uid: z.string(),
+    isDisplayed: z.boolean(),
+    apiID: z.string(),
+    kind: z.enum(['collectionType', 'singleType']),
+    info: z.object({
+        singularName: z.string(),
+        pluralName: z.string(),
+        displayName: z.string(),
+        description: z.string().optional(),
+    }),
+    attributes: z.record(z.string(), z.unknown()),
+});

package/admin/schemas/index.js

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './content-type';

package/admin/{src/translations → translations}/en.json

@@ -9,7 +9,6 @@
     "header.action.expandAll": "Expand All",
     "submit.cta.cancel": "Cancel",
     "submit.cta.save": "Save",
-    "submit.cta.cache.purge": "Clear cache",
     "empty": "Your navigation is empty",
     "empty.cta": "Create first item",
     "popup.item.header.view": "View navigation item",
@@ -32,6 +31,9 @@
     "popup.item.form.type.external.label": "External source",
     "popup.item.form.type.wrapper.label": "Wrapper element",
     "popup.item.form.type.external.description": "Output path: {value}",
+    "popup.navigation.manage.button.purge": "Clear read cache",
+    "popup.navigation.manage.footer.button.purge": "Clear",
+    "popup.navigation.manage.purge.header": "This action will clear API read cache. This will result in brief slowdown of reads for navigations below.",
     "popup.item.form.audience.label": "Audience",
     "popup.item.form.audience.placeholder": "Select audience...",
     "popup.item.form.audience.empty": "There are no more audiences",
@@ -67,14 +69,10 @@
     "popup.navigation.manage.button.goBack": "Go back",
     "popup.navigation.manage.button.cancel": "Cancel",
     "popup.navigation.manage.button.delete": "Delete",
-    "popup.navigation.manage.button.purge": "Clear read cache",
-    "popup.navigation.manage.footer.button.purge": "Clear",
-    "popup.navigation.manage.purge.header": "This action will clear API read cache. This will result in brief slowdown of reads for navigations below.",
     "popup.navigation.manage.button.save": "Save",
     "popup.navigation.manage.button.edit": "Edit",
     "popup.navigation.manage.button.create": "Create",
     "popup.navigation.manage.delete.header": "Following navigations will be removed:",
-    "popup.navigation.manage.header.CACHE_PURGE": "Read cache clear",
     "popup.navigation.manage.header.LIST": "All navigations",
     "popup.navigation.manage.header.CREATE": "New navigation",
     "popup.navigation.manage.header.DELETE": "Deleting",
@@ -98,6 +96,8 @@
     "pages.main.search.placeholder": "Type to start searching...",
     "pages.main.search.subLabel": "press ENTER to highlight next item",
     "pages.main.header.localization.select.placeholder": "Select locale",
+    "pages.settings.form.nameField.default": "Default",
+    "pages.settings.title": "Navigation settings",
     "pages.settings.general.title": "General settings",
     "pages.settings.additional.title": "Additional settings",
     "pages.settings.customFields.title": "Custom fields settings",
@@ -136,13 +136,11 @@
     "pages.settings.notification.submit.error": "Config update has failed",
     "pages.settings.notification.restore.error": "Config restore has failed",
     "pages.settings.notification.restart.error": "Failed to restart your application. Try to do it manually.",
-    "pages.settings.form.preferCustomContentTypes.label": "Prefer custom content types",
-    "pages.settings.form.preferCustomContentTypes.hint": "Prefer if to use only api:: prefixed content types",
     "pages.settings.form.cascadeMenuAttached.label": "Cascade menu attached",
     "pages.settings.form.cascadeMenuAttached.hint": "Disable if you don't want \"Menu attached\" to cascade on child items",
+    "pages.settings.form.preferCustomContentTypes.label": "Prefer custom content types",
+    "pages.settings.form.preferCustomContentTypes.hint": "Prefer if to use only api:: prefixed content types",
     "pages.settings.form.contentTypes.label": "Enable navigation for",
-    "pages.settings.form.cache.label": "REST cache",
-    "pages.settings.form.cache.hint": "Enable caching of client read requests",
     "pages.settings.form.i18n.label": "i18n",
     "pages.settings.form.i18n.hint": "Enable internationalisation",
     "pages.settings.form.i18n.hint.missingDefaultLocale": "Default locale missing!",

package/admin/translations/index.js

@@ -0,0 +1,15 @@
+import { PLUGIN_ID } from '../pluginId';
+import ca from './ca.json';
+import en from './en.json';
+import fr from './fr.json';
+const trads = {
+    en,
+    fr,
+    ca,
+};
+export const getTradId = (msg) => `${PLUGIN_ID}.${msg}`;
+export const getTrad = (msg, defaultMessage) => ({
+    id: getTradId(msg),
+    defaultMessage: defaultMessage ?? getTradId(msg),
+});
+export default trads;

package/admin/types.js

@@ -0,0 +1 @@
+export {};

package/admin/utils/constants.js

@@ -0,0 +1 @@
+export const RELATED_ITEM_SEPARATOR = '$';

package/admin/utils/getTranslation.js

@@ -0,0 +1,4 @@
+import { PLUGIN_ID } from '../pluginId';
+export { getTrad, getTradId } from '../translations';
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+export { getTranslation };

package/admin/utils/permissions.js

@@ -0,0 +1,16 @@
+'use strict';
+const render = (uid) => {
+    return `plugin::navigation.${uid}`;
+};
+const navigation = {
+    read: 'read',
+    update: 'update',
+    settings: 'settings',
+};
+// This should be equal to admin side. Strapi push to make admin and server independent chunks. 
+const pluginPermissions = {
+    access: [{ action: render(navigation.read), subject: null }],
+    update: [{ action: render(navigation.update), subject: null }],
+    settings: [{ action: render(navigation.settings), subject: null }],
+};
+export default pluginPermissions;

package/admin/utils/prefixPluginTranslations.js

@@ -0,0 +1,3 @@
+export const prefixPluginTranslations = (input, pluginId) => {
+    return Object.fromEntries(Object.entries(input).map(([key, value]) => [[pluginId, key].join('.'), value]));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-navigation",
-  "version": "2.5.4",
+  "version": "3.0.0-beta.0",
   "description": "Strapi - Navigation plugin",
   "strapi": {
     "name": "navigation",
@@ -15,25 +15,27 @@
   "scripts": {},
   "types": "./types/index.d.ts",
   "dependencies": {
+    "@hookform/resolvers": "3.4.2",
+    "@paralleldrive/cuid2": "2.2.2",
     "@sindresorhus/slugify": "1.1.0",
-    "@strapi/utils": "^4.25.11",
+    "@tanstack/react-query": "5.37.1",
     "lodash": "^4.17.21",
-    "pluralize": "^8.0.0",
+    "pluralize": "8.0.0",
     "react": "^18.2.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
-    "react-router": "^5.3.4",
-    "react-router-dom": "5.3.4",
-    "react-intl": "6.4.1",
-    "uuid": "^8.3.0"
+    "react-intl": "6.6.8",
+    "react-router-dom": "^6.22.3",
+    "uuid": "^10.0.0",
+    "zod": "3.22.5"
   },
   "devDependencies": {},
   "peerDependencies": {
-    "@strapi/data-transfer": "4.25.11",
-    "@strapi/strapi": "4.x",
+    "@strapi/strapi": "^5.0.0-rc.22",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^5.2.0",
-    "styled-components": "^5.2.1"
+    "styled-components": "^6.0.0"
   },
   "author": {
     "name": "VirtusLab",

package/server/app-errors.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvalidParamNavigationError = exports.FillNavigationError = exports.NavigationError = void 0;
+class NavigationError extends Error {
+    additionalInfo;
+    type = 'NavigationError';
+    constructor(message, additionalInfo) {
+        super(message);
+        this.additionalInfo = additionalInfo;
+    }
+}
+exports.NavigationError = NavigationError;
+class FillNavigationError extends NavigationError {
+    type = 'FillNavigationError';
+}
+exports.FillNavigationError = FillNavigationError;
+class InvalidParamNavigationError extends NavigationError {
+    type = 'InvalidParamNavigationError';
+}
+exports.InvalidParamNavigationError = InvalidParamNavigationError;

package/server/bootstrap.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = require("./config");
+const i18n_1 = require("./i18n");
+const permissions_1 = require("./permissions");
+const graphql_1 = require("./graphql");
+const bootstrap = async (context) => {
+    await (0, config_1.configSetup)(context);
+    await (0, i18n_1.navigationSetup)(context);
+    await (0, permissions_1.setupPermissions)(context);
+    await (0, graphql_1.graphQLSetup)(context);
+};
+exports.default = bootstrap;