@jumoo/usync 18.2.0 → 18.3.0

package/dist/components/usync-data-type-preview.js

@@ -0,0 +1,295 @@
+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;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _uSyncDataTypePreviewElement_instances, _uSyncDataTypePreviewElement_renderSide, _uSyncDataTypePreviewElement_renderMissing, _uSyncDataTypePreviewElement_renderInfo, _uSyncDataTypePreviewElement_renderEditor, _uSyncDataTypePreviewElement_renderConfig;
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { classMap, css, customElement, html, nothing, property, } from '@umbraco-cms/backoffice/external/lit';
+import '@umbraco-cms/backoffice/components';
+import { getPreviewModel } from '../preview/types.js';
+import { deepEqual, prettyJson } from '../utils/diff/index.js';
+/**
+ * Shows the current and incoming versions of a data type side by side,
+ * rendered with the real property editor, so you can see what an import
+ * will do before running it.
+ */
+let uSyncDataTypePreviewElement = class uSyncDataTypePreviewElement extends UmbLitElement {
+    constructor() {
+        super(...arguments);
+        _uSyncDataTypePreviewElement_instances.add(this);
+    }
+    render() {
+        if (!this.preview)
+            return nothing;
+        const model = getPreviewModel(this.preview);
+        const current = model?.current ?? undefined;
+        const incoming = model?.incoming ?? undefined;
+        return html `
+			<div class="sides">
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'current', current, incoming)}
+				${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderSide).call(this, 'incoming', incoming, current)}
+			</div>
+		`;
+    }
+};
+_uSyncDataTypePreviewElement_instances = new WeakSet();
+_uSyncDataTypePreviewElement_renderSide = function _uSyncDataTypePreviewElement_renderSide(side, dataType, other) {
+    const headline = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewCurrent', 'Current (this site)')
+        : this.localize.termOrDefault('uSync_previewIncoming', 'Incoming (uSync files)');
+    return html `
+			<div class="side">
+				<h4 class="side-headline">${headline}</h4>
+				${dataType
+        ? html `
+								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderInfo).call(this, dataType, other)} ${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderEditor).call(this, dataType)}
+								${__classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderConfig).call(this, dataType, other, side)}
+							`
+        : __classPrivateFieldGet(this, _uSyncDataTypePreviewElement_instances, "m", _uSyncDataTypePreviewElement_renderMissing).call(this, side)}
+			</div>
+		`;
+};
+_uSyncDataTypePreviewElement_renderMissing = function _uSyncDataTypePreviewElement_renderMissing(side) {
+    const message = side === 'current'
+        ? this.localize.termOrDefault('uSync_previewNotInSite', 'This item does not exist in the site yet')
+        : this.preview?.isDelete
+            ? this.localize.termOrDefault('uSync_previewDeleted', 'This item will be deleted or renamed by the import')
+            : this.localize.termOrDefault('uSync_previewFailed', 'The incoming item could not be built for the preview');
+    return html `<uui-box class="info"><p class="empty">${message}</p></uui-box>`;
+};
+_uSyncDataTypePreviewElement_renderInfo = function _uSyncDataTypePreviewElement_renderInfo(dataType, other) {
+    const changed = (field) => other !== undefined && other[field] !== dataType[field];
+    return html `
+			<uui-box class="info">
+				<div slot="headline" class="headline">
+					<umb-icon name="icon-autofill"></umb-icon>
+					<span class=${classMap({ changed: changed('name') })}>${dataType.name}</span>
+				</div>
+				<dl class="meta">
+					<dt>
+						${this.localize.termOrDefault('uSync_previewPropertyEditor', 'Property editor')}
+					</dt>
+					<dd class=${classMap({ changed: changed('editorAlias') })}>
+						<code>${dataType.editorAlias}</code>
+					</dd>
+					<dt>
+						${this.localize.termOrDefault('uSync_previewPropertyEditorUi', 'Property editor UI')}
+					</dt>
+					<dd class=${classMap({ changed: changed('editorUiAlias') })}>
+						<code>${dataType.editorUiAlias}</code>
+					</dd>
+				</dl>
+			</uui-box>
+		`;
+};
+_uSyncDataTypePreviewElement_renderEditor = function _uSyncDataTypePreviewElement_renderEditor(dataType) {
+    return html `
+			<uui-box
+				.headline=${this.localize.termOrDefault('uSync_previewEditor', 'Editor preview')}>
+				<!-- inert rather than readonly: most editors render only their value when
+				     readonly, which is empty here, so you wouldn't see the editor at all. -->
+				<umb-property-dataset .value=${[]} inert>
+					<umb-property
+						alias="usyncPreview"
+						.label=${dataType.name}
+						.description=${this.localize.termOrDefault('uSync_previewEditorDesc', 'How this data type looks to editors')}
+						.propertyEditorUiAlias=${dataType.editorUiAlias}
+						.config=${dataType.values}></umb-property>
+				</umb-property-dataset>
+			</uui-box>
+		`;
+};
+_uSyncDataTypePreviewElement_renderConfig = function _uSyncDataTypePreviewElement_renderConfig(dataType, other, side) {
+    const values = [...dataType.values].sort((a, b) => a.alias.localeCompare(b.alias));
+    return html `
+			<uui-box
+				.headline=${this.localize.termOrDefault('uSync_previewConfiguration', 'Configuration')}>
+				${values.length === 0
+        ? html `<p class="empty">
+								${this.localize.termOrDefault('uSync_previewNoConfiguration', 'No configuration')}
+							</p>`
+        : html `<table>
+								${values.map((value) => {
+            const status = configStatus(value.alias, value.value, other, side);
+            return html `<tr class="row-${status}">
+										<th><code>${value.alias}</code></th>
+										<td><pre>${formatConfigValue(value.value)}</pre></td>
+									</tr>`;
+        })}
+							</table>`}
+			</uui-box>
+		`;
+};
+uSyncDataTypePreviewElement.styles = css `
+		:host {
+			display: block;
+			container-type: inline-size;
+		}
+
+		/* the two sides share rows (headline, info, editor, config), so the
+		   boxes line up across the sides. */
+		.sides {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			grid-template-rows: auto auto auto 1fr;
+			gap: var(--uui-size-space-4) var(--uui-size-space-5);
+		}
+
+		.side {
+			display: grid;
+			grid-row: span 4;
+			grid-template-rows: subgrid;
+			min-width: 0;
+		}
+
+		.side > :last-child {
+			align-self: start;
+		}
+
+		@container (max-width: 760px) {
+			.sides {
+				grid-template-columns: 1fr;
+				grid-template-rows: none;
+				row-gap: var(--uui-size-layout-1);
+			}
+
+			.side {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-space-4);
+				grid-row: auto;
+			}
+		}
+
+		.side-headline {
+			margin: 0;
+			font-size: var(--uui-type-small-size);
+			text-transform: uppercase;
+			letter-spacing: 0.04em;
+			color: var(--uui-color-text-alt);
+		}
+
+		.headline {
+			display: flex;
+			align-items: center;
+			gap: var(--uui-size-space-3);
+		}
+
+		.meta {
+			display: grid;
+			grid-template-columns: max-content 1fr;
+			align-items: baseline;
+			gap: var(--uui-size-space-3) var(--uui-size-space-5);
+			margin: 0;
+		}
+
+		.meta dt {
+			font-weight: 700;
+		}
+
+		.meta dd {
+			margin: 0;
+			overflow-wrap: anywhere;
+		}
+
+		/* a changed field gets a soft highlight, spread with a shadow so the text doesn't move. */
+		.changed {
+			background: color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
+			border-radius: var(--uui-border-radius);
+			box-shadow: 0 0 0 var(--uui-size-space-1)
+				color-mix(in srgb, var(--uui-color-warning) 35%, transparent);
+		}
+
+		/* umb-property pads itself for a full workspace, tighten it up here. */
+		umb-property {
+			--uui-size-layout-1: var(--uui-size-space-2);
+		}
+
+		table {
+			width: 100%;
+			border-collapse: collapse;
+			margin: calc(-1 * var(--uui-size-space-2)) 0;
+		}
+
+		tr + tr {
+			border-top: 1px solid var(--uui-color-divider);
+		}
+
+		th,
+		td {
+			text-align: left;
+			vertical-align: baseline;
+			padding: var(--uui-size-space-3) var(--uui-size-space-3);
+		}
+
+		/* the alias column is as wide as the longest alias (up to 40%), so values sit beside their names. */
+		th {
+			width: 1%;
+			max-width: 40%;
+			white-space: nowrap;
+			font-weight: 700;
+		}
+
+		th code,
+		td pre {
+			font-size: var(--uui-type-small-size);
+		}
+
+		td pre {
+			margin: 0;
+			white-space: pre-wrap;
+			word-break: break-word;
+		}
+
+		/* marked with an inset bar rather than a border, so the content doesn't shift. */
+		tr.row-changed {
+			box-shadow: inset 3px 0 0 var(--uui-color-warning);
+			background: color-mix(in srgb, var(--uui-color-warning) 10%, transparent);
+		}
+
+		tr.row-added {
+			box-shadow: inset 3px 0 0 var(--uui-color-positive);
+			background: color-mix(in srgb, var(--uui-color-positive) 6%, transparent);
+		}
+
+		tr.row-removed {
+			box-shadow: inset 3px 0 0 var(--uui-color-danger);
+			background: color-mix(in srgb, var(--uui-color-danger) 6%, transparent);
+		}
+
+		.empty {
+			margin: 0;
+			color: var(--uui-color-text-alt);
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], uSyncDataTypePreviewElement.prototype, "preview", void 0);
+uSyncDataTypePreviewElement = __decorate([
+    customElement('usync-data-type-preview')
+], uSyncDataTypePreviewElement);
+export { uSyncDataTypePreviewElement };
+/**
+ * how a config value on this side compares to the other side. an alias
+ * missing from the current side is being added, one missing from the
+ * incoming side is being removed.
+ */
+function configStatus(alias, value, other, side) {
+    if (!other)
+        return 'unchanged';
+    const match = other.values.find((v) => v.alias === alias);
+    if (!match)
+        return side === 'incoming' ? 'added' : 'removed';
+    return deepEqual(value, match.value) ? 'unchanged' : 'changed';
+}
+function formatConfigValue(value) {
+    return typeof value === 'string' ? value : prettyJson(value);
+}
+export default uSyncDataTypePreviewElement;

package/dist/components/usync-progress-box.js

@@ -50,17 +50,17 @@ let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement)
             if (action.status == HandlerStatus.COMPLETE)
                 progress++;
             const actionName = __classPrivateFieldGet(this, _uSyncProcessBox_instances, "m", _uSyncProcessBox_camelize).call(this, action.name ?? 'unknown');
-            return html `
-				<div
-					class="action 
-                    ${action.status == HandlerStatus.COMPLETE ? 'complete' : ''} 
-                    ${action.status == HandlerStatus.PROCESSING ? 'working' : ''}">
-					<div class="icon-holder">
-						<uui-icon .name=${action.icon ?? 'icon-box'}></uui-icon>
-						${this.renderBadge(action)}
-					</div>
-					<h4>${this.localize.termOrDefault(`treeHeaders_${actionName}`, actionName)}</h4>
-				</div>
+            return html `
+				<div
+					class="action 
+                    ${action.status == HandlerStatus.COMPLETE ? 'complete' : ''} 
+                    ${action.status == HandlerStatus.PROCESSING ? 'working' : ''}">
+					<div class="icon-holder">
+						<uui-icon .name=${action.icon ?? 'icon-box'}></uui-icon>
+						${this.renderBadge(action)}
+					</div>
+					<h4>${this.localize.termOrDefault(`treeHeaders_${actionName}`, actionName)}</h4>
+				</div>
 			`;
         });
         let overall = this.showProgress
