@umbraco-cms/backoffice 16.0.0-rc2 → 16.0.0-rc3

package/dist-cms/packages/search/search-modal/search-modal.element.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { css, html, nothing, repeat, customElement, query, state, property, when, } from '@umbraco-cms/backoffice/external/lit';
 import { UmbExtensionsManifestInitializer, createExtensionApi } from '@umbraco-cms/backoffice/extension-api';
-import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
+import { createExtensionApiByAlias, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import '../search-result/search-result-item.element.js';
@@ -18,7 +18,7 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
         super();
         this._search = '';
         this._searchResults = [];
-        this._searchProviders = [];
+        this._globalSearchers = [];
         this._loading = false;
         this.#searchItemNavIndex = 0;
         this.#inputTimerAmount = 300;
@@ -28,7 +28,7 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
                 return;
             this.modalContext?.reject();
         };
-        this.#observeProviders();
+        this.#observeGlobalSearchers();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -44,22 +44,33 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
         document.removeEventListener('click', this.#onDocumentClick);
     }
     #onDocumentClick;
-    #observeProviders() {
-        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'searchProvider', null, async (providers) => {
-            const searchProviders = [];
-            for (const provider of providers) {
-                const api = await createExtensionApi(this, provider.manifest);
-                if (api) {
-                    searchProviders.push({
-                        name: provider.manifest.meta?.label || provider.manifest.name,
-                        api,
-                        alias: provider.alias,
-                    });
+    #observeGlobalSearchers() {
+        new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'globalSearch', null, async (controllers) => {
+            const globalSearch = [];
+            for (const controller of controllers) {
+                let searchApi = undefined;
+                if (controller.manifest.api) {
+                    searchApi = await createExtensionApi(this, controller.manifest);
+                    if (searchApi) {
+                        // TODO: we need to investigate if it makes sense to have a function that does this when creating a new extension api? [MR]
+                        searchApi.manifest = controller.manifest;
+                    }
+                }
+                else {
+                    searchApi = await createExtensionApiByAlias(this, controller.manifest.meta?.searchProviderAlias);
+                }
+                if (searchApi) {
+                    const searcher = {
+                        name: controller.manifest.meta?.label || controller.manifest.name,
+                        api: searchApi,
+                        alias: controller.alias,
+                    };
+                    globalSearch.push(searcher);
                 }
             }
-            this._searchProviders = searchProviders;
-            if (this._searchProviders.length > 0) {
-                this._currentProvider = this._searchProviders[0];
+            this._globalSearchers = globalSearch;
+            if (this._globalSearchers.length > 0) {
+                this._currentGlobalSearcher = this._globalSearchers[0];
             }
         });
     }
@@ -89,18 +100,18 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
             this._inputFakeCursor.style.display = 'none';
         }
     }
-    #setCurrentProvider(searchProvider) {
-        if (this._currentProvider === searchProvider)
+    #setCurrentSearcher(searcher) {
+        if (this._currentGlobalSearcher === searcher)
             return;
-        this._currentProvider = searchProvider;
+        this._currentGlobalSearcher = searcher;
         this.#focusInput();
         this._loading = true;
         this._searchResults = [];
         this.#updateSearchResults();
     }
     async #updateSearchResults() {
-        if (this._search && this._currentProvider?.api) {
-            const { data } = await this._currentProvider.api.search({ query: this._search });
+        if (this._search && this._currentGlobalSearcher?.api) {
+            const { data } = await this._currentGlobalSearcher.api.search({ query: this._search });
             if (!data)
                 return;
             this._searchResults = data.items;
@@ -246,13 +257,13 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
     #renderSearchTags() {
         return html `
 			<div id="search-providers">
-				${repeat(this._searchProviders, (searchProvider) => searchProvider.alias, (searchProvider) => html `
+				${repeat(this._globalSearchers, (searcher) => searcher.alias, (searcher) => html `
 						<button
-							class="search-provider ${this._currentProvider?.alias === searchProvider.alias ? 'active' : ''}"
-							data-provider-alias=${searchProvider.alias}
-							@click=${() => this.#setCurrentProvider(searchProvider)}
+							class="search-provider ${this._currentGlobalSearcher?.alias === searcher.alias ? 'active' : ''}"
+							data-provider-alias=${searcher.alias}
+							@click=${() => this.#setCurrentSearcher(searcher)}
 							@keydown=${() => ''}>
-							${searchProvider.name}
+							${searcher.name}
 						</button>
 					`)}
 			</div>
@@ -487,10 +498,10 @@ __decorate([
 ], UmbSearchModalElement.prototype, "_searchResults", void 0);
 __decorate([
     state()
-], UmbSearchModalElement.prototype, "_searchProviders", void 0);
+], UmbSearchModalElement.prototype, "_globalSearchers", void 0);
 __decorate([
     state()
-], UmbSearchModalElement.prototype, "_currentProvider", void 0);
+], UmbSearchModalElement.prototype, "_currentGlobalSearcher", void 0);
 __decorate([
     state()
 ], UmbSearchModalElement.prototype, "_loading", void 0);

