@genesislcap/pbc-notify-ui 1.0.1 → 1.0.3

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.js

@@ -1,5 +1,5 @@
 import { __awaiter, __decorate } from "tslib";
-import { customElement, DOM, FASTElement, observable } from '@microsoft/fast-element';
+import { customElement, FASTElement, observable } from '@microsoft/fast-element';
 import { SystemService } from '../../../../../services/system.service';
 import { ConditionBuilderStyles as styles } from './rule-condition-builder.styles';
 import { ConditionBuilderTemplate as template } from './rule-condition-builder.template';
@@ -8,13 +8,17 @@ const name = 'rule-condition-builder';
 let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
     constructor() {
         super(...arguments);
-        /** Used to pause `Changed` methods while populating with existing data */
+        this.rightCriteria = RIGHT_CRITERIA.VALUE;
+        // Used to pause `changed` methods while populating with existing data
         this.formActive = true;
     }
     conditionChanged() {
         return __awaiter(this, void 0, void 0, function* () {
             this.formActive = false;
-            yield this.assignLeftValue();
+            if (this.resource) {
+                this.resourceFields = yield this.systemService.getFields(this.resource);
+            }
+            this.assignLeftValue();
             this.logicalOperator = this.condition.LOGICAL_OPERATOR;
             this.rightCriteria = this.condition.RIGHT_CRITERIA;
             this.assignRightValue();
@@ -23,8 +27,11 @@ let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
     }
     assignLeftValue() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield DOM.nextUpdate(); // need to wait for the options to be added to the DOM, which should happen before the next DOM update
-            this.leftValue = this.condition.LEFT_VALUE;
+            this.leftValue = this.condition.LEFT_VALUE
+                ? typeof this.condition.LEFT_VALUE === 'string'
+                    ? JSON.stringify(this.resourceFields.find(item => item.FIELD_NAME === this.condition.LEFT_VALUE)) // Edit
+                    : JSON.stringify(this.condition.LEFT_VALUE)
+                : JSON.stringify(this.resourceFields[0]);
             this.$emit('edit', this.condition);
         });
     }
