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

package/admin/pages/HomePage/index.js

@@ -1,231 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, DesignSystemProvider, Flex, SingleSelect, SingleSelectOption, Typography, lightTheme, } from '@strapi/design-system';
-import { Layouts, Page, useRBAC } from '@strapi/strapi/admin';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { isEmpty } from 'lodash';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { getTrad } from '../../translations';
-import pluginPermissions from '../../utils/permissions';
-import { NavigationHeader } from './components';
-import { NavigationContentHeader } from './components/NavigationContentHeader';
-import { List } from './components/NavigationItemList';
-import NavigationItemPopUp from './components/NavigationItemPopup';
-import { Search } from './components/Search';
-import { useConfig, useCopyNavigationI18n, useI18nCopyNavigationItemsModal, useLocale, useNavigations, usePurgeNavigation, useUpdateNavigation, } from './hooks';
-import { changeCollapseItemDeep, getPendingAction, mapServerNavigationItem, transformItemToViewPayload, } from './utils';
-import { ListPlus } from '@strapi/icons';
-const queryClient = new QueryClient();
-const Inner = () => {
-    const { formatMessage } = useIntl();
-    const localeQuery = useLocale();
-    const [currentNavigation, setCurrentNavigation] = useState();
-    const [activeNavigationItem, setActiveNavigationItemState] = useState();
-    const [isItemPopupVisible, setIsItemPopupVisible] = useState(false);
-    const [structureChanged, setStructureChanged] = useState(false);
-    const [currentLocale, setCurrentLocale] = useState();
-    const viewPermissions = useMemo(() => ({
-        access: pluginPermissions.access || pluginPermissions.update,
-        update: pluginPermissions.update,
-    }), []);
-    const { isLoading: isLoadingForPermissions, allowedActions: { canUpdate, canAccess }, } = useRBAC(viewPermissions);
-    const navigationsQuery = useNavigations();
-    const configQuery = useConfig();
-    const purgeMutation = usePurgeNavigation();
-    const pending = getPendingAction([navigationsQuery, { isPending: isLoadingForPermissions }]);
-    const copyNavigationI18nMutation = useCopyNavigationI18n();
-    const [{ value: searchValue, index: searchIndex }, setSearchValue] = useState({
-        value: '',
-        index: 0,
-    });
-    const isSearchEmpty = isEmpty(searchValue);
-    const normalisedSearchValue = (searchValue || '').toLowerCase();
-    const filteredListFactory = (items, doUse, activeIndex) => {
-        const filteredItems = items.reduce((acc, item) => {
-            const subItems = !!item.items?.length ? filteredListFactory(item.items ?? [], doUse) : [];
-            if (doUse(item)) {
-                return [item, ...subItems, ...acc];
-            }
-            else {
-                return [...subItems, ...acc];
-            }
-        }, []);
-        if (activeIndex !== undefined) {
-            const index = activeIndex % filteredItems.length;
-            return filteredItems.map((item, currentIndex) => {
-                return index === currentIndex ? { ...item, isSearchActive: true } : item;
-            });
-        }
-        return filteredItems;
-    };
-    const filteredList = !isSearchEmpty
-        ? filteredListFactory(currentNavigation?.items.map((_) => ({ ..._ })) ?? [], (item) => (item?.title || '').toLowerCase().includes(normalisedSearchValue), normalisedSearchValue ? searchIndex : undefined)
-        : [];
-    const changeNavigationItemPopupState = useCallback((visible, editedItem = {}) => {
-        setActiveNavigationItemState(editedItem);
-        setIsItemPopupVisible(visible);
-    }, [setIsItemPopupVisible]);
-    const addNewNavigationItem = useCallback((event, viewParentId, isMenuAllowedLevel = true, levelPath = '', parentAttachedToMenu = true, structureId = '0', maxOrder = 0) => {
-        if (canUpdate) {
-            event.preventDefault();
-            event.stopPropagation();
-            changeNavigationItemPopupState(true, {
-                viewParentId,
-                isMenuAllowedLevel,
-                levelPath,
-                parentAttachedToMenu,
-                structureId,
-                viewId: undefined,
-                order: maxOrder + 1,
-            });
-        }
-    }, [changeNavigationItemPopupState, canUpdate]);
-    const availableLocale = useMemo(() => (localeQuery.data
-        ? [localeQuery.data.defaultLocale, ...localeQuery.data.restLocale]
-        : []).filter((locale) => locale !== currentLocale), [localeQuery.data, currentLocale]);
-    const { i18nCopyItemsModal, i18nCopySourceLocale, setI18nCopyModalOpened, setI18nCopySourceLocale, } = useI18nCopyNavigationItemsModal(useCallback((sourceLocale) => {
-        const source = navigationsQuery.data?.find(({ localeCode, documentId }) => localeCode === sourceLocale && documentId === currentNavigation?.documentId);
-        if (source) {
-            if (source.id && currentNavigation?.id) {
-                copyNavigationI18nMutation.mutate({ source: source.id, target: currentNavigation.id }, {
-                    onSuccess(res) {
-                        copyNavigationI18nMutation.reset();
-                        setCurrentNavigation(res.data);
-                    },
-                });
-            }
-        }
-    }, [currentNavigation]));
-    const openI18nCopyModalOpened = useCallback(() => {
-        i18nCopySourceLocale && setI18nCopyModalOpened(true);
-    }, [setI18nCopyModalOpened, i18nCopySourceLocale]);
-    const updateNavigationMutation = useUpdateNavigation(() => {
-        setCurrentNavigation(undefined);
-    });
-    const submit = () => {
-        if (currentNavigation) {
-            updateNavigationMutation.mutate(currentNavigation);
-        }
-    };
-    const onPopUpClose = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // Using Strapi design system select components inside a modal causes
-        // extraneous close events to be fired. It is most likely related to how
-        // the select component handles onOutsideClick events. In those situations
-        // the event target element is the root HTML element.
-        // This is a workaround to prevent the modal from closing in those cases.
-        if (e.target.tagName !== 'HTML') {
-            changeNavigationItemPopupState(false);
-        }
-    };
-    const handleItemReOrder = ({ item, newOrder, }) => {
-        handleSubmitNavigationItem({
-            ...item,
-            order: newOrder,
-        });
-    };
-    const handleItemRemove = (item) => {
-        handleSubmitNavigationItem(mapServerNavigationItem({
-            ...item,
-            removed: true,
-        }, true));
-    };
-    const handleItemRestore = (item) => {
-        handleSubmitNavigationItem(mapServerNavigationItem({
-            ...item,
-            removed: false,
-        }, true));
-    };
-    const handleItemToggleCollapse = (item) => {
-        handleSubmitNavigationItem(mapServerNavigationItem({
-            ...item,
-            collapsed: !item.collapsed,
-            updated: true,
-            isSearchActive: false,
-        }, true));
-    };
-    const handleItemEdit = ({ item, levelPath = '', parentAttachedToMenu = true, }) => {
-        changeNavigationItemPopupState(true, {
-            ...item,
-            levelPath,
-            parentAttachedToMenu,
-        });
-    };
-    const handleSubmitNavigationItem = (payload) => {
-        if (currentNavigation && configQuery.data) {
-            const items = transformItemToViewPayload(payload, currentNavigation?.items ?? [], configQuery.data);
-            setCurrentNavigation({
-                ...currentNavigation,
-                items,
-            });
-            setStructureChanged(true);
-            setIsItemPopupVisible(false);
-        }
-    };
-    const listItems = isSearchEmpty ? currentNavigation?.items ?? [] : filteredList;
-    const handleExpandAll = useCallback(() => {
-        if (currentNavigation) {
-            setCurrentNavigation({
-                ...currentNavigation,
-                items: currentNavigation.items.map((item) => changeCollapseItemDeep(item, false)),
-            });
-        }
-    }, [setCurrentNavigation, currentNavigation, changeCollapseItemDeep]);
-    const handleCollapseAll = useCallback(() => {
-        if (currentNavigation) {
-            setCurrentNavigation({
-                ...currentNavigation,
-                items: currentNavigation.items.map((item) => changeCollapseItemDeep(item, true)),
-            });
-        }
-    }, [setCurrentNavigation, currentNavigation, changeCollapseItemDeep]);
-    const endActions = [
-        {
-            onClick: handleExpandAll,
-            type: 'submit',
-            variant: 'tertiary',
-            tradId: 'header.action.expandAll',
-            margin: '8px',
-        },
-        {
-            onClick: handleCollapseAll,
-            type: 'submit',
-            variant: 'tertiary',
-            tradId: 'header.action.collapseAll',
-            margin: '8px',
-        },
-    ];
-    useEffect(() => {
-        if (!currentNavigation && navigationsQuery.data?.[0]) {
-            setCurrentNavigation(navigationsQuery.data[0]);
-        }
-    }, [navigationsQuery.data]);
-    useEffect(() => {
-        if (!currentLocale && localeQuery.data?.defaultLocale) {
-            setCurrentLocale(localeQuery.data?.defaultLocale);
-        }
-    }, [navigationsQuery.data]);
-    useEffect(() => {
-        if (currentNavigation && currentLocale !== currentNavigation.localeCode) {
-            const nextNavigation = navigationsQuery.data?.find((navigation) => navigation.documentId === currentNavigation.documentId &&
-                navigation.localeCode === currentLocale);
-            if (nextNavigation && nextNavigation.id !== currentNavigation.id) {
-                setCurrentNavigation(nextNavigation);
-            }
-        }
-    }, [currentNavigation, currentLocale, navigationsQuery.data]);
-    useEffect(() => {
-        if (!currentLocale && localeQuery.data?.defaultLocale) {
-            setCurrentLocale(localeQuery.data.defaultLocale);
-        }
-    }, [navigationsQuery.data]);
-    if (!navigationsQuery.data || !localeQuery.data || !!pending) {
-        return _jsx(Page.Loading, {});
-    }
-    return (_jsxs(Layouts.Root, { children: [_jsx(Page.Main, { children: _jsx(NavigationHeader, { availableNavigations: navigationsQuery.data, activeNavigation: currentNavigation, handleCachePurge: () => purgeMutation.mutate(undefined), handleChangeSelection: setCurrentNavigation, handleLocalizationSelection: setCurrentLocale, handleSave: submit, locale: localeQuery.data, structureHasChanged: structureChanged, permissions: { canUpdate }, currentLocale: currentLocale }) }), _jsxs(Layouts.Content, { children: [_jsx(NavigationContentHeader, { startActions: _jsx(Search, { value: searchValue, setValue: setSearchValue }), endActions: endActions.map(({ tradId, margin, ...item }, i) => (_jsx(Box, { marginLeft: margin, children: _jsxs(Button, { ...item, children: [" ", formatMessage(getTrad(tradId)), " "] }) }, i))) }), !currentNavigation?.items.length ? (_jsxs(Flex, { direction: "column", minHeight: "400px", justifyContent: "center", children: [_jsx(Box, { padding: 4, children: _jsx(Typography, { variant: "beta", textColor: "neutral600", children: formatMessage(getTrad('empty')) }) }), canUpdate && (_jsx(Button, { variant: "secondary", startIcon: _jsx(ListPlus, {}), label: formatMessage(getTrad('empty.cta')), onClick: addNewNavigationItem, children: formatMessage(getTrad('empty.cta')) })), canUpdate && availableLocale.length ? (_jsxs(Flex, { direction: "column", justifyContent: "center", children: [_jsx(Box, { paddingTop: 3, paddingBottom: 3, children: _jsx(Typography, { variant: "beta", textColor: "neutral600", children: formatMessage(getTrad('view.i18n.fill.cta')) }) }), _jsxs(Flex, { direction: "row", justifyContent: "center", alignItems: "center", children: [_jsx(Box, { paddingLeft: 1, paddingRight: 1, children: _jsx(SingleSelect, { onChange: setI18nCopySourceLocale, value: i18nCopySourceLocale, size: "S", children: availableLocale.map((locale) => (_jsx(SingleSelectOption, { value: locale, children: formatMessage(getTrad('view.i18n.fill.option'), { locale }) }, locale))) }) }), _jsx(Box, { paddingLeft: 1, paddingRight: 1, children: _jsx(Button, { variant: "tertiary", onClick: openI18nCopyModalOpened, disabled: !i18nCopySourceLocale, size: "S", children: formatMessage(getTrad('view.i18n.fill.cta.button')) }) })] })] })) : null] })) : (_jsx(List, { items: listItems, onItemLevelAdd: addNewNavigationItem, onItemRemove: handleItemRemove, onItemEdit: handleItemEdit, onItemRestore: handleItemRestore, onItemReOrder: handleItemReOrder, onItemToggleCollapse: handleItemToggleCollapse, displayFlat: !isSearchEmpty, isParentAttachedToMenu: true, permissions: { canUpdate, canAccess }, structurePrefix: "" })), isItemPopupVisible && currentLocale && currentNavigation && (_jsx(NavigationItemPopUp, { availableLocale: availableLocale, currentItem: activeNavigationItem, onSubmit: handleSubmitNavigationItem, onClose: onPopUpClose, locale: currentLocale, permissions: { canUpdate }, isOpen: isItemPopupVisible, isLoading: isLoadingForPermissions, currentNavigation: currentNavigation })), canUpdate && i18nCopyItemsModal] })] }));
-};
-export default function HomePage() {
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DesignSystemProvider, { locale: "en-GB", theme: lightTheme, children: _jsx(Inner, {}) }) }));
-}
-export { HomePage };

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

