Add initial version of the workflows manager
The workflows manager can be accessed from the extension options, and
will let the user add custom workflows, edit and view the already
created ones, and delete them.
As of now, the only feature implemented is a functional prototype of the
"new workflow" dialog, which is missing the workflow title field and the
functionality to persist the designed workflows. The only action
supported in the workflows editor is the "reply with canned response"
action.
Bug: twpowertools:74
Change-Id: I0d93bf0fdcda92a449855c1f8470f8b7068839aa
diff --git a/src/workflows/manager/components/AddDialog.js b/src/workflows/manager/components/AddDialog.js
new file mode 100644
index 0000000..a2b5691
--- /dev/null
+++ b/src/workflows/manager/components/AddDialog.js
@@ -0,0 +1,94 @@
+import '@material/mwc-dialog/mwc-dialog.js';
+import '@material/web/button/text-button.js';
+import '@material/web/button/tonal-button.js';
+import './WorkflowEditor.js';
+
+import {css, html, LitElement} from 'lit';
+import {createRef, ref} from 'lit/directives/ref.js';
+
+import * as pb from '../../proto/main_pb.js';
+
+export default class WFAddDialog extends LitElement {
+ static properties = {
+ open: {type: Boolean},
+ };
+
+ static styles = css`
+ :host {
+ --mdc-dialog-content-ink-color: var(--mdc-theme-on-surface, #000);
+ }
+ `;
+
+ workflowEditorRef = createRef();
+
+ constructor() {
+ super();
+ this.open = false;
+ }
+
+ render() {
+ return html`
+ <mwc-dialog
+ heading="New workflow"
+ ?open=${this.open}
+ @opening=${this._openingDialog}
+ @closing=${this._closingDialog}
+ @closed=${this._closedDialog}>
+ <wf-workflow-editor ${ref(this.workflowEditorRef)}>
+ </wf-workflow-editor>
+ <md-tonal-button
+ slot="primaryAction"
+ label="Add"
+ @click=${this._save}>
+ </md-tonal-button>
+ <md-text-button
+ slot="secondaryAction"
+ dialogAction="cancel"
+ label="Cancel">
+ </md-text-button>
+ </mwc-dialog>
+ `;
+ }
+
+ firstUpdated() {
+ this._resetWorkflow();
+ }
+
+ _resetWorkflow() {
+ this.workflowEditorRef.value.workflow = this._defaultWorkflow();
+ }
+
+ _getWorkflow() {
+ return this.workflowEditorRef.value.workflow;
+ }
+
+ _defaultWorkflow() {
+ let wf = new pb.workflows.Workflow();
+ let action = new pb.workflows.Action();
+ let rAction = new pb.workflows.Action.ReplyWithCRAction();
+ action.setReplyWithCrAction(rAction);
+ wf.addActions(action);
+ return wf;
+ }
+
+ _openingDialog() {
+ this.open = true;
+ }
+
+ _closingDialog() {
+ this.open = false;
+ }
+
+ _closedDialog(e) {
+ if (e.detail?.action === 'cancel') this._resetWorkflow();
+ }
+
+ _save() {
+ let success = this.workflowEditorRef.value.save();
+ if (success) {
+ this.open = false;
+ this._resetWorkflow();
+ }
+ }
+}
+window.customElements.define('wf-add-dialog', WFAddDialog);