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

package/src/components/EditMediaFile/EditMediaFile.js

@@ -2,14 +2,30 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { useQuery } from '@apollo/client';
+import { useToasts } from '@blaze-react/toaster';
 import FilePreview from '../FilePreview';
+import FileUploadModal from '../FileUploadModal';
 import { STORE_KEY, NAME } from '../../constants';
 
-const EditMediaFile = ({ onChange, handleSaveButtonStatus, enableSaveButton, fileId }) => {
+const EditMediaFile = ({
+  onChange,
+  handleSaveButtonStatus,
+  fileId,
+  showChangeButton,
+  fileUpdated
+}) => {
   const [formValues, setFormValues] = useState(null);
-  const query = getQuery('GET_FILE_BY_ID');
-  const { loading, data: { file } = {} } = useQuery(query, {
-    variables: { id: fileId }
+  const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
+  const { addToast } = useToasts();
+
+  const fileQuery = getQuery('GET_FILE_BY_ID');
+  const {
+    loading,
+    data: { file } = {},
+    refetch: refetchFile
+  } = useQuery(fileQuery, {
+    variables: { id: fileId },
+    fetchPolicy: 'cache-and-network'
   });
 
   const fileStoresType = getQuery('GET_FILE_STORES');
@@ -18,65 +34,125 @@ const EditMediaFile = ({ onChange, handleSaveButtonStatus, enableSaveButton, fil
   });
 
   useEffect(() => {
-    if (!formValues && file) {
-      setFormValues(file);
+    if (file) {
+      setFormValues(prevFormValues => {
+        if (!prevFormValues || prevFormValues.updated !== file.updated) {
+          return file;
+        }
+        return prevFormValues;
+      });
+    }
+  }, [file]);
+
+  useEffect(() => {
+    if (fileUpdated && fileUpdated.updated) {
+      setFormValues(fileUpdated);
     }
-  }, [file, formValues, storeType]);
+  }, [fileUpdated]);
 
   const handleFormChange = ({ isValid, isNewValueSet, valuesChecked }) => {
-    const valuesCheckedWithoutName = valuesChecked.filter(({ id }) => {
-      if (id === NAME || id === STORE_KEY) return false;
-      return true;
-    });
+    const baseFile = formValues || file;
+    const valuesCheckedWithoutName = valuesChecked.filter(
+      ({ id }) => id !== NAME && id !== STORE_KEY
+    );
 
     const dataValues = valuesCheckedWithoutName.reduce((acc, { id, value }) => {
       acc[id] = value;
       return acc;
     }, {});
+
     const { value: newFileName } = valuesChecked.find(({ id }) => id === NAME) || {};
     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) {
+  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 base;
+  };
+
+  const closeModalAndSetValue = async (isSaving, values, toastMessage) => {
+    if (toastMessage) {
+      addToast(toastMessage, { appearance: 'success', autoDismiss: true });
     }
 
-    return file;
+    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);
+      }
+    }
+
+    setDisplayFileUploadModal(false);
   };
 
-  const fileWithStoreType = getFileWithStoreType();
+  if (loading) return <div>loading...</div>;
+
+  const fileToRender = formValues || file;
+  const fileWithStoreType = getFileWithStoreType(fileToRender);
 
