Filters ml (#11028)

packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Relation/index.js

@@ -69,7 +69,7 @@ const Relation = ({ fieldSchema, metadatas, queryInfos, name, rowId, value }) =>
             icon={<SortIcon isUp={visible} />}
           />
           {visible && (
-            <Popover source={buttonRef} spacingTop={4} centered>
+            <Popover source={buttonRef} spacing={16} centered>
               <PopoverContent
                 queryInfos={queryInfos}
                 name={name}

packages/core/admin/package.json

@@ -104,7 +104,7 @@
     "react-helmet": "^6.1.0",
     "react-intl": "5.20.2",
     "react-loadable": "^5.5.0",
-    "react-query": "3.19.0",
+    "react-query": "3.24.3",
     "react-redux": "7.2.3",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",

packages/core/upload/admin/src/hooks/useAssets.js

@@ -12,15 +12,17 @@ export const useAssets = ({ skipWhen }) => {
   const [{ rawQuery, query }, setQuery] = useQueryParams();
   const dataRequestURL = getRequestUrl('files');
 
-  const { data, error, isLoading } = useQuery(
+  const getAssets = async () => {
-    'assets',
-    async () => {
     const { data } = await axiosInstance.get(`${dataRequestURL}${rawQuery}`);
 
     return data;
-    },
+  };
-    { enabled: !skipWhen }
+
-  );
+  const { data, error, isLoading } = useQuery(`assets`, getAssets, {
+    enabled: !skipWhen,
+    staleTime: 0,
+    cacheTime: 0,
+  });
 
   useEffect(() => {
     if (!query) {

packages/core/upload/admin/src/pages/App/components/Filters.js

@@ -0,0 +1,61 @@
+import React, { useState, useRef } from 'react';
+import { Button } from '@strapi/parts/Button';
+import { FilterPopoverURLQuery } from '@strapi/helper-plugin';
+import FilterIcon from '@strapi/icons/FilterIcon';
+import { useIntl } from 'react-intl';
+
+const displayedFilters = [
+  {
+    name: 'created_at',
+    fieldSchema: {
+      type: 'date',
+    },
+    metadatas: { label: 'created_at' },
+  },
+  {
+    name: 'updated_at',
+    fieldSchema: {
+      type: 'date',
+    },
+    metadatas: { label: 'updated_at' },
+  },
+  {
+    name: 'type',
+    fieldSchema: {
+      type: 'enumeration',
+      options: ['image', 'video', 'file'],
+    },
+    metadatas: { label: 'type' },
+  },
+];
+
+export const Filters = () => {
+  const buttonRef = useRef(null);
+  const [isVisible, setVisible] = useState(false);
+  const { formatMessage } = useIntl();
+
+  const toggleFilter = () => setVisible(prev => !prev);
+
+  return (
+    <>
+      <Button
+        variant="tertiary"
+        ref={buttonRef}
+        startIcon={<FilterIcon />}
+        onClick={toggleFilter}
+        size="S"
+      >
+        {formatMessage({ id: 'app.utils.filters', defaultMessage: 'Filters' })}
+      </Button>
+
+      {isVisible && (
+        <FilterPopoverURLQuery
+          displayedFilters={displayedFilters}
+          isVisible={isVisible}
+          onToggle={toggleFilter}
+          source={buttonRef}
+        />
+      )}
+    </>
+  );
+};

packages/core/upload/admin/src/pages/App/index.js

@@ -22,6 +22,7 @@ import { ListView } from './components/ListView';
 import { useAssets } from '../../hooks/useAssets';
 import { getTrad } from '../../utils';
 import pluginPermissions from '../../permissions';
+import { Filters } from './components/Filters';
 
 const BoxWithHeight = styled(Box)`
   height: ${32 / 16}rem;
@@ -94,7 +95,7 @@ const App = () => {
                   })}
                 />
               </BoxWithHeight>
-              <Button variant="tertiary">Filter</Button>
+              <Filters />
             </>
           }
           endActions={

packages/plugins/i18n/admin/src/components/LocaleListCell/LocaleListCell.js

@@ -88,7 +88,7 @@ const LocaleListCell = ({ localizations, locale: currentLocaleCode, id }) => {
           icon={<SortIcon />}
         />
         {visible && (
-          <Popover source={buttonRef} spacingTop={4} centered>
+          <Popover source={buttonRef} spacing={16} centered>
             <ul>
               {localesArray.map(name => (
                 <Box key={name} padding={3} as="li">

yarn.lock

@@ -20159,10 +20159,10 @@ react-portal@^4.2.0:
   dependencies:
     prop-types "^15.5.8"
 
-react-query@3.19.0:
+react-query@3.24.3:
-  version "3.19.0"
+  version "3.24.3"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.19.0.tgz#e1fe8f62b9956fb2986317686c27f79ad7ee4e7e"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.24.3.tgz#58c538fb55386fa947bda88acbe616e02cb5b2bb"
-  integrity sha512-AaerSVsmBG2iIciwX2x8cWZS4Htw/4u2GFTYK8oiicpX3PY5mvat/8/Y3wZhM47KlllAzvC+P9MW81oHuEt2wg==
+  integrity sha512-JipKpn7XoDVvRWwXWXKSJU5SbNJKqspx9IRBntaQt1EQOBXe9314Z/8cV9YXXbZIhzrHAetT3X7tRClZaYk98g==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"