@@ -1,16 +0,0 @@
-export * from './parsers';
-export const getPendingAction = (actions) => actions.find(({ isPending }) => isPending);
-export const changeCollapseItemDeep = (item, isCollapsed) => {
-    if (item.collapsed !== isCollapsed) {
-        return {
-            ...item,
-            collapsed: isCollapsed,
-            updated: true,
-            items: item.items?.map((el) => changeCollapseItemDeep(el, isCollapsed)),
-        };
-    }
-    return {
-        ...item,
-        items: item.items?.map((el) => changeCollapseItemDeep(el, isCollapsed)),
-    };
-};

package/admin/pages/HomePage/utils/parsers.js

@@ -1,187 +0,0 @@
-import { get, orderBy } from 'lodash';
-import { RELATED_ITEM_SEPARATOR } from '../../../utils/constants';
-const reOrderItems = (items = []) => orderBy(items, ['order'], ['asc']).map((item, n) => {
-    const order = n + 1;
-    return {
-        ...item,
-        order,
-        updated: item.updated || order !== item.order,
-    };
-});
-const toNavigationItem = (payload, config) => {
-    return payload.type === 'INTERNAL'
-        ? {
-            type: 'INTERNAL',
-            collapsed: !!payload.collapsed,
-            id: payload.id,
-            menuAttached: !!payload.menuAttached,
-            order: payload.order ?? 0,
-            path: payload.path,
-            title: payload.title,
-            uiRouterKey: payload.uiRouterKey,
-            additionalFields: payload.additionalFields,
-            audience: payload.audience?.map((id) => config.availableAudience.find((audience) => audience.id === id)) ?? [],
-            autoSync: payload.autoSync,
-            items: payload.items?.length
-                ? transformItemToViewPayload(payload, payload.items, config)
-                : payload.items,
-            related: [payload.relatedType, payload.related].join(RELATED_ITEM_SEPARATOR),
-            viewId: payload.viewId,
-            viewParentId: payload.viewParentId,
-            structureId: payload.structureId,
-            removed: payload.removed,
-            updated: payload.updated,
-        }
-        : {
-            type: 'EXTERNAL',
-            collapsed: !!payload.collapsed,
-            id: payload.id,
-            menuAttached: !!payload.menuAttached,
-            order: payload.order ?? 0,
-            title: payload.title,
-            uiRouterKey: payload.uiRouterKey,
-            additionalFields: payload.additionalFields,
-            autoSync: payload.autoSync,
-            items: payload.items?.length
-                ? transformItemToViewPayload(payload, payload.items, config)
-                : payload.items,
-            path: '',
-            viewId: payload.viewId,
-            structureId: payload.structureId,
-            viewParentId: payload.viewParentId,
-            removed: payload.removed,
-            updated: payload.updated,
-            externalPath: payload.externalPath ?? '',
-            audience: payload.audience?.map((id) => config.availableAudience.find((audience) => audience.id === id)) ?? [],
-        };
-};
-export const transformItemToViewPayload = (payload, items = [], config) => {
-    if (!payload.viewParentId) {
-        if (payload.viewId) {
-            const updatedRootLevel = items.map((item) => {
-                if (item.viewId === payload.viewId) {
-                    return toNavigationItem(payload, config);
-                }
-                return {
-                    ...item,
-                    items: item.items?.length
-                        ? transformItemToViewPayload(payload, item.items, config)
-                        : item.items,
-                };
-            });
-            return reOrderItems(updatedRootLevel);
-        }
-        return [
-            ...reOrderItems([...items, toNavigationItem({ ...payload, viewId: Date.now() }, config)]),
-        ];
-    }
-    const updatedLevel = items.map((item) => {
-        const branchItems = item.items || [];
-        if (payload.viewParentId === item.viewId) {
-            if (!payload.viewId) {
-                return {
-                    ...item,
-                    items: [
-                        ...reOrderItems([
-                            ...branchItems,
-                            toNavigationItem({ ...payload, viewId: Date.now() }, config),
-                        ]),
-                    ],
-                };
-            }
-            const updatedBranchItems = branchItems.map((item) => {
-                if (item.viewId === payload.viewId) {
-                    return toNavigationItem(payload, config);
-                }
-                return item;
-            });
-            return {
-                ...item,
-                items: reOrderItems(updatedBranchItems),
-            };
-        }
-        return {
-            ...item,
-            items: item.items?.length
-                ? transformItemToViewPayload(payload, item.items, config)
-                : item.items,
-        };
-    });
-    return reOrderItems(updatedLevel);
-};
-export const extractRelatedItemLabel = (item, config) => {
-    const contentTypes = config?.contentTypes ?? [];
-    const fields = config?.contentTypesNameFields ?? {};
-    const defaultFields = fields.default ?? [];
-    const { __collectionUid } = item;
-    const contentType = contentTypes.find(({ uid }) => uid === __collectionUid);
-    if (contentType?.isSingle) {
-        return contentType.labelSingular;
-    }
-    return (get(fields, `${contentType ? contentType.uid : __collectionUid}`, defaultFields)
-        .map((_) => item[_])
-        .filter((_) => _)[0] || '');
-};
-export const isRelationCorrect = ({ related, type }) => {
-    const isRelationDefined = !!related;
-    return type !== 'INTERNAL' || (type === 'INTERNAL' && isRelationDefined);
-};
-export const isRelationPublished = ({ relatedRef, relatedType = {}, type, isCollection, }) => {
-    if (isCollection) {
-        return relatedType.available || relatedRef.available;
-    }
-    if (type === 'INTERNAL') {
-        const isHandledByPublishFlow = relatedRef ? 'publishedAt' in relatedRef : false;
-        if (isHandledByPublishFlow) {
-            return get(relatedRef, 'publishedAt', true);
-        }
-    }
-    return true;
-};
-export const mapServerNavigationItem = (item, stopAtFirstLevel = false) => {
-    const [relatedType, related] = item.type === 'INTERNAL' && item.related ? item.related.split(RELATED_ITEM_SEPARATOR) : [];
-    return item.type === 'INTERNAL'
-        ? {
-            type: 'INTERNAL',
-            id: item.id,
-            additionalFields: item.additionalFields ?? {},
-            path: item.path ?? '',
-            relatedType,
-            related: parseInt(related, 10),
-            title: item.title,
-            uiRouterKey: item.uiRouterKey,
-            autoSync: item.autoSync ?? undefined,
-            collapsed: item.collapsed,
-            externalPath: undefined,
-            order: item.order ?? 0,
-            menuAttached: item.menuAttached,
-            viewId: item.viewId,
-            viewParentId: item.viewParentId,
-            items: stopAtFirstLevel
-                ? item.items
-                : item.items?.map((_) => mapServerNavigationItem(_)) ?? undefined,
-            removed: item.removed,
-            updated: item.updated,
-            isSearchActive: item.isSearchActive,
-        }
-        : {
-            type: 'EXTERNAL',
-            id: item.id,
-            additionalFields: item.additionalFields ?? {},
-            title: item.title,
-            uiRouterKey: item.uiRouterKey,
-            autoSync: item.autoSync ?? undefined,
-            collapsed: item.collapsed,
-            externalPath: item.externalPath,
-            order: item.order ?? 0,
-            menuAttached: item.menuAttached,
-            viewId: item.viewId,
-            viewParentId: item.viewParentId,
-            items: stopAtFirstLevel
-                ? item.items
-                : item.items?.map((_) => mapServerNavigationItem(_)) ?? undefined,
-            removed: item.removed,
-            updated: item.updated,
-            isSearchActive: item.isSearchActive,
-        };
-};

