@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc5

package/dist-cms/packages/search/examine-management-dashboard/views/section-view-examine-indexers.js

@@ -19,28 +19,44 @@ let UmbDashboardExamineIndexElement = class UmbDashboardExamineIndexElement exte
     }
     connectedCallback() {
         super.connectedCallback();
-        this._getIndexData();
+        this.#loadData();
     }
-    async _getIndexData() {
-        const { data } = await tryExecuteAndNotify(this, IndexerService.getIndexerByIndexName({ indexName: this.indexName }));
-        this._indexData = data;
-        // TODO: Add continuous polling to update the status
-        if (this._indexData?.healthStatus === HealthStatusModel.REBUILDING) {
+    async #loadData() {
+        this._indexData = await this.#getIndexData();
+        if (this._indexData?.healthStatus.status === HealthStatusModel.REBUILDING) {
             this._buttonState = 'waiting';
+            this._continuousPolling();
+        }
+        else {
+            this._loading = false;
         }
-        this._loading = false;
+    }
+    async #getIndexData() {
+        const { data } = await tryExecuteAndNotify(this, IndexerService.getIndexerByIndexName({ indexName: this.indexName }));
+        return data;
+    }
+    async _continuousPolling() {
+        //Checking the server every 5 seconds to see if the index is still rebuilding.
+        while (this._buttonState === 'waiting') {
+            await new Promise((resolve) => setTimeout(resolve, 5000));
+            this._indexData = await this.#getIndexData();
+            if (this._indexData?.healthStatus.status !== HealthStatusModel.REBUILDING) {
+                this._buttonState = 'success';
+            }
+        }
+        return;
     }
     async _onRebuildHandler() {
         await umbConfirmModal(this, {
-            headline: `Rebuild ${this.indexName}`,
-            content: html `
-				This will cause the index to be rebuilt.<br />
+            headline: `${this.localize.term('examineManagement_rebuildIndex')} ${this.indexName}`,
+            content: html `<umb-localize key="examineManagement_rebuildIndexWarning"
+				>This will cause the index to be rebuilt.<br />
 				Depending on how much content there is in your site this could take a while.<br />
 				It is not recommended to rebuild an index during times of high website traffic or when editors are editing
-				content.
-			`,
+				content.</umb-localize
+			> `,
             color: 'danger',
-            confirmLabel: 'Rebuild',
+            confirmLabel: this.localize.term('examineManagement_rebuildIndex'),
         });
         this._rebuild();
     }
@@ -52,7 +68,20 @@ let UmbDashboardExamineIndexElement = class UmbDashboardExamineIndexElement exte
             return;
         }
         this._buttonState = 'success';
