ENH Add Readonly field status

client/src/components/LinkField/LinkField.js

@@ -39,6 +39,7 @@ const LinkField = ({
   actions,
   isMulti = false,
   canCreate,
+  readonly,
   ownerID,
   ownerClass,
   ownerRelation,
@@ -168,6 +169,7 @@ const LinkField = ({
         onClick={() => { setEditingID(linkID); }}
         canDelete={data[linkID]?.canDelete ? true : false}
         canCreate={canCreate}
+        readonly={readonly}
       />);
     }
     return links;
@@ -187,6 +189,7 @@ const LinkField = ({
           onModalClosed={onModalClosed}
           types={types}
           canCreate={canCreate}
+          readonly={readonly}
         /> }
           <div> { renderLinks() } </div>
       { renderModal && <LinkModalContainer
@@ -209,6 +212,7 @@ LinkField.propTypes = {
   actions: PropTypes.object.isRequired,
   isMulti: PropTypes.bool,
   canCreate: PropTypes.bool.isRequired,
+  readonly: PropTypes.bool.isRequired,
   ownerID: PropTypes.number.isRequired,
   ownerClass: PropTypes.string.isRequired,
   ownerRelation: PropTypes.string.isRequired,

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

@@ -37,6 +37,7 @@ function makeProps(obj = {}) {
     },
     isMulti: false,
     canCreate: true,
+    readonly: false,
     ownerID: 123,
     ownerClass: 'Page',
     ownerRelation: 'MyRelation',

client/src/components/LinkPicker/LinkPicker.js

@@ -10,7 +10,7 @@ import LinkModalContainer from 'containers/LinkModalContainer';
 /**
  * Component which allows users to choose a type of link to create, and opens a modal form for it.
  */
-const LinkPicker = ({ types, onModalSuccess, onModalClosed, canCreate }) => {
+const LinkPicker = ({ types, onModalSuccess, onModalClosed, canCreate, readonly }) => {
   const [typeKey, setTypeKey] = useState('');
 
   /**
@@ -42,7 +42,7 @@ const LinkPicker = ({ types, onModalSuccess, onModalClosed, canCreate }) => {
   const className = classnames('link-picker', 'form-control');
   const typeArray = Object.values(types);
 
-  if (!canCreate) {
+  if (!canCreate || readonly) {
     return (
       <div className={className}>
         <div className="link-picker__cannot-create">
@@ -71,7 +71,8 @@ LinkPicker.propTypes = {
   types: PropTypes.object.isRequired,
   onModalSuccess: PropTypes.func.isRequired,
   onModalClosed: PropTypes.func,
-  canCreate: PropTypes.bool.isRequired
+  canCreate: PropTypes.bool.isRequired,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export {LinkPicker as Component};

client/src/components/LinkPicker/LinkPicker.scss

@@ -106,7 +106,7 @@
     display: none;
   }
 
-  &.readonly {
+  &--readonly {
     background-color: $gray-100;
   }
 }

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -41,12 +41,13 @@ const LinkPickerTitle = ({
   onClick,
   canDelete,
   canCreate,
+  readonly,
 }) => {
   const { loading } = useContext(LinkFieldContext);
   const classes = {
     'link-picker__link': true,
     'form-control': true,
-    'readonly': !canCreate,
+    'link-picker__link--readonly': readonly || !canCreate,
   };
   if (versionState) {
     classes[` link-picker__link--${versionState}`] = true;
@@ -68,7 +69,7 @@ const LinkPickerTitle = ({
         </small>
       </div>
     </Button>
-    {(canDelete && canCreate) &&
+    {(canDelete && !readonly) &&
       <Button disabled={loading} className="link-picker__delete" color="link" onClick={stopPropagation(() => onDelete(id))}>{deleteText}</Button>
     }
   </div>
@@ -85,6 +86,7 @@ LinkPickerTitle.propTypes = {
   onClick: PropTypes.func.isRequired,
   canDelete: PropTypes.bool.isRequired,
   canCreate: PropTypes.bool.isRequired,
+  readonly: PropTypes.bool.isRequired,
 };
 
 export default LinkPickerTitle;

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

@@ -8,6 +8,7 @@ function makeProps(obj = {}) {
   return {
     types: { phone: { key: 'phone', title: 'Phone', icon: 'font-icon-phone' } },
     canCreate: true,
+    readonly: false,
     onModalSuccess: () => {},
     onModalClosed: () => {},
     ...obj

client/src/components/LinkPicker/tests/LinkPickerTitle-test.js

@@ -15,6 +15,7 @@ function makeProps(obj = {}) {
     typeIcon: 'font-icon-phone',
     canDelete: true,
     canCreate: true,
+    readonly: false,
     onDelete: () => {},
     onClick: () => {},
     ...obj
@@ -86,3 +87,17 @@ test('LinkPickerTitle main button should not fire the onClick callback while loa
   fireEvent.click(container.querySelector('button.link-picker__button'));
   expect(mockOnClick).toHaveBeenCalledTimes(0);
 });
+
+test('LinkPickerTitle render() should have readonly class if cannot edit', () => {
+  const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
+    <LinkPickerTitle {...makeProps({ readonly: true })} />
+  </LinkFieldContext.Provider>);
+  expect(container.querySelectorAll('.link-picker__link--readonly')).toHaveLength(1);
+});
+
+test('LinkPickerTitle render() should not have readonly class if can edit', () => {
+  const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
+    <LinkPickerTitle {...makeProps({ readonly: false })} />
+  </LinkFieldContext.Provider>);
+  expect(container.querySelectorAll('.link-picker__link--readonly')).toHaveLength(0);
+});

client/src/entwine/LinkField.js

@@ -55,6 +55,7 @@ jQuery.entwine('ss', ($) => {
         isMulti: this.data('is-multi') ?? false,
         types: this.data('types') ?? {},
         canCreate: inputField.data('can-create') ? true : false,
+        readonly: inputField.data('readonly') ? true : false,
       };
     },
 

src/Controllers/LinkFieldController.php

@@ -310,7 +310,7 @@ private function createLinkForm(Link $link, string $operation): Form
         // Make readonly if fail can check
         if ($operation === 'create' && !$link->canCreate()
             || $operation === 'edit' && !$link->canEdit()
-            || $this->isReadOnlyField() && !$link->canEdit()
+            || $this->isReadOnlyField()
         ) {
             $form->makeReadonly();
         }
@@ -326,12 +326,10 @@ private function createLinkForm(Link $link, string $operation): Form
      */
     private function isReadOnlyField(): bool
     {
-        $request = $this->getRequest();
-        $ownerClass = $request->getVar('ownerClass') ?: $request->postVar('OwnerClass');
+        $ownerClass = $this->getOwnerClassFromRequest();
         $ownerRelation = $this->ownerRelationFromRequest();
-        $isReadOnly = Injector::inst()->get($ownerClass)->getCMSFields()->dataFieldByName($ownerRelation)?->isReadonly();
 
-        return $isReadOnly ?? false;
+        return (bool) Injector::inst()->get($ownerClass)->getCMSFields()->dataFieldByName($ownerRelation)?->isReadonly();
     }
 
     /**
@@ -416,20 +414,41 @@ private function typeKeyFromRequest(): string
     }
 
     /**
-     * Get the owner based on the query string params ownerID, ownerClass, ownerRelation
-     * OR the POST vars OwnerID, OwnerClass, OwnerRelation
+     * Get the owner class based on the query string param OwnerClass
      */
-    private function ownerFromRequest(): DataObject
+    private function getOwnerClassFromRequest(): string
     {
         $request = $this->getRequest();
-        $ownerID = (int) ($request->getVar('ownerID') ?: $request->postVar('OwnerID'));
-        if ($ownerID === 0) {
-            $this->jsonError(404, _t(__CLASS__ . '.INVALID_OWNER_ID', 'Invalid ownerID'));
-        }
         $ownerClass = $request->getVar('ownerClass') ?: $request->postVar('OwnerClass');
         if (!is_a($ownerClass, DataObject::class, true)) {
             $this->jsonError(404, _t(__CLASS__ . '.INVALID_OWNER_CLASS', 'Invalid ownerClass'));
         }
+
+        return $ownerClass;
+    }
+
+    /**
+     * Get the owner ID based on the query string param OwnerID
+     */
+    private function getOwnerIDFromRequest(): int
+    {
+        $request = $this->getRequest();
+        $ownerID = (int) ($request->getVar('ownerID') ?: $request->postVar('OwnerID'));
+        if ($ownerID === 0) {
+            $this->jsonError(404, _t(__CLASS__ . '.INVALID_OWNER_ID', 'Invalid ownerID'));
+        }
+
+        return $ownerID;
+    }
+
+    /**
+     * Get the owner based on the query string params ownerID, ownerClass, ownerRelation
+     * OR the POST vars OwnerID, OwnerClass, OwnerRelation
+     */
+    private function ownerFromRequest(): DataObject
+    {
+        $ownerID = $this->getOwnerIDFromRequest();
+        $ownerClass = $this->getOwnerClassFromRequest();
         $ownerRelation = $this->ownerRelationFromRequest();
         /** @var DataObject $obj */
         $obj = Injector::inst()->get($ownerClass);
@@ -467,6 +486,7 @@ private function ownerRelationFromRequest(): string
         if (!$ownerRelation) {
             $this->jsonError(404, _t(__CLASS__ . '.INVALID_OWNER_RELATION', 'Invalid ownerRelation'));
         }
+
         return $ownerRelation;
     }
 }

src/Form/LinkField.php

@@ -2,13 +2,10 @@
 
 namespace SilverStripe\LinkField\Form;
 
-use LogicException;
 use SilverStripe\Forms\FormField;
 use SilverStripe\LinkField\Models\Link;
 use SilverStripe\LinkField\Form\Traits\AllowedLinkClassesTrait;
 use SilverStripe\LinkField\Form\Traits\LinkFieldGetOwnerTrait;
-use SilverStripe\ORM\DataObject;
-use SilverStripe\ORM\DataObjectInterface;
 
 /**
  * Allows CMS users to edit a Link object.
@@ -36,15 +33,17 @@ public function setValue($value, $data = null)
     public function getSchemaStateDefaults()
     {
         $data = parent::getSchemaStateDefaults();
-        $data['canCreate'] = $this->getOwner()->canEdit() && !$this->isReadonly();
+        $data['canCreate'] = $this->getOwner()->canEdit();
+        $data['readonly'] = $this->isReadonly();
         return $data;
     }
 
     protected function getDefaultAttributes(): array
     {
         $attributes = parent::getDefaultAttributes();
         $attributes['data-value'] = $this->Value();
-        $attributes['data-can-create'] = $this->getOwner()->canEdit() && !$this->isReadonly();
+        $attributes['data-can-create'] = $this->getOwner()->canEdit();
+        $attributes['data-readonly'] = $this->isReadonly();
         $ownerFields = $this->getOwnerFields();
         $attributes['data-owner-id'] = $ownerFields['ID'];
         $attributes['data-owner-class'] = $ownerFields['Class'];
@@ -63,13 +62,14 @@ public function getSchemaDataDefaults()
         return $data;
     }
 
-        /**
+    /**
      * Changes this field to the readonly field.
      */
     public function performReadonlyTransformation()
     {
-        $copy = $this->castedCopy(LinkField_Readonly::class);
+        $clone = $this->castedCopy($this);
+        $clone->setReadonly(true);
 
-        return $copy;
+        return $clone;
     }
 }

src/Form/MultiLinkField.php

@@ -53,15 +53,17 @@ public function getSchemaStateDefaults()
     {
         $data = parent::getSchemaStateDefaults();
         $data['value'] = $this->getValueArray();
-        $data['canCreate'] = $this->getOwner()->canEdit() && !$this->isReadonly();
+        $data['canCreate'] = $this->getOwner()->canEdit();
+        $data['readonly'] = $this->isReadonly();
         return $data;
     }
 
     protected function getDefaultAttributes(): array
     {
         $attributes = parent::getDefaultAttributes();
         $attributes['data-value'] = $this->getValueArray();
-        $attributes['data-can-create'] = $this->getOwner()->canEdit() && !$this->isReadonly();
+        $attributes['data-can-create'] = $this->getOwner()->canEdit();
+        $attributes['data-readonly'] = $this->isReadonly();
         $ownerFields = $this->getOwnerFields();
         $attributes['data-owner-id'] = $ownerFields['ID'];
         $attributes['data-owner-class'] = $ownerFields['Class'];
@@ -72,7 +74,7 @@ protected function getDefaultAttributes(): array
     /**
      * Extracts the value of this field, normalised as a non-associative array.
      */
-    protected function getValueArray(): array
+    private function getValueArray(): array
     {
         return $this->convertValueToArray($this->Value());
     }
@@ -156,13 +158,14 @@ private function loadFrom(DataObject $record): void
         parent::setValue($value);
     }
 
-            /**
+    /**
      * Changes this field to the readonly field.
      */
     public function performReadonlyTransformation()
     {
-        $copy = $this->castedCopy(MultiLinkField_Readonly::class);
+        $clone = $this->castedCopy($this);
+        $clone->setReadonly(true);
 
-        return $copy;
+        return $clone;
     }
 }