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

package/lib-es/index.js

@@ -0,0 +1,77 @@
+import FileUploadAdapter from './components/FileUploadAdapter';
+import EditorAdapter from './components/EditorAdapter';
+import { MediaLibraryIcon } from './icons';
+import pkg from '../package.json';
+import { PLUGIN_NAME } from './constants';
+import FilePreviewReadOnly from './components/FilePreviewReadOnly';
+import MediaListing from './components/MediaListing';
+import EditMediaFilePage from './components/EditMediaFile/EditMediaFilePage';
+
+// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode
+// export const FilePreviewReadOnly = React.lazy(
+//   () =>
+//     import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')
+// );
+
+// const MediaListing = React.lazy(
+//   () => import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')
+// );
+
+// const EditMediaFilePage = React.lazy(
+//   () =>
+//     import(
+//       /* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage'
+//     )
+// );
+export default async function load(app) {
+  app.events.once('admin:menu:config:load', ({
+    addConfig
+  }) => {
+    addConfig({
+      main: {
+        items: {
+          media: {
+            label: 'Media',
+            uri: '/media',
+            icon: MediaLibraryIcon,
+            order: 30
+          }
+        }
+      }
+    });
+  });
+  app.events.once('load:custom:field:type', addFieldType => {
+    addFieldType({
+      type: 'fileUpload',
+      component: FileUploadAdapter
+    });
+    addFieldType({
+      type: 'filePreview',
+      component: FilePreviewReadOnly
+    });
+    addFieldType({
+      type: 'editor',
+      component: EditorAdapter
+    });
+  });
+  const mediaRoute = {
+    path: '/media',
+    key: 'media',
+    component: MediaListing,
+    exact: true
+  };
+  const editMediaFileRoute = {
+    path: '/media/edit/:fileId',
+    key: 'editMedia',
+    component: EditMediaFilePage,
+    exact: true
+  };
+  app.addRoute(mediaRoute);
+  app.addRoute(editMediaFileRoute);
+  return {
+    name: PLUGIN_NAME,
+    version: pkg.version
+  };
+}
+load.pluginName = PLUGIN_NAME;
+//# sourceMappingURL=index.js.map