@@ -73,25 +73,25 @@ let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement)
             this.showProgress = true;
         }
         const progressClass = { hidden: !this.showProgress };
-        return html `
-			<uui-box>
-				<div class="header">
-					<h2>${this.localize.termOrDefault(`uSync_group${this.title}`, this.title)}</h2>
-				</div>
-				<div class="action-list">${actionHtml}</div>
-				<div class="update-box">${this.updateMsg?.message}</div>
-				<uui-progress-bar
-					progress=${overall}
-					class=${classMap(progressClass)}></uui-progress-bar>
-			</uui-box>
+        return html `
+			<uui-box>
+				<div class="header">
+					<h2>${this.localize.termOrDefault(`uSync_group${this.title}`, this.title)}</h2>
+				</div>
+				<div class="action-list">${actionHtml}</div>
+				<div class="update-box">${this.updateMsg?.message}</div>
+				<uui-progress-bar
+					progress=${overall}
+					class=${classMap(progressClass)}></uui-progress-bar>
+			</uui-box>
 		`;
     }
     renderBadge(action) {
         if (action.status == HandlerStatus.PENDING)
             return;
         if (action.status == HandlerStatus.PROCESSING) {
-            return html `<uui-badge color="positive" look="default">
-				<uui-icon name="icon-circle-dotted" class="rotating"></uui-icon
+            return html `<uui-badge color="positive" look="default">
+				<uui-icon name="icon-circle-dotted" class="rotating"></uui-icon
 			></uui-badge>`;
         }
         const color = action.inError ? 'warning' : 'positive';
