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

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,7 +31,11 @@ const FileUploadAdapter = ({
   shouldRenderInPreview,
   canDragAndDrop,
   simpleLayout,
-  previewAllFiles
+  tooltip,
+  previewAllFiles,
+  disableFilePreview,
+  fileType,
+  storeKey
 }) => {
   const { InjectPreview } = useContext(FileUploadAdapter.FormContext);
   const [currentLimit] = useLimit(maxItems);
@@ -38,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();
 
@@ -67,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)
@@ -74,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
@@ -83,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) => {
@@ -155,11 +163,11 @@ const FileUploadAdapter = ({
     setDisplayModal(false);
   };
 
-  const fileUploadButtonText = getButtonText({ maxItems, value: initialValue });
+  const fileUploadButtonText = getButtonText({ maxItems, value: initialValue, fileType });
 
   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);
@@ -194,7 +202,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: () => {
         closeModalAndSetValue(true);
       },
@@ -211,7 +219,7 @@ const FileUploadAdapter = ({
       modifiers: ['cancel']
     },
     {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: async () => {
         const { name, id: editedFileId, data } = editFile;
         const updatedSelectedFiles = selectedFiles.map(selectedFile => {
@@ -269,7 +277,9 @@ 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 ? (
@@ -294,6 +304,7 @@ const FileUploadAdapter = ({
         )}
         <FileUpload
           actionText={fileUploadButtonText}
+          storeKey={storeKey}
           handleLibraryClick={() => {
             if (simpleLayout) {
               setDisplayFileUploadModal(true);
@@ -312,6 +323,7 @@ const FileUploadAdapter = ({
             handleFormChange={handleEditFileForm}
             displayForm
             previewType="card"
+            disableFilePreview={disableFilePreview}
           />
         </Modal>
       )}
@@ -326,6 +338,8 @@ const FileUploadAdapter = ({
             maxItems={currentLimit}
             simpleLayout={simpleLayout}
             filesSelected={currentValue.length > 1 ? currentValue : []}
+            openEditInModal
+            storeKey={storeKey}
           />
         </div>
       )}
@@ -344,6 +358,8 @@ const FileUploadAdapter = ({
               handleSelectedFiles={handleSelectedFiles}
               maxItems={currentLimit}
               filesSelected={currentValue.length > 1 ? currentValue : []}
+              openEditInModal
+              storeKey={storeKey}
             />
           </Modal>
         </div>
@@ -362,7 +378,11 @@ FileUploadAdapter.propTypes = {
   shouldRenderInPreview: PropTypes.bool,
   canDragAndDrop: PropTypes.bool,
   simpleLayout: PropTypes.bool,
-  previewAllFiles: PropTypes.bool
+  previewAllFiles: PropTypes.bool,
+  tooltip: PropTypes.string,
+  fileType: PropTypes.string,
+  disableFilePreview: PropTypes.bool,
+  storeKey: PropTypes.string
 };
 
 FileUploadAdapter.defaultProps = {
@@ -371,7 +391,11 @@ FileUploadAdapter.defaultProps = {
   shouldRenderInPreview: false,
   canDragAndDrop: false,
   simpleLayout: false,
-  previewAllFiles: false
+  previewAllFiles: false,
+  tooltip: '',
+  fileType: 'file',
+  disableFilePreview: true,
+  storeKey: null
 };
 
 export default FileUploadAdapter;

package/src/components/FileUploadAdapter/mappers/get-button-text.js

@@ -1,6 +1,7 @@
-const getButtonText = ({ maxItems, value }) => {
-  const fileLabel = maxItems > 1 ? 'Add File/s' : 'Add file';
-  return value && value.length ? 'Change file' : fileLabel;
+const getButtonText = ({ maxItems, value, fileType = 'file' }) => {
+  const pluralSuffix = maxItems > 1 ? 's' : '';
+  const fileLabel = `Add ${fileType}${pluralSuffix}`;
+  return value && value.length > 0 ? `Change ${fileType}${pluralSuffix}` : fileLabel;
 };
 
 export { getButtonText };

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/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/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([]);
@@ -108,7 +109,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 +128,9 @@ const MediaFileList = ({
                     id={id}
                     index={index}
                     removeFile={removeFile}
+                    openEditInModal={openEditInModal}
+                    data={fileData}
+                    updated={updated}
                   />
                 </div>
               );
@@ -137,7 +141,7 @@ const MediaFileList = ({
       {displayCardPrompt && (
         <CardPrompt>
           <Button onClick={onClickPrompt} className="button button--rounded button--cta">
-            Add
+            Upload
           </Button>
         </CardPrompt>
       )}
@@ -150,11 +154,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');
@@ -82,6 +84,9 @@ const ListingContainer = ({
             handleDisplayFileUploadModal={handleDisplayFileUploadModal}
             setSelectedFiles={setSelectedFiles}
             handleSelectedFiles={handleSelectedFiles}
+            openEditInModal={openEditInModal}
+            selectedStoreKey={selectedFilter.storeKey || defaultFileStore}
+            storeKey={storeKey}
           />
         </FilesListProvider>
       </MediaContextProvider>
@@ -96,7 +101,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 +111,9 @@ ListingContainer.defaultProps = {
   handleSelectedFiles: () => {},
   maxItems: false,
   filesSelected: [],
-  simpleLayout: false
+  simpleLayout: false,
+  openEditInModal: false,
+  storeKey: 'default'
 };
 
 export default ListingContainer;