@things-factory/integration-ui 7.0.0-alpha.9 → 7.0.0

package/client/analysis/graph-viewer-style.ts

@@ -32,7 +32,7 @@ export const GraphViewerStyles = css`
   }
 
   .graph-info a.property {
-    background-color: #fff;
+    background-color: var(--md-sys-color-surface);
     border-color: #ccc;
     color: #333;
   }

package/client/analysis/graph-viewer.ts

@@ -309,7 +309,7 @@ export class GraphViewer {
       .attr('pointer-events', 'none')
       .attr('text-anchor', 'middle')
       .attr('y', '24px')
-      .attr('font-family', 'Material Icons')
+      .attr('font-family', 'Material Symbols Outlined')
       .attr('font-size', '48px')
       .attr('text-anchor', 'middle')
       .attr('alignment-baseline', 'middle')

package/client/bootstrap.ts

@@ -1,14 +1,9 @@
-import '@material/mwc-icon'
 import './editors/entity-editor'
 import './editors/property-editor'
 
 import { OxGristEditorJson } from '@operato/app/grist-editor/ox-grist-editor-json.js'
 import { OxGristRendererCrontab } from '@operato/app/grist-editor/ox-grist-renderer-crontab.js'
-import {
-  registerEditor as registerGristEditor,
-  registerRenderer as registerGristRenderer,
-  OxGristRendererJson5
-} from '@operato/data-grist'
+import { registerEditor as registerGristEditor, registerRenderer as registerGristRenderer, OxGristRendererJson5 } from '@operato/data-grist'
 import { OxGristEditorCrontab } from '@operato/grist-editor/ox-grist-editor-crontab.js'
 import { OxGristEditorPrivilege } from '@operato/app/grist-editor/ox-grist-editor-privilege.js'
 import { OxGristEditorParameters } from '@operato/grist-editor/ox-grist-editor-parameters.js'

package/client/editors/entity-selector.ts

@@ -8,29 +8,26 @@ import { DataGrist } from '@operato/data-grist/ox-grist.js'
 import { buildArgs, client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
+import { MultiColumnFormStyles } from '@operato/form'
+import { ButtonContainerStyles } from '@operato/styles'
 
 @customElement('entity-selector')
 export class EntitySelector extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     MultiColumnFormStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
 
-      .button-container {
-        display: flex;
-        margin-left: auto;
-      }
-
       form {
         position: relative;
       }
@@ -76,8 +73,8 @@ export class EntitySelector extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>check</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `
   }
@@ -172,17 +169,17 @@ export class EntitySelector extends LitElement {
             fieldType === 'string'
               ? 'text'
               : numberTypes.indexOf(fieldType) >= 0
-              ? 'number'
-              : fieldType === 'boolean'
-              ? 'checkbox'
-              : fieldType,
+                ? 'number'
+                : fieldType === 'boolean'
+                  ? 'checkbox'
+                  : fieldType,
           queryName: selectField.queryName,
           props:
             fieldType === 'string'
               ? { searchOper: 'i_like' }
               : fieldType === 'object'
-              ? { searchOper: 'in' }
-              : { searchOper: 'eq' },
+                ? { searchOper: 'in' }
+                : { searchOper: 'eq' },
           attrs: fieldType === 'boolean' ? ['indeterminated'] : []
         }
       })
