Review of #6213, to hide image upload options when lacking permission

- Updated element control to add/remove content instead of using CSS
  display.
This commit is contained in:
Dan Brown
2026-09-30 14:42:52 +01:00
parent 89794dc9c8
commit f585a7d910
3 changed files with 37 additions and 28 deletions
+9 -7
View File
@@ -18,11 +18,11 @@ export class ImageManager extends Component {
this.listContainer = this.$refs.listContainer;
this.filterTabs = this.$manyRefs.filterTabs;
this.selectButton = this.$refs.selectButton;
this.uploadButton = this.$refs.uploadButton;
this.uploadButton = this.$refs.uploadButton || null;
this.uploadHint = this.$refs.uploadHint;
this.formContainer = this.$refs.formContainer;
this.formContainerPlaceholder = this.$refs.formContainerPlaceholder;
this.dropzoneContainer = this.$refs.dropzoneContainer;
this.dropzoneContainer = this.$refs.dropzoneContainer || null;
this.loadMore = this.$refs.loadMore;
// Instance data
@@ -139,13 +139,15 @@ export class ImageManager extends Component {
this.getPopup().show();
const hideUploads = type !== 'gallery';
this.dropzoneContainer.classList.toggle('hidden', hideUploads);
this.uploadButton.classList.toggle('hidden', hideUploads);
this.uploadHint.classList.toggle('hidden', hideUploads);
this.dropzoneContainer?.toggleAttribute('hidden', hideUploads);
this.uploadButton?.toggleAttribute('hidden', hideUploads);
this.uploadHint.toggleAttribute('hidden', hideUploads);
/** @var {Dropzone} * */
/** @var {Dropzone|null} * */
const dropzone = window.$components.firstOnElement(this.container, 'dropzone');
dropzone.toggleActive(!hideUploads);
if (dropzone) {
dropzone.toggleActive(!hideUploads);
}
if (!this.hasData) {
this.loadGallery();
@@ -3,7 +3,7 @@
&& userCan(\BookStack\Permissions\Permission::ImageCreateAll)
&& userCan(\BookStack\Permissions\Permission::PageUpdate, $page);
@endphp
<div components="image-manager dropzone"
<div components="image-manager {{ $canUploadImages ? 'dropzone' : '' }}"
option:dropzone:url="{{ url('/images/gallery?' . http_build_query(['uploaded_to' => $uploaded_to ?? 0])) }}"
option:dropzone:success-message="{{ trans('components.image_upload_success') }}"
option:dropzone:error-message="{{ trans('errors.image_upload_error') }}"
@@ -21,16 +21,17 @@
<div class="popup-body" tabindex="-1">
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.image_select') }}</div>
<button refs="dropzone@selectButton image-manager@uploadButton" type="button"
@if(!$canUploadImages) style="display: none;" @endif>
<span>@icon('upload')</span>
<span>{{ trans('components.image_upload') }}</span>
</button>
<button refs="popup@hide"
type="button"
title="{{ trans('common.close') }}"
class="popup-header-close">@icon('close')
@if($canUploadImages)
<button refs="dropzone@selectButton image-manager@uploadButton" type="button">
<span>@icon('upload')</span>
<span>{{ trans('components.image_upload') }}</span>
</button>
@endif
<button refs="popup@hide"
type="button"
title="{{ trans('common.close') }}"
class="popup-header-close">@icon('close')
</button>
</div>
@@ -107,16 +108,19 @@
aria-labelledby="image-manager-info-tab"
class="image-manager-sidebar flex-container-column">
<div refs="image-manager@dropzoneContainer">
<div refs="dropzone@status-area"></div>
</div>
@if($canUploadImages)
<div refs="image-manager@dropzoneContainer">
<div refs="dropzone@status-area"></div>
</div>
@endif
<div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
<p @if(!$canUploadImages) style="display: none;" @endif>{{ trans('components.image_intro') }}</p>
<p refs="image-manager@upload-hint" @if(!$canUploadImages) style="display: none;" @endif>{{ trans('components.image_intro_upload') }}</p>
@unless($canUploadImages)
<p>{{ trans('components.image_no_upload_permission') }}</p>
@endunless
<p>{{ trans('components.image_intro') }}</p>
@if($canUploadImages)
<p refs="image-manager@upload-hint">{{ trans('components.image_intro_upload') }}</p>
@else
<p refs="image-manager@upload-hint">{{ trans('components.image_no_upload_permission') }}</p>
@endif
</div>
<div refs="image-manager@formContainer" class="inner flex">
+6 -3
View File
@@ -695,7 +695,8 @@ class ImageTest extends TestCase
$editor = $this->users->editor();
$resp = $this->actingAs($editor)->get($page->getUrl('/edit'));
$this->withHtml($resp)->assertElementNotExists('[refs~="image-manager@uploadButton"]', ['style' => 'display: none;']);
$this->withHtml($resp)->assertElementExists('[refs~="image-manager@uploadButton"]');
$this->withHtml($resp)->assertElementExists('[refs="image-manager@dropzoneContainer"]');
$resp->assertDontSee('You do not have permission to upload new images.');
// Viewer with page-update permission but no image-create-all permission
@@ -703,14 +704,16 @@ class ImageTest extends TestCase
$this->permissions->setEntityPermissionsForRole($page, ['view', 'update'], $viewer->roles()->first());
$resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
$this->withHtml($resp)->assertElementExists('[refs~="image-manager@uploadButton"]', ['style' => 'display: none;']);
$this->withHtml($resp)->assertElementNotExists('[refs~="image-manager@uploadButton"]');
$this->withHtml($resp)->assertElementNotExists('[refs="image-manager@dropzoneContainer"]');
$resp->assertSee('You do not have permission to upload new images.');
// Grant image-create-all, upload options should now be enabled
$this->permissions->grantUserRolePermissions($viewer, ['image-create-all']);
$resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
$this->withHtml($resp)->assertElementNotExists('[refs~="image-manager@uploadButton"]', ['style' => 'display: none;']);
$this->withHtml($resp)->assertElementExists('[refs~="image-manager@uploadButton"]');
$this->withHtml($resp)->assertElementExists('[refs="image-manager@dropzoneContainer"]');
$resp->assertDontSee('You do not have permission to upload new images.');
}