From 576c3faad464f5c6a57844ca1fd7b37a56b644cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Wed, 5 Oct 2022 15:58:49 +0200
Subject: [PATCH 01/10] Rename fetch market providers function

---
 .../admin/src/hooks/useFetchMarketplaceProviders/index.js     | 4 ++--
 .../admin/src/hooks/useFetchMarketplaceProviders/utils/api.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js
index 9970a335c5..ddb7d26f4e 100644
--- a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js
+++ b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/index.js
@@ -1,11 +1,11 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchMarketplacePlugins } from './utils/api';
+import { fetchMarketplaceProviders } from './utils/api';
 
 const useFetchMarketplaceProviders = (notifyLoad) => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), {
+  return useQuery('list-marketplace-providers', () => fetchMarketplaceProviders(), {
     onSuccess() {
       if (notifyLoad) {
         notifyLoad();
diff --git a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js
index c1776b1bfd..2c01ea2c94 100644
--- a/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js
+++ b/packages/core/admin/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js
@@ -2,10 +2,10 @@ import axios from 'axios';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
-const fetchMarketplacePlugins = async () => {
+const fetchMarketplaceProviders = async () => {
   const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`);
 
   return data;
 };
 
-export { fetchMarketplacePlugins };
+export { fetchMarketplaceProviders };

From 45af88102b266bf7fffa213ce37ef16cd8a70ffa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Thu, 6 Oct 2022 14:44:54 +0200
Subject: [PATCH 02/10] Add marketplace category selector

---
 .../NpmPackagesFilters/FiltersPopover.js      | 84 +++++++++++++++++++
 .../components/NpmPackagesFilters/index.js    | 43 ++++++++++
 .../admin/src/pages/MarketplacePage/index.js  |  4 +
 .../core/admin/admin/src/translations/en.json | 12 +--
 4 files changed, 138 insertions(+), 5 deletions(-)
 create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js
 create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js

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
new file mode 100644
index 0000000000..a0da017ac4
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FiltersPopover.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { Popover } from '@strapi/design-system/Popover';
+import { Stack } from '@strapi/design-system/Stack';
+import { FocusTrap } from '@strapi/design-system/FocusTrap';
+import { Select, Option } from '@strapi/design-system/Select';
+import { useIntl } from 'react-intl';
+
+const filters = {
+  categories: {
+    'Custom fields': 20,
+    Deployment: 4,
+  },
+};
+
+const FiltersPopover = ({ source, onToggle, query, setQuery }) => {
+  const { formatMessage } = useIntl();
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  const categoriesMessage = formatMessage({
+    id: 'admin.pages.MarketPlacePage.filters.collections',
+    defaultMessage: 'Collections',
+  });
+
+  return (
+    <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
+      <FocusTrap onEscape={onToggle}>
+        <form onSubmit={handleSubmit}>
+          <Stack spacing={1} style={{ minWidth: 184 }}>
+            <Box>
+              <Select
+                aria-label={categoriesMessage}
+                placeholder={categoriesMessage}
+                name="categories"
+                size="M"
+                onChange={(newCategories) => setQuery({ categories: newCategories })}
+                onClear={() => setQuery({ categories: [] }, 'remove')}
+                value={query?.categories || []}
+                customizeContent={(values) =>
+                  formatMessage(
+                    {
+                      id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                      defaultMessage: 'test',
+                    },
+                    { count: values.length }
+                  )
+                }
+                multi
+              >
+                {Object.entries(filters.categories).map(([name, count]) => {
+                  return (
+                    <Option key={name} value={name}>
+                      {name} ({count})
+                    </Option>
+                  );
+                })}
+              </Select>
+            </Box>
+          </Stack>
+        </form>
+      </FocusTrap>
+    </Popover>
+  );
+};
+
+FiltersPopover.defaultProps = {
+  query: {},
+};
+
+FiltersPopover.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
+  query: PropTypes.shape({
+    collections: PropTypes.arrayOf(PropTypes.string),
+    categories: PropTypes.arrayOf(PropTypes.string),
+  }),
+  setQuery: 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
new file mode 100644
index 0000000000..cb106ba5e7
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/index.js
@@ -0,0 +1,43 @@
+import React, { useState, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import { useQueryParams } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import Filter from '@strapi/icons/Filter';
+import FiltersPopover from './FiltersPopover';
+
+const NpmPackagesFilters = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const buttonRef = useRef();
+  const { formatMessage } = useIntl();
+  const [{ query }, setQuery] = useQueryParams();
+
+  const handleToggle = () => setIsVisible((prev) => !prev);
+
+  return (
+    <>
+      <Box paddingTop={1} paddingBottom={1}>
+        <Button
+          variant="tertiary"
+          ref={buttonRef}
+          startIcon={<Filter />}
+          onClick={handleToggle}
+          size="S"
+        >
+          {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
+        </Button>
+        {isVisible && (
+          <FiltersPopover
+            onToggle={handleToggle}
+            source={buttonRef}
+            query={query}
+            setQuery={setQuery}
+          />
+        )}
+      </Box>
+      {/* <FilterListURLQuery filtersSchema={displayedFilters} /> */}
+    </>
+  );
+};
+
+export default NpmPackagesFilters;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 1d5552fda4..596893fa61 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -29,6 +29,7 @@ import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
 import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
 import MissingPluginBanner from './components/MissingPluginBanner';
 import NpmPackagesGrid from './components/NpmPackagesGrid';
+import NpmPackagesFilters from './components/NpmPackagesFilters';
 
 const matchSearch = (npmPackages, search) => {
   return matchSorter(npmPackages, search, {
@@ -235,6 +236,9 @@ const MarketPlacePage = () => {
                 </Tab>
               </Tabs>
             </Box>
+            <Box paddingBottom={4}>
+              <NpmPackagesFilters />
+            </Box>
             <TabPanels>
               {/* Plugins panel */}
               <TabPanel>
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 52320dfbe3..164f84a741 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@@ -100,11 +100,11 @@
   "Settings.apiTokens.duration.30-days": "30 days",
   "Settings.apiTokens.duration.90-days": "90 days",
   "Settings.apiTokens.duration.unlimited": "Unlimited",
-  "Settings.apiTokens.form.duration":"Token duration",
-  "Settings.apiTokens.form.type":"Token type",
-  "Settings.apiTokens.duration.expiration-date":"Expiration date",
-  "Settings.apiTokens.createPage.permissions.title":"Permissions",
-  "Settings.apiTokens.createPage.permissions.description":"Only actions bound by a route are listed below.",
+  "Settings.apiTokens.form.duration": "Token duration",
+  "Settings.apiTokens.form.type": "Token type",
+  "Settings.apiTokens.duration.expiration-date": "Expiration date",
+  "Settings.apiTokens.createPage.permissions.title": "Permissions",
+  "Settings.apiTokens.createPage.permissions.description": "Only actions bound by a route are listed below.",
   "Settings.apiTokens.RegenerateDialog.title": "Regenerate token",
   "Settings.apiTokens.popUpWarning.message": "Are you sure you want to regenerate this token?",
   "Settings.apiTokens.Button.cancel": "Cancel",
@@ -280,6 +280,8 @@
   "admin.pages.MarketPlacePage.tab-group.label": "Plugins and Providers for Strapi",
   "admin.pages.MarketPlacePage.missingPlugin.title": "Missing a plugin?",
   "admin.pages.MarketPlacePage.missingPlugin.description": "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!",
+  "admin.pages.MarketPlacePage.filters.collections": "Collections",
+  "admin.pages.MarketPlacePage.filters.collectionsSelected": "{count, plural, =0 {No collections} one {# collection} other {# collections}} selected",
   "anErrorOccurred": "Woops! Something went wrong. Please, try again.",
   "app.component.CopyToClipboard.label": "Copy to clipboard",
   "app.component.search.label": "Search for {target}",

From 75ae5977e0a67f918d678ad5151fda7b7103ccb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Thu, 6 Oct 2022 15:41:58 +0200
Subject: [PATCH 03/10] Add abstraction for marketplace filters

---
 .../NpmPackagesFilters/FilterSelect.js        | 47 ++++++++++++++
 .../NpmPackagesFilters/FiltersPopover.js      | 64 +++++++++++--------
 .../core/admin/admin/src/translations/en.json |  2 +
 3 files changed, 88 insertions(+), 25 deletions(-)
 create mode 100644 packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js
new file mode 100644
index 0000000000..107d13a475
--- /dev/null
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Select, Option } from '@strapi/design-system/Select';
+
+const FilterSelect = ({
+  message,
+  value,
+  onChange,
+  name,
+  possibleFilters,
+  onClear,
+  customizeContent,
+}) => {
+  return (
+    <Select
+      aria-label={message}
+      placeholder={message}
+      name={name}
+      size="M"
+      onChange={onChange}
+      onClear={onClear}
+      value={value}
+      customizeContent={customizeContent}
+      multi
+    >
+      {Object.entries(possibleFilters).map(([name, count]) => {
+        return (
+          <Option key={name} value={name}>
+            {name} ({count})
+          </Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+FilterSelect.propTypes = {
+  message: PropTypes.string.isRequired,
+  value: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  possibleFilters: PropTypes.object.isRequired,
+  onClear: PropTypes.func.isRequired,
+  customizeContent: PropTypes.func.isRequired,
+};
+
+export default FilterSelect;
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 a0da017ac4..a68657682d 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
@@ -4,10 +4,14 @@ import { Box } from '@strapi/design-system/Box';
 import { Popover } from '@strapi/design-system/Popover';
 import { Stack } from '@strapi/design-system/Stack';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
-import { Select, Option } from '@strapi/design-system/Select';
 import { useIntl } from 'react-intl';
+import FilterSelect from './FilterSelect';
 
-const filters = {
+const possibleFilters = {
+  collections: {
+    'Made by Strapi': 20,
+    Verified: 4,
+  },
   categories: {
     'Custom fields': 20,
     Deployment: 4,
@@ -21,44 +25,54 @@ const FiltersPopover = ({ source, onToggle, query, setQuery }) => {
     e.preventDefault();
   };
 
-  const categoriesMessage = formatMessage({
-    id: 'admin.pages.MarketPlacePage.filters.collections',
-    defaultMessage: 'Collections',
-  });
-
   return (
     <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
       <FocusTrap onEscape={onToggle}>
         <form onSubmit={handleSubmit}>
           <Stack spacing={1} style={{ minWidth: 184 }}>
             <Box>
-              <Select
-                aria-label={categoriesMessage}
-                placeholder={categoriesMessage}
-                name="categories"
-                size="M"
-                onChange={(newCategories) => setQuery({ categories: newCategories })}
-                onClear={() => setQuery({ categories: [] }, 'remove')}
-                value={query?.categories || []}
+              <FilterSelect
+                message={formatMessage({
+                  id: 'admin.pages.MarketPlacePage.filters.collections',
+                  defaultMessage: 'Collections',
+                })}
+                value={query?.collections || []}
+                onChange={(newCollections) => setQuery({ collections: newCollections })}
+                onClear={() => setQuery({ collections: [] }, 'remove')}
+                possibleFilters={possibleFilters.collections}
                 customizeContent={(values) =>
                   formatMessage(
                     {
                       id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
-                      defaultMessage: 'test',
+                      defaultMessage:
+                        '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
                     },
                     { count: values.length }
                   )
                 }
-                multi
-              >
-                {Object.entries(filters.categories).map(([name, count]) => {
-                  return (
-                    <Option key={name} value={name}>
-                      {name} ({count})
-                    </Option>
-                  );
+              />
+            </Box>
+            <Box>
+              <FilterSelect
+                message={formatMessage({
+                  id: 'admin.pages.MarketPlacePage.filters.categories',
+                  defaultMessage: 'Categories',
                 })}
-              </Select>
+                value={query?.categories || []}
+                onChange={(newCategories) => setQuery({ categories: newCategories })}
+                onClear={() => setQuery({ categories: [] }, 'remove')}
+                possibleFilters={possibleFilters.categories}
+                customizeContent={(values) =>
+                  formatMessage(
+                    {
+                      id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
+                      defaultMessage:
+                        '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
+                    },
+                    { count: values.length }
+                  )
+                }
+              />
             </Box>
           </Stack>
         </form>
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 164f84a741..e0c7f58b08 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@@ -282,6 +282,8 @@
   "admin.pages.MarketPlacePage.missingPlugin.description": "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!",
   "admin.pages.MarketPlacePage.filters.collections": "Collections",
   "admin.pages.MarketPlacePage.filters.collectionsSelected": "{count, plural, =0 {No collections} one {# collection} other {# collections}} selected",
+  "admin.pages.MarketPlacePage.filters.categories": "Categories",
+  "admin.pages.MarketPlacePage.filters.categoriesSelected": "{count, plural, =0 {No categories} one {# category} other {# categories}} selected",
   "anErrorOccurred": "Woops! Something went wrong. Please, try again.",
   "app.component.CopyToClipboard.label": "Copy to clipboard",
   "app.component.search.label": "Search for {target}",

From 6c3c8c9a0ce4530ecae190448b174c6baba62701 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Thu, 6 Oct 2022 16:17:06 +0200
Subject: [PATCH 04/10] Try moving filters inside tab panels

---
 .../NpmPackagesFilters/FiltersPopover.js      | 26 +++++-----
 .../components/NpmPackagesFilters/index.js    | 10 +++-
 .../admin/src/pages/MarketplacePage/index.js  | 48 ++++++++++++-------
 3 files changed, 52 insertions(+), 32 deletions(-)

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 a68657682d..078d5b98fc 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
@@ -7,18 +7,14 @@ import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { useIntl } from 'react-intl';
 import FilterSelect from './FilterSelect';
 
-const possibleFilters = {
-  collections: {
-    'Made by Strapi': 20,
-    Verified: 4,
-  },
-  categories: {
-    'Custom fields': 20,
-    Deployment: 4,
-  },
-};
-
-const FiltersPopover = ({ source, onToggle, query, setQuery }) => {
+const FiltersPopover = ({
+  source,
+  onToggle,
+  query,
+  setQuery,
+  possibleCategories,
+  possibleCollections,
+}) => {
   const { formatMessage } = useIntl();
 
   const handleSubmit = (e) => {
@@ -39,7 +35,7 @@ const FiltersPopover = ({ source, onToggle, query, setQuery }) => {
                 value={query?.collections || []}
                 onChange={(newCollections) => setQuery({ collections: newCollections })}
                 onClear={() => setQuery({ collections: [] }, 'remove')}
-                possibleFilters={possibleFilters.collections}
+                possibleFilters={possibleCollections}
                 customizeContent={(values) =>
                   formatMessage(
                     {
@@ -61,7 +57,7 @@ const FiltersPopover = ({ source, onToggle, query, setQuery }) => {
                 value={query?.categories || []}
                 onChange={(newCategories) => setQuery({ categories: newCategories })}
                 onClear={() => setQuery({ categories: [] }, 'remove')}
-                possibleFilters={possibleFilters.categories}
+                possibleFilters={possibleCategories}
                 customizeContent={(values) =>
                   formatMessage(
                     {
@@ -93,6 +89,8 @@ FiltersPopover.propTypes = {
     categories: PropTypes.arrayOf(PropTypes.string),
   }),
   setQuery: PropTypes.func.isRequired,
+  possibleCollections: PropTypes.object.isRequired,
+  possibleCategories: PropTypes.object.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 cb106ba5e7..ea2b65d27c 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
@@ -1,4 +1,5 @@
 import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useQueryParams } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
@@ -6,7 +7,7 @@ import { Button } from '@strapi/design-system/Button';
 import Filter from '@strapi/icons/Filter';
 import FiltersPopover from './FiltersPopover';
 
-const NpmPackagesFilters = () => {
+const NpmPackagesFilters = ({ possibleCollections, possibleCategories }) => {
   const [isVisible, setIsVisible] = useState(false);
   const buttonRef = useRef();
   const { formatMessage } = useIntl();
@@ -32,6 +33,8 @@ const NpmPackagesFilters = () => {
             source={buttonRef}
             query={query}
             setQuery={setQuery}
+            possibleCollections={possibleCollections}
+            possibleCategories={possibleCategories}
           />
         )}
       </Box>
@@ -40,4 +43,9 @@ const NpmPackagesFilters = () => {
   );
 };
 
+NpmPackagesFilters.propTypes = {
+  possibleCollections: PropTypes.object.isRequired,
+  possibleCategories: PropTypes.object.isRequired,
+};
+
 export default NpmPackagesFilters;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 596893fa61..52cf8af538 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -236,22 +236,28 @@ const MarketPlacePage = () => {
                 </Tab>
               </Tabs>
             </Box>
-            <Box paddingBottom={4}>
-              <NpmPackagesFilters />
-            </Box>
             <TabPanels>
               {/* Plugins panel */}
               <TabPanel>
                 {searchQuery.length > 0 && !pluginSearchResults.length ? (
                   <EmptyNpmPackageSearch content={emptySearchMessage} />
                 ) : (
-                  <NpmPackagesGrid
-                    npmPackages={pluginSearchResults}
-                    installedPackageNames={installedPackageNames}
-                    useYarn={useYarn}
-                    isInDevelopmentMode={isInDevelopmentMode}
-                    npmPackageType="plugin"
-                  />
+                  <>
+                    <Box paddingBottom={4}>
+                      <NpmPackagesFilters
+                        possibleCollections={marketplacePluginsResponse.meta.collections}
+                        possibleCategories={marketplacePluginsResponse.meta.categories}
+                      />
+                    </Box>
+
+                    <NpmPackagesGrid
+                      npmPackages={pluginSearchResults}
+                      installedPackageNames={installedPackageNames}
+                      useYarn={useYarn}
+                      isInDevelopmentMode={isInDevelopmentMode}
+                      npmPackageType="plugin"
+                    />
+                  </>
                 )}
               </TabPanel>
               {/* Providers panel */}
@@ -259,13 +265,21 @@ const MarketPlacePage = () => {
                 {searchQuery.length > 0 && !providerSearchResults.length ? (
                   <EmptyNpmPackageSearch content={emptySearchMessage} />
                 ) : (
-                  <NpmPackagesGrid
-                    npmPackages={providerSearchResults}
-                    installedPackageNames={installedPackageNames}
-                    useYarn={useYarn}
-                    isInDevelopmentMode={isInDevelopmentMode}
-                    npmPackageType="provider"
-                  />
+                  <>
+                    <Box paddingBottom={4}>
+                      <NpmPackagesFilters
+                        possibleCollections={marketplaceProvidersResponse.meta.collections}
+                      />
+                    </Box>
+
+                    <NpmPackagesGrid
+                      npmPackages={providerSearchResults}
+                      installedPackageNames={installedPackageNames}
+                      useYarn={useYarn}
+                      isInDevelopmentMode={isInDevelopmentMode}
+                      npmPackageType="provider"
+                    />
+                  </>
                 )}
               </TabPanel>
             </TabPanels>

From 01e338f5e686d09c4a7cfc1bde5a5fd36d6ccb23 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Thu, 6 Oct 2022 16:24:26 +0200
Subject: [PATCH 05/10] Handle npmPackageType in filter component

---
 .../NpmPackagesFilters/FiltersPopover.js      | 48 +++++++++-------
 .../components/NpmPackagesFilters/index.js    |  4 +-
 .../admin/src/pages/MarketplacePage/index.js  | 57 +++++++++----------
 3 files changed, 55 insertions(+), 54 deletions(-)

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 078d5b98fc..55f04dbe12 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,
+  npmPackageType,
   possibleCategories,
   possibleCollections,
 }) => {
@@ -48,28 +49,30 @@ const FiltersPopover = ({
                 }
               />
             </Box>
-            <Box>
-              <FilterSelect
-                message={formatMessage({
-                  id: 'admin.pages.MarketPlacePage.filters.categories',
-                  defaultMessage: 'Categories',
-                })}
-                value={query?.categories || []}
-                onChange={(newCategories) => setQuery({ categories: newCategories })}
-                onClear={() => setQuery({ categories: [] }, 'remove')}
-                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 }
-                  )
-                }
-              />
-            </Box>
+            {npmPackageType === 'plugin' && (
+              <Box>
+                <FilterSelect
+                  message={formatMessage({
+                    id: 'admin.pages.MarketPlacePage.filters.categories',
+                    defaultMessage: 'Categories',
+                  })}
+                  value={query?.categories || []}
+                  onChange={(newCategories) => setQuery({ categories: newCategories })}
+                  onClear={() => setQuery({ categories: [] }, 'remove')}
+                  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 }
+                    )
+                  }
+                />
+              </Box>
+            )}
           </Stack>
         </form>
       </FocusTrap>
@@ -89,6 +92,7 @@ FiltersPopover.propTypes = {
     categories: PropTypes.arrayOf(PropTypes.string),
   }),
   setQuery: PropTypes.func.isRequired,
+  npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
   possibleCollections: PropTypes.object.isRequired,
   possibleCategories: PropTypes.object.isRequired,
 };
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 ea2b65d27c..0903273fcf 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
@@ -7,7 +7,7 @@ import { Button } from '@strapi/design-system/Button';
 import Filter from '@strapi/icons/Filter';
 import FiltersPopover from './FiltersPopover';
 
-const NpmPackagesFilters = ({ possibleCollections, possibleCategories }) => {
+const NpmPackagesFilters = ({ possibleCollections, possibleCategories, npmPackageType }) => {
   const [isVisible, setIsVisible] = useState(false);
   const buttonRef = useRef();
   const { formatMessage } = useIntl();
@@ -35,6 +35,7 @@ const NpmPackagesFilters = ({ possibleCollections, possibleCategories }) => {
             setQuery={setQuery}
             possibleCollections={possibleCollections}
             possibleCategories={possibleCategories}
+            npmPackageType={npmPackageType}
           />
         )}
       </Box>
@@ -44,6 +45,7 @@ const NpmPackagesFilters = ({ possibleCollections, possibleCategories }) => {
 };
 
 NpmPackagesFilters.propTypes = {
+  npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
   possibleCollections: PropTypes.object.isRequired,
   possibleCategories: PropTypes.object.isRequired,
 };
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 52cf8af538..dfed6d9d04 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -236,28 +236,31 @@ const MarketPlacePage = () => {
                 </Tab>
               </Tabs>
             </Box>
+            <Box paddingBottom={4}>
+              <NpmPackagesFilters
+                npmPackageType={npmPackageType}
+                possibleCollections={
+                  npmPackageType === 'plugin'
+                    ? marketplacePluginsResponse.meta.collections
+                    : marketplaceProvidersResponse.meta.collections
+                }
+                possibleCategories={marketplacePluginsResponse.meta.categories}
+              />
+            </Box>
+
             <TabPanels>
               {/* Plugins panel */}
               <TabPanel>
                 {searchQuery.length > 0 && !pluginSearchResults.length ? (
                   <EmptyNpmPackageSearch content={emptySearchMessage} />
                 ) : (
-                  <>
-                    <Box paddingBottom={4}>
-                      <NpmPackagesFilters
-                        possibleCollections={marketplacePluginsResponse.meta.collections}
-                        possibleCategories={marketplacePluginsResponse.meta.categories}
-                      />
-                    </Box>
-
-                    <NpmPackagesGrid
-                      npmPackages={pluginSearchResults}
-                      installedPackageNames={installedPackageNames}
-                      useYarn={useYarn}
-                      isInDevelopmentMode={isInDevelopmentMode}
-                      npmPackageType="plugin"
-                    />
-                  </>
+                  <NpmPackagesGrid
+                    npmPackages={pluginSearchResults}
+                    installedPackageNames={installedPackageNames}
+                    useYarn={useYarn}
+                    isInDevelopmentMode={isInDevelopmentMode}
+                    npmPackageType="plugin"
+                  />
                 )}
               </TabPanel>
               {/* Providers panel */}
@@ -265,21 +268,13 @@ const MarketPlacePage = () => {
                 {searchQuery.length > 0 && !providerSearchResults.length ? (
                   <EmptyNpmPackageSearch content={emptySearchMessage} />
                 ) : (
-                  <>
-                    <Box paddingBottom={4}>
-                      <NpmPackagesFilters
-                        possibleCollections={marketplaceProvidersResponse.meta.collections}
-                      />
-                    </Box>
-
-                    <NpmPackagesGrid
-                      npmPackages={providerSearchResults}
-                      installedPackageNames={installedPackageNames}
-                      useYarn={useYarn}
-                      isInDevelopmentMode={isInDevelopmentMode}
-                      npmPackageType="provider"
-                    />
-                  </>
+                  <NpmPackagesGrid
+                    npmPackages={providerSearchResults}
+                    installedPackageNames={installedPackageNames}
+                    useYarn={useYarn}
+                    isInDevelopmentMode={isInDevelopmentMode}
+                    npmPackageType="provider"
+                  />
                 )}
               </TabPanel>
             </TabPanels>

From a5a486a6da8a913a80e1366b7fad397302cda1f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Thu, 6 Oct 2022 17:36:26 +0200
Subject: [PATCH 06/10] Call useQueryParams once

---
 .../NpmPackagesFilters/FiltersPopover.js      |  9 +--
 .../components/NpmPackagesFilters/index.js    | 57 +++++++++++++++++--
 .../admin/src/pages/MarketplacePage/index.js  |  8 ++-
 3 files changed, 60 insertions(+), 14 deletions(-)

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 55f04dbe12..a9e97f47ce 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
@@ -80,17 +80,10 @@ const FiltersPopover = ({
   );
 };
 
-FiltersPopover.defaultProps = {
-  query: {},
-};
-
 FiltersPopover.propTypes = {
   onToggle: PropTypes.func.isRequired,
   source: PropTypes.shape({ current: PropTypes.instanceOf(Element) }).isRequired,
-  query: PropTypes.shape({
-    collections: PropTypes.arrayOf(PropTypes.string),
-    categories: PropTypes.arrayOf(PropTypes.string),
-  }),
+  query: PropTypes.object.isRequired,
   setQuery: PropTypes.func.isRequired,
   npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
   possibleCollections: PropTypes.object.isRequired,
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 0903273fcf..7086b08679 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
@@ -1,17 +1,33 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { useQueryParams } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
+import { Tag } from '@strapi/design-system/Tag';
+import Cross from '@strapi/icons/Cross';
 import Filter from '@strapi/icons/Filter';
 import FiltersPopover from './FiltersPopover';
 
-const NpmPackagesFilters = ({ possibleCollections, possibleCategories, npmPackageType }) => {
+const FilterTag = ({ name, handleRemove }) => {
+  return (
+    <Box padding={1}>
+      <Tag icon={<Cross />} onClick={handleRemove}>
+        {name}
+      </Tag>
+    </Box>
+  );
+};
+
+const NpmPackagesFilters = ({
+  possibleCollections,
+  possibleCategories,
+  npmPackageType,
+  query,
+  setQuery,
+}) => {
   const [isVisible, setIsVisible] = useState(false);
   const buttonRef = useRef();
   const { formatMessage } = useIntl();
-  const [{ query }, setQuery] = useQueryParams();
 
   const handleToggle = () => setIsVisible((prev) => !prev);
 
@@ -39,15 +55,48 @@ const NpmPackagesFilters = ({ possibleCollections, possibleCategories, npmPackag
           />
         )}
       </Box>
-      {/* <FilterListURLQuery filtersSchema={displayedFilters} /> */}
+      {query.collections?.map((collection) => (
+        <FilterTag
+          name={collection}
+          key={collection}
+          handleRemove={() =>
+            setQuery({
+              collections: query.collections.filter(
+                (previousCollection) => previousCollection !== collection
+              ),
+            })
+          }
+        />
+      ))}
+      {npmPackageType === 'plugin' &&
+        query.categories?.map((category) => (
+          <FilterTag
+            name={category}
+            key={category}
+            handleRemove={() =>
+              setQuery({
+                categories: query.categories.filter(
+                  (previousCategory) => previousCategory !== category
+                ),
+              })
+            }
+          />
+        ))}
     </>
   );
 };
 
+FilterTag.propTypes = {
+  name: PropTypes.string.isRequired,
+  handleRemove: PropTypes.func.isRequired,
+};
+
 NpmPackagesFilters.propTypes = {
   npmPackageType: PropTypes.oneOf(['plugin', 'provider']).isRequired,
   possibleCollections: PropTypes.object.isRequired,
   possibleCategories: PropTypes.object.isRequired,
+  query: PropTypes.object.isRequired,
+  setQuery: PropTypes.func.isRequired,
 };
 
 export default NpmPackagesFilters;
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index dfed6d9d04..81a8c4c6fe 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -10,6 +10,7 @@ import {
   LoadingIndicatorPage,
   useNotification,
   useAppInfos,
+  useQueryParams,
 } from '@strapi/helper-plugin';
 import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -53,6 +54,7 @@ const MarketPlacePage = () => {
   const [npmPackageType, setNpmPackageType] = useState('plugin');
   const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos();
   const isOnline = useNavigatorOnLine();
+  const [{ query }, setQuery] = useQueryParams();
 
   useFocusWhenNavigate();
 
@@ -236,7 +238,7 @@ const MarketPlacePage = () => {
                 </Tab>
               </Tabs>
             </Box>
-            <Box paddingBottom={4}>
+            <Flex paddingBottom={4} gap={2}>
               <NpmPackagesFilters
                 npmPackageType={npmPackageType}
                 possibleCollections={
@@ -245,8 +247,10 @@ const MarketPlacePage = () => {
                     : marketplaceProvidersResponse.meta.collections
                 }
                 possibleCategories={marketplacePluginsResponse.meta.categories}
+                query={query || {}}
+                setQuery={setQuery}
               />
-            </Box>
+            </Flex>
 
             <TabPanels>
               {/* Plugins panel */}

From 5dfaf2a3f88a42c9bd57001b873124c93bef171e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Thu, 6 Oct 2022 17:42:10 +0200
Subject: [PATCH 07/10] Save marketplace tab in url

---
 .../admin/admin/src/pages/MarketplacePage/index.js    | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 81a8c4c6fe..89da83616c 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -51,10 +51,10 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
-  const [npmPackageType, setNpmPackageType] = useState('plugin');
   const { autoReload: isInDevelopmentMode, dependencies, useYarn } = useAppInfos();
   const isOnline = useNavigatorOnLine();
   const [{ query }, setQuery] = useQueryParams();
+  const npmPackageType = query?.npmPackageType || 'plugin';
 
   useFocusWhenNavigate();
 
@@ -173,7 +173,13 @@ const MarketPlacePage = () => {
 
   const handleTabChange = (selected) => {
     const packageType = selected === 0 ? 'plugin' : 'provider';
-    setNpmPackageType(packageType);
+    setQuery({
+      // Save new tab in the query params
+      npmPackageType: packageType,
+      // Clear filters
+      collections: [],
+      categories: [],
+    });
   };
 
   // Check if plugins and providers are installed already
@@ -218,6 +224,7 @@ const MarketPlacePage = () => {
             })}
             id="tabs"
             variant="simple"
+            initialSelectedTabIndex={['plugin', 'provider'].indexOf(npmPackageType)}
             onTabChange={handleTabChange}
           >
             <Box paddingBottom={4}>

From 8f8e5cb3322fa4b67342183640972e4930ac5fca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Mon, 10 Oct 2022 10:06:17 +0200
Subject: [PATCH 08/10] Refactor existing tests

---
 .../tests/__snapshots__/index.test.js.snap    | 970 +++++++++++-------
 .../pages/MarketplacePage/tests/index.test.js | 103 +-
 .../src/pages/MarketplacePage/tests/server.js |  21 +
 3 files changed, 693 insertions(+), 401 deletions(-)

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 6f3179d01f..6ff7022def 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
@@ -10,46 +10,51 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   padding-bottom: 16px;
 }
 
-.c40 {
+.c38 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.c50 {
   border-radius: 4px;
   width: 64px;
   height: 64px;
 }
 
-.c41 {
+.c51 {
   padding-top: 16px;
 }
 
-.c44 {
+.c54 {
   padding-top: 8px;
 }
 
-.c60 {
+.c64 {
   margin-left: 4px;
   width: 24px;
   height: auto;
 }
 
-.c61 {
+.c65 {
   padding-left: 16px;
 }
 
-.c64 {
+.c68 {
   padding-top: 32px;
 }
 
-.c57 {
+.c45 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c54 {
+.c42 {
   padding-right: 8px;
 }
 
-.c51 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -63,21 +68,21 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   outline: none;
 }
 
-.c51 svg {
+.c39 svg {
   height: 12px;
   width: 12px;
 }
 
-.c51 svg > g,
-.c51 svg path {
+.c39 svg > g,
+.c39 svg path {
   fill: #ffffff;
 }
 
-.c51[aria-disabled='true'] {
+.c39[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c51:after {
+.c39:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -92,11 +97,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c51:focus-visible {
+.c39:focus-visible {
   outline: none;
 }
 
-.c51:focus-visible:after {
+.c39:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -107,11 +112,83 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c55 {
+.c43 {
   height: 100%;
 }
 
-.c52 {
+.c40 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px 16px;
+  background: #4945ff;
+  border: 1px solid #4945ff;
+  border: 1px solid #dcdce4;
+  background: #ffffff;
+}
+
+.c40 .c41 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c40 .c44 {
+  color: #ffffff;
+}
+
+.c40[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c40[aria-disabled='true'] .c44 {
+  color: #666687;
+}
+
+.c40[aria-disabled='true'] svg > g,
+.c40[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c40[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c40[aria-disabled='true']:active .c44 {
+  color: #666687;
+}
+
+.c40[aria-disabled='true']:active svg > g,
+.c40[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c40:hover {
+  background-color: #f6f6f9;
+}
+
+.c40:active {
+  background-color: #eaeaef;
+}
+
+.c40 .c44 {
+  color: #32324d;
+}
+
+.c40 svg > g,
+.c40 svg path {
+  fill: #32324d;
+}
+
+.c61 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -123,7 +200,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .c53 {
+.c61 .c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -134,66 +211,70 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   align-items: center;
 }
 
-.c52 .c56 {
+.c61 .c44 {
   color: #ffffff;
 }
 
-.c52[aria-disabled='true'] {
+.c61[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true'] .c56 {
+.c61[aria-disabled='true'] .c44 {
   color: #666687;
 }
 
-.c52[aria-disabled='true'] svg > g,
-.c52[aria-disabled='true'] svg path {
+.c61[aria-disabled='true'] svg > g,
+.c61[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c52[aria-disabled='true']:active {
+.c61[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c52[aria-disabled='true']:active .c56 {
+.c61[aria-disabled='true']:active .c44 {
   color: #666687;
 }
 
-.c52[aria-disabled='true']:active svg > g,
-.c52[aria-disabled='true']:active svg path {
+.c61[aria-disabled='true']:active svg > g,
+.c61[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c52:hover {
+.c61:hover {
   background-color: #ffffff;
 }
 
-.c52:active {
+.c61:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c52:active .c56 {
+.c61:active .c44 {
   color: #4945ff;
 }
 
-.c52:active svg > g,
-.c52:active svg path {
+.c61:active svg > g,
+.c61:active svg path {
   fill: #4945ff;
 }
 
-.c52 .c56 {
+.c61 .c44 {
   color: #271fe0;
 }
 
-.c52 svg > g,
-.c52 svg path {
+.c61 svg > g,
+.c61 svg path {
   fill: #271fe0;
 }
 
-.c38 {
+.c36 {
+  padding-bottom: 16px;
+}
+
+.c48 {
   background: #ffffff;
   padding-top: 16px;
   padding-right: 16px;
@@ -204,20 +285,35 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   height: 100%;
 }
 
-.c65 {
+.c69 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c66 {
+.c70 {
   background: #f6ecfc;
   padding: 12px;
   border-radius: 4px;
 }
 
-.c39 {
+.c37 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.c49 {
   -webkit-align-items: normal;
   -webkit-box-align: normal;
   -ms-flex-align: normal;
@@ -235,7 +331,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c43 {
+.c53 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -249,30 +345,30 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   flex-direction: row;
 }
 
-.c58 {
+.c62 {
   color: #328048;
   margin-left: 8px;
 }
 
-.c62 {
+.c66 {
   color: #328048;
   margin-right: 8px;
   width: 12;
   height: 12;
 }
 
-.c72 {
+.c76 {
   color: #666687;
   margin-left: 8px;
   width: 12px;
   height: 12px;
 }
 
-.c59 path {
+.c63 path {
   fill: #328048;
 }
 
-.c73 path {
+.c77 path {
   fill: #666687;
 }
 
@@ -425,11 +521,11 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c47 {
+.c57 {
   padding-top: 24px;
 }
 
-.c48 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -443,7 +539,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   flex-direction: row;
 }
 
-.c68 {
+.c72 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -457,41 +553,41 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   flex-direction: column;
 }
 
-.c69 > * {
+.c73 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c49 > * {
+.c59 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c49 > * + * {
+.c59 > * + * {
   margin-left: 8px;
 }
 
-.c42 {
+.c52 {
   color: #32324d;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c45 {
+.c55 {
   color: #666687;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c63 {
+.c67 {
   font-weight: 600;
   color: #328048;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c70 {
+.c74 {
   font-weight: 500;
   color: #32324d;
   font-size: 0.75rem;
@@ -509,7 +605,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   padding-right: 8px;
 }
 
-.c50 {
+.c60 {
   padding-left: 8px;
 }
 
@@ -650,16 +746,16 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   fill: #32324d;
 }
 
-.c67 {
+.c71 {
   margin-right: 24px;
 }
 
-.c67 svg {
+.c71 svg {
   width: 2rem;
   height: 2rem;
 }
 
-.c71 {
+.c75 {
   word-break: break-all;
 }
 
@@ -770,18 +866,18 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c36 {
+.c46 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c37 {
+.c47 {
   grid-column: span 4;
   max-width: 100%;
 }
 
-.c46 {
+.c56 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -789,13 +885,13 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c37 {
+  .c47 {
     grid-column: span 6;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c37 {
+  .c47 {
     grid-column: span 12;
   }
 }
@@ -992,6 +1088,44 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
               </button>
             </div>
           </div>
+          <div
+            class="c36 c37"
+          >
+            <div
+              class="c38"
+            >
+              <button
+                aria-disabled="false"
+                class="c39 c40"
+                type="button"
+              >
+                <div
+                  aria-hidden="true"
+                  class="c41 c42 c43"
+                >
+                  <svg
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M0 4a2 2 0 012-2h20a2 2 0 110 4H2a2 2 0 01-2-2zm4 8a2 2 0 012-2h12a2 2 0 110 4H6a2 2 0 01-2-2zm6 6a2 2 0 100 4h4a2 2 0 100-4h-4z"
+                      fill="#32324D"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <span
+                  class="c44 c45"
+                >
+                  Filters
+                </span>
+              </button>
+            </div>
+          </div>
           <div>
             <div
               aria-labelledby="tabs-0-tab"
@@ -1000,17 +1134,17 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
               tabindex="0"
             >
               <div
-                class="c36"
+                class="c46"
               >
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -1019,36 +1153,36 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                       >
                         <img
                           alt="Comments logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/eb4cd59876565af77c9c3e5966b59f10/2111bfc8/vl_strapi-comments.png"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Comments
                             </div>
                           </h3>
                         </div>
                         <div
-                          class="c44"
+                          class="c54"
                         >
                           <p
-                            class="c45 c46"
+                            class="c55 c56"
                           >
                             Powerful Strapi based comments moderation tool for you and your users
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c47 c48 c49"
+                        class="c57 c58 c59"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -1067,7 +1201,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c50"
+                            class="c11 c60"
                           >
                             <svg
                               fill="none"
@@ -1085,12 +1219,12 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c51 c52"
+                          class="c39 c61"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c53 c54 c55"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -1110,7 +1244,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c56 c57"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -1120,14 +1254,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -1136,29 +1270,29 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                       >
                         <img
                           alt="Config Sync logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/e23a7231d12cce89cb4b05cbfe759d45/96f5f496/Screenshot2021-12-09at22.15.37.png"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Config Sync
                               <span>
                                 <div
                                   aria-describedby="tooltip-1"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <svg
-                                    class="c58 c59"
+                                    class="c62 c63"
                                     fill="none"
                                     height="1em"
                                     viewBox="0 0 24 24"
@@ -1178,17 +1312,17 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c44"
+                          class="c54"
                         >
                           <p
-                            class="c45 c46"
+                            class="c55 c56"
                           >
                             Migrate your config data across environments using the CLI or Strapi admin panel.
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c47 c48 c49"
+                        class="c57 c58 c59"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -1207,7 +1341,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c50"
+                            class="c11 c60"
                           >
                             <svg
                               fill="none"
@@ -1225,12 +1359,12 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c51 c52"
+                          class="c39 c61"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c53 c54 c55"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -1250,7 +1384,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c56 c57"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -1260,14 +1394,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -1276,36 +1410,36 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                       >
                         <img
                           alt="Content Versioning logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/0b86f18e2606ed7f53bd54d536a1bea5/13a87f30/Artboard7copy.png"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Content Versioning
                             </div>
                           </h3>
                         </div>
                         <div
-                          class="c44"
+                          class="c54"
                         >
                           <p
-                            class="c45 c46"
+                            class="c55 c56"
                           >
                             This plugin enables you to versioning Content Types. It allows multiple draft versions✅ Keeps history of all changes (with time travel) ✅ 
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c47 c48 c49"
+                        class="c57 c58 c59"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -1324,7 +1458,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c50"
+                            class="c11 c60"
                           >
                             <svg
                               fill="none"
@@ -1342,12 +1476,12 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c51 c52"
+                          class="c39 c61"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c53 c54 c55"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -1367,7 +1501,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c56 c57"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -1377,14 +1511,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -1393,30 +1527,30 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                       >
                         <img
                           alt="Documentation logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/b6998ac52e8b0460b8a14ced8074b788/2a4d4a90/swagger.png"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Documentation
                               <span>
                                 <div
                                   aria-describedby="tooltip-3"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c60"
+                                    class="c64"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -1427,17 +1561,17 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c44"
+                          class="c54"
                         >
                           <p
-                            class="c45 c46"
+                            class="c55 c56"
                           >
                             Create an OpenAPI Document and visualize your API with SWAGGER UI
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c47 c48 c49"
+                        class="c57 c58 c59"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -1456,7 +1590,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c50"
+                            class="c11 c60"
                           >
                             <svg
                               fill="none"
@@ -1473,10 +1607,10 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </div>
                         </a>
                         <div
-                          class="c61"
+                          class="c65"
                         >
                           <svg
-                            class="c62 c59"
+                            class="c66 c63"
                             fill="none"
                             height="12"
                             viewBox="0 0 24 24"
@@ -1489,7 +1623,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                             />
                           </svg>
                           <span
-                            class="c63"
+                            class="c67"
                           >
                             Installed
                           </span>
@@ -1499,14 +1633,14 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -1515,36 +1649,36 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                       >
                         <img
                           alt="Transformer logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/5ffd1782a2fabf423ccd6f56c562f31a/b8f8598f/transformer-logo.png"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Transformer
                             </div>
                           </h3>
                         </div>
                         <div
-                          class="c44"
+                          class="c54"
                         >
                           <p
-                            class="c45 c46"
+                            class="c55 c56"
                           >
                             A plugin for Strapi Headless CMS that provides the ability to transform the API response. 
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c47 c48 c49"
+                        class="c57 c58 c59"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -1563,7 +1697,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c50"
+                            class="c11 c60"
                           >
                             <svg
                               fill="none"
@@ -1581,12 +1715,12 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c51 c52"
+                          class="c39 c61"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c53 c54 c55"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -1606,7 +1740,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c56 c57"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -1620,7 +1754,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c64"
+          class="c68"
         >
           <a
             href="https://strapi.canny.io/plugin-requests"
@@ -1629,10 +1763,10 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
             target="_blank"
           >
             <div
-              class="c65 c43"
+              class="c69 c53"
             >
               <div
-                class="c66 c43 c67"
+                class="c70 c53 c71"
               >
                 <svg
                   fill="none"
@@ -1654,18 +1788,18 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                 </svg>
               </div>
               <div
-                class="c68 c69"
+                class="c72 c73"
               >
                 <div
-                  class="c43"
+                  class="c53"
                 >
                   <span
-                    class="c70 c71"
+                    class="c74 c75"
                   >
                     Documentation
                   </span>
                   <svg
-                    class="c72 c73"
+                    class="c76 c77"
                     fill="none"
                     height="3"
                     viewBox="0 0 24 24"
@@ -1679,7 +1813,7 @@ exports[`Marketplace page renders and matches the plugin tab snapshot 1`] = `
                   </svg>
                 </div>
                 <span
-                  class="c45"
+                  class="c55"
                 >
                   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!
                 </span>
@@ -1703,46 +1837,51 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   padding-bottom: 16px;
 }
 
-.c40 {
+.c38 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.c50 {
   border-radius: 4px;
   width: 64px;
   height: 64px;
 }
 
-.c41 {
+.c51 {
   padding-top: 16px;
 }
 
-.c45 {
+.c55 {
   padding-top: 8px;
 }
 
-.c44 {
+.c54 {
   margin-left: 4px;
   width: 24px;
   height: auto;
 }
 
-.c59 {
+.c63 {
   padding-left: 16px;
 }
 
-.c63 {
+.c67 {
   padding-top: 32px;
 }
 
-.c58 {
+.c45 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c55 {
+.c42 {
   padding-right: 8px;
 }
 
-.c52 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1756,21 +1895,21 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   outline: none;
 }
 
-.c52 svg {
+.c39 svg {
   height: 12px;
   width: 12px;
 }
 
-.c52 svg > g,
-.c52 svg path {
+.c39 svg > g,
+.c39 svg path {
   fill: #ffffff;
 }
 
-.c52[aria-disabled='true'] {
+.c39[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c52:after {
+.c39:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -1785,11 +1924,11 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c52:focus-visible {
+.c39:focus-visible {
   outline: none;
 }
 
-.c52:focus-visible:after {
+.c39:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -1800,11 +1939,83 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c56 {
+.c43 {
   height: 100%;
 }
 
-.c53 {
+.c40 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px 16px;
+  background: #4945ff;
+  border: 1px solid #4945ff;
+  border: 1px solid #dcdce4;
+  background: #ffffff;
+}
+
+.c40 .c41 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c40 .c44 {
+  color: #ffffff;
+}
+
+.c40[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c40[aria-disabled='true'] .c44 {
+  color: #666687;
+}
+
+.c40[aria-disabled='true'] svg > g,
+.c40[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c40[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c40[aria-disabled='true']:active .c44 {
+  color: #666687;
+}
+
+.c40[aria-disabled='true']:active svg > g,
+.c40[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c40:hover {
+  background-color: #f6f6f9;
+}
+
+.c40:active {
+  background-color: #eaeaef;
+}
+
+.c40 .c44 {
+  color: #32324d;
+}
+
+.c40 svg > g,
+.c40 svg path {
+  fill: #32324d;
+}
+
+.c62 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1816,7 +2027,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c53 .c54 {
+.c62 .c41 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1827,66 +2038,70 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   align-items: center;
 }
 
-.c53 .c57 {
+.c62 .c44 {
   color: #ffffff;
 }
 
-.c53[aria-disabled='true'] {
+.c62[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c53[aria-disabled='true'] .c57 {
+.c62[aria-disabled='true'] .c44 {
   color: #666687;
 }
 
-.c53[aria-disabled='true'] svg > g,
-.c53[aria-disabled='true'] svg path {
+.c62[aria-disabled='true'] svg > g,
+.c62[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c53[aria-disabled='true']:active {
+.c62[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c53[aria-disabled='true']:active .c57 {
+.c62[aria-disabled='true']:active .c44 {
   color: #666687;
 }
 
-.c53[aria-disabled='true']:active svg > g,
-.c53[aria-disabled='true']:active svg path {
+.c62[aria-disabled='true']:active svg > g,
+.c62[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c53:hover {
+.c62:hover {
   background-color: #ffffff;
 }
 
-.c53:active {
+.c62:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c53:active .c57 {
+.c62:active .c44 {
   color: #4945ff;
 }
 
-.c53:active svg > g,
-.c53:active svg path {
+.c62:active svg > g,
+.c62:active svg path {
   fill: #4945ff;
 }
 
-.c53 .c57 {
+.c62 .c44 {
   color: #271fe0;
 }
 
-.c53 svg > g,
-.c53 svg path {
+.c62 svg > g,
+.c62 svg path {
   fill: #271fe0;
 }
 
-.c38 {
+.c36 {
+  padding-bottom: 16px;
+}
+
+.c48 {
   background: #ffffff;
   padding-top: 16px;
   padding-right: 16px;
@@ -1897,20 +2112,35 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   height: 100%;
 }
 
-.c64 {
+.c68 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c65 {
+.c69 {
   background: #f6ecfc;
   padding: 12px;
   border-radius: 4px;
 }
 
-.c39 {
+.c37 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.c49 {
   -webkit-align-items: normal;
   -webkit-box-align: normal;
   -ms-flex-align: normal;
@@ -1928,7 +2158,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c43 {
+.c53 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1942,25 +2172,25 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   flex-direction: row;
 }
 
-.c60 {
+.c64 {
   color: #328048;
   margin-right: 8px;
   width: 12;
   height: 12;
 }
 
-.c71 {
+.c75 {
   color: #666687;
   margin-left: 8px;
   width: 12px;
   height: 12px;
 }
 
-.c61 path {
+.c65 path {
   fill: #328048;
 }
 
-.c72 path {
+.c76 path {
   fill: #666687;
 }
 
@@ -2113,11 +2343,11 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c48 {
+.c58 {
   padding-top: 24px;
 }
 
-.c49 {
+.c59 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -2131,7 +2361,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   flex-direction: row;
 }
 
-.c67 {
+.c71 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -2145,41 +2375,41 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   flex-direction: column;
 }
 
-.c68 > * {
+.c72 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c50 > * {
+.c60 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c50 > * + * {
+.c60 > * + * {
   margin-left: 8px;
 }
 
-.c42 {
+.c52 {
   color: #32324d;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c46 {
+.c56 {
   color: #666687;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c62 {
+.c66 {
   font-weight: 600;
   color: #328048;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c69 {
+.c73 {
   font-weight: 500;
   color: #32324d;
   font-size: 0.75rem;
@@ -2197,7 +2427,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   padding-right: 8px;
 }
 
-.c51 {
+.c61 {
   padding-left: 8px;
 }
 
@@ -2338,16 +2568,16 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   fill: #32324d;
 }
 
-.c66 {
+.c70 {
   margin-right: 24px;
 }
 
-.c66 svg {
+.c70 svg {
   width: 2rem;
   height: 2rem;
 }
 
-.c70 {
+.c74 {
   word-break: break-all;
 }
 
@@ -2458,18 +2688,18 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
   cursor: not-allowed;
 }
 
-.c36 {
+.c46 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c37 {
+.c47 {
   grid-column: span 4;
   max-width: 100%;
 }
 
-.c47 {
+.c57 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
@@ -2477,13 +2707,13 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c37 {
+  .c47 {
     grid-column: span 6;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c37 {
+  .c47 {
     grid-column: span 12;
   }
 }
@@ -2680,6 +2910,44 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
               </button>
             </div>
           </div>
+          <div
+            class="c36 c37"
+          >
+            <div
+              class="c38"
+            >
+              <button
+                aria-disabled="false"
+                class="c39 c40"
+                type="button"
+              >
+                <div
+                  aria-hidden="true"
+                  class="c41 c42 c43"
+                >
+                  <svg
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M0 4a2 2 0 012-2h20a2 2 0 110 4H2a2 2 0 01-2-2zm4 8a2 2 0 012-2h12a2 2 0 110 4H6a2 2 0 01-2-2zm6 6a2 2 0 100 4h4a2 2 0 100-4h-4z"
+                      fill="#32324D"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <span
+                  class="c44 c45"
+                >
+                  Filters
+                </span>
+              </button>
+            </div>
+          </div>
           <div>
             <div
               aria-labelledby="tabs-1-tab"
@@ -2688,17 +2956,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
               tabindex="0"
             >
               <div
-                class="c36"
+                class="c46"
               >
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -2707,30 +2975,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Amazon Ses logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/04be9ade6077d029a9d4108cd2f47c8e/f5fe8d67/amazonSES.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=0561c26f91b25e21"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Amazon Ses
                               <span>
                                 <div
                                   aria-describedby="tooltip-9"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -2741,17 +3009,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Amazon Ses provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -2770,7 +3038,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -2788,12 +3056,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -2813,7 +3081,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -2823,14 +3091,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -2839,30 +3107,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="AWS S3 logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/e24c0ef99b1e952cbf0c8cbeed8cc24f/da30ba27/Amazon-S3-Logo.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=953eaf833eba09a2"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               AWS S3
                               <span>
                                 <div
                                   aria-describedby="tooltip-11"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -2873,17 +3141,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             AWS S3 provider for Strapi uploads
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -2902,7 +3170,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -2920,12 +3188,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -2945,7 +3213,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -2955,14 +3223,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -2971,30 +3239,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Cloudinary logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/74df39c3715a78589be1cbff69009dc2/14734e59/cloudinary.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=d82f74e2c1563864"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Cloudinary
                               <span>
                                 <div
                                   aria-describedby="tooltip-13"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3005,17 +3273,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Cloudinary provider for Strapi uploads
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3034,7 +3302,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3051,10 +3319,10 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </div>
                         </a>
                         <div
-                          class="c59"
+                          class="c63"
                         >
                           <svg
-                            class="c60 c61"
+                            class="c64 c65"
                             fill="none"
                             height="12"
                             viewBox="0 0 24 24"
@@ -3067,7 +3335,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             />
                           </svg>
                           <span
-                            class="c62"
+                            class="c66"
                           >
                             Installed
                           </span>
@@ -3077,14 +3345,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -3093,30 +3361,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Local Upload logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/6707fcab8f5530214160bacf6f4369ec/9ed22aaf/typeplaceholderversion1.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=35d9e0bb75e4528a"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Local Upload
                               <span>
                                 <div
                                   aria-describedby="tooltip-15"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3127,17 +3395,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Local upload provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3156,7 +3424,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3174,12 +3442,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -3199,7 +3467,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -3209,14 +3477,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -3225,30 +3493,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Mailgun logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/73118ab0aea4d9eae66edc18a1db4982/808842ba/mailgun-logo-5388F66106-seeklogo_com.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=2e2e9ecb19e752ca"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Mailgun
                               <span>
                                 <div
                                   aria-describedby="tooltip-17"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3259,17 +3527,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Mailgun provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3288,7 +3556,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3306,12 +3574,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -3331,7 +3599,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -3341,14 +3609,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -3357,30 +3625,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Nodemailer logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/73bea518f68fc312ec15a4a988da3bbc/4c024fea/Nodemailer.jpeg?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=a5dec98be44fa4e6"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Nodemailer
                               <span>
                                 <div
                                   aria-describedby="tooltip-19"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3391,17 +3659,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Nodemailer provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3420,7 +3688,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3438,12 +3706,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -3463,7 +3731,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -3473,14 +3741,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -3489,30 +3757,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Rackspace logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/f1e20497044cc6035f43b94f46bd5381/c78cbd9f/rackspace-logo.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=641682ec9adc2d1c"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Rackspace
                               <span>
                                 <div
                                   aria-describedby="tooltip-21"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3523,17 +3791,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Rackspace provider for Strapi uploads
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3552,7 +3820,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3570,12 +3838,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -3595,7 +3863,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -3605,14 +3873,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -3621,30 +3889,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="SendGrid logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/c09bfc173321ee79a972a10735ed6cf7/4e0a5321/sendgrid-logo-7574E52082-seeklogo_com.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=1ff0a128488e143f"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               SendGrid
                               <span>
                                 <div
                                   aria-describedby="tooltip-23"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3655,17 +3923,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             SendGrid provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3684,7 +3952,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3702,12 +3970,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -3727,7 +3995,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -3737,14 +4005,14 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c37"
+                  class="c47"
                 >
                   <div
                     class=""
                     style="height: 100%;"
                   >
                     <div
-                      class="c38 c39"
+                      class="c48 c49"
                       data-testid="npm-package-card"
                       height="100%"
                     >
@@ -3753,30 +4021,30 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                       >
                         <img
                           alt="Sendmail logo"
-                          class="c40"
+                          class="c50"
                           height="11"
                           src="https://dl.airtable.com/.attachments/0f14c78742105dffd36d6e253612f992/2f0e8605/sendmail-logo-png-transparent.png?ts=1654603863&userId=usrUa8HWbsGCCzcQm&cs=65d4bd3786c6b0a2"
                           width="11"
                         />
                         <div
-                          class="c41"
+                          class="c51"
                         >
                           <h3
-                            class="c42"
+                            class="c52"
                           >
                             <div
-                              class="c43"
+                              class="c53"
                             >
                               Sendmail
                               <span>
                                 <div
                                   aria-describedby="tooltip-25"
-                                  class="c43"
+                                  class="c53"
                                   tabindex="0"
                                 >
                                   <img
                                     alt="Made by Strapi"
-                                    class="c44"
+                                    class="c54"
                                     height="auto"
                                     src="IMAGE_MOCK"
                                     width="6"
@@ -3787,17 +4055,17 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </h3>
                         </div>
                         <div
-                          class="c45"
+                          class="c55"
                         >
                           <p
-                            class="c46 c47"
+                            class="c56 c57"
                           >
                             Sendmail provider for Strapi
                           </p>
                         </div>
                       </div>
                       <div
-                        class="c48 c49 c50"
+                        class="c58 c59 c60"
                         spacing="2"
                         style="align-self: flex-end;"
                       >
@@ -3816,7 +4084,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                           </span>
                           <div
                             aria-hidden="true"
-                            class="c11 c51"
+                            class="c11 c61"
                           >
                             <svg
                               fill="none"
@@ -3834,12 +4102,12 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                         </a>
                         <button
                           aria-disabled="false"
-                          class="c52 c53"
+                          class="c39 c62"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
-                            class="c54 c55 c56"
+                            class="c41 c42 c43"
                           >
                             <svg
                               fill="none"
@@ -3859,7 +4127,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                             </svg>
                           </div>
                           <span
-                            class="c57 c58"
+                            class="c44 c45"
                           >
                             Copy install command
                           </span>
@@ -3873,7 +4141,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c63"
+          class="c67"
         >
           <a
             href="https://strapi.canny.io/plugin-requests"
@@ -3882,10 +4150,10 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
             target="_blank"
           >
             <div
-              class="c64 c43"
+              class="c68 c53"
             >
               <div
-                class="c65 c43 c66"
+                class="c69 c53 c70"
               >
                 <svg
                   fill="none"
@@ -3907,18 +4175,18 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                 </svg>
               </div>
               <div
-                class="c67 c68"
+                class="c71 c72"
               >
                 <div
-                  class="c43"
+                  class="c53"
                 >
                   <span
-                    class="c69 c70"
+                    class="c73 c74"
                   >
                     Documentation
                   </span>
                   <svg
-                    class="c71 c72"
+                    class="c75 c76"
                     fill="none"
                     height="3"
                     viewBox="0 0 24 24"
@@ -3932,7 +4200,7 @@ exports[`Marketplace page renders and matches the provider tab snapshot 1`] = `
                   </svg>
                 </div>
                 <span
-                  class="c46"
+                  class="c56"
                 >
                   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!
                 </span>
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
index 99413b5ba5..8ada3d878b 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
@@ -11,6 +11,8 @@ import {
 } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { useTracking, useAppInfos } from '@strapi/helper-plugin';
 import useNavigatorOnLine from '../../../hooks/useNavigatorOnLine';
@@ -47,11 +49,15 @@ const client = new QueryClient({
   },
 });
 
+const history = createMemoryHistory();
+
 const App = (
   <QueryClientProvider client={client}>
     <IntlProvider locale="en" messages={{}} textComponent="span">
       <ThemeProvider theme={lightTheme}>
-        <MarketPlacePage />
+        <Router history={history}>
+          <MarketPlacePage />
+        </Router>
       </ThemeProvider>
     </IntlProvider>
   </QueryClientProvider>
@@ -65,19 +71,47 @@ describe('Marketplace page', () => {
   afterAll(() => server.close());
 
   it('renders and matches the plugin tab snapshot', async () => {
+    // Check snapshot
     const { container, getByTestId, getByRole } = render(App);
     await waitForElementToBeRemoved(() => getByTestId('loader'));
     await waitFor(() => expect(getByRole('heading', { name: /marketplace/i })).toBeInTheDocument());
 
     expect(container.firstChild).toMatchSnapshot();
+
+    // Make sure it defaults to the plugins tab
+    const button = screen.getByRole('tab', { selected: true });
+    const pluginsTabActive = getByText(button, /plugins/i);
+
+    const tabPanel = screen.getByRole('tabpanel');
+    const pluginCardText = getByText(tabPanel, 'Comments');
+    const providerCardText = queryByText(tabPanel, 'Cloudinary');
+    const submitPluginText = queryByText(container, 'Submit plugin');
+
+    expect(pluginsTabActive).not.toBe(null);
+    expect(pluginCardText).toBeVisible();
+    expect(submitPluginText).toBeVisible();
+    expect(providerCardText).toEqual(null);
   });
 
-  it('renders and matches the provider tab snapshot', async () => {
+  it('renders and matches the provider tab snapshot', () => {
+    // Make sure it switches to the providers tab
     const { container, getByRole } = render(App);
-    await waitFor(() => expect(getByRole('heading', { name: /marketplace/i })).toBeInTheDocument());
-    const providersTab = screen.getByRole('tab', { selected: false });
+    const providersTab = getByRole('tab', { name: /providers/i });
     fireEvent.click(providersTab);
+    const button = getByRole('tab', { selected: true });
+    const providersTabActive = getByText(button, /Providers/i);
 
+    const tabPanel = getByRole('tabpanel');
+    const providerCardText = getByText(tabPanel, 'Cloudinary');
+    const pluginCardText = queryByText(tabPanel, 'Comments');
+    const submitProviderText = queryByText(container, 'Submit provider');
+
+    expect(providersTabActive).not.toBe(null);
+    expect(providerCardText).toBeVisible();
+    expect(submitProviderText).toBeVisible();
+    expect(pluginCardText).toEqual(null);
+
+    // Check snapshot
     expect(container.firstChild).toMatchSnapshot();
   });
 
@@ -90,9 +124,12 @@ describe('Marketplace page', () => {
     expect(trackUsage).toHaveBeenCalledTimes(1);
   });
 
-  it('should return plugin search results matching the query', async () => {
+  it('should return plugin search results matching the query', () => {
     const { container } = render(App);
-    const input = await getByPlaceholderText(container, 'Search');
+    const pluginsTab = screen.getByRole('tab', { name: /plugins/i });
+    fireEvent.click(pluginsTab);
+
+    const input = getByPlaceholderText(container, 'Search');
     fireEvent.change(input, { target: { value: 'comment' } });
     const match = screen.getByText('Comments');
     const notMatch = screen.queryByText('Sentry');
@@ -103,12 +140,12 @@ describe('Marketplace page', () => {
     expect(provider).toEqual(null);
   });
 
-  it('should return provider search results matching the query', async () => {
+  it('should return provider search results matching the query', () => {
     const { container } = render(App);
-    const providersTab = screen.getByRole('tab', { selected: false });
+    const providersTab = screen.getByRole('tab', { name: /providers/i });
     fireEvent.click(providersTab);
 
-    const input = await getByPlaceholderText(container, 'Search');
+    const input = getByPlaceholderText(container, 'Search');
     fireEvent.change(input, { target: { value: 'cloudina' } });
     const match = screen.getByText('Cloudinary');
     const notMatch = screen.queryByText('Mailgun');
@@ -119,9 +156,9 @@ describe('Marketplace page', () => {
     expect(plugin).toEqual(null);
   });
 
-  it('should return empty plugin search results given a bad query', async () => {
+  it('should return empty plugin search results given a bad query', () => {
     const { container } = render(App);
-    const input = await getByPlaceholderText(container, 'Search');
+    const input = getByPlaceholderText(container, 'Search');
     const badQuery = 'asdf';
     fireEvent.change(input, { target: { value: badQuery } });
     const noResult = screen.getByText(`No result for "${badQuery}"`);
@@ -129,11 +166,11 @@ describe('Marketplace page', () => {
     expect(noResult).toBeVisible();
   });
 
-  it('should return empty provider search results given a bad query', async () => {
+  it('should return empty provider search results given a bad query', () => {
     const { container } = render(App);
-    const providersTab = screen.getByRole('tab', { selected: false });
+    const providersTab = screen.getByRole('tab', { name: /providers/i });
     fireEvent.click(providersTab);
-    const input = await getByPlaceholderText(container, 'Search');
+    const input = getByPlaceholderText(container, 'Search');
     const badQuery = 'asdf';
     fireEvent.change(input, { target: { value: badQuery } });
     const noResult = screen.getByText(`No result for "${badQuery}"`);
@@ -181,41 +218,7 @@ describe('Marketplace page', () => {
     expect(offlineText).toBeVisible();
   });
 
-  it('defaults to plugins tab', async () => {
-    const { container } = render(App);
-    const button = screen.getByRole('tab', { selected: true });
-    const pluginsTabActive = await getByText(button, /Plugins/i);
-
-    const tabPanel = screen.getByRole('tabpanel');
-    const pluginCardText = await getByText(tabPanel, 'Comments');
-    const providerCardText = await queryByText(tabPanel, 'Cloudinary');
-    const submitPluginText = await queryByText(container, 'Submit plugin');
-
-    expect(pluginsTabActive).not.toBe(null);
-    expect(pluginCardText).toBeVisible();
-    expect(submitPluginText).toBeVisible();
-    expect(providerCardText).toEqual(null);
-  });
-
-  it('switches to providers tab', async () => {
-    const { container } = render(App);
-    const providersTab = screen.getByRole('tab', { selected: false });
-    fireEvent.click(providersTab);
-    const button = screen.getByRole('tab', { selected: true });
-    const providersTabActive = await getByText(button, /Providers/i);
-
-    const tabPanel = screen.getByRole('tabpanel');
-    const providerCardText = await getByText(tabPanel, 'Cloudinary');
-    const pluginCardText = await queryByText(tabPanel, 'Comments');
-    const submitProviderText = await queryByText(container, 'Submit provider');
-
-    expect(providersTabActive).not.toBe(null);
-    expect(providerCardText).toBeVisible();
-    expect(submitProviderText).toBeVisible();
-    expect(pluginCardText).toEqual(null);
-  });
-
-  it('shows the installed text for installed plugins', async () => {
+  it('shows the installed text for installed plugins', () => {
     render(App);
     const pluginsTab = screen.getByRole('tab', { name: /plugins/i });
     fireEvent.click(pluginsTab);
@@ -235,7 +238,7 @@ describe('Marketplace page', () => {
     expect(notInstalledText).toBeVisible();
   });
 
-  it('shows the installed text for installed providers', async () => {
+  it('shows the installed text for installed providers', () => {
     // Open providers tab
     render(App);
     const providersTab = screen.getByRole('tab', { name: /providers/i });
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 d5f59d1eec..b3bc187a2a 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/server.js
@@ -491,6 +491,19 @@ const handlers = [
             },
           },
         ],
+        meta: {
+          collections: {
+            'Made by official partners': 9,
+            'Made by Strapi': 13,
+            'Made by the community': 69,
+            Verified: 29,
+          },
+          categories: {
+            'Custom fields': 4,
+            Deployment: 2,
+            Monitoring: 1,
+          },
+        },
       })
     );
   }),
@@ -903,6 +916,14 @@ const handlers = [
             },
           },
         ],
+        meta: {
+          collections: {
+            'Made by official partners': 0,
+            'Made by Strapi': 6,
+            'Made by the community': 2,
+            Verified: 6,
+          },
+        },
       })
     );
   }),

From 359eeabc5b9ac3e93401a192767265d93e388dca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Mon, 10 Oct 2022 11:16:28 +0200
Subject: [PATCH 09/10] Test filters popover

---
 .../NpmPackagesFilters/FilterSelect.js        | 18 ++++--------------
 .../NpmPackagesFilters/FiltersPopover.js      |  3 ++-
 .../pages/MarketplacePage/tests/index.test.js | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js
index 107d13a475..115b95c7db 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/components/NpmPackagesFilters/FilterSelect.js
@@ -2,20 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Select, Option } from '@strapi/design-system/Select';
 
-const FilterSelect = ({
-  message,
-  value,
-  onChange,
-  name,
-  possibleFilters,
-  onClear,
-  customizeContent,
-}) => {
+const FilterSelect = ({ message, value, onChange, possibleFilters, onClear, customizeContent }) => {
   return (
     <Select
       aria-label={message}
       placeholder={message}
-      name={name}
       size="M"
       onChange={onChange}
       onClear={onClear}
@@ -23,10 +14,10 @@ const FilterSelect = ({
       customizeContent={customizeContent}
       multi
     >
-      {Object.entries(possibleFilters).map(([name, count]) => {
+      {Object.entries(possibleFilters).map(([filterName, count]) => {
         return (
-          <Option key={name} value={name}>
-            {name} ({count})
+          <Option key={filterName} value={filterName}>
+            {filterName} ({count})
           </Option>
         );
       })}
@@ -38,7 +29,6 @@ FilterSelect.propTypes = {
   message: PropTypes.string.isRequired,
   value: PropTypes.array.isRequired,
   onChange: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
   possibleFilters: PropTypes.object.isRequired,
   onClear: PropTypes.func.isRequired,
   customizeContent: PropTypes.func.isRequired,
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 a9e97f47ce..f247bcefb6 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
@@ -26,7 +26,7 @@ const FiltersPopover = ({
     <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
       <FocusTrap onEscape={onToggle}>
         <form onSubmit={handleSubmit}>
-          <Stack spacing={1} style={{ minWidth: 184 }}>
+          <Stack spacing={1}>
             <Box>
               <FilterSelect
                 message={formatMessage({
@@ -70,6 +70,7 @@ const FiltersPopover = ({
                       { count: values.length }
                     )
                   }
+                  name="categories"
                 />
               </Box>
             )}
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
index 8ada3d878b..8e2bba5753 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js
@@ -178,6 +178,25 @@ describe('Marketplace page', () => {
     expect(noResult).toBeVisible();
   });
 
+  it('shows filters popover on plugins and providers', () => {
+    render(App);
+
+    // Show collections and categories filters on plugins
+    const pluginsTab = screen.getByRole('tab', { name: /plugins/i });
+    fireEvent.click(pluginsTab);
+    const filtersButton = screen.getByRole('button', { name: /filters/i });
+    fireEvent.click(filtersButton);
+    screen.getByLabelText(/no collections selected/i);
+    screen.getByLabelText(/no categories selected/i);
+    fireEvent.click(filtersButton);
+
+    // Only show collections filters on providers
+    const providersTab = screen.getByRole('tab', { name: /providers/i });
+    fireEvent.click(providersTab);
+    fireEvent.click(filtersButton);
+    screen.getByLabelText(/no collections selected/i);
+  });
+
   it('handles production environment', () => {
     // Simulate production environment
     useAppInfos.mockImplementationOnce(() => ({

From 4d2f9eeb3d84cbb66f8e51f09b9d684d8b6e7d73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20de=20Juvigny?= <remi.dejuvigny@strapi.io>
Date: Tue, 11 Oct 2022 14:46:09 +0200
Subject: [PATCH 10/10] Apply feedback

---
 .../NpmPackagesFilters/FiltersPopover.js      | 76 +++++++++----------
 .../admin/src/pages/MarketplacePage/index.js  | 11 +--
 2 files changed, 41 insertions(+), 46 deletions(-)

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 f247bcefb6..71220e843c 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
@@ -18,64 +18,58 @@ const FiltersPopover = ({
 }) => {
   const { formatMessage } = useIntl();
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-  };
-
   return (
     <Popover source={source} padding={3} spacing={4} onBlur={() => {}}>
       <FocusTrap onEscape={onToggle}>
-        <form onSubmit={handleSubmit}>
-          <Stack spacing={1}>
+        <Stack spacing={1}>
+          <Box>
+            <FilterSelect
+              message={formatMessage({
+                id: 'admin.pages.MarketPlacePage.filters.collections',
+                defaultMessage: 'Collections',
+              })}
+              value={query?.collections || []}
+              onChange={(newCollections) => setQuery({ collections: newCollections })}
+              onClear={() => setQuery({ collections: [] }, 'remove')}
+              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 }
+                )
+              }
+            />
+          </Box>
+          {npmPackageType === 'plugin' && (
             <Box>
               <FilterSelect
                 message={formatMessage({
-                  id: 'admin.pages.MarketPlacePage.filters.collections',
-                  defaultMessage: 'Collections',
+                  id: 'admin.pages.MarketPlacePage.filters.categories',
+                  defaultMessage: 'Categories',
                 })}
-                value={query?.collections || []}
-                onChange={(newCollections) => setQuery({ collections: newCollections })}
-                onClear={() => setQuery({ collections: [] }, 'remove')}
-                possibleFilters={possibleCollections}
+                value={query?.categories || []}
+                onChange={(newCategories) => setQuery({ categories: newCategories })}
+                onClear={() => setQuery({ categories: [] }, 'remove')}
+                possibleFilters={possibleCategories}
                 customizeContent={(values) =>
                   formatMessage(
                     {
-                      id: 'admin.pages.MarketPlacePage.filters.collectionsSelected',
+                      id: 'admin.pages.MarketPlacePage.filters.categoriesSelected',
                       defaultMessage:
-                        '{count, plural, =0 {No collections} one {# collection} other {# collections}} selected',
+                        '{count, plural, =0 {No categories} one {# category} other {# categories}} selected',
                     },
                     { count: values.length }
                   )
                 }
+                name="categories"
               />
             </Box>
-            {npmPackageType === 'plugin' && (
-              <Box>
-                <FilterSelect
-                  message={formatMessage({
-                    id: 'admin.pages.MarketPlacePage.filters.categories',
-                    defaultMessage: 'Categories',
-                  })}
-                  value={query?.categories || []}
-                  onChange={(newCategories) => setQuery({ categories: newCategories })}
-                  onClear={() => setQuery({ categories: [] }, 'remove')}
-                  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 }
-                    )
-                  }
-                  name="categories"
-                />
-              </Box>
-            )}
-          </Stack>
-        </form>
+          )}
+        </Stack>
       </FocusTrap>
     </Popover>
   );
diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
index 89da83616c..89ab68053d 100644
--- a/packages/core/admin/admin/src/pages/MarketplacePage/index.js
+++ b/packages/core/admin/admin/src/pages/MarketplacePage/index.js
@@ -185,6 +185,11 @@ const MarketPlacePage = () => {
   // Check if plugins and providers are installed already
   const installedPackageNames = Object.keys(dependencies);
 
+  const possibleCollections =
+    npmPackageType === 'plugin'
+      ? marketplacePluginsResponse.meta.collections
+      : marketplaceProvidersResponse.meta.collections;
+
   return (
     <Layout>
       <Main>
@@ -248,11 +253,7 @@ const MarketPlacePage = () => {
             <Flex paddingBottom={4} gap={2}>
               <NpmPackagesFilters
                 npmPackageType={npmPackageType}
-                possibleCollections={
-                  npmPackageType === 'plugin'
-                    ? marketplacePluginsResponse.meta.collections
-                    : marketplaceProvidersResponse.meta.collections
-                }
+                possibleCollections={possibleCollections}
                 possibleCategories={marketplacePluginsResponse.meta.categories}
                 query={query || {}}
                 setQuery={setQuery}