@umbraco-engage/backoffice 17.1.1 → 17.2.0

package/dist/core/components/custom-code/ue-custom-code.element.js

@@ -51,23 +51,23 @@ let UeCustomCodeElement = class UeCustomCodeElement extends UmbLitElement {
       >
         ${this.#renderTag(this.value?.css)}
         ${when(this._cssMessage, () => html `${this._cssMessage}`, () => html ` <umb-code-editor
-            ?readonly=${this._cssReadonly}
-            style=${styleMap({ height: `${this._height}px` })}
-            language="css"
-            .code=${this.value?.css ?? ""}
-            @input=${(e) => this.#onChange(e, "css")}
-          ></umb-code-editor>`)} </ue-collapsing-box
+              ?readonly=${this._cssReadonly}
+              style=${styleMap({ height: `${this._height}px` })}
+              language="css"
+              .code=${this.value?.css ?? ""}
+              @input=${(e) => this.#onChange(e, "css")}
+            ></umb-code-editor>`)} </ue-collapsing-box
       ><ue-collapsing-box
         .headline=${this.localize.term("engage_property_javascript")}
       >
         ${this.#renderTag(this.value?.javascript)}
         ${when(this._jsMessage, () => html `${this._jsMessage}`, () => html ` <umb-code-editor
-            ?readonly=${this._jsReadonly}
-            style=${styleMap({ height: `${this._height}px` })}
-            language="javascript"
-            .code=${this.value?.javascript ?? ""}
-            @input=${(e) => this.#onChange(e, "javascript")}
-          ></umb-code-editor>`)}
+              ?readonly=${this._jsReadonly}
+              style=${styleMap({ height: `${this._height}px` })}
+              language="javascript"
+              .code=${this.value?.javascript ?? ""}
+              @input=${(e) => this.#onChange(e, "javascript")}
+            ></umb-code-editor>`)}
       </ue-collapsing-box>`;
     }
     static { this.styles = css `

package/dist/core/components/data-cleanup-log/data-cleanup-log.element.d.ts

@@ -0,0 +1,18 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { DataCleanupRunDtoModel } from "../../../generated/index.js";
+declare const elementName = "ue-data-cleanup-log";
+export declare class UeDataCleanupLogElement extends UmbLitElement {
+    #private;
+    runs: Array<DataCleanupRunDtoModel>;
+    private _errorDialogContent?;
+    private _copyButtonState?;
+    private _expandedRuns;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UeDataCleanupLogElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeDataCleanupLogElement;
+    }
+}

package/dist/core/components/data-cleanup-log/data-cleanup-log.element.js

@@ -0,0 +1,402 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { css, customElement, html, nothing, property, state, when, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
+import { UeTimeFormatOptions } from "../../index.js";
+const elementName = "ue-data-cleanup-log";
+let UeDataCleanupLogElement = class UeDataCleanupLogElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this.runs = [];
+        this._expandedRuns = new Set();
+    }
+    #toggleExpand(runId) {
+        if (this._expandedRuns.has(runId)) {
+            this._expandedRuns.delete(runId);
+        }
+        else {
+            this._expandedRuns.add(runId);
+        }
+        this.requestUpdate();
+    }
+    #formatExecutorName(executor) {
+        return executor.replace(/Service$/, "").replace(/([a-z])([A-Z])/g, "$1 $2");
+    }
+    #formatDuration(durationMs) {
+        if (durationMs < 1000) {
+            return `${Math.round(durationMs)}ms`;
+        }
+        const totalSeconds = Math.round(durationMs / 1000);
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+        const parts = [];
+        if (hours > 0)
+            parts.push(`${hours}h`);
+        if (minutes > 0)
+            parts.push(`${minutes}m`);
+        parts.push(`${seconds}s`);
+        return parts.join("");
+    }
+    #formatDateRange(started, finished) {
+        if (!started)
+            return "";
+        const startDate = new Date(started);
+        const formattedStart = this.localize.date(started, UeTimeFormatOptions);
+        if (!finished)
+            return formattedStart;
+        const finishDate = new Date(finished);
+        const sameDate = startDate.getFullYear() === finishDate.getFullYear() &&
+            startDate.getMonth() === finishDate.getMonth() &&
+            startDate.getDate() === finishDate.getDate();
+        if (sameDate)
+            return formattedStart;
+        const formattedFinish = this.localize.date(finished, UeTimeFormatOptions);
+        return `${formattedStart} \u2013 ${formattedFinish}`;
+    }
+    #showErrorDialog(errorMessage) {
+        this._copyButtonState = undefined;
+        this._errorDialogContent = errorMessage;
+    }
+    #closeErrorDialog() {
+        this._errorDialogContent = undefined;
+    }
+    async #copyToClipboard() {
+        const notificationContext = await this.getContext(UMB_NOTIFICATION_CONTEXT);
+        try {
+            this._copyButtonState = "waiting";
+            await navigator.clipboard.writeText(this._errorDialogContent ?? "");
+            notificationContext?.peek("positive", {
+                data: {
+                    message: this.localize.term("clipboard_copySuccessHeadline"),
+                },
+            });
+            this._copyButtonState = "success";
+        }
+        catch {
+            this._copyButtonState = "failed";
+        }
+    }
+    #renderRunRow(run) {
+        const dateRange = this.#formatDateRange(run.started, run.finished);
+        const isExpanded = this._expandedRuns.has(run.runId);
+        const hasDetails = (run.details?.length ?? 0) > 0;
+        const detailsId = `cleanup-run-details-${run.runId}`;
+        const cells = html `
+      <span class="cell col-expand" role="cell">
+        ${when(hasDetails, () => html `<uui-symbol-expand ?open=${isExpanded}></uui-symbol-expand>`)}
+      </span>
+      <span class="cell col-date" role="cell">${dateRange}</span>
+      <span class="cell col-records" role="cell">
+        ${this.localize.number(run.totalRecordsAffected)}
+      </span>
+      <span class="cell col-duration" role="cell">
+        ${this.#formatDuration(run.totalDurationMs)}
+      </span>
+      <span class="cell col-status" role="cell">
+        ${when(run.failed, () => html `<uui-tag color="danger" look="primary"
+              >${this.localize.term("engage_failed")}</uui-tag
+            >`, () => html `<uui-tag color="positive"
+              >${this.localize.term("engage_success")}</uui-tag
+            >`)}
+      </span>
+    `;
+        return html `
+      ${hasDetails
+            ? html `<button
+            type="button"
+            class="row run-row interactive"
+            role="row"
+            aria-expanded=${isExpanded}
+            aria-controls=${detailsId}
+            @click=${() => this.#toggleExpand(run.runId)}
+          >
+            ${cells}
+          </button>`
+            : html `<div class="row run-row" role="row">${cells}</div>`}
+      ${when(isExpanded, () => this.#renderDetailPanel(run, detailsId))}
+    `;
+    }
+    #renderDetailPanel(run, detailsId) {
+        const details = run.details ?? [];
+        return html `
+      <div class="detail-panel" id=${detailsId}>
+        <div class="row detail-row detail-row--header" role="row">
+          <span class="cell col-expand" role="columnheader"></span>
+          <span class="cell col-service" role="columnheader">
+            ${this.localize.term("engage_dataCleanupLog_detailsExecutor")}
+          </span>
+          <span class="cell col-records" role="columnheader">
+            ${this.localize.term("engage_dataCleanupLog_detailsRecordsAffected")}
+          </span>
+          <span class="cell col-duration" role="columnheader">
+            ${this.localize.term("engage_dataCleanupLog_detailsDuration")}
+          </span>
+          <span class="cell col-status" role="columnheader">
+            ${this.localize.term("engage_status")}
+          </span>
+        </div>
+        ${details.map((detail) => {
+            const detailClickable = detail.failed && detail.errorMessage;
+            const cells = html `
+            <span class="cell col-expand" role="cell"></span>
+            <span class="cell col-service" role="cell">
+              ${this.#formatExecutorName(detail.executor)}
+              ${when(detail.tableName, () => html `<small class="table-name">${detail.tableName}</small>`)}
+            </span>
+            <span class="cell col-records" role="cell">
+              ${this.localize.number(detail.recordsAffected)}
+            </span>
+            <span class="cell col-duration" role="cell">
+              ${this.#formatDuration(detail.durationMs)}
+            </span>
+            <span class="cell col-status" role="cell">
+              ${when(detail.failed, () => html ` <uui-tag color="danger" look="primary"
+                      >${this.localize.term("engage_failed")}</uui-tag
+                    >
+                    ${detailClickable
+                ? html `<uui-icon name="icon-info"></uui-icon>`
+                : nothing}`)}
+            </span>
+          `;
+            return detailClickable
+                ? html `<button
+                type="button"
+                class="row detail-row interactive"
+                role="row"
+                aria-haspopup="dialog"
+                @click=${() => this.#showErrorDialog(detail.errorMessage)}
+              >
+                ${cells}
+              </button>`
+                : html `<div class="row detail-row" role="row">${cells}</div>`;
+        })}
+      </div>
+    `;
+    }
+    #renderErrorDialog() {
+        if (!this._errorDialogContent)
+            return nothing;
+        return html `
+      <uui-modal-dialog @uui:modal-close=${this.#closeErrorDialog}>
+        <uui-dialog>
+          <uui-dialog-layout headline=${this.localize.term("engage_failed")}>
+            <pre class="error-details">${this._errorDialogContent}</pre>
+
+            <uui-button
+              slot="actions"
+              look="secondary"
+              label=${this.localize.term("general_close")}
+              @click=${this.#closeErrorDialog}
+            ></uui-button>
+            <uui-button
+              slot="actions"
+              look="primary"
+              color="positive"
+              .state=${this._copyButtonState}
+              label=${this.localize.term("clipboard_labelForCopyToClipboard")}
+              @click=${this.#copyToClipboard}
+            ></uui-button>
+          </uui-dialog-layout>
+        </uui-dialog>
+      </uui-modal-dialog>
+    `;
+    }
+    render() {
+        return html `
+      <div class="log-table" role="table">
+        <div class="row head" role="row">
+          <span class="cell col-expand" role="columnheader"></span>
+          <span class="cell col-date" role="columnheader">
+            ${this.localize.term("engage_date")}
+          </span>
+          <span class="cell col-records" role="columnheader">
+            ${this.localize.term("engage_dataCleanupLog_recordsAffected")}
+          </span>
+          <span class="cell col-duration" role="columnheader">
+            ${this.localize.term("engage_dataCleanupLog_detailsDuration")}
+          </span>
+          <span class="cell col-status" role="columnheader">
+            ${this.localize.term("engage_status")}
+          </span>
+        </div>
+        ${this.runs.map((r) => this.#renderRunRow(r))}
+      </div>
+      ${this.#renderErrorDialog()}
+    `;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      .log-table {
+        display: flex;
+        flex-direction: column;
+        font-size: var(--uui-type-small-size);
+        background-color: var(--uui-color-surface);
+        border-radius: var(--uui-border-radius);
+      }
+
+      .row {
+        display: flex;
+        align-items: stretch;
+        border-top: 1px solid var(--uui-color-border);
+      }
+
+      button.row {
+        appearance: none;
+        background: none;
+        border: none;
+        border-top: 1px solid var(--uui-color-border);
+        color: inherit;
+        font: inherit;
+        margin: 0;
+        padding: 0;
+        text-align: left;
+        width: 100%;
+      }
+
+      button.row:focus-visible {
+        outline: 2px solid var(--uui-color-focus);
+        outline-offset: -2px;
+      }
+
+      .row.head {
+        border-top: none;
+        font-weight: bold;
+      }
+
+      .cell {
+        display: flex;
+        align-items: center;
+        padding: var(--uui-size-3) var(--uui-size-5);
+        min-height: calc(var(--uui-size-12) - 2 * var(--uui-size-3));
+        box-sizing: border-box;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .run-row > .cell {
+        padding-top: var(--uui-size-5);
+        padding-bottom: var(--uui-size-5);
+      }
+
+      .col-expand {
+        flex: 0 0 var(--uui-size-12);
+        padding-left: var(--uui-size-space-5);
+        padding-right: 0;
+      }
+
+      .col-date,
+      .col-service {
+        flex: 1 1 auto;
+        min-width: 0;
+        gap: var(--uui-size-space-3);
+      }
+
+      .table-name {
+        color: var(--uui-color-text-alt);
+      }
+
+      .col-records {
+        flex: 0 0 18%;
+      }
+
+      .col-duration {
+        flex: 0 0 15%;
+      }
+
+      .col-status {
+        flex: 0 0 15%;
+        gap: var(--uui-size-space-2);
+      }
+
+      .col-status uui-icon {
+        font-size: 1.5em;
+      }
+
+      .run-row.interactive {
+        cursor: pointer;
+        transition: color 80ms ease;
+      }
+
+      .run-row.interactive:hover {
+        color: var(--uui-color-interactive-emphasis);
+      }
+
+      uui-symbol-expand {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      .detail-panel {
+        margin: var(--uui-size-space-2) var(--uui-size-layout-1)
+          var(--uui-size-space-6);
+        border: 1px solid var(--uui-color-border);
+        border-radius: var(--uui-border-radius);
+        background-color: var(--uui-color-background);
+        overflow: hidden;
+      }
+
+      .detail-panel > .row {
+        width: calc(100% + 2 * var(--uui-size-layout-1) + 2px);
+        margin-left: calc(-1 * (var(--uui-size-layout-1) + 1px));
+      }
+
+      .detail-panel > .row:first-child {
+        border-top: none;
+      }
+
+      .detail-row--header {
+        font-weight: 600;
+        color: var(--uui-color-text-alt);
+        background-color: var(--uui-color-surface-alt);
+      }
+
+      .detail-row.interactive {
+        cursor: pointer;
+        transition: color 80ms ease;
+      }
+
+      .detail-row.interactive:hover {
+        color: var(--uui-color-interactive-emphasis);
+      }
+
+      .error-details {
+        margin: 0;
+        padding: var(--uui-size-space-4);
+        background: var(--uui-color-surface-alt);
+        border-radius: var(--uui-border-radius);
+        font-size: var(--uui-type-small-size);
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+    `,
+    ]; }
+};
+__decorate([
+    property({ type: Array })
+], UeDataCleanupLogElement.prototype, "runs", void 0);
+__decorate([
+    state()
+], UeDataCleanupLogElement.prototype, "_errorDialogContent", void 0);
+__decorate([
+    state()
+], UeDataCleanupLogElement.prototype, "_copyButtonState", void 0);
+__decorate([
+    state()
+], UeDataCleanupLogElement.prototype, "_expandedRuns", void 0);
+UeDataCleanupLogElement = __decorate([
+    customElement(elementName)
+], UeDataCleanupLogElement);
+export { UeDataCleanupLogElement };
+export default UeDataCleanupLogElement;

package/dist/core/components/data-cleanup-log/index.d.ts

@@ -0,0 +1 @@
+export * from "./data-cleanup-log.element.js";

package/dist/core/components/data-cleanup-log/index.js

@@ -0,0 +1 @@
+export * from "./data-cleanup-log.element.js";

package/dist/core/components/data-generation-log/data-generation-log.element.d.ts

@@ -0,0 +1,17 @@
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import type { DataGenerationLogDtoModel } from "../../../generated/index.js";
+declare const elementName = "ue-data-generation-log";
+export declare class UeDataGenerationLogElement extends UmbLitElement {
+    #private;
+    results: Array<DataGenerationLogDtoModel>;
+    private _errorDialogContent?;
+    private _copyButtonState?;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UeDataGenerationLogElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeDataGenerationLogElement;
+    }
+}