@umbraco-engage/backoffice 17.1.0 → 17.2.0-rc1

package/dist/settings/workspace/views/permissions/modal/element/user-group-permission-modal.element.js

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbModalBaseElement } from "@umbraco-cms/backoffice/modal";
 import { css, customElement, html, state, } from "@umbraco-cms/backoffice/external/lit";
 import { tryExecute } from "@umbraco-cms/backoffice/resources";
-import { UMB_NOTIFICATION_CONTEXT } from "@umbraco-cms/backoffice/notification";
+import { UMB_NOTIFICATION_CONTEXT, } from "@umbraco-cms/backoffice/notification";
 import { UserGroupPermissionsService, } from "../../../../../../generated/index.js";
 const elementName = "ue-user-group-permissions-modal";
-let EngageUserGroupPermissionModalElement = class EngageUserGroupPermissionModalElement extends UmbModalBaseElement {
+let UeUserGroupPermissionModalElement = class UeUserGroupPermissionModalElement extends UmbModalBaseElement {
     async connectedCallback() {
         super.connectedCallback();
         if (this.data)
@@ -116,9 +116,9 @@ let EngageUserGroupPermissionModalElement = class EngageUserGroupPermissionModal
 };
 __decorate([
     state()
-], EngageUserGroupPermissionModalElement.prototype, "_userGroupPermission", void 0);
-EngageUserGroupPermissionModalElement = __decorate([
+], UeUserGroupPermissionModalElement.prototype, "_userGroupPermission", void 0);
+UeUserGroupPermissionModalElement = __decorate([
     customElement(elementName)
-], EngageUserGroupPermissionModalElement);
-export { EngageUserGroupPermissionModalElement };
-export default EngageUserGroupPermissionModalElement;
+], UeUserGroupPermissionModalElement);
+export { UeUserGroupPermissionModalElement };
+export default UeUserGroupPermissionModalElement;

package/dist/start-page/components/data-retention-status.element.d.ts