package/dist-cms/packages/search/types.d.ts

@@ -5,6 +5,7 @@ import type { UmbPagedModel, UmbRepositoryResponse } from '@umbraco-cms/backoffi
 export type { UmbSearchDataSource } from './search-data-source.interface.js';
 export type { UmbSearchRepository } from './search-repository.interface.js';
 export type * from './extensions/types.js';
+export type * from './global-search/types.js';
 export type UmbSearchResultModel = SearchResultResponseModelReadable;
 export type UmbSearchResultItemModel = {
     entityType: string;

package/dist-cms/packages/sysinfo/components/sysinfo.element.js

@@ -10,6 +10,7 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
 import { UmbCurrentUserRepository } from '@umbraco-cms/backoffice/current-user';
+import { UmbTemporaryFileConfigRepository } from '@umbraco-cms/backoffice/temporary-file';
 let UmbSysinfoElement = class UmbSysinfoElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
@@ -18,10 +19,12 @@ let UmbSysinfoElement = class UmbSysinfoElement extends UmbModalBaseElement {
         this.#serverKeyValues = [];
         this.#sysinfoRepository = new UmbSysinfoRepository(this);
         this.#currentUserRepository = new UmbCurrentUserRepository(this);
+        this.#temporaryFileConfigRepository = new UmbTemporaryFileConfigRepository(this);
     }
     #serverKeyValues;
     #sysinfoRepository;
     #currentUserRepository;
+    #temporaryFileConfigRepository;
     connectedCallback() {
         super.connectedCallback();
         this.#populate();
@@ -29,24 +32,33 @@ let UmbSysinfoElement = class UmbSysinfoElement extends UmbModalBaseElement {
     async #populate() {
         this._loading = true;
         this.#serverKeyValues.length = 0;
-        const [serverTroubleshooting, serverInformation] = await Promise.all([
+        const [serverTroubleshooting, serverInformation, clientInformation, { data: currentUser }, temporaryFileConfig] = await Promise.all([
             this.#sysinfoRepository.requestTroubleShooting(),
             this.#sysinfoRepository.requestServerInformation(),
+            this.#sysinfoRepository.requestClientInformation(),
+            this.#currentUserRepository.requestCurrentUser(),
+            this.#temporaryFileConfigRepository.requestTemporaryFileConfiguration(),
         ]);
+        this.#serverKeyValues.push({ name: 'Server Troubleshooting' });
         if (serverTroubleshooting) {
             this.#serverKeyValues.push(...serverTroubleshooting.items);
         }
+        this.#serverKeyValues.push({});
+        this.#serverKeyValues.push({ name: 'Server Information' });
         if (serverInformation) {
             this.#serverKeyValues.push({ name: 'Umbraco build version', data: serverInformation.version });
+            this.#serverKeyValues.push({ name: 'Umbraco assembly version', data: serverInformation.assemblyVersion });
             this.#serverKeyValues.push({ name: 'Server time offset', data: serverInformation.baseUtcOffset });
             this.#serverKeyValues.push({ name: 'Runtime mode', data: serverInformation.runtimeMode });
         }
-        // Browser information
-        this.#serverKeyValues.push({ name: 'Browser (user agent)', data: navigator.userAgent });
-        this.#serverKeyValues.push({ name: 'Browser language', data: navigator.language });
-        this.#serverKeyValues.push({ name: 'Browser location', data: location.href });
+        this.#serverKeyValues.push({});
+        this.#serverKeyValues.push({ name: 'Client Information' });
+        if (clientInformation) {
+            this.#serverKeyValues.push({ name: 'Umbraco client version', data: clientInformation.version });
+        }
         // User information
-        const { data: currentUser } = await this.#currentUserRepository.requestCurrentUser();
+        this.#serverKeyValues.push({});
+        this.#serverKeyValues.push({ name: 'Current user' });
         if (currentUser) {
             this.#serverKeyValues.push({ name: 'User is admin', data: currentUser.isAdmin ? 'Yes' : 'No' });
             this.#serverKeyValues.push({ name: 'User sections', data: currentUser.allowedSections.join(', ') });
@@ -57,16 +69,43 @@ let UmbSysinfoElement = class UmbSysinfoElement extends UmbModalBaseElement {
             });
             this.#serverKeyValues.push({
                 name: 'User document start nodes',
-                data: currentUser.documentStartNodeUniques.length ? currentUser.documentStartNodeUniques.join(', ') : 'None',
+                data: currentUser.documentStartNodeUniques.join(', '),
+            });
+        }
+        this.#serverKeyValues.push({});
+        this.#serverKeyValues.push({ name: 'Temporary file configuration' });
+        // Temporary file configuration
+        if (temporaryFileConfig) {
+            this.#serverKeyValues.push({
+                name: 'Max allowed file size',
+                data: temporaryFileConfig.maxFileSize?.toString() ?? 'Not set (unlimited)',
+            });
+            this.#serverKeyValues.push({
+                name: 'Allowed file types',
+                data: temporaryFileConfig.allowedUploadedFileExtensions.join(', '),
+            });
+            this.#serverKeyValues.push({
+                name: 'Disallowed file types',
+                data: temporaryFileConfig.disallowedUploadedFilesExtensions?.join(', '),
+            });
+            this.#serverKeyValues.push({
+                name: 'Image file types',
+                data: temporaryFileConfig.imageFileTypes?.join(', '),
             });
         }
