Attachments: Hid edit/delete controls where lacking permission

Added test to cover.
Also migrated related ajax-delete-row component to ts.

For #5323

resources/js/components/ajax-delete-row.ts

@@ -1,12 +1,16 @@
-import {onSelect} from '../services/dom.ts';
+import {onSelect} from '../services/dom';
 import {Component} from './component';
 
 export class AjaxDeleteRow extends Component {
 
+    protected row!: HTMLElement;
+    protected url!: string;
+    protected deleteButtons: HTMLElement[] = [];
+
     setup() {
         this.row = this.$el;
         this.url = this.$opts.url;
-        this.deleteButtons = this.$manyRefs.delete;
+        this.deleteButtons = this.$manyRefs.delete || [];
 
         onSelect(this.deleteButtons, this.runDelete.bind(this));
     }
@@ -21,8 +25,8 @@ export class AjaxDeleteRow extends Component {
             }
             this.row.remove();
         }).catch(() => {
-            this.row.style.opacity = null;
+            this.row.style.removeProperty('opacity');
-            this.row.style.pointerEvents = null;
+            this.row.style.removeProperty('pointer-events');
         });
     }
 

resources/js/components/component.js

@@ -8,20 +8,20 @@ export class Component {
 
     /**
      * The element that the component is registered upon.
-     * @type {Element}
+     * @type {HTMLElement}
      */
     $el = null;
 
     /**
      * Mapping of referenced elements within the component.
-     * @type {Object<string, Element>}
+     * @type {Object<string, HTMLElement>}
      */
     $refs = {};
 
     /**
      * Mapping of arrays of referenced elements within the component so multiple
      * references, sharing the same name, can be fetched.
-     * @type {Object<string, Element[]>}
+     * @type {Object<string, HTMLElement[]>}
      */
     $manyRefs = {};
 

resources/views/attachments/manager-list.blade.php

@@ -16,12 +16,15 @@
                         type="button"
                         title="{{ trans('entities.attachments_insert_link') }}"
                         class="drag-card-action text-center text-link">@icon('link')</button>
+                @if(userCan('attachment-update', $attachment))
                     <button component="event-emit-select"
                             option:event-emit-select:name="edit"
                             option:event-emit-select:id="{{ $attachment->id }}"
                             type="button"
                             title="{{ trans('common.edit') }}"
                             class="drag-card-action text-center text-link">@icon('edit')</button>
+                @endif
+                @if(userCan('attachment-delete', $attachment))
                     <div component="dropdown" class="flex-fill relative">
                         <button refs="dropdown@toggle"
                                 type="button"
@@ -32,6 +35,7 @@
                             <button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
                         </div>
                     </div>
+                @endif
             </div>
         </div>
     @endforeach

tests/Uploads/AttachmentTest.php

@@ -267,6 +267,50 @@ class AttachmentTest extends TestCase
         }
     }
 
+    public function test_attachment_delete_only_shows_with_permission()
+    {
+        $this->asAdmin();
+        $page = $this->entities->page();
+        $this->files->uploadAttachmentFile($this, 'upload_test.txt', $page->id);
+        $attachment = $page->attachments()->first();
+        $viewer = $this->users->viewer();
+
+        $this->permissions->grantUserRolePermissions($viewer, ['page-update-all', 'attachment-create-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"]");
+        $html->assertElementNotExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Delete\"]");
+
+        $this->permissions->grantUserRolePermissions($viewer, ['attachment-delete-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Delete\"]");
+    }
+
+    public function test_attachment_edit_only_shows_with_permission()
+    {
+        $this->asAdmin();
+        $page = $this->entities->page();
+        $this->files->uploadAttachmentFile($this, 'upload_test.txt', $page->id);
+        $attachment = $page->attachments()->first();
+        $viewer = $this->users->viewer();
+
+        $this->permissions->grantUserRolePermissions($viewer, ['page-update-all', 'attachment-create-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"]");
+        $html->assertElementNotExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Edit\"]");
+
+        $this->permissions->grantUserRolePermissions($viewer, ['attachment-update-all']);
+
+        $resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
+        $html = $this->withHtml($resp);
+        $html->assertElementExists(".card[data-id=\"{$attachment->id}\"] button[title=\"Edit\"]");
+    }
+
     public function test_file_access_with_open_query_param_provides_inline_response_with_correct_content_type()
     {
         $page = $this->entities->page();