@@ -0,0 +1,17 @@
+import { nothing } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+declare const elementName = "ue-data-retention-status";
+export declare class UeDataRetentionStatusElement extends UmbLitElement {
+    #private;
+    private _lastRun?;
+    private _loading;
+    connectedCallback(): Promise<void>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default UeDataRetentionStatusElement;
+declare global {
+    interface HTMLElementTagNameMap {
+        [elementName]: UeDataRetentionStatusElement;
+    }
+}

package/dist/start-page/components/data-retention-status.element.js

@@ -0,0 +1,217 @@
+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, state, } from "@umbraco-cms/backoffice/external/lit";
+import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
+import { tryExecute } from "@umbraco-cms/backoffice/resources";
+import { DataCleanupService, } from "../../generated/index.js";
+import { UeTimeFormatOptions } from "../../core/index.js";
+const elementName = "ue-data-retention-status";
+let UeDataRetentionStatusElement = class UeDataRetentionStatusElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        this._loading = true;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.#fetchLastRun();
+    }
+    async #fetchLastRun() {
+        const { data } = await tryExecute(this, DataCleanupService.getDataCleanupLastRun());
+        this._lastRun = data ?? null;
+        this._loading = false;
+    }
+    #formatDuration(durationMs, options) {
+        if (durationMs < 1000) {
+            if (false === "DurationFormat" in Intl) {
+                return `${durationMs} milliseconds`;
+            }
+            const formatOptions = {
+                style: "long",
+                ...options,
+            };
+            // TODO: Remove cast when DurationFormat is available in TypeScript typings (see CMS codebase)
+            const DurationFormat = Intl["DurationFormat"];
+            const formatter = new DurationFormat(this.localize.lang(), formatOptions);
+            return formatter.format({
+                milliseconds: durationMs,
+            });
+        }
+        const now = Date.now();
+        return this.localize.duration(new Date(now), new Date(now + durationMs), options);
+    }
+    #renderStatus() {
+        if (!this._lastRun)
+            return nothing;
+        const failed = this._lastRun.failed;
+        const schemaComplete = this._lastRun.databaseSchemaComplete;
+        let color;
+        let label;
+        if (failed) {
+            color = "danger";
+            label = this.localize.term("engage_failed");
+        }
+        else if (!schemaComplete) {
+            color = "warning";
+            label = this.localize.term("engage_warning");
+        }
+        else {
+            color = "positive";
+            label = this.localize.term("engage_success");
+        }
+        return html `<uui-tag slot="header-actions" color=${color} look="primary"
+      >${label}</uui-tag
+    >`;
+    }
+    #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} — ${formattedFinish}`;
+    }
+    #renderSummary() {
+        if (!this._lastRun)
+            return nothing;
+        const duration = this.#formatDuration(this._lastRun.totalDurationMs);
+        const dateRange = this.#formatDateRange(this._lastRun.started, this._lastRun.finished);
+        return html `
+      <ul class="summary-list">
+        <li>
+          ${this.localize.term(this._lastRun.failed
+            ? "engage_startpageDataRetention_completedWithErrors"
+            : "engage_startpageDataRetention_completedSuccessfully", duration, dateRange)}
+        </li>
+        <li>
+          ${this.localize.term("engage_startpageDataRetention_anonymizedSummary", this._lastRun.anonymizedVisitors, this._lastRun.anonymizeAfterDays)}
+        </li>
+        <li>
+          ${this.localize.term("engage_startpageDataRetention_deletedSummary", this._lastRun.deletedVisitors, this._lastRun.deletedPageviews, this._lastRun.deleteAfterDays)}
+        </li>
+      </ul>
+    `;
+    }
+    #renderSchemaWarning() {
+        if (!this._lastRun || this._lastRun.databaseSchemaComplete)
+            return nothing;
+        return html `
+      <div class="schema-warning">
+        ${this.localize.term("engage_startpageDataRetention_schemaWarningDetails")}
+      </div>
+    `;
+    }
+    #renderErrorDetails() {
+        if (!this._lastRun?.failed || !this._lastRun.errorMessage)
+            return nothing;
+        return html `
+      <ue-collapsing-box
+        .headline=${this.localize.term("engage_startpageDataRetention_errorDetails")}
+      >
+        <pre class="error-details">${this._lastRun.errorMessage}</pre>
+      </ue-collapsing-box>
+    `;
+    }
+    #renderNoData() {
+        return html `<p class="no-data">
+      ${this.localize.term("engage_startpageDataRetention_noRunsYet")}
+    </p>`;
+    }
+    render() {
+        if (this._loading)
+            return nothing;
+        return html `
+      <uui-box>
+        <span slot="headline" class="headline">
+          <h2>
+            <uui-icon name="icon-shield"></uui-icon> ${this.localize.term("engage_startpageDataRetention_title")}
+          </h2>
+        </span>
+        ${this.#renderStatus()}
+        ${this._lastRun ? this.#renderSummary() : this.#renderNoData()}
+        ${this.#renderSchemaWarning()} ${this.#renderErrorDetails()}
+      </uui-box>
+    `;
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      .headline {
+        display: flex;
+        align-items: center;
+        gap: var(--uui-size-space-2);
+      }
+
+      .headline h2 {
+        color: var(--engage-color-default);
+        margin: var(--uui-size-space-2, 6px) 0;
+      }
+
+      .summary-list {
+        margin: 0;
+        padding: 0 0 0 var(--uui-size-space-5);
+        display: flex;
+        flex-direction: column;
+        gap: var(--uui-size-space-3);
+        line-height: 1.6;
+      }
+
+      .no-data {
+        margin: 0;
+        color: var(--uui-color-text-alt);
+        font-style: italic;
+      }
+
+      ue-collapsing-box {
+        margin-top: var(--uui-size-space-5);
+      }
+
+      .error-details {
+        margin: 0;
+        padding: var(--uui-size-space-4) var(--uui-size-space-5);
+        background-color: var(--uui-color-danger);
+        color: var(--uui-color-danger-contrast);
+        border: 1px solid var(--uui-color-danger-standalone);
+        border-radius: var(--uui-border-radius);
+        font-size: var(--uui-type-small-size);
+        overflow-x: auto;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .schema-warning {
+        margin-top: var(--uui-size-space-5);
+        padding: var(--uui-size-space-4) var(--uui-size-space-5);
+        background-color: var(--uui-color-warning);
+        color: var(--uui-color-warning-contrast);
+        border: 1px solid var(--uui-color-warning-standalone);
+        border-radius: var(--uui-border-radius);
+      }
+    `,
+    ]; }
+};
+__decorate([
+    state()
+], UeDataRetentionStatusElement.prototype, "_lastRun", void 0);
+__decorate([
+    state()
+], UeDataRetentionStatusElement.prototype, "_loading", void 0);
+UeDataRetentionStatusElement = __decorate([
+    customElement(elementName)
+], UeDataRetentionStatusElement);
+export { UeDataRetentionStatusElement };
+export default UeDataRetentionStatusElement;

package/dist/start-page/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from "./data-retention-status.element.js";
 export * from "./license-viewer.element.js";
 export * from "../screens/startpage-root-screen.element.js";

package/dist/start-page/components/index.js

@@ -1,2 +1,3 @@
+export * from "./data-retention-status.element.js";
 export * from "./license-viewer.element.js";
 export * from "../screens/startpage-root-screen.element.js";

package/dist/start-page/components/license-viewer.element.js

@@ -74,30 +74,30 @@ let UeLicenseViewerElement = class UeLicenseViewerElement extends UmbLitElement
                 () => html ` ${when(this._packageStatus?.expirationDate, () => renderItem(this.localize.term("engage_licenseViewer_validUntil"), this.localize.date(this._packageStatus?.expirationDate ?? "", {
                     dateStyle: "long",
                 })))}
-            ${when(!this._packageStatus?.isTrialMode, () => renderItem(this.localize.term("engage_licenseViewer_monthlyPageviews"), html `${this.localize.number(this._packageStatus.currentPageviewsThisMonth)}
-                ${this.localize.term("engage_licenseViewer_viewsOfMonthlyLimit", this.localize.number(Math.round((this._packageStatus.currentPageviewsThisMonth /
+              ${when(!this._packageStatus?.isTrialMode, () => renderItem(this.localize.term("engage_licenseViewer_monthlyPageviews"), html `${this.localize.number(this._packageStatus.currentPageviewsThisMonth)}
+                  ${this.localize.term("engage_licenseViewer_viewsOfMonthlyLimit", this.localize.number(Math.round((this._packageStatus.currentPageviewsThisMonth /
                     this._packageStatus.monthlyPageviewLimit) *
                     100)), this.localize.number(this._packageStatus.monthlyPageviewLimit))}`))}
-            ${when(this._packageStatus?.domains?.length, () => renderItem(this.localize.term("engage_domains"), html `
-                  <uui-button
-                    popovertarget="domains-popover"
-                    compact
-                    look="primary"
-                    >${this.localize.term("engage_licenseViewer_showAllLicensedDomains", this._packageStatus?.domains.length)}</uui-button
-                  >
-                  <uui-popover-container
-                    id="domains-popover"
-                    placement="bottom-end"
-                  >
-                    <uui-box
-                      .headline=${this.localize.term("engage_licenseViewer_licensedDomains")}
+              ${when(this._packageStatus?.domains?.length, () => renderItem(this.localize.term("engage_domains"), html `
+                    <uui-button
+                      popovertarget="domains-popover"
+                      compact
+                      look="primary"
+                      >${this.localize.term("engage_licenseViewer_showAllLicensedDomains", this._packageStatus?.domains.length)}</uui-button
                     >
-                      <ul>
-                        ${this._packageStatus?.domains?.map((domain) => html `<li>${domain}</li>`)}
-                      </ul>
-                    </uui-box>
-                  </uui-popover-container>
-                `))}`,
+                    <uui-popover-container
+                      id="domains-popover"
+                      placement="bottom-end"
+                    >
+                      <uui-box
+                        .headline=${this.localize.term("engage_licenseViewer_licensedDomains")}
+                      >
+                        <ul>
+                          ${this._packageStatus?.domains?.map((domain) => html `<li>${domain}</li>`)}
+                        </ul>
+                      </uui-box>
+                    </uui-popover-container>
+                  `))}`,
             ],
             [
                 "Undefined",
@@ -139,41 +139,43 @@ let UeLicenseViewerElement = class UeLicenseViewerElement extends UmbLitElement
       </div>
 
       ${when(this._packageStatus.isTrialMode, () => html `<div id="main">
-          <p>
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_trialMode"))}
-          </p>
-          <p>
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_upgradeLicense"))}
-          </p>
-        </div>`)}
+            <p>
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_trialMode"))}
+            </p>
+            <p>
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_upgradeLicense"))}
+            </p>
+          </div>`)}
       ${when(this._packageStatus.isNearLimit, () => html ` <div id="main">
-          <p>
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_licenseContainsPageViews", this.localize.number(this._packageStatus.monthlyPageviewLimit)))}
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_pageviewsThisMonth", this.localize.number(this._packageStatus.currentPageviewsThisMonth)))}
-          </p>
-          <p>
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_upgradeLicense"))}
-          </p>
-        </div>`)}
+            <p>
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_licenseContainsPageViews", this.localize.number(this._packageStatus.monthlyPageviewLimit)))}
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_pageviewsThisMonth", this.localize.number(this._packageStatus.currentPageviewsThisMonth)))}
+            </p>
+            <p>
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_upgradeLicense"))}
+            </p>
+          </div>`)}
       ${when(this._packageStatus.licenseStatus === "Valid" &&
             this._noLicenseForDomain, () => html ` <div id="main">
