wip

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;

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 = ({
         <FilterTag
           name={collection}
           key={collection}
-          handleRemove={() =>
-            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 = ({
           <FilterTag
             name={category}
             key={category}
-            handleRemove={() =>
-              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;

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;

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 (
     <Layout>
@@ -263,13 +265,19 @@ const MarketPlacePage = () => {
               </Tabs>
             </Box>
             <Flex paddingBottom={4} gap={2}>
-              <SortSelect sortQuery={query?.sort} setQuery={setQuery} />
+              <SortSelect
+                sortQuery={query?.sort}
+                setQuery={setQuery}
+                setTabQuery={setTabQuery}
+                npmPackageType={npmPackageType}
+              />
               <NpmPackagesFilters
                 npmPackageType={npmPackageType}
                 possibleCollections={possibleCollections}
-                possibleCategories={marketplacePluginsResponse.meta.categories}
+                possibleCategories={possibleCategories}
                 query={query || {}}
                 setQuery={setQuery}
+                setTabQuery={setTabQuery}
               />
             </Flex>
 

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"
             >
               <span
                 class="c41 c42"
               >
-                Sort by: Alphabetical order
+                Sort by
               </span>
               <div
                 aria-hidden="true"