ENH Add info message for readonly fields

silverstripe · Jan 22, 2024 · 1994149 · 1994149
1 parent 19bd4a4
commit 1994149
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 33 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/src/components/LinkField/LinkField.js b/client/src/components/LinkField/LinkField.js
@@ -33,6 +33,7 @@ const section = 'SilverStripe\\LinkField\\Controllers\\LinkFieldController';
  * actions - object of redux actions
  * isMulti - whether this field handles multiple links or not
  * canCreate - whether this field can create new links or not
+ * readonly - whether this field is readonly or not
  * ownerID - ID of the owner DataObject
  * ownerClass - class name of the owner DataObject
  * ownerRelation - name of the relation on the owner DataObject
@@ -199,6 +200,27 @@ const LinkField = ({
     return links;
   };
 
+  const sortableLinks = () => {
+    if (isMulti && !readonly) {
+      return <div className={linksClassName}>
+        <DndContext modifiers={[restrictToVerticalAxis, restrictToParentElement]}
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext 
+            items={linkIDs}
+            strategy={verticalListSortingStrategy}
+          >
+            {links}
+          </SortableContext>
+        </DndContext>
+      </div> 
+    }
+    return <div>{links}</div>
+  };
+
   const handleDragStart = (event) => {
     setLinksClassName(classnames({
       'link-picker__links': true,
@@ -259,22 +281,7 @@ const LinkField = ({
           canCreate={canCreate}
           readonly={readonly}
         /> }
-      { isMulti && <div className={linksClassName}>
-        <DndContext modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-        >
-          <SortableContext 
-            items={linkIDs}
-            strategy={verticalListSortingStrategy}
-          >
-            {links}
-          </SortableContext>
-        </DndContext>
-      </div> }
-      { !isMulti && <div>{links}</div>}
+      {sortableLinks()}
       { renderModal && <LinkModalContainer
           types={types}
           typeKey={data[editingID]?.typeKey}

diff --git a/client/src/components/LinkPicker/LinkPickerTitle.js b/client/src/components/LinkPicker/LinkPickerTitle.js
@@ -83,7 +83,7 @@ const LinkPickerTitle = ({
     {...attributes}
     {...listeners}
   >
-    { isMulti && <div className="link-picker__drag-handle"><i className="font-icon-drag-handle"></i></div> }
+    { (isMulti && !readonly) && <div className="link-picker__drag-handle"><i className="font-icon-drag-handle"></i></div> }
     <Button disabled={loading} className={`link-picker__button ${typeIcon}`} color="secondary" onClick={stopPropagation(onClick)}>
       <div className="link-picker__link-detail">
         <div className="link-picker__title">

diff --git a/client/src/components/LinkPicker/tests/LinkPickerTitle-test.js b/client/src/components/LinkPicker/tests/LinkPickerTitle-test.js
@@ -92,14 +92,14 @@ test('LinkPickerTitle main button should not fire the onClick callback while loa
   expect(mockOnClick).toHaveBeenCalledTimes(0);
 });
 
-test('LinkPickerTitle render() should have readonly class if cannot edit', () => {
+test('LinkPickerTitle render() should have readonly class if set to readonly', () => {
   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', () => {
+test('LinkPickerTitle render() should not have readonly class if set to readonly', () => {
   const { container } = render(<LinkFieldContext.Provider value={{ loading: false }}>
     <LinkPickerTitle {...makeProps({ readonly: false })} />
   </LinkFieldContext.Provider>);

diff --git a/lang/en.yml b/lang/en.yml
@@ -11,6 +11,7 @@ en:
     INVALID_TOKEN: 'Invalid CSRF token'
     INVALID_TYPEKEY: 'Invalid typeKey'
     MENUTITLE: SilverStripe\LinkField\Controllers\LinkFieldController
+    READ_ONLY_MESSAGE: 'This form is read only'
     UNAUTHORIZED: Unauthorized
     UPDATE_LINK: 'Update link'
   SilverStripe\LinkField\Form\Traits\AllowedLinkClassesTrait:

diff --git a/src/Controllers/LinkFieldController.php b/src/Controllers/LinkFieldController.php
@@ -355,15 +355,22 @@ private function createLinkForm(Link $link, string $operation): Form
             . "&ownerRelation=$ownerRelation");
         $form->setFormAction($url);
 
-        // Add save action button
-        $title = $id
-                ? _t(__CLASS__ . '.UPDATE_LINK', 'Update link')
-                : _t(__CLASS__ . '.CREATE_LINK', 'Create link');
-        $actions = FieldList::create([
-            FormAction::create('save', $title)
-                ->setSchemaData(['data' => ['buttonStyle' => 'primary']]),
-        ]);
-        $form->setActions($actions);
+        $isNotEditable = $operation === 'create' && !$link->canCreate()
+                        || $operation === 'edit' && !$link->canEdit()
+                        || $this->isReadOnlyField();
+
+        // Add save action button if the user has permission to create or edit the Link
+        if (!$isNotEditable) {
+            // Add save action button
+            $title = $id
+                    ? _t(__CLASS__ . '.UPDATE_LINK', 'Update link')
+                    : _t(__CLASS__ . '.CREATE_LINK', 'Create link');
+            $actions = FieldList::create([
+                FormAction::create('save', $title)
+                    ->setSchemaData(['data' => ['buttonStyle' => 'primary']]),
+            ]);
+            $form->setActions($actions);
+        }
 
         // Set the form request handler to return a FormSchema response during a POST request
         // This will override the default FormRequestHandler::getAjaxErrorResponse() which isn't useful
@@ -377,13 +384,14 @@ 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()
-        ) {
+        if ($isNotEditable) {
             $form->makeReadonly();
         }
 
+        if ($this->isReadOnlyField()) {
+            $form->setMessage(_t(__CLASS__ . '.READ_ONLY_MESSAGE', 'This form is read only'), 'info');
+        }
+
         // Styling
         $form->addExtraClass('form--no-dividers');