@blaze-cms/plugin-media-ui 0.146.0-translations.6 → 0.147.0-rc-eagle.2

package/src/components/FilePreview/previewDefault/RawPreviewDefault.js

@@ -2,24 +2,34 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Actions from '../Actions';
 
-const RawPreviewDefault = ({ url, name, file }) => (
+const RawPreviewDefault = ({ url, name, file, disableFilePreview }) => (
   <div className="FilePreview">
-    <div className="FilePreviewItem">
-      <div className="FilePreviewItem__wrapper">
-        <img className="FilePreviewItem__wrapper__default" src={url} alt={name} />
+    {!disableFilePreview ? (
+      <div className="FilePreviewItem">
+        <div className="FilePreviewItem__wrapper">
+          <img className="FilePreviewItem__wrapper__default" src={url} alt={name} />
+        </div>
+        <div className="FilePreviewItem__info">
+          <p className="FilePreviewItem__info__fileName">{name}</p>
+          <Actions file={file} />
+        </div>
       </div>
+    ) : (
       <div className="FilePreviewItem__info">
-        <p className="FilePreviewItem__info__fileName">{name}</p>
+        <p className="FilePreviewItem__info__fileName FilePreviewItem__info--disablePreview">
+          {name}
+        </p>
         <Actions file={file} />
       </div>
-    </div>
+    )}
   </div>
 );
 
 RawPreviewDefault.propTypes = {
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  file: PropTypes.object.isRequired
+  file: PropTypes.object.isRequired,
+  disableFilePreview: PropTypes.bool.isRequired
 };
 
 export { RawPreviewDefault };

package/src/components/FilePreviewReadOnly/FileList.js

@@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
 import FilePreviewList from './FilePreviewList';
 
 const FileList = ({ selectedFiles, children }) => (
-  <>
-    <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
-  </>
+  <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
 );
 
 FileList.propTypes = {

package/src/components/FilePreviewReadOnly/FilePreviewReadOnly.js

@@ -11,49 +11,37 @@ const FilePreviewReadOnly = ({ label, id, type, value }) => {
   const client = useApolloClient();
 
   const getFiles = async (offset, ids) => {
-    const {
-      data: { files: newFiles }
-    } = await client.query({
+    if (!ids.length) return [];
+    const { data: { files = [] } = {} } = await client.query({
       query: getQuery('GET_FILES'),
       variables: {
         offset,
         where: {
-          id: {
-            _in: ids
-          }
+          id: { _in: ids }
         }
       },
-      skip: !initialValue.length,
       fetchPolicy: 'network-only'
     });
-    return newFiles;
+    return files;
   };
 
-  useEffect(
-    () => {
-      (async () => {
-        const files = await getFiles(0, initialValue);
-        const orderedFiles = orderFiles(files, initialValue);
-        setSelectedFiles(orderedFiles);
-      })();
-    },
-    [] //eslint-disable-line
-  );
-
   const orderFiles = (files, ids) =>
     ids.map(currentId => files.find(({ id: fileId }) => fileId === currentId)).filter(Boolean);
 
+  useEffect(() => {
+    (async () => {
+      const files = await getFiles(0, initialValue);
+      const orderedFiles = orderFiles(files, initialValue);
+      setSelectedFiles(orderedFiles);
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <>
-      <div className="form-field form-field--button">
-        <label>{label}</label>
-        {selectedFiles && (
-          <>
-            <FileList selectedFiles={selectedFiles} />
-          </>
-        )}
-      </div>
-    </>
+    <div className="form-field form-field--button">
+      <label htmlFor={id}>{label}</label>
+      {selectedFiles.length > 0 && <FileList selectedFiles={selectedFiles} />}
+    </div>
   );
 };
 

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -5,6 +5,7 @@ import { useApolloClient } from '@apollo/client';
 import { getQuery, getMutation, ModalAdapter as Modal } from '@blaze-cms/admin-ui-utils';
 import { parseFormValues } from '@blaze-cms/react-form-builder';
 import { useToasts } from '@blaze-react/toaster';
+import Tooltip from '@blaze-react/tooltip';
 import { MORE } from '../../constants';
 import ListingContainer from '../ListingContainer';
 import { MediaContextProvider } from '../../utils/media-context';
@@ -30,8 +31,11 @@ const FileUploadAdapter = ({
   shouldRenderInPreview,
   canDragAndDrop,
   simpleLayout,
+  tooltip,
   previewAllFiles,
-  fileType
+  disableFilePreview,
+  fileType,
+  storeKey
 }) => {
   const { InjectPreview } = useContext(FileUploadAdapter.FormContext);
   const [currentLimit] = useLimit(maxItems);
@@ -39,9 +43,9 @@ const FileUploadAdapter = ({
   const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
   const initialValue = formatInitialValue({ value, type });
   const [currentValue, setCurrentValue] = useState(initialValue);
-  const [currentOffset, setCurrentOffset] = useState(0);
   const [selectedFiles, setSelectedFiles] = useState([]);
   const [editFile, setEditFile] = useState(null);
+  const [allFilesLoaded, setAllFilesLoaded] = useState(false);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
@@ -68,6 +72,13 @@ const FileUploadAdapter = ({
   useEffect(
     () => {
       (async () => {
+        if (allFilesLoaded) {
+          const loadedFiles = await getFiles(0, currentValue, true);
+          const loadedOrderedFiles = orderFiles(loadedFiles, currentValue);
+          setSelectedFiles(loadedOrderedFiles);
+          return;
+        }
+
         const initialFiles =
           !selectedFiles.length && !previewAllFiles
             ? currentValue.filter((_, i) => i <= 3)
@@ -75,8 +86,8 @@ const FileUploadAdapter = ({
 
         const files = await getFiles(0, initialFiles);
         const orderedFiles = orderFiles(files, currentValue);
-        setCurrentOffset(0);
         setSelectedFiles(orderedFiles);
+        setAllFilesLoaded(false);
       })();
     },
     [currentValue] //eslint-disable-line
@@ -84,14 +95,10 @@ const FileUploadAdapter = ({
 
   const fetchMore = async shouldFetchAll => {
     if (selectedFiles.length === currentValue.length) return;
-    const newOffset = currentOffset + 4;
-    const updatedOffset = newOffset > currentValue.length ? currentValue.length : newOffset;
-    const offsetToUse = shouldFetchAll ? 0 : updatedOffset;
-    const files = await getFiles(offsetToUse, currentValue, shouldFetchAll);
-    const newFiles = [...selectedFiles, ...files];
-    const orderedFiles = orderFiles(newFiles, currentValue);
-    setSelectedFiles(orderedFiles);
-    setCurrentOffset(newOffset);
+    const newFiles = await getFiles(0, currentValue, true);
+    const newOrderedFiles = orderFiles(newFiles, currentValue);
+    setSelectedFiles(newOrderedFiles);
+    setAllFilesLoaded(true);
   };
 
   const handleSelectedFiles = (files, checkIsUnselecting = true) => {
@@ -160,7 +167,7 @@ const FileUploadAdapter = ({
 
   const filesPending = previewAllFiles
     ? 0
-    : getNumberFilesPendingToFetch(currentOffset, currentValue);
+    : getNumberFilesPendingToFetch(selectedFiles.length, currentValue);
   const onOpenLibrary = () => setDisplayModal(true);
   const handleEditModal = file => {
     const selectedEditFile = selectedFiles.find(({ id: _id }) => _id === file.id);
@@ -195,7 +202,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: () => {
         closeModalAndSetValue(true);
       },
@@ -212,7 +219,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: async () => {
         const { name, id: editedFileId, data } = editFile;
         const updatedSelectedFiles = selectedFiles.map(selectedFile => {
@@ -233,12 +240,7 @@ const FileUploadAdapter = ({
                 id: editedFileId
               }
             },
-            update(
-              cache,
-              {
-                data: { updateFile: fileUpdated }
-              }
-            ) {
+            update(cache, { data: { updateFile: fileUpdated } }) {
               cache.writeQuery({
                 query: getQuery('GET_FILE_BY_ID'),
                 variables: { id },
@@ -275,33 +277,34 @@ const FileUploadAdapter = ({
   return (
     <>
       <div className="form-field form-field--button">
-        <label>{label}</label>
+        <label>
+          {label} <Tooltip tooltipContent={tooltip} />
+        </label>
         {selectedFiles && (
-          <>
-            <MediaContextProvider value={{ handleEditModal, onUnselectFile: handleSelectedFiles }}>
-              {shouldRenderInPreview ? (
-                <InjectPreview selector={FileUploadAdapter.previewerId}>
-                  <FileList
-                    selectedFiles={selectedFiles}
-                    allFiles={currentValue}
-                    handleReorderFiles={handleReorderFiles}
-                    canDragAndDrop={canDragAndDrop}
-                    fetchMore={fetchMore}>
-                    {fileListSpan}
-                  </FileList>
-                </InjectPreview>
-              ) : (
+          <MediaContextProvider value={{ handleEditModal, onUnselectFile: handleSelectedFiles }}>
+            {shouldRenderInPreview ? (
+              <InjectPreview selector={FileUploadAdapter.previewerId}>
                 <FileList
                   selectedFiles={selectedFiles}
+                  allFiles={currentValue}
                   handleReorderFiles={handleReorderFiles}
-                  fetchMore={fetchMore}
-                />
-              )}
-            </MediaContextProvider>
-          </>
+                  canDragAndDrop={canDragAndDrop}
+                  fetchMore={fetchMore}>
+                  {fileListSpan}
+                </FileList>
+              </InjectPreview>
+            ) : (
+              <FileList
+                selectedFiles={selectedFiles}
+                handleReorderFiles={handleReorderFiles}
+                fetchMore={fetchMore}
+              />
+            )}
+          </MediaContextProvider>
         )}
         <FileUpload
           actionText={fileUploadButtonText}
+          storeKey={storeKey}
           handleLibraryClick={() => {
             if (simpleLayout) {
               setDisplayFileUploadModal(true);
@@ -320,44 +323,47 @@ const FileUploadAdapter = ({
             handleFormChange={handleEditFileForm}
             displayForm
             previewType="card"
+            disableFilePreview={disableFilePreview}
           />
         </Modal>
       )}
 
-      {displayFileUploadModal &&
-        simpleLayout && (
-          <div className="file-upload-modal-wrapper">
+      {displayFileUploadModal && simpleLayout && (
+        <div className="file-upload-modal-wrapper">
+          <ListingContainer
+            displayFileUploadModal={displayFileUploadModal}
+            closeModalAndSetValue={closeModalAndSetValue}
+            setDisplayFileUploadModal={setDisplayFileUploadModal}
+            handleSelectedFiles={handleSelectedFiles}
+            maxItems={currentLimit}
+            simpleLayout={simpleLayout}
+            filesSelected={currentValue.length > 1 ? currentValue : []}
+            openEditInModal
+            storeKey={storeKey}
+          />
+        </div>
+      )}
+
+      {displayModal && !simpleLayout && (
+        <div className="file-upload-modal-wrapper">
+          <Modal
+            actions={modalActions}
+            className="file-upload-modal"
+            title="Media library"
+            onClose={() => closeModalAndSetValue()}>
             <ListingContainer
-              displayFileUploadModal={displayFileUploadModal}
               closeModalAndSetValue={closeModalAndSetValue}
+              displayFileUploadModal={displayFileUploadModal}
               setDisplayFileUploadModal={setDisplayFileUploadModal}
               handleSelectedFiles={handleSelectedFiles}
               maxItems={currentLimit}
-              simpleLayout={simpleLayout}
               filesSelected={currentValue.length > 1 ? currentValue : []}
+              openEditInModal
+              storeKey={storeKey}
             />
-          </div>
-        )}
-
-      {displayModal &&
-        !simpleLayout && (
-          <div className="file-upload-modal-wrapper">
-            <Modal
-              actions={modalActions}
-              className="file-upload-modal"
-              title="Media library"
-              onClose={() => closeModalAndSetValue()}>
-              <ListingContainer
-                closeModalAndSetValue={closeModalAndSetValue}
-                displayFileUploadModal={displayFileUploadModal}
-                setDisplayFileUploadModal={setDisplayFileUploadModal}
-                handleSelectedFiles={handleSelectedFiles}
-                maxItems={currentLimit}
-                filesSelected={currentValue.length > 1 ? currentValue : []}
-              />
-            </Modal>
-          </div>
-        )}
+          </Modal>
+        </div>
+      )}
     </>
   );
 };
@@ -373,7 +379,10 @@ FileUploadAdapter.propTypes = {
   canDragAndDrop: PropTypes.bool,
   simpleLayout: PropTypes.bool,
   previewAllFiles: PropTypes.bool,
-  fileType: PropTypes.string
+  tooltip: PropTypes.string,
+  fileType: PropTypes.string,
+  disableFilePreview: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 FileUploadAdapter.defaultProps = {
@@ -383,7 +392,10 @@ FileUploadAdapter.defaultProps = {
   canDragAndDrop: false,
   simpleLayout: false,
   previewAllFiles: false,
-  fileType: 'file'
+  tooltip: '',
+  fileType: 'file',
+  disableFilePreview: true,
+  storeKey: null
 };
 
 export default FileUploadAdapter;

package/src/components/FileUploadAdapter/mappers/get-number-files-pending-to-fetch.js

@@ -1,5 +1,7 @@
-export const getNumberFilesPendingToFetch = (currentOffset, currentValue) => {
-  const offsetSet = currentOffset + 4;
-  const offset = currentValue.length < offsetSet ? currentValue.length : offsetSet;
-  return currentValue.length - offset;
+export const getNumberFilesPendingToFetch = (loadedFilesCount, currentValue) => {
+  if (loadedFilesCount >= currentValue.length) {
+    return 0;
+  }
+
+  return currentValue.length - loadedFilesCount;
 };

package/src/components/FileUploadAdapter/useLimit.js

@@ -3,14 +3,11 @@ import { ONE_FILE_AS_LIMIT } from '../../constants';
 
 function useLimit(initialLimit) {
   const [currentLimit, setCurrentLimit] = useState(initialLimit);
-  useEffect(
-    () => {
-      if (initialLimit && currentLimit !== ONE_FILE_AS_LIMIT) {
-        setCurrentLimit(ONE_FILE_AS_LIMIT);
-      }
-    },
-    [currentLimit, initialLimit]
-  );
+  useEffect(() => {
+    if (initialLimit && currentLimit !== ONE_FILE_AS_LIMIT) {
+      setCurrentLimit(ONE_FILE_AS_LIMIT);
+    }
+  }, [currentLimit, initialLimit]);
 
   return [currentLimit, setCurrentLimit];
 }

package/src/components/FileUploadModal/FileUploadModal.js

@@ -6,57 +6,94 @@ import { useToasts } from '@blaze-react/toaster';
 import { useApolloClient, useQuery } from '@apollo/client';
 import useFileList from '../FileList/useFileList';
 
-const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, simpleLayout }) => {
+const FileUploadModal = ({
+  onClose,
+  getSelectedFiles,
+  closeModalAndSetValue,
+  simpleLayout,
+  fileId,
+  storeKey,
+  selectedStoreKey
+}) => {
   const [files, setFiles] = useState([]);
   const { addToast } = useToasts();
   const client = useApolloClient();
   const { addNewFile } = useFileList();
 
   const fileStoresType = getQuery('GET_FILE_STORES');
-
   const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {
     variables: { visibleInAdmin: true }
   });
 
   const handleFiles = filesToUpload => {
+    if (fileId && filesToUpload && filesToUpload.length) {
+      setFiles([filesToUpload[0]]);
+      return;
+    }
     setFiles(filesToUpload);
   };
 
   const uploadFiles = async () => {
+    const filesToProcess = fileId && files.length ? [files[0]] : files;
+
     const response = await Promise.all(
-      files.map(({ file, name, data: fileData, storeKey }) =>
-        client.mutate({
+      filesToProcess.map(({ file, name, data, storeKey: fileStoreKey }) => {
+        const payload = {
+          name,
+          storeKey: fileStoreKey || selectedStoreKey || storeKey,
+          data
+        };
+        if (fileId) {
+          payload.id = fileId;
+        } else if (!name) {
+          payload.name = file.filename;
+        }
+        return client.mutate({
           mutation: getMutation('UPLOAD_FILE'),
-          variables: {
-            input: {
-              file,
-              name: name || file.filename,
-              storeKey,
-              data: fileData
-            }
-          }
-        })
-      )
+          variables: { input: { file, ...payload } }
+        });
+      })
     ).catch(error => {
       addToast(error.message, {
         appearance: 'error',
         autoDismiss: true
       });
+      return [];
     });
 
-    const parsedResponse = response.map(({ data: { file } }) => file.result);
+    const parsedResponse = response.map(({ data: { file } }) => {
+      const { message, ...rest } = file.result || {};
+      return rest;
+    });
 
     const fileNames = files.map(({ file }) => file.name);
-    addNewFile(parsedResponse);
-    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;
 
     if (simpleLayout) {
-      const filesToSelect = parsedResponse.map(file => file.id);
+      if (fileId && parsedResponse && parsedResponse.length) {
+        const { message, ...updatedFile } = parsedResponse[0];
+        try {
+          client.writeQuery({
+            query: getQuery('GET_FILE_BY_ID'),
+            variables: { id: fileId },
+            data: { file: updatedFile }
+          });
+        } catch (e) {
+          console.error(e); //eslint-disable-line
+        }
+        const updateMessage = `Updated: ${updatedFile.filename || fileNames[0]}`;
+        closeModalAndSetValue(simpleLayout, updatedFile, updateMessage);
+        return;
+      }
+      const filesToSelect = parsedResponse.map(({ id }) => id);
+      const uploadMessage = `Uploaded: ${fileNames.join(', ')}`;
       getSelectedFiles(null, filesToSelect);
-      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);
+      closeModalAndSetValue(simpleLayout, filesToSelect, uploadMessage);
       return;
     }
 
+    addNewFile && addNewFile(parsedResponse);
+    const toastMessage = fileId ? `Updated: ${fileNames[0]}` : `Uploaded: ${fileNames.join(', ')}`;
+
     addToast(toastMessage, {
       appearance: 'success',
       autoDismiss: true
@@ -68,43 +105,52 @@ const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, sim
     onClose();
   };
 
-  const storeOptions = storeType.map(type => [type.key, type.name]);
+  let storeOptions = storeType.map(type => [type.key, type.name]);
+  storeOptions = storeKey ? storeOptions.filter(([key]) => key === storeKey) : storeOptions;
 
   return (
-    <>
-      <Modal
-        onClose={onClose}
-        title="Add media"
-        actions={[
-          {
-            textButton: 'Cancel',
-            callback: onClose,
-            modifiers: ['cancel']
-          },
-          {
-            textButton: 'Save',
-            callback: handleOnSave,
-            modifiers: []
-          }
-        ]}
-        upload>
-        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />
-      </Modal>
-    </>
+    <Modal
+      onClose={onClose}
+      title="Add media"
+      actions={[
+        {
+          textButton: 'Cancel',
+          callback: onClose,
+          modifiers: ['cancel']
+        },
+        {
+          textButton: 'Upload',
+          callback: handleOnSave,
+          modifiers: []
+        }
+      ]}
+      upload>
+      <FileUpload
+        storeKey={selectedStoreKey || storeKey}
+        onChange={handleFiles}
+        selectOptions={storeOptions}
+      />
+    </Modal>
   );
 };
 
 FileUploadModal.propTypes = {
+  fileId: PropTypes.string,
   getSelectedFiles: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   simpleLayout: PropTypes.bool,
-  closeModalAndSetValue: PropTypes.func
+  closeModalAndSetValue: PropTypes.func,
+  storeKey: PropTypes.string,
+  selectedStoreKey: PropTypes.string
 };
 
 FileUploadModal.defaultProps = {
   onClose: () => {},
   closeModalAndSetValue: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  fileId: null,
+  storeKey: null,
+  selectedStoreKey: null
 };
 
 export default FileUploadModal;

package/src/components/FilterPanel/FilterPanel.js

@@ -9,20 +9,16 @@ import useFileList from '../FileList/useFileList';
 
 const FilterPanel = () => {
   const [searchTerm, setSearchTerm] = useState('');
-  const { filters, selectedFilter, changeSelectedFilter, fileStores } = useMediaContext(
-    MediaContext
-  );
+  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]
-  );
+  useEffect(() => {
+    if (queryParams.searchTerm === null) {
+      setSearchTerm('');
+    }
+  }, [queryParams.searchTerm]);
 
   const handleSearchTerm = ({ target: { value } }) => {
     setSearchTerm(value);
@@ -92,19 +88,18 @@ const FilterPanel = () => {
     <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">
+          {filters.map(({ label, id }) =>
+            selectedFilter.filter !== id ? (
+              <li key={label} className="filter-panel__list-item">
+                <a onClick={() => onChangeFilter(id)}>
                   {label} ({data[id]})
-                </li>
-              )
+                </a>
+              </li>
+            ) : (
+              <li key={label} className="filter-panel__list-item active">
+                {label} ({data[id]})
+              </li>
+            )
           )}
         </ul>
         <div className="filter-panel__barWrapper">