Merge branch 'releases/v4' of github.com:strapi/strapi into v4/tracking

This commit is contained in:
soupette 2021-11-15 09:24:45 +01:00
commit 374f6be2af
8 changed files with 545 additions and 133 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

View File

@ -1,124 +1,29 @@
import React from 'react';
import {
// LoadingIndicatorPage,
// request,
// useNotification,
// useAutoReloadOverlayBlocker,
// useAppInfos,
// useTracking,
// useStrapiApp,
CheckPagePermissions,
NoContent,
} from '@strapi/helper-plugin';
// import { Header } from '@buffetjs/custom';
// import { useIntl } from 'react-intl';
// import { useHistory } from 'react-router-dom';
// import { useFetchPluginsFromMarketPlace } from '../../hooks';
// import { Helmet } from 'react-helmet';
// import PluginCard from './PluginCard';
// import Wrapper from './Wrapper';
// import MarketplaceBanner from './MarketplaceBanner';
// const MarketPlacePage = () => {
// const toggleNotification = useNotification();
// const { lockAppWithAutoreload, unlockAppWithAutoreload } = useAutoReloadOverlayBlocker();
// const history = useHistory();
// const { trackUsage } = useTracking();
// const { autoReload, currentEnvironment } = useAppInfos();
// const { formatMessage } = useIntl();
// const { plugins } = useStrapiApp();
// const { error, isLoading, data } = useFetchPluginsFromMarketPlace();
// const emitEventRef = useRef(trackUsage);
// useEffect(() => {
// emitEventRef.current('didGoToMarketplace');
// }, []);
// if (isLoading || error) {
// return <LoadingIndicatorPage />;
// }
// const handleDownloadPlugin = async pluginId => {
// trackUsage('willInstallPlugin', { plugin: pluginId });
// // Force the Overlayblocker to be displayed
// const overlayblockerParams = {
// enabled: true,
// title: 'app.components.InstallPluginPage.Download.title',
// description: 'app.components.InstallPluginPage.Download.description',
// };
// // Lock the app
// lockAppWithAutoreload(overlayblockerParams);
// try {
// const opts = {
// method: 'POST',
// body: {
// plugin: pluginId,
// port: window.location.port,
// },
// };
// const response = await request('/admin/plugins/install', opts, overlayblockerParams);
// if (response.ok) {
// trackUsage('didInstallPlugin', { plugin: pluginId });
// // Reload the app
// window.location.reload();
// }
// } catch (err) {
// unlockAppWithAutoreload();
// toggleNotification({
// type: 'warning',
// message: { id: 'notification.error' },
// });
// }
// };
// return (
// <div>
// <Helmet
// title={formatMessage({
// id: 'app.components.InstallPluginPage.helmet',
// })}
// />
// <Wrapper>
// <Header
// title={{
// label: formatMessage({
// id: 'app.components.InstallPluginPage.title',
// }),
// }}
// content={formatMessage({
// id: 'app.components.InstallPluginPage.description',
// })}
// />
// <MarketplaceBanner />
// <div className="row" style={{ paddingTop: '4.1rem' }}>
// {data.map(plugin => {
// return (
// <PluginCard
// autoReload={autoReload}
// currentEnvironment={currentEnvironment}
// downloadPlugin={handleDownloadPlugin}
// key={plugin.id}
// history={history}
// plugin={plugin}
// showSupportUsButton={false}
// isAlreadyInstalled={plugins[plugin.id] !== undefined}
// />
// );
// })}
// </div>
// </Wrapper>
// </div>
// );
// };
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Helmet } from 'react-helmet';
import { pxToRem, CheckPagePermissions } from '@strapi/helper-plugin';
import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
import { Flex } from '@strapi/design-system/Flex';
import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack';
import { LinkButton } from '@strapi/design-system/LinkButton';
import { Main } from '@strapi/design-system/Main';
import { Typography } from '@strapi/design-system/Typography';
import adminPermissions from '../../permissions';
import MarketplacePicture from './assets/marketplace-coming-soon.png';
const CenterTypography = styled(Typography)`
text-align: center;
`;
const Img = styled.img`
width: ${190 / 16}rem;
`;
const StackCentered = styled(Stack)`
align-items: center;
`;
const MarketPlacePage = () => {
const { formatMessage } = useIntl();
@ -127,20 +32,77 @@ const MarketPlacePage = () => {
<CheckPagePermissions permissions={adminPermissions.marketplace.main}>
<Layout>
<Main>
<HeaderLayout
<Helmet
title={formatMessage({
id: 'app.components.InstallPluginPage.helmet',
id: 'admin.pages.MarketPlacePage.helmet',
defaultMessage: 'Marketplace - Plugins',
})}
/>
<HeaderLayout
title={formatMessage({
id: 'admin.pages.MarketPlacePage.title',
defaultMessage: 'Marketplace',
})}
subtitle={formatMessage({
id: 'admin.pages.MarketPlacePage.subtitle',
defaultMessage: 'Get more out of Strapi',
})}
/>
<ContentLayout>
<NoContent
content={{
id: 'coming.soon',
defaultMessage:
'This content is currently under construction and will be back in a few weeks!',
}}
/>
<StackCentered
size={0}
hasRadius
background="neutral0"
shadow="tableShadow"
paddingTop={10}
paddingBottom={10}
>
<Box paddingBottom={7}>
<Img
alt={formatMessage({
id: 'admin.pages.MarketPlacePage.illustration',
defaultMessage: 'marketplace illustration',
})}
src={MarketplacePicture}
/>
</Box>
<Typography variant="alpha">
{formatMessage({
id: 'admin.pages.MarketPlacePage.coming-soon.1',
defaultMessage: 'A new way to make Strapi awesome.',
})}
</Typography>
<Typography variant="alpha" textColor="primary700">
{formatMessage({
id: 'admin.pages.MarketPlacePage.coming-soon.2',
defaultMessage: 'A new way to make Strapi awesome.',
})}
</Typography>
<Flex maxWidth={pxToRem(580)} paddingTop={3}>
<CenterTypography variant="epsilon" textColor="neutral600">
{formatMessage({
id: 'admin.pages.MarketPlacePage.content.subtitle',
defaultMessage:
'The new marketplace will help you get more out of Strapi. We are working hard to offer the best experience to discover and install plugins.',
})}
</CenterTypography>
</Flex>
<Stack paddingTop={6} horizontal size={2}>
{/* Temporarily hidden until we have the right URL for the link */}
{/* <LinkButton href="https://strapi.io/" size="L" variant="secondary">
{formatMessage({
id: 'admin.pages.MarketPlacePage.submit.plugin.link',
defaultMessage: 'Submit your plugin',
})}
</LinkButton> */}
<LinkButton href="https://strapi.io/blog/strapi-market-is-coming-soon" size="L">
{formatMessage({
id: 'admin.pages.MarketPlacePage.blog.link',
defaultMessage: 'Read our blog post',
})}
</LinkButton>
</Stack>
</StackCentered>
</ContentLayout>
</Main>
</Layout>

View File

@ -0,0 +1,443 @@
import React from 'react';
import { render } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
import MarketPlacePage from '../index';
jest.mock('@strapi/helper-plugin', () => ({
pxToRem: jest.fn(),
CheckPagePermissions: ({ children }) => children,
}));
const App = (
<ThemeProvider theme={lightTheme}>
<IntlProvider locale="en" messages={{}} textComponent="span">
<MarketPlacePage />
</IntlProvider>
</ThemeProvider>
);
describe('Marketplace coming soon', () => {
it('renders and matches the snapshot', () => {
const {
container: { firstChild },
} = render(App);
expect(firstChild).toMatchInlineSnapshot(`
.c1 {
padding-bottom: 56px;
}
.c4 {
background: #f6f6f9;
padding-top: 56px;
padding-right: 56px;
padding-bottom: 56px;
padding-left: 56px;
}
.c9 {
padding-right: 56px;
padding-left: 56px;
}
.c0 {
display: grid;
grid-template-columns: 1fr;
}
.c2 {
overflow-x: hidden;
}
.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c7 {
color: #32324d;
font-weight: 600;
font-size: 2rem;
line-height: 1.25;
}
.c8 {
color: #666687;
font-size: 1rem;
line-height: 1.5;
}
.c17 {
padding-top: 12px;
}
.c18 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c13 {
padding-bottom: 32px;
}
.c10 {
background: #ffffff;
padding-top: 56px;
padding-bottom: 56px;
border-radius: 4px;
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c21 {
padding-top: 24px;
}
.c22 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c11 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c11 > * {
margin-top: 0;
margin-bottom: 0;
}
.c11 > * + * {
margin-top: 0px;
}
.c23 > * {
margin-left: 0;
margin-right: 0;
}
.c23 > * + * {
margin-left: 8px;
}
.c27 {
font-weight: 600;
color: #32324d;
font-size: 0.875rem;
line-height: 1.43;
}
.c24 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
cursor: pointer;
padding: 8px;
border-radius: 4px;
background: #ffffff;
border: 1px solid #dcdce4;
position: relative;
outline: none;
}
.c24 svg {
height: 12px;
width: 12px;
}
.c24 svg > g,
.c24 svg path {
fill: #ffffff;
}
.c24[aria-disabled='true'] {
pointer-events: none;
}
.c24:after {
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
border-radius: 8px;
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
border: 2px solid transparent;
}
.c24:focus-visible {
outline: none;
}
.c24:focus-visible:after {
border-radius: 8px;
content: '';
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
border: 2px solid #4945ff;
}
.c25 {
padding: 10px 16px;
background: #4945ff;
border: none;
border-radius: 4px;
border: 1px solid #4945ff;
background: #4945ff;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-text-decoration: none;
text-decoration: none;
}
.c25 .sc-bAffKu {
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;
}
.c25 .c26 {
color: #ffffff;
}
.c25[aria-disabled='true'] {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c25[aria-disabled='true'] .c26 {
color: #666687;
}
.c25[aria-disabled='true'] svg > g,
.c25[aria-disabled='true'] svg path {
fill: #666687;
}
.c25[aria-disabled='true']:active {
border: 1px solid #dcdce4;
background: #eaeaef;
}
.c25[aria-disabled='true']:active .c26 {
color: #666687;
}
.c25[aria-disabled='true']:active svg > g,
.c25[aria-disabled='true']:active svg path {
fill: #666687;
}
.c25:hover {
border: 1px solid #7b79ff;
background: #7b79ff;
}
.c25:active {
border: 1px solid #4945ff;
background: #4945ff;
}
.c3 {
outline: none;
}
.c15 {
color: #32324d;
font-weight: 600;
font-size: 2rem;
line-height: 1.25;
}
.c16 {
color: #271fe0;
font-weight: 600;
font-size: 2rem;
line-height: 1.25;
}
.c19 {
color: #666687;
font-size: 1rem;
line-height: 1.5;
}
.c20 {
text-align: center;
}
.c14 {
width: 11.875rem;
}
.c12 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div
class="c0"
>
<div
class="c1 c2"
>
<main
aria-labelledby="main-content-title"
class="c3"
id="main-content"
tabindex="-1"
>
<div
style="height: 0px;"
>
<div
class="c4"
data-strapi-header="true"
>
<div
class="c5"
>
<div
class="c6"
>
<h1
class="c7"
>
Marketplace
</h1>
</div>
</div>
<p
class="c8"
>
Get more out of Strapi
</p>
</div>
</div>
<div
class="c9"
>
<div
class="c10 c11 c12"
>
<div
class="c13"
>
<img
alt="marketplace illustration"
class="c14"
src="IMAGE_MOCK"
/>
</div>
<span
class="c15"
>
A new way to make Strapi awesome.
</span>
<span
class="c16"
>
A new way to make Strapi awesome.
</span>
<div
class="c17 c18"
>
<span
class="c19 c20"
>
The new marketplace will help you get more out of Strapi. We are working hard to offer the best experience to discover and install plugins.
</span>
</div>
<div
class="c21 c22 c23"
>
<a
aria-disabled="false"
class="c24 c25"
href="https://strapi.io/blog/strapi-market-is-coming-soon"
rel="noreferrer noopener"
target="_blank"
>
<span
class="c26 c27"
>
Read our blog post
</span>
</a>
</div>
</div>
</div>
</main>
</div>
</div>
`);
});
});

View File

@ -43,7 +43,7 @@ const ApplicationInfosPage = () => {
paddingLeft={6}
>
<Stack size={5}>
<Typography variant="delta">
<Typography variant="delta" as="h3">
{formatMessage({
id: 'Settings.application.information',
defaultMessage: 'Information',

View File

@ -309,11 +309,11 @@ describe('Application page', () => {
<div
class="c11"
>
<span
<h3
class="c12"
>
Information
</span>
</h3>
<div
class="c13 c14"
>

View File

@ -113,7 +113,7 @@ const ModalForm = ({ queryName, onToggle }) => {
<Stack size={6}>
{currentStep !== 'create' && <MagicLink registrationToken={registrationToken} />}
<Box>
<Typography variant="beta">
<Typography variant="beta" as="h2">
{formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.details',
defaultMessage: 'Details',
@ -142,7 +142,7 @@ const ModalForm = ({ queryName, onToggle }) => {
</Box>
</Box>
<Box>
<Typography variant="beta">
<Typography variant="beta" as="h2">
{formatMessage({
id: 'app.components.Users.ModalCreateBody.block-title.login',
defaultMessage: 'Login settings',

View File

@ -58,6 +58,15 @@
"Auth.privacy-policy-agreement.policy": "privacy policy",
"Auth.privacy-policy-agreement.terms": "terms",
"Auth.reset-password.title": "Reset password",
"admin.pages.MarketPlacePage.helmet": "Marketplace - Plugins",
"admin.pages.MarketPlacePage.illustration": "marketplace illustration",
"admin.pages.MarketPlacePage.title": "Marketplace",
"admin.pages.MarketPlacePage.subtitle": "Get more out of Strapi",
"admin.pages.MarketPlacePage.coming-soon.1": "A new way to make Strapi awesome.",
"admin.pages.MarketPlacePage.coming-soon.2": "Coming soon.",
"admin.pages.MarketPlacePage.content.subtitle": "The new marketplace will help you get more out of Strapi. We are working hard to offer the best experience to discover and install plugins.",
"admin.pages.MarketPlacePage.submit.plugin.link": "Submit your plugin",
"admin.pages.MarketPlacePage.blog.link": "Read our blog post",
"Content Manager": "Content Manager",
"Content Type Builder": "Content-Types Builder",
"Documentation": "Documentation",
@ -265,8 +274,6 @@
"app.components.InstallPluginPage.Download.description": "It might take a few seconds to download and install the plugin.",
"app.components.InstallPluginPage.Download.title": "Downloading...",
"app.components.InstallPluginPage.description": "Extend your app effortlessly.",
"app.components.InstallPluginPage.helmet": "Marketplace - Plugins",
"app.components.InstallPluginPage.title": "Marketplace - Plugins",
"app.components.LeftMenu.collapse": "Collapse the navbar",
"app.components.LeftMenu.expand": "Expand the navbar",
"app.components.LeftMenu.logout": "Logout",

View File

@ -194,7 +194,7 @@ const GenericInput = ({
placeholder={formattedPlaceholder}
required={required}
step={step}
value={value || undefined}
value={value ?? undefined}
/>
);
}