NEW LinkFieldController to handle FormSchema

_config.php

@@ -5,5 +5,4 @@
 
 // Avoid creating global variables
 call_user_func(function () {
-
 });

_config/config.yml

@@ -4,7 +4,7 @@ Name: linkfield
 
 SilverStripe\Admin\LeftAndMain:
   extensions:
-    - SilverStripe\LinkField\Extensions\LeftAndMain
+    - SilverStripe\LinkField\Extensions\LeftAndMainExtension
 
 SilverStripe\Admin\ModalController:
   extensions:

_graphql/models.yml

@@ -0,0 +1,23 @@
+# This was copied from Elemental models.yml so has some extra stuff commented out
+SilverStripe\LinkField\Models\Link:
+  # fields:
+  #   id: true
+  #   lastEdited: true
+  #   absoluteLink: String
+  #   title: true
+  #   showTitle: true
+  #   sort: true
+  #   blockSchema: ObjectType
+  #   obsoleteClassName: String
+  #   isPublished: Boolean
+  #   isLiveVersion: Boolean
+  #   canCreate: Boolean
+  #   canPublish: Boolean
+  #   canUnpublish: Boolean
+  #   canDelete: Boolean
+  operations:
+    # copyToStage: true
+    # readOne: true
+    delete: true
+    # publish: true
+    # unpublish: true

client/src/boot/registerQueries.js

@@ -2,9 +2,11 @@
 import Injector from 'lib/Injector';
 import readLinkTypes from 'state/linkTypes/readLinkTypes';
 import readLinkDescription from 'state/linkDescription/readLinkDescription';
+import deleteLink from 'state/linkOperations/deleteLink';
 
 const registerQueries = () => {
   Injector.query.register('readLinkTypes', readLinkTypes);
   Injector.query.register('readLinkDescription', readLinkDescription);
+  Injector.query.register('deleteLink', deleteLink);
 };
 export default registerQueries;

client/src/components/LinkField/LinkField.js

@@ -1,35 +1,50 @@
 import React, { Fragment, useState } from 'react';
-import { compose } from 'redux';
+import { bindActionCreators, compose } from 'redux';
+import { connect } from 'react-redux';
 import { inject, injectGraphql, loadComponent } from 'lib/Injector';
 import fieldHolder from 'components/FieldHolder/FieldHolder';
+import * as toastsActions from 'state/toasts/ToastsActions';
+import backend from 'lib/Backend';
+import Config from 'lib/Config';
 
