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

package/admin/pages/HomePage/components/NavigationManager/NavigationUpdate/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../../translations';
+import { FooterBase } from '../Footer';
+import { Form } from '../Form';
+export const NavigationUpdate = ({ alreadyUsedNames, current, isLoading, navigation: initialValue, setState, }) => {
+    const navigation = useMemo(() => current ?? initialValue, [current]);
+    const onChange = useCallback((updated) => {
+        setState({
+            view: 'EDIT',
+            alreadyUsedNames,
+            current: updated,
+            navigation: initialValue,
+        });
+    }, [setState, initialValue, alreadyUsedNames]);
+    return (_jsx(Form, { navigation: navigation, onChange: onChange, isLoading: isLoading, alreadyUsedNames: alreadyUsedNames }));
+};
+export const NavigationUpdateFooter = ({ onSubmit, onReset, isLoading }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(FooterBase, { start: {
+            children: formatMessage(getTrad('popup.item.form.button.cancel')),
+            disabled: isLoading,
+            onClick: onReset,
+            variant: 'tertiary',
+        }, end: {
+            children: formatMessage(getTrad('popup.navigation.manage.button.save')),
+            disabled: isLoading,
+            onClick: onSubmit,
+            variant: 'secondary',
+        } }));
+};

package/admin/pages/HomePage/components/NavigationManager/NewNavigation/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../../translations';
+import { FooterBase } from '../Footer';
+import { Form } from '../Form';
+export const INITIAL_NAVIGATION = {
+    name: 'Navigation',
+    items: [],
+    visible: true,
+};
+export const NewNavigation = ({ setState, current, isLoading, alreadyUsedNames }) => {
+    const onSubmit = useCallback((updated) => {
+        setState({
+            view: 'CREATE',
+            current: updated,
+            alreadyUsedNames,
+        });
+    }, [setState]);
+    return (_jsx(Form, { alreadyUsedNames: alreadyUsedNames, navigation: current, onChange: onSubmit, isLoading: isLoading }));
+};
+export const NewNavigationFooter = ({ onSubmit, onReset, isLoading }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(FooterBase, { start: {
+            children: formatMessage(getTrad('popup.item.form.button.cancel')),
+            variant: 'tertiary',
+            disabled: isLoading,
+            onClick: onReset,
+        }, end: {
+            children: formatMessage(getTrad('popup.navigation.manage.button.save')),
+            variant: 'default',
+            disabled: isLoading,
+            onClick: onSubmit,
+        } }));
+};

package/admin/pages/HomePage/components/NavigationManager/PurgeCacheConfirm/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Grid, Typography } from '@strapi/design-system';
+import { prop } from 'lodash/fp';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../../translations';
+import { FooterBase } from '../Footer';
+export const PurgeCacheConfirm = ({ navigations }) => {
+    const { formatMessage } = useIntl();
+    return (_jsxs(Grid.Root, { children: [_jsx(Grid.Item, { col: 12, paddingBottom: 1, children: _jsx(Flex, { children: _jsx(Typography, { variant: "beta", children: formatMessage(getTrad('popup.navigation.manage.purge.header')) }) }) }), _jsx(Grid.Item, { col: 12, paddingBottom: 1, children: _jsx(Typography, { variant: "omega", fontWeight: "semiBold", children: renderItems(navigations) }) })] }));
+};
+export const PurgeCacheConfirmFooter = ({ onSubmit, onReset, isLoading }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(FooterBase, { start: {
+            children: formatMessage(getTrad('popup.item.form.button.cancel')),
+            disabled: isLoading,
+            onClick: onReset,
+            variant: 'tertiary',
+        }, end: {
+            children: formatMessage(getTrad('popup.navigation.manage.footer.button.purge')),
+            disabled: isLoading,
+            onClick: onSubmit,
+            variant: 'danger',
+        } }));
+};
+const renderItems = (navigations) => navigations.map(prop('name')).join(', ');