+        // Browser information
+        this.#serverKeyValues.push({});
+        this.#serverKeyValues.push({ name: 'Browser Troubleshooting' });
+        this.#serverKeyValues.push({ name: 'Browser (user agent)', data: navigator.userAgent });
+        this.#serverKeyValues.push({ name: 'Browser language', data: navigator.language });
+        this.#serverKeyValues.push({ name: 'Browser location', data: location.href });
         this._systemInformation = this.#renderServerKeyValues();
         this._loading = false;
     }
     #renderServerKeyValues() {
         return this.#serverKeyValues
             .map((serverKeyValue) => {
-            return `${serverKeyValue.name}: ${serverKeyValue.data}`;
+            return serverKeyValue.name ? `${serverKeyValue.name}: ${serverKeyValue.data ?? ''}` : '';
         })
             .join('\n');
     }
@@ -125,8 +164,9 @@ ${this._systemInformation}`;
     static { this.styles = [
         UmbTextStyles,
         css `
-			#code-block {
+			#codeblock {
 				max-height: 300px;
+				overflow: auto;
 			}
 		`,
     ]; }

package/dist-cms/packages/sysinfo/repository/sysinfo.repository.d.ts

@@ -6,6 +6,9 @@ export declare class UmbSysinfoRepository extends UmbRepositoryBase {
     constructor(host: UmbControllerHost);
     requestTroubleShooting(): Promise<import("@umbraco-cms/backoffice/external/backend-api").ServerTroubleshootingResponseModel>;
     requestServerInformation(): Promise<import("@umbraco-cms/backoffice/external/backend-api").ServerInformationResponseModel>;
+    requestClientInformation(): Promise<{
+        version: string;
+    }>;
     /**
      * Check if the server has an upgrade available and return the result.
      * If the server has an upgrade available, the result will be stored in local storage.

package/dist-cms/packages/sysinfo/repository/sysinfo.repository.js

@@ -1,3 +1,4 @@
+import packageJson from '../../../../package.json';
 import { UmbRepositoryBase } from '@umbraco-cms/backoffice/repository';
 import { tryExecute } from '@umbraco-cms/backoffice/resources';
 import { ServerService } from '@umbraco-cms/backoffice/external/backend-api';
@@ -14,6 +15,13 @@ export class UmbSysinfoRepository extends UmbRepositoryBase {
         const { data } = await tryExecute(this, ServerService.getServerInformation(), { disableNotifications: true });
         return data;
     }
+    async requestClientInformation() {
+        const { version } = packageJson;
+        const clientInformation = {
+            version,
+        };
+        return clientInformation;
+    }
     /**
      * Check if the server has an upgrade available and return the result.
      * If the server has an upgrade available, the result will be stored in local storage.

package/dist-cms/packages/templating/templates/constants.d.ts

@@ -1,3 +1,4 @@
 export * from './conditions/constants.js';
 export * from './repository/constants.js';
+export * from './search/constants.js';
 export * from './workspace/constants.js';

package/dist-cms/packages/templating/templates/constants.js

@@ -1,3 +1,4 @@
 export * from './conditions/constants.js';
 export * from './repository/constants.js';
+export * from './search/constants.js';
 export * from './workspace/constants.js';

package/dist-cms/packages/templating/templates/search/constants.d.ts

@@ -0,0 +1,2 @@
+export * from './global-search/constants.js';
+export declare const UMB_TEMPLATE_SEARCH_PROVIDER_ALIAS = "Umb.SearchProvider.Template";

package/dist-cms/packages/templating/templates/search/constants.js

@@ -0,0 +1,2 @@
+export * from './global-search/constants.js';
+export const UMB_TEMPLATE_SEARCH_PROVIDER_ALIAS = 'Umb.SearchProvider.Template';

package/dist-cms/packages/templating/templates/search/global-search/constants.d.ts

@@ -0,0 +1 @@
+export declare const UMB_TEMPLATE_GLOBAL_SEARCH_ALIAS = "Umb.GlobalSearch.Template";

package/dist-cms/packages/templating/templates/search/global-search/constants.js

@@ -0,0 +1 @@
+export const UMB_TEMPLATE_GLOBAL_SEARCH_ALIAS = 'Umb.GlobalSearch.Template';

package/dist-cms/packages/templating/templates/search/global-search/manifests.d.ts

@@ -0,0 +1 @@
+export declare const manifests: Array<UmbExtensionManifest>;

package/dist-cms/packages/templating/templates/search/global-search/manifests.js

@@ -0,0 +1,22 @@
+import { UMB_TEMPLATE_SEARCH_PROVIDER_ALIAS } from '../constants.js';
+import { UMB_TEMPLATE_GLOBAL_SEARCH_ALIAS } from './constants.js';
+import { UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS } from '@umbraco-cms/backoffice/section';
+import { UMB_SETTINGS_SECTION_ALIAS } from '@umbraco-cms/backoffice/settings';
+export const manifests = [
+    {
+        name: 'Template Global Search',
+        alias: UMB_TEMPLATE_GLOBAL_SEARCH_ALIAS,
+        type: 'globalSearch',
+        weight: 200,
+        meta: {
+            label: 'Templates',
+            searchProviderAlias: UMB_TEMPLATE_SEARCH_PROVIDER_ALIAS,
+        },
+        conditions: [
+            {
+                alias: UMB_SECTION_USER_PERMISSION_CONDITION_ALIAS,
+                match: UMB_SETTINGS_SECTION_ALIAS,
+            },
+        ],
+    },
+];

package/dist-cms/packages/templating/templates/search/manifests.js

@@ -1,8 +1,10 @@
 import { UMB_TEMPLATE_ENTITY_TYPE } from '../entity.js';
+import { UMB_TEMPLATE_SEARCH_PROVIDER_ALIAS } from './constants.js';
+import { manifests as globalSearchManifests } from './global-search/manifests.js';
 export const manifests = [
     {
         name: 'Template Search Provider',
-        alias: 'Umb.SearchProvider.Template',
+        alias: UMB_TEMPLATE_SEARCH_PROVIDER_ALIAS,
         type: 'searchProvider',
         api: () => import('./template.search-provider.js'),
         weight: 100,
@@ -16,4 +18,5 @@ export const manifests = [
         type: 'searchResultItem',
         forEntityTypes: [UMB_TEMPLATE_ENTITY_TYPE],
     },
+    ...globalSearchManifests,
 ];

package/dist-cms/packages/tiptap/extensions/core/media-upload.tiptap-api.d.ts

@@ -5,9 +5,14 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtensionApiBase {
     #private;
     /**
+     * @returns {number} The configured maximum allowed image size
+     */
+    get maxImageSize(): number;
+    /**
+     * @deprecated Use `maxImageSize` instead.
      * @returns {number} The maximum width of uploaded images
      */
-    get maxWidth(): number;
+    maxWidth: number;
     /**
      * @returns {Array<string>} The allowed mime types for uploads
      */

package/dist-cms/packages/tiptap/extensions/core/media-upload.tiptap-api.js

@@ -8,9 +8,9 @@ import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
 export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtensionApiBase {
     #configuration;
     /**
-     * @returns {number} The maximum width of uploaded images
+     * @returns {number} The configured maximum allowed image size
      */
-    get maxWidth() {
+    get maxImageSize() {
         const maxImageSize = parseInt(this.#configuration?.getValueByAlias('maxImageSize') ?? '', 10);
         return isNaN(maxImageSize) ? 500 : maxImageSize;
     }
@@ -20,11 +20,18 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
     get allowedFileTypes() {
         return (this.#configuration?.getValueByAlias('allowedFileTypes') ?? ['image/jpeg', 'image/png', 'image/gif']);
     }
-    #manager = new UmbTemporaryFileManager(this);
-    #localize = new UmbLocalizationController(this);
+    #manager;
+    #localize;
     #notificationContext;
     constructor(host) {
         super(host);
+        /**
+         * @deprecated Use `maxImageSize` instead.
+         * @returns {number} The maximum width of uploaded images
+         */
+        this.maxWidth = this.maxImageSize;
+        this.#manager = new UmbTemporaryFileManager(this);
+        this.#localize = new UmbLocalizationController(this);
         this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
             this.#notificationContext = instance;
         });
@@ -76,7 +83,7 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
         const fileModels = filteredFiles.map((file) => this.#mapFileToTemporaryFile(file));
         this.dispatchEvent(new CustomEvent('rte.file.uploading', { composed: true, bubbles: true, detail: fileModels }));
         const uploads = await this.#manager.upload(fileModels);
-        const maxImageSize = this.maxWidth;
+        const maxImageSize = this.maxImageSize;
         uploads.forEach(async (upload) => {
             if (upload.status !== TemporaryFileStatus.SUCCESS) {
                 this.#notificationContext?.peek('danger', {
@@ -88,7 +95,10 @@ export default class UmbTiptapMediaUploadExtensionApi extends UmbTiptapExtension
                 return;
             }
             const blobUrl = URL.createObjectURL(upload.file);
-            const { width, height } = await imageSize(blobUrl, { maxWidth: maxImageSize });
+            // Get the image dimensions - this essentially simulates what the server would do
+            // when it resizes the image. The server will return the resized image URL.
+            // We need to use the blob URL here, as the server will not be able to access the local file.
+            const { width, height } = await imageSize(blobUrl, { maxWidth: maxImageSize, maxHeight: maxImageSize });
             editor
                 .chain()
                 .focus()

package/dist-cms/packages/tiptap/extensions/toolbar/media-picker.tiptap-toolbar-api.d.ts

@@ -4,9 +4,14 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbTiptapToolbarElementApiBase {
     #private;
     /**
+     * @returns {number} The configured maximum allowed image size
+     */
+    get maxImageSize(): number;
+    /**
+     * @deprecated Use `maxImageSize` instead.
      * @returns {number} The maximum width of uploaded images
      */
-    get maxWidth(): number;
+    maxWidth: number;
     constructor(host: UmbControllerHost);
     isActive(editor?: Editor): boolean;
     execute(editor: Editor): Promise<void>;

package/dist-cms/packages/tiptap/extensions/toolbar/media-picker.tiptap-toolbar-api.js

@@ -1,19 +1,27 @@
 import { UmbTiptapToolbarElementApiBase } from '../base.js';
-import { getGuidFromUdi, getProcessedImageUrl, imageSize } from '@umbraco-cms/backoffice/utils';
+import { getGuidFromUdi, imageSize } from '@umbraco-cms/backoffice/utils';
 import { ImageCropModeModel } from '@umbraco-cms/backoffice/external/backend-api';
+import { UmbImagingRepository } from '@umbraco-cms/backoffice/imaging';
 import { UMB_MEDIA_CAPTION_ALT_TEXT_MODAL, UMB_MEDIA_PICKER_MODAL } from '@umbraco-cms/backoffice/media';
 import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
 export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbTiptapToolbarElementApiBase {
+    #imagingRepository;
     #modalManager;
     /**
-     * @returns {number} The maximum width of uploaded images
+     * @returns {number} The configured maximum allowed image size
      */
-    get maxWidth() {
+    get maxImageSize() {
         const maxImageSize = parseInt(this.configuration?.getValueByAlias('maxImageSize') ?? '', 10);
         return isNaN(maxImageSize) ? 500 : maxImageSize;
     }
     constructor(host) {
         super(host);
+        this.#imagingRepository = new UmbImagingRepository(this);
+        /**
+         * @deprecated Use `maxImageSize` instead.
+         * @returns {number} The maximum width of uploaded images
+         */
+        this.maxWidth = this.maxImageSize;
         this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => {
             this.#modalManager = instance;
         });
@@ -78,11 +86,24 @@ export default class UmbTiptapToolbarMediaPickerToolbarExtensionApi extends UmbT
     async #insertInEditor(editor, mediaUnique, media) {
         if (!media?.url)
             return;
-        const { width, height } = await imageSize(media.url, { maxWidth: this.maxWidth });
-        const src = await getProcessedImageUrl(media.url, { width, height, mode: ImageCropModeModel.MAX });
+        const maxImageSize = this.maxImageSize;
+        // Get the resized image URL
+        const { data } = await this.#imagingRepository.requestResizedItems([mediaUnique], {
+            width: maxImageSize,
+            height: maxImageSize,
+            mode: ImageCropModeModel.MAX,
+        });
+        if (!data?.length || !data[0]?.url) {
+            console.error('No data returned from imaging repository');
+            return;
+        }
+        // Set the media URL to the first item in the data array
+        const src = data[0].url;
+        // Fetch the actual image dimensions
+        const { width, height } = await imageSize(src);
         const img = {
-            alt: media.altText,
             src,
+            alt: media.altText,
             'data-udi': `umb://media/${mediaUnique.replace(/-/g, '')}`,
             width: width.toString(),
             height: height.toString(),

