@blaze-cms/plugin-media-ui 0.146.0-node18-core-styles-tooltips.58 → 0.146.0-node18-tooltips.45

package/src/components/CardMedia/CardMedia.js

@@ -1,15 +1,14 @@
-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';
 
@@ -38,52 +37,53 @@ 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: 'Apply',
       callback: () => handleFormSave(),
@@ -91,9 +91,9 @@ const CardMedia = ({
     }
   ];
 
-  const handleFileChange = file => {
-    setFileData(file);
-  };
+  const handleFileChange = file => setFileData(file);
+
+  const handleStopPropagation = e => e.stopPropagation();
 
   const handleFormSave = async () => {
     try {
@@ -101,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'),
@@ -127,6 +127,8 @@ const CardMedia = ({
     setEnableSaveButton(false);
   };
 
+  if (schemaLoading) return null;
+
   return (
     <>
       {displayEditModal &&
@@ -138,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={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>
@@ -168,46 +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>
-                  {openEditInModal ? (
-                    <Button
-                      onClick={event => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDisplayEditModal(true);
-                      }}
-                      className="more-menu__link">
-                      Edit
-                    </Button>
-                  ) : (
-                    <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>
@@ -233,7 +263,7 @@ CardMedia.propTypes = {
 };
 
 CardMedia.defaultProps = {
-  onSelected: () => {},
+  onSelected: () => { },
   selected: false,
   data: {},
   updated: null,

package/src/components/EditMediaFile/EditMediaFile.js

@@ -1,27 +1,28 @@
 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 FileUploadModal from '../FileUploadModal';
-import { STORE_KEY, NAME } from '../../constants';
+import { FILE_DEFAULT_PROPS } from '../../constants';
 
 const EditMediaFile = ({
   onChange,
   handleSaveButtonStatus,
   fileId,
   showChangeButton,
-  fileUpdated
+  fileUpdated,
+  schemaData
 }) => {
   const [formValues, setFormValues] = useState(null);
   const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
   const { addToast } = useToasts();
 
-  const fileQuery = getQuery('GET_FILE_BY_ID');
+  const fileQuery = getDynamicQuery('DATA_QUERY')(schemaData, fileId, null, FILE_DEFAULT_PROPS);
   const {
     loading,
-    data: { file } = {},
+    data: { entityData: file } = {},
     refetch: refetchFile
   } = useQuery(fileQuery, {
     variables: { id: fileId },
@@ -52,32 +53,30 @@ const EditMediaFile = ({
 
   const handleFormChange = ({ isValid, isNewValueSet, valuesChecked }) => {
     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 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.
 
     const shouldEnableSaveButton = isNewValueSet && isValid;
     handleSaveButtonStatus(shouldEnableSaveButton);
 
     const updatedFile = {
       ...baseFile,
-      name: newFileName || baseFile.name,
-      storeKey: storeKey || baseFile.storeKey,
-      data: { ...(baseFile.data || {}), ...dataValues }
+      ...dataValues
     };
 
     setFormValues(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 });
+    onChange({ ...updatedFile, formData: dataValues });
   };
 
   const getFileWithStoreType = sourceFile => {
@@ -100,10 +99,10 @@ const EditMediaFile = ({
         values.id === fileId
           ? values
           : {
-              ...(formValues || file),
-              ...values,
-              url: values.url || (formValues || file).url
-            };
+            ...(formValues || file),
+            ...values,
+            url: values.url || (formValues || file).url
+          };
       setFormValues(updated);
       onChange(updated);
       handleSaveButtonStatus(true);
@@ -127,7 +126,7 @@ const EditMediaFile = ({
   const fileToRender = formValues || file;
   const fileWithStoreType = getFileWithStoreType(fileToRender);
 
-  return (
+  return !loading ? (
     <>
       {!!file && (
         <FilePreview
@@ -146,11 +145,13 @@ const EditMediaFile = ({
             simpleLayout
             fileId={fileId}
             storeKey={file && file.storeKey}
-            getSelectedFiles={() => {}}
+            getSelectedFiles={() => { }}
           />
         </div>
       )}
     </>
+  ) : (
+    <div>loading...</div>
   );
 };
 

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 => {
@@ -29,12 +36,7 @@ const EditMediaFilePage = ({ match, history }) => {
     }
 
     try {
-      const inputData = {
-        id: file.id,
-        name: file.name,
-        data: file.data,
-        storeKey: file.storeKey
-      };
+      const inputData = file.formData;
 
       const {
         data: { updateFile: updatedFile }
@@ -75,6 +77,8 @@ const EditMediaFilePage = ({ match, history }) => {
 
   const buttonModifiers = shouldEnableSaveButton ? [] : ['disabled'];
 
+  if (schemaLoading) return null;
+
   return (
     <div className="page">
       <div className="page__content">
@@ -86,6 +90,7 @@ const EditMediaFilePage = ({ match, history }) => {
             handleFormSave={handleFormSave}
             showChangeButton
             fileUpdated={file}
+            schemaData={schemaData}
           />
           <div className="page__content__mediaWrapperActions">
             <Button onClick={pushBack}>Cancel</Button>

package/src/components/FileList/useGetFiles/getFiles.js

@@ -1,7 +1,15 @@
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { ALL, INVALID_STORE_KEY_VALUES } from '../../../constants';
 
-const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileStores = [] }) => {
+const getFromSearch = async ({
+  searchTerm,
+  offset,
+  limit,
+  where,
+  client,
+  fileStores = [],
+  esFilters = []
+}) => {
   const allTypesMatches = [
     {
       match: { type: 'image' }
@@ -19,7 +27,7 @@ const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileSto
     }
   ];
   const match = !where.type || where.type === ALL ? allTypesMatches : matchSpecificType;
-  const mustMatch = [];
+  const mustMatch = [...esFilters];
 
   if (searchTerm) {
     mustMatch.push({
@@ -160,7 +168,7 @@ const getFromSearch = async ({ searchTerm, offset, limit, where, client, fileSto
   return { files, all, image, video, text };
 };
 
-const getFiles = ({ offset, limit, where, searchTerm, fileStores }, client) =>
-  getFromSearch({ searchTerm, offset, limit, where, client, fileStores });
+const getFiles = ({ searchTerm, offset, limit, where, esFilters, fileStores }, client) =>
+  getFromSearch({ searchTerm, offset, limit, where, esFilters, client, fileStores });
 
 export default getFiles;

package/src/components/FileList/useGetFiles/useGetFiles.js

@@ -29,8 +29,8 @@ function useGetFiles() {
 
   useEffect(
     () => {
-      const { offset, limit, where, sort, searchTerm, isSearch } = queryParams;
-      const newFilter = JSON.stringify(where);
+      const { offset, limit, where, sort, searchTerm, isSearch, esFilters } = queryParams;
+      const newFilter = JSON.stringify({ where, esFilters });
       const isNewFilterSet = newFilter !== previousFilter;
       const isNewOffsetSet = previousOffset !== null && offset !== previousOffset;
       const isNewSearchTermSet = searchTerm && previousSearchTerm !== searchTerm;
@@ -41,9 +41,8 @@ function useGetFiles() {
         if (data.files.length) {
           setData({ files: [] });
         }
-
         const { files, total, all, image, video, text } = await getFiles(
-          { offset, limit, where, sort, searchTerm, isSearch, fileStores },
+          { offset, limit, where, sort, searchTerm, isSearch, esFilters, fileStores },
           client
         );
         setData({ files, total, all, image, video, text });

package/src/components/FileList/useGetFilesList/useGetFilesList.js

@@ -137,8 +137,9 @@ function useGetFilesList() {
   const setQueryParams = params => {
     const isNewSearchTerm = params.isSearch && previousSearchTerm !== params.searchTerm;
     const hasDeletedSearchTerm = previousSearchTerm && params.searchTerm === null;
-    const newFilter = JSON.stringify(params.where);
+    const newFilter = JSON.stringify({ where: params.where, esFilters: params.esFilters });
     const isNewFilter = newFilter !== previousFilter;
+
     const shouldClearList = hasDeletedSearchTerm || isNewFilter || isNewSearchTerm;
     shouldClearList ? clearList(params) : setParams(params);
     setCurrentFilter(newFilter);

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

@@ -23,19 +23,22 @@ const imageSchema = {
         showInForm: true,
         label: 'Alt text',
         formFieldType: 'text',
-        formPriority: 3.0
+        formPriority: 3.0,
+        isDataPropery: true
       },
       caption: {
         type: 'string',
         showInForm: true,
         formFieldType: 'text',
-        formPriority: 4.0
+        formPriority: 4.0,
+        isDataPropery: true
       },
       credits: {
         type: 'string',
         showInForm: true,
         formFieldType: 'text',
-        formPriority: 5.0
+        formPriority: 5.0,
+        isDataPropery: true
       },
       hrefUrl: {
         type: 'string',
@@ -43,7 +46,8 @@ const imageSchema = {
         label: 'Image hyperlink',
         showInForm: true,
         formFieldType: 'text',
-        description: 'Url format is not valid'
+        description: 'Url format is not valid',
+        isDataPropery: true
       }
     },
     required: ['name']

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

@@ -11,7 +11,8 @@ const PDFSchema = {
       caption: {
         type: 'string',
         showInForm: true,
-        formFieldType: 'text'
+        formFieldType: 'text',
+        isDataPropery: true
       }
     },
     required: ['name']

package/src/components/FilePreview/index.js

@@ -1,7 +1,10 @@
 import React from 'react';
 import { FormBuilder } from '@blaze-cms/react-form-builder';
 import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import { getQuery, getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 import { getPreview } from './get-preview';
+import { FILE_DEFAULT_PROPS } from '../../constants';
 
 const FilePreview = ({
   file,
@@ -13,7 +16,34 @@ const FilePreview = ({
   showChangeButton,
   disableFilePreview
 }) => {
-  const { name, url, mimetype, data, store, updated } = file;
+  const {
+    data: schemaData = {
+      getEntitySchemas: [
+        {
+          properties: {},
+          actions: {
+            get: 'getFile'
+          }
+        }
+      ]
+    },
+    loading: schemaLoading
+  } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
+    variables: { identifier: 'file' }
+  });
+
+  const [fileSchema] = schemaData && schemaData.getEntitySchemas ? schemaData.getEntitySchemas : [];
+
+  const fileQuery = getDynamicQuery('DATA_QUERY')(fileSchema, file.id, null, FILE_DEFAULT_PROPS);
+  const { loading, data: { entityData: fileData } = {} } = useQuery(fileQuery, {
+    variables: { id: file.id },
+    fetchPolicy: 'cache-and-network',
+    skip: !fileSchema || !fileSchema.id
+  });
+
+  if (!fileSchema || schemaLoading || loading) return null;
+
+  const { name, url, mimetype, data, store, updated } = fileData;
   const bustUrl = (srcUrl, version) => {
     if (!srcUrl) return srcUrl;
     const sep = srcUrl.includes('?') ? '&' : '?';
@@ -23,6 +53,10 @@ const FilePreview = ({
   const [Preview, schema] = getPreview({ mimetype, previewType });
   const shouldRenderForm = schema && displayForm;
 
+  const { properties } = fileSchema;
+  const { name: nameProp, storeKey: storeKeyProp, ...restProperties } = properties;
+  Object.assign(schema.formSchema.properties, restProperties);
+
   if (shouldRenderForm && store) {
     const { defaultStore = {}, storeOptions = [] } = store;
     if (schema.formSchema.properties.storeKey) {
@@ -34,7 +68,7 @@ const FilePreview = ({
     }
   }
 
-  const formBuilderData = { values: { ...data, ...file } };
+  const formBuilderData = { values: { ...data, ...fileData } };
 
   return (
     <>

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

@@ -15,7 +15,8 @@ const previewDefaultSchema = {
         label: 'url',
         showInForm: true,
         formFieldType: 'text',
-        description: 'Url format is not valid'
+        description: 'Url format is not valid',
+        isDataPropery: true
       }
     },
     required: ['name']