@genesislcap/pbc-notify-ui 1.0.0 → 1.0.1-prerelease-prerelease

package/dist/esm/components/foundation-inbox/inbox.utils.js

@@ -1,20 +1,24 @@
 import { html, repeat, when } from "@microsoft/fast-element";
 import { PARAM_SOURCE_TYPE_DEFINED_GROUP, PARAM_SOURCE_TYPE_REQ_REP, PARAM_SOURCE_TYPE_USER_TEXT } from "../foundation-notification-dashboard/types/param-source-type";
 import { PARAM_TYPE_BOOLEAN, PARAM_TYPE_NUMBER, PARAM_TYPE_STRING } from "../foundation-notification-dashboard/types/param-type";
-import { RuleStatus } from "./inbox.types";
+import { SEVERITY_CRITICAL, SEVERITY_INFORMATION, SEVERITY_SERIOUS, SEVERITY_WARNING } from "../foundation-notification-dashboard/types/severity";
+import { EXPRESSION_TYPE_PLACEHOLDER } from "../foundation-notification-dashboard/types/expression-type";
+import { chartPinkWebRGBA, primaryBlueWebRGBA, secondaryOrangeWebRGBA, warningYellowWebRGBA } from "@genesislcap/foundation-zero";
 export const EMPTY_HTML = html ``;