package/lib-es/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["FileUploadAdapter","EditorAdapter","MediaLibraryIcon","pkg","PLUGIN_NAME","FilePreviewReadOnly","MediaListing","EditMediaFilePage","load","app","events","once","addConfig","main","items","media","label","uri","icon","order","addFieldType","type","component","mediaRoute","path","key","exact","editMediaFileRoute","addRoute","name","version","pluginName"],"sources":["../src/index.js"],"sourcesContent":["import FileUploadAdapter from './components/FileUploadAdapter';\nimport EditorAdapter from './components/EditorAdapter';\nimport { MediaLibraryIcon } from './icons';\nimport pkg from '../package.json';\nimport { PLUGIN_NAME } from './constants';\nimport FilePreviewReadOnly from './components/FilePreviewReadOnly';\nimport MediaListing from './components/MediaListing';\nimport EditMediaFilePage from './components/EditMediaFile/EditMediaFilePage';\n\n// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode\n// export const FilePreviewReadOnly = React.lazy(\n//   () =>\n//     import(/* webpackChunkName: 'MediaFilePreviewReadOnly' */ './components/FilePreviewReadOnly')\n// );\n\n// const MediaListing = React.lazy(\n//   () => import(/* webpackChunkName: 'MediaListingContainer' */ './components/MediaListing')\n// );\n\n// const EditMediaFilePage = React.lazy(\n//   () =>\n//     import(\n//       /* webpackChunkName: 'EditMediaFilePage' */ './components/EditMediaFile/EditMediaFilePage'\n//     )\n// );\nexport default async function load(app) {\n  app.events.once('admin:menu:config:load', ({ addConfig }) => {\n    addConfig({\n      main: {\n        items: {\n          media: {\n            label: 'Media',\n            uri: '/media',\n            icon: MediaLibraryIcon,\n            order: 30\n          }\n        }\n      }\n    });\n  });\n\n  app.events.once('load:custom:field:type', addFieldType => {\n    addFieldType({ type: 'fileUpload', component: FileUploadAdapter });\n    addFieldType({ type: 'filePreview', component: FilePreviewReadOnly });\n    addFieldType({ type: 'editor', component: EditorAdapter });\n  });\n\n  const mediaRoute = {\n    path: '/media',\n    key: 'media',\n    component: MediaListing,\n    exact: true\n  };\n\n  const editMediaFileRoute = {\n    path: '/media/edit/:fileId',\n    key: 'editMedia',\n    component: EditMediaFilePage,\n    exact: true\n  };\n\n  app.addRoute(mediaRoute);\n  app.addRoute(editMediaFileRoute);\n\n  return {\n    name: PLUGIN_NAME,\n    version: pkg.version\n  };\n}\n\nload.pluginName = PLUGIN_NAME;\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,gCAAgC;AAC9D,OAAOC,aAAa,MAAM,4BAA4B;AACtD,SAASC,gBAAgB,QAAQ,SAAS;AAC1C,OAAOC,GAAG,MAAM,iBAAiB;AACjC,SAASC,WAAW,QAAQ,aAAa;AACzC,OAAOC,mBAAmB,MAAM,kCAAkC;AAClE,OAAOC,YAAY,MAAM,2BAA2B;AACpD,OAAOC,iBAAiB,MAAM,8CAA8C;;AAE5E;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,eAAeC,IAAIA,CAACC,GAAG,EAAE;EACtCA,GAAG,CAACC,MAAM,CAACC,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAAEC;EAAU,CAAC,KAAK;IAC3DA,SAAS,CAAC;MACRC,IAAI,EAAE;QACJC,KAAK,EAAE;UACLC,KAAK,EAAE;YACLC,KAAK,EAAE,OAAO;YACdC,GAAG,EAAE,QAAQ;YACbC,IAAI,EAAEhB,gBAAgB;YACtBiB,KAAK,EAAE;UACT;QACF;MACF;IACF,CAAC,CAAC;EACJ,CAAC,CAAC;EAEFV,GAAG,CAACC,MAAM,CAACC,IAAI,CAAC,wBAAwB,EAAES,YAAY,IAAI;IACxDA,YAAY,CAAC;MAAEC,IAAI,EAAE,YAAY;MAAEC,SAAS,EAAEtB;IAAkB,CAAC,CAAC;IAClEoB,YAAY,CAAC;MAAEC,IAAI,EAAE,aAAa;MAAEC,SAAS,EAAEjB;IAAoB,CAAC,CAAC;IACrEe,YAAY,CAAC;MAAEC,IAAI,EAAE,QAAQ;MAAEC,SAAS,EAAErB;IAAc,CAAC,CAAC;EAC5D,CAAC,CAAC;EAEF,MAAMsB,UAAU,GAAG;IACjBC,IAAI,EAAE,QAAQ;IACdC,GAAG,EAAE,OAAO;IACZH,SAAS,EAAEhB,YAAY;IACvBoB,KAAK,EAAE;EACT,CAAC;EAED,MAAMC,kBAAkB,GAAG;IACzBH,IAAI,EAAE,qBAAqB;IAC3BC,GAAG,EAAE,WAAW;IAChBH,SAAS,EAAEf,iBAAiB;IAC5BmB,KAAK,EAAE;EACT,CAAC;EAEDjB,GAAG,CAACmB,QAAQ,CAACL,UAAU,CAAC;EACxBd,GAAG,CAACmB,QAAQ,CAACD,kBAAkB,CAAC;EAEhC,OAAO;IACLE,IAAI,EAAEzB,WAAW;IACjB0B,OAAO,EAAE3B,GAAG,CAAC2B;EACf,CAAC;AACH;AAEAtB,IAAI,CAACuB,UAAU,GAAG3B,WAAW","ignoreList":[]}

package/lib-es/utils/available-filters/available-filters.js

@@ -0,0 +1,26 @@
+const availableFilters = [{
+  label: 'All',
+  searchTerm: 'all',
+  id: 'all',
+  type: 'all',
+  formats: ['text/csv', 'text/plain', 'text/rtf', 'image/gif', 'image/jpeg', 'image/png', 'image/bmp', 'image/svg+xml', 'image/tiff', 'image/webp', 'application/pdf']
+}, {
+  label: 'Images',
+  searchTerm: 'images',
+  id: 'images',
+  type: 'image',
+  formats: ['image/gif', 'image/jpeg', 'image/png', 'image/bmp', 'image/svg+xml', 'image/tiff', 'image/webp']
+}, {
+  label: 'Videos',
+  searchTerm: 'videos',
+  type: 'video',
+  id: 'videos'
+}, {
+  label: 'Docs',
+  searchTerm: 'documents',
+  id: 'documents',
+  type: 'text',
+  formats: ['text/csv', 'text/plain', 'text/rtf', 'application/pdf']
+}];
+export { availableFilters };
+//# sourceMappingURL=available-filters.js.map

