Refine workflow editor save modal

Author: pengz1

README.md

@@ -21,7 +21,7 @@ To Be Added.
 ## Dependencies
 What you need to run this app:
 * `node` and `npm` (`brew install node`)
-* Ensure you're running the latest versions Node `v6.x.x`+ (or `v7.x.x`) and NPM `3.x.x`+
+* Ensure you're running the latest versions Node `v8.x.x` and NPM `5.x.x`+
 
 > If you have `nvm` installed, which is highly recommended (`brew install nvm`) you can do a `nvm install --lts && nvm use` in `$` to run with the latest Node LTS. You can also have this `zsh` done for you [automatically](https://github.com/creationix/nvm#calling-nvm-use-automatically-in-a-directory-with-a-nvmrc-file)
 

src/app/header/header.component.html

@@ -1,7 +1,7 @@
 <header class="header-6">
   <div class="branding">
     <a class="nav-link">
-      <img src="../../assets/logo-icon.png" alt="">
+      <img src="../../assets/rackhd-icon.png" alt="">
       <span class="title" style="padding-left: 10px">RackHD</span>
     </a>
   </div>

src/app/header/header.component.scss

@@ -4,15 +4,3 @@ header {
   width: 100vw;
   z-index: 9999;
 }
-.app-header {
-  .logo-placeholder {
-    color: white;
-    font-size: x-large;
-  }
-  .branding {
-    img {
-      height: 60px;
-      width: 60px;
-    }
-  }
-}

src/app/workflow-center/workflow-editor/workflow-editor.component.html

@@ -22,9 +22,9 @@
         </button>
         <div class="editor-dropdown">
           <dropdown-group [data]="workflowStore" [columns]="columns" [placeholders]="placeholders" [fields]="fields"
-                          needSearchIcon=true
-                          (selected)="onSelected($event)" (cleared)="onRefresh()">
-          </dropdown-group>
+             needSearchIcon=true
+             (selected)="onSelected($event)" (cleared)="onRefresh()">
+            </dropdown-group>
         </div>
       </div>
       <div #jsoneditor id="jsoneditor"></div>
@@ -33,31 +33,21 @@
 
   <clr-modal [(clrModalOpen)]="isShowModal" [clrModalSize]="'xl'">
 
-    <div class="modal-title" *ngIf="saveConfirmed && (selectWorkflow.injectableName == '')">
-      <h3 style="color:red">No workflow selected.</h3>
-    </div>
+    <h3 class="modal-title" [ngClass]="{'red-title': !isWorkflowValid}">{{saveGraphInfo.status}}</h3>
 
-    <div class="modal-body" *ngIf="saveConfirmed && !(selectWorkflow.injectableName == '')">
-      <p>Are you sure to save {{this.editor.get().injectableName}} ?</p>
+    <div class="modal-body">
+      <p>{{saveGraphInfo.notes}}</p>
     </div>
 
-    <div class="modal-footer" *ngIf="saveConfirmed && !(selectWorkflow.injectableName == '')">
-      <button class="btn btn-outline" type="button" (click)="saveConfirmed = false; isShowModal = false;">No</button>
-      <button class="btn btn-primary" type="button" (click)="saveConfirmed = false; saveWorkflow()">Yes</button>
+    <div class="modal-footer" *ngIf="isWorkflowValid && isShowModal && saveGraphInfo.type === 0">
+      <button class="btn btn-outline" type="button" (click)="isShowModal = false;">No</button>
+      <button class="btn btn-primary" type="button" (click)="saveWorkflow()">Yes</button>
     </div>
 
-    <h3 class="modal-title" *ngIf="isShowModal && (!saveConfirmed)">{{saveGraphInfo.status}}</h3>
-
-    <div class="modal-body" *ngIf="isShowModal && (!saveConfirmed)">
-      <p>{{saveGraphInfo.notes}}</p>
-    </div>
-    <div class="modal-footer" *ngIf="isShowModal && (!saveConfirmed) && saveGraphInfo.type === 1">
+    <div class="modal-footer" *ngIf="isShowModal && saveGraphInfo.type === 1">
       <button class="btn btn-outline" type="button" (click)="isShowModal = false">No</button>
       <button class="btn btn-primary" type="button" (click)="jumpRunWorkflow()">Yes</button>
     </div>
-    <div class="modal-footer" *ngIf="isShowModal && (!saveConfirmed) && saveGraphInfo.type === 2">
-      <button class="btn btn-primary" type="button" (click)="isShowModal = false">Confirm</button>
-    </div>
   </clr-modal>
 
   <clr-modal [(clrModalOpen)]="isWaitOnMismatch" [clrModalSize]="'lg'">

src/app/workflow-center/workflow-editor/workflow-editor.component.scss

@@ -3,8 +3,8 @@
     float: right;
   }
   .workflow-json-operation {
-    padding-bottom: 45px;
     display: inline-flex;
+    padding-bottom: 60px;
     width: 100%;
 
     p {
@@ -34,3 +34,7 @@
     }
   }
 }
