@strapi/admin 5.8.1 → 5.10.0

package/dist/admin/chunks/MarketplacePage-BrHNQ8SG.mjs

@@ -0,0 +1,1134 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Popover, Button, Flex, Box, Tag, MultiSelect, MultiSelectOption, Typography, Divider, Tooltip, LinkButton, Grid, Main, SingleSelect, SingleSelectOption, useNotifyAT, Tabs, Searchbar } from '@strapi/design-system';
+import { Filter, Cross, CheckCircle, ExternalLink, Check, Duplicate, Star, Download, Upload } from '@strapi/icons';
+import { GitHub, EmptyDocuments, GlassesSquare } from '@strapi/icons/symbols';
+import { useIntl } from 'react-intl';
+import { y as img, t as useClipboard, b as Layouts, P as Pagination, v as ContentBox } from './index-BUGouNML.mjs';
+import { c as useTracking, a as useNotification, P as Page, b as useTypedSelector, n as useQueryParams, p as useAppInfo } from './Theme-CDaBfQ-7.mjs';
+import { styled } from 'styled-components';
+import pluralize from 'pluralize';
+import * as semver from 'semver';
+import * as qs from 'qs';
+import { useQuery } from 'react-query';
+import 'react-dom/client';
+import 'invariant';
+import 'lodash/isFunction';
+import 'lodash/merge';
+import 'lodash/pick';
+import 'react-router-dom';
+import 'immer';
+import 'react-redux';
+import './useEnterprise-Dy8wMNV5.mjs';
+import './admin-BBS7sDVu.mjs';
+import 'lodash/trimEnd';
+import '@reduxjs/toolkit/query/react';
+import 'lodash/fp/pipe';
+import 'lodash/camelCase';
+import 'yup';
+import 'fractional-indexing';
+import 'lodash/isEqual';
+import 'lodash/omit';
+import 'formik';
+import '@reduxjs/toolkit';
+import 'lodash/throttle';
+import '@radix-ui/react-context';
+import 'lodash/clone';
+import 'lodash/toPath';
+import 'axios';
+import 'lodash/get';
+import 'lodash/set';
+import 'use-context-selector';
+import 'lodash/defaultsDeep';
+
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = React.useState(value);
+    React.useEffect(()=>{
+        const handler = setTimeout(()=>{
+            setDebouncedValue(value);
+        }, delay);
+        return ()=>{
+            clearTimeout(handler);
+        };
+    }, [
+        value,
+        delay
+    ]);
+    return debouncedValue;
+}
+
+const NpmPackagesFilters = ({ handleSelectClear, handleSelectChange, npmPackageType, possibleCategories, possibleCollections, query })=>{
+    const { formatMessage } = useIntl();
+    const handleTagRemove = (tagToRemove, filterType)=>{
+        const update = {
+            [filterType]: (query[filterType] ?? []).filter((previousTag)=>previousTag !== tagToRemove)
+        };
+        handleSelectChange(update);
+    };
+    return /*#__PURE__*/ jsxs(Popover.Root, {
+        children: [
+            /*#__PURE__*/ jsx(Popover.Trigger, {
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "tertiary",
+                    startIcon: /*#__PURE__*/ jsx(Filter, {}),
+                    children: formatMessage({
+                        id: 'app.utils.filters',
+                        defaultMessage: 'Filters'
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(Popover.Content, {
+                sideOffset: 4,
+                children: /*#__PURE__*/ jsxs(Flex, {
+                    padding: 3,
+                    direction: "column",
+                    alignItems: "stretch",
+                    gap: 1,
+                    children: [
+                        /*#__PURE__*/ jsx(FilterSelect, {
+                            message: formatMessage({
+                                id: 'admin.pages.MarketPlacePage.filters.collections',
+                                defaultMessage: 'Collections'
+                            }),
+                            value: query?.collections || [],
+                            onChange: (newCollections)=>{
+                                const update = {
+                                    collections: newCollections
+                                };
+                                handleSelectChange(update);
+                            },
+                            onClear: ()=>handleSelectClear('collections'),
+                            possibleFilters: possibleCollections,
+                            customizeContent: (values)=>formatMessage({
+                                    id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                                    defaultMessage: '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected'
+                                }, {
+                                    count: values?.length ?? 0
+                                })
+                        }),
+                        npmPackageType === 'plugin' && /*#__PURE__*/ jsx(FilterSelect, {
+                            message: formatMessage({
+                                id: 'admin.pages.MarketPlacePage.filters.categories',
+                                defaultMessage: 'Categories'
+                            }),
+                            value: query?.categories || [],
+                            onChange: (newCategories)=>{
+                                const update = {
+                                    categories: newCategories
+                                };
+                                handleSelectChange(update);
+                            },
+                            onClear: ()=>handleSelectClear('categories'),
+                            possibleFilters: possibleCategories,
+                            customizeContent: (values)=>formatMessage({
+                                    id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
+                                    defaultMessage: '{count, plural, =0 {No categories} one {# category} other {# categories}} selected'
+                                }, {
+                                    count: values?.length ?? 0
+                                })
+                        })
+                    ]
+                })
+            }),
+            query.collections?.map((collection)=>/*#__PURE__*/ jsx(Box, {
+                    padding: 1,
+                    children: /*#__PURE__*/ jsx(Tag, {
+                        icon: /*#__PURE__*/ jsx(Cross, {}),
+                        onClick: ()=>handleTagRemove(collection, 'collections'),
+                        children: collection
+                    })
+                }, collection)),
+            npmPackageType === 'plugin' && query.categories?.map((category)=>/*#__PURE__*/ jsx(Box, {
+                    padding: 1,
+                    children: /*#__PURE__*/ jsx(Tag, {
+                        icon: /*#__PURE__*/ jsx(Cross, {}),
+                        onClick: ()=>handleTagRemove(category, 'categories'),
+                        children: category
+                    })
+                }, category))
+        ]
+    });
+};
+const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, customizeContent })=>{
+    return /*#__PURE__*/ jsx(MultiSelect, {
+        "data-testid": `${message}-button`,
+        "aria-label": message,
+        placeholder: message,
+        onChange: onChange,
+        onClear: onClear,
+        value: value,
+        customizeContent: customizeContent,
+        children: Object.entries(possibleFilters).map(([filterName, count])=>{
+            return /*#__PURE__*/ jsx(MultiSelectOption, {
+                "data-testid": `${filterName}-${count}`,
+                value: filterName,
+                children: `${filterName} (${count})`
+            }, filterName);
+        })
+    });
+};
+
+// Custom component to have an ellipsis after the 2nd line
+const EllipsisText = styled(Typography)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+const NpmPackageCard = ({ npmPackage, isInstalled, useYarn, isInDevelopmentMode, npmPackageType, strapiAppVersion })=>{
+    const { attributes } = npmPackage;
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const commandToCopy = useYarn ? `yarn add ${attributes.npmPackageName}` : `npm install ${attributes.npmPackageName}`;
+    const madeByStrapiMessage = formatMessage({
+        id: 'admin.pages.MarketPlacePage.plugin.tooltip.madeByStrapi',
+        defaultMessage: 'Made by Strapi'
+    });
+    const npmPackageHref = `https://market.strapi.io/${pluralize.plural(npmPackageType)}/${attributes.slug}`;
+    const versionRange = semver.validRange(attributes.strapiVersion);
+    const isCompatible = versionRange ? semver.satisfies(strapiAppVersion ?? '', versionRange) : false;
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        justifyContent: "space-between",
+        paddingTop: 4,
+        paddingRight: 4,
+        paddingBottom: 4,
+        paddingLeft: 4,
+        hasRadius: true,
+        background: "neutral0",
+        shadow: "tableShadow",
+        height: "100%",
+        alignItems: "normal",
+        "data-testid": "npm-package-card",
+        children: [
+            /*#__PURE__*/ jsxs(Box, {
+                children: [
+                    /*#__PURE__*/ jsxs(Flex, {
+                        direction: "row",
+                        justifyContent: "space-between",
+                        alignItems: "flex-start",
+                        children: [
+                            /*#__PURE__*/ jsx(Box, {
+                                tag: "img",
+                                src: attributes.logo.url,
+                                alt: `${attributes.name} logo`,
+                                hasRadius: true,
+                                width: 11,
+                                height: 11
+                            }),
+                            /*#__PURE__*/ jsx(PackageStats, {
+                                githubStars: attributes.githubStars,
+                                npmDownloads: attributes.npmDownloads,
+                                npmPackageType: npmPackageType
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        paddingTop: 4,
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            tag: "h3",
+                            variant: "delta",
+                            children: /*#__PURE__*/ jsxs(Flex, {
+                                alignItems: "center",
+                                gap: attributes.validated && !attributes.madeByStrapi ? 2 : 1,
+                                children: [
+                                    attributes.name,
+                                    attributes.validated && !attributes.madeByStrapi && /*#__PURE__*/ jsx(Tooltip, {
+                                        description: formatMessage({
+                                            id: 'admin.pages.MarketPlacePage.plugin.tooltip.verified',
+                                            defaultMessage: 'Plugin verified by Strapi'
+                                        }),
+                                        children: /*#__PURE__*/ jsx(CheckCircle, {
+                                            fill: "success600"
+                                        })
+                                    }),
+                                    attributes.madeByStrapi && /*#__PURE__*/ jsx(Tooltip, {
+                                        description: madeByStrapiMessage,
+                                        children: /*#__PURE__*/ jsx(Box, {
+                                            tag: "img",
+                                            src: img,
+                                            alt: madeByStrapiMessage,
+                                            width: 6,
+                                            height: "auto"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        paddingTop: 2,
+                        children: /*#__PURE__*/ jsx(EllipsisText, {
+                            tag: "p",
+                            variant: "omega",
+                            textColor: "neutral600",
+                            children: attributes.description
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                gap: 2,
+                style: {
+                    alignSelf: 'flex-end'
+                },
+                paddingTop: 6,
+                children: [
+                    /*#__PURE__*/ jsx(LinkButton, {
+                        size: "S",
+                        href: npmPackageHref,
+                        isExternal: true,
+                        endIcon: /*#__PURE__*/ jsx(ExternalLink, {}),
+                        "aria-label": formatMessage({
+                            id: 'admin.pages.MarketPlacePage.plugin.info.label',
+                            defaultMessage: 'Learn more about {pluginName}'
+                        }, {
+                            pluginName: attributes.name
+                        }),
+                        variant: "tertiary",
+                        onClick: ()=>trackUsage('didPluginLearnMore'),
+                        children: formatMessage({
+                            id: 'admin.pages.MarketPlacePage.plugin.info.text',
+                            defaultMessage: 'More'
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(InstallPluginButton, {
+                        isInstalled: isInstalled,
+                        isInDevelopmentMode: isInDevelopmentMode,
+                        isCompatible: isCompatible,
+                        commandToCopy: commandToCopy,
+                        strapiAppVersion: strapiAppVersion,
+                        strapiPeerDepVersion: attributes.strapiVersion,
+                        pluginName: attributes.name
+                    })
+                ]
+            })
+        ]
+    });
+};
+const InstallPluginButton = ({ isInstalled, isInDevelopmentMode, isCompatible, commandToCopy, strapiAppVersion, strapiPeerDepVersion, pluginName })=>{
+    const { toggleNotification } = useNotification();
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const { copy } = useClipboard();
+    const handleCopy = async ()=>{
+        const didCopy = await copy(commandToCopy);
+        if (didCopy) {
+            trackUsage('willInstallPlugin');
+            toggleNotification({
+                type: 'success',
+                message: formatMessage({
+                    id: 'admin.pages.MarketPlacePage.plugin.copy.success'
+                })
+            });
+        }
+    };
+    // Already installed
+    if (isInstalled) {
+        return /*#__PURE__*/ jsxs(Flex, {
+            gap: 2,
+            paddingLeft: 4,
+            children: [
+                /*#__PURE__*/ jsx(Check, {
+                    width: "1.2rem",
+                    height: "1.2rem",
+                    color: "success600"
+                }),
+                /*#__PURE__*/ jsx(Typography, {
+                    variant: "omega",
+                    textColor: "success600",
+                    fontWeight: "bold",
+                    children: formatMessage({
+                        id: 'admin.pages.MarketPlacePage.plugin.installed',
+                        defaultMessage: 'Installed'
+                    })
+                })
+            ]
+        });
+    }
+    // In development, show install button
+    if (isInDevelopmentMode && isCompatible !== false) {
+        return /*#__PURE__*/ jsx(CardButton, {
+            strapiAppVersion: strapiAppVersion,
+            strapiPeerDepVersion: strapiPeerDepVersion,
+            handleCopy: handleCopy,
+            pluginName: pluginName
+        });
+    }
+    // Not in development and plugin not installed already. Show nothing
+    return null;
+};
+const CardButton = ({ strapiPeerDepVersion, strapiAppVersion, handleCopy, pluginName })=>{
+    const { formatMessage } = useIntl();
+    const versionRange = semver.validRange(strapiPeerDepVersion);
+    const isCompatible = semver.satisfies(strapiAppVersion ?? '', versionRange ?? '');
+    const installMessage = formatMessage({
+        id: 'admin.pages.MarketPlacePage.plugin.copy',
+        defaultMessage: 'Copy install command'
+    });
+    // Only plugins receive a strapiAppVersion
+    if (strapiAppVersion) {
+        if (!versionRange || !isCompatible) {
+            return /*#__PURE__*/ jsx(Tooltip, {
+                "data-testid": `tooltip-${pluginName}`,
+                label: formatMessage({
+                    id: 'admin.pages.MarketPlacePage.plugin.version',
+                    defaultMessage: 'Update your Strapi version: "{strapiAppVersion}" to: "{versionRange}"'
+                }, {
+                    strapiAppVersion,
+                    versionRange
+                }),
+                children: /*#__PURE__*/ jsx("span", {
+                    children: /*#__PURE__*/ jsx(Button, {
+                        size: "S",
+                        startIcon: /*#__PURE__*/ jsx(Duplicate, {}),
+                        variant: "secondary",
+                        onClick: handleCopy,
+                        disabled: !isCompatible,
+                        children: installMessage
+                    })
+                })
+            });
+        }
+    }
+    return /*#__PURE__*/ jsx(Button, {
+        size: "S",
+        startIcon: /*#__PURE__*/ jsx(Duplicate, {}),
+        variant: "secondary",
+        onClick: handleCopy,
+        children: installMessage
+    });
+};
+const PackageStats = ({ githubStars = 0, npmDownloads = 0, npmPackageType })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsxs(Flex, {
+        gap: 1,
+        children: [
+            !!githubStars && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(GitHub, {
+                        height: "1.2rem",
+                        width: "1.2rem",
+                        "aria-hidden": true
+                    }),
+                    /*#__PURE__*/ jsx(Star, {
+                        height: "1.2rem",
+                        width: "1.2rem",
+                        fill: "warning500",
+                        "aria-hidden": true
+                    }),
+                    /*#__PURE__*/ jsx("p", {
+                        "aria-label": formatMessage({
+                            id: `admin.pages.MarketPlacePage.${npmPackageType}.githubStars`,
+                            defaultMessage: `This {package} was starred {starsCount} on GitHub`
+                        }, {
+                            starsCount: githubStars,
+                            package: npmPackageType
+                        }),
+                        children: /*#__PURE__*/ jsx(Typography, {
+                            variant: "pi",
+                            textColor: "neutral800",
+                            children: githubStars
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(VerticalDivider, {})
+                ]
+            }),
+            /*#__PURE__*/ jsx(Download, {
+                height: "1.2rem",
+                width: "1.2rem",
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ jsx("p", {
+                "aria-label": formatMessage({
+                    id: `admin.pages.MarketPlacePage.${npmPackageType}.downloads`,
+                    defaultMessage: `This {package} has {downloadsCount} weekly downloads`
+                }, {
+                    downloadsCount: npmDownloads,
+                    package: npmPackageType
+                }),
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "pi",
+                    textColor: "neutral800",
+                    children: npmDownloads
+                })
+            })
+        ]
+    });
+};
+const VerticalDivider = styled(Divider)`
+  width: 1.2rem;
+  transform: rotate(90deg);
+`;
+
+const NpmPackagesGrid = ({ status, npmPackages = [], installedPackageNames = [], useYarn, isInDevelopmentMode, npmPackageType, strapiAppVersion, debouncedSearch })=>{
+    const { formatMessage } = useIntl();
+    if (status === 'error') {
+        return /*#__PURE__*/ jsx(Page.Error, {});
+    }
+    if (status === 'loading') {
+        return /*#__PURE__*/ jsx(Page.Loading, {});
+    }
+    const emptySearchMessage = formatMessage({
+        id: 'admin.pages.MarketPlacePage.search.empty',
+        defaultMessage: 'No result for "{target}"'
+    }, {
+        target: debouncedSearch
+    });
+    if (npmPackages.length === 0) {
+        return /*#__PURE__*/ jsxs(Box, {
+            position: "relative",
+            children: [
+                /*#__PURE__*/ jsx(Layouts.Grid, {
+                    size: "M",
+                    children: Array(12).fill(null).map((_, idx)=>/*#__PURE__*/ jsx(EmptyPluginCard, {
+                            height: "234px",
+                            hasRadius: true
+                        }, idx))
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    position: "absolute",
+                    top: 11,
+                    width: "100%",
+                    children: /*#__PURE__*/ jsxs(Flex, {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        direction: "column",
+                        children: [
+                            /*#__PURE__*/ jsx(EmptyDocuments, {
+                                width: "160px",
+                                height: "88px"
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                paddingTop: 6,
+                                children: /*#__PURE__*/ jsx(Typography, {
+                                    variant: "delta",
+                                    tag: "p",
+                                    textColor: "neutral600",
+                                    children: emptySearchMessage
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsx(Grid.Root, {
+        gap: 4,
+        children: npmPackages.map((npmPackage)=>/*#__PURE__*/ jsx(Grid.Item, {
+                col: 4,
+                s: 6,
+                xs: 12,
+                style: {
+                    height: '100%'
+                },
+                direction: "column",
+                alignItems: "stretch",
+                children: /*#__PURE__*/ jsx(NpmPackageCard, {
+                    npmPackage: npmPackage,
+                    isInstalled: installedPackageNames.includes(npmPackage.attributes.npmPackageName),
+                    useYarn: useYarn,
+                    isInDevelopmentMode: isInDevelopmentMode,
+                    npmPackageType: npmPackageType,
+                    strapiAppVersion: strapiAppVersion
+                })
+            }, npmPackage.id))
+    });
+};
+const EmptyPluginCard = styled(Box)`
+  background: ${({ theme })=>`linear-gradient(180deg, rgba(234, 234, 239, 0) 0%, ${theme.colors.neutral150} 100%)`};
+  opacity: 0.33;
+`;
+
+const PageHeader = ({ isOnline, npmPackageType = 'plugin' })=>{
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const tracking = npmPackageType === 'provider' ? 'didSubmitProvider' : 'didSubmitPlugin';
+    return /*#__PURE__*/ jsx(Layouts.Header, {
+        title: formatMessage({
+            id: 'global.marketplace',
+            defaultMessage: 'Marketplace'
+        }),
+        subtitle: formatMessage({
+            id: 'admin.pages.MarketPlacePage.subtitle',
+            defaultMessage: 'Get more out of Strapi'
+        }),
+        primaryAction: isOnline && /*#__PURE__*/ jsx(LinkButton, {
+            startIcon: /*#__PURE__*/ jsx(Upload, {}),
+            variant: "tertiary",
+            href: `https://market.strapi.io/submit-${npmPackageType}`,
+            onClick: ()=>trackUsage(tracking),
+            isExternal: true,
+            children: formatMessage({
+                id: `admin.pages.MarketPlacePage.submit.${npmPackageType}.link`,
+                defaultMessage: `Submit ${npmPackageType}`
+            })
+        })
+    });
+};
+
+const OfflineLayout = ()=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(Layouts.Root, {
+        children: /*#__PURE__*/ jsxs(Main, {
+            children: [
+                /*#__PURE__*/ jsx(PageHeader, {}),
+                /*#__PURE__*/ jsxs(Flex, {
+                    width: "100%",
+                    direction: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    paddingTop: `12rem`,
+                    children: [
+                        /*#__PURE__*/ jsx(Box, {
+                            paddingBottom: 2,
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                textColor: "neutral700",
+                                variant: "alpha",
+                                children: formatMessage({
+                                    id: 'admin.pages.MarketPlacePage.offline.title',
+                                    defaultMessage: 'You are offline'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Box, {
+                            paddingBottom: 6,
+                            children: /*#__PURE__*/ jsx(Typography, {
+                                textColor: "neutral700",
+                                variant: "epsilon",
+                                children: formatMessage({
+                                    id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                                    defaultMessage: 'You need to be connected to the Internet to access Strapi Market.'
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs("svg", {
+                            width: "88",
+                            height: "88",
+                            viewBox: "0 0 88 88",
+                            fill: "none",
+                            xmlns: "http://www.w3.org/2000/svg",
+                            children: [
+                                /*#__PURE__*/ jsx("rect", {
+                                    x: ".5",
+                                    y: ".5",
+                                    width: "87",
+                                    height: "87",
+                                    rx: "43.5",
+                                    fill: "#F0F0FF"
+                                }),
+                                /*#__PURE__*/ jsx("path", {
+                                    d: "M34 39.3h-4c-2.6 0-4.7 1-6.6 2.8a9 9 0 0 0-2.7 6.6 9 9 0 0 0 2.7 6.6A9 9 0 0 0 30 58h22.8L34 39.3Zm-11-11 3-3 39 39-3 3-4.7-4.6H30a13.8 13.8 0 0 1-14-14c0-3.8 1.3-7 4-9.7 2.6-2.7 5.7-4.2 9.5-4.3L23 28.2Zm38.2 11.1c3 .2 5.5 1.5 7.6 3.7A11 11 0 0 1 72 51c0 4-1.6 7.2-5 9.5l-3.3-3.4a6.5 6.5 0 0 0 3.6-6.1c0-1.9-.7-3.5-2-5-1.5-1.3-3.1-2-5-2h-3.5v-1.2c0-3.6-1.2-6.6-3.7-9a13 13 0 0 0-15-2.3L34.6 28a17 17 0 0 1 20.3 1.5c3.5 2.7 5.5 6 6.3 10Z",
+                                    fill: "#4945FF"
+                                }),
+                                /*#__PURE__*/ jsx("rect", {
+                                    x: ".5",
+                                    y: ".5",
+                                    width: "87",
+                                    height: "87",
+                                    rx: "43.5",
+                                    stroke: "#D9D8FF"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+const SORT_TYPES = {
+    'name:asc': {
+        selected: {
+            id: 'admin.pages.MarketPlacePage.sort.alphabetical.selected',
+            defaultMessage: 'Sort by alphabetical order'
+        },
+        option: {
+            id: 'admin.pages.MarketPlacePage.sort.alphabetical',
+            defaultMessage: 'Alphabetical order'
+        }
+    },
+    'submissionDate:desc': {
+        selected: {
+            id: 'admin.pages.MarketPlacePage.sort.newest.selected',
+            defaultMessage: 'Sort by newest'
+        },
+        option: {
+            id: 'admin.pages.MarketPlacePage.sort.newest',
+            defaultMessage: 'Newest'
+        }
+    },
+    'githubStars:desc': {
+        selected: {
+            id: 'admin.pages.MarketPlacePage.sort.githubStars.selected',
+            defaultMessage: 'Sort by GitHub stars'
+        },
+        option: {
+            id: 'admin.pages.MarketPlacePage.sort.githubStars',
+            defaultMessage: 'Number of GitHub stars'
+        }
+    },
+    'npmDownloads:desc': {
+        selected: {
+            id: 'admin.pages.MarketPlacePage.sort.npmDownloads.selected',
+            defaultMessage: 'Sort by npm downloads'
+        },
+        option: {
+            id: 'admin.pages.MarketPlacePage.sort.npmDownloads',
+            defaultMessage: 'Number of downloads'
+        }
+    }
+};
+const SortSelect = ({ sortQuery, handleSelectChange })=>{
+    const { formatMessage } = useIntl();
+    return /*#__PURE__*/ jsx(SelectWrapper, {
+        children: /*#__PURE__*/ jsx(SingleSelect, {
+            value: sortQuery,
+            customizeContent: ()=>formatMessage(SORT_TYPES[sortQuery].selected),
+            onChange: (sortName)=>{
+                // @ts-expect-error – in V2 design-system we'll only ever return strings.
+                handleSelectChange({
+                    sort: sortName
+                });
+            },
+            "aria-label": formatMessage({
+                id: 'admin.pages.MarketPlacePage.sort.label',
+                defaultMessage: 'Sort by'
+            }),
+            size: "S",
+            children: Object.entries(SORT_TYPES).map(([sortName, messages])=>{
+                return /*#__PURE__*/ jsx(SingleSelectOption, {
+                    value: sortName,
+                    children: formatMessage(messages.option)
+                }, sortName);
+            })
+        })
+    });
+};
+const SelectWrapper = styled(Box)`
+  font-weight: ${({ theme })=>theme.fontWeights.semiBold};
+
+  span {
+    font-size: ${({ theme })=>theme.fontSizes[1]};
+  }
+`;
+
+const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
+function useMarketplaceData({ npmPackageType, debouncedSearch, query, tabQuery, strapiVersion }) {
+    const { notifyStatus } = useNotifyAT();
+    const { formatMessage } = useIntl();
+    const { toggleNotification } = useNotification();
+    const marketplaceTitle = formatMessage({
+        id: 'global.marketplace',
+        defaultMessage: 'Marketplace'
+    });
+    const notifyMarketplaceLoad = ()=>{
+        notifyStatus(formatMessage({
+            id: 'app.utils.notify.data-loaded',
+            defaultMessage: 'The {target} has loaded'
+        }, {
+            target: marketplaceTitle
+        }));
+    };
+    const paginationParams = {
+        page: query?.page || 1,
+        pageSize: query?.pageSize || 24
+    };
+    const pluginParams = {
+        ...tabQuery.plugin,
+        pagination: paginationParams,
+        search: debouncedSearch,
+        version: strapiVersion
+    };
+    const { data: pluginsResponse, status: pluginsStatus } = useQuery([
+        'marketplace',
+        'plugins',
+        pluginParams
+    ], async ()=>{
+        try {
+            const queryString = qs.stringify(pluginParams);
+            const res = await fetch(`${MARKETPLACE_API_URL}/plugins?${queryString}`);
+            if (!res.ok) {
+                throw new Error('Failed to fetch marketplace plugins.');
+            }
+            const data = await res.json();
+            return data;
+        } catch (error) {
+        // silence
+        }
+        return null;
+    }, {
+        onSuccess () {
+            notifyMarketplaceLoad();
+        },
+        onError () {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occured'
+                })
+            });
+        }
+    });
+    const providerParams = {
+        ...tabQuery.provider,
+        pagination: paginationParams,
+        search: debouncedSearch,
+        version: strapiVersion
+    };
+    const { data: providersResponse, status: providersStatus } = useQuery([
+        'marketplace',
+        'providers',
+        providerParams
+    ], async ()=>{
+        const queryString = qs.stringify(providerParams);
+        const res = await fetch(`${MARKETPLACE_API_URL}/providers?${queryString}`);
+        if (!res.ok) {
+            throw new Error('Failed to fetch marketplace providers.');
+        }
+        const data = await res.json();
+        return data;
+    }, {
+        onSuccess () {
+            notifyMarketplaceLoad();
+        },
+        onError () {
+            toggleNotification({
+                type: 'danger',
+                message: formatMessage({
+                    id: 'notification.error',
+                    defaultMessage: 'An error occured'
+                })
+            });
+        }
+    });
+    const npmPackageTypeResponse = npmPackageType === 'plugin' ? pluginsResponse : providersResponse;
+    const possibleCollections = npmPackageTypeResponse?.meta.collections ?? {};
+    const possibleCategories = pluginsResponse?.meta.categories ?? {};
+    const { pagination } = npmPackageTypeResponse?.meta ?? {};
+    return {
+        pluginsResponse,
+        providersResponse,
+        pluginsStatus,
+        providersStatus,
+        possibleCollections,
+        possibleCategories,
+        pagination
+    };
+}
+
+/**
+ * For more details about this hook see:
+ * https://www.30secondsofcode.org/react/s/use-navigator-on-line
+ */ const useNavigatorOnline = ()=>{
+    const onlineStatus = typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
+    const [isOnline, setIsOnline] = React.useState(onlineStatus);
+    const setOnline = ()=>setIsOnline(true);
+    const setOffline = ()=>setIsOnline(false);
+    React.useEffect(()=>{
+        window.addEventListener('online', setOnline);
+        window.addEventListener('offline', setOffline);
+        return ()=>{
+            window.removeEventListener('online', setOnline);
+            window.removeEventListener('offline', setOffline);
+        };
+    }, []);
+    return isOnline;
+};
+
+const PLUGIN = 'plugin';
+const PROVIDER = 'provider';
+const MarketplacePage = ()=>{
+    const { formatMessage } = useIntl();
+    const { trackUsage } = useTracking();
+    const { toggleNotification } = useNotification();
+    const [{ query }, setQuery] = useQueryParams();
+    const debouncedSearch = useDebounce(query?.search, 500) || '';
+    const { autoReload: isInDevelopmentMode, dependencies, useYarn, strapiVersion } = useAppInfo('MarketplacePage', (state)=>state);
+    const isOnline = useNavigatorOnline();
+    const npmPackageType = query?.npmPackageType || PLUGIN;
+    const [tabQuery, setTabQuery] = React.useState({
+        plugin: npmPackageType === PLUGIN ? {
+            ...query
+        } : {},
+        provider: npmPackageType === PROVIDER ? {
+            ...query
+        } : {}
+    });
+    React.useEffect(()=>{
+        trackUsage('didGoToMarketplace');
+    }, [
+        trackUsage
+    ]);
+    React.useEffect(()=>{
+        if (!isInDevelopmentMode) {
+            toggleNotification({
+                type: 'info',
+                message: formatMessage({
+                    id: 'admin.pages.MarketPlacePage.production',
+                    defaultMessage: 'Manage plugins from the development environment'
+                })
+            });
+        }
+    }, [
+        toggleNotification,
+        isInDevelopmentMode,
+        formatMessage
+    ]);
+    const { pluginsResponse, providersResponse, pluginsStatus, providersStatus, possibleCollections, possibleCategories, pagination } = useMarketplaceData({
+        npmPackageType,
+        debouncedSearch,
+        query,
+        tabQuery,
+        strapiVersion
+    });
+    if (!isOnline) {
+        return /*#__PURE__*/ jsx(OfflineLayout, {});
+    }
+    const handleTabChange = (tab)=>{
+        const selectedTab = tab === PLUGIN || tab === PROVIDER ? tab : PLUGIN;
+        const hasTabQuery = tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length;
+        if (hasTabQuery) {
+            setQuery({
+                // Keep filters and search
+                ...tabQuery[selectedTab],
+                search: query?.search || '',
+                // Set tab and reset page
+                npmPackageType: selectedTab,
+                page: 1
+            });
+        } else {
+            setQuery({
+                // Set tab
+                npmPackageType: selectedTab,
+                // Clear filters
+                collections: [],
+                categories: [],
+                sort: 'name:asc',
+                page: 1,
+                // Keep search
+                search: query?.search || ''
+            });
+        }
+    };
+    const handleSelectChange = (update)=>{
+        setQuery({
+            ...update,
+            page: 1
+        });
+        setTabQuery((prev)=>({
+                ...prev,
+                [npmPackageType]: {
+                    ...prev[npmPackageType],
+                    ...update
+                }
+            }));
+    };
+    const handleSelectClear = (filterType)=>{
+        setQuery({
+            [filterType]: [],
+            page: undefined
+        }, 'remove');
+        setTabQuery((prev)=>({
+                ...prev,
+                [npmPackageType]: {}
+            }));
+    };
+    const handleSortSelectChange = ({ sort })=>// @ts-expect-error - this is a narrowing issue.
+        handleSelectChange({
+            sort
+        });
+    // Check if plugins and providers are installed already
+    const installedPackageNames = Object.keys(dependencies ?? {});
+    return /*#__PURE__*/ jsx(Layouts.Root, {
+        children: /*#__PURE__*/ jsxs(Page.Main, {
+            children: [
+                /*#__PURE__*/ jsx(Page.Title, {
+                    children: formatMessage({
+                        id: 'admin.pages.MarketPlacePage.head',
+                        defaultMessage: 'Marketplace - Plugins'
+                    })
+                }),
+                /*#__PURE__*/ jsx(PageHeader, {
+                    isOnline: isOnline,
+                    npmPackageType: npmPackageType
+                }),
+                /*#__PURE__*/ jsx(Layouts.Content, {
+                    children: /*#__PURE__*/ jsxs(Tabs.Root, {
+                        variant: "simple",
+                        onValueChange: handleTabChange,
+                        value: npmPackageType,
+                        children: [
+                            /*#__PURE__*/ jsxs(Flex, {
+                                justifyContent: "space-between",
+                                paddingBottom: 4,
+                                children: [
+                                    /*#__PURE__*/ jsxs(Tabs.List, {
+                                        "aria-label": formatMessage({
+                                            id: 'admin.pages.MarketPlacePage.tab-group.label',
+                                            defaultMessage: 'Plugins and Providers for Strapi'
+                                        }),
+                                        children: [
+                                            /*#__PURE__*/ jsxs(Tabs.Trigger, {
+                                                value: PLUGIN,
+                                                children: [
+                                                    formatMessage({
+                                                        id: 'admin.pages.MarketPlacePage.plugins',
+                                                        defaultMessage: 'Plugins'
+                                                    }),
+                                                    ' ',
+                                                    pluginsResponse ? `(${pluginsResponse.meta.pagination.total})` : '...'
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs(Tabs.Trigger, {
+                                                value: PROVIDER,
+                                                children: [
+                                                    formatMessage({
+                                                        id: 'admin.pages.MarketPlacePage.providers',
+                                                        defaultMessage: 'Providers'
+                                                    }),
+                                                    ' ',
+                                                    providersResponse ? `(${providersResponse.meta.pagination.total})` : '...'
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Box, {
+                                        width: "25%",
+                                        children: /*#__PURE__*/ jsx(Searchbar, {
+                                            name: "searchbar",
+                                            onClear: ()=>setQuery({
+                                                    search: '',
+                                                    page: 1
+                                                }),
+                                            value: query?.search,
+                                            onChange: (e)=>setQuery({
+                                                    search: e.target.value,
+                                                    page: 1
+                                                }),
+                                            clearLabel: formatMessage({
+                                                id: 'admin.pages.MarketPlacePage.search.clear',
+                                                defaultMessage: 'Clear the search'
+                                            }),
+                                            placeholder: formatMessage({
+                                                id: 'admin.pages.MarketPlacePage.search.placeholder',
+                                                defaultMessage: 'Search'
+                                            }),
+                                            children: formatMessage({
+                                                id: 'admin.pages.MarketPlacePage.search.placeholder',
+                                                defaultMessage: 'Search'
+                                            })
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Flex, {
+                                paddingBottom: 4,
+                                gap: 2,
+                                children: [
+                                    /*#__PURE__*/ jsx(SortSelect, {
+                                        sortQuery: query?.sort || 'name:asc',
+                                        handleSelectChange: handleSortSelectChange
+                                    }),
+                                    /*#__PURE__*/ jsx(NpmPackagesFilters, {
+                                        npmPackageType: npmPackageType,
+                                        possibleCollections: possibleCollections,
+                                        possibleCategories: possibleCategories,
+                                        query: query || {},
+                                        handleSelectChange: handleSelectChange,
+                                        handleSelectClear: handleSelectClear
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Tabs.Content, {
+                                value: PLUGIN,
+                                children: /*#__PURE__*/ jsx(NpmPackagesGrid, {
+                                    npmPackages: pluginsResponse?.data,
+                                    status: pluginsStatus,
+                                    installedPackageNames: installedPackageNames,
+                                    useYarn: useYarn,
+                                    isInDevelopmentMode: isInDevelopmentMode,
+                                    npmPackageType: "plugin",
+                                    strapiAppVersion: strapiVersion,
+                                    debouncedSearch: debouncedSearch
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Tabs.Content, {
+                                value: PROVIDER,
+                                children: /*#__PURE__*/ jsx(NpmPackagesGrid, {
+                                    npmPackages: providersResponse?.data,
+                                    status: providersStatus,
+                                    installedPackageNames: installedPackageNames,
+                                    useYarn: useYarn,
+                                    isInDevelopmentMode: isInDevelopmentMode,
+                                    npmPackageType: "provider",
+                                    debouncedSearch: debouncedSearch
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs(Pagination.Root, {
+                                ...pagination,
+                                defaultPageSize: 24,
+                                children: [
+                                    /*#__PURE__*/ jsx(Pagination.PageSize, {
+                                        options: [
+                                            '12',
+                                            '24',
+                                            '50',
+                                            '100'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(Pagination.Links, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                paddingTop: 8,
+                                children: /*#__PURE__*/ jsx("a", {
+                                    href: "https://strapi.canny.io/plugin-requests",
+                                    target: "_blank",
+                                    rel: "noopener noreferrer nofollow",
+                                    style: {
+                                        textDecoration: 'none'
+                                    },
+                                    onClick: ()=>trackUsage('didMissMarketplacePlugin'),
+                                    children: /*#__PURE__*/ jsx(ContentBox, {
+                                        title: formatMessage({
+                                            id: 'admin.pages.MarketPlacePage.missingPlugin.title',
+                                            defaultMessage: 'Documentation'
+                                        }),
+                                        subtitle: formatMessage({
+                                            id: 'admin.pages.MarketPlacePage.missingPlugin.description',
+                                            defaultMessage: "Tell us what plugin you are looking for and we'll let our community plugin developers know in case they are in search for inspiration!"
+                                        }),
+                                        icon: /*#__PURE__*/ jsx(GlassesSquare, {}),
+                                        iconBackground: "alternative100",
+                                        endAction: /*#__PURE__*/ jsx(ExternalLink, {
+                                            fill: "neutral600",
+                                            width: "1.2rem",
+                                            height: "1.2rem",
+                                            style: {
+                                                marginLeft: '0.8rem'
+                                            }
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+};
+const ProtectedMarketplacePage = ()=>{
+    const permissions = useTypedSelector((state)=>state.admin_app.permissions.marketplace?.main);
+    return /*#__PURE__*/ jsx(Page.Protect, {
+        permissions: permissions,
+        children: /*#__PURE__*/ jsx(MarketplacePage, {})
+    });
+};
+
+export { MarketplacePage, ProtectedMarketplacePage };
+//# sourceMappingURL=MarketplacePage-BrHNQ8SG.mjs.map