@genesislcap/pbc-notify-ui 1.0.1 → 1.0.3

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

@@ -1,79 +1,97 @@
 import { __awaiter, __decorate } from "tslib";
-import { showNotification } from '@genesislcap/foundation-notifications';
-import { attr, customElement, FASTElement, observable } from '@microsoft/fast-element';
-import { RuleTemplateService } from '../../../../services/rule-template.service';
-import { SystemService } from '../../../../services/system.service';
-import { EXPRESSION_TYPE_NUMBER, EXPRESSION_TYPE_PLACEHOLDER, EXPRESSION_TYPE_STRING } from '../../types/expression-type';
-import { PARAM_TYPE_BOOLEAN, PARAM_TYPE_FIELD, PARAM_TYPE_NUMBER, PARAM_TYPE_STRING } from '../../types/param-type';
-import { RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../types/right-criteria';
-import { RULE_EXECUTION_UNLIMITED } from '../../types/rule-execution-strategy';
-import { TemplateDialogStyles as styles } from './template-dialog.styles';
+import { customElement, FASTElement, observable } from '@microsoft/fast-element';
 import { TemplateDialogTemplate as template } from './template-dialog.template';
+import { TemplateDialogStyles as styles } from './template-dialog.styles';
 import { TemplateDialogMode } from './template-dialog.types';
-import { createEmptyCondition, createEmptyParameter, UUIDGenerator } from './template-dialog.utils';
+import { RuleTemplateService } from '../../../../services/rule-template.service';
+import { RULE_EXECUTION_UNLIMITED } from '../../types/rule-execution-strategy';
+import { RIGHT_CRITERIA_USER_ENTRY, RIGHT_CRITERIA_VALUE } from '../../types/right-criteria';
+import { EXPRESSION_TYPE_PLACEHOLDER } from '../../types/expression-type';
+import { createAssignment, createConditions, createEmptyCondition, createEmptyParameter, createParameterDetails, getAssignmentValue, UUIDGenerator } from './template-dialog.utils';
+import { showNotification } from '@genesislcap/foundation-notifications';
+import { logger } from '../../../../utils';
+import { NotifyService } from '../../../../services/notify.service';
+import { SEVERITY_INFORMATION } from '../../types/severity';
+import { SystemService } from '../../../../services/system.service';
+import { humanize } from '../../../foundation-inbox/inbox.utils';
 const name = 'template-dialog';
 let TemplateDialog = class TemplateDialog extends FASTElement {
     constructor() {
         super(...arguments);
-        this.resource = ''; // Tables, Views
+        this.resource = ''; // Tables + Views
         this.parameters = [];
         this.conditions = [];
         this.resources = [];
-        this.isCompleteToSubmit = false;
+        this.fields = [];
+        this.topics = [];
     }
-    connectedCallback() {
-        const _super = Object.create(null, {
-            connectedCallback: { get: () => super.connectedCallback }
-        });
+    openDialog(params) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            _super.connectedCallback.call(this);
-            // TODO: Get tables and views
-            this.resources = yield this.systemService.getResources();
-            switch (this.templateDialogMode) {
+            this.resources = yield this.systemService.getResources(); // TODO: Get tables and views
+            this.topics = yield this.notifyService.getNotifyRouteTopics();
+            this.templateDialogMode = params.mode;
+            switch (params.mode) {
                 case TemplateDialogMode.CREATE:
                     this.conditions.push(createEmptyCondition());
                     this.resource = this.resources[0];
+                    this.fields = yield this.ruleTemplateService.getFields(this.resource);
+                    this.tableId = this.fields[0].FIELD_NAME;
+                    this.topic = this.topics[0];
                     this.executionStrategy = RULE_EXECUTION_UNLIMITED;
+                    this.severity = SEVERITY_INFORMATION;
                     break;
                 case TemplateDialogMode.EDIT:
-                    this.name = this.ruleTemplateData.RULE_NAME;
-                    this.description = this.ruleTemplateData.RULE_DESCRIPTION;
-                    this.resource = this.ruleTemplateData.RULE_TABLE;
-                    this.executionStrategy = this.ruleTemplateData.RULE_EXECUTION_STRATEGY;
-                    this.parameters = Object.keys(this.ruleTemplateData.PARAMETERS).map(key => {
+                    const ruleTemplate = params.data;
+                    this.ruleTemplateId = ruleTemplate.DYNAMIC_RULE_ID;
+                    this.name = ruleTemplate.RULE_NAME;
+                    this.description = ruleTemplate.RULE_DESCRIPTION;
+                    this.resource = ruleTemplate.RULE_TABLE;
+                    this.fields = yield this.ruleTemplateService.getFields(this.resource);
+                    this.executionStrategy = ruleTemplate.RULE_EXECUTION_STRATEGY;
+                    // Parameters
+                    this.parameters = Object.keys(ruleTemplate.PARAMETERS).map(key => {
                         return {
                             UUID: UUIDGenerator.createUuid(),
-                            PARAM_NAME: this.ruleTemplateData.PARAMETERS[key].PARAM_NAME,
-                            PARAM_LABEL: this.ruleTemplateData.PARAMETERS[key].PARAM_LABEL,
-                            PARAM_TYPE: this.ruleTemplateData.PARAMETERS[key].PARAM_TYPE,
-                            PARAM_SOURCE_TYPE: this.ruleTemplateData.PARAMETERS[key].PARAM_SOURCE_TYPE,
-                            PARAM_SOURCE: this.ruleTemplateData.PARAMETERS[key].PARAM_SOURCE
+                            PARAM_NAME: ruleTemplate.PARAMETERS[key].PARAM_NAME,
+                            PARAM_LABEL: ruleTemplate.PARAMETERS[key].PARAM_LABEL,
+                            PARAM_TYPE: ruleTemplate.PARAMETERS[key].PARAM_TYPE,
+                            PARAM_SOURCE_TYPE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE_TYPE,
+                            PARAM_SOURCE: ruleTemplate.PARAMETERS[key].PARAM_SOURCE
                         };
                     });
-                    this.conditions = this.ruleTemplateData.RULE_EXPRESSION.CONDITIONS.map(condition => {
+                    // Conditions
+                    this.conditions = ruleTemplate.RULE_EXPRESSION.CONDITIONS.map(condition => {
+                        var _a, _b;
                         return {
                             ID: UUIDGenerator.createUuid(),
-                            LEFT_VALUE: condition.LEFT.VALUE,
+                            LEFT_VALUE: (_a = condition.LEFT.VALUE) !== null && _a !== void 0 ? _a : condition.LEFT.NAME,
                             LOGICAL_OPERATOR: condition.OPERATION,
                             RIGHT_CRITERIA: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
                                 ? RIGHT_CRITERIA_USER_ENTRY
                                 : RIGHT_CRITERIA_VALUE,
                             RIGHT_VALUE: condition.RIGHT.TYPE === EXPRESSION_TYPE_PLACEHOLDER
                                 ? condition.RIGHT.KEY
-                                : condition.RIGHT.VALUE
+                                : (_b = condition.RIGHT.VALUE) !== null && _b !== void 0 ? _b : condition.RIGHT.NAME
                         };
                     });
+                    // Assignments
+                    const assignments = (_a = ruleTemplate.RESULT_EXPRESSION) === null || _a === void 0 ? void 0 : _a.ASSIGNMENTS;
+                    if (assignments) {
+                        this.header = getAssignmentValue(assignments, 'HEADER');
+                        this.message = getAssignmentValue(assignments, 'BODY');
+                        this.severity = (_b = getAssignmentValue(assignments, 'NOTIFY_SEVERITY')) === null || _b === void 0 ? void 0 : _b.toUpperCase();
+                        this.topic = getAssignmentValue(assignments, 'TOPIC');
+                        this.tableId = getAssignmentValue(assignments, 'TABLE_ENTITY_ID');
+                    }
                     break;
                 default:
-                    console.error('Error on TemplateDialogMode');
+                    logger.error('Error on TemplateDialogMode');
                     break;
             }
-            this.verifyChangeComplete();
+            this.dialog.show();
         });
     }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
     get templateDialogTitle() {
         const mode = this.templateDialogMode === TemplateDialogMode.CREATE
             ? 'Create'
@@ -81,28 +99,18 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
         return `${mode} Template`;
     }
     complete() {
-        if (!this.name || !this.description) {
-            return;
-        }
-        /*
-        if (!this.isConditionsValid()) {
-          return;
-        }
-        */
-        const ruleTemplate = {
-            RULE_NAME: this.name,
-            RULE_DESCRIPTION: this.description,
-            RULE_TABLE: this.resource,
-            RULE_EXECUTION_STRATEGY: this.executionStrategy,
-            RULE_EXPRESSION: {
-                CONDITIONS: this.transformConditions(this.conditions)
-            },
-            RAW_RULE_EXPRESSION: null,
-            RESULT_EXPRESSION: {
-                ASSIGNMENTS: []
-            },
-            PARAMETER_DETAILS: this.createParameterDetails()
-        };
+        const ruleTemplate = Object.assign(Object.assign({}, (this.templateDialogMode === TemplateDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleTemplateId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, RULE_EXECUTION_STRATEGY: this.executionStrategy, RULE_EXPRESSION: {
+                CONDITIONS: createConditions(this.conditions, this.parameters)
+            }, RAW_RULE_EXPRESSION: null, RESULT_EXPRESSION: {
+                ASSIGNMENTS: [
+                    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))
+                ]
+            }, PARAMETER_DETAILS: createParameterDetails(this.parameters) });
         switch (this.templateDialogMode) {
             case TemplateDialogMode.CREATE:
                 this.ruleTemplateService
@@ -110,13 +118,12 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
                     .then(response => this.validateResponse(response));
                 break;
             case TemplateDialogMode.EDIT:
-                ruleTemplate.DYNAMIC_RULE_ID = this.ruleTemplateData.DYNAMIC_RULE_ID;
                 this.ruleTemplateService
                     .editRuleTemplate(ruleTemplate)
                     .then(response => this.validateResponse(response));
                 break;
             default:
-                console.error('Error on TemplateDialogMode');
+                logger.error('Error on TemplateDialogMode');
                 break;
         }
     }
@@ -136,133 +143,58 @@ let TemplateDialog = class TemplateDialog extends FASTElement {
             },
         }, 'zero');
     }
-    isConditionsValid() {
-        return false;
-    }
     close() {
+        this.dialog.close();
+        this.ruleTemplateId = null;
         this.name = null;
         this.description = null;
-        this.resource = '';
+        this.header = null;
+        this.message = null;
+        this.resource = null;
+        this.topic = null;
         this.executionStrategy = null;
+        this.severity = null;
         this.conditions = [];
         this.parameters = [];
         this.resources = [];
-        this.isCompleteToSubmit = false;
+        this.topics = [];
         this.$emit('close');
     }
     // #region Condition
     newCondition() {
         this.conditions.push(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
     // #region Parameter
     newParameter() {
         this.parameters = [...this.parameters, createEmptyParameter()];
-        this.verifyChangeComplete();
     }
     editParameter(editedParameter) {
         this.parameters = [...this.parameters];
-        this.verifyChangeComplete();
     }
     deleteParameter(deletedParameter) {
         if (this.conditions.find(condition => condition.RIGHT_VALUE === deletedParameter.UUID)) {
             return;
         }
         this.parameters = this.parameters.filter(parameter => parameter.UUID !== deletedParameter.UUID);
-        this.verifyChangeComplete();
     }
     // #endregion
-    nameChanged() {
-        this.verifyChangeComplete();
-    }
     resourceChanged() {
-        this.conditions = [createEmptyCondition()];
-    }
-    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: this.getLeftExpression(condition),
-                OPERATION: condition.LOGICAL_OPERATOR,
-                RIGHT: this.getRightExpression(condition)
-            };
-        });
-    }
-    getLeftExpression(condition) {
-        const leftType = this.getLeftType(condition);
-        if ([PARAM_TYPE_NUMBER, PARAM_TYPE_STRING].includes(leftType)) {
-            return {
-                TYPE: leftType,
-                VALUE: condition.LEFT_VALUE.FIELD_NAME
-            };
-        }
-        return {
-            TYPE: PARAM_TYPE_FIELD,
-            NAME: condition.LEFT_VALUE.FIELD_NAME
-        };
-    }
-    getLeftType(condition) {
-        switch (condition.LEFT_VALUE.FIELD_TYPE) {
-            case PARAM_TYPE_BOOLEAN:
-                return PARAM_TYPE_FIELD;
-            case PARAM_TYPE_NUMBER:
-                return PARAM_TYPE_NUMBER;
-            default:
-                return PARAM_TYPE_STRING;
-        }
-    }
-    getRightExpression(condition) {
-        if (condition.RIGHT_CRITERIA === RIGHT_CRITERIA_USER_ENTRY) {
-            return {
-                TYPE: EXPRESSION_TYPE_PLACEHOLDER,
-                KEY: this.parameters.find(parameter => parameter.UUID === condition.RIGHT_VALUE).PARAM_NAME
-            };
-        }
-        if (condition.LEFT_VALUE.FIELD_TYPE === EXPRESSION_TYPE_STRING) {
-            return {
-                TYPE: condition.LEFT_VALUE.FIELD_TYPE === EXPRESSION_TYPE_STRING
-                    ? EXPRESSION_TYPE_STRING
-                    : EXPRESSION_TYPE_NUMBER,
-                VALUE: condition.LEFT_VALUE.FIELD_TYPE !== EXPRESSION_TYPE_STRING
-                    ? Number(condition.RIGHT_VALUE)
-                    : condition.RIGHT_VALUE
-            };
-        }
-    }
-    createParameterDetails() {
-        const parameterDetails = {};
-        this.parameters.forEach(parameter => {
-            var _a;
-            parameterDetails[parameter.PARAM_NAME] = {
-                PARAM_LABEL: parameter.PARAM_LABEL,
-                PARAM_TYPE: parameter.PARAM_TYPE,
-                PARAM_SOURCE_TYPE: parameter.PARAM_SOURCE_TYPE,
-                PARAM_SOURCE: (_a = parameter.PARAM_SOURCE) !== null && _a !== void 0 ? _a : '',
-                PARAM_OPERATOR: 'EQUALS'
-            };
+        return __awaiter(this, void 0, void 0, function* () {
+            this.conditions = [createEmptyCondition()];
+            this.fields = yield this.ruleTemplateService.getFields(this.resource);
+            if (this.fields && this.fields.length > 0) {
+                this.tableId = this.fields[0].FIELD_NAME;
+            }
         });
-        return parameterDetails;
     }
 };
 __decorate([
@@ -271,18 +203,39 @@ __decorate([
 __decorate([
     SystemService
 ], TemplateDialog.prototype, "systemService", void 0);
+__decorate([
+    NotifyService
+], TemplateDialog.prototype, "notifyService", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "ruleTemplateId", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "name", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "description", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "header", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "message", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "resource", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "topic", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "executionStrategy", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "severity", void 0);
+__decorate([
+    observable
+], TemplateDialog.prototype, "tableId", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "parameters", void 0);
@@ -290,17 +243,17 @@ __decorate([
     observable
 ], TemplateDialog.prototype, "conditions", void 0);
 __decorate([
-    attr
-], TemplateDialog.prototype, "templateDialogMode", void 0);
+    observable
+], TemplateDialog.prototype, "resources", void 0);
 __decorate([
-    attr
-], TemplateDialog.prototype, "ruleTemplateData", void 0);
+    observable
+], TemplateDialog.prototype, "fields", void 0);
 __decorate([
     observable
-], TemplateDialog.prototype, "resources", void 0);
+], TemplateDialog.prototype, "topics", void 0);
 __decorate([
     observable
-], TemplateDialog.prototype, "isCompleteToSubmit", void 0);
+], TemplateDialog.prototype, "templateDialogMode", void 0);
 TemplateDialog = __decorate([
     customElement({
         name,

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

@@ -1,80 +1,57 @@
 import { css } from '@microsoft/fast-element';
+const modalWidthPx = 940;
 export const TemplateDialogStyles = css `
-  fast-dialog.template-dialog::part(control) {
-    background-color: #1f2126;
-    --dialog-height: none;
-    --dialog-width: none;
-    border: 1px solid #2e3339;
-    border-radius: 4px;
-    position: relative;
-  }
-
-  .template-dialog-header {
-    display: flex;
-    border-bottom: 1px solid rgb(46, 51, 57);
-    padding: 8px;
-  }
-
-  .template-dialog-header-title {
-    font-weight: bold;
-    align-self: center;
-  }
-
   label {
-    margin-bottom: 6px;
+    margin-bottom: calc(var(--design-unit) * 2px);
   }
 
   zero-button {
     margin: 0px;
   }
 
-  .closing-icon {
-    text-align: center;
-    height: 30px;
-    width: 30px;
-    min-width: 30px;
-    margin-left: auto;
-  }
-
-  .closing-icon::part(control) {
-    padding: 0px;
-  }
-
   .template-dialog-content {
     display: flex;
     justify-content: center;
     flex-direction: column;
-    padding: 8px
+    width: ${String(modalWidthPx)}px;
+    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);
   }
 
   .control {
     display: flex;
     flex-direction: column;
     width: 100%;
+    min-width: 0;
   }
 
   .conditions,
   .parameters {
     height: 150px;
-    width: 940px;
     max-height: 200px;
-    border: 1px solid #2e3339;
-    border-radius: 4px;
+    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: calc(var(--design-unit) * 2px);
+    flex-direction: column;
     overflow-y: scroll;
-    padding: 8px;
   }
 
   .template-dialog-footer {
+    margin-top: calc(var(--design-unit) * 2px);
     display: flex;
-    flex-direction: row;
-    margin: 0px 8px 8px 0px;
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .template-dialog-footer .content-row {
+    margin-left: auto;
+    margin-bottom: 0px;
   }
 
   .complete {
@@ -87,9 +64,31 @@ export const TemplateDialogStyles = css `
   .parameter {
     gap: 0px;
     flex-direction: column;
+    margin-bottom: 0px;
+  }
+
+  zero-select {
+    min-width: 0;
+  }
+
+  zero-select::part(control) {
   }
 
   zero-select::part(listbox) {
     max-height: 160px;
   }
+
+  zero-select::part(selected-value) {
+  }
+
+  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);
+  }
 `;

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

@@ -1,21 +1,20 @@
 import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat } from "@microsoft/fast-element";
+import { html, ref, repeat } from "@microsoft/fast-element";
 import { eventDetail } from '../../utils/eventDetail';
 import { ALL_RULE_EXECUTION_STRATEGIES } from '../../types/rule-execution-strategy';
+import { ALL_SEVERITIES } from '../../types/severity';
 export const TemplateDialogTemplate = html `
-  <fast-dialog class="template-dialog">
-    <div class="template-dialog-header">
-      <div class="template-dialog-header-title">${x => x.templateDialogTitle}</div>
-      <zero-button
-        class="closing-icon"
-        @click=${(x) => x.close()}
-      >
-        <zero-icon name="xmark" part="icon" size="lg"></zero-icon>
-      </zero-button>
+  <zero-modal
+    ${ref('dialog')}
+    class="template-dialog"
+    :onCloseCallback=${(x) => () => x.close()}
+  >
+    <div slot="top" class="template-dialog-header-title">
+      ${x => x.templateDialogTitle}
     </div>
 
     <div class="template-dialog-content">
-      <div class="content-row" style="margin-bottom: 8px;">
+      <div class="content-row">
         <div class="control">
           <label>Name</label>
           <zero-text-field
@@ -47,6 +46,29 @@ export const TemplateDialogTemplate = html `
           </zero-select>
         </div>
 
+        <div class="control">
+          <label>Table ID</label>
+          <zero-select
+            :value=${sync(x => x.tableId)}
+            position="below"
+          >
+            ${repeat(x => x.fields, html `
+                <zero-option value=${x => x.FIELD_NAME}>${x => x.FIELD_NAME}</zero-option>
+              `)}
+          </zero-select>
+        </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="control">
           <label>Execution Strategy</label>
           <zero-select
@@ -58,13 +80,44 @@ export const TemplateDialogTemplate = html `
           </zero-select>
         </div>
       </div>
+
+    <div class="content-row">
+      <div class="control">
+        <label>Severity</label>
+        <zero-select
+          :value=${sync(x => x.severity)}
+        >
+          ${repeat(x => ALL_SEVERITIES, html `
+              <zero-option value=${x => x}>${x => x}</zero-option>
+            `)}
+        </zero-select>
+      </div>
+
+      <div class="control">
+        <label>Header</label>
+        <zero-text-field
+          :value=${sync(x => x.header)}
+        >
+        </zero-text-field>
+      </div>
+    </div>
+
+      <div class="content-row">
+        <div class="control">
+          <label>Message</label>
+          <zero-text-field
+            :value=${sync(x => x.message)}
+          >
+          </zero-text-field>
+        </div>
+      </div>
         
-      <div class="content-row" style="margin-top: 8px;">
+      <div class="content-row">
         <label>Parameter(s)</label>
       </div>
       
       <div class="parameters">
-        <div class="content-row condition">
+        <div class="content-row parameter">
           ${repeat(x => x.parameters, html `
               <parameter-builder
                 :parameter=${x => x}
@@ -84,7 +137,7 @@ export const TemplateDialogTemplate = html `
         </div>
       </div>
 
-      <div class="content-row" style="margin-top: 8px;">
+      <div class="content-row">
         <label>Condition(s)</label>
       </div>
       
@@ -113,14 +166,14 @@ export const TemplateDialogTemplate = html `
     </div>
 
     <div class="template-dialog-footer">
-      <div class="content-row" style="margin-left: auto; margin-bottom: 0px;">
-        <!-- ?disabled=${x => !x.isCompleteToSubmit} -->
+      <div class="content-row">
         <zero-button
+          appearance="accent"
           @click=${x => x.complete()}
         >
           Complete
         </zero-button>
       </div>
     </div>
-  </fast-dialog>
+  </zero-modal>
 `;