package/dist-cms/packages/user/current-user/action/current-user-app-button.element.d.ts

@@ -2,7 +2,7 @@ import type { ManifestCurrentUserActionDefaultKind, MetaCurrentUserActionDefault
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 export declare class UmbCurrentUserAppButtonElement<MetaType extends MetaCurrentUserActionDefaultKind = MetaCurrentUserActionDefaultKind, ApiType extends UmbCurrentUserAction<MetaType> = UmbCurrentUserAction<MetaType>> extends UmbLitElement {
     #private;
-    _href?: string;
+    private _href?;
     manifest?: ManifestCurrentUserActionDefaultKind<MetaType>;
     set api(api: ApiType | undefined);
     get label(): string | undefined;

package/dist-cms/packages/user/current-user/action/current-user-app-button.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { html, customElement, ifDefined, state, property } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, ifDefined, state, property, nothing } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbActionExecutedEvent } from '@umbraco-cms/backoffice/event';
 let UmbCurrentUserAppButtonElement = class UmbCurrentUserAppButtonElement extends UmbLitElement {
@@ -28,13 +28,9 @@ let UmbCurrentUserAppButtonElement = class UmbCurrentUserAppButtonElement extend
     }
     render() {
         return html `
-			<uui-button
-				@click=${this.#onClick}
-				look="${this.manifest?.meta.look ?? 'primary'}"
-				color="${this.manifest?.meta.color ?? 'default'}"
-				label="${ifDefined(this.label)}"
-				href="${ifDefined(this._href)}">
-				${this.manifest?.meta.icon ? html `<uui-icon name="${this.manifest.meta.icon}"></uui-icon>` : ''} ${this.label}
+			<uui-button @click=${this.#onClick} look="secondary" label=${ifDefined(this.label)} href=${ifDefined(this._href)}>
+				${this.manifest?.meta.icon ? html `<uui-icon name=${this.manifest.meta.icon}></uui-icon>` : nothing}
+				${this.label}
 			</uui-button>
 		`;
     }