@@ -273,11 +270,7 @@ export class EntitySelector extends LitElement {
       return `items {
         ${this.select.map(selectField => {
           return selectField.type === 'object'
-            ? `${selectField.name} { ${
-                selectField.subFields && selectField.subFields.length > 0
-                  ? selectField.subFields.join(' ')
-                  : `id name description`
-              } }`
+            ? `${selectField.name} { ${selectField.subFields && selectField.subFields.length > 0 ? selectField.subFields.join(' ') : `id name description`} }`
             : `${selectField.name}`
         })}
       }

package/client/editors/things-editor-entity-selector.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 import './entity-selector'
 
 import { css, html, LitElement } from 'lit'
@@ -26,7 +26,7 @@ export default class ThingsEditorEntitySelector extends LitElement {
         height: 100%;
       }
 
-      mwc-icon {
+      md-icon {
         position: absolute;
         top: 0;
         right: 0;
@@ -50,7 +50,7 @@ export default class ThingsEditorEntitySelector extends LitElement {
     return html`
       <input id="text" type="text" .value=${this.value || ''} @change=${e => this._onInputChanged(e)} />
 
-      <mwc-icon @click=${e => this.openSelector()}>dashboard</mwc-icon>
+      <md-icon @click=${e => this.openSelector()}>dashboard</md-icon>
     `
   }
 

package/client/editors/things-editor-oracle-procedure.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
 
 import '@operato/i18n/ox-i18n.js'
 import { css, html } from 'lit'
@@ -42,14 +42,14 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         display: flex;
         flex-direction: column;
         overflow: hidden;
-        margin-bottom: var(--margin-wide);
+        margin-bottom: var(--spacing-large);
       }
 
       div {
         display: flex;
         flex-flow: row nowrap;
-        gap: var(--margin-default);
-        margin-bottom: var(--margin-narrow);
+        gap: var(--spacing-medium);
+        margin-bottom: var(--spacing-small);
       }
 
       pre {
@@ -72,7 +72,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         border: var(--button-border);
         border-radius: var(--border-radius);
         background-color: var(--button-background-color);
-        padding: var(--padding-narrow) var(--padding-default);
+        padding: var(--spacing-small) var(--spacing-medium);
         line-height: 0.8;
         color: var(--button-color);
         cursor: pointer;
@@ -82,8 +82,8 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         margin-left: -5px;
       }
 
-      button mwc-icon {
-        font-size: var(--fontsize-default);
+      button md-icon {
+        --md-icon-size: var(--fontsize-default);
       }
 
       button:focus,
@@ -91,13 +91,13 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       button:active {
         border: var(--button-activ-border);
         background-color: var(--button-background-focus-color);
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       input {
         flex: 1;
         border: 0;
-        border-bottom: var(--border-dark-color);
+        border-bottom: var(--border-dim-color);
         padding: var(--input-padding);
         font: var(--input-font);
         color: var(--primary-text-color);
@@ -106,7 +106,7 @@ export class ThingsEditorProcedureParameters extends OxFormField {
 
       input:focus {
         outline: none;
-        border-bottom: 1px solid var(--primary-color);
+        border-bottom: 1px solid var(--md-sys-color-primary);
       }
 
       button.hidden {
@@ -194,13 +194,13 @@ export class ThingsEditorProcedureParameters extends OxFormField {
             <input type="number" data-max-size placeholder="max-size" .value=${String(item.maxSize)} />
 
             <button class="record-action" @click=${(e: MouseEvent) => this._delete(e)} tabindex="-1">
-              <mwc-icon>remove</mwc-icon>
+              <md-icon>remove</md-icon>
             </button>
             <button class="record-action" @click=${(e: MouseEvent) => this._up(e)} tabindex="-1">
-              <mwc-icon>arrow_upward</mwc-icon>
+              <md-icon>arrow_upward</md-icon>
             </button>
             <button class="record-action" @click=${(e: MouseEvent) => this._down(e)} tabindex="-1">
-              <mwc-icon>arrow_downward</mwc-icon>
+              <md-icon>arrow_downward</md-icon>
             </button>
           </div>
         `
@@ -231,10 +231,10 @@ export class ThingsEditorProcedureParameters extends OxFormField {
         <input type="number" data-max-size placeholder="max-size" value="" />
 
         <button class="record-action" @click=${(e: MouseEvent) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
+          <md-icon>add</md-icon>
         </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
+        <button class="hidden"><md-icon>add</md-icon></button>
       </div>
 
       <datalist id="step-list">${steps.map(id => html` <option value=${id}></option> `)}</datalist>
@@ -418,9 +418,10 @@ export class ThingsEditorProcedureParameters extends OxFormField {
       const dir = (record.querySelector('[data-dir]') as HTMLInputElement).value
       const type = (record.querySelector('[data-type]') as HTMLInputElement).value
       const val = (record.querySelector('[data-val]') as HTMLInputElement).value
+      const accessor = (record.querySelector('[data-accessor]') as HTMLInputElement).value
       const maxSize = (record.querySelector('[data-max-size]') as HTMLInputElement).valueAsNumber
 
-      return this._adjust({ name, dir, type, val, maxSize })
+      return this._adjust({ name, dir, type, val, accessor, maxSize })
     })
 
     this._updateValue()

package/client/editors/things-editor-tag-scenarios.ts

@@ -79,7 +79,7 @@ export default class ThingsEditorTagScenarios extends LitElement {
       input:not([type='checkbox']) {
         border: 1px solid rgba(0, 0, 0, 0.2);
         border-radius: 4px;
-        background-color: white;
+        background-color: var(--md-sys-color-surface);
       }
     `
   ]

package/client/grist/connection-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import gql from 'graphql-tag'
 import { customElement } from 'lit/decorators.js'
 

package/client/grist/connector-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import gql from 'graphql-tag'
 import { customElement } from 'lit/decorators.js'
 

package/client/grist/dynamic-selector.ts

@@ -1,5 +1,3 @@
-import '@material/mwc-icon'
-
 import { OxGristEditor } from '@operato/data-grist'
 import { html } from 'lit'
 
@@ -35,9 +33,7 @@ export class DynamicSelector extends OxGristEditor {
 
     return html`
       <select>
-        ${options.map(
-          option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `
-        )}
+        ${options.map(option => html` <option ?selected=${option.name == this.value} value=${option.name}>${option.name}</option> `)}
       </select>
     `
   }

package/client/pages/connection-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,30 +8,24 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { CommonGristStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'
 
 @customElement('connection-importer')
 export class ConnectionImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
+
       ox-grist {
         flex: 1;
       }
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -75,7 +70,7 @@ export class ConnectionImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/connection.ts

@@ -38,11 +38,11 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
         flex-direction: row;
         justify-content: space-between;
 
-        background-color: white;
+        background-color: var(--md-sys-color-surface);
       }
 
       #filters > * {
-        padding: var(--padding-default) var(--padding-wide);
+        padding: var(--spacing-medium) var(--spacing-large);
       }
     `
   ]
@@ -140,7 +140,8 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           label: true,
           header: i18next.t('field.name'),
           record: {
-            editable: true
+            editable: true,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
@@ -174,7 +175,8 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           label: true,
           header: i18next.t('field.active'),
           record: {
-            editable: true
+            editable: true,
+            align: 'center'
           },
           sortable: true,
           width: 60
@@ -187,7 +189,8 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           record: {
             renderer: HelpDecoratedRenderer,
             editable: true,
-            help: value => this.connectors?.[value]?.help
+            help: value => this.connectors?.[value]?.help,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
@@ -198,7 +201,8 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           name: 'endpoint',
           header: i18next.t('field.endpoint'),
           record: {
-            editable: true
+            editable: true,
+            mandatory: true
           },
           filter: 'search',
           sortable: true,
@@ -220,7 +224,20 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
           width: 100
         },
         {
-          type: 'object',
+          type: 'resource-object',
+          name: 'edge',
+          header: i18next.t('field.edge-server'),
+          record: {
+            editable: true,
+            options: {
+              queryName: 'edges'
+            }
+          },
+          sortable: true,
+          width: 120
+        },
+        {
+          type: 'resource-object',
           name: 'updater',
           header: i18next.t('field.updater'),
           record: {
@@ -268,6 +285,10 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
               name
               description
               type
+              edge {
+                id
+                name
+              }
               endpoint
               active
               state
@@ -310,6 +331,7 @@ export class Connection extends connect(store)(localize(i18next)(PageView)) {
                 label
                 placeholder
                 property
+                styles
               }
             }
           }

package/client/pages/integration-analysis.ts

@@ -22,7 +22,7 @@ export class IntegrationAnalysis extends localize(i18next)(PageView) {
         flex-direction: column;
 
         overflow: hidden;
-        background-color: var(--main-section-background-color);
+        background-color: var(--md-sys-color-background);
         padding: 0;
       }
 

package/client/pages/integration-monitor.ts

@@ -43,12 +43,12 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
         flex-direction: column;
 
         overflow: hidden;
-        background-color: var(--main-section-background-color);
-        padding: var(--padding-wide);
+        background-color: var(--md-sys-color-background);
+        padding: var(--spacing-large);
       }
 
       integration-summary {
-        margin-bottom: var(--margin-wide);
+        margin-bottom: var(--spacing-large);
       }
 
       content {
@@ -65,15 +65,15 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
 
       scenarios-monitor {
         flex: 1;
-        margin: 0 var(--margin-wide) 0 0;
+        margin: 0 var(--spacing-large) 0 0;
       }
 
       @media screen and (max-width: 480px) {
         :host {
-          padding: var(--padding-default);
+          padding: var(--spacing-medium);
         }
         integration-summary {
-          margin-bottom: var(--margin-default);
+          margin-bottom: var(--spacing-medium);
         }
         content {
           display: block;
@@ -81,7 +81,7 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
         }
         scenarios-monitor {
           min-height: 350px;
-          margin: 0 0 var(--margin-default) 0;
+          margin: 0 0 var(--spacing-medium) 0;
         }
         connections-monitor {
           width: initial;
@@ -108,9 +108,18 @@ export class IntegrationMonitor extends localize(i18next)(PageView) {
 
   render() {
     return html`
-      <integration-summary .pendings=${this.pendings} .scenarios=${this.scenarios} .connections=${this.connections}></integration-summary>
+      <integration-summary
+        .pendings=${this.pendings}
+        .scenarios=${this.scenarios}
+        .connections=${this.connections}
+      ></integration-summary>
       <content>
-        <scenarios-monitor .scenarios=${this.scenarios} .pendings=${this.pendings} .colorIndex=${this.colorIndex || {}} .running=${!!this.active}></scenarios-monitor>
+        <scenarios-monitor
+          .scenarios=${this.scenarios}
+          .pendings=${this.pendings}
+          .colorIndex=${this.colorIndex || {}}
+          .running=${!!this.active}
+        ></scenarios-monitor>
         <connections-monitor .connections=${this.connections}></connections-monitor>
       </content>
     `

package/client/pages/scenario-detail.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist/ox-grist.js'
 
 import gql from 'graphql-tag'
@@ -9,39 +10,25 @@ import { client } from '@operato/graphql'
 import { HelpDecoratedRenderer } from '@operato/help/help-decorated-renderer.js'
 import { i18next, localize } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 const SelectFields = ['name', 'description', 'sequence', 'task', 'connection', 'params', 'result', 'skip', 'log']
 
 @customElement('scenario-detail')
 class ScenarioDetail extends localize(i18next)(LitElement) {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      form {
-        position: relative;
-      }
-      [danger] {
-        --mdc-theme-primary: var(--mdc-danger-button-primary-color);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -59,8 +46,10 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
         .fetchHandler=${this.fetchHandler.bind(this)}
       ></ox-grist>
       <div class="button-container">
-        <mwc-button raised danger @click=${this._deleteSteps.bind(this)}>${i18next.t('button.delete')}</mwc-button>
-        <mwc-button raised @click=${this._updateSteps.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button danger @click=${this._deleteSteps.bind(this)}>
+          <md-icon>delete</md-icon>${i18next.t('button.delete')}
+        </button>
+        <button @click=${this._updateSteps.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }
@@ -253,6 +242,7 @@ class ScenarioDetail extends localize(i18next)(LitElement) {
               label
               placeholder
               property
+              styles
             }
           }
         }

package/client/pages/scenario-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,30 +8,24 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
-import { CommonGristStyles } from '@operato/styles'
+import { ButtonContainerStyles, CommonGristStyles } from '@operato/styles'
 
 @customElement('scenario-importer')
 export class ScenarioImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     CommonGristStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
+
       ox-grist {
         flex: 1;
       }
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -81,7 +76,7 @@ export class ScenarioImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click=${this.save.bind(this)}>${i18next.t('button.save')}</mwc-button>
+        <button @click=${this.save.bind(this)}><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }