mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 03:17:11 +00:00
Merge pull request #13012 from strapi/missing-plugin
Add missing a plugin banner to the marketplace
This commit is contained in:
Rémi de Juvigny
GitHub
commit
d8676887bf
@ -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;
|
||||
@ -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>
|
||||
|
||||
@ -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' } });
|
||||
const match = screen.getByText('Documentation');
|
||||
fireEvent.change(input, { target: { value: 'comment' } });
|
||||
const match = screen.getByText('Comments');
|
||||
const notMatch = screen.queryByText('Sentry');
|
||||
|
||||
expect(match).toBeVisible();
|
||||
|
||||
@ -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}",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user