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";