ENH Show save record first text on unsaved owners

client/src/components/LinkField/LinkField.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import React, { useState, useEffect, createContext } from 'react';
+import React, { useState, useEffect, createContext, Component } from 'react';
 import { bindActionCreators, compose } from 'redux';
 import { connect } from 'react-redux';
 import { injectGraphql } from 'lib/Injector';
@@ -169,10 +169,12 @@ const LinkField = ({
     return links;
   };
 
-  const renderPicker = isMulti || Object.keys(data).length === 0;
-  const renderModal = Boolean(editingID);
+  const saveOwnerFirst = ownerID === 0;
+  const renderPicker = !saveOwnerFirst && (isMulti || Object.keys(data).length === 0);
+  const renderModal = !saveOwnerFirst && Boolean(editingID);
 
   return <LinkFieldContext.Provider value={{ ownerID, ownerClass, ownerRelation }}>
+    { saveOwnerFirst && <div className="link-field__save-owner-first">Save record first</div>}
     { renderPicker && <LinkPicker
         onModalSuccess={onModalSuccess}
         onModalClosed={onModalClosed}
@@ -211,6 +213,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-owner-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-owner-first div if ownerID is 0', async () => {
+  const { container } = render(<LinkField {...makeProps({
+    ownerID: 0
+  })}
+  />);
+  expect(container.querySelectorAll('.link-field__save-owner-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-owner-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";