-  return (
+  return !loading ? (
     <>
-      {!loading ? (
-        <>
-          {file ? (
-            <FilePreview file={fileWithStoreType} handleFormChange={handleFormChange} displayForm />
-          ) : null}
-        </>
-      ) : (
-        <div>loading...</div>
+      {!!file && (
+        <FilePreview
+          file={fileWithStoreType}
+          handleFormChange={handleFormChange}
+          handleChangeFile={() => setDisplayFileUploadModal(true)}
+          displayForm
+          showChangeButton={showChangeButton}
+        />
+      )}
+      {displayFileUploadModal && (
+        <div className="file-upload-modal-wrapper">
+          <FileUploadModal
+            onClose={() => setDisplayFileUploadModal(false)}
+            closeModalAndSetValue={closeModalAndSetValue}
+            simpleLayout
+            fileId={fileId}
+            storeKey={file && file.storeKey}
+            getSelectedFiles={() => {}}
+          />
+        </div>
       )}
     </>
+  ) : (
+    <div>loading...</div>
   );
 };
 
@@ -84,11 +160,13 @@ EditMediaFile.propTypes = {
   fileId: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   handleSaveButtonStatus: PropTypes.func.isRequired,
-  enableSaveButton: PropTypes.bool
+  showChangeButton: PropTypes.bool,
+  fileUpdated: PropTypes.object
 };
 
 EditMediaFile.defaultProps = {
-  enableSaveButton: 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);
   };
@@ -60,11 +84,13 @@ const EditMediaFilePage = ({ match, history }) => {
             fileId={match.params.fileId}
             handleSaveButtonStatus={handleSaveButtonStatus}
             handleFormSave={handleFormSave}
+            showChangeButton
+            fileUpdated={file}
           />
           <div className="page__content__mediaWrapperActions">
             <Button onClick={pushBack}>Cancel</Button>
             <Button onClick={handleFormSave} modifiers={buttonModifiers}>
-              Save
+              Apply
             </Button>
           </div>
         </div>

package/src/components/EditorAdapter/EditorAdapter.js

@@ -1,16 +1,41 @@
 import React from 'react';
 import DraftEditor from '@blaze-react/drafteditor';
 import PropTypes from 'prop-types';
+import Tooltip from '@blaze-react/tooltip';
 
-const DraftEditorAdapter = ({ id, value, onChange, error, validationMessage, label, ...props }) => (
+const customStyleMap = {
+  SUPERSCRIPT: {
+    fontSize: '0.75em',
+    verticalAlign: 'super'
+  },
+  SUBSCRIPT: {
+    fontSize: '0.75em',
+    verticalAlign: 'sub'
+  }
+};
+
+const DraftEditorAdapter = ({
+  id,
+  value,
+  onChange,
+  error,
+  validationMessage,
+  label,
+  tooltip,
+  ...props
+}) => (
   <div className="form-field form-field--full-width">
-    <label>{label}</label>
+    <label>
+      <Tooltip tooltipContent={tooltip} />
+    </label>
     <DraftEditor
       name={id}
       value={value}
       onChange={onChange}
       error={error}
       validationMessage={validationMessage}
+      tooltip={{ tooltipContent: tooltip }}
+      customStyleMap={customStyleMap}
     />
   </div>
 );
@@ -21,12 +46,14 @@ DraftEditorAdapter.propTypes = {
   onChange: PropTypes.func.isRequired,
   error: PropTypes.bool,
   validationMessage: PropTypes.string,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  tooltip: PropTypes.string
 };
 
 DraftEditorAdapter.defaultProps = {
   error: false,
-  validationMessage: undefined
+  validationMessage: undefined,
+  tooltip: ''
 };
 
 export default DraftEditorAdapter;

package/src/components/FilePreview/Actions/index.js

@@ -7,34 +7,32 @@ const Actions = ({ file }) => {
   const [, extension] = file.mimetype.split('/');
 
   return (
-    <>
-      <div className="FilePreviewItem__info__actions">
-        <div className="FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type">
-          <i className="FilePreviewItem__info__actionsIcon material-icons">insert_photo</i>{' '}
-          <span>{extension}</span>
-        </div>
-        <div>
-          {handleEditModal && (
-            <div
-              data-testid={`open-media-library-${file.id}`}
-              className="FilePreviewItem__info__actionsIcon material-icons edit"
-              aria-hidden="true"
-              onClick={() => handleEditModal(file)}>
-              <i className="fas fa-pen fa-xs" />
-            </div>
-          )}
-          {onUnselectFile && (
-            <div
-              data-testid={`unselect-${file.id}`}
-              className="FilePreviewItem__info__actionsIcon material-icons delete"
-              aria-hidden="true"
-              onClick={() => onUnselectFile([file.id])}>
-              <i className="fas fa-trash fa-xs" />
-            </div>
-          )}
-        </div>
+    <div className="FilePreviewItem__info__actions">
+      <div className="FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type">
+        <i className="FilePreviewItem__info__actionsIcon material-icons">insert_photo</i>{' '}
+        <span>{extension}</span>
       </div>
-    </>
+      <div>
+        {handleEditModal && (
+          <div
+            data-testid={`open-media-library-${file.id}`}
+            className="FilePreviewItem__info__actionsIcon material-icons edit"
+            aria-hidden="true"
+            onClick={() => handleEditModal(file)}>
+            <i className="fas fa-pen fa-xs" />
+          </div>
+        )}
+        {onUnselectFile && (
+          <div
+            data-testid={`unselect-${file.id}`}
+            className="FilePreviewItem__info__actionsIcon material-icons delete"
+            aria-hidden="true"
+            onClick={() => onUnselectFile([file.id])}>
+            <i className="fas fa-trash fa-xs" />
+          </div>
+        )}
+      </div>
+    </div>
   );
 };
 

package/src/components/FilePreview/Image/Image.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 
-const Image = ({ url, name, children }) => (
+const Image = ({ url, name, children, handleChangeFile, showChangeButton }) => (
   <div className="preview">
     <div className="preview__file preview__file--image">
       <img src={url} alt={name} />
@@ -12,6 +13,11 @@ const Image = ({ url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -21,7 +27,14 @@ const Image = ({ url, name, children }) => (
 Image.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
+};
+
+Image.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { Image };

package/src/components/FilePreview/Image/imageSchema.js

@@ -40,7 +40,7 @@ const imageSchema = {
       hrefUrl: {
         type: 'string',
         format: 'uri-template',
-        label: 'url',
+        label: 'Image hyperlink',
         showInForm: true,
         formFieldType: 'text',
         description: 'Url format is not valid'

package/src/components/FilePreview/ModalContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ModalContext = createContext(false);

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

@@ -3,8 +3,23 @@ import { FormBuilder } from '@blaze-cms/react-form-builder';
 import PropTypes from 'prop-types';
 import { getPreview } from './get-preview';
 
-const FilePreview = ({ file, handleFormChange, displayForm, previewType, children }) => {
-  const { name, url, mimetype, data, store } = file;
+const FilePreview = ({
+  file,
+  handleFormChange,
+  displayForm,
+  previewType,
+  children,
+  handleChangeFile,
+  showChangeButton,
+  disableFilePreview
+}) => {
+  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;
 
@@ -19,11 +34,19 @@ const FilePreview = ({ file, handleFormChange, displayForm, previewType, childre
     }
   }
 
-  const formBuilderData = { values: { ...file, ...data } };
+  const formBuilderData = { values: { ...data, ...file } };
 
   return (
     <>
-      <Preview mimetype={mimetype} url={url} name={name} {...data} file={file}>
+      <Preview
+        mimetype={mimetype}
+        url={displayUrl}
+        name={name}
+        {...data}
+        file={file}
+        handleChangeFile={handleChangeFile}
+        disableFilePreview={disableFilePreview}
+        showChangeButton={showChangeButton}>
         {shouldRenderForm && (
           <div className="preview__details">
             <div className="preview__filename">{file.filename}</div>
@@ -50,10 +73,13 @@ FilePreview.propTypes = {
   file: PropTypes.object.isRequired,
   fileName: PropTypes.string,
   handleFormChange: PropTypes.func,
+  handleChangeFile: PropTypes.func,
   displayForm: PropTypes.bool,
   handlers: PropTypes.object,
   previewType: PropTypes.oneOf(Object.keys(FilePreview.availablePreviewTypes)),
-  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+  showChangeButton: PropTypes.bool,
+  disableFilePreview: PropTypes.bool
 };
 
 FilePreview.defaultProps = {
@@ -62,7 +88,10 @@ FilePreview.defaultProps = {
   handlers: {},
   previewType: FilePreview.availablePreviewTypes.card,
   handleFormChange: () => {},
-  children: []
+  handleChangeFile: () => {},
+  children: [],
+  showChangeButton: false,
+  disableFilePreview: true
 };
 
 export default FilePreview;

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/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 = {