diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js
index a90ed7863c..3bf33beac6 100644
--- a/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js
+++ b/packages/core/admin/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js
@@ -1,10 +1,12 @@
import axios from 'axios';
+import qs from 'qs';
const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
const fetchMarketplacePlugins = async (params = {}) => {
const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
params,
+ paramsSerializer: (params) => qs.stringify(params),
});
// Only keep v4 plugins
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js
new file mode 100644
index 0000000000..a6ad08681e
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesPagination/index.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { PaginationURLQuery, PageSizeURLQuery } from '@strapi/helper-plugin';
+
+const NpmPackagesPagination = ({ pagination }) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+NpmPackagesPagination.propTypes = {
+ pagination: PropTypes.shape({
+ page: PropTypes.number.isRequired,
+ pageCount: PropTypes.number.isRequired,
+ pageSize: PropTypes.number.isRequired,
+ total: PropTypes.number.isRequired,
+ }).isRequired,
+};
+
+export default NpmPackagesPagination;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index be0898093b..6cc5d8a4a0 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -39,6 +39,7 @@ import MissingPluginBanner from './components/MissingPluginBanner';
import NpmPackagesGrid from './components/NpmPackagesGrid';
import SortSelect from './components/SortSelect';
import NpmPackagesFilters from './components/NpmPackagesFilters';
+import NpmPackagesPagination from './components/NpmPackagesPagination';
const matchSearch = (npmPackages, search) => {
return matchSorter(npmPackages, search, {
@@ -67,6 +68,11 @@ const MarketPlacePage = () => {
const npmPackageType = query?.npmPackageType || 'plugin';
+ const paginationParams = {
+ page: query?.page || 1,
+ pageSize: query?.pageSize || 24,
+ };
+
const [tabQuery, setTabQuery] = useState({
plugin: npmPackageType === 'plugin' ? { ...query } : {},
provider: npmPackageType === 'provider' ? { ...query } : {},
@@ -92,10 +98,16 @@ const MarketPlacePage = () => {
};
const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } =
- useFetchMarketplaceProviders(notifyMarketplaceLoad, tabQuery.provider);
+ useFetchMarketplaceProviders(notifyMarketplaceLoad, {
+ ...tabQuery.provider,
+ pagination: paginationParams,
+ });
const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } =
- useFetchMarketplacePlugins(notifyMarketplaceLoad, tabQuery.plugin);
+ useFetchMarketplacePlugins(notifyMarketplaceLoad, {
+ ...tabQuery.plugin,
+ pagination: paginationParams,
+ });
const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading');
@@ -192,7 +204,7 @@ const MarketPlacePage = () => {
const hasTabQuery = tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length;
if (hasTabQuery) {
- setQuery({ ...tabQuery[selectedTab], npmPackageType: selectedTab });
+ setQuery({ ...tabQuery[selectedTab], npmPackageType: selectedTab, page: 1 });
} else {
setQuery({
npmPackageType: selectedTab,
@@ -200,6 +212,7 @@ const MarketPlacePage = () => {
collections: [],
categories: [],
sort: 'name:asc',
+ page: 1,
});
}
};
@@ -226,6 +239,11 @@ const MarketPlacePage = () => {
: marketplaceProvidersResponse.meta.collections;
const possibleCategories = marketplacePluginsResponse.meta.categories;
+ const { pagination } =
+ npmPackageType === 'plugin'
+ ? marketplacePluginsResponse.meta
+ : marketplaceProvidersResponse.meta;
+
return (
@@ -333,7 +351,8 @@ const MarketPlacePage = () => {
-
+
+
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js
index 505e978034..c17e276e4b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js
@@ -3,6 +3,14 @@ import { rest } from 'msw';
import { responses as pluginResponses } from './mocks/plugins';
import { responses as providerResponses } from './mocks/providers';
+rest.get('https://market-api.strapi.io/plugins?collections[]', (req, res, ctx) => {
+ return {
+ data: [
+
+ ]
+ }
+}
+
const handlers = [
rest.get('https://market-api.strapi.io/plugins', (req, res, ctx) => {
let responseData;
diff --git a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
index fc42c8dae4..b8ed1fe109 100644
--- a/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
+++ b/packages/core/helper-plugin/lib/src/components/PageSizeURLQuery/index.js
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
import useQueryParams from '../../hooks/useQueryParams';
import useTracking from '../../hooks/useTracking';
-const PageSizeURLQuery = ({ trackedEvent }) => {
+const PageSizeURLQuery = ({ trackedEvent, options, defaultValue }) => {
const { formatMessage } = useIntl();
const [{ query }, setQuery] = useQueryParams();
const { trackUsage } = useTracking();
@@ -26,7 +26,7 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
page: 1,
});
};
- const pageSize = query?.pageSize || '10';
+ const pageSize = query?.pageSize || defaultValue;
return (
@@ -39,10 +39,11 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
onChange={handleChange}
value={pageSize}
>
-
-
-
-
+ {options.map((option) => (
+
+ ))}
@@ -58,10 +59,14 @@ const PageSizeURLQuery = ({ trackedEvent }) => {
PageSizeURLQuery.defaultProps = {
trackedEvent: null,
+ options: ['10', '20', '50', '100'],
+ defaultValue: '10',
};
PageSizeURLQuery.propTypes = {
trackedEvent: PropTypes.string,
+ options: PropTypes.arrayOf(PropTypes.string.isRequired),
+ defaultValue: PropTypes.string,
};
export default PageSizeURLQuery;