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

packages/strapi-plugin-upload/admin/src/components/BrowseAssets/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
-
+import { isEmpty } from 'lodash';
 import { PageFooter } from 'strapi-helper-plugin';
-
 import { generatePageFromStart, generateStartFromPage } from '../../utils';
 import Filters from '../Filters';
 import Flex from '../Flex';
@@ -76,6 +75,10 @@ const BrowseAssets = () => {
     hasSomeCheckboxSelected;
   const canSelectFile = multiple === true || (selectedFiles.length < 1 && !multiple);
 
+  const hasFilters = !isEmpty(params.filters.filter(filter => !filter.isDisabled));
+  const hasSearch = !isEmpty(params._q);
+  const areResultsEmptyWithSearchOrFilters = isEmpty(files) && (hasSearch || hasFilters);
+
   return (
     <Wrapper>
       <Padded top bottom>
@@ -99,7 +102,11 @@ const BrowseAssets = () => {
         </Flex>
       </Padded>
       {!files || files.length === 0 ? (
-        <ListEmpty numberOfRows={2} onClick={handleGoToUpload} />
+        <ListEmpty
+          numberOfRows={2}
+          onClick={handleGoToUpload}
+          hasSearchApplied={areResultsEmptyWithSearchOrFilters}
+        />
       ) : (
         <ListWrapper>
           <List

packages/strapi-plugin-upload/admin/src/components/ListEmpty/index.js

@@ -10,8 +10,14 @@ import CardEmpty from '../CardEmpty';
 import Wrapper from './Wrapper';
 import IntlText from '../IntlText';
 
-const ListEmpty = ({ onClick, numberOfRows }) => {
+const ListEmpty = ({ hasSearchApplied, onClick, numberOfRows }) => {
   const rows = generateRows(numberOfRows);
+  const titleId = hasSearchApplied
+    ? 'list.assets-empty.title-withSearch'
+    : 'list.assets-empty.title';
+  const subtitleId = 'list.assets-empty.subtitle';
+  const prefixedTitleId = getTrad(titleId);
+  const prefixedSubtitleId = getTrad(subtitleId);
 
   return (
     <Wrapper className="container-fluid">
@@ -29,23 +35,30 @@ const ListEmpty = ({ onClick, numberOfRows }) => {
         );
       })}
       <div className="btn-wrapper">
-        <IntlText id={getTrad('list.assets-empty.title')} fontSize="lg" fontWeight="semiBold" />
+        <IntlText id={prefixedTitleId} fontSize="lg" fontWeight="semiBold" />
-        <IntlText id={getTrad('list.assets-empty.subtitle')} fontSize="md" lineHeight="19px" />
+
-        <div style={{ paddingBottom: '1.1rem' }} />
+        {!hasSearchApplied && (
-        <Button color="primary" onClick={onClick} type="button">
+          <>
-          <FormattedMessage id={getTrad('header.actions.upload-assets')} />
+            <IntlText id={prefixedSubtitleId} fontSize="md" lineHeight="19px" />
-        </Button>
+            <div style={{ paddingBottom: '1.1rem' }} />
+            <Button color="primary" onClick={onClick} type="button">
+              <FormattedMessage id={getTrad('header.actions.upload-assets')} />
+            </Button>
+          </>
+        )}
       </div>
     </Wrapper>
   );
 };
 
 ListEmpty.defaultProps = {
+  hasSearchApplied: false,
   onClick: () => {},
   numberOfRows: 3,
 };
 
 ListEmpty.propTypes = {
+  hasSearchApplied: PropTypes.bool,
   onClick: PropTypes.func,
   numberOfRows: PropTypes.number,
 };

packages/strapi-plugin-upload/admin/src/containers/HomePage/index.js

@@ -1,5 +1,5 @@
 import React, { useReducer, useState, useEffect } from 'react';
-import { includes, toString } from 'lodash';
+import { includes, isEmpty, toString } from 'lodash';
 import { useHistory, useLocation } from 'react-router-dom';
 import { Header } from '@buffetjs/custom';
 import { useDebounce, useIsMounted } from '@buffetjs/hooks';
@@ -327,6 +327,11 @@ const HomePage = () => {
     return <LoadingIndicatorPage />;
   }
 
+  const filters = generateFiltersFromSearch(search);
+  const hasFilters = !isEmpty(filters);
+  const hasSearch = !isEmpty(searchValue);
+  const areResultsEmptyWithSearchOrFilters = isEmpty(data) && (hasSearch || hasFilters);
+
   return (
     <Container>
       <Header {...headerProps} />
@@ -345,13 +350,9 @@ const HomePage = () => {
           someChecked={hasSomeCheckboxSelected && !areAllCheckboxesSelected}
         />
         <SortPicker onChange={handleChangeParams} value={query.get('_sort') || null} />
-        <Filters
+        <Filters onChange={handleChangeParams} filters={filters} onClick={handleDeleteFilter} />
-          onChange={handleChangeParams}
-          filters={generateFiltersFromSearch(search)}
-          onClick={handleDeleteFilter}
-        />
       </ControlsWrapper>
-      {dataCount > 0 ? (
+      {dataCount > 0 && !areResultsEmptyWithSearchOrFilters ? (
         <>
           <List
             clickable
@@ -368,7 +369,10 @@ const HomePage = () => {
           />
         </>
       ) : (
-        <ListEmpty onClick={handleClickToggleModal} />
+        <ListEmpty
+          onClick={handleClickToggleModal}
+          hasSearchApplied={areResultsEmptyWithSearchOrFilters}
+        />
       )}
       <ModalStepper
         initialFileToEdit={fileToEdit}

packages/strapi-plugin-upload/admin/src/translations/en.json

@@ -15,6 +15,7 @@
   "input.placeholder": "Click to select an asset or drag & drop a file in this area",
   "input.button.label": "Browse files",
   "list.assets-empty.title": "There is no asset yet",
+  "list.assets-empty.title-withSearch": "There is no asset with the applied filters",
   "list.assets-empty.subtitle": "Add a first one to the list.",
   "modal.header.browse": "Upload assets",
   "modal.header.select-files": "Selected files",