-        await this._getIndexData();
+        await this.#loadData();
+    }
+    #renderHealthStatus(healthStatus) {
+        const msg = healthStatus.message ? healthStatus.message : healthStatus.status;
+        switch (healthStatus.status) {
+            case HealthStatusModel.HEALTHY:
+                return html `<umb-icon name="icon-check color-green"></umb-icon>${msg}`;
+            case HealthStatusModel.UNHEALTHY:
+                return html `<umb-icon name="icon-error color-red"></umb-icon>${msg}`;
+            case HealthStatusModel.REBUILDING:
+                return html `<umb-icon name="icon-time color-yellow"></umb-icon>${msg}`;
+            default:
+                return;
+        }
     }
     render() {
         if (!this._indexData || this._loading)
@@ -60,40 +89,40 @@ let UmbDashboardExamineIndexElement = class UmbDashboardExamineIndexElement exte
         return html `
 			<uui-box headline="${this.indexName}">
 				<p>
-					<strong>Health Status</strong><br />
-					The health status of the ${this.indexName} and if it can be read
+					<strong><umb-localize key="examineManagement_healthStatus">Health Status</umb-localize></strong
+					><br />
+					<umb-localize key="examineManagement_healthStatusDescription"
+						>The health status of the ${this.indexName} and if it can be read</umb-localize
+					>
 				</p>
-				<div>
-					<uui-icon-essentials>
-						${this._indexData.healthStatus === HealthStatusModel.UNHEALTHY
-            ? html `<uui-icon name="wrong" class="danger"></uui-icon>`
-            : html `<uui-icon name="check" class="positive"></uui-icon>`}
-						</uui-icon>
-					</uui-icon-essentials>
-					${this._indexData.healthStatus}
-				</div>
+				<div id="health-status">${this.#renderHealthStatus(this._indexData.healthStatus)}</div>
 			</uui-box>
 			${this.renderIndexSearch()} ${this.renderPropertyList()} ${this.renderTools()}
 		`;
     }
     renderIndexSearch() {
-        if (!this._indexData || this._indexData.healthStatus !== HealthStatusModel.HEALTHY)
+        // Do we want to show the search while rebuilding?
+        if (!this._indexData || this._indexData.healthStatus.status === HealthStatusModel.REBUILDING)
             return nothing;
         return html `<umb-dashboard-examine-searcher .searcherName="${this.indexName}"></umb-dashboard-examine-searcher>`;
     }
     renderPropertyList() {
         if (!this._indexData)
             return nothing;
-        return html `<uui-box headline="Index info">
-			<p>Lists the properties of the ${this.indexName}</p>
+        return html `<uui-box headline=${this.localize.term('examineManagement_indexInfo')}>
+			<p>
+				<umb-localize key="examineManagement_indexInfoDescription"
+					>Lists the properties of the ${this.indexName}</umb-localize
+				>
+			</p>
 			<uui-table class="info">
 				<uui-table-row>
-					<uui-table-cell style="width:0px; font-weight: bold;"> documentCount </uui-table-cell>
-					<uui-table-cell>${this._indexData.documentCount} </uui-table-cell>
+					<uui-table-cell style="width:0px; font-weight: bold;">DocumentCount</uui-table-cell>
+					<uui-table-cell>${this._indexData.documentCount}</uui-table-cell>
 				</uui-table-row>
 				<uui-table-row>
-					<uui-table-cell style="width:0px; font-weight: bold;"> fieldCount </uui-table-cell>
-					<uui-table-cell>${this._indexData.fieldCount} </uui-table-cell>
+					<uui-table-cell style="width:0px; font-weight: bold;">FieldCount</uui-table-cell>
+					<uui-table-cell>${this._indexData.fieldCount}</uui-table-cell>
 				</uui-table-row>
 				${this._indexData.providerProperties
             ? Object.entries(this._indexData.providerProperties).map((entry) => {
@@ -107,22 +136,25 @@ let UmbDashboardExamineIndexElement = class UmbDashboardExamineIndexElement exte
 		</uui-box>`;
     }
     renderTools() {
-        return html ` <uui-box headline="Tools">
-			<p>Tools to manage the ${this.indexName}</p>
+        return html ` <uui-box headline=${this.localize.term('examineManagement_tools')}>
+			<p><umb-localize key="examineManagement_toolsDescription">Tools to manage the ${this.indexName}</umb-localize></p>
 			<uui-button
 				color="danger"
 				look="primary"
 				.state="${this._buttonState}"
 				@click="${this._onRebuildHandler}"
 				.disabled="${this._indexData?.canRebuild ? false : true}"
-				label="Rebuild index">
-				Rebuild
-			</uui-button>
+				label=${this.localize.term('examineManagement_rebuildIndex')}></uui-button>
 		</uui-box>`;
     }
     static { this.styles = [
         UmbTextStyles,
         css `
+			#health-status {
+				display: flex;
+				gap: var(--uui-size-6);
+			}
+
 			:host {
 				display: block;
 			}
@@ -166,13 +198,6 @@ let UmbDashboardExamineIndexElement = class UmbDashboardExamineIndexElement exte
 				padding-right: var(--uui-size-space-5);
 			}
 
-			.positive {
-				color: var(--uui-color-positive);
-			}
-			.danger {
-				color: var(--uui-color-danger);
-			}
-
 			button {
 				background: none;
 				border: none;

package/dist-cms/packages/search/examine-management-dashboard/views/section-view-examine-overview.d.ts

@@ -1,5 +1,6 @@
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 export declare class UmbDashboardExamineOverviewElement extends UmbLitElement {
+    #private;
     private _indexers?;
     private _searchers?;
     private _loadingIndexers;

package/dist-cms/packages/search/examine-management-dashboard/views/section-view-examine-overview.js

@@ -32,19 +32,37 @@ let UmbDashboardExamineOverviewElement = class UmbDashboardExamineOverviewElemen
         this._searchers = data?.items ?? [];
         this._loadingSearchers = false;
     }
+    #renderStatus(status) {
+        switch (status) {
+            case HealthStatusModel.HEALTHY:
+                return html `<umb-icon name="icon-check color-green"></umb-icon>`;
+            case HealthStatusModel.UNHEALTHY:
+                return html `<umb-icon name="icon-error color-red"></umb-icon>`;
+            case HealthStatusModel.REBUILDING:
+                return html `<umb-icon name="icon-time color-yellow"></umb-icon>`;
+            default:
+                return;
+        }
+    }
     render() {
         return html `
-			<uui-box headline="Indexers" class="overview">
+			<uui-box headline=${this.localize.term('examineManagement_indexers')} class="overview">
 				<p>
-					<strong>Manage Examine's indexes</strong><br />
-					Allows you to view the details of each index and provides some tools for managing the indexes
+					<strong><umb-localize key="examineManagement_manageIndexes">Manage Examine's indexes</umb-localize></strong
+					><br />
+					<umb-localize key="examineManagement_manageIndexesDescription"
+						>Allows you to view the details of each index and provides some tools for managing the indexes</umb-localize
+					>
 				</p>
 				${this.renderIndexersList()}
 			</uui-box>
-			<uui-box headline="Searchers">
+			<uui-box headline=${this.localize.term('examineManagement_searchers')}>
 				<p>
-					<strong>Configured Searchers</strong><br />
-					Shows properties and tools for any configured Searcher (i.e. such as a multi-index searcher)
+					<strong><umb-localize key="examineManagement_configuredSearchers">Configured Searchers</umb-localize></strong
+					><br />
+					<umb-localize key="examineManagement_configuredSearchersDescription"
+						>Shows properties and tools for any configured Searcher (i.e. such as a multi-index searcher)</umb-localize
+					>
 				</p>
 				${this.renderSearchersList()}
 			</uui-box>
@@ -59,14 +77,7 @@ let UmbDashboardExamineOverviewElement = class UmbDashboardExamineOverviewElemen
 			${this._indexers.map((index) => {
             return html `
 					<uui-table-row>
-						<uui-table-cell style="width:0px">
-							<uui-icon-essentials>
-							${index.healthStatus === HealthStatusModel.UNHEALTHY
-                ? html `<uui-icon name="wrong" class="danger"></uui-icon>`
-                : html `<uui-icon name="check" class="positive"></uui-icon>`}
-								</uui-icon>
-							</uui-icon-essentials>
-						</uui-table-cell>
+						<uui-table-cell style="width:0px"> ${this.#renderStatus(index.healthStatus.status)} </uui-table-cell>
 						<uui-table-cell>
 							<a href="${window.location.href.replace(/\/+$/, '')}/index/${index.name}">${index.name}</a>
 						</uui-table-cell>

package/dist-cms/packages/search/examine-management-dashboard/views/section-view-examine-searchers.d.ts

@@ -1,7 +1,5 @@
 import type { FieldPresentationModel } from '../../../../external/backend-api/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
-import './modal-views/fields-viewer.element.js';
-import './modal-views/fields-settings-modal.element.js';
 export declare class UmbDashboardExamineSearcherElement extends UmbLitElement {
     #private;
     searcherName: string;
@@ -9,8 +7,9 @@ export declare class UmbDashboardExamineSearcherElement extends UmbLitElement {
     private _exposedFields?;
     private _searchLoading;
     private _searchInput;
-    private _onNameClick;
+    private _workspacePath;
     private _onKeyPress;
+    constructor();
     private _onSearch;
     private _updateFieldFilter;
     render(): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/search/examine-management-dashboard/views/section-view-examine-searchers.js

@@ -4,26 +4,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { UMB_EXAMINE_FIELDS_SETTINGS_MODAL, UMB_EXAMINE_FIELDS_VIEWER_MODAL } from '../modal/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
 import { css, html, nothing, customElement, state, query, property } from '../../../../external/lit/index.js';
-import { UMB_MODAL_MANAGER_CONTEXT, UMB_EXAMINE_FIELDS_SETTINGS_MODAL } from '../../../core/modal/index.js';
+import { UMB_MODAL_MANAGER_CONTEXT, UMB_WORKSPACE_MODAL } from '../../../core/modal/index.js';
+import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
 import { SearcherService } from '../../../../external/backend-api/index.js';
 import { UmbLitElement, umbFocus } from '../../../core/lit-element/index.js';
 import { tryExecuteAndNotify } from '../../../core/resources/index.js';
-import './modal-views/fields-viewer.element.js';
-import './modal-views/fields-settings-modal.element.js';
 let UmbDashboardExamineSearcherElement = class UmbDashboardExamineSearcherElement extends UmbLitElement {
-    constructor() {
-        super(...arguments);
-        this._searchLoading = false;
-    }
-    _onNameClick() {
-        // TODO:
-        alert('TODO: Open workspace for ' + this.searcherName);
-    }
     _onKeyPress(e) {
         e.key == 'Enter' ? this._onSearch() : undefined;
     }
+    #entityType;
+    constructor() {
+        super();
+        this._searchLoading = false;
+        this._workspacePath = 'aa';
+        this.#entityType = '';
+        new UmbModalRouteRegistrationController(this, UMB_WORKSPACE_MODAL)
+            .addAdditionalPath(':entityType')
+            .onSetup((routingInfo) => {
+            return { data: { entityType: routingInfo.entityType, preset: {} } };
+        })
+            .observeRouteBuilder((routeBuilder) => {
+            this._workspacePath = routeBuilder({ entityType: this.#entityType });
+        });
+    }
     async _onSearch() {
         if (!this._searchInput.value.length)
             return;
@@ -63,34 +70,43 @@ let UmbDashboardExamineSearcherElement = class UmbDashboardExamineSearcherElemen
         const modalContext = modalManager.open(this, UMB_EXAMINE_FIELDS_SETTINGS_MODAL, {
             value: { fields: this._exposedFields ?? [] },
         });
-        modalContext?.onSubmit().then((value) => {
-            this._exposedFields = value.fields;
-        });
+        await modalContext.onSubmit().catch(() => undefined);
+        const value = modalContext.getValue();
+        this._exposedFields = value?.fields;
     }
     async #onFieldViewClick(rowData) {
         const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
-        modalManager.open(this, 'umb-modal-element-fields-viewer', {
+        const modalContext = modalManager.open(this, UMB_EXAMINE_FIELDS_VIEWER_MODAL, {
             modal: {
                 type: 'sidebar',
                 size: 'medium',
             },
-            data: { ...rowData, name: this.getSearchResultNodeName(rowData) },
+            data: { searchResult: rowData, name: this.getSearchResultNodeName(rowData) },
         });
+        await modalContext.onSubmit().catch(() => undefined);
     }
     render() {
         return html `
-			<uui-box headline="Search">
-				<p>Search the ${this.searcherName} and view the results</p>
+			<uui-box headline=${this.localize.term('general_search')}>
+				<p>
+					<umb-localize key="examineManagement_searchDescription"
+						>Search the ${this.searcherName} and view the results</umb-localize
+					>
+				</p>
 				<div class="flex">
 					<uui-input
 						type="search"
 						id="search-input"
-						placeholder="Type to filter..."
-						label="Type to filter"
+						placeholder=${this.localize.term('placeholders_filter')}
+						label=${this.localize.term('placeholders_filter')}
 						@keypress=${this._onKeyPress}
 						${umbFocus()}>
 					</uui-input>
-					<uui-button color="positive" look="primary" label="Search" @click="${this._onSearch}"> Search </uui-button>
+					<uui-button
+						color="positive"
+						look="primary"
+						label=${this.localize.term('general_search')}
+						@click="${this._onSearch}"></uui-button>
 				</div>
 				${this.renderSearchResults()}
 			</uui-box>
@@ -101,30 +117,44 @@ let UmbDashboardExamineSearcherElement = class UmbDashboardExamineSearcherElemen
         const nodeNameField = searchResult.fields?.find((field) => field.name?.toUpperCase() === 'NODENAME');
         return nodeNameField?.values?.join(', ') ?? '';
     }
+    #getEntityTypeFromIndexType(indexType) {
+        switch (indexType) {
+            case 'content':
+                return 'document';
+            default:
+                return indexType;
+        }
+    }
     renderSearchResults() {
         if (this._searchLoading)
             return html `<uui-loader></uui-loader>`;
         if (!this._searchResults)
             return nothing;
         if (!this._searchResults.length) {
-            return html `<p>No results found</p>`;
+            return html `<p>${this.localize.term('examineManagement_noResults')}</p>`;
         }
         return html `<div class="table-container">
 			<uui-scroll-container>
 				<uui-table class="search">
 					<uui-table-head>
 						<uui-table-head-cell style="width:0">Score</uui-table-head-cell>
-						<uui-table-head-cell style="width:0">Id</uui-table-head-cell>
-						<uui-table-head-cell>Name</uui-table-head-cell>
-						<uui-table-head-cell>Fields</uui-table-head-cell>
+						<uui-table-head-cell style="width:0">${this.localize.term('general_id')}</uui-table-head-cell>
+						<uui-table-head-cell>${this.localize.term('general_name')}</uui-table-head-cell>
+						<uui-table-head-cell>${this.localize.term('examineManagement_fields')}</uui-table-head-cell>
 						${this.renderHeadCells()}
 					</uui-table-head>
 					${this._searchResults?.map((rowData) => {
+            const indexType = rowData.fields?.find((field) => field.name === '__IndexType')?.values?.join(', ') ?? '';
+            this.#entityType = this.#getEntityTypeFromIndexType(indexType);
+            const unique = rowData.fields?.find((field) => field.name === '__Key')?.values?.join(', ') ?? '';
             return html `<uui-table-row>
 							<uui-table-cell> ${rowData.score} </uui-table-cell>
 							<uui-table-cell> ${rowData.id} </uui-table-cell>
 							<uui-table-cell>
-								<uui-button look="secondary" label="Open workspace for this document" @click="${this._onNameClick}">
+								<uui-button
+									look="secondary"
+									label=${this.localize.term('actions_editContent')}
+									href=${this._workspacePath + this.#entityType + '/edit/' + unique}>
 									${this.getSearchResultNodeName(rowData)}
 								</uui-button>
 							</uui-table-cell>
@@ -132,9 +162,10 @@ let UmbDashboardExamineSearcherElement = class UmbDashboardExamineSearcherElemen
 								<uui-button
 									class="bright"
 									look="secondary"
-									label="Open sidebar to see all fields"
+									label=${this.localize.term('examineManagement_fieldValues')}
 									@click=${() => this.#onFieldViewClick(rowData)}>
-									${rowData.fields ? Object.keys(rowData.fields).length : ''} fields
+									${rowData.fields ? Object.keys(rowData.fields).length : ''}
+									${this.localize.term('examineManagement_fields')}
 								</uui-button>
 							</uui-table-cell>
 							${rowData.fields ? this.renderBodyCells(rowData.fields) : ''}
@@ -159,7 +190,7 @@ let UmbDashboardExamineSearcherElement = class UmbDashboardExamineSearcherElemen
 							<span>${field.name}</span>
 							<uui-button
 								look="secondary"
-								label="Close field ${field.name}"
+								label="${this.localize.term('actions_remove')} ${field.name}"
 								compact
 								@click="${() => {
                     this._exposedFields = this._exposedFields?.map((f) => {
@@ -277,6 +308,9 @@ __decorate([
 __decorate([
     query('#search-input')
 ], UmbDashboardExamineSearcherElement.prototype, "_searchInput", void 0);
+__decorate([
+    state()
+], UmbDashboardExamineSearcherElement.prototype, "_workspacePath", void 0);
 UmbDashboardExamineSearcherElement = __decorate([
     customElement('umb-dashboard-examine-searcher')
 ], UmbDashboardExamineSearcherElement);

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

@@ -1,2 +1,3 @@
 import type { ManifestTypes } from '../core/extension-registry/index.js';
+import './examine-management-dashboard/index.js';
 export declare const manifests: Array<ManifestTypes>;

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

@@ -1,3 +1,5 @@
+import { manifests as examineManifests } from './examine-management-dashboard/manifests.js';
+import './examine-management-dashboard/index.js';
 export const manifests = [
     {
         type: 'headerApp',
@@ -35,10 +37,5 @@ export const manifests = [
             },
         ],
     },
-    {
-        type: 'modal',
-        alias: 'Umb.Modal.ExamineFieldsSettings',
-        name: 'Examine Field Settings Modal',
-        js: () => import('./examine-management-dashboard/views/modal-views/fields-settings-modal.element.js'),
-    },
+    ...examineManifests,
 ];

package/dist-cms/packages/search/search-modal/search-modal.element.d.ts

@@ -19,6 +19,7 @@ export declare class UmbSearchModalElement extends UmbLitElement {
     _loading: boolean;
     constructor();
     connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }

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

@@ -22,15 +22,28 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
         this._loading = false;
         this.#searchItemNavIndex = 0;
         this.#inputTimerAmount = 300;
+        this.#onDocumentClick = (event) => {
+            const path = event.composedPath();
+            if (path.includes(this))
+                return;
+            this.modalContext?.reject();
+        };
         this.#observeProviders();
     }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.#onKeydown);
+        document.addEventListener('click', this.#onDocumentClick); //TODO: Temp solution to close the modal on outside click. We need to look into a generic solution for this.
         requestAnimationFrame(() => {
             this.#focusInput();
         });
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.#onKeydown);
+        document.removeEventListener('click', this.#onDocumentClick);
+    }
+    #onDocumentClick;
     #observeProviders() {
         new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'searchProvider', null, async (providers) => {
             const searchProviders = [];
@@ -214,7 +227,7 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
 						@blur=${() => this.#setShowFakeCursor(true)}
 						@focus=${() => this.#setShowFakeCursor(false)}
 						type="text"
-						placeholder="Search..."
+						placeholder=${this.localize.term('placeholders_search')}
 						autocomplete="off" />
 				</div>
 			</div>
@@ -222,7 +235,7 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
 			${this.#renderSearchTags()}
 			${this._search
             ? html `<div id="main">${this._searchResults.length > 0 ? this.#renderResults() : this.#renderNoResults()}</div>`
-            : nothing}
+            : this.#renderNavigationTips()}
 		`;
     }
     #renderSearchIcon() {
@@ -263,6 +276,43 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
     #renderNoResults() {
         return this._loading ? nothing : html `<div id="no-results">${this.localize.term('general_searchNoResult')}</div>`;
     }
+    #renderNavigationTips() {
+        return html `<div id="navigation-tips">
+			<div class="navigation-tips-key" style="grid-column: span 2;">Tab</div>
+			<span>${this.localize.term('globalSearch_navigateSearchProviders')}</span>
+			<div class="navigation-tips-key">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round">
+					<path d="m5 12 7-7 7 7" />
+					<path d="M12 19V5" />
+				</svg>
+			</div>
+			<div class="navigation-tips-key">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="18"
+					height="18"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round">
+					<path d="M12 5v14" />
+					<path d="m19 12-7 7-7-7" />
+				</svg>
+			</div>
+			<span>${this.localize.term('globalSearch_navigateSearchResults')}</span>
+		</div>`;
+    }
     static { this.styles = [
         UmbTextStyles,
         css `
@@ -278,6 +328,29 @@ let UmbSearchModalElement = class UmbSearchModalElement extends UmbLitElement {
 				font-size: 1rem;
 				padding-bottom: var(--uui-size-space-2);
 			}
+			#navigation-tips {
+				display: grid;
+				grid-template-columns: 50px 50px auto;
+				column-gap: var(--uui-size-space-3);
+				row-gap: var(--uui-size-space-4);
+				align-items: center;
+				color: var(--uui-color-border-emphasis);
+				margin-top: var(--uui-size-layout-3);
+				margin-inline: auto;
+			}
+			.navigation-tips-key {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: var(--uui-border-radius);
+				border: 1px solid var(--uui-color-border);
+				height: 36px;
+				font-size: 0.9rem;
+				font-weight: bold;
+			}
+			#navigation-tips .navigation-tips-key + span {
+				margin-left: var(--uui-size-space-2);
+			}
 			#top {
 				background-color: var(--uui-color-surface);
 				display: flex;

package/dist-cms/packages/search/umb-search-header-app.element.d.ts

@@ -1,11 +1,8 @@
-import type { CSSResultGroup } from '../../external/lit/index.js';
-import { UmbLitElement } from '../core/lit-element/index.js';
-export declare class UmbSearchHeaderAppElement extends UmbLitElement {
+import { UmbHeaderAppButtonElement } from '../core/components/index.js';
+export declare class UmbSearchHeaderAppElement extends UmbHeaderAppButtonElement {
     #private;
-    private _modalContext?;
-    constructor();
     render(): import("lit-html").TemplateResult<1>;
-    static styles: CSSResultGroup;
+    static styles: import("@lit/reactive-element/css-tag.js").CSSResultGroup;
 }
 export default UmbSearchHeaderAppElement;
 declare global {

package/dist-cms/packages/search/umb-search-header-app.element.js

@@ -5,19 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_SEARCH_MODAL } from './search-modal/search-modal.token.js';
-import { UmbTextStyles } from '../core/style/index.js';
-import { css, html, customElement } from '../../external/lit/index.js';
+import { html, customElement } from '../../external/lit/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT } from '../core/modal/index.js';
-import { UmbLitElement } from '../core/lit-element/index.js';
-let UmbSearchHeaderAppElement = class UmbSearchHeaderAppElement extends UmbLitElement {
-    constructor() {
-        super();
-        this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (_instance) => {
-            this._modalContext = _instance;
-        });
-    }
-    #onSearchClick() {
-        this._modalContext?.open(this, UMB_SEARCH_MODAL);
+import { UmbHeaderAppButtonElement } from '../core/components/index.js';
+let UmbSearchHeaderAppElement = class UmbSearchHeaderAppElement extends UmbHeaderAppButtonElement {
+    async #onSearchClick() {
+        const context = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+        context.open(this, UMB_SEARCH_MODAL);
     }
     render() {
         return html `
@@ -26,15 +20,7 @@ let UmbSearchHeaderAppElement = class UmbSearchHeaderAppElement extends UmbLitEl
 			</uui-button>
 		`;
     }
-    static { this.styles = [
-        UmbTextStyles,
-        css `
-			uui-button {
-				font-size: 18px;
-				--uui-button-background-color: transparent;
-			}
-		`,
-    ]; }
+    static { this.styles = UmbHeaderAppButtonElement.styles; }
 };
 UmbSearchHeaderAppElement = __decorate([
     customElement('umb-search-header-app')