package/lib-es/utils/available-filters/available-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"available-filters.js","names":["availableFilters","label","searchTerm","id","type","formats"],"sources":["../../../src/utils/available-filters/available-filters.js"],"sourcesContent":["const availableFilters = [\n  {\n    label: 'All',\n    searchTerm: 'all',\n    id: 'all',\n    type: 'all',\n    formats: [\n      'text/csv',\n      'text/plain',\n      'text/rtf',\n      'image/gif',\n      'image/jpeg',\n      'image/png',\n      'image/bmp',\n      'image/svg+xml',\n      'image/tiff',\n      'image/webp',\n      'application/pdf'\n    ]\n  },\n  {\n    label: 'Images',\n    searchTerm: 'images',\n    id: 'images',\n    type: 'image',\n    formats: [\n      'image/gif',\n      'image/jpeg',\n      'image/png',\n      'image/bmp',\n      'image/svg+xml',\n      'image/tiff',\n      'image/webp'\n    ]\n  },\n  {\n    label: 'Videos',\n    searchTerm: 'videos',\n    type: 'video',\n    id: 'videos'\n  },\n  {\n    label: 'Docs',\n    searchTerm: 'documents',\n    id: 'documents',\n    type: 'text',\n    formats: ['text/csv', 'text/plain', 'text/rtf', 'application/pdf']\n  }\n];\n\nexport { availableFilters };\n"],"mappings":"AAAA,MAAMA,gBAAgB,GAAG,CACvB;EACEC,KAAK,EAAE,KAAK;EACZC,UAAU,EAAE,KAAK;EACjBC,EAAE,EAAE,KAAK;EACTC,IAAI,EAAE,KAAK;EACXC,OAAO,EAAE,CACP,UAAU,EACV,YAAY,EACZ,UAAU,EACV,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,iBAAiB;AAErB,CAAC,EACD;EACEJ,KAAK,EAAE,QAAQ;EACfC,UAAU,EAAE,QAAQ;EACpBC,EAAE,EAAE,QAAQ;EACZC,IAAI,EAAE,OAAO;EACbC,OAAO,EAAE,CACP,WAAW,EACX,YAAY,EACZ,WAAW,EACX,WAAW,EACX,eAAe,EACf,YAAY,EACZ,YAAY;AAEhB,CAAC,EACD;EACEJ,KAAK,EAAE,QAAQ;EACfC,UAAU,EAAE,QAAQ;EACpBE,IAAI,EAAE,OAAO;EACbD,EAAE,EAAE;AACN,CAAC,EACD;EACEF,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE,WAAW;EACvBC,EAAE,EAAE,WAAW;EACfC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,iBAAiB;AACnE,CAAC,CACF;AAED,SAASL,gBAAgB","ignoreList":[]}

package/lib-es/utils/bustUrl.js

@@ -0,0 +1,7 @@
+export default function bustUrl(url, updated) {
+  if (!url) return url;
+  const separator = url.includes('?') ? '&' : '?';
+  const version = updated || Date.now();
+  return `${url}${separator}v=${version}`;
+}
+//# sourceMappingURL=bustUrl.js.map

package/lib-es/utils/bustUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bustUrl.js","names":["bustUrl","url","updated","separator","includes","version","Date","now"],"sources":["../../src/utils/bustUrl.js"],"sourcesContent":["export default function bustUrl(url, updated) {\n  if (!url) return url;\n  const separator = url.includes('?') ? '&' : '?';\n  const version = updated || Date.now();\n  return `${url}${separator}v=${version}`;\n}\n"],"mappings":"AAAA,eAAe,SAASA,OAAOA,CAACC,GAAG,EAAEC,OAAO,EAAE;EAC5C,IAAI,CAACD,GAAG,EAAE,OAAOA,GAAG;EACpB,MAAME,SAAS,GAAGF,GAAG,CAACG,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG;EAC/C,MAAMC,OAAO,GAAGH,OAAO,IAAII,IAAI,CAACC,GAAG,CAAC,CAAC;EACrC,OAAO,GAAGN,GAAG,GAAGE,SAAS,KAAKE,OAAO,EAAE;AACzC","ignoreList":[]}

package/lib-es/utils/media-context/index.js

@@ -0,0 +1,4 @@
+import { MediaContext, MediaContextProvider, MediaContextConsumer } from './media-context';
+import { useMediaContext } from './useMediaContext';
+export { MediaContext, MediaContextProvider, MediaContextConsumer, useMediaContext };
+//# sourceMappingURL=index.js.map