package/admin/pages/HomePage/components/NavigationManager/index.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Loader, Modal } from '@strapi/design-system';
+import { useNotification } from '@strapi/strapi/admin';
+import { sortBy } from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../translations';
+import { useCreateNavigation, useDeleteNavigations, useHardReset, useLocale, useNavigations, usePurgeNavigation, useUpdateNavigation, } from '../../hooks';
+import { getPendingAction } from '../../utils';
+import { AllNavigations, AllNavigationsFooter } from './AllNavigations';
+import { DeleteConfirmFooter, DeletionConfirm } from './DeletionConfirm';
+import { ErrorDetails, ErrorDetailsFooter } from './ErrorDetails';
+import { NavigationUpdate, NavigationUpdateFooter } from './NavigationUpdate';
+import { NewNavigation, NewNavigationFooter } from './NewNavigation';
+import { PurgeCacheConfirm, PurgeCacheConfirmFooter } from './PurgeCacheConfirm';
+import { Typography } from '@strapi/design-system';
+export const NavigationManager = ({ initialState, isOpened, onClose }) => {
+    const { formatMessage } = useIntl();
+    const [state, setState] = useState(initialState);
+    const { toggleNotification } = useNotification();
+    const hardReset = useHardReset();
+    const deleteNavigationsMutation = useDeleteNavigations();
+    const createNavigationMutation = useCreateNavigation();
+    const updateNavigationMutation = useUpdateNavigation();
+    const purgeNavigationsMutation = usePurgeNavigation();
+    const navigationsQuery = useNavigations();
+    const localeQuery = useLocale();
+    const navigations = useMemo(() => sortBy(navigationsQuery.data ?? [], 'id'), [navigationsQuery.data]);
+    const pending = getPendingAction([
+        deleteNavigationsMutation,
+        navigationsQuery,
+        createNavigationMutation,
+        updateNavigationMutation,
+        purgeNavigationsMutation,
+        localeQuery,
+    ]);
+    const onReset = useCallback(() => setState({ view: 'INITIAL' }), [setState]);
+    const onSubmit = useCallback(async () => {
+        const performAction = state.view === 'DELETE'
+            ? () => {
+                deleteNavigationsMutation.mutate(state.navigations.reduce((acc, navigation) => {
+                    if (navigation.id) {
+                        acc.push(navigation.id);
+                    }
+                    return acc;
+                }, []), {
+                    onSuccess: hardReset,
+                });
+            }
+            : state.view === 'EDIT'
+                ? () => {
+                    updateNavigationMutation.mutate(state.current, {
+                        onSuccess() {
+                            hardReset();
+                            toggleNotification({
+                                type: 'success',
+                                message: formatMessage(getTrad('notification.navigation.submit')),
+                            });
+                        },
+                        onError(error) {
+                            // TODO: handle errors
+                            console.warn(error);
+                            toggleNotification({
+                                type: 'warning',
+                                message: formatMessage(getTrad('notification.navigation.error'), {
+                                    errorTitles: '',
+                                }),
+                            });
+                        },
+                    });
+                }
+                : state.view === 'CREATE' && state.current
+                    ? () => {
+                        createNavigationMutation.mutate(state.current, {
+                            onSuccess() {
+                                hardReset();
+                                toggleNotification({
+                                    type: 'success',
+                                    message: formatMessage(getTrad('notification.navigation.submit')),
+                                });
+                            },
+                            onError(error) {
+                                // TODO: handle errors
+                                console.warn(error);
+                                toggleNotification({
+                                    type: 'warning',
+                                    message: formatMessage(getTrad('notification.navigation.error'), {
+                                        errorTitles: '',
+                                    }),
+                                });
+                            },
+                        });
+                    }
+                    : state.view === 'CACHE_PURGE'
+                        ? () => {
+                            purgeNavigationsMutation.mutate(state.navigations.reduce((acc, navigation) => {
+                                if (navigation.id) {
+                                    acc.push(navigation.id);
+                                }
+                                return acc;
+                            }, []), {
+                                onSuccess: hardReset,
+                            });
+                        }
+                        : () => { };
+        try {
+            performAction();
+            setState({ view: 'INITIAL' });
+        }
+        catch (error) {
+            setState({
+                view: 'ERROR',
+                errors: error instanceof Error ? [error] : [],
+            });
+        }
+    }, [
+        state,
+        setState,
+        hardReset,
+        createNavigationMutation,
+        purgeNavigationsMutation,
+        updateNavigationMutation,
+        deleteNavigationsMutation,
+        toggleNotification,
+        formatMessage,
+        getTrad,
+    ]);
+    useEffect(() => {
+        if (state.view === 'INITIAL' || state.view === 'LIST') {
+            setState({
+                view: 'LIST',
+                navigations,
+                selected: [],
+            });
+        }
+    }, [state.view, navigations]);
+    const header = renderHeader(state, formatMessage, !!pending);
+    const content = renderContent(state, setState, !!pending);
+    const footer = renderFooter({
+        state,
+        setState,
+        onClose,
+        onSubmit,
+        onReset,
+        navigations,
+        isLoading: !!pending,
+    });
+    return (_jsx(Modal.Root, { labelledBy: "condition-modal-breadcrumbs", onOpenChange: (isOpen) => {
+            if (!isOpen) {
+                onClose?.();
+            }
+        }, open: isOpened, children: _jsxs(Modal.Content, { children: [_jsx(Modal.Header, { children: _jsx(Typography, { variant: "omega", fontWeight: "bold", textColor: "neutral800", as: "h2", children: header }) }), _jsx(Modal.Body, { children: content }), footer] }) }));
+};
+const renderHeader = (state, formatMessage, isLoading) => {
+    switch (state.view) {
+        case 'LIST':
+        case 'CREATE':
+        case 'ERROR':
+        case 'CACHE_PURGE':
+        case 'DELETE': {
+            return (_jsxs(Flex, { direction: "row", children: [isLoading ? _jsx(Loader, { small: true }) : null, formatMessage(getTrad(`popup.navigation.manage.header.${state.view}`))] }));
+        }
+        case 'EDIT': {
+            return (_jsxs(Flex, { direction: "row", children: [isLoading ? _jsx(Loader, { small: true }) : null, formatMessage(getTrad('popup.navigation.manage.header.EDIT'), {
+                        name: state.navigation.name,
+                    })] }));
+        }
+        case 'INITIAL': {
+            return null;
+        }
+        default:
+            return handleUnknownState(state);
+    }
+};
+const renderContent = (state, setState, isLoading) => {
+    const commonProps = {
+        setState,
+        isLoading,
+    };
+    switch (state.view) {
+        case 'LIST': {
+            return _jsx(AllNavigations, { ...state, ...commonProps });
+        }
+        case 'EDIT': {
+            return _jsx(NavigationUpdate, { ...state, ...commonProps });
+        }
+        case 'CREATE': {
+            return _jsx(NewNavigation, { ...state, ...commonProps });
+        }
+        case 'DELETE': {
+            return _jsx(DeletionConfirm, { ...state, ...commonProps });
+        }
+        case 'CACHE_PURGE': {
+            return _jsx(PurgeCacheConfirm, { ...state, ...commonProps });
+        }
+        case 'INITIAL': {
+            return _jsx(Loader, { small: true });
+        }
+        case 'ERROR': {
+            return _jsx(ErrorDetails, { ...state, ...commonProps });
+        }
+        default:
+            return handleUnknownState(state);
+    }
+};
+const renderFooter = (props) => {
+    switch (props.state.view) {
+        case 'LIST': {
+            return _jsx(AllNavigationsFooter, { ...props });
+        }
+        case 'CREATE': {
+            return _jsx(NewNavigationFooter, { ...props });
+        }
+        case 'EDIT': {
+            return _jsx(NavigationUpdateFooter, { ...props });
+        }
+        case 'DELETE': {
+            return _jsx(DeleteConfirmFooter, { ...props });
+        }
+        case 'CACHE_PURGE': {
+            return _jsx(PurgeCacheConfirmFooter, { ...props });
+        }
+        case 'ERROR': {
+            return _jsx(ErrorDetailsFooter, { ...props });
+        }
+        case 'INITIAL': {
+            return null;
+        }
+        default:
+            return handleUnknownState(props.state);
+    }
+};
+const handleUnknownState = (state) => {
+    console.warn(`Unknown state "${state?.view}". (${JSON.stringify(state)})`);
+    return null;
+};