package/dist-cms/packages/user/current-user/current-user-action.extension.d.ts

@@ -1,7 +1,6 @@
 import type { UmbAction } from '@umbraco-cms/backoffice/action';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
-import type { UUIInterfaceColor, UUIInterfaceLook } from '@umbraco-cms/backoffice/external/uui';
 export interface UmbCurrentUserActionArgs<MetaArgsType> {
     meta: MetaArgsType;
 }
@@ -44,16 +43,6 @@ export interface MetaCurrentUserActionDefaultKind extends MetaCurrentUserAction
      * ]
      */
     label: string;
-    /**
-     * The look of the button
-     * @default primary
-     */
-    look?: UUIInterfaceLook;
-    /**
-     * The color of the button
-     * @default default
-     */
-    color?: UUIInterfaceColor;
 }
 declare global {
     interface UmbExtensionManifestMap {

package/dist-cms/packages/user/current-user/external-login/manifests.js

@@ -15,7 +15,6 @@ export const manifests = [
         meta: {
             label: '#defaultdialogs_externalLoginProviders',
             icon: 'icon-lock',
-            look: 'secondary',
         },
         conditions: [
             {

package/dist-cms/packages/user/current-user/mfa-login/manifests.js

@@ -10,7 +10,6 @@ export const manifests = [
         meta: {
             label: '#user_configureTwoFactor',
             icon: 'icon-rectangle-ellipsis',
-            look: 'secondary',
         },
         conditions: [
             {