NEW LinkFieldController to handle FormSchema

_config.php

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

_config/config.yml

@@ -4,20 +4,12 @@ Name: linkfield
 
 SilverStripe\Admin\LeftAndMain:
   extensions:
-    - SilverStripe\LinkField\Extensions\LeftAndMain
+    - SilverStripe\LinkField\Extensions\LeftAndMainExtension
 
 SilverStripe\Admin\ModalController:
   extensions:
     - SilverStripe\LinkField\Extensions\ModalController
 
-SilverStripe\Forms\TreeDropdownField:
-  extensions:
-    - SilverStripe\LinkField\Extensions\AjaxField
-
-SilverStripe\CMS\Forms\AnchorSelectorField:
-  extensions:
-    - SilverStripe\LinkField\Extensions\AjaxField
-
 SilverStripe\LinkField\Form\FormFactory:
   extensions:
     - SilverStripe\LinkField\Extensions\FormFactoryExtension

client/src/components/LinkField/LinkField.js

@@ -1,35 +1,49 @@
 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) => {
-    if (typeof onChange !== 'function') {
-      return;
-    }
 
-    onChange(event, { id, value: {} });
+    // 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') {
+      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 +55,32 @@ 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();
+    console.log('formSchema', formSchema);
+
+    let id = 0;
+
+    // formSchema will be undefined for FileLink which uses asset-admin graphql when using InsertMediaModal rather than FormBuilderModal
+    if (typeof formSchema !== 'undefined') {
+      const match = formSchema.id.match(/\/linkForm\/([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 +99,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 +112,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,7 +33,7 @@ jQuery.entwine('ss', ($) => {
       Root.render(<ReactField {...props}  noHolder/>);
     },
 
-    handleChange(event, {id, value}) {
+    handleChange(event, value) {
       const fieldID = $(this).data('field-id');
       $('#' + fieldID).val(JSON.stringify(value)).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)
       };