-const getFindIndexCondition = (parameters, parameter) => Object.values(parameters)
-    .findIndex(p => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
-export const createSubscribeComponent = (parameters) => html `
+const isFirstElement = (parameters, parameter) => Object.values(parameters).findIndex(p => p.PARAM_NAME === parameter.PARAM_NAME) === 0;
+export const createSubscribeComponent = (parameters, parametersOperatorsMap) => html `
   ${repeat(x => Object.values(parameters), html `
       <div class="control">
-        <label>${x => x.PARAM_LABEL}</label>
+        <label>
+          <span style="font-weight: bold;">${x => x.PARAM_LABEL} </span>
+          <span>${x => humanize(parametersOperatorsMap[x.PARAM_NAME]).toLowerCase()}</span>
+        </label>
         
         <!-- USER_TEXT -->
         ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_USER_TEXT, html `                            
             ${when(x => x.PARAM_TYPE === PARAM_TYPE_STRING, html `
                 <zero-text-field
-                  autofocus=${x => getFindIndexCondition(parameters, x)}
+                  autofocus=${x => isFirstElement(parameters, x)}
                   class="input-field"
                   @input=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
                 >
@@ -24,7 +28,7 @@ export const createSubscribeComponent = (parameters) => html `
             ${when(x => x.PARAM_TYPE === PARAM_TYPE_NUMBER, html `
                 <zero-number-field
                   hide-step
-                  autofocus=${x => getFindIndexCondition(parameters, x)}
+                  autofocus=${x => isFirstElement(parameters, x)}
                   class="input-field"
                   @input=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
                 >
@@ -33,7 +37,7 @@ export const createSubscribeComponent = (parameters) => html `
 
             ${when(x => x.PARAM_TYPE === PARAM_TYPE_BOOLEAN, html `
                 <zero-select
-                  autofocus=${x => getFindIndexCondition(parameters, x)}
+                  autofocus=${x => isFirstElement(parameters, x)}
                   class="input-field"
                   @change=${(x, c) => console.log(x)}
                 >
@@ -46,7 +50,7 @@ export const createSubscribeComponent = (parameters) => html `
         <!-- DEFINED_GROUP -->
         ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_DEFINED_GROUP, html `
             <zero-select
-              autofocus=${x => getFindIndexCondition(parameters, x)}
+              autofocus=${x => isFirstElement(parameters, x)}
               class="input-field"
               position="below"
               @change=${(x, c) => c.parent.parameterEdit(x, c.event.target.value)}
@@ -60,7 +64,7 @@ export const createSubscribeComponent = (parameters) => html `
         <!-- TODO: REQ_REP -->
         ${when(x => x.PARAM_SOURCE_TYPE === PARAM_SOURCE_TYPE_REQ_REP, html `
             <zero-select
-              autofocus=${x => getFindIndexCondition(parameters, x)}
+              autofocus=${x => isFirstElement(parameters, x)}
               @change=${(x, c) => console.log(x)}
             >
             </zero-select>
@@ -68,32 +72,46 @@ export const createSubscribeComponent = (parameters) => html `
       </div>
     `)}
 `;
-export const getStatus = (ruleStatus) => ruleStatus == RuleStatus.ENABLED
+export const humanize = (s) => {
+    if (!s) {
+        return '';
+    }
+    let i, frags = s.split('_');
+    for (i = 0; i < frags.length; i++) {
+        frags[i] = frags[i].charAt(0).toUpperCase() + frags[i].slice(1).toLowerCase();
+    }
+    return frags.join(' ');
+};
+export const getStatus = (ruleStatus) => ruleStatus == 'ENABLED'
     ? 'Active'
     : 'Paused';
-export const getIcon = (ruleStatus) => ruleStatus === RuleStatus.ENABLED
+export const getIcon = (ruleStatus) => ruleStatus === 'ENABLED'
     ? 'pause'
     : 'play';
-export const getFormattedDate = (dateTime) => new Intl.DateTimeFormat('en-UK', {
-    year: 'numeric',
-    month: 'numeric',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric'
-}).format(dateTime);
+export const getFormattedDate = (dateTimeInMills) => {
+    const dateTime = new Date(dateTimeInMills);
+    return `${dateTime.toLocaleDateString()} ${dateTime.toLocaleTimeString()}`;
+};
 export function getSeverityColor(severity) {
-    switch (severity.toLowerCase()) {
-        case 'information':
-            return '#01C9FF'; // Blue
-        case 'warning':
-            return '#fff989'; // Yellow
-        case 'serious':
-            return '#E7700D'; // Orange
-        case 'critical':
-            return '#F9644D'; // Red
+    switch (severity.toUpperCase()) {
+        case SEVERITY_INFORMATION:
+            return primaryBlueWebRGBA(1);
+        case SEVERITY_CRITICAL:
+            return warningYellowWebRGBA(1);
+        case SEVERITY_SERIOUS:
+            return secondaryOrangeWebRGBA(1);
+        case SEVERITY_WARNING:
+            return chartPinkWebRGBA(1);
         default:
             console.error('Unexpected severity:', severity);
             return '#FF';
     }
 }
+export function createParametersOperatorMap(conditions) {
+    return conditions.reduce((acc, condition) => {
+        if (condition.RIGHT.TYPE == EXPRESSION_TYPE_PLACEHOLDER) {
+            acc[condition.RIGHT.KEY] = condition.OPERATION;
+        }
+        return acc;
+    }, {});
+}

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

@@ -21,7 +21,6 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
             _super.connectedCallback.call(this);
             if (this.resource) {
                 this.leftValueItems = yield this.systemService.getFields(this.resource);
-                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
             }
             this.rightValueItems = this.parameters;
             this.createRightValueItems();
@@ -50,7 +49,6 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.resource) {
                 this.leftValueItems = yield this.systemService.getFields(this.resource);
-                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
             }
         });
     }
@@ -64,7 +62,6 @@ let ConditionBuilder = class ConditionBuilder extends FASTElement {
         return __awaiter(this, void 0, void 0, function* () {
             if (this.resource) {
                 this.leftValueItems = yield this.systemService.getFields(this.resource);
-                // this.leftValue = JSON.stringify(this.leftValueItems[0]);
             }
             this.assignLeftValue();
             this.logicalOperator = this.condition.LOGICAL_OPERATOR;

package/dist/esm/components/foundation-notification-dashboard/components/parameter-builder/parameter-builder.template.js

@@ -22,6 +22,7 @@ export const ParameterBuilderTemplate = html `
       id="param-source-type"
       :value=${sync(x => x.sourceType)}
       class="param-source-type"
+      position="below"
     >
       ${repeat(x => ALL_PARAM_SOURCE_TYPES, html `
           <zero-option value=${x => x}>${x => x}</zero-option>
@@ -64,6 +65,7 @@ export const ParameterBuilderTemplate = html `
       id="param-type"
       :value=${sync(x => x.type)}
       class="param-type"
+      position="below"
     >
       ${repeat(x => ALL_PARAM_TYPES, html `
           <zero-option value=${x => x}>${x => x}</zero-option>

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.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.template.js

@@ -92,17 +92,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
@@ -115,7 +115,6 @@ export const ruleDialogTemplate = html `
     <div class="template-dialog-footer">
       <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
         <zero-button
-          appearance="primary-gradient"
           @click=${x => x.submit()}
         >
           Submit