POC: Dynamic Dashboards / Dashboard apps

src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard.element.ts

@@ -3,8 +3,8 @@ import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 import type { UmbRoute } from '@umbraco-cms/backoffice/router';
 
-@customElement('umb-dashboard')
-export class UmbDashboardElement extends UmbElementMixin(LitElement) {
+@customElement('umb-example-dashboard')
+export class UmbExampleDashboardElement extends UmbElementMixin(LitElement) {
 	@state()
 	private _routes: UmbRoute[] = [
 		{
@@ -39,10 +39,10 @@ export class UmbDashboardElement extends UmbElementMixin(LitElement) {
 	static override styles = [UmbTextStyles, css``];
 }
 
-export default UmbDashboardElement;
+export default UmbExampleDashboardElement;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-dashboard': UmbDashboardElement;
+		'umb-example-dashboard': UmbExampleDashboardElement;
 	}
 }

src/Umbraco.Web.UI.Client/examples/modal-routed/dashboard2.element.ts

@@ -2,8 +2,8 @@ import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/ex
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
 
-@customElement('umb-dashboard2')
-export class UmbDashboard2Element extends UmbElementMixin(LitElement) {
+@customElement('umb-example-dashboard2')
+export class UmbExampleDashboard2Element extends UmbElementMixin(LitElement) {
 	constructor() {
 		super();
 	}
@@ -25,10 +25,10 @@ export class UmbDashboard2Element extends UmbElementMixin(LitElement) {
 	static override styles = [UmbTextStyles, css``];
 }
 
-export default UmbDashboard2Element;
+export default UmbExampleDashboard2Element;
 
 declare global {
 	interface HTMLElementTagNameMap {
-		'umb-dashboard2': UmbDashboard2Element;
+		'umb-example-dashboard2': UmbExampleDashboard2Element;
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/README.md

@@ -0,0 +1 @@
+The files in this folder is positioned here temporarily. They will be moved to the correct location later.

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/certification/certification-intro-dashboard-app.element.ts

@@ -0,0 +1,50 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type {
+	ManifestDashboardApp,
+	UmbDashboardAppElement,
+	UmbDashboardAppSize,
+} from '@umbraco-cms/backoffice/dashboard';
+
+@customElement('umb-certification-intro-dashboard-app')
+export class UmbCertificationIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
+	@property({ type: Object })
+	manifest?: ManifestDashboardApp;
+
+	@property({ type: String })
+	size?: UmbDashboardAppSize;
+
+	override render() {
+		return html`
+			<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_trainingHeader')}>
+				<p>
+					<umb-localize key="settingsDashboard_trainingDescription"></umb-localize>
+				</p>
+				<uui-button
+					look="outline"
+					href="https://umbraco.com/training/"
+					label=${this.localize.term('settingsDashboard_getCertified')}
+					target="_blank"
+					rel="noopener"></uui-button>
+			</umb-dashboard-app-layout>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			p {
+				margin-top: 0;
+			}
+		`,
+	];
+}
+
+export { UmbCertificationIntroDashboardAppElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		['umb-certification-intro-dashboard-app']: UmbCertificationIntroDashboardAppElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/certification/manifests.ts

@@ -0,0 +1,15 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'dashboardApp',
+		alias: 'Umb.DashboardApp.CertificationIntro',
+		name: 'Certification Intro Dashboard App',
+		weight: 100,
+		element: () => import('./certification-intro-dashboard-app.element.js'),
+		meta: {
+			headline: '#settingsDashboard_trainingHeader',
+			size: 'small',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/community/community-intro-dashboard-app.element.ts

@@ -0,0 +1,57 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type {
+	ManifestDashboardApp,
+	UmbDashboardAppElement,
+	UmbDashboardAppSize,
+} from '@umbraco-cms/backoffice/dashboard';
+
+const elementName = 'umb-community-intro-dashboard-app';
+@customElement(elementName)
+export class UmbCommunityIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
+	@property({ type: Object })
+	manifest?: ManifestDashboardApp;
+
+	@property({ type: String })
+	size?: UmbDashboardAppSize;
+
+	override render() {
+		return html`
+			<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_communityHeader')}>
+				<p>
+					<umb-localize key="settingsDashboard_communityDescription"></umb-localize>
+				</p>
+				<uui-button
+					look="outline"
+					href="https://our.umbraco.com/forum"
+					label=${this.localize.term('settingsDashboard_goForum')}
+					target="_blank"
+					rel="noopener"></uui-button>
+				<uui-button
+					look="outline"
+					href="https://discord.umbraco.com"
+					label=${this.localize.term('settingsDashboard_chatWithCommunity')}
+					target="_blank"
+					rel="noopener"></uui-button>
+			</umb-dashboard-app-layout>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			p {
+				margin-top: 0;
+			}
+		`,
+	];
+}
+
+export { UmbCommunityIntroDashboardAppElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbCommunityIntroDashboardAppElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/community/manifests.ts

@@ -0,0 +1,15 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'dashboardApp',
+		alias: 'Umb.DashboardApp.CommunityIntro',
+		name: 'Community Intro Dashboard App',
+		weight: 200,
+		element: () => import('./community-intro-dashboard-app.element.js'),
+		meta: {
+			headline: '#settingsDashboard_communityHeader',
+			size: 'small',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/documentation/documentation-intro-dashboard-app.element.ts

@@ -0,0 +1,51 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type {
+	ManifestDashboardApp,
+	UmbDashboardAppElement,
+	UmbDashboardAppSize,
+} from '@umbraco-cms/backoffice/dashboard';
+
+const elementName = 'umb-documentation-intro-dashboard-app';
+@customElement(elementName)
+export class UmbDocumentationIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
+	@property({ type: Object })
+	manifest?: ManifestDashboardApp;
+
+	@property({ type: String })
+	size?: UmbDashboardAppSize;
+
+	override render() {
+		return html`
+			<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_documentationHeader')}>
+				<p>
+					<umb-localize key="settingsDashboard_documentationDescription"></umb-localize>
+				</p>
+				<uui-button
+					look="outline"
+					href="https://docs.umbraco.com/umbraco-cms/umbraco-cms"
+					label=${this.localize.term('settingsDashboard_getHelp')}
+					target="_blank"
+					rel="noopener"></uui-button>
+			</umb-dashboard-app-layout>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			p {
+				margin-top: 0;
+			}
+		`,
+	];
+}
+
+export { UmbDocumentationIntroDashboardAppElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbDocumentationIntroDashboardAppElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/documentation/manifests.ts

@@ -0,0 +1,26 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'dashboardApp',
+		alias: 'Umb.DashboardApp.DocumentationIntro',
+		name: 'Documentation Intro Dashboard App',
+		weight: 300,
+		element: () => import('./documentation-intro-dashboard-app.element.js'),
+		meta: {
+			headline: '#settingsDashboard_documentationHeader',
+			size: 'small',
+		},
+	},
+	{
+		type: 'dashboardApp',
+		alias: 'Umb.DashboardApp.VideosIntro',
+		name: 'Videos Intro Dashboard App',
+		weight: 400,
+		element: () => import('./videos-intro-dashboard-app.element.js'),
+		meta: {
+			headline: '#settingsDashboard_videosHeader',
+			size: 'large',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/documentation/videos-intro-dashboard-app.element.ts

@@ -0,0 +1,51 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, css, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import type {
+	ManifestDashboardApp,
+	UmbDashboardAppElement,
+	UmbDashboardAppSize,
+} from '@umbraco-cms/backoffice/dashboard';
+
+const elementName = 'umb-videos-intro-dashboard-app';
+@customElement(elementName)
+export class UmbVideosIntroDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
+	@property({ type: Object })
+	manifest?: ManifestDashboardApp;
+
+	@property({ type: String })
+	size?: UmbDashboardAppSize;
+
+	override render() {
+		return html`
+			<umb-dashboard-app-layout headline=${this.localize.string('#settingsDashboard_videosHeader')}>
+				<p>
+					<umb-localize key="settingsDashboard_videosDescription"></umb-localize>
+				</p>
+				<uui-button
+					look="outline"
+					href="https://www.youtube.com/c/UmbracoLearningBase"
+					label=${this.localize.term('settingsDashboard_watchVideos')}
+					target="_blank"
+					rel="noopener"></uui-button>
+			</umb-dashboard-app-layout>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			p {
+				margin-top: 0;
+			}
+		`,
+	];
+}
+
+export { UmbVideosIntroDashboardAppElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbVideosIntroDashboardAppElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/manifests.ts

@@ -0,0 +1,12 @@
+import { manifests as communityManifests } from './community/manifests.js';
+import { manifests as documentationManifests } from './documentation/manifests.js';
+import { manifests as supportManifests } from './support/manifests.js';
+import { manifests as trainingManifests } from './certification/manifests.js';
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	...communityManifests,
+	...documentationManifests,
+	...supportManifests,
+	...trainingManifests,
+];

src/Umbraco.Web.UI.Client/src/packages/core/_temp-poc-location/support/manifests.ts

@@ -0,0 +1,15 @@
+import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<UmbExtensionManifest | UmbExtensionManifestKind> = [
+	{
+		type: 'dashboardApp',
+		alias: 'Umb.DashboardApp.SupportIntro',
+		name: 'Support Intro Dashboard App',
+		weight: 500,
+		element: () => import('./support-intro-dashboard-app.element.js'),
+		meta: {
+			headline: '#settingsDashboard_supportHeader',
+			size: 'small',
+		},
+	},
+];