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

package/src/components/EditMediaFile/EditMediaFile.js

@@ -10,18 +10,22 @@ 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);
   const { addToast } = useToasts();
 
   const fileQuery = getQuery('GET_FILE_BY_ID');
-  const { loading, data: { file } = {}, refetch: refetchFile } = useQuery(fileQuery, {
+  const {
+    loading,
+    data: { file } = {},
+    refetch: refetchFile
+  } = useQuery(fileQuery, {
     variables: { id: fileId },
-    fetchPolicy: 'network-only'
+    fetchPolicy: 'cache-and-network'
   });
 
   const fileStoresType = getQuery('GET_FILE_STORES');
@@ -29,16 +33,25 @@ const EditMediaFile = ({
     variables: { visibleInAdmin: true }
   });
 
-  useEffect(
-    () => {
-      if (!formValues && file) {
-        setFormValues(file);
-      }
-    },
-    [file, formValues, storeType]
-  );
+  useEffect(() => {
+    if (file) {
+      setFormValues(prevFormValues => {
+        if (!prevFormValues || prevFormValues.updated !== file.updated) {
+          return file;
+        }
+        return prevFormValues;
+      });
+    }
+  }, [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
     );
@@ -52,60 +65,75 @@ 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 (
+  return !loading ? (
     <>
       {!!file && (
         <FilePreview
           file={fileWithStoreType}
           handleFormChange={handleFormChange}
-          handleChangeFile={handleChangeFile}
+          handleChangeFile={() => setDisplayFileUploadModal(true)}
           displayForm
           showChangeButton={showChangeButton}
         />
@@ -113,17 +141,18 @@ const EditMediaFile = ({
       {displayFileUploadModal && (
         <div className="file-upload-modal-wrapper">
           <FileUploadModal
-            onClose={() => {
-              setDisplayFileUploadModal(false);
-            }}
+            onClose={() => setDisplayFileUploadModal(false)}
             closeModalAndSetValue={closeModalAndSetValue}
             simpleLayout
             fileId={fileId}
+            storeKey={file && file.storeKey}
             getSelectedFiles={() => {}}
           />
         </div>
       )}
     </>
+  ) : (
+    <div>loading...</div>
   );
 };
 
@@ -131,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,24 +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 },
-        update(
-          cache,
-          {
-            data: { updateFile: fileUpdated }
+        variables: {
+          input: inputData
+        },
+        update(cache, { data: { updateFile: fileUpdated } }) {
+          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
           }
-        ) {
-          cache.writeQuery({
-            query: getQuery('GET_FILE_BY_ID'),
-            variables: { id: match.params.fileId },
-            data: { file: fileUpdated.result }
-          });
         }
       });
 
+      setFile(updatedFile.result);
+
       addToast(`File: ${file.name} has been updated`, {
         appearance: 'success',
         autoDismiss: true
@@ -47,7 +67,6 @@ const EditMediaFilePage = ({ match, history }) => {
         appearance: 'error',
         autoDismiss: true
       });
-      console.error(e); //eslint-disable-line
     }
     setShouldEnableSaveButton(false);
   };
@@ -66,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/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/FileList/useGetFilesList/useGetFilesList.js

@@ -20,19 +20,16 @@ function useGetFilesList() {
   const [allFilesCounter, setAllFilesCounter] = useState({ all: 0, text: 0, image: 0, video: 0 });
   const [counters, setCounters] = useState(null);
 
-  useEffect(
-    () => {
-      if (all && image && video && text) {
-        setCounters({
-          all: all.total,
-          image: image.total,
-          video: video.total,
-          text: text.total
-        });
-      }
-    },
-    [all, image, video, text]
-  );
+  useEffect(() => {
+    if (all && image && video && text) {
+      setCounters({
+        all: all.total,
+        image: image.total,
+        video: video.total,
+        text: text.total
+      });
+    }
+  }, [all, image, video, text]);
 
   useEffect(
     () => {
@@ -102,7 +99,11 @@ function useGetFilesList() {
   };
 
   const addNewFile = newFiles => {
-    const { image: _image, video: _video, text: _text } = newFiles.reduce(
+    const {
+      image: _image,
+      video: _video,
+      text: _text
+    } = newFiles.reduce(
       (acc, { type }) => {
         acc[type] += 1;
         return acc;

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/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/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>
   );
 };