Merge pull request #2260 from umbraco/feature/sysinfo

Feature: Show system information

Author: iOvergaard

package.json

@@ -83,6 +83,7 @@
 		"./store": "./dist-cms/packages/core/store/index.js",
 		"./style": "./dist-cms/packages/core/style/index.js",
 		"./stylesheet": "./dist-cms/packages/templating/stylesheets/index.js",
+		"./sysinfo": "./dist-cms/packages/sysinfo/index.js",
 		"./tags": "./dist-cms/packages/tags/index.js",
 		"./template": "./dist-cms/packages/templating/templates/index.js",
 		"./temporary-file": "./dist-cms/packages/core/temporary-file/index.js",

src/apps/backoffice/backoffice.element.ts

@@ -33,6 +33,7 @@ const CORE_PACKAGES = [
 	import('../../packages/search/umbraco-package.js'),
 	import('../../packages/settings/umbraco-package.js'),
 	import('../../packages/static-file/umbraco-package.js'),
+	import('../../packages/sysinfo/umbraco-package.js'),
 	import('../../packages/tags/umbraco-package.js'),
 	import('../../packages/telemetry/umbraco-package.js'),
 	import('../../packages/templating/umbraco-package.js'),

src/apps/backoffice/components/backoffice-header-logo.element.ts

@@ -1,13 +1,19 @@
+import { isCurrentUserAnAdmin } from '@umbraco-cms/backoffice/current-user';
 import { UMB_BACKOFFICE_CONTEXT } from '../backoffice.context.js';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
+import { UMB_SYSINFO_MODAL } from '@umbraco-cms/backoffice/sysinfo';
 
 @customElement('umb-backoffice-header-logo')
 export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 	@state()
 	private _version?: string;
 
+	@state()
+	private _isUserAdmin = false;
+
 	constructor() {
 		super();
 
@@ -21,6 +27,12 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 				'_observeVersion',
 			);
 		});