@@ -38,19 +45,19 @@ let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
         this.$emit('edit', this.condition);
     }
     leftValueChanged() {
-        if (this.formActive) {
-            this.condition.LEFT_VALUE = this.leftValue;
+        if (this.condition) {
+            this.condition.LEFT_VALUE = JSON.parse(this.leftValue);
             this.$emit('edit', this.condition);
         }
     }
     logicalOperatorChanged() {
-        if (this.formActive) {
+        if (this.condition) {
             this.condition.LOGICAL_OPERATOR = this.logicalOperator;
             this.$emit('edit', this.condition);
         }
     }
     rightCriteriaChanged() {
-        if (this.formActive) {
+        if (this.condition) {
             this.condition.RIGHT_CRITERIA = this.rightCriteria;
             if (this.condition.RIGHT_CRITERIA === RIGHT_CRITERIA.VALUE) {
                 this.rightValueText = '';
@@ -62,13 +69,13 @@ let RuleConditionBuilder = class RuleConditionBuilder extends FASTElement {
         }
     }
     rightValueTextChanged() {
-        if (this.formActive) {
+        if (this.condition) {
             this.condition.RIGHT_VALUE = this.rightValueText;
             this.$emit('edit', this.condition);
         }
     }
     rightValueUserEntryChanged() {
-        if (this.formActive) {
+        if (this.condition) {
             this.condition.RIGHT_VALUE = this.rightValueField;
             this.$emit('edit', this.condition);
         }
@@ -83,6 +90,9 @@ __decorate([
 __decorate([
     observable
 ], RuleConditionBuilder.prototype, "condition", void 0);
+__decorate([
+    observable
+], RuleConditionBuilder.prototype, "resource", void 0);
 __decorate([
     observable
 ], RuleConditionBuilder.prototype, "resourceFields", void 0);

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.styles.js

@@ -2,8 +2,8 @@ import { css } from '@microsoft/fast-element';
 export const ConditionBuilderStyles = css `
   .condition-builder {
     display: flex;
-    gap: 8px;
-    margin-bottom: 8px;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
 
   zero-button {
@@ -12,11 +12,11 @@ export const ConditionBuilderStyles = css `
 
   .delete {
     margin: 0px;
-    background-color: rgba(242, 242, 242, 0.05);
+    background-color: var(--neutral-layer-1);
   }
 
   .delete:hover {
-    background-color: rgba(255, 255, 255, 0.11);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 89%);
   }
 
   zero-text-field {

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-condition-builder/rule-condition-builder.template.js

@@ -12,7 +12,7 @@ export const ConditionBuilderTemplate = html `
       position="below"
     >
       ${repeat(x => x.resourceFields, html `
-          <zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>
+          <zero-option value=${x => JSON.stringify(x)}>${x => x.FIELD_NAME}</zero-option>
         `)}
     </zero-select>
 
@@ -41,7 +41,9 @@ export const ConditionBuilderTemplate = html `
       :value=${sync(x => x.rightValueText)}
       placeholder="Value"
       autocomplete="off"
-    ></zero-text-field>
+    >
+    </zero-text-field>
+    
     <zero-select
       class="right-criteria-user-entry ${x => classNames(['display-none', x.rightCriteria !== RIGHT_CRITERIA.FIELD])}"
       :value=${sync(x => x.rightValueField)}

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.js

@@ -3,28 +3,29 @@ import { customElement, FASTElement, observable } from '@microsoft/fast-element'
 import { NotifyService } from '../../../../services/notify.service';
 import { RuleService } from '../../../../services/rule.service';
 import { SystemService } from '../../../../services/system.service';
-import { EXPRESSION_TYPE_FIELD, EXPRESSION_TYPE_PLACEHOLDER } from '../../types/expression-type';
+import { EXPRESSION_TYPE_PLACEHOLDER } from '../../types/expression-type';
 import { LOGICAL_OPERATOR_EQUALS } from '../../types/logical-operator';
 import { RULE_EXECUTION_UNLIMITED } from '../../types/rule-execution-strategy';
 import { SEVERITY_INFORMATION } from '../../types/severity';
-import { UUIDGenerator } from '../template-dialog/template-dialog.utils';
+import { createAssignment, createConditions, getAssignmentValue, UUIDGenerator } from '../template-dialog/template-dialog.utils';
 import { RIGHT_CRITERIA } from './rule-condition-builder';
 import { ruleDialogStyles as styles } from './rule-dialog.styles';
 import { ruleDialogTemplate as template } from './rule-dialog.template';
 import { RuleDialogMode } from './rule-dialog.types';
+import { showNotification } from '@genesislcap/foundation-notifications';
+import { humanize } from '../../../foundation-inbox/inbox.utils';
 const name = 'rule-dialog';
 let RuleDialog = class RuleDialog extends FASTElement {
     constructor() {
         super(...arguments);
-        this.resource = ''; // Tables, Views
+        this.resource = ''; // Tables + Views
         this.topic = '';
         this.severity = '';
         this.conditions = [];
         this.resources = [];
-        this.isCompleteToSubmit = false;
     }
     openDialog(params) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             this.resources = yield this.systemService.getResources();
             this.topics = yield this.notifyService.getNotifyRouteTopics();
@@ -46,32 +47,32 @@ let RuleDialog = class RuleDialog extends FASTElement {
                     this.description = rule.RULE_DESCRIPTION;
                     this.resource = rule.RULE_TABLE;
                     this.executionStrategy = rule.RULE_EXECUTION_STRATEGY;
+                    // Conditions
                     this.conditions = (_a = rule.RULE_EXPRESSION.CONDITIONS) === null || _a === void 0 ? void 0 : _a.map(condition => {
+                        var _a, _b;
                         return {
                             ID: UUIDGenerator.createUuid(),
-                            LEFT_VALUE: condition.LEFT.TYPE == 'FIELD' ? condition.LEFT.NAME : null,
+                            LEFT_VALUE: (_a = condition.LEFT.VALUE) !== null && _a !== void 0 ? _a : condition.LEFT.NAME,
                             LOGICAL_OPERATOR: condition.OPERATION,
                             RIGHT_CRITERIA: condition.RIGHT.TYPE === 'FIELD'
                                 ? RIGHT_CRITERIA.FIELD
                                 : RIGHT_CRITERIA.VALUE,
                             RIGHT_VALUE: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
                                 ? condition.RIGHT.KEY
-                                : condition.RIGHT.TYPE === EXPRESSION_TYPE_FIELD
-                                    ? condition.RIGHT.NAME
-                                    : condition.RIGHT.VALUE
+                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME
                         };
                     });
+                    // Assignments
                     const assignments = (_b = rule.RESULT_EXPRESSION) === null || _b === void 0 ? void 0 : _b.ASSIGNMENTS;
                     if (assignments) {
-                        this.header = this.getAssignmentValue(assignments, 'HEADER');
-                        this.message = this.getAssignmentValue(assignments, 'MESSAGE');
-                        this.severity = this.getAssignmentValue(assignments, 'SEVERITY');
-                        this.topic = this.getAssignmentValue(assignments, 'TOPIC');
-                        this.tableId = this.getAssignmentValue(assignments, 'TABLE_ID');
+                        this.header = getAssignmentValue(assignments, 'HEADER');
+                        this.message = getAssignmentValue(assignments, 'BODY');
+                        this.severity = (_c = getAssignmentValue(assignments, 'NOTIFY_SEVERITY')) === null || _c === void 0 ? void 0 : _c.toUpperCase();
+                        this.topic = getAssignmentValue(assignments, 'TOPIC');
+                        this.tableId = getAssignmentValue(assignments, 'TABLE_ENTITY_ID');
                     }
                     break;
             }
-            this.verifyChangeComplete();
             this.dialog.show();
         });
     }
@@ -79,20 +80,16 @@ let RuleDialog = class RuleDialog extends FASTElement {
         return `${this.ruleDialogMode === RuleDialogMode.CREATE ? 'Create' : 'Edit'} Rule`;
     }
     submit() {
-        if (!this.name || !this.description) {
-            return;
-        }
         const rule = Object.assign(Object.assign({}, (this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, RULE_EXECUTION_STRATEGY: this.executionStrategy, RULE_EXPRESSION: {
-                CONDITIONS: this.transformConditions(this.conditions)
+                CONDITIONS: createConditions(this.conditions, null)
             }, RESULT_EXPRESSION: {
                 ASSIGNMENTS: [
-                    this.createAssignment('TOPIC', this.topic),
-                    this.createAssignment('TABLE_NAME', this.resource),
-                    this.createAssignment('TABLE_ID', this.tableId),
-                    this.createAssignment('HEADER', this.header),
-                    this.createAssignment('MESSAGE', this.message),
-                    this.createAssignment('SEVERITY', this.severity),
-                    this.createAssignment('RULE_NAME', this.name)
+                    createAssignment('TOPIC', this.topic),
+                    createAssignment('TABLE_NAME', this.resource),
+                    createAssignment('TABLE_ENTITY_ID', this.tableId),
+                    createAssignment('HEADER', this.header),
+                    createAssignment('BODY', this.message),
+                    createAssignment('NOTIFY_SEVERITY', humanize(this.severity))
                 ]
             } });
         switch (this.ruleDialogMode) {
@@ -109,20 +106,24 @@ let RuleDialog = class RuleDialog extends FASTElement {
         }
     }
     validateResponse(response) {
-        var _a;
+        var _a, _b;
         if (response.MESSAGE_TYPE === 'EVENT_ACK') {
             this.close();
             return;
         }
-        if (((_a = response.ERROR[0]) === null || _a === void 0 ? void 0 : _a.CODE) === 'DUPLICATE_KEY') {
-            return;
-        }
-    }
-    isConditionsValid() {
-        return false;
+        showNotification({
+            title: (_a = response.ERROR[0]) === null || _a === void 0 ? void 0 : _a.CODE,
+            body: (_b = response.ERROR[0]) === null || _b === void 0 ? void 0 : _b.TEXT,
+            config: {
+                snackbar: {
+                    type: 'error',
+                },
+            },
+        }, 'zero');
     }
     close() {
         this.dialog.close();
+        this.ruleId = null;
         this.name = null;
         this.description = null;
         this.header = null;
@@ -135,62 +136,26 @@ let RuleDialog = class RuleDialog extends FASTElement {
         this.severity = null;
         this.tableId = null;
         this.conditions = [];
-        this.isCompleteToSubmit = false;
     }
     // #region Condition
     newCondition() {
         this.conditions.push(this.createEmptyCondition());
-        this.verifyChangeComplete();
     }
     editCondition(editedCondition) {
-        this.verifyChangeComplete();
     }
     deleteCondition(deletedCondition) {
         if (this.conditions.length <= 1) {
             return;
         }
         this.conditions = this.conditions.filter(condition => condition !== deletedCondition);
-        this.verifyChangeComplete();
     }
     // #endregion
-    nameChanged() {
-        this.verifyChangeComplete();
-    }
     resourceChanged() {
         return __awaiter(this, void 0, void 0, function* () {
             this.conditions = [this.createEmptyCondition()];
             this.resourceFields = yield this.systemService.getFields(this.resource);
         });
     }
-    verifyChangeComplete() {
-        if (!this.name || !this.description) {
-            this.isCompleteToSubmit = false;
-            return;
-        }
-        if (!this.isConditionsValid()) {
-            this.isCompleteToSubmit = false;
-            return;
-        }
-        this.isCompleteToSubmit = true;
-    }
-    transformConditions(conditions) {
-        return conditions.map(condition => {
-            return {
-                LEFT: {
-                    TYPE: EXPRESSION_TYPE_FIELD,
-                    NAME: condition.LEFT_VALUE
-                },
-                OPERATION: condition.LOGICAL_OPERATOR,
-                RIGHT: condition.RIGHT_CRITERIA === 'VALUE' ? {
-                    TYPE: 'STRING',
-                    VALUE: condition.RIGHT_VALUE,
-                } : {
-                    TYPE: condition.RIGHT_CRITERIA,
-                    NAME: condition.RIGHT_VALUE,
-                }
-            };
-        });
-    }
     createEmptyCondition() {
         return {
             ID: null,
@@ -200,29 +165,6 @@ let RuleDialog = class RuleDialog extends FASTElement {
             RIGHT_VALUE: null,
         };
     }
-    getAssignmentValue(assignments, field) {
-        const expression = assignments.find(assignment => assignment.FIELD.NAME === field).VALUE;
-        switch (expression.TYPE) {
-            case 'FIELD':
-                return expression.TYPE;
-            case 'PLACEHOLDER':
-                return expression.KEY;
-            default:
-                return String(expression.VALUE);
-        }
-    }
-    createAssignment(field, value) {
-        return {
-            FIELD: {
-                TYPE: 'FIELD',
-                NAME: field
-            },
-            VALUE: {
-                TYPE: 'STRING',
-                VALUE: value
-            }
-        };
-    }
 };
 __decorate([
     RuleService
@@ -275,9 +217,6 @@ __decorate([
 __decorate([
     observable
 ], RuleDialog.prototype, "resources", void 0);
-__decorate([
-    observable
-], RuleDialog.prototype, "isCompleteToSubmit", void 0);
 RuleDialog = __decorate([
     customElement({
         name,

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.styles.js

@@ -16,43 +16,52 @@ export const ruleDialogStyles = css `
     flex-direction: column;
     width: ${String(modalWidthPx)}px;
     max-height: 800px;
-    gap: 8px;
+    gap: calc(var(--design-unit) * 3px);
+    padding: 0 calc(var(--design-unit) * 4px);
   }
 
   .content-row {
     display: flex;
-    gap: 8px;
+    gap: calc(var(--design-unit) * 3px);
   }
 
   .col-4 {
     display: grid;
-    grid-template-columns: repeat(4, calc(${String(modalWidthPx - 8 * 3)}px / 4));
-    gap: 8px;
+    grid-template-columns: repeat(2, calc(${String(modalWidthPx - 4 * 3)}px / 2));
+    gap: calc(var(--design-unit) * 3px);
   }
 
   .control {
     display: flex;
     flex-direction: column;
     width: 100%;
-    gap: 4px;
+    gap: calc(var(--design-unit) * 2px);
   }
-
   .conditions {
-    min-height: 150px;
-    border: 1px solid #2e3339;
-    border-radius: 4px;
+    height: 150px;
+    max-height: 200px;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
     display: flex;
     flex-direction: column;
-    padding: 8px;
+    padding: calc(var(--design-unit) * 2px);
+    flex-direction: column;
+    overflow-y: scroll;
   }
 
   .template-dialog-footer {
-    margin-top: 8px;
+    margin-top: calc(var(--design-unit) * 2px);
     display: flex;
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .template-dialog-footer .content-row {
+    margin-left: auto;
+    margin-bottom: 0px;
   }
 
   .condition {
-    gap: 0px;
+    gap: 0;
     flex-direction: column;
   }
 
@@ -60,6 +69,17 @@ export const ruleDialogStyles = css `
     min-width: auto;
   }
 
+  zero-modal::part(dialog) {
+    padding: 0;
+    background: var(--neutral-layer-4);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  zero-modal::part(top) {
+    padding: calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
   zero-select::part(control) {
     display: flex;
     width: 100%;

package/dist/esm/components/foundation-notification-dashboard/components/rule-dialog/rule-dialog.template.js

@@ -28,35 +28,40 @@ export const ruleDialogTemplate = html `
       </div>
 
       <div class="col-4">
-        <div class="control">
-          <label>Resource</label>
-          <zero-select
-            :value=${sync(x => x.resource)}
-            position="below"
-          >
-            ${repeat(x => x.resources, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
-          </zero-select>
-        </div>
+        <div class="content-row">
+          <div class="control">
+            <label>Resource</label>
+            <zero-select
+              :value=${sync(x => x.resource)}
+              position="below"
+            >
+              ${repeat(x => x.resources, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+            </zero-select>
+          </div>
 
-        <div class="control">
-          <label>Table ID</label>
-          <zero-select :value=${sync(x => x.tableId)}>
-            ${repeat(x => x.resourceFields, html `<zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>`)}
-          </zero-select>
+          <div class="control">
+            <label>Table ID</label>
+            <zero-select :value=${sync(x => x.tableId)}>
+              ${repeat(x => x.resourceFields, html `<zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>`)}
+            </zero-select>
+          </div>
         </div>
 
-        <div class="control">
-          <label>Topic</label>
-          <zero-select :value=${sync(x => x.topic)}>
-            ${repeat(x => x.topics, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
-          </zero-select>
-        </div>
+        <div class="content-row">
 
-        <div class="control">
-          <label>Execution Strategy</label>
-          <zero-select :value=${sync(x => x.executionStrategy)}>
-            ${repeat(x => ALL_RULE_EXECUTION_STRATEGIES, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
-          </zero-select>
+          <div class="control">
+            <label>Topic</label>
+            <zero-select :value=${sync(x => x.topic)}>
+              ${repeat(x => x.topics, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+            </zero-select>
+          </div>
+
+          <div class="control">
+            <label>Execution Strategy</label>
+            <zero-select :value=${sync(x => x.executionStrategy)}>
+              ${repeat(x => ALL_RULE_EXECUTION_STRATEGIES, html `<zero-option value=${x => x}>${x => x}</zero-option>`)}
+            </zero-select>
+          </div>
         </div>
       </div>
 
@@ -92,17 +97,17 @@ export const ruleDialogTemplate = html `
           <div class="content-row condition">
             ${repeat(x => x.conditions, html `
                 <rule-condition-builder
-                  :resourceFields=${(x, c) => c.parent.resourceFields}
+                  :resource=${(x, c) => c.parent.resource}
                   :condition=${x => x}
                   @edit=${(x, c) => c.parent.editCondition(eventDetail(c))}
                   @delete=${(x, c) => c.parent.deleteCondition(eventDetail(c))}
-                ></rule-condition-builder>
+                >
+                </rule-condition-builder>
               `)}
           </div>
 
           <div class="content-row">
             <zero-button
-              appearance="primary-gradient"
               @click=${x => x.newCondition()}
             >
               <zero-icon name="plus"></zero-icon>Condition
@@ -113,9 +118,9 @@ export const ruleDialogTemplate = html `
     </div>
 
     <div class="template-dialog-footer">
-      <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
+      <div class="content-row">
         <zero-button
-          appearance="primary-gradient"
+          appearance="accent"
           @click=${x => x.submit()}
         >
           Submit