@blaze-cms/plugin-media-ui 0.146.0-node18.1 → 0.146.0-rc-eagle-3.0

package/src/components/FilterPanel/FilterPanel.js

@@ -1,138 +1,53 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useState, useEffect } from 'react';
-import { SearchBar } from '@blaze-cms/plugin-search-ui';
-import classnames from 'classnames';
-import Select from '@blaze-react/select';
+import React from 'react';
+import MediaSearchFilter from './MediaSearchFilter';
 import { useMediaContext, MediaContext } from '../../utils/media-context';
-import useFileList from '../FileList/useFileList';
 
 const FilterPanel = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const { filters, selectedFilter, changeSelectedFilter, fileStores } =
-    useMediaContext(MediaContext);
-  const { queryParams, data } = useFileList();
-  const [active, setActive] = useState(filters[0].id);
-
-  useEffect(() => {
-    if (queryParams.searchTerm === null) {
-      setSearchTerm('');
-    }
-  }, [queryParams.searchTerm]);
-
-  const handleSearchTerm = ({ target: { value } }) => {
-    setSearchTerm(value);
-  };
-
-  const storeKey = selectedFilter.storeKey || '';
-
-  const onChangeFilter = id => {
-    setActive(id);
-    searchTerm
-      ? changeSelectedFilter({
-          filter: id,
-          isSearch: true,
-          searchTerm,
-          storeKey
-        })
-      : changeSelectedFilter({
-          filter: id,
-          isSearch: false,
-          searchTerm: null,
-          storeKey
-        });
+  const { filters, selectedFilter, changeSelectedFilter } = useMediaContext(MediaContext);
+
+  const handleOnSelectFilter = (esFilters = []) => {
+    let nextSearchTerm = null;
+    let nextFilterId = selectedFilter.filter;
+    let nextStoreKey = selectedFilter.storeKey || '';
+
+    esFilters.forEach(filterObj => {
+      const { simple_query_string: simpleQueryString, match } = filterObj || {};
+
+      if (simpleQueryString) {
+        const { query } = simpleQueryString;
+        if (query != null) {
+          nextSearchTerm = String(query).trim();
+        }
+      }
+
+      if (match) {
+        const { 'type.keyword': typeKeyword, 'storeKey.keyword': storeKeyKeyword } = match;
+
+        if (typeKeyword && typeKeyword.query != null) {
+          nextFilterId = typeKeyword.query;
+        }
+
+        if (storeKeyKeyword && storeKeyKeyword.query != null) {
+          nextStoreKey = storeKeyKeyword.query;
+        }
+      }
+    });
+
+    changeSelectedFilter({
+      filter: nextFilterId,
+      isSearch: Boolean(nextSearchTerm),
+      searchTerm: nextSearchTerm || null,
+      storeKey: nextStoreKey,
+      esFilters
+    });
   };
 
-  const handleKeyDown = ({ key }) => {
-    if (key === 'Enter') {
-      searchTerm
-        ? changeSelectedFilter({
-            filter: selectedFilter.filter,
-            isSearch: true,
-            searchTerm: searchTerm.trim(),
-            storeKey
-          })
-        : changeSelectedFilter({
-            filter: selectedFilter.filter,
-            isSearch: false,
-            searchTerm: null,
-            storeKey
-          });
-    }
-  };
-
-  const onSelectFilter = ({ value }) => {
-    searchTerm
-      ? changeSelectedFilter({
-          filter: selectedFilter.filter,
-          isSearch: true,
-          searchTerm: searchTerm.trim(),
-          storeKey: value
-        })
-      : changeSelectedFilter({
-          filter: selectedFilter.filter,
-          isSearch: false,
-          searchTerm: null,
-          storeKey: value
-        });
-  };
-
-  const activeSegements = filters.reduce((acc, { id }, index) => {
-    acc[`active-${index}`] = active === id;
-    return acc;
-  }, {});
-  const activeBarSegment = classnames('filter-panel__barWrapper--active', activeSegements);
-  const storeOptions = (fileStores || []).map(type => [type.key, type.name]);
-
   return (
-    <div className="filter-panel">
-      <div className="filter-panel__wrapper">
-        <ul className="filter-panel__list">
-          {filters.map(({ label, id }) =>
-            selectedFilter.filter !== id ? (
-              <li key={label} className="filter-panel__list-item">
-                <a onClick={() => onChangeFilter(id)}>
-                  {label} ({data[id]})
-                </a>
-              </li>
-            ) : (
-              <li key={label} className="filter-panel__list-item active">
-                {label} ({data[id]})
-              </li>
-            )
-          )}
-        </ul>
-        <div className="filter-panel__barWrapper">
-          <div className={activeBarSegment} />
-        </div>
-      </div>
-      <div className="filter-panel__searchBarWrapper">
-        <div className="select__wrapper">
-          <Select
-            name="filter"
-            defaultTextValue="Any"
-            options={storeOptions}
-            onChange={onSelectFilter}
-            selected={selectedFilter.storeKey}
-          />
-        </div>
-        <SearchBar
-          search={() =>
-            changeSelectedFilter({
-              filter: selectedFilter.filter,
-              isSearch: true,
-              searchTerm,
-              storeKey: selectedFilter.storeKey
-            })
-          }
-          handleKeyDown={handleKeyDown}
-          searchTerm={searchTerm}
-          handleSearchTerm={handleSearchTerm}
-          placeholder="Search term here..."
-          close={false}
-        />
-      </div>
-    </div>
+    <MediaSearchFilter
+      selectedFilter={selectedFilter}
+      listFilters={filters}
+      updateListingFilters={handleOnSelectFilter}
+    />
   );
 };
 

