diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js index 71220e843c..47b81f8d8a 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js @@ -12,6 +12,7 @@ const FiltersPopover = ({ onToggle, query, setQuery, + setTabQuery, npmPackageType, possibleCategories, possibleCollections, @@ -29,8 +30,15 @@ const FiltersPopover = ({ defaultMessage: 'Collections', })} value={query?.collections || []} - onChange={(newCollections) => setQuery({ collections: newCollections })} - onClear={() => setQuery({ collections: [] }, 'remove')} + onChange={(newCollections) => { + const update = { collections: newCollections, npmPackageType }; + setQuery(update); + setTabQuery((prev) => ({ ...prev, [npmPackageType]: update })); + }} + onClear={() => { + setQuery({ collections: [] }, 'remove'); + setTabQuery((prev) => ({ ...prev, [npmPackageType]: {} })); + }} possibleFilters={possibleCollections} customizeContent={(values) => formatMessage( @@ -52,8 +60,15 @@ const FiltersPopover = ({ defaultMessage: 'Categories', })} value={query?.categories || []} - onChange={(newCategories) => setQuery({ categories: newCategories })} - onClear={() => setQuery({ categories: [] }, 'remove')} + onChange={(newCategories) => { + const update = { categories: newCategories, npmPackageType }; + setQuery(update); + setTabQuery((prev) => ({ ...prev, [npmPackageType]: update })); + }} + onClear={() => { + setQuery({ categories: [] }, 'remove'); + setTabQuery((prev) => ({ ...prev, [npmPackageType]: {} })); + }} possibleFilters={possibleCategories} customizeContent={(values) => formatMessage( @@ -83,6 +98,7 @@ FiltersPopover.propTypes = { npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired, possibleCollections: PropTypes.object.isRequired, possibleCategories: PropTypes.object.isRequired, + setTabQuery: PropTypes.func.isRequired, }; export default FiltersPopover; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js index 7086b08679..051f157f5d 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js @@ -24,6 +24,7 @@ const NpmPackagesFilters = ({ npmPackageType, query, setQuery, + setTabQuery, }) => { const [isVisible, setIsVisible] = useState(false); const buttonRef = useRef(); @@ -49,6 +50,7 @@ const NpmPackagesFilters = ({ source={buttonRef} query={query} setQuery={setQuery} + setTabQuery={setTabQuery} possibleCollections={possibleCollections} possibleCategories={possibleCategories} npmPackageType={npmPackageType} @@ -59,13 +61,18 @@ const NpmPackagesFilters = ({ - setQuery({ + handleRemove={() => { + const update = { collections: query.collections.filter( (previousCollection) => previousCollection !== collection ), - }) - } + }; + setQuery(update); + setTabQuery((prev) => ({ + ...prev, + [npmPackageType]: { ...prev[npmPackageType], ...update }, + })); + }} /> ))} {npmPackageType === 'plugin' && @@ -73,13 +80,18 @@ const NpmPackagesFilters = ({ - setQuery({ - categories: query.categories.filter( + handleRemove={() => { + const update = { + collections: query.categories.filter( (previousCategory) => previousCategory !== category ), - }) - } + }; + setQuery(update); + setTabQuery((prev) => ({ + ...prev, + [npmPackageType]: { ...prev[npmPackageType], ...update }, + })); + }} /> ))} @@ -97,6 +109,7 @@ NpmPackagesFilters.propTypes = { possibleCategories: PropTypes.object.isRequired, query: PropTypes.object.isRequired, setQuery: PropTypes.func.isRequired, + setTabQuery: PropTypes.func.isRequired, }; export default NpmPackagesFilters; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js index 0bb3c3a6c4..db49cf998a 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/SortSelect/index.js @@ -23,7 +23,7 @@ const SortToggleButton = styled(Button)` } `; -const SortSelect = ({ sortQuery, setQuery }) => { +const SortSelect = ({ sortQuery, setQuery, setTabQuery, npmPackageType }) => { const { formatMessage } = useIntl(); const buttonRef = useRef(); const [isVisible, setIsVisible] = useState(false); @@ -51,6 +51,10 @@ const SortSelect = ({ sortQuery, setQuery }) => { const handleSortClick = (sortName) => { setQuery({ sort: sortName }); + setTabQuery((prev) => ({ + ...prev, + [npmPackageType]: { ...prev[npmPackageType], sort: sortName, npmPackageType }, + })); handleToggle(); }; @@ -126,7 +130,9 @@ SortSelect.defaultProps = { SortSelect.propTypes = { setQuery: PropTypes.func.isRequired, + setTabQuery: PropTypes.func.isRequired, sortQuery: PropTypes.string, + npmPackageType: PropTypes.string.isRequired, }; export default SortSelect; diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js index c5bb7ff83d..460c4a75c5 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js @@ -53,9 +53,11 @@ const MarketPlacePage = () => { const trackUsageRef = useRef(trackUsage); const toggleNotification = useNotification(); const [searchQuery, setSearchQuery] = useState(''); + const [{ query }, setQuery] = useQueryParams(); + const [tabQuery, setTabQuery] = useState({ plugin: { ...query }, provider: { ...query } }); const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos(); const isOnline = useNavigatorOnLine(); - const [{ query }, setQuery] = useQueryParams(); + const npmPackageType = query?.npmPackageType || 'plugin'; useFocusWhenNavigate(); @@ -77,19 +79,11 @@ const MarketPlacePage = () => { ); }; - const providerParams = { - collections: query?.collections || [], - sort: query?.sort || 'name:asc', - }; const { status: marketplaceProvidersStatus, data: marketplaceProvidersResponse } = - useFetchMarketplaceProviders(notifyMarketplaceLoad, providerParams); + useFetchMarketplaceProviders(notifyMarketplaceLoad, tabQuery.provider); - const pluginParams = { - ...providerParams, - categories: query?.categories || [], - }; const { status: marketplacePluginsStatus, data: marketplacePluginsResponse } = - useFetchMarketplacePlugins(notifyMarketplaceLoad, pluginParams); + useFetchMarketplacePlugins(notifyMarketplaceLoad, tabQuery.plugin); const isLoading = [marketplacePluginsStatus, marketplaceProvidersStatus].includes('loading'); @@ -182,18 +176,25 @@ const MarketPlacePage = () => { ); const handleTabChange = (selected) => { - const packageType = selected === 0 ? 'plugin' : 'provider'; - setQuery({ - // Save new tab in the query params - npmPackageType: packageType, - // Clear filters - collections: [], - categories: [], - // Reset sort - sort: 'name:asc', - }); + const selectedTab = selected === 0 ? 'plugin' : 'provider'; + + if (tabQuery[selectedTab] && Object.keys(tabQuery[selectedTab]).length) { + setQuery({ ...tabQuery[selectedTab] }); + } else { + setQuery( + { + npmPackageType: null, + // Clear filters + collections: [], + categories: [], + sort: null, + }, + 'remove' + ); + } }; + console.log(tabQuery); // Check if plugins and providers are installed already const installedPackageNames = Object.keys(dependencies); @@ -201,6 +202,7 @@ const MarketPlacePage = () => { npmPackageType === 'plugin' ? marketplacePluginsResponse.meta.collections : marketplaceProvidersResponse.meta.collections; + const possibleCategories = marketplacePluginsResponse.meta.categories; return ( @@ -263,13 +265,19 @@ const MarketPlacePage = () => { - + diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap index 7831cf3ca2..69175817d3 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap +++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/__snapshots__/index.test.js.snap @@ -2979,14 +2979,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = ` aria-disabled="false" aria-expanded="false" aria-haspopup="dialog" - aria-label="Sort by: Alphabetical order" + aria-label="Sort by" class="c38 c39 c40" type="button" > - Sort by: Alphabetical order + Sort by