diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/models-builder/dashboard-models-builder.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/models-builder/dashboard-models-builder.element.ts index ddf8490982..a0e53dba05 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/models-builder/dashboard-models-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/dashboards/models-builder/dashboard-models-builder.element.ts @@ -11,10 +11,11 @@ import { CreatedResult, ModelsBuilder, ModelsBuilderResource, + ModelsMode, ProblemDetails, } from '@umbraco-cms/backend-api'; -import 'src/core/utils/errorbox'; +import 'src/core/utils/code-block'; @customElement('umb-dashboard-models-builder') export class UmbDashboardModelsBuilderElement extends UmbContextConsumerMixin(LitElement) { @@ -24,17 +25,7 @@ export class UmbDashboardModelsBuilderElement extends UmbContextConsumerMixin(Li .headline { display: flex; justify-content: space-between; - align-items: center; - } - - p { - margin-block-start: 0; - margin-block-end: var(--uui-size-space-4); - } - - .models-description p { - padding-bottom: var(--uui-size-space-1); - margin-bottom: var(--uui-size-space-1); + align-items: flex-start; } .models-description ul { @@ -43,11 +34,19 @@ export class UmbDashboardModelsBuilderElement extends UmbContextConsumerMixin(Li padding-left: var(--uui-size-layout-1); } + span.out-of-date { + display: block; + padding-block-end: var(--uui-size-space-4); + } + .error { - padding-top: var(--uui-size-space-5); font-weight: bold; color: var(--uui-color-danger); } + + p.models-actions { + margin-bottom: 0; + } `, ]; @@ -92,6 +91,7 @@ export class UmbDashboardModelsBuilderElement extends UmbContextConsumerMixin(Li try { const createdResult = await ModelsBuilderResource.postModelsBuilderBuild(); this._createdResult = createdResult; + this._getDashboardData(); return true; } catch (e) { if (e instanceof ApiError) { @@ -122,37 +122,67 @@ export class UmbDashboardModelsBuilderElement extends UmbContextConsumerMixin(Li render() { return html` -
- Models Builder +
+

Models Builder

Reload

Version: ${this._modelsBuilder?.version}

-
-

${unsafeHTML(this._modelsBuilder?.modelsNamespace)}

+

ModelsBuilder is enabled with the following configuration:

+
    + ${this._modelsBuilder?.mode + ? html`
  • + The ModelsMode is '${this._modelsBuilder.mode}'. ${this.renderModelsMode()} +
    • ` + : nothing} + ${this._modelsBuilder?.modelsNamespace + ? html`
  • The models namespace is ${this._modelsBuilder.modelsNamespace}.
    • ` + : nothing} + ${this._modelsBuilder?.trackingOutOfDateModels === true + ? html`
  • Tracking of out-of-date models is enabled.
    • ` + : this._modelsBuilder?.trackingOutOfDateModels === false + ? html`
  • Tracking of out-of-date models is not enabled.
    • ` + : nothing} +
- - ${this._modelsBuilder?.outOfDateModels === true - ? html`

Models are out of date

` - : nothing} - ${this._modelsBuilder?.canGenerate === true - ? html` - Generate models - ` - : nothing} +

+ ${this._modelsBuilder?.outOfDateModels === true + ? html`Models are out-of-date` + : nothing} + ${this._modelsBuilder?.canGenerate === true + ? html` + Generate models + ` + : nothing} +

${this._modelsBuilder?.lastError ? html`

Last generation failed with the following error:

- ${this._modelsBuilder.lastError}` + ${this._modelsBuilder.lastError}` : nothing} `; } + + renderModelsMode() { + switch (this._modelsBuilder?.mode) { + case ModelsMode.IN_MEMORY_AUTO: + return 'Strongly typed models are re-generated on startup and anytime schema changes (i.e. Content Type) are made. No recompilation necessary but the generated models are not available to code outside of Razor.'; + case ModelsMode.SOURCE_CODE_MANUAL: + return 'Strongly typed models are generated on demand. Recompilation is necessary and models are available to all CSharp code.'; + case ModelsMode.SOURCE_CODE_AUTO: + return 'Strong typed models are generated on demand and anytime schema changes (i.e. Content Type) are made. Recompilation is necessary and models are available to all CSharp code.'; + case ModelsMode.NOTHING: + return 'Strongly typed models are not generated. All content and cache will operate from instance of IPublishedContent only.'; + default: + return; + } + } } declare global { diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/modelsbuilder.handlers.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/modelsbuilder.handlers.ts index 4e54347ecd..4e54aad1bb 100644 --- a/src/Umbraco.Web.UI.Client/src/core/mocks/domains/modelsbuilder.handlers.ts +++ b/src/Umbraco.Web.UI.Client/src/core/mocks/domains/modelsbuilder.handlers.ts @@ -1,11 +1,12 @@ import { rest } from 'msw'; import { umbracoPath } from '@umbraco-cms/utils'; -import { CreatedResult, ModelsBuilder, OutOfDateStatus } from '@umbraco-cms/backend-api'; +import { CreatedResult, ModelsBuilder, ModelsMode, OutOfDateStatus } from '@umbraco-cms/backend-api'; export const handlers = [ rest.post(umbracoPath('/models-builder/build'), async (_req, res, ctx) => { await new Promise((resolve) => setTimeout(resolve, (Math.random() + 1) * 1000)); // simulate a delay of 1-2 seconds + model = modelAfterBuild; return res( // Respond with a 200 status code ctx.status(200), @@ -14,30 +15,7 @@ export const handlers = [ }), rest.get(umbracoPath('/models-builder/dashboard'), async (_req, res, ctx) => { - return res( - ctx.status(200), - ctx.json({ - mode: undefined, - canGenerate: true, - outOfDateModels: true, - lastError: `[plugin:vite:import-analysis] Missing "./directives/unsafe-htl.js" export in "lit" package -C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/src/backoffice/dashboards/models-builder/dashboard-models-builder.element.ts -at bail (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:32675:8) -at resolve (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:32752:10) -at resolveExports (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34128:12) -at resolveDeepImport (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34146:31) -at tryNodeResolve (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33838:20) -at Context.resolveId (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33598:28) -at async Object.resolveId (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40156:32) -at async TransformContext.resolve (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39921:23) -at async normalizeUrl (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36831:34) -at async TransformContext.transform (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vit`, - version: '13.0.0', - modelsNamespace: - "

ModelsBuilder is enabled, with the following configuration:

  • The models mode is 'InMemoryAuto'. Strongly typed models are re-generated on startup and anytime schema changes (i.e. Content Type) are made. No recompilation necessary but the generated models are not available to code outside of Razor.
  • Models namespace is Umbraco.Cms.Web.Common.PublishedModels.
  • Tracking of out-of-date models is not enabled.
", - trackingOutOfDateModels: true, - }) - ); + return res(ctx.status(200), ctx.json(model)); }), rest.get(umbracoPath('/models-builder/status'), async (_req, res, ctx) => { @@ -48,3 +26,37 @@ at async TransformContext.transform (file:///C:/Users/Umbraco/Documents/Umbraco. ); }), ]; + +// Mock Data for now +const modelBeforeBuild: ModelsBuilder = { + mode: ModelsMode.IN_MEMORY_AUTO, + canGenerate: true, + outOfDateModels: true, + lastError: `[plugin:vite:import-analysis] Missing "./directives/unsafe-html.js" export in "lit" package + C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/src/backoffice/dashboards/models-builder/dashboard-models-builder.element.ts + at bail (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:32675:8) + at resolve (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:32752:10) + at resolveExports (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34128:12) + at resolveDeepImport (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:34146:31) + at tryNodeResolve (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33838:20) + at Context.resolveId (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:33598:28) + at async Object.resolveId (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40156:32) + at async TransformContext.resolve (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39921:23) + at async normalizeUrl (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36831:34) + at async TransformContext.transform (file:///C:/Users/Umbraco/Documents/Umbraco.CMS.Backoffice/node_modules/vite`, + version: '13.0.0', + modelsNamespace: 'Umbraco.Cms.Web.Common.PublishedModels', + trackingOutOfDateModels: true, +}; + +const modelAfterBuild: ModelsBuilder = { + mode: ModelsMode.IN_MEMORY_AUTO, + canGenerate: true, + outOfDateModels: false, + lastError: '', + version: '13.0.0', + modelsNamespace: 'Umbraco.Cms.Web.Common.PublishedModels', + trackingOutOfDateModels: true, +}; + +let model = modelBeforeBuild; diff --git a/src/Umbraco.Web.UI.Client/src/core/utils/errorbox.ts b/src/Umbraco.Web.UI.Client/src/core/utils/code-block.ts similarity index 63% rename from src/Umbraco.Web.UI.Client/src/core/utils/errorbox.ts rename to src/Umbraco.Web.UI.Client/src/core/utils/code-block.ts index 79294e92e9..de5e720df8 100644 --- a/src/Umbraco.Web.UI.Client/src/core/utils/errorbox.ts +++ b/src/Umbraco.Web.UI.Client/src/core/utils/code-block.ts @@ -4,13 +4,11 @@ import { customElement } from 'lit/decorators.js'; /** * A simple styled box for showing code-based error messages. - * max-height is 500px - * - * @slot the message + * @slot the full message * */ -@customElement('uui-error-box') -export class UUIErrorBox extends LitElement { +@customElement('uui-code-block') +export class UUICodeBlock extends LitElement { static styles = [ UUITextStyles, css` @@ -20,7 +18,7 @@ export class UUIErrorBox extends LitElement { } #container { - border: 2px solid var(--uui-color-divider-emphasis); + border: 1px solid var(--uui-color-divider-emphasis); color: var(--uui-color-text-alt); background-color: var(--uui-color-divider-standalone); padding: var(--uui-size-space-2); @@ -29,17 +27,8 @@ export class UUIErrorBox extends LitElement { } :host uui-scroll-container { max-height: 500px; - } - - pre { - display: inline-block; - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-all; - line-break: strict; - hyphens: none; - -webkit-hyphens: none; - -moz-hyphens: none; + overflow-y: auto; + overflow-wrap: anywhere; } `, ]; @@ -47,7 +36,7 @@ export class UUIErrorBox extends LitElement { render() { return html`
-
+
`; } @@ -55,6 +44,6 @@ export class UUIErrorBox extends LitElement { declare global { interface HTMLElementTagNameMap { - 'uui-error-box': UUIErrorBox; + 'uui-code-block': UUICodeBlock; } }