yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-14 17:19:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

coming soon page for marketplace - plugins - medialib

Browse Source
This commit is contained in:
ronronscelestes 2021-09-27 17:40:40 +02:00
parent 8245603a5d
commit 99bec3ca94
4 changed files with 214 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/core/admin/admin/src/pages/InstalledPluginsPage/index.js
View File

@ -80,12 +80,40 @@
// }; // };
// export default InstalledPluginsPage; // export default InstalledPluginsPage;
import React from 'react'; import React from 'react';
import { CheckPagePermissions } from '@strapi/helper-plugin'; import { CheckPagePermissions, NoContent } from '@strapi/helper-plugin';
import { useIntl } from 'react-intl';
import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
import { Main } from '@strapi/parts/Main';
import adminPermissions from '../../permissions'; import adminPermissions from '../../permissions';
export default () => ( const InstalledPluginsPage = () => {
const { formatMessage } = useIntl();
return (
<CheckPagePermissions permissions={adminPermissions.marketplace.main}> <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
InstalledPluginsPage <Layout>
<Main>
<HeaderLayout
title={formatMessage({
id: 'app.components.ListPluginsPage.helmet.title',
defaultMessage: 'List plugins',
})}
/>
<ContentLayout>
<NoContent
content={{
id: 'coming soon',
defaultMessage:
'This content is currently under construction and will be back in a few weeks!',
}}
/>
</ContentLayout>
</Main>
</Layout>
</CheckPagePermissions> </CheckPagePermissions>
); );
};
export default InstalledPluginsPage;

35
packages/core/admin/admin/src/pages/MarketplacePage/index.js
View File

