This commit is contained in:
Lone Iversen
2022-11-22 10:53:06 +01:00
parent c43a5b45f6
commit 63b6efae6d
3 changed files with 106 additions and 75 deletions

View File

@@ -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`
<uui-box>
<div class="headline" slot="headline">
<strong>Models Builder</strong>
<div class="headline">
<h1>Models Builder</h1>
<uui-button .state="${this._buttonStateReload}" look="secondary" @click="${this._onDashboardReload}">
Reload
</uui-button>
</div>
<p>Version: ${this._modelsBuilder?.version}</p>
<div class="models-description">
<p>${unsafeHTML(this._modelsBuilder?.modelsNamespace)}</p>
<p>ModelsBuilder is enabled with the following configuration:</p>
<ul>
${this._modelsBuilder?.mode
? html`<li>
The <strong>ModelsMode</strong> is '${this._modelsBuilder.mode}'. ${this.renderModelsMode()}
</li> `
: nothing}
${this._modelsBuilder?.modelsNamespace
? html`<li>The <strong>models namespace</strong> is ${this._modelsBuilder.modelsNamespace}.</li>`
: nothing}
${this._modelsBuilder?.trackingOutOfDateModels === true
? html`<li>Tracking of <strong>out-of-date models</strong> is enabled.</li>`
: this._modelsBuilder?.trackingOutOfDateModels === false
? html`<li>Tracking of <strong>out-of-date models</strong> is not enabled.</li>`
: nothing}
</ul>
</div>
${this._modelsBuilder?.outOfDateModels === true
? html`<p>Models are <strong>out of date</strong></p>`
: nothing}
${this._modelsBuilder?.canGenerate === true
? html` <uui-button
.state="${this._buttonStateBuild}"
look="primary"
label="Generate models"
@click="${this._onGenerateModels}">
Generate models
</uui-button>`
: nothing}
<p class="models-actions">
${this._modelsBuilder?.outOfDateModels === true
? html`<span class="out-of-date">Models are <strong>out-of-date</strong></span>`
: nothing}
${this._modelsBuilder?.canGenerate === true
? html` <uui-button
.state="${this._buttonStateBuild}"
look="primary"
label="Generate models"
@click="${this._onGenerateModels}">
Generate models
</uui-button>`
: nothing}
</p>
${this._modelsBuilder?.lastError
? html`<p class="error">Last generation failed with the following error:</p>
<uui-error-box>${this._modelsBuilder.lastError}</uui-error-box>`
<uui-code-block>${this._modelsBuilder.lastError}</uui-code-block>`
: nothing}
</uui-box>
`;
}
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 {

View File

@@ -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<ModelsBuilder>({
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:
"<p>ModelsBuilder is enabled, with the following configuration:</p><ul><li>The <strong>models mode</strong> 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.</li><li>Models namespace is Umbraco.Cms.Web.Common.PublishedModels.</li><li>Tracking of <strong>out-of-date models</strong> is not enabled.</li></ul>",
trackingOutOfDateModels: true,
})
);
return res(ctx.status(200), ctx.json<ModelsBuilder>(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;

View File

@@ -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`<div id="container">
<uui-scroll-container>
<pre><slot></slot></pre>
<slot></slot>
</uui-scroll-container>
</div> `;
}
@@ -55,6 +44,6 @@ export class UUIErrorBox extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'uui-error-box': UUIErrorBox;
'uui-code-block': UUICodeBlock;
}
}