Merge pull request #13012 from strapi/missing-plugin

Add missing a plugin banner to the marketplace

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { ContentBox, useTracking } from '@strapi/helper-plugin';
+import GlassesSquare from '@strapi/icons/GlassesSquare';
+import ExternalLink from '@strapi/icons/ExternalLink';
+import { Icon } from '@strapi/design-system/Icon';
+
+const MissingPluginBanner = () => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  return (
+    <a
+      href="https://strapi.canny.io/plugin-requests"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      style={{ textDecoration: 'none' }}
+      onClick={() => trackUsage('didMissMarketplacePlugin')}
+    >
+      <ContentBox
+        title={formatMessage({
+          id: 'admin.pages.MarketPlacePage.missingPlugin.title',
+          defaultMessage: 'Documentation',
+        })}
+        subtitle={formatMessage({
+          id: 'admin.pages.MarketPlacePage.missingPlugin.description',
+          defaultMessage:
+            "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!",
+        })}
+        icon={<GlassesSquare />}
+        iconBackground="alternative100"
+        endAction={
+          <Icon as={ExternalLink} color="neutral600" width={3} height={3} marginLeft={2} />
+        }
+      />
+    </a>
+  );
+};
+
+export default MissingPluginBanner;

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

@@ -27,6 +27,7 @@ import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 import adminPermissions from '../../permissions';
+import MissingPluginBanner from './components/MissingPluginBanner';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
@@ -219,6 +220,9 @@ const MarketPlacePage = () => {
               ))}
             </Grid>
           )}
+          <Box paddingTop={7}>
+            <MissingPluginBanner />
+          </Box>
         </ContentLayout>
       </Main>
     </Layout>

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

@@ -87,6 +87,10 @@ describe('Marketplace page', () => {
         padding-left: 16px;
       }
 
+      .c56 {
+        padding-top: 32px;
+      }
+
       .c49 {
         font-weight: 600;
         color: #32324d;
@@ -253,6 +257,19 @@ describe('Marketplace page', () => {
         height: 100%;
       }
 
+      .c57 {
+        background: #ffffff;
+        padding: 24px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+      }
+
+      .c58 {
+        background: #f6ecfc;
+        padding: 12px;
+        border-radius: 4px;
+      }
+
       .c31 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -297,10 +314,21 @@ describe('Marketplace page', () => {
         height: 12;
       }
 
+      .c63 {
+        color: #666687;
+        margin-left: 8px;
+        width: 12px;
+        height: 12px;
+      }
+
       .c51 path {
         fill: #328048;
       }
 
+      .c64 path {
+        fill: #666687;
+      }
+
       .c24 {
         padding-right: 8px;
         padding-left: 12px;
@@ -467,6 +495,21 @@ describe('Marketplace page', () => {
         align-items: center;
       }
 
+      .c60 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c60 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
       .c41 > * {
         margin-left: 0;
         margin-right: 0;
@@ -496,6 +539,26 @@ describe('Marketplace page', () => {
         line-height: 1.43;
       }
 
+      .c61 {
+        font-weight: 500;
+        color: #32324d;
+        font-size: 0.75rem;
+        line-height: 1.33;
+      }
+
+      .c59 {
+        margin-right: 24px;
+      }
+
+      .c59 svg {
+        width: 2rem;
+        height: 2rem;
+      }
+
+      .c62 {
+        word-break: break-all;
+      }
+
       .c28 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
@@ -1496,6 +1559,74 @@ describe('Marketplace page', () => {
                   </div>
                 </div>
               </div>
+              <div
+                class="c56"
+              >
+                <a
+                  href="https://strapi.canny.io/plugin-requests"
+                  rel="noopener noreferrer nofollow"
+                  style="text-decoration: none;"
+                  target="_blank"
+                >
+                  <div
+                    class="c57 c35"
+                  >
+                    <div
+                      class="c58 c35 c59"
+                    >
+                      <svg
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 32 32"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M0 4a4 4 0 014-4h24a4 4 0 014 4v24a4 4 0 01-4 4H4a4 4 0 01-4-4V4z"
+                          fill="#AC73E6"
+                        />
+                        <path
+                          clip-rule="evenodd"
+                          d="M15.027 13.839c-3.19-.836-6.305-1.064-10.18-.608-1.215.152-1.063 1.975.076 2.203.304.836.456 2.355.912 3.267.987 2.279 5.622 1.975 7.369.835 1.14-.683 1.443-2.279 1.9-3.494.227-.684 1.595-.684 1.822 0 .38 1.215.76 2.81 1.9 3.494 1.747 1.14 6.381 1.444 7.369-.835.456-.912.607-2.431.911-3.267 1.14-.228 1.216-2.051.076-2.203-3.874-.456-6.989-.228-10.18.608-.455.075-1.519.075-1.975 0z"
+                          fill="#fff"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
+                    </div>
+                    <div
+                      class="c60"
+                    >
+                      <div
+                        class="c35"
+                      >
+                        <span
+                          class="c61 c62"
+                        >
+                          Documentation
+                        </span>
+                        <svg
+                          class="c63 c64"
+                          fill="none"
+                          height="3"
+                          viewBox="0 0 24 24"
+                          width="3"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M16.235 2.824a1.412 1.412 0 010-2.824h6.353C23.368 0 24 .633 24 1.412v6.353a1.412 1.412 0 01-2.823 0V4.82l-8.179 8.178a1.412 1.412 0 01-1.996-1.996l8.178-8.178h-2.945zm4.942 10.588a1.412 1.412 0 012.823 0v9.176c0 .78-.632 1.412-1.412 1.412H1.412C.632 24 0 23.368 0 22.588V1.412C0 .632.632 0 1.412 0h9.176a1.412 1.412 0 010 2.824H2.824v18.353h18.353v-7.765z"
+                            fill="#32324D"
+                          />
+                        </svg>
+                      </div>
+                      <span
+                        class="c37"
+                      >
+                        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>
+                    </div>
+                  </div>
+                </a>
+              </div>
             </div>
           </main>
         </div>
@@ -1515,8 +1646,8 @@ describe('Marketplace page', () => {
   it('should return search results matching the query', async () => {
     const { container } = render(App);
     const input = await getByPlaceholderText(container, 'Search for a plugin');
-    fireEvent.change(input, { target: { value: 'documentation' } });
+    fireEvent.change(input, { target: { value: 'comment' } });
-    const match = screen.getByText('Documentation');
+    const match = screen.getByText('Comments');
     const notMatch = screen.queryByText('Sentry');
 
     expect(match).toBeVisible();

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

@@ -218,6 +218,8 @@
   "admin.pages.MarketPlacePage.search.placeholder": "Search for a plugin",
   "admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
   "admin.pages.MarketPlacePage.subtitle": "Get more out of 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!",
   "anErrorOccurred": "Woops! Something went wrong. Please, try again.",
   "app.component.CopyToClipboard.label": "Copy to clipboard",
   "app.component.search.label": "Search for {target}",