@ -8,6 +8,7 @@ import {
// useTracking, // useTracking,
// useStrapiApp, // useStrapiApp,
CheckPagePermissions, CheckPagePermissions,
NoContent,
} from '@strapi/helper-plugin'; } from '@strapi/helper-plugin';
// import { Header } from '@buffetjs/custom'; // import { Header } from '@buffetjs/custom';
// import { useIntl } from 'react-intl'; // import { useIntl } from 'react-intl';
@ -17,7 +18,6 @@ import {
// import PluginCard from './PluginCard'; // import PluginCard from './PluginCard';
// import Wrapper from './Wrapper'; // import Wrapper from './Wrapper';
// import MarketplaceBanner from './MarketplaceBanner'; // import MarketplaceBanner from './MarketplaceBanner';
import adminPermissions from '../../permissions';
// const MarketPlacePage = () => { // const MarketPlacePage = () => {
// const toggleNotification = useNotification(); // const toggleNotification = useNotification();
@ -115,8 +115,37 @@ import adminPermissions from '../../permissions';
// ); // );
// }; // };
export default () => ( import { useIntl } from 'react-intl';
import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
import { Main } from '@strapi/parts/Main';
import adminPermissions from '../../permissions';
const MarketPlacePage = () => {
const { formatMessage } = useIntl();
return (
<CheckPagePermissions permissions={adminPermissions.marketplace.main}> <CheckPagePermissions permissions={adminPermissions.marketplace.main}>
MarketplacePage <Layout>
<Main>
<HeaderLayout
title={formatMessage({
id: 'app.components.InstallPluginPage.helmet',
defaultMessage: 'Marketplace - Plugins',
})}
/>
<ContentLayout>
<NoContent
content={{
id: 'coming soon',
defaultMessage:
'This content is currently under construction and will be back in a few weeks!',
}}
/>
</ContentLayout>
</Main>
</Layout>
</CheckPagePermissions> </CheckPagePermissions>
); );
};
export default MarketPlacePage;

259
packages/core/upload/admin/src/pages/App/index.js
View File

@ -1,146 +1,175 @@
import React, { useState } from 'react'; import React from // useState
import { Redirect } from 'react-router-dom'; 'react';
// import { Redirect } from 'react-router-dom';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import styled from 'styled-components'; // import styled from 'styled-components';
import { import {
LoadingIndicatorPage, // LoadingIndicatorPage,
useRBAC, // useRBAC,
useFocusWhenNavigate, // useFocusWhenNavigate,
NoPermissions, // NoPermissions,
NoMedia, // NoMedia,
AnErrorOccurred, // AnErrorOccurred,
Search, // Search,
NoContent,
} from '@strapi/helper-plugin'; } from '@strapi/helper-plugin';
import { Layout, HeaderLayout, ContentLayout, ActionLayout } from '@strapi/parts/Layout'; import {
Layout,
HeaderLayout,
ContentLayout,
// ActionLayout
} from '@strapi/parts/Layout';
import { Main } from '@strapi/parts/Main'; import { Main } from '@strapi/parts/Main';
import { Button } from '@strapi/parts/Button'; // import { Button } from '@strapi/parts/Button';
import AddIcon from '@strapi/icons/AddIcon'; // import AddIcon from '@strapi/icons/AddIcon';
import { Box } from '@strapi/parts/Box'; // import { Box } from '@strapi/parts/Box';
import { BaseCheckbox } from '@strapi/parts/BaseCheckbox'; // import { BaseCheckbox } from '@strapi/parts/BaseCheckbox';
import { UploadAssetDialog } from '../../components/UploadAssetDialog/UploadAssetDialog'; // import { UploadAssetDialog } from '../../components/UploadAssetDialog/UploadAssetDialog';
import { ListView } from './components/ListView'; // import { ListView } from './components/ListView';
import { useAssets } from '../../hooks/useAssets'; // import { useAssets } from '../../hooks/useAssets';
import { getTrad } from '../../utils'; import { getTrad } from '../../utils';
import pluginPermissions from '../../permissions'; // import pluginPermissions from '../../permissions';
import { Filters } from './components/Filters'; // import { Filters } from './components/Filters';
const BoxWithHeight = styled(Box)` // const BoxWithHeight = styled(Box)`
height: ${32 / 16}rem; // height: ${32 / 16}rem;
display: flex; // display: flex;
align-items: center; // align-items: center;
`; // `;
const App = () => { const App = () => {
const state = useRBAC(pluginPermissions); // const state = useRBAC(pluginPermissions);
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { data, isLoading, error } = useAssets({ // const { data, isLoading, error } = useAssets({
skipWhen: !state.allowedActions.canMain, // skipWhen: !state.allowedActions.canMain,
}); // });
const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false); // const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
const toggleUploadAssetDialog = () => setShowUploadAssetDialog(prev => !prev); // const toggleUploadAssetDialog = () => setShowUploadAssetDialog(prev => !prev);
useFocusWhenNavigate(); // useFocusWhenNavigate();
const canRead = state.allowedActions.canMain; // const canRead = state.allowedActions.canMain;
const loading = state.isLoading || isLoading; // const loading = state.isLoading || isLoading;
if (!loading && !canRead) { // if (!loading && !canRead) {
return <Redirect to="/" />; // return <Redirect to="/" />;
} // }
return ( return (
<Layout> <Layout>
<Main aria-busy={loading}> <Main>
<HeaderLayout <HeaderLayout
title={formatMessage({ title={formatMessage({
id: getTrad('plugin.name'), id: getTrad('plugin.name'),
defaultMessage: 'Media Library', defaultMessage: 'Media Library',
})} })}
subtitle={formatMessage(
{
id: getTrad(
data?.length > 0
? 'header.content.assets-multiple'
: 'header.content.assets.assets-single'
),
defaultMessage: '0 assets',
},
{ number: data?.length || 0 }
)}
primaryAction={
<Button startIcon={<AddIcon />} onClick={toggleUploadAssetDialog}>
{formatMessage({
id: getTrad('header.actions.upload-assets'),
defaultMessage: 'Upload new assets',
})}
</Button>
}
/> />
<ActionLayout
startActions={
<>
<BoxWithHeight
paddingLeft={2}
paddingRight={2}
background="neutral0"
hasRadius
borderColor="neutral200"
>
<BaseCheckbox
aria-label={formatMessage({
id: getTrad('bulk.select.label'),
defaultMessage: 'Select all assets',
})}
/>
</BoxWithHeight>
<Filters />
</>
}
endActions={
<Search
label={formatMessage({
id: getTrad('search.label'),
defaultMessage: 'Search for an asset',
})}
/>
}
/>
<ContentLayout> <ContentLayout>
{loading && <LoadingIndicatorPage />} <NoContent
{error && <AnErrorOccurred />} content={{
{!canRead && <NoPermissions />} id: 'coming soon',
{canRead && data && data.length === 0 && ( defaultMessage:
<NoMedia 'This content is currently under construction and will be back in a few weeks!',
action={ }}
<Button
variant="secondary"
startIcon={<AddIcon />}
onClick={toggleUploadAssetDialog}
>
{formatMessage({
id: getTrad('modal.header.browse'),
defaultMessage: 'Upload assets',
})}
</Button>
}
content={formatMessage({
id: getTrad('list.assets.empty'),
defaultMessage: 'Upload your first assets...',
})}
/> />
)}
{canRead && data && data.length > 0 && <ListView assets={data} />}
</ContentLayout> </ContentLayout>
</Main> </Main>
{showUploadAssetDialog && (
<UploadAssetDialog onClose={toggleUploadAssetDialog} onSuccess={() => {}} />
)}
</Layout> </Layout>
); );
// return (
// <Layout>
// <Main aria-busy={loading}>
// <HeaderLayout
// title={formatMessage({
// id: getTrad('plugin.name'),
// defaultMessage: 'Media Library',
// })}
// subtitle={formatMessage(
// {
// id: getTrad(
// data?.length > 0
// ? 'header.content.assets-multiple'
// : 'header.content.assets.assets-single'
// ),
// defaultMessage: '0 assets',
// },
// { number: data?.length || 0 }
// )}
// primaryAction={
// <Button startIcon={<AddIcon />} onClick={toggleUploadAssetDialog}>
// {formatMessage({
// id: getTrad('header.actions.upload-assets'),
// defaultMessage: 'Upload new assets',
// })}
// </Button>
// }
// />
// <ActionLayout
// startActions={
// <>
// <BoxWithHeight
// paddingLeft={2}
// paddingRight={2}
// background="neutral0"
// hasRadius
// borderColor="neutral200"
// >
// <BaseCheckbox
// aria-label={formatMessage({
// id: getTrad('bulk.select.label'),
// defaultMessage: 'Select all assets',
// })}
// />
// </BoxWithHeight>
// <Filters />
// </>
// }
// endActions={
// <Search
// label={formatMessage({
// id: getTrad('search.label'),
// defaultMessage: 'Search for an asset',
// })}
// />
// }
// />
// <ContentLayout>
// {loading && <LoadingIndicatorPage />}
// {error && <AnErrorOccurred />}
// {!canRead && <NoPermissions />}
// {canRead && data && data.length === 0 && (
// <NoMedia
// action={
// <Button
// variant="secondary"
// startIcon={<AddIcon />}
// onClick={toggleUploadAssetDialog}
// >
// {formatMessage({
// id: getTrad('modal.header.browse'),
// defaultMessage: 'Upload assets',
// })}
// </Button>
// }
// content={formatMessage({
// id: getTrad('list.assets.empty'),
// defaultMessage: 'Upload your first assets...',
// })}
// />
// )}
// {canRead && data && data.length > 0 && <ListView assets={data} />}
// </ContentLayout>
// </Main>
// {showUploadAssetDialog && (
// <UploadAssetDialog onClose={toggleUploadAssetDialog} onSuccess={() => {}} />
// )}
// </Layout>
// );
}; };
export default App; export default App;

0
packages/core/upload/admin/src/pages/App/tests/App.test.js → packages/core/upload/admin/src/pages/App/tests/App.test.todo.js
View File