package/lib-es/utils/media-context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["MediaContext","MediaContextProvider","MediaContextConsumer","useMediaContext"],"sources":["../../../src/utils/media-context/index.js"],"sourcesContent":["import { MediaContext, MediaContextProvider, MediaContextConsumer } from './media-context';\nimport { useMediaContext } from './useMediaContext';\n\nexport { MediaContext, MediaContextProvider, MediaContextConsumer, useMediaContext };\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,oBAAoB,EAAEC,oBAAoB,QAAQ,iBAAiB;AAC1F,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASH,YAAY,EAAEC,oBAAoB,EAAEC,oBAAoB,EAAEC,eAAe","ignoreList":[]}

package/lib-es/utils/media-context/media-context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const MediaContext = React.createContext({});
+const MediaContextProvider = MediaContext.Provider;
+const MediaContextConsumer = MediaContext.Consumer;
+export { MediaContext, MediaContextProvider, MediaContextConsumer };
+//# sourceMappingURL=media-context.js.map

package/lib-es/utils/media-context/media-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-context.js","names":["React","MediaContext","createContext","MediaContextProvider","Provider","MediaContextConsumer","Consumer"],"sources":["../../../src/utils/media-context/media-context.js"],"sourcesContent":["import React from 'react';\n\nconst MediaContext = React.createContext({});\nconst MediaContextProvider = MediaContext.Provider;\nconst MediaContextConsumer = MediaContext.Consumer;\n\nexport { MediaContext, MediaContextProvider, MediaContextConsumer };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,YAAY,GAAGD,KAAK,CAACE,aAAa,CAAC,CAAC,CAAC,CAAC;AAC5C,MAAMC,oBAAoB,GAAGF,YAAY,CAACG,QAAQ;AAClD,MAAMC,oBAAoB,GAAGJ,YAAY,CAACK,QAAQ;AAElD,SAASL,YAAY,EAAEE,oBAAoB,EAAEE,oBAAoB","ignoreList":[]}

package/lib-es/utils/media-context/useMediaContext.js

@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+const useMediaContext = ctx => useContext(ctx);
+export { useMediaContext };
+//# sourceMappingURL=useMediaContext.js.map

package/lib-es/utils/media-context/useMediaContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaContext.js","names":["useContext","useMediaContext","ctx"],"sources":["../../../src/utils/media-context/useMediaContext.js"],"sourcesContent":["import { useContext } from 'react';\n\nconst useMediaContext = ctx => useContext(ctx);\n\nexport { useMediaContext };\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,MAAMC,eAAe,GAAGC,GAAG,IAAIF,UAAU,CAACE,GAAG,CAAC;AAE9C,SAASD,eAAe","ignoreList":[]}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@blaze-cms/plugin-media-ui",
-  "version": "0.146.0-rc-eagle.0",
+  "version": "0.146.0-rc-eagle-3.0",
   "description": "Blaze plugin media ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
+  "files": [
+    "lib",
+    "lib-es",
+    "src"
+  ],
   "source": "src/index.js",
   "directories": {
     "src": "src/"
@@ -27,15 +32,16 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "0.146.0-rc-eagle.0",
-    "@blaze-cms/core-errors": "0.146.0-rc-eagle.0",
-    "@blaze-cms/plugin-search-ui": "0.146.0-rc-eagle.0",
-    "@blaze-cms/react-form-builder": "0.146.0-rc-eagle.0",
-    "@blaze-cms/setup-ui": "0.146.0-rc-eagle.0",
+    "@blaze-cms/admin-ui-utils": "0.146.0-rc-eagle-3.0",
+    "@blaze-cms/core-errors": "0.146.0-rc-eagle-3.0",
+    "@blaze-cms/plugin-search-ui": "0.146.0-rc-eagle-3.0",
+    "@blaze-cms/react-form-builder": "0.146.0-rc-eagle-3.0",
+    "@blaze-cms/setup-ui": "0.146.0-rc-eagle-3.0",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/dnd": "^0.7.0",
     "@blaze-react/drafteditor": "0.7.0",
-    "@blaze-react/file-upload": "0.8.0-alpha.109",
+    "@blaze-react/file-upload": "0.8.0-alpha.118",
+    "@blaze-react/input": "0.8.0-alpha.112",
     "@blaze-react/modal": "0.5.19",
     "@blaze-react/more": "0.5.19",
     "@blaze-react/select": "0.8.0-alpha.100",
@@ -47,7 +53,7 @@
     "react-tiny-virtual-list": "2.2.0"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "0.146.0-rc-eagle.0"
+    "@blaze-cms/core-ui": "0.146.0-rc-eagle-3.0"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
@@ -59,5 +65,6 @@
   "eslintIgnore": [
     "lib/*",
     "lib-es/*"
-  ]
+  ],
+  "gitHead": "eeb5c91d33bae79f7605ffa99d8cbf430840e27a"
 }

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>

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

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>