package/admin/pages/HomePage/components/NavigationManager/types.js

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

package/admin/pages/HomePage/components/Search/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, Searchbar, Typography } from '@strapi/design-system';
+import { Search as SearchIcon } from '@strapi/icons';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl';
+import { getTrad } from '../../../../translations';
+const DEFAULT_INDEX = 0;
+export const Search = ({ value, setValue, initialIndex = DEFAULT_INDEX }) => {
+    const [currentValue, setCurrentValue] = useState(value);
+    const [previousValue, setPreviousValue] = useState(value);
+    const [currentIndex, setCurrentIndex] = useState(initialIndex);
+    const [isOpen, setIsOpen] = useState(!!value);
+    const wrapperRef = useRef(null);
+    const { formatMessage } = useIntl();
+    useEffect(() => {
+        if (isOpen) {
+            setTimeout(() => {
+                wrapperRef.current?.querySelector('input')?.focus();
+            }, 0);
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        if (currentIndex && currentValue === previousValue) {
+            setValue({
+                value: currentValue,
+                index: currentIndex,
+            });
+        }
+    }, [currentIndex, currentValue, previousValue]);
+    useEffect(() => {
+        if (currentValue !== previousValue) {
+            setPreviousValue(currentValue);
+            setCurrentIndex(DEFAULT_INDEX);
+            setValue({
+                value: currentValue,
+                index: DEFAULT_INDEX,
+            });
+        }
+    }, [currentValue, previousValue]);
+    const onKeyDown = useCallback((e) => {
+        if (e.code.toLowerCase() === 'enter') {
+            setCurrentIndex((current) => current + 1);
+        }
+    }, []);
+    const onChange = useCallback((e) => {
+        setCurrentValue(e.target.value);
+    }, [setCurrentValue]);
+    const onClear = useCallback(() => {
+        setCurrentValue('');
+        setIsOpen(false);
+    }, [setCurrentValue, setIsOpen]);
+    if (isOpen) {
+        return (_jsxs("div", { ref: wrapperRef, children: [_jsx(Searchbar, { name: "searchbar", onClear: onClear, value: value, size: "S", onChange: onChange, clearLabel: "Clearing the search", placeholder: formatMessage(getTrad('pages.main.search.placeholder', 'Type to start searching...')), onKeyDown: onKeyDown, children: "Search for navigation items" }), _jsx(Typography, { variant: "pi", fontColor: "neutral150", style: { margin: '3px 0 0', display: 'inline-block' }, children: formatMessage(getTrad('pages.main.search.subLabel', 'press ENTER to highlight next item')) })] }));
+    }
+    else {
+        return _jsx(IconButton, { children: _jsx(SearchIcon, {}), onClick: () => setIsOpen(!isOpen) });
+    }
+};

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

@@ -0,0 +1 @@
+export * from './NavigationHeader';

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getFetchClient } from '@strapi/strapi/admin';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+import { getApiClient } from '../../../api';
+import { I18nCopyNavigationItemsModal } from '../components/I18nCopyNavigationItems';
+export const useLocale = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readLocaleIndex(),
+        queryFn: apiClient.readLocale,
+        staleTime: Infinity,
+    });
+};
+export const useContentTypeItems = (input) => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readContentTypeItemsIndex(input),
+        queryFn: () => apiClient.readContentTypeItems(input),
+        staleTime: 1000 * 60 * 3,
+        enabled: !!input.uid,
+    });
+};
+export const useContentTypes = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readContentTypeIndex(),
+        queryFn: () => apiClient.readContentType(),
+        staleTime: 1000 * 60 * 3,
+    });
+};
+export const useNavigations = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readAllIndex(),
+        queryFn() {
+            return apiClient.readAll().then((navigations) => navigations.map((navigation) => ({
+                ...navigation,
+                items: navigation.items.map(appendViewId),
+            })));
+        },
+        staleTime: 1000 * 60 * 5,
+    });
+};
+export const useHardReset = () => {
+    const client = useQueryClient();
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useCallback(() => {
+        client.invalidateQueries({
+            queryKey: apiClient.getIndexPrefix(),
+        });
+    }, [client, fetch, apiClient]);
+};
+export const useDeleteNavigations = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useMutation({
+        mutationFn(ids) {
+            return Promise.all(ids.map(apiClient.delete));
+        },
+    });
+};
+export const useCopyNavigationItemI18n = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useMutation({
+        mutationFn: apiClient.copyNavigationItemLocale,
+    });
+};
+export const useCopyNavigationI18n = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    // TODO: nicer cache update
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: apiClient.copyNavigationLocale,
+        onSuccess() {
+            queryClient.invalidateQueries({
+                queryKey: apiClient.readAllIndex(),
+            });
+        },
+    });
+};
+export const useCreateNavigation = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    // TODO: nicer cache update
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: apiClient.create,
+        onSuccess() {
+            queryClient.invalidateQueries({
+                queryKey: apiClient.readAllIndex(),
+            });
+        },
+    });
+};
+export const useUpdateNavigation = (onSuccess) => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    // TODO: nicer cache update
+    const queryClient = useQueryClient();
+    return useMutation({
+        mutationFn: apiClient.update,
+        onSuccess() {
+            queryClient.invalidateQueries({
+                queryKey: apiClient.readAllIndex(),
+            });
+            onSuccess?.();
+        },
+    });
+};
+export const usePurgeNavigation = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useMutation({
+        mutationFn(ids) {
+            if (!ids?.length) {
+                return apiClient.purge({});
+            }
+            return Promise.all(ids.map((id) => apiClient.purge({ id, withLangVersions: true })));
+        },
+    });
+};
+export const useConfig = () => {
+    const fetch = getFetchClient();
+    const apiClient = getApiClient(fetch);
+    return useQuery({
+        queryKey: apiClient.readConfigIndex(),
+        queryFn: apiClient.readConfig,
+    });
+};
+export const useI18nCopyNavigationItemsModal = (onConfirm) => {
+    const [isOpened, setIsOpened] = useState(false);
+    const [sourceLocale, setSourceLocale] = useState(undefined);
+    const onCancel = useCallback(() => {
+        setIsOpened(false);
+    }, [setIsOpened]);
+    const onConfirmWithModalClose = useCallback(() => {
+        if (!sourceLocale) {
+            return;
+        }
+        onConfirm(sourceLocale);
+        setIsOpened(false);
+    }, [onConfirm, sourceLocale]);
+    const modal = useMemo(() => isOpened ? (_jsx(I18nCopyNavigationItemsModal, { onConfirm: onConfirmWithModalClose, onCancel: onCancel })) : null, [isOpened, onConfirmWithModalClose, onCancel]);
+    return useMemo(() => ({
+        setI18nCopyModalOpened: setIsOpened,
+        setI18nCopySourceLocale: setSourceLocale,
+        i18nCopyItemsModal: modal,
+        i18nCopySourceLocale: sourceLocale,
+    }), [setSourceLocale, setIsOpened, modal, sourceLocale]);
+};
+const appendViewId = (item) => {
+    return {
+        ...item,
+        viewId: Math.floor(Math.random() * 1520000),
+        items: item.items?.map(appendViewId),
+    };
+};