+
+.red-title {
+  color: #ff0000; //Red
+}

src/app/workflow-center/workflow-editor/workflow-editor.component.ts

@@ -5,7 +5,6 @@ import { GraphService } from '../../services/rackhd/graph.service';
 import { JSONEditor } from '../../utils/json-editor';
 
 const global = (window as any);
-const SAVE_INFO_INIT = {status: "Saving", notes: 'Waiting...', type: 0};
 
 @Component({
   selector: 'app-workflow-editor',
@@ -17,8 +16,8 @@ export class WorkflowEditorComponent implements OnInit {
   selectWorkflow: any;
   editor: any;
   isShowModal: boolean;
-  saveConfirmed: boolean;
-  saveGraphInfo = SAVE_INFO_INIT;
+  saveGraphInfo: any = {};
+  isWorkflowValid: boolean;
 
   workflowStore: any[] = [];
 
@@ -35,7 +34,6 @@ export class WorkflowEditorComponent implements OnInit {
   clearInput() {
     this.onWorkflowChanged(this.graphService.getInitGraph());
     this.pushDataToCanvas();
-    this.saveGraphInfo = SAVE_INFO_INIT;
   }
 
   putWorkflowIntoCanvas(injectableName: string) {
@@ -64,12 +62,8 @@ export class WorkflowEditorComponent implements OnInit {
 
   ngOnInit() {
     this.isShowModal = false;
-    this.saveConfirmed = false;
     this.selectWorkflow = this.graphService.getInitGraph();
     let container = document.getElementById('jsoneditor');
-    let canvas = document.getElementById('mycanvas');
-    canvas.setAttribute('height', "1000px");
-    canvas.setAttribute('width', "800px");
     let options = {mode: 'code'};
     this.editor = new JSONEditor(container, options);
     this.updateEditor(this.selectWorkflow);
@@ -124,7 +118,22 @@ export class WorkflowEditorComponent implements OnInit {
   }
 
   saveConfirm() {
-    this.saveConfirmed = true;
+    this.isWorkflowValid = this.selectWorkflow && this.selectWorkflow.injectableName
+      && this.selectWorkflow.friendlyName && _.startsWith(this.selectWorkflow.injectableName, "Graph.")
+      && this.selectWorkflow.tasks && (this.selectWorkflow.tasks.length > 0);
+    if (this.isWorkflowValid) {
+      this.saveGraphInfo = {
+        status: "Are you sure to save " + this.selectWorkflow.injectableName,
+        notes: '',
+        type: 0
+      }
+    } else {
+      this.saveGraphInfo = {
+        status: "Invalid workflow payload!",
+        notes: "Please make sure 'injectableName', 'friendlyName' and 'tasks' are not empty! Make sure 'injectableName' starts with 'Graph.'",
+        type: 0
+      };
+    }
     this.isShowModal = true;
   }
 
@@ -135,7 +144,7 @@ export class WorkflowEditorComponent implements OnInit {
         res => {
           this.saveGraphInfo = {
             status: "Saved Successfully!",
-            notes: 'The workflow ' + this.selectWorkflow.injectableName + ' has been saved successfully. Do you want to run it now?',
+            notes: 'Workflow ' + this.selectWorkflow.injectableName + ' has been saved successfully. Do you want to run it now?',
             type: 1
           };
         },