yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-12-30 00:37:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Upload pending selected (#11023)

Browse Source
This commit is contained in:
Marvin Frachet 2021-09-21 15:25:50 +02:00 committed by GitHub
parent 1cb6275a16
commit 2f3f5790b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 901 additions and 1160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/core/upload/admin/src/components/AssetCard/DocAssetCard.js
View File

@ -29,13 +29,13 @@ const IconWrapper = styled.span`
}
`;
export const DocAssetCard = ({ name, extension }) => {
export const DocAssetCard = ({ name, extension, selected, onSelect }) => {
const { formatMessage } = useIntl();
return (
<Card>
<CardHeader>
<CardCheckbox value />
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
<CardAction position="end">
<IconButton
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
@ -63,7 +63,14 @@ export const DocAssetCard = ({ name, extension }) => {
);
};
DocAssetCard.defaultProps = {
selected: false,
onSelect: undefined,
};
DocAssetCard.propTypes = {
extension: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onSelect: PropTypes.func,
selected: PropTypes.bool,
};

16
packages/core/upload/admin/src/components/AssetCard/ImageAssetCard.js
View File

@ -22,13 +22,21 @@ const Extension = styled.span`
text-transform: uppercase;
`;
export const ImageAssetCard = ({ name, extension, height, width, thumbnail }) => {
export const ImageAssetCard = ({
name,
extension,
height,
width,
thumbnail,
selected,
onSelect,
}) => {
const { formatMessage } = useIntl();
return (
<Card>
<CardHeader>
<CardCheckbox value />
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
<CardAction position="end">
<IconButton
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
@ -56,12 +64,16 @@ export const ImageAssetCard = ({ name, extension, height, width, thumbnail }) =>
ImageAssetCard.defaultProps = {
height: undefined,
width: undefined,
selected: false,
onSelect: undefined,
};
ImageAssetCard.propTypes = {
extension: PropTypes.string.isRequired,
height: PropTypes.number,
name: PropTypes.string.isRequired,
onSelect: PropTypes.func,
width: PropTypes.number,
thumbnail: PropTypes.string.isRequired,
selected: PropTypes.bool,
};

11
packages/core/upload/admin/src/components/AssetCard/UnknownAssetCard.js
View File

@ -28,13 +28,13 @@ const IconWrapper = styled.span`
}
`;
export const UnknownAssetCard = ({ name, extension }) => {
export const UnknownAssetCard = ({ name, extension, selected, onSelect }) => {
const { formatMessage } = useIntl();
return (
<Card>
<CardHeader>
<CardCheckbox value />
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
<CardAction position="end">
<IconButton
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
@ -59,7 +59,14 @@ export const UnknownAssetCard = ({ name, extension }) => {
);
};
UnknownAssetCard.defaultProps = {
selected: false,
onSelect: undefined,
};
UnknownAssetCard.propTypes = {
extension: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onSelect: PropTypes.func,
selected: PropTypes.bool,
};

11
packages/core/upload/admin/src/components/AssetCard/VideoAssetCard.js
View File

@ -24,7 +24,7 @@ const Extension = styled.span`
text-transform: uppercase;
`;
export const VideoAssetCard = ({ name, extension, url, mime }) => {
export const VideoAssetCard = ({ name, extension, url, mime, selected, onSelect }) => {
const { formatMessage } = useIntl();
const [duration, setDuration] = useState();
const formattedDuration = duration ? formatDuration(duration) : undefined;
@ -32,7 +32,7 @@ export const VideoAssetCard = ({ name, extension, url, mime }) => {
return (
<Card>
<CardHeader>
<CardCheckbox value />
{onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
<CardAction position="end">
<IconButton
label={formatMessage({ id: getTrad('control-card.edit'), defaultMessage: 'Edit' })}
@ -59,9 +59,16 @@ export const VideoAssetCard = ({ name, extension, url, mime }) => {
);
};
VideoAssetCard.defaultProps = {
onSelect: undefined,
selected: false,
};
VideoAssetCard.propTypes = {
extension: PropTypes.string.isRequired,
mime: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onSelect: PropTypes.func,
url: PropTypes.string.isRequired,
selected: PropTypes.bool,
};

167
packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
View File

@ -28,7 +28,7 @@ describe('ImageAssetCard', () => {
);
expect(container).toMatchInlineSnapshot(`
.c23 {
.c21 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -46,14 +46,14 @@ describe('ImageAssetCard', () => {
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c10 {
.c8 {
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}
.c17 {
.c15 {
background: #f6f6f9;
color: #666687;
padding: 4px;
@ -61,12 +61,6 @@ describe('ImageAssetCard', () => {
}
.c3 {
position: absolute;
top: 12px;
left: 12px;
}
.c5 {
position: absolute;
top: 12px;
right: 12px;
@ -90,7 +84,7 @@ describe('ImageAssetCard', () => {
align-items: center;
}
.c11 {
.c9 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -104,14 +98,14 @@ describe('ImageAssetCard', () => {
align-items: flex-start;
}
.c9 {
.c7 {
margin: 0;
padding: 0;
max-height: 100%;
max-width: 100%;
}
.c8 {
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -125,119 +119,52 @@ describe('ImageAssetCard', () => {
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
}
.c13 {
.c11 {
font-weight: 500;
font-size: 0.75rem;
line-height: 1.33;
color: #32324d;
}
.c14 {
.c12 {
font-weight: 400;
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
}
.c20 {
.c18 {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c21 {
.c19 {
font-weight: 600;
line-height: 1.14;
}
.c22 {
.c20 {
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}
.c18 {
.c16 {
display: inline-block;
}
.c16 {
.c14 {
margin-left: auto;
}
.c19 {
.c17 {
margin-left: 4px;
}
.c4 {
margin: 0;
height: 18px;
min-width: 18px;
border-radius: 4px;
border: 1px solid #c0c0cf;
-webkit-appearance: none;
background-color: #ffffff;
}
.c4:checked {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c4:checked:after {
content: '';
display: block;
position: relative;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
width: 10px;
height: 10px;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.c4:checked:disabled:after {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
}
.c4:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c4:indeterminate {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c4:indeterminate:after {
content: '';
display: block;
position: relative;
color: white;
height: 2px;
width: 10px;
background-color: #ffffff;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.c4:indeterminate:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c4:indeterminate:disabled:after {
background-color: #8e8ea9;
}
.c12 {
.c10 {
word-break: break-all;
}
@ -246,7 +173,7 @@ describe('ImageAssetCard', () => {
border-bottom: 1px solid #eaeaef;
}
.c6 {
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -258,44 +185,44 @@ describe('ImageAssetCard', () => {
border: 1px solid #dcdce4;
}
.c6 svg {
.c4 svg {
height: 12px;
width: 12px;
}
.c6 svg > g,
.c6 svg path {
.c4 svg > g,
.c4 svg path {
fill: #ffffff;
}
.c6[aria-disabled='true'] {
.c4[aria-disabled='true'] {
pointer-events: none;
}
.c7 svg > g,
.c7 svg path {
.c5 svg > g,
.c5 svg path {
fill: #8e8ea9;
}
.c7:hover svg > g,
.c7:hover svg path {
.c5:hover svg > g,
.c5:hover svg path {
fill: #666687;
}
.c7:active svg > g,
.c7:active svg path {
.c5:active svg > g,
.c5:active svg path {
fill: #a5a5ba;
}
.c7[aria-disabled='true'] {
.c5[aria-disabled='true'] {
background-color: #eaeaef;
}
.c7[aria-disabled='true'] svg path {
.c5[aria-disabled='true'] svg path {
fill: #666687;
}
.c15 {
.c13 {
text-transform: uppercase;
}
@ -310,22 +237,12 @@ describe('ImageAssetCard', () => {
>
<div
class="c3"
>
<input
aria-labelledby="card-1-title"
checked=""
class="c4"
type="checkbox"
/>
</div>
<div
class="c5"
>
<span>
<button
aria-disabled="false"
aria-labelledby="tooltip-1"
class="c6 c7"
class="c4 c5"
tabindex="0"
type="button"
>
@ -347,35 +264,35 @@ describe('ImageAssetCard', () => {
</span>
</div>
<div
class="c8"
class="c6"
>
<img
aria-hidden="true"
class="c9"
class="c7"
src="http://somewhere.com/hello.png"
/>
</div>
</div>
<div
class="c10"
class="c8"
>
<div
class="c11"
class="c9"
>
<div
class="c12"
class="c10"
>
<h2
class="c13"
class="c11"
id="card-1-title"
>
hello.png
</h2>
<div
class="c14"
class="c12"
>
<span
class="c15"
class="c13"
>
png
</span>
@ -383,13 +300,13 @@ describe('ImageAssetCard', () => {
</div>
</div>
<div
class="c16"
class="c14"
>
<div
class="c17 c18 c19"
class="c15 c16 c17"
>
<span
class="c20 c21 c22"
class="c18 c19 c20"
>
Image
</span>
@ -399,7 +316,7 @@ describe('ImageAssetCard', () => {
</div>
</article>
<div
class="c23"
class="c21"
>
<p
aria-live="polite"

151
packages/core/upload/admin/src/components/AssetCard/tests/UnknownAssetCard.test.js
View File

@ -22,7 +22,7 @@ describe('UnknownAssetCard', () => {
);
expect(container).toMatchInlineSnapshot(`
.c17 {
.c15 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -40,7 +40,7 @@ describe('UnknownAssetCard', () => {
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c11 {
.c9 {
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
@ -48,12 +48,6 @@ describe('UnknownAssetCard', () => {
}
.c3 {
position: absolute;
top: 12px;
left: 12px;
}
.c5 {
position: absolute;
top: 12px;
right: 12px;
@ -77,7 +71,7 @@ describe('UnknownAssetCard', () => {
align-items: center;
}
.c9 {
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -91,7 +85,7 @@ describe('UnknownAssetCard', () => {
align-items: center;
}
.c12 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -105,7 +99,7 @@ describe('UnknownAssetCard', () => {
align-items: flex-start;
}
.c8 {
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -119,88 +113,21 @@ describe('UnknownAssetCard', () => {
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
}
.c14 {
.c12 {
font-weight: 500;
font-size: 0.75rem;
line-height: 1.33;
color: #32324d;
}
.c15 {
.c13 {
font-weight: 400;
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
}
.c4 {
margin: 0;
height: 18px;
min-width: 18px;
border-radius: 4px;
border: 1px solid #c0c0cf;
-webkit-appearance: none;
background-color: #ffffff;
}
.c4:checked {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c4:checked:after {
content: '';
display: block;
position: relative;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
width: 10px;
height: 10px;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.c4:checked:disabled:after {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
}
.c4:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c4:indeterminate {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c4:indeterminate:after {
content: '';
display: block;
position: relative;
color: white;
height: 2px;
width: 10px;
background-color: #ffffff;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.c4:indeterminate:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c4:indeterminate:disabled:after {
background-color: #8e8ea9;
}
.c13 {
.c11 {
word-break: break-all;
}
@ -209,7 +136,7 @@ describe('UnknownAssetCard', () => {
border-bottom: 1px solid #eaeaef;
}
.c6 {
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -221,48 +148,48 @@ describe('UnknownAssetCard', () => {
border: 1px solid #dcdce4;
}
.c6 svg {
.c4 svg {
height: 12px;
width: 12px;
}
.c6 svg > g,
.c6 svg path {
.c4 svg > g,
.c4 svg path {
fill: #ffffff;
}
.c6[aria-disabled='true'] {
.c4[aria-disabled='true'] {
pointer-events: none;
}
.c7 svg > g,
.c7 svg path {
.c5 svg > g,
.c5 svg path {
fill: #8e8ea9;
}
.c7:hover svg > g,
.c7:hover svg path {
.c5:hover svg > g,
.c5:hover svg path {
fill: #666687;
}
.c7:active svg > g,
.c7:active svg path {
.c5:active svg > g,
.c5:active svg path {
fill: #a5a5ba;
}
.c7[aria-disabled='true'] {
.c5[aria-disabled='true'] {
background-color: #eaeaef;
}
.c7[aria-disabled='true'] svg path {
.c5[aria-disabled='true'] svg path {
fill: #666687;
}
.c16 {
.c14 {
text-transform: uppercase;
}
.c10 svg {
.c8 svg {
font-size: 3rem;
}
@ -277,22 +204,12 @@ describe('UnknownAssetCard', () => {
>
<div
class="c3"
>
<input
aria-labelledby="card-1-title"
checked=""
class="c4"
type="checkbox"
/>
</div>
<div
class="c5"
>
<span>
<button
aria-disabled="false"
aria-labelledby="tooltip-1"
class="c6 c7"
class="c4 c5"
tabindex="0"
type="button"
>
@ -314,13 +231,13 @@ describe('UnknownAssetCard', () => {
</span>
</div>
<div
class="c8"
class="c6"
>
<div
class="c9"
class="c7"
>
<span
class="c10"
class="c8"
>
<svg
aria-label="hello.png"
@ -407,25 +324,25 @@ describe('UnknownAssetCard', () => {
</div>
</div>
<div
class="c11"
class="c9"
>
<div
class="c12"
class="c10"
>
<div
class="c13"
class="c11"
>
<h2
class="c14"
class="c12"
id="card-1-title"
>
hello.png
</h2>
<div
class="c15"
class="c13"
>
<span
class="c16"
class="c14"
>
png
</span>
@ -435,7 +352,7 @@ describe('UnknownAssetCard', () => {
</div>
</article>
<div
class="c17"
class="c15"
>
<p
aria-live="polite"

1
packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/FromComputerForm.js
View File

@ -54,6 +54,7 @@ export const FromComputerForm = ({ onClose, onAddAssets }) => {
url: URL.createObjectURL(file),
ext: file.name.split('.').pop(),
mime: file.type,
rawFile: file,
});
}

2
packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
View File

@ -14,7 +14,7 @@ jest.mock('react-intl', () => ({
}));
describe('FromComputerForm', () => {
it('snapshots the component with 4 URLs: 3 valid and one in failure', async () => {
it('snapshots the component', async () => {
const { container } = renderTL(
<ThemeProvider theme={lightTheme}>
<FromComputerForm onClose={jest.fn()} onAddAssets={jest.fn()} />

4
packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromUrlForm.test.js
View File

@ -45,6 +45,7 @@ describe('FromUrlForm', () => {
source: 'url',
type: 'image',
url: 'http://localhost:5000/an-image.png',
rawFile: new File([''], 'image/png'),
},
{
ext: 'pdf',
@ -52,6 +53,7 @@ describe('FromUrlForm', () => {
source: 'url',
type: 'doc',
url: 'http://localhost:5000/a-pdf.pdf',
rawFile: new File([''], 'application/pdf'),
},
{
ext: 'mp4',
@ -59,6 +61,7 @@ describe('FromUrlForm', () => {
source: 'url',
type: 'video',
url: 'http://localhost:5000/a-video.mp4',
rawFile: new File([''], 'video/mp4'),
},
{
ext: 'lutin',
@ -66,6 +69,7 @@ describe('FromUrlForm', () => {
source: 'url',
type: 'doc',
url: 'http://localhost:5000/not-working-like-cors.lutin',
rawFile: new File([''], 'something/weird'),
},
];
await waitFor(() => expect(onAddAssetSpy).toHaveBeenCalledWith(expectedAssets));

18
packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js
View File

@ -14,12 +14,20 @@ import { VideoAssetCard } from '../../AssetCard/VideoAssetCard';
import { UnknownAssetCard } from '../../AssetCard/UnknownAssetCard';
import { getTrad } from '../../../utils';
import { AssetType, AssetSource } from '../../../constants';
import { useUpload } from '../../../hooks/useUpload';
export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
const { formatMessage } = useIntl();
const { upload, isLoading } = useUpload(assets, onClose);
const handleSubmit = async e => {
e.preventDefault();
await upload();
};
return (
<>
<form onSubmit={handleSubmit}>
<ModalHeader>
<ButtonText textColor="neutral800" as="h2" id="title">
{formatMessage({
@ -39,7 +47,7 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
id: getTrad('list.assets.selected.plural'),
defaultMessage: '0 asset selected',
},
{ number: 0 }
{ number: assets.length }
)}
</Text>
<Text small textColor="neutral600">
@ -116,18 +124,18 @@ export const PendingAssetStep = ({ onClose, assets, onClickAddAsset }) => {
</Button>
}
endActions={
<Button type="submit">
<Button type="submit" loading={isLoading}>
{formatMessage(
{
id: getTrad('modal.upload-list.footer.button.singular'),
defaultMessage: 'Upload assets',
},
{ number: 0 }
{ number: assets.length }
)}
</Button>
}
/>
</>
</form>
);
};

1334
packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/PendingAssetStep.test.js
View File

File diff suppressed because it is too large Load Diff

54
packages/core/upload/admin/src/hooks/useUpload.js Normal file
View File

@ -0,0 +1,54 @@
import axios from 'axios';
import { useMutation, useQueryClient } from 'react-query';
import { axiosInstance } from '../utils';
import pluginId from '../pluginId';
const endpoint = `/${pluginId}`;
const uploadAssets = async cancellableAssets => {
const requests = cancellableAssets.map(({ rawFile, cancelToken }) => {
const formData = new FormData();
formData.append('files', rawFile);
formData.append('fileInfo', JSON.stringify(rawFile));
return axiosInstance({
method: 'post',
url: endpoint,
cancelToken,
headers: {},
data: formData,
});
});
return Promise.allSettled(requests);
};
export const useUpload = (assets, onSuccess) => {
const queryClient = useQueryClient();
const cancellableAssets = assets.map(asset => ({
...asset,
cancelToken: axios.CancelToken.source().token,
}));
const mutation = useMutation(uploadAssets, {
onSuccess: res => {
const assets = res
.map(assetResponse => assetResponse.value.data)
.reduce((acc, curr) => acc.concat(curr), []);
// Coupled with the cache of useAssets
queryClient.setQueryData('assets', cachedAssets => cachedAssets.concat(assets));
onSuccess();
},
});
const cancel = index => {
cancellableAssets[index].cancelToken.cancel('Operation canceled by the user.');
};
const upload = () => mutation.mutate(cancellableAssets);
return { upload, cancel, isError: mutation.isError, isLoading: mutation.isLoading };
};

263
packages/core/upload/admin/src/pages/App/components/tests/ListView.test.js
View File

@ -127,7 +127,7 @@ describe('MediaLibrary / ListView', () => {
);
expect(container).toMatchInlineSnapshot(`
.c32 {
.c30 {
border: 0;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
@ -145,7 +145,7 @@ describe('MediaLibrary / ListView', () => {
grid-gap: 16px;
}
.c7 {
.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -157,40 +157,40 @@ describe('MediaLibrary / ListView', () => {
border: 1px solid #dcdce4;
}
.c7 svg {
.c5 svg {
height: 12px;
width: 12px;
}
.c7 svg > g,
.c7 svg path {
.c5 svg > g,
.c5 svg path {
fill: #ffffff;
}
.c7[aria-disabled='true'] {
.c5[aria-disabled='true'] {
pointer-events: none;
}
.c8 svg > g,
.c8 svg path {
.c6 svg > g,
.c6 svg path {
fill: #8e8ea9;
}
.c8:hover svg > g,
.c8:hover svg path {
.c6:hover svg > g,
.c6:hover svg path {
fill: #666687;
}
.c8:active svg > g,
.c8:active svg path {
.c6:active svg > g,
.c6:active svg path {
fill: #a5a5ba;
}
.c8[aria-disabled='true'] {
.c6[aria-disabled='true'] {
background-color: #eaeaef;
}
.c8[aria-disabled='true'] svg path {
.c6[aria-disabled='true'] svg path {
fill: #666687;
}
@ -200,21 +200,21 @@ describe('MediaLibrary / ListView', () => {
box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
}
.c11 {
.c9 {
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}
.c18 {
.c16 {
background: #f6f6f9;
color: #666687;
padding: 4px;
border-radius: 4px;
}
.c26 {
.c24 {
background: #32324d;
color: #ffffff;
padding: 4px;
@ -222,12 +222,6 @@ describe('MediaLibrary / ListView', () => {
}
.c4 {
position: absolute;
top: 12px;
left: 12px;
}
.c6 {
position: absolute;
top: 12px;
right: 12px;
@ -251,7 +245,7 @@ describe('MediaLibrary / ListView', () => {
align-items: center;
}
.c12 {
.c10 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -265,7 +259,7 @@ describe('MediaLibrary / ListView', () => {
align-items: flex-start;
}
.c24 {
.c22 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -279,14 +273,14 @@ describe('MediaLibrary / ListView', () => {
align-items: center;
}
.c10 {
.c8 {
margin: 0;
padding: 0;
max-height: 100%;
max-width: 100%;
}
.c9 {
.c7 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -300,126 +294,59 @@ describe('MediaLibrary / ListView', () => {
background: repeating-conic-gradient(#f6f6f9 0% 25%,transparent 0% 50%) 50% / 20px 20px;
}
.c14 {
.c12 {
font-weight: 500;
font-size: 0.75rem;
line-height: 1.33;
color: #32324d;
}
.c15 {
.c13 {
font-weight: 400;
font-size: 0.75rem;
line-height: 1.33;
color: #666687;
}
.c21 {
.c19 {
font-weight: 400;
font-size: 0.875rem;
line-height: 1.43;
color: #32324d;
}
.c28 {
.c26 {
font-weight: 400;
font-size: 0.75rem;
line-height: 1.33;
color: #ffffff;
}
.c22 {
.c20 {
font-weight: 600;
line-height: 1.14;
}
.c23 {
.c21 {
font-weight: 600;
font-size: 0.6875rem;
line-height: 1.45;
text-transform: uppercase;
}
.c19 {
.c17 {
display: inline-block;
}
.c17 {
.c15 {
margin-left: auto;
}
.c20 {
.c18 {
margin-left: 4px;
}
.c5 {
margin: 0;
height: 18px;
min-width: 18px;
border-radius: 4px;
border: 1px solid #c0c0cf;
-webkit-appearance: none;
background-color: #ffffff;
}
.c5:checked {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c5:checked:after {
content: '';
display: block;
position: relative;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSJ3aGl0ZSIKICAvPgo8L3N2Zz4=) no-repeat no-repeat center center;
width: 10px;
height: 10px;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.c5:checked:disabled:after {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGgKICAgIGQ9Ik04LjU1MzIzIDAuMzk2OTczQzguNjMxMzUgMC4zMTYzNTUgOC43NjA1MSAwLjMxNTgxMSA4LjgzOTMxIDAuMzk1NzY4TDkuODYyNTYgMS40MzQwN0M5LjkzODkzIDEuNTExNTcgOS45MzkzNSAxLjYzNTkgOS44NjM0OSAxLjcxMzlMNC4wNjQwMSA3LjY3NzI0QzMuOTg1OSA3Ljc1NzU1IDMuODU3MDcgNy43NTgwNSAzLjc3ODM0IDcuNjc4MzRMMC4xMzg2NiAzLjk5MzMzQzAuMDYxNzc5OCAzLjkxNTQ5IDAuMDYxNzEwMiAzLjc5MDMyIDAuMTM4NTA0IDMuNzEyNEwxLjE2MjEzIDIuNjczNzJDMS4yNDAzOCAyLjU5NDMyIDEuMzY4NDMgMi41OTQyMiAxLjQ0NjggMi42NzM0OEwzLjkyMTc0IDUuMTc2NDdMOC41NTMyMyAwLjM5Njk3M1oiCiAgICBmaWxsPSIjOEU4RUE5IgogIC8+Cjwvc3ZnPg==) no-repeat no-repeat center center;
}
.c5:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c5:indeterminate {
background-color: #4945ff;
border: 1px solid #4945ff;
}
.c5:indeterminate:after {
content: '';
display: block;
position: relative;
color: white;
height: 2px;
width: 10px;
background-color: #ffffff;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.c5:indeterminate:disabled {
background-color: #dcdce4;
border: 1px solid #c0c0cf;
}
.c5:indeterminate:disabled:after {
background-color: #8e8ea9;
}
.c13 {
.c11 {
word-break: break-all;
}
@ -428,31 +355,31 @@ describe('MediaLibrary / ListView', () => {
border-bottom: 1px solid #eaeaef;
}
.c27 {
.c25 {
position: absolute;
bottom: 4px;
right: 4px;
}
.c16 {
.c14 {
text-transform: uppercase;
}
.c25 canvas {
.c23 canvas {
display: block;
max-width: 100%;
max-height: 100%;
}
.c27 {
text-transform: uppercase;
}
.c29 {
text-transform: uppercase;
}
.c31 {
text-transform: uppercase;
}
.c30 svg {
.c28 svg {
font-size: 3rem;
}
@ -473,22 +400,12 @@ describe('MediaLibrary / ListView', () => {
>
<div
class="c4"
>
<input
aria-labelledby="card-1-title"
checked=""
class="c5"
type="checkbox"
/>
</div>
<div
class="c6"
>
<span>
<button
aria-disabled="false"
aria-labelledby="tooltip-1"
class="c7 c8"
class="c5 c6"
tabindex="0"
type="button"
>
@ -510,35 +427,35 @@ describe('MediaLibrary / ListView', () => {
</span>
</div>
<div
class="c9"
class="c7"
>
<img
aria-hidden="true"
class="c10"
class="c8"
src="http://localhost:1337/uploads/thumbnail_strapi_cover_1fabc982ce_5b43615ed5.png"
/>
</div>
</div>
<div
class="c11"
class="c9"
>
<div
class="c12"
class="c10"
>
<div
class="c13"
class="c11"
>
<h2
class="c14"
class="c12"
id="card-1-title"
>
strapi-cover_1fabc982ce.png
</h2>
<div
class="c15"
class="c13"
>
<span
class="c16"
class="c14"
>
png
</span>
@ -546,13 +463,13 @@ describe('MediaLibrary / ListView', () => {
</div>
</div>
<div
class="c17"
class="c15"
>
<div
class="c18 c19 c20"
class="c16 c17 c18"
>
<span
class="c21 c22 c23"
class="c19 c20 c21"
>
Image
</span>
@ -571,22 +488,12 @@ describe('MediaLibrary / ListView', () => {
>
<div
class="c4"
>
<input
aria-labelledby="card-2-title"
checked=""
class="c5"
type="checkbox"
/>
</div>
<div
class="c6"
>
<span>
<button
aria-disabled="false"
aria-labelledby="tooltip-3"
class="c7 c8"
class="c5 c6"
tabindex="0"
type="button"
>
@ -608,13 +515,13 @@ describe('MediaLibrary / ListView', () => {
</span>
</div>
<div
class="c9"
class="c7"
>
<div
class="c24"
class="c22"
>
<div
class="c25"
class="c23"
>
<video
src="http://localhost:1337/uploads/mov_bbb_2f3907f7aa.mp4"
@ -628,48 +535,48 @@ describe('MediaLibrary / ListView', () => {
</div>
</div>
<time
class="c26 c27"
class="c24 c25"
>
<span
class="c28"
class="c26"
>
...
</span>
</time>
</div>
<div
class="c11"
class="c9"
>
<div
class="c12"
class="c10"
>
<div
class="c13"
class="c11"
>
<h2
class="c14"
class="c12"
id="card-2-title"
>
mov_bbb.mp4
</h2>
<div
class="c15"
class="c13"
>
<span
class="c29"
class="c27"
>
mp4
</span>
</div>
</div>
<div
class="c17"
class="c15"
>
<div
class="c18 c19 c20"
class="c16 c17 c18"
>
<span
class="c21 c22 c23"
class="c19 c20 c21"
>
Video
</span>
@ -688,22 +595,12 @@ describe('MediaLibrary / ListView', () => {
>
<div
class="c4"
>
<input
aria-labelledby="card-3-title"
checked=""
class="c5"
type="checkbox"
/>
</div>
<div
class="c6"
>
<span>
<button
aria-disabled="false"
aria-labelledby="tooltip-5"
class="c7 c8"
class="c5 c6"
tabindex="0"
type="button"
>
@ -725,13 +622,13 @@ describe('MediaLibrary / ListView', () => {
</span>
</div>
<div
class="c9"
class="c7"
>
<div
class="c24"
class="c22"
>
<span
class="c30"
class="c28"
>
<svg
aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@ -751,38 +648,38 @@ describe('MediaLibrary / ListView', () => {
</div>
</div>
<div
class="c11"
class="c9"
>
<div
class="c12"
class="c10"
>
<div
class="c13"
class="c11"
>
<h2
class="c14"
class="c12"
id="card-3-title"
>
CARTE MARIAGE AVS - Printemps.pdf
</h2>
<div
class="c15"
class="c13"
>
<span
class="c31"
class="c29"
>
pdf
</span>
</div>
</div>
<div
class="c17"
class="c15"
>
<div
class="c18 c19 c20"
class="c16 c17 c18"
>
<span
class="c21 c22 c23"
class="c19 c20 c21"
>
Doc
</span>
@ -794,7 +691,7 @@ describe('MediaLibrary / ListView', () => {
</div>
</div>
<div
class="c32"
class="c30"
>
<p
aria-live="polite"

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

@ -35,6 +35,7 @@ const App = () => {
const { data, isLoading, error } = useAssets({
skipWhen: !state.allowedActions.canMain,
});
const [showUploadAssetDialog, setShowUploadAssetDialog] = useState(false);
const toggleUploadAssetDialog = () => setShowUploadAssetDialog(prev => !prev);

17
packages/core/upload/admin/src/utils/urlsToAssets.js
View File

@ -7,11 +7,19 @@ export const urlsToAssets = async urls => {
axios
.get(url, {
responseType: 'blob',
timeout: 60000,
})
.then(res => {
const loadedFile = new File([res.data], res.config.url, {
type: res.headers['content-type'],
});
return {
url: res.config.url,
mime: res.headers['content-type'],
rawFile: loadedFile,
};
})
.then(res => ({
url: res.config.url,
mime: res.headers['content-type'],
}))
);
// Retrieve the assets metadata
const assetsResults = await Promise.allSettled(assetPromises);
@ -26,6 +34,7 @@ export const urlsToAssets = async urls => {
url: fullFilledAsset.value.url,
ext: fullFilledAsset.value.url.split('.').pop(),
mime: fullFilledAsset.value.mime,
rawFile: fullFilledAsset.value.rawFile,
}));
const unknownAssets = rejectedAssets.map(unknownAsset => ({