package/admin/pages/SettingsPage/common/const.js

@@ -1 +0,0 @@
-export const customFieldsTypes = ["string", "boolean", "select", "media"];

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

@@ -1,10 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
-import { navigationItemCustomField } from '../../../../../schemas';
-export const useCustomFieldForm = (customField) => {
-    const form = useForm({
-        resolver: zodResolver(navigationItemCustomField),
-        values: customField,
-    });
-    return form;
-};

package/admin/pages/SettingsPage/components/CustomFieldForm/index.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Field, Grid, Modal } from '@strapi/design-system';
-import { SingleSelect, SingleSelectOption, TextInput, Toggle } from '@strapi/design-system';
-import { Controller } from 'react-hook-form';
-import { useIntl } from 'react-intl';
-import TextArrayInput from '../../../../components/TextArrayInput';
-import { getTrad } from '../../../../translations';
-import { customFieldsTypes } from '../../common';
-import { useCustomFieldForm } from './hooks';
-const tradPrefix = 'pages.settings.form.customFields.popup.';
-const prepareSelectOptions = (options) => options.map((option, index) => ({
-    key: `${option}-${index}`,
-    metadatas: {
-        intlLabel: {
-            id: option,
-            defaultMessage: option,
-        },
-        hidden: false,
-        disabled: false,
-    },
-    value: option,
-    label: option,
-}));
-const CustomFieldForm = ({ isEditForm, customField, onSubmit, onClose, }) => {
-    const typeSelectOptions = prepareSelectOptions(customFieldsTypes);
-    const { formatMessage } = useIntl();
-    const { control, handleSubmit, watch } = useCustomFieldForm(customField);
-    const [type] = watch(['type']);
-    const submit = handleSubmit(onSubmit);
-    return (_jsxs(_Fragment, { children: [_jsx(Modal.Body, { children: _jsxs(Grid.Root, { gap: 5, children: [_jsx(Grid.Item, { col: 12, children: _jsx(Controller, { control: control, name: "name", render: ({ field: { name, onChange, value }, fieldState }) => (_jsxs(Field.Root, { error: fieldState.error?.message, width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad(`${tradPrefix}name.label`)) }), _jsx(TextInput, { name: name, value: value, onChange: onChange, placeholder: formatMessage(getTrad(`${tradPrefix}name.placeholder`)), type: "string", disabled: isEditForm, width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad(`${tradPrefix}name.description`)) }), _jsx(Field.Error, {})] })) }) }, "name"), _jsx(Grid.Item, { col: 12, children: _jsx(Controller, { control: control, name: "label", render: ({ field: { name, onChange, value }, fieldState }) => (_jsxs(Field.Root, { error: fieldState.error?.message, width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad(`${tradPrefix}label.label`)) }), _jsx(TextInput, { name: name, value: value, onChange: onChange, placeholder: formatMessage(getTrad(`${tradPrefix}label.placeholder`)), type: "string", width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad(`${tradPrefix}label.description`)) }), _jsx(Field.Error, {})] })) }) }, "label"), _jsx(Grid.Item, { col: 12, children: _jsx(Controller, { control: control, name: "type", render: ({ field: { name, onChange, value } }) => (_jsxs(Field.Root, { width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad(`${tradPrefix}type.label`)) }), _jsx(SingleSelect, { name: name, value: value, onChange: onChange, disabled: isEditForm, width: "100%", children: typeSelectOptions.map(({ key, label, value }) => (_jsx(SingleSelectOption, { value: value, children: label }, key))) }), _jsx(Field.Hint, { children: formatMessage(getTrad(`${tradPrefix}type.description`)) })] })) }) }, "type"), type === 'select' && (_jsxs(_Fragment, { children: [_jsx(Grid.Item, { col: 12, children: _jsx(Controller, { control: control, name: "multi", render: ({ field: { name, onChange, value }, fieldState }) => (_jsxs(Field.Root, { error: fieldState.error?.message, width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad(`${tradPrefix}multi.label`)) }), _jsx(Toggle, { name: name, checked: value, onChange: ({ currentTarget: { checked }, }) => {
-                                                        onChange(checked);
-                                                    }, onLabel: "true", offLabel: "false", width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad(`${tradPrefix}multi.description`)) }), _jsx(Field.Error, {})] })) }) }, "multi"), _jsx(Grid.Item, { col: 12, children: _jsx(Controller, { control: control, name: "options", render: ({ field: { name, onChange, value }, fieldState }) => (_jsxs(Field.Root, { error: fieldState.error?.message, width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad(`${tradPrefix}options.label`)) }), _jsx(TextArrayInput, { name: name, onChange: onChange, initialValue: value }), _jsx(Field.Hint, { children: formatMessage(getTrad(`${tradPrefix}options.description`)) }), _jsx(Field.Error, {})] })) }) }, "options")] })), _jsx(Grid.Item, { col: 12, children: _jsx(Controller, { control: control, name: "required", render: ({ field: { name, onChange, value }, fieldState }) => (_jsxs(Field.Root, { error: fieldState.error?.message, width: "100%", children: [_jsx(Field.Label, { children: formatMessage(getTrad(`${tradPrefix}required.label`)) }), _jsx(Toggle, { name: name, placeholder: formatMessage(getTrad(`${tradPrefix}required.placeholder`)), checked: value, onChange: ({ currentTarget: { checked }, }) => {
-                                                onChange(checked);
-                                            }, onLabel: "true", offLabel: "false", width: "100%" }), _jsx(Field.Hint, { children: formatMessage(getTrad(`${tradPrefix}required.description`)) }), _jsx(Field.Error, {})] })) }) }, "required")] }) }), _jsxs(Modal.Footer, { children: [_jsx(Modal.Close, { children: _jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage(getTrad('popup.item.form.button.cancel')) }) }), _jsx(Button, { onClick: submit, children: formatMessage(getTrad(`popup.item.form.button.save`)) })] })] }));
-};
-export default CustomFieldForm;

