diff --git a/examples/kitchensink/package.json b/examples/kitchensink/package.json index fdb922e08e..bc6cdffc31 100644 --- a/examples/kitchensink/package.json +++ b/examples/kitchensink/package.json @@ -2,29 +2,39 @@ "name": "kitchensink", "private": true, "version": "0.1.0", - "description": "A Strapi application", + "description": "A Strapi application.", "scripts": { "develop": "strapi develop", + "develop:ce": "STRAPI_DISABLE_EE=true strapi develop", "start": "strapi start", "build": "strapi build", + "build:ce": "STRAPI_DISABLE_EE=true strapi build", "strapi": "strapi" }, - "devDependencies": {}, "dependencies": { - "@strapi/strapi": "3.6.8", - "@strapi/plugin-users-permissions": "3.6.8", + "@strapi/admin": "3.6.8", + "@strapi/plugin-documentation": "3.6.8", + "@strapi/plugin-graphql": "3.6.8", "@strapi/plugin-i18n": "3.6.8", - "sqlite3": "5.0.2" - }, - "author": { - "name": "A Strapi developer" + "@strapi/plugin-users-permissions": "3.6.8", + "@strapi/provider-email-mailgun": "3.6.8", + "@strapi/provider-upload-aws-s3": "3.6.8", + "@strapi/provider-upload-cloudinary": "3.6.8", + "@strapi/strapi": "3.6.8", + "@strapi/utils": "3.6.8", + "lodash": "4.17.21", + "mysql": "2.18.1", + "passport-google-oauth2": "0.2.0", + "pg": "8.6.0", + "sqlite3": "5.0.2", + "strapi-middleware-views": "3.6.8" }, "strapi": { - "uuid": "379fa84f-f1a0-4101-a6e7-40ee09ed3927" + "uuid": "getstarted" }, "engines": { - "node": ">=12.x.x <=14.x.x", - "npm": "^6.0.0" + "node": ">=12.x.x <=16.x.x", + "npm": ">=6.0.0" }, - "license": "MIT" + "license": "SEE LICENSE IN LICENSE" } diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js index cc20ea288d..d8193efafe 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js @@ -69,7 +69,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) => icon={} /> {visible && ( - + { pointer-events: none; } + .c6 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; + } + .c6 svg > g, .c6 svg path { fill: #8e8ea9; @@ -421,8 +438,6 @@ describe('Content manager | App | main', () => { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - height: 1.25rem; - width: 1rem; } .c12 { diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js index e65aed979b..49a93a6360 100644 --- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js +++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/tests/index.test.js @@ -555,6 +555,20 @@ describe('ADMIN | Pages | USERS | ListPage', () => { } .c36 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; border: none; } @@ -744,6 +758,23 @@ describe('ADMIN | Pages | USERS | ListPage', () => { pointer-events: none; } + .c20 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; + } + .c20 svg > g, .c20 svg path { fill: #8e8ea9; diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json index 72e0c49958..747dfe1aaa 100644 --- a/packages/core/admin/package.json +++ b/packages/core/admin/package.json @@ -40,8 +40,8 @@ "@fortawesome/react-fontawesome": "^0.1.14", "@strapi/babel-plugin-switch-ee-ce": "1.0.0", "@strapi/helper-plugin": "3.6.8", - "@strapi/icons": "0.0.1-alpha.36", - "@strapi/parts": "0.0.1-alpha.36", + "@strapi/icons": "0.0.1-alpha.37", + "@strapi/parts": "0.0.1-alpha.37", "@strapi/utils": "3.6.8", "axios": "^0.21.1", "babel-loader": "8.2.2", @@ -104,7 +104,7 @@ "react-helmet": "^6.1.0", "react-intl": "5.20.2", "react-loadable": "^5.5.0", - "react-query": "3.19.0", + "react-query": "3.24.3", "react-redux": "7.2.3", "react-router": "5.2.0", "react-router-dom": "5.2.0", diff --git a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap index 66dbd674ab..0a43d7be34 100644 --- a/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap +++ b/packages/core/content-type-builder/admin/src/components/ContentTypeBuilderNav/tests/__snapshots__/index.test.js.snap @@ -192,6 +192,23 @@ exports[` renders and matches the snapshot 1`] = ` margin: 0; } +.c6 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; +} + .c6 svg > g, .c6 svg path { fill: #8e8ea9; @@ -372,8 +389,6 @@ exports[` renders and matches the snapshot 1`] = ` -webkit-box-align: center; -ms-flex-align: center; align-items: center; - height: 1.25rem; - width: 1rem; } .c43 { diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap index 86076b837c..a79d579859 100644 --- a/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap +++ b/packages/core/content-type-builder/admin/src/pages/ListView/tests/__snapshots__/index.test.js.snap @@ -550,6 +550,20 @@ exports[` renders and matches the snapshot 1`] = ` } .c36 { + 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; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + height: 2rem; + width: 2rem; border: none; } diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json index 97f26378a8..8de38cf7d2 100644 --- a/packages/core/helper-plugin/package.json +++ b/packages/core/helper-plugin/package.json @@ -57,8 +57,8 @@ "@storybook/builder-webpack5": "^6.3.7", "@storybook/manager-webpack5": "^6.3.7", "@storybook/react": "^6.3.7", - "@strapi/icons": "0.0.1-alpha.36", - "@strapi/parts": "0.0.1-alpha.36", + "@strapi/icons": "0.0.1-alpha.37", + "@strapi/parts": "0.0.1-alpha.37", "babel-loader": "^8.2.2", "cross-env": "^7.0.3", "enzyme": "^3.8.0", diff --git a/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js index 701d0382a2..ed7473161a 100644 --- a/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js @@ -29,20 +29,22 @@ const IconWrapper = styled.span` } `; -export const DocAssetCard = ({ name, extension, selected, onSelect }) => { +export const DocAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => { const { formatMessage } = useIntl(); return ( {onSelect && } - - } - /> - - + {onEdit && ( + + } + /> + + )} + @@ -65,12 +67,16 @@ export const DocAssetCard = ({ name, extension, selected, onSelect }) => { DocAssetCard.defaultProps = { selected: false, + onEdit: undefined, onSelect: undefined, + size: 'M', }; DocAssetCard.propTypes = { extension: PropTypes.string.isRequired, name: PropTypes.string.isRequired, + onEdit: PropTypes.func, onSelect: PropTypes.func, selected: PropTypes.bool, + size: PropTypes.oneOf(['S', 'M']), }; diff --git a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js index 354ab650b2..0de6f73820 100644 --- a/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js @@ -30,6 +30,8 @@ export const ImageAssetCard = ({ thumbnail, selected, onSelect, + onEdit, + size, }) => { const { formatMessage } = useIntl(); @@ -37,13 +39,15 @@ export const ImageAssetCard = ({ {onSelect && } - - } - /> - - + {onEdit && ( + + } + /> + + )} + @@ -65,15 +69,19 @@ ImageAssetCard.defaultProps = { height: undefined, width: undefined, selected: false, + onEdit: undefined, onSelect: undefined, + size: 'M', }; ImageAssetCard.propTypes = { extension: PropTypes.string.isRequired, height: PropTypes.number, name: PropTypes.string.isRequired, + onEdit: PropTypes.func, onSelect: PropTypes.func, width: PropTypes.number, thumbnail: PropTypes.string.isRequired, selected: PropTypes.bool, + size: PropTypes.oneOf(['S', 'M']), }; diff --git a/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js index c554ff3a6d..2aba43b4f8 100644 --- a/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js @@ -28,20 +28,22 @@ const IconWrapper = styled.span` } `; -export const UnknownAssetCard = ({ name, extension, selected, onSelect }) => { +export const UnknownAssetCard = ({ name, extension, selected, onSelect, onEdit, size }) => { const { formatMessage } = useIntl(); return ( {onSelect && } - - } - /> - - + {onEdit && ( + + } + /> + + )} + @@ -61,12 +63,16 @@ export const UnknownAssetCard = ({ name, extension, selected, onSelect }) => { UnknownAssetCard.defaultProps = { selected: false, + onEdit: undefined, onSelect: undefined, + size: 'M', }; UnknownAssetCard.propTypes = { extension: PropTypes.string.isRequired, name: PropTypes.string.isRequired, + onEdit: PropTypes.func, onSelect: PropTypes.func, selected: PropTypes.bool, + size: PropTypes.oneOf(['S', 'M']), }; diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js new file mode 100644 index 0000000000..a97f906631 --- /dev/null +++ b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js @@ -0,0 +1,145 @@ +import React, { useEffect } from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { + Card, + CardBody, + CardContent, + CardHeader, + CardTitle, + CardSubtitle, + CardBadge, +} from '@strapi/parts/Card'; +import CloseAlertIcon from '@strapi/icons/CloseAlertIcon'; +import { Text } from '@strapi/parts/Text'; +import { Box } from '@strapi/parts/Box'; +import { Row } from '@strapi/parts/Row'; +import { Stack } from '@strapi/parts/Stack'; +import { ProgressBar } from '@strapi/parts/ProgressBar'; +import { useIntl } from 'react-intl'; +import { getTrad } from '../../utils'; +import { AssetType } from '../../constants'; +import { useUpload } from '../../hooks/useUpload'; + +const Extension = styled.span` + text-transform: uppercase; +`; + +const BoxWrapper = styled(Row)` + height: 88px; + width: 100%; + flex-direction: column; + + svg { + path { + fill: ${({ theme, error }) => (error ? theme.colors.danger600 : undefined)}; + } + } +`; + +const CancelButton = styled.button` + border: none; + background: none; + display: flex; + align-items: center; + + svg { + path { + fill: ${({ theme }) => theme.colors.neutral200}; + } + + height: 10px; + width: 10px; + } +`; + +export const UploadingAssetCard = ({ name, extension, assetType, file }) => { + const { upload, cancel, error, progress } = useUpload(); + const { formatMessage } = useIntl(); + + let badgeContent; + + if (assetType === AssetType.Image) { + badgeContent = formatMessage({ + id: getTrad('settings.section.image.label'), + defaultMessage: 'Image', + }); + } else if (assetType === AssetType.Video) { + badgeContent = formatMessage({ + id: getTrad('settings.section.video.label'), + defaultMessage: 'Video', + }); + } else { + badgeContent = formatMessage({ + id: getTrad('settings.section.doc.label'), + defaultMessage: 'Doc', + }); + } + + useEffect(() => { + upload(file); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + + + {error ? ( + + ) : ( + <> + + + {progress}/100% + + + + + + {formatMessage({ + id: 'app.components.Button.cancel', + defaultMessage: 'Cancel', + })} + + + + + + + )} + + + + + {name} + + {extension} + + + {badgeContent} + + + {error ? ( + + {error.message} + + ) : ( + undefined + )} + + ); +}; + +UploadingAssetCard.propTypes = { + assetType: PropTypes.oneOf(Object.values(AssetType)).isRequired, + extension: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + file: PropTypes.instanceOf(File).isRequired, +}; diff --git a/packages/core/upload/admin/src/components/AssetCard/VideoAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/VideoAssetCard.js index 343e5a565a..761f37840c 100644 --- a/packages/core/upload/admin/src/components/AssetCard/VideoAssetCard.js +++ b/packages/core/upload/admin/src/components/AssetCard/VideoAssetCard.js @@ -24,7 +24,16 @@ const Extension = styled.span` text-transform: uppercase; `; -export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect }) => { +export const VideoAssetCard = ({ + name, + extension, + url, + mime, + selected, + onSelect, + onEdit, + size, +}) => { const { formatMessage } = useIntl(); const [duration, setDuration] = useState(); const formattedDuration = duration ? formatDuration(duration) : undefined; @@ -33,14 +42,16 @@ export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect {onSelect && } - - } - /> - - - + {onEdit && ( + + } + /> + + )} + + {formattedDuration || '...'} @@ -52,7 +63,7 @@ export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect - {formatMessage({ id: getTrad('settings.section.video.label'), defaultMessage: 'Doc' })} + {formatMessage({ id: getTrad('settings.section.video.label'), defaultMessage: 'Video' })} @@ -61,7 +72,9 @@ export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect VideoAssetCard.defaultProps = { onSelect: undefined, + onEdit: undefined, selected: false, + size: 'M', }; VideoAssetCard.propTypes = { @@ -69,6 +82,8 @@ VideoAssetCard.propTypes = { mime: PropTypes.string.isRequired, name: PropTypes.string.isRequired, onSelect: PropTypes.func, + onEdit: PropTypes.func, url: PropTypes.string.isRequired, selected: PropTypes.bool, + size: PropTypes.oneOf(['S', 'M']), }; diff --git a/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js b/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js index 1b6e378faf..35b2d7f42b 100644 --- a/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js +++ b/packages/core/upload/admin/src/components/AssetCard/VideoPreview.js @@ -7,11 +7,11 @@ const VideoPreviewWrapper = styled.div` canvas { display: block; max-width: 100%; - max-height: 100%; + max-height: ${({ size }) => (size === 'M' ? 164 / 16 : 88 / 16)}rem; } `; -export const VideoPreview = ({ url, mime, onLoadDuration }) => { +export const VideoPreview = ({ url, mime, onLoadDuration, size }) => { const [loaded, setLoaded] = useState(false); const videoRef = useRef(null); const canvasRef = useRef(null); @@ -29,7 +29,7 @@ export const VideoPreview = ({ url, mime, onLoadDuration }) => { }; return ( - + {!loaded && (