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

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,6 +31,7 @@ const FileUploadAdapter = ({
   shouldRenderInPreview,
   canDragAndDrop,
   simpleLayout,
+  tooltip,
   previewAllFiles,
   disableFilePreview,
   fileType,
@@ -238,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 },
@@ -280,30 +277,30 @@ 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}
@@ -331,44 +328,42 @@ const FileUploadAdapter = ({
         </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 : []}
-                openEditInModal
-                storeKey={storeKey}
-              />
-            </Modal>
-          </div>
-        )}
+          </Modal>
+        </div>
+      )}
     </>
   );
 };
@@ -384,6 +379,7 @@ FileUploadAdapter.propTypes = {
   canDragAndDrop: PropTypes.bool,
   simpleLayout: PropTypes.bool,
   previewAllFiles: PropTypes.bool,
+  tooltip: PropTypes.string,
   fileType: PropTypes.string,
   disableFilePreview: PropTypes.bool,
   storeKey: PropTypes.string
@@ -396,6 +392,7 @@ FileUploadAdapter.defaultProps = {
   canDragAndDrop: false,
   simpleLayout: false,
   previewAllFiles: false,
+  tooltip: '',
   fileType: 'file',
   disableFilePreview: true,
   storeKey: null

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

@@ -21,21 +21,26 @@ const FileUploadModal = ({
   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, storeKey: fileStoreKey }) => {
+      filesToProcess.map(({ file, name, data, storeKey: fileStoreKey }) => {
         const payload = {
           name,
-          storeKey: fileStoreKey,
+          storeKey: fileStoreKey || selectedStoreKey || storeKey,
           data
         };
         if (fileId) {
@@ -45,12 +50,7 @@ const FileUploadModal = ({
         }
         return client.mutate({
           mutation: getMutation('UPLOAD_FILE'),
-          variables: {
-            input: {
-              file,
-              ...payload
-            }
-          }
+          variables: { input: { file, ...payload } }
         });
       })
     ).catch(error => {
@@ -58,21 +58,42 @@ const FileUploadModal = ({
         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 && 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
@@ -88,30 +109,28 @@ const FileUploadModal = ({
   storeOptions = storeKey ? storeOptions.filter(([key]) => key === storeKey) : storeOptions;
 
   return (
-    <>
-      <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>
-    </>
+    <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>
   );
 };
 

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">

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

@@ -24,28 +24,17 @@ const MediaFileList = ({
   const [currentListIndex, setCurrentListIndex] = useState(1);
   const [verifiedRanges, setVerifiedRanges] = useState([]);
   const [listHeight, setListHeight] = useState(null);
-  const {
-    queryParams,
-    data,
-    loading,
-    setQueryParams,
-    clearList,
-    removeFile,
-    updateFile
-  } = useFileList();
+  const { queryParams, data, loading, setQueryParams, clearList, removeFile, updateFile } =
+    useFileList();
 
-  const { onClickPrompt, getSelectedFiles, selectedFiles, selectedFilter } = useMediaContext(
-    MediaContext
-  );
+  const { onClickPrompt, getSelectedFiles, selectedFiles, selectedFilter } =
+    useMediaContext(MediaContext);
 
   const hasFiles = !!data.files && !!data.files.length;
 
-  useEffect(
-    () => {
-      if (!loading && !hasFiles) setDisplayCardPrompt(true);
-    },
-    [loading, hasFiles, setDisplayCardPrompt]
-  );
+  useEffect(() => {
+    if (!loading && !hasFiles) setDisplayCardPrompt(true);
+  }, [loading, hasFiles, setDisplayCardPrompt]);
 
   useEffect(
     () => {
@@ -88,22 +77,19 @@ const MediaFileList = ({
     }
   };
 
-  useEffect(
-    () => {
-      const handleListHeight = () => {
-        setListHeight(wrapperRef.current.clientHeight - 40);
-      };
+  useEffect(() => {
+    const handleListHeight = () => {
+      setListHeight(wrapperRef.current.clientHeight - 40);
+    };
 
-      if (wrapperRef.current) {
-        handleListHeight();
-        window.addEventListener('resize', handleListHeight);
-      }
-      return () => {
-        window.removeEventListener('resize', handleListHeight);
-      };
-    },
-    [listHeight, wrapperRef]
-  );
+    if (wrapperRef.current) {
+      handleListHeight();
+      window.addEventListener('resize', handleListHeight);
+    }
+    return () => {
+      window.removeEventListener('resize', handleListHeight);
+    };
+  }, [listHeight, wrapperRef]);
 
   const searchedTerm = queryParams.searchTerm && `${queryParams.searchTerm} -`;
 
@@ -123,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">
@@ -143,6 +129,8 @@ const MediaFileList = ({
                     index={index}
                     removeFile={removeFile}
                     openEditInModal={openEditInModal}
+                    data={fileData}
+                    updated={updated}
                   />
                 </div>
               );

package/src/index.js

@@ -1,21 +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}`;
+}