Merge pull request #13546 from strapi/providers/submit-provider-button

[Marketplace] Add submit providers button

packages/core/admin/admin/src/pages/MarketplacePage/components/PageHeader/index.js

@@ -6,10 +6,12 @@ import { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import Upload from '@strapi/icons/Upload';
 import { useTracking } from '@strapi/helper-plugin';
 
-const PageHeader = ({ isOnline }) => {
+const PageHeader = ({ isOnline, npmPackageType }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
 
+  const tracking = npmPackageType === 'provider' ? 'didSubmitProvider' : 'didSubmitPlugin';
+
   return (
     <HeaderLayout
       title={formatMessage({
@@ -25,13 +27,13 @@ const PageHeader = ({ isOnline }) => {
           <LinkButton
             startIcon={<Upload />}
             variant="tertiary"
-            href="https://market.strapi.io/submit-plugin"
-            onClick={() => trackUsage('didSubmitPlugin')}
+            href={`https://market.strapi.io/submit-${npmPackageType}`}
+            onClick={() => trackUsage(tracking)}
             isExternal
           >
             {formatMessage({
-              id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-              defaultMessage: 'Submit your plugin',
+              id: `admin.pages.MarketPlacePage.submit.${npmPackageType}.link`,
+              defaultMessage: `Submit ${npmPackageType}`,
             })}
           </LinkButton>
         )
@@ -42,6 +44,11 @@ const PageHeader = ({ isOnline }) => {
 
 export default PageHeader;
 
+PageHeader.defaultProps = {
+  npmPackageType: 'plugin',
+};
+
 PageHeader.propTypes = {
   isOnline: PropTypes.bool.isRequired,
+  npmPackageType: PropTypes.string,
 };

packages/core/admin/admin/src/pages/MarketplacePage/index.js

@@ -52,6 +52,7 @@ const MarketPlacePage = () => {
   const trackUsageRef = useRef(trackUsage);
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
+  const [npmPackageType, setNpmPackageType] = useState('plugin');
   const { autoReload: isInDevelopmentMode } = useAppInfos();
   const isOnline = useNavigatorOnLine();
 
@@ -202,6 +203,11 @@ const MarketPlacePage = () => {
     { target: searchQuery }
   );
 
+  const handleTabChange = selected => {
+    const packageType = selected === 0 ? 'plugin' : 'provider';
+    setNpmPackageType(packageType);
+  };
+
   // Check if plugins are installed already
   const installedPluginNames = installedPluginsResponse.plugins.map(plugin => plugin.packageName);
 
@@ -214,7 +220,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <PageHeader isOnline={isOnline} />
+        <PageHeader isOnline={isOnline} npmPackageType={npmPackageType} />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar
@@ -244,6 +250,7 @@ const MarketPlacePage = () => {
             })}
             id="tabs"
             variant="simple"
+            onTabChange={handleTabChange}
           >
             <Box paddingBottom={4}>
               <Tabs>

packages/core/admin/admin/src/pages/MarketplacePage/tests/index.test.js

@@ -922,7 +922,7 @@ describe('Marketplace page', () => {
                     <span
                       class="c13 c14"
                     >
-                      Submit your plugin
+                      Submit plugin
                     </span>
                   </a>
                 </div>
@@ -1848,21 +1848,23 @@ describe('Marketplace page', () => {
   });
 
   it('defaults to plugins tab', async () => {
-    render(App);
+    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 () => {
-    render(App);
+    const { container } = render(App);
     const providersTab = screen.getByRole('tab', { selected: false });
     fireEvent.click(providersTab);
     const button = screen.getByRole('tab', { selected: true });
@@ -1871,9 +1873,11 @@ describe('Marketplace page', () => {
     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);
   });
 });

packages/core/admin/admin/src/translations/en.json

@@ -220,7 +220,8 @@
   "admin.pages.MarketPlacePage.search.clear": "Clear the search",
   "admin.pages.MarketPlacePage.search.empty": "No result for \"{target}\"",
   "admin.pages.MarketPlacePage.search.placeholder": "Search",
-  "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
+  "admin.pages.MarketPlacePage.submit.plugin.link": "Submit plugin",
+  "admin.pages.MarketPlacePage.submit.provider.link": "Submit provider",
   "admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
   "admin.pages.MarketPlacePage.tab-group.label": "Plugins and Providers for Strapi",
   "admin.pages.MarketPlacePage.missingPlugin.title": "Missing a plugin?",