-          <p>
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_domainNotListed", location.host))}
-          </p>
-          <p>
-            ${unsafeHTML(this.localize.term("engage_licenseViewer_upgradeLicense"))}
-          </p>
-        </div>`)}
+            <p>
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_domainNotListed", location.host))}
+            </p>
+            <p>
+              ${unsafeHTML(this.localize.term("engage_licenseViewer_upgradeLicense"))}
+            </p>
+          </div>`)}
       ${when(!this._configuration?.settings
             ?.enabled, () => html ` <div id="main">
-          <p>${this.localize.term("engage_licenseViewer_engageIsDisabled")}</p>
-          <uui-button
-            .href=${this.#modalPath}
-            look="secondary"
-            color="default"
-            .label=${this.localize.term("engage_licenseViewer_enableEngage")}
-          ></uui-button>
-        </div>`)}
+            <p>
+              ${this.localize.term("engage_licenseViewer_engageIsDisabled")}
+            </p>
+            <uui-button
+              .href=${this.#modalPath}
+              look="secondary"
+              color="default"
+              .label=${this.localize.term("engage_licenseViewer_enableEngage")}
+            ></uui-button>
+          </div>`)}
     `;
     }
     static { this.styles = [

package/dist/start-page/screens/startpage-root-screen.element.js

@@ -111,10 +111,15 @@ let UeStartpageScreenElement = class UeStartpageScreenElement extends UmbLitElem
     `;
     }
     render() {
-        return html `<ue-sidebar-layout>
-      <ue-license-viewer slot="sidebar"></ue-license-viewer>
-      ${this.#renderContent()}
-    </ue-sidebar-layout>`;
+        return html `
+      <ue-sidebar-layout>
+        <ue-license-viewer slot="sidebar"></ue-license-viewer>
+        ${this.#renderContent()}
+      </ue-sidebar-layout>
+      <ue-data-retention-status
+        id="data-retention-status"
+      ></ue-data-retention-status>
+    `;
     }
     static { this.styles = [
         ...UeContentScreenBaseElement.styles,
@@ -174,6 +179,12 @@ let UeStartpageScreenElement = class UeStartpageScreenElement extends UmbLitElem
         line-height: 1.25;
         color: var(--engage-color-default);
       }
+
+      #data-retention-status {
+        max-width: 1400px;
+        padding: 0 var(--uui-size-layout-1);
+        margin: 0 auto var(--uui-size-layout-1);
+      }
     `,
     ]; }
 };

package/dist/start-page/umbraco-package.js

@@ -1,10 +1,10 @@
-export const name = 'Umbraco.Engage.StartPage';
+export const name = "Umbraco.Engage.StartPage";
 export const extensions = [
     {
-        name: 'Engage StartPage Bundle',
-        alias: 'Engage.Bundle.StartPage',
-        type: 'bundle',
-        js: () => import('./manifests-startpage.js'),
+        name: "Engage StartPage Bundle",
+        alias: "Engage.Bundle.StartPage",
+        type: "bundle",
+        js: () => import("./manifests-startpage.js"),
     },
 ];
 export * from "./index.js";