Workflow manager: edit and delete workflows

This CL adds the ability to view/edit and delete workflows in the
workflow manager. With this, the workflow manager initial prototype is
complete, since it allows the user to fully manage their workflows, even
if the UI might be subject to change to further improve it in the
future.

Bug: twpowertools:74
Change-Id: I4f8d1b7ab54dcc600dbd10fcb8e605bcb61d36bb
diff --git a/src/workflows/manager/index.js b/src/workflows/manager/index.js
index af0f653..01710b4 100644
--- a/src/workflows/manager/index.js
+++ b/src/workflows/manager/index.js
@@ -1,6 +1,7 @@
 import '@material/web/fab/fab.js';
 import './components/List.js';
 import './components/AddDialog.js';
+import './components/WorkflowDialog.js';
 
 import {css, html, LitElement} from 'lit';
 import {createRef, ref} from 'lit/directives/ref.js';
@@ -32,6 +33,7 @@
   ];
 
   addFabRef = createRef();
+  addDialog = createRef();
 
   constructor() {
     super();
@@ -52,7 +54,8 @@
           icon="add"
           @click=${this._showAddDialog}>
       </md-fab>
-      <wf-add-dialog></wf-add-dialog>
+      <wf-add-dialog ${ref(this.addDialog)}>
+      </wf-add-dialog>
     `;
   }
 
@@ -64,7 +67,7 @@
   }
 
   _showAddDialog() {
-    this.renderRoot.querySelector('wf-add-dialog').open = true;
+    this.addDialog.value.open = true;
   }
 }
 window.customElements.define('wf-app', WFApp);