Merge pull request #159 from creative-commoners/pulls/4/no-owner

ENH Show save record first text on unsaved owners

client/lang/en.js

@@ -13,6 +13,7 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
     "LinkField.DELETE_ERROR": "Failed to delete link",
     "LinkField.ADD_LINK": "Add Link",
     "LinkField.ARCHIVE": "Archive",
-    "LinkField.DELETE": "Delete"
+    "LinkField.DELETE": "Delete",
+    "LinkField.SAVE_RECORD_FIRST": "Cannot add links until the record has been saved"
   });
 }

client/lang/src/en.json

@@ -11,5 +11,6 @@
     "LinkField.LINK_DRAFT_LABEL": "Draft",
     "LinkField.LINK_MODIFIED_TITLE": "Link has unpublished changes",
     "LinkField.LINK_MODIFIED_LABEL": "Modified",
-    "LinkField.CANNOT_CREATE_LINK": "Cannot create link"
+    "LinkField.CANNOT_CREATE_LINK": "Cannot create link",
+    "LinkField.SAVE_RECORD_FIRST": "Cannot add links until the record has been saved"
 }

client/src/components/LinkField/LinkField.js

@@ -169,10 +169,13 @@ const LinkField = ({
     return links;
   };
 
-  const renderPicker = isMulti || Object.keys(data).length === 0;
-  const renderModal = Boolean(editingID);
+  const saveRecordFirst = ownerID === 0;
+  const renderPicker = !saveRecordFirst && (isMulti || Object.keys(data).length === 0);
+  const renderModal = !saveRecordFirst && Boolean(editingID);
+  const saveRecordFirstText = i18n._t('LinkField.SAVE_RECORD_FIRST', 'Cannot add links until the record has been saved');
 
   return <LinkFieldContext.Provider value={{ ownerID, ownerClass, ownerRelation }}>
+    { saveRecordFirst && <div className="link-field__save-record-first">{saveRecordFirstText}</div>}
     { renderPicker && <LinkPicker
         onModalSuccess={onModalSuccess}
         onModalClosed={onModalClosed}
@@ -211,6 +214,8 @@ const mapDispatchToProps = (dispatch) => ({
   },
 });
 
+export { LinkField as Component };
+
 export default compose(
   fieldHolder,
   connect(null, mapDispatchToProps)

client/src/components/LinkField/LinkField.scss

@@ -0,0 +1,3 @@
+.link-field__save-record-first {
+  padding-top: 7px;
+}

client/src/components/LinkField/tests/LinkField-test.js

@@ -0,0 +1,54 @@
+/* global jest, test */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Component as LinkField } from '../LinkField';
+
+jest.mock('lib/Backend', () => ({
+  get: () => new Promise(() => {})
+}));
+
+window.ss.config = {
+  sections: [
+    {
+      name: 'SilverStripe\\LinkField\\Controllers\\LinkFieldController',
+      form: {
+        linkForm: {
+          dataUrl: 'http://example.com/mock-endpoint'
+        }
+      }
+    }
+  ]
+};
+
+function makeProps(obj = {}) {
+  return {
+    value: 123,
+    onChange: () => {},
+    types: [],
+    actions: {},
+    isMulti: false,
+    canCreate: true,
+    ownerID: 123,
+    ownerClass: 'Page',
+    ownerRelation: 'MyRelation',
+    ...obj
+  };
+}
+
+test('LinkField will render save-record-first div if ownerID is 0', async () => {
+  const { container } = render(<LinkField {...makeProps({
+    ownerID: 0
+  })}
+  />);
+  expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(1);
+  expect(container.querySelectorAll('.link-picker')).toHaveLength(0);
+});
+
+test('LinkField will render link-picker if ownerID is not 0', async () => {
+  const { container } = render(<LinkField {...makeProps({
+    ownerID: 1
+  })}
+  />);
+  expect(container.querySelectorAll('.link-field__save-record-first')).toHaveLength(0);
+  expect(container.querySelectorAll('.link-picker')).toHaveLength(1);
+});

client/src/styles/bundle.scss

@@ -7,5 +7,5 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 
-
+@import "../components/LinkField/LinkField";
 @import "../components/LinkPicker/LinkPicker";