BUG Update Editor to fetch file info directly from GraphQL so the edi…

…tor works even when viewing a file not on the current page

client/src/boot/registerQueries.js

@@ -1,7 +1,9 @@
 import Injector from 'lib/Injector';
 import { fileInterface, file } from 'lib/fileFragments';
 import readFilesQuery from 'state/files/readFilesQuery';
+import readOneFileQuery from 'state/files/readOneFileQuery';
 import readFilesQueryLegacy from 'state/files/_legacy/readFilesQuery';
+import readOneFileQueryLegacy from 'state/files/_legacy/readOneFileQuery';
 import readFileUsageQuery from 'state/files/readFileUsageQuery';
 
 // Backward compatibility hack. Remove when GraphQL 4 is in core
@@ -11,6 +13,7 @@ const registerQueries = () => {
   Injector.query.registerFragment('FileInterfaceFields', fileInterface);
   Injector.query.registerFragment('FileFields', file);
   Injector.query.register('ReadFilesQuery', isLegacy ? readFilesQueryLegacy : readFilesQuery);
+  Injector.query.register('ReadOneFileQuery', isLegacy ? readOneFileQueryLegacy : readOneFileQuery);
   Injector.query.register('readFileUsageQuery', readFileUsageQuery);
 };
 export default registerQueries;

client/src/containers/AssetAdmin/AssetAdmin.js

