Merge branch 'features/media-lib-frontend' of github.com:strapi/strapi into features/media-lib-frontend

2025-12-28 23:57:32 +00:00 · 2020-03-18 10:57:01 +01:00 · 2020-03-18 10:57:01 +01:00 · 4d731e741e
commit 4d731e741e
parent de88f5c34b 1a1cd7bb74
44 changed files with 460 additions and 237 deletions
--- a/docs/3.0.0-beta.x/cli/CLI.md
+++ b/docs/3.0.0-beta.x/cli/CLI.md
@ -20,7 +20,7 @@ options: [--no-run|--use-npm|--debug|--quickstart|--dbclient=<dbclient> --dbhost

 - **strapi new &#60;name&#62; --quickstart**<br/>
  Use the quickstart system to create your app.
-  
+
 - **strapi new &#60;name&#62; --quickstart --no-run**<br/>
  Use the quickstart system to create your app, and do not start the application after creation.

--- a/packages/strapi-plugin-upload/admin/src/components/Card/Border.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/Border.js
@ -0,0 +1,27 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { themePropTypes } from 'strapi-helper-plugin';
+
+const Border = styled.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  ${({ shown }) => shown && 'display: block;'}
+  border: 2px solid ${({ theme, color }) => theme.main.colors[color] || color};
+`;
+
+Border.defaultProps = {
+  color: 'mediumBlue',
+  shown: false,
+};
+
+Border.propTypes = {
+  color: PropTypes.string,
+  shown: PropTypes.bool,
+  ...themePropTypes,
+};
+
+export default Border;
--- a/packages/strapi-plugin-upload/admin/src/components/Card/ErrorMessage.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/ErrorMessage.js
@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+import Text from '../Text';
+
+const ErrorMessage = styled(props => <Text {...props} color="orange" fontSize="md" ellipsis />)`
+  margin-top: 3px;
+`;
+
+export default ErrorMessage;
--- a/packages/strapi-plugin-upload/admin/src/components/Card/Title.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/Title.js
@ -4,8 +4,8 @@ import Text from '../Text';

 const Title = styled(props => <Text {...props} color="black" />)`
  width: 100%;
-  margin-bottom: 3px;
-  margin-top: 7px;
+  margin-bottom: 4px;
+  margin-top: 4px;
 `;

 export default Title;
--- a/packages/strapi-plugin-upload/admin/src/components/Card/Wrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/Wrapper.js
@ -2,7 +2,7 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  width: 100%;
-  margin-bottom: 23px;
+  margin-bottom: 33px;
  overflow: hidden;
  &:hover {
    cursor: pointer;
--- a/packages/strapi-plugin-upload/admin/src/components/Card/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/Card/index.js
@ -1,37 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox } from '@buffetjs/core';

 import Text from '../Text';
 import CardImgWrapper from '../CardImgWrapper';
 import CardPreview from '../CardPreview';
 import Wrapper from './Wrapper';
 import Title from './Title';
+import ErrorMessage from './ErrorMessage';
+import Border from './Border';

-// TODO - adapt with the real data
-const Card = ({ checked, id, name, size, small, type, onChange, url }) => {
+const Card = ({
+  checked,
+  children,
+  errorMessage,
+  hasError,
+  mime,
+  name,
+  small,
+  size,
+  type,
+  url,
+}) => {
  return (
    <Wrapper>
-      <div>
-        <CardImgWrapper small={small} checked={checked}>
-          <CardPreview type={type} url={url} />
-          <div className="card-control-wrapper">
-            <Checkbox name={`${id}`} onChange={onChange} value={checked} />
-          </div>
-        </CardImgWrapper>
-        <Title fontSize="md" fontWeight="bold" ellipsis>
-          {name}
-        </Title>
-        <Text color="grey" fontSize="xs" ellipsis>{`${type} - ${size}`}</Text>
-      </div>
+      <CardImgWrapper checked={checked} small={small}>
+        <CardPreview hasError={hasError} url={url} type={mime || type} />
+        <Border color={hasError ? 'orange' : 'mediumBlue'} shown={checked || hasError} />
+        {children}
+      </CardImgWrapper>
+      <Title fontSize="md" fontWeight="bold" ellipsis>
+        {name}
+      </Title>
+      <Text color="grey" fontSize="xs" ellipsis>{`${type} - ${size}`}</Text>
+      {hasError && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </Wrapper>
  );
 };

 Card.defaultProps = {
  checked: false,
+  children: null,
+  errorMessage: null,
+  hasError: false,
+  mime: null,
  name: null,
-  onChange: () => {},
  size: 0,
  small: false,
  type: null,
@ -40,9 +52,11 @@ Card.defaultProps = {

 Card.propTypes = {
  checked: PropTypes.bool,
+  children: PropTypes.node,
+  errorMessage: PropTypes.string,
+  hasError: PropTypes.bool,
+  mime: PropTypes.string,
  name: PropTypes.string,
-  id: PropTypes.number.isRequired,
-  onChange: PropTypes.func,
  size: PropTypes.number,
  small: PropTypes.bool,
  type: PropTypes.string,
--- a/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControl/Wrapper.js
@ -8,9 +8,9 @@ const Wrapper = styled.div`
  align-items: center;
  width: 24px;
  height: 24px;
-  margin-right: 5px;
+  margin-left: 5px;
  background-color: ${({ theme }) => theme.main.colors.white};
-  border: 1px solid #e3e9f3;
+  border: 1px solid ${({ theme }) => theme.main.colors.darkGrey};
  border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
  cursor: pointer;
  font-size: 11px;
--- a/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardControlsWrapper/index.js
@ -1,10 +1,22 @@
 import styled from 'styled-components';
+import PropTypes from 'prop-types';

 const CardControlsWrapper = styled.div`
-  position: absolute;
-  top: 10px;
-  right: 5px;
  display: flex;
+  position: absolute;
+  top: 0;
+  ${({ leftAlign }) => (leftAlign ? 'left: 0' : 'right: 0')};
+  width: fit-content;
+  height: auto;
+  margin: 10px;
 `;

+CardControlsWrapper.defaultProps = {
+  leftAlign: false,
+};
+
+CardControlsWrapper.propTypes = {
+  leftAlign: PropTypes.bool,
+};
+
 export default CardControlsWrapper;
--- a/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardImgWrapper/index.js
@ -12,40 +12,22 @@ const CardImgWrapper = styled.div`

  .card-control-wrapper {
    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 10px;
  }

  &:hover {
    .card-control-wrapper {
      display: flex;
-      z-index: 1050;
+      z-index: 1045;
    }
  }

-  ${({ hasError }) => {
-    if (hasError) {
-      return `
-        background: #F2F3F4;
-        border: 1px solid #FF5D00;
-      `;
-    }
-
-    return '';
-  }}
-
  ${({ checked }) =>
    checked &&
    `
-    .card-control-wrapper {
-      display: flex;
-      z-index: 1050;
-      border: 2px solid #007EFF;
-    }
+      .card-control-wrapper {
+        display: flex;
+        z-index: 1050;
+      }
  `}
 `;

--- a/packages/strapi-plugin-upload/admin/src/components/CardPreview/Wrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardPreview/Wrapper.js
@ -8,15 +8,17 @@ const Wrapper = styled.div`
  top: 0;
  left: 0;
  display: flex;
-  background-color: ${({ isImg }) => (isImg ? '#333740' : '#F2F3F4')};
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ isFile }) => (isFile ? '#F2F3F4' : '#333740')};
 `;

 Wrapper.defaultProps = {
-  isImg: false,
+  isFile: false,
 };

 Wrapper.propTypes = {
-  isImg: PropTypes.bool,
+  isFile: PropTypes.bool,
 };

 export default Wrapper;
--- a/packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/CardPreview/index.js
@ -1,22 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';

+import { getType } from '../../utils';
+
+import BrokenFile from '../../icons/BrokenFile';
 import FileIcon from '../FileIcon';
 import Wrapper from './Wrapper';
 import Image from './Image';

-const CardPreview = ({ url, type }) => {
+const CardPreview = ({ hasError, url, type }) => {
+  const isFile = getType(type) === 'file';
+
+  if (hasError) {
+    return (
+      <Wrapper isFile>
+        <BrokenFile />
+      </Wrapper>
+    );
+  }
+
  return (
-    <Wrapper isImg={!!url}>{!url ? <FileIcon fileType={type} /> : <Image src={url} />}</Wrapper>
+    <Wrapper isFile={isFile}>{isFile ? <FileIcon fileType={type} /> : <Image src={url} />}</Wrapper>
  );
 };

 CardPreview.defaultProps = {
+  hasError: false,
  url: null,
-  type: null,
+  type: '',
 };

 CardPreview.propTypes = {
+  hasError: PropTypes.bool,
  url: PropTypes.string,
  type: PropTypes.string,
 };
--- a/packages/strapi-plugin-upload/admin/src/components/EditForm/CropWrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/CropWrapper.js
@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+const CropWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+  }
+`;
+
+export default CropWrapper;
--- a/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/FileWrapper.js
@ -5,11 +5,7 @@ const FileWrapper = styled(CardImgWrapper)`
  height: 401px;
  width: 100%;
  display: flex;
-  > img {
-    width: 100%;
-    object-fit: contain;
-    margin: auto;
-  }
+  position: relative;

  .cropper-view-box {
    outline-color: ${({ theme }) => theme.main.colors.white};
--- a/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/index.js
@ -7,8 +7,10 @@ import Cropper from 'cropperjs';
 import 'cropperjs/dist/cropper.css';
 import CardControl from '../CardControl';
 import CardControlsWrapper from '../CardControlsWrapper';
+import CardPreview from '../CardPreview';
 import ModalSection from '../ModalSection';
 import Text from '../Text';
+import CropWrapper from './CropWrapper';
 import FileDetailsBox from './FileDetailsBox';
 import FileWrapper from './FileWrapper';
 import FormWrapper from './FormWrapper';
@ -156,12 +158,13 @@ const EditForm = ({
                </CardControlsWrapper>

                {isImg ? (
-                  <>
+                  <CropWrapper>
                    <img
                      src={src}
                      alt={get(fileToEdit, ['file', 'name'], '')}
                      ref={isCropping ? imgRef : null}
                    />
+
                    {isCropping && (
                      <Text
                        fontSize="md"
@ -180,8 +183,10 @@ const EditForm = ({
                        &nbsp;
                      </Text>
                    )}
-                  </>
-                ) : null}
+                  </CropWrapper>
+                ) : (
+                  <CardPreview url={src} />
+                )}
              </FileWrapper>
            </div>
            <div className="col-6">
--- a/packages/strapi-plugin-upload/admin/src/components/EditForm/utils/form.js
+++ b/packages/strapi-plugin-upload/admin/src/components/EditForm/utils/form.js
@ -1,4 +1,4 @@
-import getTrad from '../../../utils/getTrad';
+import { getTrad } from '../../../utils';

 const form = [
  {
--- a/packages/strapi-plugin-upload/admin/src/components/FileIcon/Wrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/FileIcon/Wrapper.js
@ -2,7 +2,6 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  font-size: 54px;
-  margin: auto;
  // TODO : Review this code when API is done
  color: #bdbfc2;
 `;
--- a/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/FiltersCard/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/FiltersPicker/FiltersCard/index.js
@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';

 import { Select } from '@buffetjs/core';
 import { getFilterType } from 'strapi-helper-plugin';
-import getTrad from '../../../utils/getTrad';
+import { getTrad } from '../../../utils';

 import reducer, { initialState } from './reducer';

--- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Button.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Button.js
@ -1,10 +1,7 @@
 import styled from 'styled-components';

 const Button = styled.button`
-  margin-top: 11px;
-  color: #b3b5b9;
-  font-weight: 500;
-  font-size: 11px;
+  margin-top: 8px;

  &:active {
    outline: 0;
--- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Container.js
@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  width: 44%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  margin: auto;
+`;
+
+export default Container;
--- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Indicator.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Indicator.js
@ -29,6 +29,7 @@ const Indicator = styled.div`
  overflow: hidden;
  background-color: #515764;
  border-radius: 2px;
+  margin-top: 32px;
  &:before {
    content: '';
    display: block;
--- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Wrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/Wrapper.js
@ -1,11 +1,18 @@
 import styled from 'styled-components';
+import { themePropTypes } from 'strapi-helper-plugin';

 const Wrapper = styled.div`
  position: absolute;
-  top: calc(50% - 2px);
-  left: calc(50% - 22%);
-  width: 44%;
-  text-align: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: ${({ theme }) => theme.main.colors.black};
 `;

+Wrapper.propTypes = {
+  ...themePropTypes,
+};
+
 export default Wrapper;
--- a/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InfiniteLoadingIndicator/index.js
@ -1,20 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ClearIcon, useGlobalContext } from 'strapi-helper-plugin';
+import { ClearIcon } from 'strapi-helper-plugin';
+
+import IntlText from '../IntlText';
 import Button from './Button';
+import Container from './Container';
 import Indicator from './Indicator';
 import Wrapper from './Wrapper';

 const InfiniteLoadingIndicator = ({ onClick }) => {
-  const { formatMessage } = useGlobalContext();
-
  return (
    <Wrapper>
-      <Indicator />
-      <Button type="button" onClick={onClick}>
-        {formatMessage({ id: 'app.components.Button.cancel' })}
-        <ClearIcon />
-      </Button>
+      <Container>
+        <Indicator />
+        <Button type="button" onClick={onClick}>
+          <IntlText
+            as="span"
+            fontSize="xs"
+            fontWeight="semiBold"
+            color="grey"
+            id="app.components.Button.cancel"
+          />
+          <ClearIcon />
+        </Button>
+      </Container>
    </Wrapper>
  );
 };
--- a/packages/strapi-plugin-upload/admin/src/components/InputFileModal/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/InputFileModal/index.js
@ -2,7 +2,7 @@ import React, { createRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@buffetjs/core';
 import { useGlobalContext } from 'strapi-helper-plugin';
-import getTrad from '../../utils/getTrad';
+import { getTrad } from '../../utils';
 import Cloud from '../../icons/Cloud';
 import Label from './Label';
 import Input from './Input';
--- a/packages/strapi-plugin-upload/admin/src/components/List/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/List/index.js
@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Checkbox } from '@buffetjs/core';

-import createMatrix from '../../utils/createMatrix';
+import { createMatrix } from '../../utils';

 import Card from '../Card';
+import CardControlsWrapper from '../CardControlsWrapper';
 import Wrapper from './Wrapper';

 const List = ({ data, onChange, selectedItems }) => {
@ -15,14 +17,16 @@ const List = ({ data, onChange, selectedItems }) => {
        return (
          <div className="row" key={key}>
            {rowContent.map(item => {
+              const { id, url } = item;
+              const checked = selectedItems.includes(id);
+
              return (
                <div className="col-xs-12 col-md-6 col-xl-3" key={JSON.stringify(item)}>
-                  <Card
-                    small
-                    checked={selectedItems.includes(item.id)}
-                    onChange={onChange}
-                    {...item}
-                  />
+                  <Card small checked={checked} {...item} url={`${strapi.backendURL}${url}`}>
+                    <CardControlsWrapper leftAlign className="card-control-wrapper">
+                      <Checkbox name={`${id}`} onChange={onChange} value={checked} />
+                    </CardControlsWrapper>
+                  </Card>
                </div>
              );
            })}
@ -34,62 +38,7 @@ const List = ({ data, onChange, selectedItems }) => {
 };

 List.defaultProps = {
-  data: [
-    {
-      id: '0',
-      name: 'Chat paysage',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350',
-    },
-    {
-      id: '1',
-      name: 'Chat portrait',
-      size: 17329,
-      type: 'image/png',
-      url: 'https://emiliedammedumoulin.com/wp-content/uploads/2018/07/contact-chat-accueil.jpg',
-    },
-    {
-      id: '2',
-      name: 'Gif',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://user-images.githubusercontent.com/879561/51321923-54024f00-1a64-11e9-8c37-3308350a59c4.gif',
-    },
-    {
-      id: '3',
-      name: 'Paysage',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSyHCXO8D0QQrPDuGstvH9dEwhhB7Qv-3mDMWGpLExyY1CF84cL',
-    },
-    {
-      id: '4',
-      name: 'That kitten is so beautiful that I am not sure to have the place to describe it',
-      size: 17329,
-      type: 'image/png',
-      url:
-        'https://images.pexels.com/photos/1643457/pexels-photo-1643457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
-    },
-    {
-      id: '5',
-      name: 'pdf file',
-      type: 'pdf',
-    },
-    {
-      id: '6',
-      name: 'Zip file',
-      type: 'zip',
-    },
-    {
-      id: '7',
-      name: 'Doc file',
-      type: 'docx',
-    },
-  ],
+  data: [],
  onChange: () => {},
  selectedItems: [],
 };
--- a/packages/strapi-plugin-upload/admin/src/components/ListEmpty/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/ListEmpty/index.js
@ -3,7 +3,7 @@ import { Button } from '@buffetjs/core';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';

-import getTrad from '../../utils/getTrad';
+import { getTrad } from '../../utils';
 import generateRows from './utils/generateRows';

 import CardEmpty from '../CardEmpty';
--- a/packages/strapi-plugin-upload/admin/src/components/ModalTab/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/ModalTab/index.js
@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import getTrad from '../../utils/getTrad';
+import { getTrad } from '../../utils';
 import Wrapper from './Wrapper';

 const ModalTab = ({ isDisabled, label, to, isActive, onClick }) => {
--- a/packages/strapi-plugin-upload/admin/src/components/SortListItem/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/SortListItem/index.js
@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import getTrad from '../../utils/getTrad';
+import { getTrad } from '../../utils';

 import Wrapper from './Wrapper';
 import IntlText from '../IntlText';
--- a/packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/SortPicker/index.js
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';

 import { Carret } from '@buffetjs/icons';
-import getTrad from '../../utils/getTrad';
+import { getTrad } from '../../utils';

 import SortList from '../SortList';
 import Picker from '../Picker';
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/Container.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/Container.js
@ -4,9 +4,12 @@ import ContainerFluid from '../ContainerFluid';
 const Container = styled(ContainerFluid)`
  margin-bottom: 4px;
  padding-top: 14px;
-  max-height: 350px;
+  max-height: 339px;
  overflow: auto;
  overflow-x: hidden;
+  .col-xl-3 {
+    padding-right: 6px;
+  }
 `;

 export default Container;
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/ListTitle.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/ListTitle.js
@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import IntlText from '../IntlText';
+
+const ListTitle = styled(props => <IntlText fontSize="md" fontWeight="bold" {...props} />)`
+  margin-top: 34px;
+  margin-bottom: 3px;
+`;
+
+export default ListTitle;
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/ListWrapper.js
@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const ListWrapper = styled.div`
-  margin-bottom: 4px;
-  padding-top: 14px;
-  max-height: 350px;
-  overflow: auto;
-`;
-
-export default ListWrapper;
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/RowItem.js
@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+
+import Card from '../Card';
 import CardControl from '../CardControl';
 import CardControlsWrapper from '../CardControlsWrapper';
-import CardImgWrapper from '../CardImgWrapper';
 import InfiniteLoadingIndicator from '../InfiniteLoadingIndicator';

 const RowItem = ({
-  // file,
+  file,
  fileInfo,
  hasError,
  errorMessage,
@ -15,6 +16,8 @@ const RowItem = ({
  onClickEdit,
  originalIndex,
 }) => {
+  const url = URL.createObjectURL(file);
+
  const handleClick = () => {
    onClick(originalIndex);
  };
@ -24,18 +27,23 @@ const RowItem = ({
  };

  return (
-    <div className="col-3" key={originalIndex}>
-      <div>
-        <CardImgWrapper isSmall hasError={hasError}>
-          {isUploading && <InfiniteLoadingIndicator onClick={handleClick} />}
-          {!isUploading && (
-            <CardControlsWrapper className="card-control-wrapper">
-              <CardControl onClick={handleClickEdit} />
-            </CardControlsWrapper>
-          )}
-        </CardImgWrapper>
-        <p style={{ marginBottom: 14 }}>{errorMessage || fileInfo.name}</p>
-      </div>
+    <div className="col-xs-12 col-md-6 col-xl-3" key={originalIndex}>
+      <Card
+        small
+        errorMessage={errorMessage}
+        hasError={hasError}
+        type={file.type}
+        size={file.size}
+        url={url}
+        {...fileInfo}
+      >
+        {isUploading && <InfiniteLoadingIndicator onClick={handleClick} />}
+        {!isUploading && (
+          <CardControlsWrapper className="card-control-wrapper">
+            <CardControl onClick={handleClickEdit} />
+          </CardControlsWrapper>
+        )}
+      </Card>
    </div>
  );
 };
@ -45,7 +53,7 @@ RowItem.defaultProps = {
 };

 RowItem.propTypes = {
-  // file: PropTypes.object.isRequired,
+  file: PropTypes.object.isRequired,
  fileInfo: PropTypes.shape({
    name: PropTypes.string.isRequired,
  }).isRequired,
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/TextWrapper.js
@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const TextWrapper = styled.div`
-  padding-top: 34px;
-`;
-
-export default TextWrapper;
--- a/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
+++ b/packages/strapi-plugin-upload/admin/src/components/UploadList/index.js
@ -1,15 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
 import { Button } from '@buffetjs/core';
-import createMatrix from '../../utils/createMatrix';
-import getTrad from '../../utils/getTrad';
+
+import { createMatrix, getTrad } from '../../utils';
+
 import ModalSection from '../ModalSection';
-import Text from '../Text';
+import IntlText from '../IntlText';
 import Container from './Container';
 import ButtonWrapper from './ButtonWrapper';
-import TextWrapper from './TextWrapper';
 import RowItem from './RowItem';
+import ListTitle from './ListTitle';

 const UploadList = ({
  filesToUpload,
@ -23,32 +23,28 @@ const UploadList = ({
    filesToUploadLength > 1 ? 'plural' : 'singular'
  }`;

-  // TODO: use <IntlText ... /> instead of FormattedMessage
-
  return (
    <>
      <ModalSection justifyContent="space-between">
-        <TextWrapper>
-          <Text fontSize="md" fontWeight="bold">
-            <FormattedMessage id={getTrad(titleId)} values={{ number: filesToUploadLength }} />
-          </Text>
-
-          <Text fontSize="sm" color="grey">
-            <FormattedMessage
-              id={getTrad('modal.upload-list.sub-header-subtitle')}
-              values={{ number: filesToUploadLength }}
-            />
-          </Text>
-        </TextWrapper>
+        <div>
+          <ListTitle id={getTrad(titleId)} values={{ number: filesToUploadLength }} />
+          <IntlText
+            id={getTrad('modal.upload-list.sub-header-subtitle')}
+            values={{ number: filesToUploadLength }}
+            fontSize="sm"
+            color="grey"
+          />
+        </div>
        <ButtonWrapper>
-          <FormattedMessage id={getTrad('modal.upload-list.sub-header.button')}>
-            {label => (
-              <Button type="button" color="primary" label={label} onClick={onGoToAddBrowseFiles} />
-            )}
-          </FormattedMessage>
+          <Button type="button" color="primary" onClick={onGoToAddBrowseFiles}>
+            <IntlText
+              id={getTrad('modal.upload-list.sub-header.button')}
+              fontWeight="bold"
+              color="white"
+            />
+          </Button>
        </ButtonWrapper>
      </ModalSection>
-
      <ModalSection>
        <Container>
          {matrix.map(({ key, rowContent }) => {
--- a/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js
@ -13,8 +13,8 @@ import {
  useQuery,
 } from 'strapi-helper-plugin';

-import getTrad from '../../utils/getTrad';
-import getRequestUrl from '../../utils/getRequestUrl';
+import { getRequestUrl, getTrad } from '../../utils';
+
 import Container from '../../components/Container';
 import ControlsWrapper from '../../components/ControlsWrapper';
 import SelectAll from '../../components/SelectAll';
--- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/index.js
@ -9,7 +9,7 @@ import ModalHeader from '../../components/ModalHeader';
 import stepper from './utils/stepper';
 import init from './init';
 import reducer, { initialState } from './reducer';
-import getTrad from '../../utils/getTrad';
+import { getTrad } from '../../utils';

 const ModalStepper = ({ isOpen, onToggle }) => {
  const { formatMessage } = useGlobalContext();
@ -22,8 +22,8 @@ const ModalStepper = ({ isOpen, onToggle }) => {

  useEffect(() => {
    if (currentStep === 'upload' && filesToUploadLength === 0) {
-      // Close modal when file uploading is over
-      toggleRef.current();
+      // Passing true to the onToggle prop will refetch the data when the modal closes
+      toggleRef.current(true);
    }
  }, [filesToUploadLength, currentStep]);

--- a/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/ModalStepper/utils/stepper.js
@ -1,7 +1,7 @@
 import EditForm from '../../../components/EditForm';
 import UploadForm from '../../../components/UploadForm';
 import UploadList from '../../../components/UploadList';
-import getTrad from '../../../utils/getTrad';
+import { getTrad } from '../../../utils';

 const stepper = {
  browse: {
--- a/packages/strapi-plugin-upload/admin/src/containers/SettingsPage/index.js
+++ b/packages/strapi-plugin-upload/admin/src/containers/SettingsPage/index.js
@ -2,13 +2,10 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import { Header, Inputs } from '@buffetjs/custom';
 import { useIsMounted } from '@buffetjs/hooks';
 import { isEqual } from 'lodash';
-import {
-  LoadingIndicatorPage,
-  useGlobalContext,
-  request,
-} from 'strapi-helper-plugin';
-import getRequestUrl from '../../utils/getRequestUrl';
-import getTrad from '../../utils/getTrad';
+import { LoadingIndicatorPage, useGlobalContext, request } from 'strapi-helper-plugin';
+
+import { getRequestUrl, getTrad } from '../../utils';
+
 import Text from '../../components/Text';
 import Divider from './Divider';
 import SectionTitleWrapper from './SectionTitleWrapper';
@ -27,9 +24,7 @@ const SettingsPage = () => {
  getDataRef.current = async () => {
    try {
      const { signal } = abortController;
-      const { data } = await request(
-        getRequestUrl('settings', { method: 'GET', signal })
-      );
+      const { data } = await request(getRequestUrl('settings', { method: 'GET', signal }));

      if (isMounted) {
        dispatch({
--- a/packages/strapi-plugin-upload/admin/src/icons/BrokenFile/index.js
+++ b/packages/strapi-plugin-upload/admin/src/icons/BrokenFile/index.js
@ -0,0 +1,91 @@
+import React from 'react';
+
+const BrokenFile = props => {
+  return (
+    <svg
+      width="48px"
+      height="55px"
+      viewBox="0 0 48 55"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs>
+        <filter
+          x="-1.7%"
+          y="-2.1%"
+          width="103.5%"
+          height="104.1%"
+          filterUnits="objectBoundingBox"
+          id="filter-1"
+        >
+          <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" />
+          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+          <feColorMatrix
+            values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.05 0"
+            type="matrix"
+            in="shadowBlurOuter1"
+            result="shadowMatrixOuter1"
+          />
+          <feMerge>
+            <feMergeNode in="shadowMatrixOuter1" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <g strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-649.000000, -362.000000)" fill="#919BAE" fillRule="nonzero">
+          <g filter="url(#filter-1)" transform="translate(323.000000, 181.000000)">
+            <g transform="translate(30.000000, 143.000000)">
+              <g transform="translate(219.000000, 0.000000)">
+                <g transform="translate(81.000000, 40.000000)">
+                  <path
+                    d="M12.6046679,27.5832436 C12.6095286,27.5828862 12.6144091,27.5828862 12.6192699,27.5832436 L12.6245362,27.576541 L12.6245362,27.576541 L15.0022741,24.5139437 L14.9955715,24.5086774 L14.9924596,24.5125075 L9.97486535,24.5125075 C9.75144624,24.5125075 9.5679234,24.5843208 9.42429683,24.7279473 C9.28067026,24.8715739 9.20885697,25.0550967 9.20885697,25.2785159 L9.20885697,26.8105326 C9.20885697,27.0339517 9.28067026,27.2174746 9.42429683,27.3611011 C9.5679234,27.5047277 9.75144624,27.576541 9.97486535,27.576541 L12.6101735,27.576541 L12.6046679,27.5832436 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M27.6888091,1.6277678 C27.2419709,1.18092958 26.6355476,0.797925394 25.8695392,0.478755236 C25.1035308,0.159585079 24.4013565,0 23.7630162,0 L2.31478157,0 C1.67644125,0 1.13385198,0.22341911 0.687013764,0.670257331 C0.240175544,1.11709555 0.0167564333,1.65968482 0.0167564333,2.29802513 L0.0167564333,40.598444 C0.0167564333,41.2367844 0.240175544,41.7793736 0.687013764,42.2262118 C0.735996042,42.2723467 0.778367716,42.3250293 0.812926391,42.3827648 C0.888569719,42.4198683 0.960383004,42.464632 1.03459007,42.5043686 L3.08797127,39.8609216 C3.085865,39.8498828 3.08506158,39.8386349 3.0855775,39.8274087 L3.08174746,39.8324357 L3.08174746,3.06403351 L21.4659485,3.06403351 L21.4659485,13.0221424 C21.4659485,13.6604827 21.6893676,14.203072 22.1362059,14.6499102 C22.1886141,14.6983281 22.2328333,14.7549158 22.2671454,14.8174746 L22.2858169,14.8318372 C22.3380012,14.8653501 22.4021544,14.883064 22.4574506,14.9125075 L24.529982,12.2429683 L24.529982,3.25553561 C24.9927788,3.41512069 25.3199282,3.59066427 25.5114303,3.78216637 L28.6568522,6.92758827 L30.5503291,4.48833034 L27.6888091,1.6277678 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M9.97486535,30.6403351 C9.75144624,30.6403351 9.5679234,30.7121484 9.42429683,30.855775 C9.28067026,30.9994016 9.20885697,31.1829244 9.20885697,31.4063435 L9.20885697,31.9509276 L9.20694195,31.953082 C9.21125075,31.9561939 9.21508079,31.9593058 9.21891083,31.9626571 L10.2324357,30.6570916 C10.2250783,30.6522434 10.2182575,30.6466263 10.2120886,30.6403351 L9.97486535,30.6403351 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M19.7620586,18.3777379 L19.7570317,18.3842011 L9.97486535,18.3842011 C9.75144624,18.3842011 9.5679234,18.4560144 9.42429683,18.5996409 C9.28067026,18.7432675 9.20885697,18.9267903 9.20885697,19.1502095 L9.20885697,20.6822262 C9.20885697,20.9056453 9.28067026,21.0891682 9.42429683,21.2327947 C9.5679234,21.3764213 9.75144624,21.4482346 9.97486535,21.4482346 L17.3237582,21.4482346 C17.3271095,21.4467983 17.329982,21.4451227 17.3333333,21.4439258 C17.3507235,21.4371428 17.3697825,21.4358889 17.3879114,21.4403351 L19.7611011,18.3842011 L19.7651706,18.3789348 L19.7620586,18.3777379 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M13.4501496,33.8436864 L12.4102932,35.1758229 C12.4119626,35.19142 12.4105804,35.207193 12.4062238,35.2222621 L13.4783962,33.8403351 L13.4803112,33.8379414 C13.470575,33.8412556 13.4604224,33.8431894 13.4501496,33.8436864 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M15.8467983,30.7743866 C15.8489884,30.7762577 15.8510666,30.778256 15.8530221,30.780371 L15.8561341,30.7763016 L15.8561341,30.7763016 L17.59617,28.5338121 L15.8467983,30.7743866 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M30.5733094,34.055775 C30.4296828,33.9121484 30.24616,33.8403351 30.0227409,33.8403351 L13.4783962,33.8403351 L12.4062238,35.2222621 C12.4057743,35.2240504 12.4052147,35.2258092 12.4045482,35.2275284 L12.4045482,36.1371634 C12.4045482,36.3605825 12.4763615,36.5441053 12.619988,36.6877319 C12.7636146,36.8313585 12.9471374,36.9031718 13.1705566,36.9031718 L30.0227409,36.9031718 C30.24616,36.9031718 30.4296828,36.8313585 30.5733094,36.6877319 C30.716936,36.5441053 30.7887493,36.3605825 30.7887493,36.1371634 L30.7887493,34.6051466 C30.7887493,34.382685 30.716936,34.1995611 30.5733094,34.055775 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M30.5733094,27.927708 C30.4296828,27.7840814 30.24616,27.7122681 30.0227409,27.7122681 L18.2369838,27.7122681 L18.239617,27.7089168 L18.2355476,27.7089168 L18.2329144,27.7122681 L18.2329144,27.7122681 L17.59617,28.5338121 L17.59617,28.5338121 L15.8554159,30.7772591 L30.0227409,30.7772591 C30.24616,30.7772591 30.4296828,30.7054458 30.5733094,30.5618193 C30.716936,30.4181927 30.7887493,30.2346699 30.7887493,30.0112507 L30.7887493,28.479234 C30.7887493,28.2553361 30.716936,28.0714941 30.5733094,27.927708 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M30.5733094,21.7996409 C30.4296828,21.6560144 30.24616,21.5842011 30.0227409,21.5842011 L23.0209455,21.5842011 L23.0242968,21.5801317 C23.0140369,21.5826692 23.0035075,21.5839553 22.9929384,21.5839617 L22.9879114,21.5839617 L22.9879114,21.5839617 L22.9879114,21.5839617 L20.6211849,24.6343507 C20.6252614,24.6386198 20.6290215,24.64318 20.6324357,24.6479952 L30.0232196,24.6479952 C30.2466387,24.6479952 30.4301616,24.5761819 30.5737882,24.4325554 C30.7174147,24.2889288 30.789228,24.1054059 30.789228,23.8819868 L30.789228,22.3499701 C30.7889088,22.1268701 30.716936,21.9434271 30.5733094,21.7996409 Z"
+                    id="Path"
+                  />
+                  <path
+                    d="M39.5020946,14.1156194 C39.1829244,13.349611 38.7999202,12.7431877 38.353082,12.2963495 L33.758468,7.70149611 L31.8704967,10.1347696 C31.8771755,10.1428415 31.8824366,10.1519878 31.8860563,10.1618193 L36.1986834,14.4746858 C36.3901855,14.6661879 36.5657291,14.9933373 36.7253142,15.4561341 L27.7419509,15.4561341 L25.677319,18.1170557 C25.6828221,18.131141 25.6909447,18.1440558 25.7012567,18.1551167 C26.1464991,18.5998803 26.3212448,18.5201676 26.958468,18.5201676 L36.9165769,18.5201676 L36.9165769,43.0324357 L6.35547576,43.0324357 C6.35123136,43.034836 6.34673598,43.0367626 6.34207062,43.0381807 L4.25302214,45.7309396 C4.69994016,46.1776182 4.87229204,46.0964692 5.51047277,46.0964692 L37.6828247,46.0964692 C38.321165,46.0964692 38.8637542,45.8730501 39.3105925,45.4262118 C39.7574307,44.9793736 39.9808498,44.4367844 39.9808498,43.798444 L39.9808498,16.2221424 C39.9808498,15.5836425 39.8212647,14.8814682 39.5020946,14.1156194 Z"
+                    id="Path"
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default BrokenFile;
--- a/packages/strapi-plugin-upload/admin/src/index.js
+++ b/packages/strapi-plugin-upload/admin/src/index.js
@ -13,7 +13,7 @@ import InputMedia from './components/InputMedia';

 import trads from './translations';
 import pluginId from './pluginId';
-import getTrad from './utils/getTrad';
+import { getTrad } from './utils';

 export default strapi => {
  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
--- a/packages/strapi-plugin-upload/admin/src/utils/getType.js
+++ b/packages/strapi-plugin-upload/admin/src/utils/getType.js
@ -0,0 +1,11 @@
+const getType = mime => {
+  const type = mime.split(/[\s/]+/)[0];
+
+  if (type === 'image' || type === 'video') {
+    return type;
+  }
+
+  return 'file';
+};
+
+export default getType;
--- a/packages/strapi-plugin-upload/admin/src/utils/index.js
+++ b/packages/strapi-plugin-upload/admin/src/utils/index.js
@ -0,0 +1,4 @@
+export { default as createMatrix } from './createMatrix';
+export { default as getRequestUrl } from './getRequestUrl';
+export { default as getTrad } from './getTrad';
+export { default as getType } from './getType';
--- a/packages/strapi-plugin-upload/admin/src/utils/tests/getType.test.js
+++ b/packages/strapi-plugin-upload/admin/src/utils/tests/getType.test.js
@ -0,0 +1,31 @@
+import getType from '../getType';
+
+describe('UPLOAD | utils | getType', () => {
+  it('should return image if mime string contains image', () => {
+    const mime = 'image/png';
+    const expected = 'image';
+
+    expect(getType(mime)).toEqual(expected);
+  });
+
+  it('should return video if mime string contains video', () => {
+    const mime = 'video/mp4';
+    const expected = 'video';
+
+    expect(getType(mime)).toEqual(expected);
+  });
+
+  it('should return file if mime string is text/html', () => {
+    const mime = 'text/html';
+    const expected = 'file';
+
+    expect(getType(mime)).toEqual(expected);
+  });
+
+  it('should return file if mime string is application/pdf', () => {
+    const mime = 'application/pdf';
+    const expected = 'file';
+
+    expect(getType(mime)).toEqual(expected);
+  });
+});
--- a/yarn.lock
+++ b/yarn.lock
@ -844,10 +844,10 @@
    lodash "^4.17.13"
    to-fast-properties "^2.0.0"

-"@buffetjs/core@3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.0.1.tgz#d508415a34d31f187008245b2e209e242c27e019"
-  integrity sha512-OLtHynNaaUJ03YRundxHRiXVs//IdFwep/fS3Xt8aYJH/xtVhPO5nqLGAkN8T6jyLVn+fxYZ7zy+T9ccrta3TQ==
+"@buffetjs/core@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-3.0.0.tgz#457d5a55246f2b0c7edfc85173b46e97b0348b42"
+  integrity sha512-fJIFG5Rwj6vY1XHbvxa6C347T/MffwUjC76jzJU6gxfgYpxI0TUftRIZ0WNKPQALOK8GbNcLJM5mKKzL5eF18w==
  dependencies:
    "@buffetjs/hooks" "3.0.0"
    "@buffetjs/icons" "3.0.0"
@ -863,12 +863,12 @@
    react-dates "^21.5.1"
    react-moment-proptypes "^1.7.0"

-"@buffetjs/custom@3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.0.1.tgz#41ced07dc35e0442ecc4ec263e304b181f576e8e"
-  integrity sha512-TmsO8iKsOZPFigwEoJ2xxwzk7w0qT26QbKldmKepV1Y9LZHjWaSjjHEJpSlpzgU1/5FxOhaeQmTJTzWHMrvcUQ==
+"@buffetjs/custom@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-3.0.0.tgz#193010fc111be51f1bd6f47e6f3f32d6fb61f9b5"
+  integrity sha512-qeZMbiHQPoiEnb7rSB4KVa6EZhAJ3Y1VWx8nqQuGQVQMZYZ3JGS8tmSO3XpA8k3SYjKirB0U+SDSlV7jlTM2Nw==
  dependencies:
-    "@buffetjs/core" "3.0.1"
+    "@buffetjs/core" "3.0.0"
    "@buffetjs/styles" "3.0.0"
    "@buffetjs/utils" "3.0.0"
    moment "^2.24.0"
@ -6959,7 +6959,7 @@ escape-string-regexp@1.0.2:
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.2.tgz#4dbc2fe674e71949caf3fb2695ce7f2dc1d9a8d1"
  integrity sha1-Tbwv5nTnGUnK8/smlc5/LcHZqNE=

-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@ -9249,6 +9249,13 @@ inflight@^1.0.4:
    once "^1.3.0"
    wrappy "1"

+inherits-ex@^1.1.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/inherits-ex/-/inherits-ex-1.2.3.tgz#ba0da6258e9b855f98429e82ea97c4cc0e4e459d"
+  integrity sha512-DCZqD7BpjXqaha8IKcoAE3ZZr6Hi12ropV1h+3pBnirE14mNRwLuYySvYxUSBemTQ40SjAxPL8BTk2Xw/3IF9w==
+  dependencies:
+    xtend "^4.0.0"
+
 inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3, inherits@~2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@ -11661,7 +11668,7 @@ mdn-data@2.0.4:
  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==

-media-typer@0.3.0:
+media-typer@0.3.0, media-typer@^0.3.0:
  version "0.3.0"
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
@ -11817,6 +11824,16 @@ mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
  integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==

+mime-type@3.0.7:
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/mime-type/-/mime-type-3.0.7.tgz#15c21e4833edd1ac5ddf04fffb49164d17bef57b"
+  integrity sha512-NyWtbAKERuLQIv+1jjEdWGrWepVlubZEW0fTs4K9T6UWW45iMBpgrwpP5GIl8/5trHLviOcQfA6zEth3T8WhNA==
+  dependencies:
+    media-typer "^0.3.0"
+    minimatch "^3.0.4"
+    path.js "^1.0.7"
+    util-ex "^0.3.15"
+
 mime-types@^2.0.8, mime-types@^2.1.12, mime-types@^2.1.18, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
  version "2.1.26"
  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
@ -13373,6 +13390,15 @@ path-type@^4.0.0:
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==

+path.js@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path.js/-/path.js-1.0.7.tgz#7d136b607de19bfd98ba068874926287e6534939"
+  integrity sha1-fRNrYH3hm/2YugaIdJJih+ZTSTk=
+  dependencies:
+    escape-string-regexp "^1.0.3"
+    inherits-ex "^1.1.2"
+    util-ex "^0.3.10"
+
 pbkdf2@^3.0.3:
  version "3.0.17"
  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
@ -17895,6 +17921,14 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1:
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=

+util-ex@^0.3.10, util-ex@^0.3.15:
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/util-ex/-/util-ex-0.3.15.tgz#f9261cda13c4327d0740cbe67be1227ded8b0058"
+  integrity sha1-+SYc2hPEMn0HQMvme+Eife2LAFg=
+  dependencies:
+    inherits-ex "^1.1.2"
+    xtend "^4.0.0"
+
 util-promisify@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/util-promisify/-/util-promisify-2.1.0.tgz#3c2236476c4d32c5ff3c47002add7c13b9a82a53"