-const LinkField = ({ id, loading, Loading, data, LinkPicker, onChange, types, linkDescription, ...props }) => {
+const LinkField = ({ loading, Loading, data, LinkPicker, onChange, types, linkDescription, submitForm, actions, ...props }) => {
   if (loading) {
     return <Loading />;
   }
 
   const [editing, setEditing] = useState(false);
   const [newTypeKey, setNewTypeKey] = useState('');
+  const [linkID, setLinkID] = useState(data.ID || 0);
 
   const onClear = (event) => {
+
+    // deleteUrl is set via LeftAndMainExtension.php
+    const section = Config.getSection('SilverStripe\\Admin\\LeftAndMain');
+    const endpoint = `${section.form.DynamicLink.deleteUrl}/${linkID}`;
+    backend.delete(endpoint)
+      .then(() => {
+        actions.toasts.success('Deleted link');
+      })
+      .catch(() => {
+        actions.toasts.error('Failed to delete link');
+      });
+
     if (typeof onChange !== 'function') {
       return;
     }
-
-    onChange(event, { id, value: {} });
+    onChange(event, {});
   };
 
   const { typeKey } = data;
   const type = types[typeKey];
   const modalType = newTypeKey ? types[newTypeKey] : type;
 
   let title = data ? data.Title : '';
-
   if (!title) {
     title = data ? data.TitleRelField : '';
   }
 
-  const linkProps = {
+  const pickerProps = {
     title,
     link: type ? { type, title, description: linkDescription } : undefined,
     onEdit: () => { setEditing(true); },
@@ -41,15 +56,27 @@ const LinkField = ({ id, loading, Loading, data, LinkPicker, onChange, types, li
     types: Object.values(types)
   };
 
-  const onModalSubmit = (modalData, action, submitFn) => {
-    const { SecurityID, action_insert: actionInsert, ...value } = modalData;
+  const onModalSubmit = async (modalData, action, submitFn) => {
+    const { SecurityID, action_submit: actionSubmit, ...data } = modalData;
+
+    const formSchema = await submitFn();
+
+    let id = 0;
+    const match = formSchema.id.match(/\/saveForm\/([0-9]+)$/);
+    if (match) {
+      id = parseInt(match[1]);
+    }
 
     if (typeof onChange === 'function') {
-      onChange(event, { id, value });
+      data.ID = id;
+      onChange(null, data);
     }
 
     setEditing(false);
     setNewTypeKey('');
+    setLinkID(id);
+
+    actions.toasts.success('Saved link');
 
     return Promise.resolve();
   };
@@ -68,7 +95,7 @@ const LinkField = ({ id, loading, Loading, data, LinkPicker, onChange, types, li
   const LinkModal = loadComponent(`LinkModal.${handlerName}`);
 
   return <Fragment>
-      <LinkPicker {...linkProps} />
+      <LinkPicker {...pickerProps} />
       <LinkModal {...modalProps} />
     </Fragment>;
 };
@@ -81,10 +108,19 @@ const stringifyData = (Component) => (({ data, value, ...props }) => {
   return <Component dataStr={JSON.stringify(dataValue)} {...props} data={dataValue} />;
 });
 
+const mapDispatchToProps = (dispatch) => {
+  return {
+    actions: {
+      toasts: bindActionCreators(toastsActions, dispatch),
+    },
+  };
+}
+
 export default compose(
   inject(['LinkPicker', 'Loading']),
   injectGraphql('readLinkTypes'),
   stringifyData,
   injectGraphql('readLinkDescription'),
-  fieldHolder
+  fieldHolder,
+  connect(null, mapDispatchToProps)
 )(LinkField);

client/src/components/LinkModal/LinkModal.js

@@ -17,7 +17,10 @@ const buildSchemaUrl = (key, data) => {
   const parsedQs = qs.parse(parsedURL.query);
   parsedQs.key = key;
   if (data) {
-    parsedQs.data = JSON.stringify(data);
+    for (const prop of ['href', 'path', 'pathname']) {
+      const id = typeof data.ID !== 'undefined' ? data.ID : '0';
+      parsedURL[prop] += `/${id}`;
+    }
   }
   return url.format({ ...parsedURL, search: qs.stringify(parsedQs)});
 }

client/src/entwine/JsonField.js

@@ -33,9 +33,9 @@ jQuery.entwine('ss', ($) => {
       Root.render(<ReactField {...props}  noHolder/>);
     },
 
-    handleChange(event, {id, value}) {
+    handleChange(event, data) {
       const fieldID = $(this).data('field-id');
-      $('#' + fieldID).val(JSON.stringify(value)).trigger('change');
+      $('#' + fieldID).val(JSON.stringify(data)).trigger('change');
       this.refresh();
     },
 
@@ -50,7 +50,6 @@ jQuery.entwine('ss', ($) => {
       const value = dataStr ? JSON.parse(dataStr) : undefined;
 
       return {
-        id: fieldID,
         value,
         onChange: this.handleChange.bind(this)
       };

client/src/state/linkOperations/deleteLink.js

@@ -0,0 +1,48 @@
+/* eslint-disable */
+import { graphqlTemplates } from 'lib/Injector';
+
+const apolloConfig = {
+  props(
+    props
+  ) {
+    const {
+      data: {
+        error,
+        deleteLinks,
+        loading: networkLoading,
+      },
+    } = props;
+    const errors = error && error.graphQLErrors &&
+      error.graphQLErrors.map((graphQLError) => graphQLError.message);
+
+    // const types = readLinkTypes ?
+    //   readLinkTypes.reduce((accumulator, type) => (
+    //     { ...accumulator, [type.key]: type }
+    //   ), {}) :
+    //   {};
+
+    return {
+      loading: networkLoading,
+    //   types,
+      graphQLErrors: errors,
+    };
+  },
+};
+
+const { DELETE } = graphqlTemplates;
+const query = {
+  apolloConfig,
+  templateName: DELETE,
+  pluralName: 'Links',
+  pagination: false,
+  params: {
+    ids: '[ID]'
+  },
+  args: {
+    root: {
+      ids: 'ids'
+    }
+  },
+//   fields: ['key', 'title', 'handlerName'],
+};
+export default query;