@blaze-cms/plugin-media-ui 0.146.0-node18-tooltips.32 → 0.146.0-node18-core-styles-tooltips.41

package/src/components/EditMediaFile/EditMediaFile.js

@@ -10,9 +10,9 @@ import { STORE_KEY, NAME } from '../../constants';
 const EditMediaFile = ({
   onChange,
   handleSaveButtonStatus,
-  enableSaveButton,
   fileId,
-  showChangeButton
+  showChangeButton,
+  fileUpdated
 }) => {
   const [formValues, setFormValues] = useState(null);
   const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
@@ -25,7 +25,7 @@ const EditMediaFile = ({
     refetch: refetchFile
   } = useQuery(fileQuery, {
     variables: { id: fileId },
-    fetchPolicy: 'network-only'
+    fetchPolicy: 'cache-and-network'
   });
 
   const fileStoresType = getQuery('GET_FILE_STORES');
@@ -34,12 +34,24 @@ const EditMediaFile = ({
   });
 
   useEffect(() => {
-    if (!formValues && file) {
-      setFormValues(file);
+    if (file) {
+      setFormValues(prevFormValues => {
+        if (!prevFormValues || prevFormValues.updated !== file.updated) {
+          return file;
+        }
+        return prevFormValues;
+      });
     }
-  }, [file, formValues, storeType]);
+  }, [file]);
+
+  useEffect(() => {
+    if (fileUpdated && fileUpdated.updated) {
+      setFormValues(fileUpdated);
+    }
+  }, [fileUpdated]);
 
   const handleFormChange = ({ isValid, isNewValueSet, valuesChecked }) => {
+    const baseFile = formValues || file;
     const valuesCheckedWithoutName = valuesChecked.filter(
       ({ id }) => id !== NAME && id !== STORE_KEY
     );
@@ -53,52 +65,67 @@ const EditMediaFile = ({
     const { value: storeKey } = valuesChecked.find(({ id }) => id === STORE_KEY) || {};
 
     const shouldEnableSaveButton = isNewValueSet && isValid;
-    handleSaveButtonStatus(false);
-    if (shouldEnableSaveButton && shouldEnableSaveButton !== enableSaveButton) {
-      handleSaveButtonStatus(shouldEnableSaveButton);
-    }
+    handleSaveButtonStatus(shouldEnableSaveButton);
 
     const updatedFile = {
-      id: file.id,
-      name: newFileName,
-      storeKey,
-      data: dataValues
+      ...baseFile,
+      name: newFileName || baseFile.name,
+      storeKey: storeKey || baseFile.storeKey,
+      data: { ...(baseFile.data || {}), ...dataValues }
     };
 
     setFormValues(updatedFile);
-    onChange(updatedFile);
+    // Strip GraphQL metadata field __typename before passing data to onChange.
+    const { __typename, ...cleanData } = updatedFile.data || {};
+    onChange({ id: updatedFile.id, name: updatedFile.name, data: cleanData });
   };
 
-  const getFileWithStoreType = () => {
-    if (storeType && file) {
+  const getFileWithStoreType = sourceFile => {
+    const base = sourceFile || file;
+    if (storeType && base) {
       const storeOptions = storeType.map(type => [type.key, type.name]);
       const defaultStore = storeType.find(type => type.isDefault) || null;
-      return { ...file, store: { defaultStore, storeOptions } };
+      return { ...base, store: { defaultStore, storeOptions } };
     }
-    return file;
+    return base;
   };
 
   const closeModalAndSetValue = async (isSaving, values, toastMessage) => {
     if (toastMessage) {
-      addToast(toastMessage, {
-        appearance: 'success',
-        autoDismiss: true
+      addToast(toastMessage, { appearance: 'success', autoDismiss: true });
+    }
+
+    if (values) {
+      const updated =
+        values.id === fileId
+          ? values
+          : {
+            ...(formValues || file),
+            ...values,
+            url: values.url || (formValues || file).url
+          };
+      setFormValues(updated);
+      onChange(updated);
+      handleSaveButtonStatus(true);
+    } else {
+      const { data: { file: refreshedFile } = {} } = await refetchFile({
+        id: fileId,
+        timestamp: Date.now()
       });
+      if (refreshedFile) {
+        setFormValues(refreshedFile);
+        onChange(refreshedFile);
+        handleSaveButtonStatus(true);
+      }
     }
-    await refetchFile({
-      id: fileId,
-      timestamp: Date.now()
-    });
-    setDisplayFileUploadModal(false);
-  };
 
-  const handleChangeFile = () => {
-    setDisplayFileUploadModal(true);
+    setDisplayFileUploadModal(false);
   };
 
   if (loading) return <div>loading...</div>;
 
-  const fileWithStoreType = getFileWithStoreType();
+  const fileToRender = formValues || file;
+  const fileWithStoreType = getFileWithStoreType(fileToRender);
 
   return !loading ? (
     <>
@@ -106,7 +133,7 @@ const EditMediaFile = ({
         <FilePreview
           file={fileWithStoreType}
           handleFormChange={handleFormChange}
-          handleChangeFile={handleChangeFile}
+          handleChangeFile={() => setDisplayFileUploadModal(true)}
           displayForm
           showChangeButton={showChangeButton}
         />
@@ -114,13 +141,12 @@ const EditMediaFile = ({
       {displayFileUploadModal && (
         <div className="file-upload-modal-wrapper">
           <FileUploadModal
-            onClose={() => {
-              setDisplayFileUploadModal(false);
-            }}
+            onClose={() => setDisplayFileUploadModal(false)}
             closeModalAndSetValue={closeModalAndSetValue}
             simpleLayout
             fileId={fileId}
-            getSelectedFiles={() => {}}
+            storeKey={file && file.storeKey}
+            getSelectedFiles={() => { }}
           />
         </div>
       )}
@@ -134,13 +160,13 @@ EditMediaFile.propTypes = {
   fileId: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   handleSaveButtonStatus: PropTypes.func.isRequired,
-  enableSaveButton: PropTypes.bool,
-  showChangeButton: PropTypes.bool
+  showChangeButton: PropTypes.bool,
+  fileUpdated: PropTypes.object
 };
 
 EditMediaFile.defaultProps = {
-  enableSaveButton: false,
-  showChangeButton: false
+  showChangeButton: false,
+  fileUpdated: null
 };
 
 export default EditMediaFile;

package/src/components/EditMediaFile/EditMediaFilePage.js

@@ -20,19 +20,44 @@ const EditMediaFilePage = ({ match, history }) => {
   };
 
   const handleFormSave = async () => {
+    if (!file) {
+      addToast('No file data to update', {
+        appearance: 'error',
+        autoDismiss: true
+      });
+      return;
+    }
+
     try {
-      await client.mutate({
+      const inputData = {
+        id: file.id,
+        name: file.name,
+        data: file.data,
+        storeKey: file.storeKey
+      };
+
+      const {
+        data: { updateFile: updatedFile }
+      } = await client.mutate({
         mutation: getMutation('UPDATE_FILE'),
-        variables: { input: file },
+        variables: {
+          input: inputData
+        },
         update(cache, { data: { updateFile: fileUpdated } }) {
-          cache.writeQuery({
-            query: getQuery('GET_FILE_BY_ID'),
-            variables: { id: match.params.fileId },
-            data: { file: fileUpdated.result }
-          });
+          try {
+            cache.writeQuery({
+              query: getQuery('GET_FILE_BY_ID'),
+              variables: { id: match.params.fileId },
+              data: { file: fileUpdated.result }
+            });
+          } catch (e) {
+            console.error(e); //eslint-disable-line
+          }
         }
       });
 
+      setFile(updatedFile.result);
+
       addToast(`File: ${file.name} has been updated`, {
         appearance: 'success',
         autoDismiss: true
@@ -42,7 +67,6 @@ const EditMediaFilePage = ({ match, history }) => {
         appearance: 'error',
         autoDismiss: true
       });
-      console.error(e); //eslint-disable-line
     }
     setShouldEnableSaveButton(false);
   };
@@ -61,6 +85,7 @@ const EditMediaFilePage = ({ match, history }) => {
             handleSaveButtonStatus={handleSaveButtonStatus}
             handleFormSave={handleFormSave}
             showChangeButton
+            fileUpdated={file}
           />
           <div className="page__content__mediaWrapperActions">
             <Button onClick={pushBack}>Cancel</Button>

package/src/components/FilePreview/PDF/PDF.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 
-const PDF = ({ mimetype, url, name, children }) => (
-  <div className="preview">
+const PDF = ({ mimetype, url, name, children, handleChangeFile, showChangeButton }) => (
+  <div className="preview" key={`pdf-${url}`}>
     <div className="preview__file preview__file--pdf">
-      <object data={url} type={mimetype} className="preview__file--pdf">
+      <object key={url} data={url} type={mimetype} className="preview__file--pdf">
         <p>
           <a href={url} rel="noopener noreferrer" target="_blank">
             Download {name}
@@ -18,6 +19,11 @@ const PDF = ({ mimetype, url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -28,7 +34,14 @@ PDF.propTypes = {
   mimetype: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  handleChangeFile: PropTypes.func,
+  showChangeButton: PropTypes.bool
+};
+
+PDF.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { PDF };

package/src/components/FilePreview/index.js

@@ -13,7 +13,13 @@ const FilePreview = ({
   showChangeButton,
   disableFilePreview
 }) => {
-  const { name, url, mimetype, data, store } = file;
+  const { name, url, mimetype, data, store, updated } = file;
+  const bustUrl = (srcUrl, version) => {
+    if (!srcUrl) return srcUrl;
+    const sep = srcUrl.includes('?') ? '&' : '?';
+    return `${srcUrl}${sep}v=${version || Date.now()}`;
+  };
+  const displayUrl = bustUrl(url, updated);
   const [Preview, schema] = getPreview({ mimetype, previewType });
   const shouldRenderForm = schema && displayForm;
 
@@ -28,13 +34,13 @@ const FilePreview = ({
     }
   }
 
-  const formBuilderData = { values: { ...file, ...data } };
+  const formBuilderData = { values: { ...data, ...file } };
 
   return (
     <>
       <Preview
         mimetype={mimetype}
-        url={url}
+        url={displayUrl}
         name={name}
         {...data}
         file={file}

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

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 import { DefaultIcon } from './icons';
 
-const PreviewDefault = ({ url, name, children }) => (
-  <div className="preview">
+const PreviewDefault = ({ url, name, children, handleChangeFile, showChangeButton }) => (
+  <div className="preview" key={`default-${url}`}>
     <div className="preview__file preview__file--default">
       <div className="preview__file--icon">
         <DefaultIcon />
@@ -16,6 +17,11 @@ const PreviewDefault = ({ url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -25,7 +31,14 @@ const PreviewDefault = ({ url, name, children }) => (
 PreviewDefault.propTypes = {
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  handleChangeFile: PropTypes.func,
+  showChangeButton: PropTypes.bool
+};
+
+PreviewDefault.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { PreviewDefault };

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

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

@@ -109,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">
@@ -129,6 +129,8 @@ const MediaFileList = ({
                     index={index}
                     removeFile={removeFile}
                     openEditInModal={openEditInModal}
+                    data={fileData}
+                    updated={updated}
                   />
                 </div>
               );

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}`;
+}