@@ -660,10 +660,9 @@ class AssetAdmin extends Component {
 
     const editorProps = {
       dialog,
-      targetId,
+      fileId: targetId,
       schemaUrl,
       schemaUrlQueries,
-      file: this.findFile(targetId),
       onClose: this.handleCloseFile,
       onSubmit: this.handleSubmitEditor,
       onUnpublish: this.handleUnpublish,

client/src/containers/Editor/Editor.js

@@ -9,7 +9,7 @@ import FormBuilderModal from 'components/FormBuilderModal/FormBuilderModal';
 import * as UnsavedFormsActions from 'state/unsavedForms/UnsavedFormsActions';
 import fileShape from 'lib/fileShape';
 import PropTypes from 'prop-types';
-import { inject } from 'lib/Injector';
+import { inject, injectGraphql } from 'lib/Injector';
 import * as confirmDeletionActions from 'state/confirmDeletion/ConfirmDeletionActions';
 import * as modalActions from 'state/modal/ModalActions';
 import EditorHeader, { buttonStates } from './EditorHeader';
@@ -48,7 +48,7 @@ class Editor extends Component {
    * @returns {string}
    */
   getFormSchemaUrl() {
-    const { schemaUrlQueries, schemaUrl, targetId } = this.props;
+    const { schemaUrlQueries, schemaUrl, fileId } = this.props;
 
     const parsedURL = url.parse(schemaUrl);
     const parsedQs =
@@ -59,7 +59,7 @@ class Editor extends Component {
 
     return url.format({
       ...parsedURL,
-      pathname: `${parsedURL.path}/${targetId}`,
+      pathname: `${parsedURL.path}/${fileId}`,
       search: qs.stringify(parsedQs)
     });
   }
@@ -206,6 +206,7 @@ class Editor extends Component {
     const schemaUrl = this.getFormSchemaUrl();
 
     let showButton = buttonStates.SWITCH;
+
     if (dialog && file && file.type !== 'folder') {
       // When editing the details of a file from inside the modal, we always show the back button
       // Otherwise, we only show theb ack button in mobile view to allow deselection of file
@@ -259,7 +260,7 @@ class Editor extends Component {
 
   render() {
     const formSchemaUrl = this.getFormSchemaUrl();
-    const modalSchemaUrl = `${this.props.addToCampaignSchemaUrl}/${this.props.targetId}`;
+    const modalSchemaUrl = `${this.props.addToCampaignSchemaUrl}/${this.props.fileId}`;
     const editorClasses = classnames(
       'panel', 'form--no-dividers', 'editor', {
         'editor--asset-dropzone--disable': !this.props.enableDropzone
@@ -323,12 +324,11 @@ class Editor extends Component {
 Editor.propTypes = {
   file: fileShape,
   className: PropTypes.string,
-  targetId: PropTypes.number.isRequired,
+  fileId: PropTypes.number.isRequired,
   enableDropzone: PropTypes.bool,
   dialog: PropTypes.bool,
   onClose: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
-  // onUnpublish: PropTypes.func.isRequired,
   schemaUrl: PropTypes.string.isRequired,
   schemaUrlQueries: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string,
@@ -360,6 +360,7 @@ function mapStateToProps({ assetAdmin: { gallery, modal } }) {
 
 export { Editor as Component };
 
+
 export default compose(
   inject(
     ['Loading'],
@@ -368,5 +369,6 @@ export default compose(
     }),
     () => 'AssetAdmin.Editor',
   ),
-  connect(mapStateToProps, mapDispatchToProps)
+  connect(mapStateToProps, mapDispatchToProps),
+  injectGraphql('ReadOneFileQuery')
 )(Editor);

client/src/containers/Editor/tests/Editor-test.js

@@ -12,7 +12,7 @@ const render = (props) => {
   const baseProps = {
     schemaUrlQueries: [],
     schemaUrl: 'edit/file',
-    targetId: 123,
+    fileId: 123,
     onClose: jest.fn(),
     onSubmit: jest.fn(),
     actions: {

client/src/state/files/_legacy/readOneFileQuery.js

@@ -0,0 +1,52 @@
+import { graphqlTemplates } from 'lib/Injector';
+
+const apolloConfig = {
+  options({ fileId }) {
+    return {
+      variables: {
+        rootFilter: {
+          id: fileId
+        },
+      },
+    };
+  },
+  props({ data: { error, readFiles, loading } }) {
+    const file = (readFiles && readFiles.nodes[0]) ? readFiles.nodes[0] : null;
+    const errors = error && error.graphQLErrors &&
+      error.graphQLErrors.map((graphQLError) => graphQLError.message);
+    return {
+      loading,
+      file,
+      graphQLErrors: errors
+    };
+  },
+};
+
+const { READ } = graphqlTemplates;
+const query = {
+  apolloConfig,
+  templateName: READ,
+  pluralName: 'Files',
+  pagination: false,
+  params: {
+    rootFilter: 'FileFilterInput'
+  },
+  args: {
+    root: {
+      filter: 'rootFilter'
+    }
+  },
+  fragments: [
+    'FileInterfaceFields',
+    'FileFields',
+  ],
+  fields: [
+    'nodes', [
+      '...FileInterfaceFields',
+      '...FileFields'
+    ],
+  ],
+};
+
+
+export default query;

client/src/state/files/readOneFileQuery.js

@@ -0,0 +1,54 @@
+import { graphqlTemplates } from 'lib/Injector';
+
+/**
+ * Query to fetch a single file by its ID. The resulting file will be pass to your component
+ * under a `file` prop. `null` will be pass if the specified ID does not exist.
+ */
+const apolloConfig = {
+  options({ fileId }) {
+    return {
+      variables: {
+        rootFilter: {
+          id: fileId
+        },
+      },
+    };
+  },
+  props({ data: { error, readFiles, loading: networkLoading } }) {
+    const file = readFiles ? readFiles[0] : null;
+    const errors = error && error.graphQLErrors &&
+      error.graphQLErrors.map((graphQLError) => graphQLError.message);
+    return {
+      loading: networkLoading,
+      file,
+      graphQLErrors: errors,
+    };
+  },
+};
+
+const { READ } = graphqlTemplates;
+const query = {
+  apolloConfig,
+  templateName: READ,
+  pluralName: 'Files',
+  pagination: false,
+  params: {
+    rootFilter: 'FileFilterInput',
+  },
+  args: {
+    root: {
+      filter: 'rootFilter'
+    }
+  },
+  fragments: [
+    'FileInterfaceFields',
+    'FileFields',
+  ],
+  fields: [
+    '...FileInterfaceFields',
+    '...FileFields',
+  ],
+};
+
+
+export default query;