@@ -99,8 +99,8 @@ let uSyncProcessBox = class uSyncProcessBox extends UmbElementMixin(LitElement)
             ? 'Some errors occured duing import'
             : 'Changes imported successfully';
         if (!this.complete || action.changes == 0)
-            return html `<uui-badge .color=${color} look="default" title=${label}
-				><uui-icon name="icon-check"></uui-icon
+            return html `<uui-badge .color=${color} look="default" title=${label}
+				><uui-icon name="icon-check"></uui-icon
 			></uui-badge>`;
         return html `<uui-badge .color=${color} title=${label}>${action.changes}</uui-badge>`;
     }
@@ -118,93 +118,93 @@ _uSyncProcessBox_camelize = function _uSyncProcessBox_camelize(str) {
     })
         .replace(/\s+/g, '');
 };
-uSyncProcessBox.styles = css `
-		:host {
-			display: block;
-		}
-
-		.header {
-			display: flex;
-			justify-content: center;
-			padding: var(uui-size-space-3);
-		}
-
-		h2 {
-			margin: 0;
-		}
-
-		.action-list {
-			margin-top: var(--uui-size-space-4);
-			padding: var(--uui-size-space-4) 0;
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: center;
-		}
-
-		.action {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			min-width: var(--uui-size-layout-5);
-			color: var(--uui-color-text-alt);
-			opacity: 0.67;
-			margin: var(--uui-size-space-2) 0;
-		}
-
-		.action h4 {
-			margin: var(--uui-size-space-2) 0;
-		}
-
-		.icon-holder {
-			position: relative;
-			padding: 0 var(--uui-size-7);
-		}
-
-		.rotating {
-			animation: spin-animation 2s infinite;
-			animation-timing-function: linear;
-			display: inline-block;
-		}
-
-		@keyframes spin-animation {
-			0% {
-				transform: rotate(360deg);
-			}
-			100% {
-				transform: rotate(0deg);
-			}
-		}
-
-		.action uui-icon {
-			font-size: var(--uui-size-12);
-		}
-
-		.action uui-badge uui-icon {
-			font-size: var(--uui-type-h4-size);
-		}
-
-		.complete {
-			color: var(--uui-color-default-emphasis);
-		}
-
-		.working {
-			color: var(--uui-color-positive);
-			opacity: 1;
-		}
-
-		.update-box {
-			font-weight: bold;
-			text-align: center;
-		}
-
-		uui-progress-bar {
-			padding: 0;
-			margin: 0;
-		}
-
-		.hidden {
-			opacity: 0;
-		}
+uSyncProcessBox.styles = css `
+		:host {
+			display: block;
+		}
+
+		.header {
+			display: flex;
+			justify-content: center;
+			padding: var(uui-size-space-3);
+		}
+
+		h2 {
+			margin: 0;
+		}
+
+		.action-list {
+			margin-top: var(--uui-size-space-4);
+			padding: var(--uui-size-space-4) 0;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: center;
+		}
+
+		.action {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			min-width: var(--uui-size-layout-5);
+			color: var(--uui-color-text-alt);
+			opacity: 0.67;
+			margin: var(--uui-size-space-2) 0;
+		}
+
+		.action h4 {
+			margin: var(--uui-size-space-2) 0;
+		}
+
+		.icon-holder {
+			position: relative;
+			padding: 0 var(--uui-size-7);
+		}
+
+		.rotating {
+			animation: spin-animation 2s infinite;
+			animation-timing-function: linear;
+			display: inline-block;
+		}
+
+		@keyframes spin-animation {
+			0% {
+				transform: rotate(360deg);
+			}
+			100% {
+				transform: rotate(0deg);
+			}
+		}
+
+		.action uui-icon {
+			font-size: var(--uui-size-12);
+		}
+
+		.action uui-badge uui-icon {
+			font-size: var(--uui-type-h4-size);
+		}
+
+		.complete {
+			color: var(--uui-color-default-emphasis);
+		}
+
+		.working {
+			color: var(--uui-color-positive);
+			opacity: 1;
+		}
+
+		.update-box {
+			font-weight: bold;
+			text-align: center;
+		}
+
+		uui-progress-bar {
+			padding: 0;
+			margin: 0;
+		}
+
+		.hidden {
+			opacity: 0;
+		}
 	`;
 __decorate([
     state()