add missing edit permissions button for media create options modal

Author: loivsen

src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts

@@ -3,9 +3,19 @@ import type {
 	UmbMediaCreateOptionsModalData,
 	UmbMediaCreateOptionsModalValue,
 } from './media-create-options-modal.token.js';
-import { html, nothing, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
+import {
+	html,
+	nothing,
+	customElement,
+	state,
+	ifDefined,
+	repeat,
+	css,
+	when,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbMediaTypeStructureRepository, type UmbAllowedMediaTypeModel } from '@umbraco-cms/backoffice/media-type';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 
 @customElement('umb-media-create-options-modal')
 export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
@@ -63,21 +73,10 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 		return html`
 			<umb-body-layout headline=${this._headline ?? ''}>
 				<uui-box>
-					${this._allowedMediaTypes.length === 0
-						? html`<umb-localize key="create_noMediaTypes"></umb-localize>`
-						: nothing}
-					${this._allowedMediaTypes.map(
-						(mediaType) => html`
-							<uui-ref-node-document-type
-								data-id=${ifDefined(mediaType.unique)}
-								.name=${mediaType.name}
-								.alias=${mediaType.description}
-								select-only
-								selectable
-								@selected=${() => this.#onNavigate(mediaType)}>
-								${mediaType.icon ? html`<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
-							</uui-ref-node-document-type>
-						`,
+					${when(
+						this._allowedMediaTypes.length === 0,
+						() => this.#renderNotAllowed(),
+						() => this.#renderAllowedMediaTypes(),
 					)}
 				</uui-box>
 				<uui-button
@@ -88,6 +87,42 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 			</umb-body-layout>
 		`;
 	}
+
+	#renderNotAllowed() {
+		return html`<umb-localize key="create_noMediaTypes"></umb-localize><br />
+			<uui-button
+				id="edit-permissions"
+				look="secondary"
+				@click=${() => this._rejectModal()}
+				href=${`/section/settings/workspace/media-type/edit/${this.data?.mediaType?.unique}/view/structure`}
+				label=${this.localize.term('create_noMediaTypesEditPermissions')}></uui-button>`;
+	}
+
+	#renderAllowedMediaTypes() {
+		return repeat(
+			this._allowedMediaTypes,
+			(mediaType) => mediaType.unique,
+			(mediaType) =>
+				html`<uui-ref-node-document-type
+					data-id=${ifDefined(mediaType.unique)}
+					.name=${mediaType.name}
+					.alias=${mediaType.description ?? ''}
+					select-only
+					selectable
+					@selected=${() => this.#onNavigate(mediaType)}>
+					${mediaType.icon ? html`<umb-icon slot="icon" name=${mediaType.icon}></umb-icon>` : nothing}
+				</uui-ref-node-document-type>`,
+		);
+	}
+
+	static styles = [
+		UmbTextStyles,
+		css`
+			#edit-permissions {
+				margin-top: var(--uui-size-6);
+			}
+		`,
+	];
 }
 
 export default UmbMediaCreateOptionsModalElement;