From 38d1a5582edcbeb741192242c3a2f7d3eff0b40c Mon Sep 17 00:00:00 2001 From: Marvin Frachet Date: Wed, 22 Sep 2021 14:13:52 +0200 Subject: [PATCH 1/5] ML iteration (#11042) --- .../src/components/AssetCard/DocAssetCard.js | 22 +- .../components/AssetCard/ImageAssetCard.js | 22 +- .../components/AssetCard/UnknownAssetCard.js | 22 +- .../AssetCard/UploadingAssetCard.js | 145 ++++++ .../components/AssetCard/VideoAssetCard.js | 35 +- .../src/components/AssetCard/VideoPreview.js | 11 +- .../AssetCard/tests/DocAssetCard.test.js | 452 ++++++++++++++++++ .../AssetCard/tests/ImageAssetCard.test.js | 169 +++++-- .../AssetCard/tests/UnknownAssetCard.test.js | 121 +---- .../AddAssetStep/FromComputerForm.js | 1 + .../AddAssetStep/tests/FromUrlForm.test.js | 4 + .../PendingAssetStep/PendingAssetStep.js | 40 +- .../tests/PendingAssetStep.test.js | 371 ++++---------- .../core/upload/admin/src/hooks/useUpload.js | 64 ++- .../App/components/tests/ListView.test.js | 259 +++------- .../upload/admin/src/translations/en.json | 1 + .../upload/admin/src/utils/urlsToAssets.js | 3 + 17 files changed, 1045 insertions(+), 697 deletions(-) create mode 100644 packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js create mode 100644 packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js 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 && (