+
+		this.#isAdmin();
+	}
+
+	async #isAdmin() {
+		this._isUserAdmin = await isCurrentUserAnAdmin(this);
 	}
 
 	override render() {
@@ -31,15 +43,35 @@ export class UmbBackofficeHeaderLogoElement extends UmbLitElement {
 			<uui-popover-container id="logo-popover" placement="bottom-start">
 				<umb-popover-layout>
 					<div id="modal">
-						<img src="/umbraco/backoffice/assets/umbraco_logo_blue.svg" alt="Umbraco" loading="lazy" />
+						<img
+							src="/umbraco/backoffice/assets/umbraco_logo_blue.svg"
+							alt="Umbraco"
+							width="300"
+							height="82"
+							loading="lazy" />
 						<span>${this._version}</span>
 						<a href="https://umbraco.com" target="_blank" rel="noopener">Umbraco.com</a>
+
+						${this._isUserAdmin
+							? html`<uui-button
+									@click=${this.#openSystemInformation}
+									look="secondary"
+									label="System information"></uui-button>`
+							: ''}
 					</div>
 				</umb-popover-layout>
 			</uui-popover-container>
 		`;
 	}
 
+	async #openSystemInformation() {
+		const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
+		modalManager
+			.open(this, UMB_SYSINFO_MODAL)
+			.onSubmit()
+			.catch(() => {});
+	}
+
 	static override styles = [
 		UmbTextStyles,
 		css`

src/assets/lang/da-dk.ts

@@ -2223,6 +2223,7 @@ export default {
 		labelForArrayOfItems: 'Samling af %0%',
 		labelForRemoveAllEntries: 'Fjern alle elementer',
 		labelForClearClipboard: 'Ryd udklipsholder',
+		labelForCopyToClipboard: 'Kopier til udklipsholder',
 	},
 	propertyActions: {
 		tooltipForPropertyActionsMenu: 'Åben egenskabshandlinger',

src/assets/lang/de-de.ts

@@ -1967,6 +1967,14 @@ export default {
 		selectAllLogLevelFilters: 'Wählen Sie Alle',
 		deselectAllLogLevelFilters: 'Alle abwählen',
 	},
+	clipboard: {
+		labelForCopyAllEntries: '%0% kopieren',
+		labelForArrayOfItemsFrom: '%0% von %1%',
+		labelForArrayOfItems: 'Sammlung von %0%',
+		labelForRemoveAllEntries: 'Alle Elemente entfernen',
+		labelForClearClipboard: 'Zwischenablage löschen',
+		labelForCopyToClipboard: 'Kopieren in Zwischenablage',
+	},
 	formsDashboard: {
 		formsHeadline: 'Umbraco Forms',
 		formsDescription:

src/assets/lang/en-us.ts

@@ -2288,6 +2288,7 @@ export default {
 		labelForArrayOfItems: 'Collection of %0%',
 		labelForRemoveAllEntries: 'Remove all items',
 		labelForClearClipboard: 'Clear clipboard',
+		labelForCopyToClipboard: 'Copy to clipboard',
 	},
 	propertyActions: {
 		tooltipForPropertyActionsMenu: 'Open Property Actions',

src/assets/lang/en.ts

@@ -2354,6 +2354,7 @@ export default {
 		labelForArrayOfItems: 'Collection of %0%',
 		labelForRemoveAllEntries: 'Remove all items',
 		labelForClearClipboard: 'Clear clipboard',
+		labelForCopyToClipboard: 'Copy to clipboard',
 	},
 	propertyActions: {
 		tooltipForPropertyActionsMenu: 'Open Property Actions',

src/mocks/browser-handlers.ts

@@ -72,7 +72,7 @@ const handlers = [
 	...userGroupsHandlers,
 	...userHandlers,
 	...documentBlueprintHandlers,
-	serverHandlers.serverInformationHandler,
+	...serverHandlers.serverInformationHandlers,
 ];
 
 switch (import.meta.env.VITE_UMBRACO_INSTALL_STATUS) {

src/mocks/e2e-handlers.ts

@@ -18,7 +18,7 @@ import { handlers as configHandlers } from './handlers/config.handlers.js';
 
 export const handlers = [
 	serverHandlers.serverRunningHandler,
-	serverHandlers.serverInformationHandler,
+	...serverHandlers.serverInformationHandlers,
 	...manifestsHandlers.manifestEmptyHandlers,
 	...installHandlers,
 	...upgradeHandlers,

src/mocks/handlers/server.handlers.ts

@@ -1,9 +1,11 @@
 const { rest } = window.MockServiceWorker;
-import type {
-	ServerStatusResponseModel,
-	ServerInformationResponseModel,
+import {
+	type ServerStatusResponseModel,
+	type ServerInformationResponseModel,
+	type ServerTroubleshootingResponseModel,
+	RuntimeLevelModel,
+	RuntimeModeModel,
 } from '@umbraco-cms/backoffice/external/backend-api';
-import { RuntimeLevelModel, RuntimeModeModel } from '@umbraco-cms/backoffice/external/backend-api';
 import { umbracoPath } from '@umbraco-cms/backoffice/utils';
 
 export const serverRunningHandler = rest.get(umbracoPath('/server/status'), (_req, res, ctx) => {
@@ -36,15 +38,30 @@ export const serverMustUpgradeHandler = rest.get(umbracoPath('/server/status'),
 	);
 });
 
-export const serverInformationHandler = rest.get(umbracoPath('/server/information'), (_req, res, ctx) => {
-	return res(
-		// Respond with a 200 status code
-		ctx.status(200),
-		ctx.json<ServerInformationResponseModel>({
-			version: '14.0.0-preview004',
-			assemblyVersion: '14.0.0-preview004',
-			baseUtcOffset: '01:00:00',
-			runtimeMode: RuntimeModeModel.BACKOFFICE_DEVELOPMENT,
-		}),
-	);
-});
+export const serverInformationHandlers = [
+	rest.get(umbracoPath('/server/information'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<ServerInformationResponseModel>({
+				version: '14.0.0-preview004',
+				assemblyVersion: '14.0.0-preview004',
+				baseUtcOffset: '01:00:00',
+				runtimeMode: RuntimeModeModel.BACKOFFICE_DEVELOPMENT,
+			}),
+		);
+	}),
+	rest.get(umbracoPath('/server/troubleshooting'), (_req, res, ctx) => {
+		return res(
+			// Respond with a 200 status code
+			ctx.status(200),
+			ctx.json<ServerTroubleshootingResponseModel>({
+				items: [
+					{ name: 'Umbraco base url', data: location.origin },
+					{ name: 'Mocked server', data: 'true' },
+					{ name: 'Umbraco version', data: '14.0.0-preview004' },
+				],
+			}),
+		);
+	}),
+];