package/admin/pages/SettingsPage/components/CustomFieldModal/index.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, Typography } from '@strapi/design-system';
-import { pick } from 'lodash';
-import { useIntl } from 'react-intl';
-import { getTrad } from '../../../../translations';
-import CustomFieldForm from '../CustomFieldForm';
-const CustomFieldModal = ({ isOpen, onClose, onSubmit, data, }) => {
-    const isEditMode = !!data;
-    const { formatMessage } = useIntl();
-    return (_jsx(Modal.Root, { onOpenChange: (isOpen) => {
-            if (!isOpen) {
-                onClose();
-            }
-        }, open: isOpen, labelledBy: "custom-field-modal", children: _jsxs(Modal.Content, { children: [_jsx(Modal.Header, { children: _jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", id: "asset-dialog-title", children: formatMessage(getTrad(`pages.settings.form.customFields.popup.header.${isEditMode ? 'edit' : 'new'}`)) }) }), _jsx(CustomFieldForm, { isEditForm: isEditMode, customField: pick(data, 'name', 'label', 'type', 'required', 'options', 'multi'), onSubmit: onSubmit, onClose: onClose })] }) }));
-};
-export default CustomFieldModal;

package/admin/pages/SettingsPage/components/CustomFieldTable/index.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { VisuallyHidden } from '@strapi/design-system';
-import { Check, Eye, EyeStriked, Minus, Pencil, Plus, PriceTag, Trash } from '@strapi/icons';
-import { useNotification } from '@strapi/strapi/admin';
-import { sortBy } from 'lodash';
-import { useCallback, useMemo, useState } from 'react';
-import { Flex, IconButton, TFooter, Table, Tbody, Td, Th, Thead, Tooltip, Tr, Typography, } from '@strapi/design-system';
-import { useIntl } from 'react-intl';
-import { ConfirmationDialog } from '../../../../components/ConfirmationDialog';
-import { getTrad, getTradId } from '../../../../translations';
-const refreshIcon = _jsx(PriceTag, {});
-const plusIcon = _jsx(Plus, {});
-const tradPrefix = 'pages.settings.form.customFields.table.';
-const CustomFieldTable = ({ data = [], onOpenModal, onRemoveCustomField, onToggleCustomField, }) => {
-    const [confirmationVisible, setIsConfirmationVisible] = useState(false);
-    const [fieldToRemove, setFieldToRemove] = useState(null);
-    const { toggleNotification } = useNotification();
-    const customFields = useMemo(() => sortBy(data, 'name'), [data]);
-    const { formatMessage } = useIntl();
-    const handleRemove = useCallback((field) => {
-        setFieldToRemove(field);
-        setIsConfirmationVisible(true);
-    }, [setFieldToRemove, setIsConfirmationVisible]);
-    const cleanup = useCallback(() => {
-        setFieldToRemove(null);
-        setIsConfirmationVisible(false);
-    }, [setFieldToRemove, setIsConfirmationVisible]);
-    const handleConfirm = useCallback(() => {
-        if (fieldToRemove === null) {
-            toggleNotification({
-                type: 'warning',
-                message: formatMessage(getTrad(`${tradPrefix}confirmation.error`)),
-            });
-        }
-        else {
-            onRemoveCustomField(fieldToRemove);
-        }
-        cleanup();
-    }, [cleanup, fieldToRemove, getTradId, onRemoveCustomField, toggleNotification]);
-    return (_jsxs(_Fragment, { children: [_jsx(ConfirmationDialog, { isVisible: confirmationVisible, header: formatMessage(getTrad(`${tradPrefix}confirmation.header`)), children: formatMessage(getTrad(`${tradPrefix}confirmation.message`)), labelConfirm: formatMessage(getTrad(`${tradPrefix}confirmation.confirm`)), iconConfirm: refreshIcon, mainIcon: refreshIcon, onConfirm: handleConfirm, onCancel: cleanup }), _jsxs(Table, { width: "100%", colCount: 4, rowCount: data.length + 1, footer: _jsx(TFooter, { onClick: (e) => {
-                        e.preventDefault();
-                        onOpenModal(null);
-                    }, icon: plusIcon, children: formatMessage(getTrad(`${tradPrefix}footer`)) }), children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { width: "20%", children: _jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage(getTrad(`${tradPrefix}header.name`)) }) }), _jsx(Th, { width: "60%", children: _jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage(getTrad(`${tradPrefix}header.label`)) }) }), _jsx(Th, { width: "15%", children: _jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage(getTrad(`${tradPrefix}header.type`)) }) }), _jsx(Th, { width: "5%", children: _jsx(Typography, { variant: "sigma", textColor: "neutral600", children: formatMessage(getTrad(`${tradPrefix}header.required`)) }) }), _jsx(Th, { children: _jsx(VisuallyHidden, {}) })] }) }), _jsx(Tbody, { children: customFields.map((customField) => typeof customField !== 'string' ? (_jsxs(Tr, { children: [_jsx(Td, { width: "20%", children: _jsx(Typography, { fontWeight: "semiBold", textColor: "neutral800", children: customField.name }) }), _jsx(Td, { width: "60%", children: _jsx(Typography, { textColor: "neutral800", children: customField.label }) }), _jsx(Td, { width: "15%", children: _jsx(Typography, { textColor: "neutral800", children: customField.type }) }), _jsx(Td, { width: "5%", children: _jsx(Tooltip, { description: formatMessage(getTrad(`${tradPrefix}${customField.required ? 'required' : 'notRequired'}`)), children: _jsx(Typography, { textColor: "neutral800", children: customField.required ? _jsx(Check, {}) : _jsx(Minus, {}) }) }) }), _jsx(Td, { children: _jsxs(Flex, { direction: "row", size: 1, children: [_jsx(IconButton, { onClick: () => onOpenModal(customField), label: formatMessage(getTrad(`${tradPrefix}edit`)), children: _jsx(Pencil, {}), style: { minWidth: 50 } }), _jsx(IconButton, { onClick: () => onToggleCustomField(customField), label: formatMessage(getTrad(`${tradPrefix}${customField.enabled ? 'disable' : 'enable'}`)), children: customField.enabled ? _jsx(Eye, {}) : _jsx(EyeStriked, {}), style: { minWidth: 50 } }), _jsx(IconButton, { onClick: () => handleRemove(customField), label: formatMessage(getTrad(`${tradPrefix}remove`)), children: _jsx(Trash, {}), style: { minWidth: 50 } })] }) })] }, customField.name)) : null) })] })] }));
-};
-export default CustomFieldTable;