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

package/src/components/CardMedia/CardMedia.js

@@ -1,16 +1,16 @@
-import React, { useState } from 'react';
-import More from '@blaze-react/more';
-import Button from '@blaze-react/button';
+import React, { useState, useCallback } from 'react';
 import { DeleteAction } from '@blaze-cms/admin';
 import PropTypes from 'prop-types';
 import { getQuery, getMutation } from '@blaze-cms/admin-ui-utils';
-import { useMutation, useApolloClient } from '@apollo/client';
+import { useMutation, useApolloClient, useQuery } from '@apollo/client';
 import classnames from 'classnames';
 import { useToasts } from '@blaze-react/toaster';
 import Modal from '@blaze-react/modal';
 import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
+import { DeleteIcon, EditIcon } from '@blaze-cms/plugin-page-builder-ui';
 import EditMediaFile from '../EditMediaFile';
+import bustUrl from '../../utils/bustUrl';
 
 const CardMedia = ({
   onSelected,
@@ -21,10 +21,12 @@ const CardMedia = ({
   selected,
   displayLayout,
   data,
+  updated,
   modalTargetRef,
   updateFile,
   removeFile,
-  index
+  index,
+  openEditInModal
 }) => {
   const [displayDeleteModal, setDisplayDeleteModal] = useState(false);
   const [displayEditModal, setDisplayEditModal] = useState(false);
@@ -35,62 +37,63 @@ const CardMedia = ({
   const [type, extension] = mimetype.split('/');
   const client = useApolloClient();
 
+  const { data: { getEntitySchemas: [schemaData] = [] } = {}, loading: schemaLoading } = useQuery(
+    getQuery('GET_ENTITY_SCHEMA'),
+    {
+      variables: { identifier: 'file' }
+    }
+  );
+
   const deleteFileById = async () => {
     setDisplayDeleteModal(false);
     try {
-      await deleteFile({
-        variables: { input: { id } }
-      });
-
-      removeFile({
-        index
-      });
-
-      addToast(`File: ${name} has been deleted`, {
-        appearance: 'success',
-        autoDismiss: true
-      });
+      await deleteFile({ variables: { input: { id } } });
+      removeFile({ index });
+      addToast(`File: ${name} has been deleted`, { appearance: 'success', autoDismiss: true });
     } catch (error) {
-      addToast(error.message, {
-        appearance: 'error',
-        autoDismiss: true
-      });
+      addToast(error.message, { appearance: 'error', autoDismiss: true });
     }
   };
 
-  const handleClick = () => {
-    onSelected({ id, url, name, data });
-  };
+  const handleRowClick = () => onSelected({ id, url, name, data });
 
-  const cardMediaClassNames = classnames('card card--media-list', {
-    'card--media-list--selected': selected,
-    [`card--media-${displayLayout}`]: displayLayout
-  });
+  const handleCheckboxToggle = useCallback(
+    e => {
+      e.preventDefault();
+      e.stopPropagation();
+      onSelected({ id, url, name, data });
+    },
+    [id, url, name, data, onSelected]
+  );
 
-  const handleCloseModal = () => {
-    setDisplayEditModal(false);
+  const handleKeyDown = e => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleRowClick();
+    }
   };
 
-  const handleSaveButtonStatus = state => {
-    setEnableSaveButton(state);
-  };
+  const cardMediaClassNames = classnames(
+    'card card--media-list card--media-list-row',
+    `card--media-${displayLayout}`,
+    { 'card--media-list--selected': selected }
+  );
+
+  const handleCloseModal = () => setDisplayEditModal(false);
+  const handleSaveButtonStatus = state => setEnableSaveButton(state);
 
   const modalActions = [
+    { textButton: 'Cancel', callback: handleCloseModal, modifiers: ['cancel'] },
     {
-      textButton: 'Cancel',
-      callback: handleCloseModal,
-      modifiers: ['cancel']
-    },
-    {
-      textButton: 'Save',
+      textButton: 'Apply',
       callback: () => handleFormSave(),
       modifiers: enableSaveButton ? [] : ['disabled']
     }
   ];
 
-  const handleFileChange = file => {
-    setFileData(file);
-  };
+  const handleFileChange = file => setFileData(file);
+
+  const handleStopPropagation = e => e.stopPropagation();
 
   const handleFormSave = async () => {
     try {
@@ -98,7 +101,7 @@ const CardMedia = ({
         data: { updateFile: updatedFile }
       } = await client.mutate({
         mutation: getMutation('UPDATE_FILE'),
-        variables: { input: fileData },
+        variables: { input: fileData.formData },
         update(cache, { data: { updateFile: fileUpdated } }) {
           cache.writeQuery({
             query: getQuery('GET_FILE_BY_ID'),
@@ -124,6 +127,8 @@ const CardMedia = ({
     setEnableSaveButton(false);
   };
 
+  if (schemaLoading) return null;
+
   return (
     <>
       {displayEditModal &&
@@ -135,28 +140,52 @@ const CardMedia = ({
               handleSaveButtonStatus={handleSaveButtonStatus}
               handleFormSave={handleFormSave}
               enableSaveButton={enableSaveButton}
+              schemaData={schemaData}
             />
           </Modal>,
           modalTargetRef.current
         )}
-      <div className={cardMediaClassNames} role="button" onClick={handleClick}>
-        {displayDeleteModal &&
-          createPortal(
-            <DeleteAction
-              onClose={() => setDisplayDeleteModal(false)}
-              deleteAction={() => deleteFileById()}
-              itemName={name}
-            />,
-            modalTargetRef.current
-          )}
 
+      {displayDeleteModal &&
+        createPortal(
+          <DeleteAction
+            onClose={() => setDisplayDeleteModal(false)}
+            deleteAction={() => deleteFileById()}
+            itemName={name}
+          />,
+          modalTargetRef.current
+        )}
+
+      <div
+        className={cardMediaClassNames}
+        role="option"
+        aria-selected={selected}
+        tabIndex={0}
+        onClick={handleRowClick}
+        onKeyDown={handleKeyDown}>
+        {openEditInModal && (
+          <div className="card__select">
+            <input
+              type="checkbox"
+              aria-label={`Select ${name}`}
+              checked={!!selected}
+              onChange={handleCheckboxToggle}
+              onClick={handleStopPropagation}
+            />
+          </div>
+        )}
         {type === 'image' ? (
           <div className={`card__image card__image--media-${displayLayout}`}>
-            <img src={url} alt={name} />
+            <img src={bustUrl(url, updated)} alt={name} />
           </div>
         ) : (
           <div className="card__image card__image--media-list-document">
-            <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 8 8">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="100"
+              height="100"
+              viewBox="0 0 8 8"
+              aria-hidden="true">
               <path d="M0 0v8h7v-4h-4v-4h-3zm4 0v3h3l-3-3zm-3 2h1v1h-1v-1zm0 2h1v1h-1v-1zm0 2h4v1h-4v-1z" />
             </svg>
           </div>
@@ -165,34 +194,50 @@ const CardMedia = ({
         <footer className={`card__footer card__footer--media-${displayLayout}`}>
           <div className={`card__details card__details--media-${displayLayout}`}>
             <div className={`card__title card__title--media-${displayLayout}`}>
-              <h2>{name}</h2>
+              <h2 className="card__file-name">{name}</h2>
             </div>
-            <p>
-              <span>format: {extension}</span>
+            <p className="card__meta">
+              <span>Format: {extension}</span>
             </p>
           </div>
-          <div className={`card__menu card__menu--${displayLayout}`}>
-            <div className="more-menu__wrapper more-menu__wrapper--card">
-              <More displayBg>
-                <More.Avatar isMoreMenu>
-                  <span className="material-icons">more_vert</span>
-                </More.Avatar>
-                <More.Content isMoreMenu>
-                  <Link to={`/media/edit/${id}`} className="more-menu__link">
-                    Edit
-                  </Link>
-                  <Button
-                    onClick={event => {
-                      event.preventDefault();
-                      event.stopPropagation();
-                      setDisplayDeleteModal(true);
-                    }}
-                    className="more-menu__link">
-                    Delete
-                  </Button>
-                </More.Content>
-              </More>
-            </div>
+
+          <div className={`card__menu card__menu--icons card__menu--${displayLayout}`}>
+            {openEditInModal ? (
+              <button
+                type="button"
+                className="card__icon-btn"
+                title="Edit"
+                aria-label="Edit"
+                onClick={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  setDisplayEditModal(true);
+                }}>
+                <EditIcon width="20px" height="20px" />
+              </button>
+            ) : (
+              <Link
+                to={`/media/edit/${id}`}
+                className="card__icon-btn"
+                title="Edit"
+                aria-label="Edit"
+                onClick={e => e.stopPropagation()}>
+                <EditIcon width="20px" height="20px" />
+              </Link>
+            )}
+
+            <button
+              type="button"
+              className="card__icon-btn"
+              title="Delete"
+              aria-label="Delete"
+              onClick={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDisplayDeleteModal(true);
+              }}>
+              <DeleteIcon width="18px" height="18px" />
+            </button>
           </div>
         </footer>
       </div>
@@ -207,18 +252,22 @@ CardMedia.propTypes = {
   mimetype: PropTypes.string.isRequired,
   displayLayout: PropTypes.string.isRequired,
   data: PropTypes.object,
+  updated: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onSelected: PropTypes.func,
   updateFile: PropTypes.func.isRequired,
   removeFile: PropTypes.func.isRequired,
   selected: PropTypes.bool,
   modalTargetRef: PropTypes.object.isRequired,
-  index: PropTypes.number.isRequired
+  index: PropTypes.number.isRequired,
+  openEditInModal: PropTypes.bool
 };
 
 CardMedia.defaultProps = {
   onSelected: () => {},
   selected: false,
-  data: {}
+  data: {},
+  updated: null,
+  openEditInModal: false
 };
 
 export default CardMedia;

package/src/components/EditMediaFile/EditMediaFile.js

@@ -1,15 +1,32 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { getQuery } from '@blaze-cms/admin-ui-utils';
+import { getQuery, getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 import { useQuery } from '@apollo/client';
+import { useToasts } from '@blaze-react/toaster';
 import FilePreview from '../FilePreview';
-import { STORE_KEY, NAME } from '../../constants';
+import FileUploadModal from '../FileUploadModal';
+import { FILE_DEFAULT_PROPS } from '../../constants';
 
-const EditMediaFile = ({ onChange, handleSaveButtonStatus, enableSaveButton, fileId }) => {
+const EditMediaFile = ({
+  onChange,
+  handleSaveButtonStatus,
+  fileId,
+  showChangeButton,
+  fileUpdated,
+  schemaData
+}) => {
   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 = getDynamicQuery('DATA_QUERY')(schemaData, fileId, null, FILE_DEFAULT_PROPS);
+  const {
+    loading,
+    data: { entityData: file } = {},
+    refetch: refetchFile
+  } = useQuery(fileQuery, {
+    variables: { id: fileId },
+    fetchPolicy: 'cache-and-network'
   });
 
   const fileStoresType = getQuery('GET_FILE_STORES');
@@ -18,65 +35,123 @@ 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 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 baseFile = formValues || file;
 
-    const shouldEnableSaveButton = isNewValueSet && isValid;
-    handleSaveButtonStatus(false);
+    const dataValues = valuesChecked.reduce(
+      (acc, { id, value, isDataPropery }) => {
+        if (isDataPropery) {
+          acc.data[id] = value;
+        } else {
+          acc[id] = value;
+        }
+        return acc;
+      },
+      { id: baseFile.id, data: { ...baseFile.data } }
+    );
+    delete dataValues.data.__typename; // Remove __typename if it exists in data to avoid issues with Apollo cache.
 
-    if (shouldEnableSaveButton && shouldEnableSaveButton !== enableSaveButton) {
-      handleSaveButtonStatus(shouldEnableSaveButton);
-    }
+    const shouldEnableSaveButton = isNewValueSet && isValid;
+    handleSaveButtonStatus(shouldEnableSaveButton);
 
     const updatedFile = {
-      id: file.id,
-      name: newFileName,
-      storeKey,
-      data: dataValues
+      ...baseFile,
+      ...dataValues
     };
+
     setFormValues(updatedFile);
-    onChange(updatedFile);
+    onChange({ ...updatedFile, formData: dataValues });
   };
 
-  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 +159,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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import Button from '@blaze-react/button';
-import { useApolloClient } from '@apollo/client';
+import { useApolloClient, useQuery } from '@apollo/client';
 import { getQuery, getMutation } from '@blaze-cms/admin-ui-utils';
 import { useToasts } from '@blaze-react/toaster';
 import EditMediaFile from './EditMediaFile';
@@ -13,6 +13,13 @@ const EditMediaFilePage = ({ match, history }) => {
   const client = useApolloClient();
   const { addToast } = useToasts();
 
+  const { data: { getEntitySchemas: [schemaData] = [] } = {}, loading: schemaLoading } = useQuery(
+    getQuery('GET_ENTITY_SCHEMA'),
+    {
+      variables: { identifier: 'file' }
+    }
+  );
+
   const handleFileChange = values => setFile(values);
 
   const handleSaveButtonStatus = value => {
@@ -20,19 +27,39 @@ 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 = file.formData;
+
+      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 +69,6 @@ const EditMediaFilePage = ({ match, history }) => {
         appearance: 'error',
         autoDismiss: true
       });
-      console.error(e); //eslint-disable-line
     }
     setShouldEnableSaveButton(false);
   };
@@ -51,6 +77,8 @@ const EditMediaFilePage = ({ match, history }) => {
 
   const buttonModifiers = shouldEnableSaveButton ? [] : ['disabled'];
 
+  if (schemaLoading) return null;
+
   return (
     <div className="page">
       <div className="page__content">
@@ -60,11 +88,14 @@ const EditMediaFilePage = ({ match, history }) => {
             fileId={match.params.fileId}
             handleSaveButtonStatus={handleSaveButtonStatus}
             handleFormSave={handleFormSave}
+            showChangeButton
+            fileUpdated={file}
+            schemaData={schemaData}
           />
           <div className="page__content__mediaWrapperActions">
             <Button onClick={pushBack}>Cancel</Button>
             <Button onClick={handleFormSave} modifiers={buttonModifiers}>
-              Save
+              Apply
             </Button>
           </div>
         </div>