package/src/components/FilterPanel/MediaSearchFilter.js

@@ -0,0 +1,32 @@
+import { useQuery } from '@apollo/client';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getQuery } from '@blaze-cms/admin-ui-utils';
+import { SearchFilter } from '@blaze-cms/plugin-data-ui';
+
+const MediaSearchFilter = ({ selectedFilter, listFilters, updateListingFilters }) => {
+  const { data } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
+    variables: { identifier: 'file' }
+  });
+
+  const getEntitySchemas = data?.getEntitySchemas ?? [];
+
+  if (!getEntitySchemas.length) return null;
+
+  return (
+    <SearchFilter
+      schema={getEntitySchemas[0]}
+      listFilters={listFilters}
+      setListFilters={updateListingFilters}
+      values={selectedFilter.defaultFilters}
+    />
+  );
+};
+
+MediaSearchFilter.propTypes = {
+  selectedFilter: PropTypes.object.isRequired,
+  updateListingFilters: PropTypes.func.isRequired,
+  listFilters: PropTypes.array.isRequired
+};
+
+export default MediaSearchFilter;

package/src/components/ListingContainer/Listing/Listing.js

@@ -13,11 +13,16 @@ const Listing = ({
   getSelectedFiles,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal,
+  storeKey,
+  selectedStoreKey
 }) => (
   <div className="page">
     {displayFileUploadModal && (
       <FileUploadModal
+        selectedStoreKey={selectedStoreKey}
+        storeKey={storeKey}
         onClose={() => {
           handleDisplayFileUploadModal(false);
           setDisplayFileUploadModal(false);
@@ -36,7 +41,7 @@ const Listing = ({
               onClick={() => {
                 handleDisplayFileUploadModal(true);
               }}>
-              Add
+              Upload
             </Button>
             <More displayBg>
               <More.Avatar isMoreMenu>
@@ -48,7 +53,7 @@ const Listing = ({
         </PageHeader>
         <div className="page__content page__content--with-side-panel">
           <FilterPanel />
-          <MediaListing />
+          <MediaListing openEditInModal={openEditInModal} />
         </div>
       </>
     )}
@@ -61,13 +66,18 @@ Listing.propTypes = {
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string.isRequired,
+  selectedStoreKey: PropTypes.string
 };
 
 Listing.defaultProps = {
   closeModalAndSetValue: () => {},
   handleDisplayFileUploadModal: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false,
+  selectedStoreKey: null
 };
 
 export default Listing;

package/src/components/ListingContainer/Listing/MediaListing/MediaFileList/MediaFileList.js

@@ -18,7 +18,8 @@ const MediaFileList = ({
   setDisplayCardPrompt,
   displayLayout,
   wrapperRef,
-  modalTargetRef
+  modalTargetRef,
+  openEditInModal
 }) => {
   const [currentListIndex, setCurrentListIndex] = useState(1);
   const [verifiedRanges, setVerifiedRanges] = useState([]);
@@ -33,6 +34,8 @@ const MediaFileList = ({
 
   useEffect(() => {
     if (!loading && !hasFiles) setDisplayCardPrompt(true);
+    if (!loading) setDisplayCardPrompt(false);
+    if (hasFiles) setDisplayCardPrompt(false);
   }, [loading, hasFiles, setDisplayCardPrompt]);
 
   useEffect(
@@ -40,6 +43,7 @@ const MediaFileList = ({
       setVerifiedRanges([]);
       setCurrentListIndex(0);
       setQueryParams({
+        ...selectedFilter,
         where: {
           ...AVAILABLE_FILTER_TYPES[selectedFilter.filter],
           storeKey: selectedFilter.storeKey
@@ -53,7 +57,8 @@ const MediaFileList = ({
       selectedFilter.filter,
       selectedFilter.storeKey,
       selectedFilter.isSearch,
-      selectedFilter.searchTerm
+      selectedFilter.searchTerm,
+      selectedFilter.esFilters
     ]
   );
 
@@ -69,7 +74,8 @@ const MediaFileList = ({
           storeKey: selectedFilter.storeKey
         },
         isSearch: selectedFilter.isSearch,
-        searchTerm: selectedFilter.searchTerm
+        searchTerm: selectedFilter.searchTerm,
+        esFilters: selectedFilter.esFilters
       });
       setVerifiedRanges([...verifiedRanges, loadIndex]);
       setCurrentListIndex(startIndex + MEDIA_OVER_SCAN_COUNT);
@@ -108,7 +114,7 @@ const MediaFileList = ({
             scrollToIndex={currentListIndex}
             onItemsRendered={handleRenderedItems}
             renderItem={({ index, style }) => {
-              const { name, url, mimetype, id } = data.files[index];
+              const { name, url, mimetype, id, data: fileData, updated } = data.files[index];
               const isSelected = existPrevious(selectedFiles, id);
               return (
                 <div key={index} style={style} className="list__item--resultWrapper">
@@ -127,6 +133,9 @@ const MediaFileList = ({
                     id={id}
                     index={index}
                     removeFile={removeFile}
+                    openEditInModal={openEditInModal}
+                    data={fileData}
+                    updated={updated}
                   />
                 </div>
               );
@@ -137,7 +146,7 @@ const MediaFileList = ({
       {displayCardPrompt && (
         <CardPrompt>
           <Button onClick={onClickPrompt} className="button button--rounded button--cta">
-            Add
+            Upload
           </Button>
         </CardPrompt>
       )}
@@ -150,11 +159,13 @@ MediaFileList.propTypes = {
   displayCardPrompt: PropTypes.bool,
   displayLayout: PropTypes.string.isRequired,
   wrapperRef: PropTypes.object.isRequired,
-  modalTargetRef: PropTypes.object.isRequired
+  modalTargetRef: PropTypes.object.isRequired,
+  openEditInModal: PropTypes.bool
 };
 
 MediaFileList.defaultProps = {
-  displayCardPrompt: true
+  displayCardPrompt: true,
+  openEditInModal: false
 };
 
 export default MediaFileList;

package/src/components/ListingContainer/Listing/MediaListing/MediaListing.js

@@ -1,7 +1,8 @@
+import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import MediaFileList from './MediaFileList';
 
-const MediaListing = () => {
+const MediaListing = ({ openEditInModal }) => {
   const [displayCardPrompt, setDisplayCardPrompt] = useState(false);
   const mediaFileListWrapperRef = useRef();
   const modalTargetRef = useRef();
@@ -15,6 +16,7 @@ const MediaListing = () => {
           displayCardPrompt={displayCardPrompt}
           setDisplayCardPrompt={setDisplayCardPrompt}
           displayLayout="list"
+          openEditInModal={openEditInModal}
         />
       </div>
       {/* render edit card modal outside of the virtual list */}
@@ -23,6 +25,12 @@ const MediaListing = () => {
   );
 };
 
-MediaListing.propTypes = {};
+MediaListing.propTypes = {
+  openEditInModal: PropTypes.bool
+};
+
+MediaListing.defaultProps = {
+  openEditInModal: false
+};
 
 export default MediaListing;

package/src/components/ListingContainer/ListingContainer.js

@@ -16,14 +16,16 @@ const ListingContainer = ({
   displayFileUploadModal,
   setDisplayFileUploadModal,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  openEditInModal,
+  storeKey
 }) => {
   const [selectedFiles, setSelectedFiles] = useState(filesSelected || []);
   const [selectedFilter, setSelectedFilter] = useState({
     filter: 'all',
     isSearch: false,
     searchTerm: null,
-    storeKey: null
+    storeKey
   });
 
   const fileStoresType = getQuery('GET_FILE_STORES');
@@ -65,7 +67,10 @@ const ListingContainer = ({
           changeSelectedFilter: value => setSelectedFilter(value),
           selectedFilter: {
             ...selectedFilter,
-            storeKey: selectedFilter.storeKey || defaultFileStore
+            storeKey: selectedFilter.storeKey || defaultFileStore,
+            defaultFilters: {
+              storeKey: selectedFilter.storeKey || defaultFileStore
+            }
           },
           selectedFiles,
           getSelectedFiles,
@@ -82,6 +87,9 @@ const ListingContainer = ({
             handleDisplayFileUploadModal={handleDisplayFileUploadModal}
             setSelectedFiles={setSelectedFiles}
             handleSelectedFiles={handleSelectedFiles}
+            openEditInModal={openEditInModal}
+            selectedStoreKey={selectedFilter.storeKey || defaultFileStore}
+            storeKey={storeKey}
           />
         </FilesListProvider>
       </MediaContextProvider>
@@ -96,7 +104,9 @@ ListingContainer.propTypes = {
   simpleLayout: PropTypes.bool,
   setDisplayFileUploadModal: PropTypes.func.isRequired,
   displayFileUploadModal: PropTypes.bool.isRequired,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  openEditInModal: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 ListingContainer.defaultProps = {
@@ -104,7 +114,9 @@ ListingContainer.defaultProps = {
   handleSelectedFiles: () => {},
   maxItems: false,
   filesSelected: [],
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false,
+  storeKey: 'default'
 };
 
 export default ListingContainer;

package/src/constants.js

@@ -16,7 +16,7 @@ const AVAILABLE_FILTER_TYPES = {
 };
 
 const MEDIA_LIST_ITEM_SIZE = 97;
-const MEDIA_OVER_SCAN_COUNT = 0;
+const MEDIA_OVER_SCAN_COUNT = 3;
 
 const ICON_SIZE = {
   WIDTH: '25px',
@@ -38,6 +38,19 @@ const REORDER = 'Reorder';
 const IMAGES = 'Images';
 const MORE = 'more ...';
 
+const FILE_DEFAULT_PROPS = [
+  'id',
+  'location',
+  'mimetype',
+  'url',
+  'data',
+  'name',
+  'storeKey',
+  'filename',
+  'type',
+  'updated'
+];
+
 export {
   ALL,
   AVAILABLE_FILTER_TYPES,
@@ -53,5 +66,6 @@ export {
   REORDER,
   STORE_KEY,
   ICON_SIZE,
-  ICON_COLOR
+  ICON_COLOR,
+  FILE_DEFAULT_PROPS
 };

package/src/index.js

@@ -1,25 +1,28 @@
-import React from 'react';
 import FileUploadAdapter from './components/FileUploadAdapter';
 import EditorAdapter from './components/EditorAdapter';
 import { MediaLibraryIcon } from './icons';
 import pkg from '../package.json';
 import { PLUGIN_NAME } from './constants';
+import FilePreviewReadOnly from './components/FilePreviewReadOnly';
+import MediaListing from './components/MediaListing';
+import EditMediaFilePage from './components/EditMediaFile/EditMediaFilePage';
 
-export const FilePreviewReadOnly = React.lazy(
-  () =>
-    import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')
-);
+// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode
+// export const FilePreviewReadOnly = React.lazy(
+//   () =>
+//     import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')
+// );
 
-const MediaListing = React.lazy(
-  () => import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')
-);
+// const MediaListing = React.lazy(
+//   () => import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')
+// );
 
-const EditMediaFilePage = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage'
-    )
-);
+// const EditMediaFilePage = React.lazy(
+//   () =>
+//     import(
+//       /* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage'
+//     )
+// );
 export default async function load(app) {
   app.events.once('admin:menu:config:load', ({ addConfig }) => {
     addConfig({

package/src/utils/bustUrl.js

@@ -0,0 +1,6 @@
+export default function bustUrl(url, updated) {
+  if (!url) return url;
+  const separator = url.includes('?') ? '&' : '?';
+  const version = updated || Date.now();
+  return `${url}${separator}v=${version}`;
+}

package/babel.config.js

@@ -1,3 +0,0 @@
-const babelConfig = require('@blaze-cms/setup-ui/babel/babel.config');
-
-module.exports = babelConfig;

package/jest.config.js

@@ -1,5 +0,0 @@
-const buildConfig = require('@blaze-cms/tools/jest/react-build-config');
-
-const jestConfig = buildConfig(__dirname);
-
-module.exports = jestConfig;