Stream deploy: add copy-to-clipboard

Resolves #663

Author: oodamien

ui/src/app/streams/stream-deploy/builder/builder.component.html

@@ -353,6 +353,9 @@
           <button tabindex="200" id="btn-export" type="button" class="btn btn-default" (click)="exportProps()">
             Export
           </button>
+          <button tabindex="200" id="btn-copy" type="button" class="btn btn-default" (click)="copyToClipboard()">
+            Copy to Clipboard
+          </button>
           <button tabindex="200" id="btn-deploy-builder" type="submit" class="btn btn-primary"
                   [disabled]="!isSubmittable(builder)">
             Deploy the stream

ui/src/app/streams/stream-deploy/builder/builder.component.ts

@@ -50,6 +50,11 @@ export class StreamDeployBuilderComponent implements OnInit, OnDestroy {
    */
   @Output() deploy = new EventEmitter();
 
+  /**
+   * Emit for request copy
+   */
+  @Output() copyProperties = new EventEmitter();
+
   /**
    * Properties to load
    */
@@ -575,4 +580,11 @@ export class StreamDeployBuilderComponent implements OnInit, OnDestroy {
     this.exportProperties.emit(this.getProperties());
   }
 
+  /**
+   * Copye to clipboard
+   */
+  copyToClipboard() {
+    this.copyProperties.emit(this.getProperties());
+  }
+
 }

ui/src/app/streams/stream-deploy/free-text/free-text.component.html

@@ -8,7 +8,7 @@
         </div>
       </ng-template>
     </div>
-    <textarea dataflowAutoResize autofocus formControlName="input"></textarea>
+    <textarea dataflowAutoResize [dataflowFocus]="true" formControlName="input"></textarea>
   </div>
   <div class="input-file">
     <label class="btn-file btn btn-default" placement="top" delay="500"
@@ -20,9 +20,12 @@
   </div>
   <app-page-actions>
     <a id="btn-cancel" class="btn btn-default" routerLink="/streams">Cancel</a>
-    <button id="btn-export" type="button" class="btn btn-default" [disabled]="!isExportable" (click)="exportProps()">
+    <button id="btn-export" type="button" class="btn btn-default" (click)="exportProps()">
       Export
     </button>
+    <button tabindex="200" id="btn-copy" type="button" class="btn btn-default" (click)="copyToClipboard()">
+      Copy to Clipboard
+    </button>
     <button id="btn-deploy" type="submit" class="btn btn-primary" [disabled]="!isSubmittable">
       Deploy the stream
     </button>

ui/src/app/streams/stream-deploy/free-text/free-text.component.ts

@@ -31,6 +31,11 @@ export class StreamDeployFreeTextComponent implements OnInit, OnDestroy {
    */
   @Output() exportProperties = new EventEmitter();
 
+  /**
+   * Emit for request copy
+   */
+  @Output() copyProperties = new EventEmitter();
+
   /**
    * Emit for request deploy
    */
@@ -156,6 +161,13 @@ export class StreamDeployFreeTextComponent implements OnInit, OnDestroy {
     this.exportProperties.emit(this.getCleanProperties());
   }
 
+  /**
+   * Copye to clipboard
+   */
+  copyToClipboard() {
+    this.copyProperties.emit(this.getCleanProperties());
+  }
+
   /**
    * Emit a request deploy
    */

ui/src/app/streams/stream-deploy/stream-deploy.component.html

@@ -37,13 +37,13 @@
       <div *ngIf="state.view == 'builder'">
         <app-stream-deploy-builder [properties]="properties" [skipper]="config.skipper" [id]="config.id"
                                    (exportProperties)="runExport($event)" (update)="update($event)"
-                                   (deploy)="runDeploy($event)">
+                                   (deploy)="runDeploy($event)" (copyProperties)="runCopy($event)">
         </app-stream-deploy-builder>
       </div>
       <div *ngIf="state.view == 'freetext'">
         <app-stream-deploy-free-text [properties]="properties" (update)="update($event)" [id]="config.id"
                                      (exportProperties)="runExport($event)" (update)="update($event)"
-                                     (deploy)="runDeploy($event)">
+                                     (deploy)="runDeploy($event)" (copyProperties)="runCopy($event)">
         </app-stream-deploy-free-text>
       </div>
     </div>

ui/src/app/streams/stream-deploy/stream-deploy.component.ts

@@ -16,6 +16,7 @@ import { NotificationService } from '../../shared/services/notification.service'
 import { LoggerService } from '../../shared/services/logger.service';
 import { HttpAppError, AppError } from '../../shared/model/error.model';
 import { EMPTY } from 'rxjs/index';
+import { ClipboardService } from 'ngx-clipboard';
 
 /**
  * Component used to deploy stream definitions.
@@ -77,6 +78,7 @@ export class StreamDeployComponent implements OnInit, OnDestroy {
    * @param {LoggerService} loggerService
    * @param {StreamDeployService} streamDeployService
    * @param {Router} router
+   * @param {ClipboardService} clipboardService
    * @param {SharedAboutService} sharedAboutService
    */
   constructor(private route: ActivatedRoute,
@@ -86,6 +88,7 @@ export class StreamDeployComponent implements OnInit, OnDestroy {
               private loggerService: LoggerService,
               private streamDeployService: StreamDeployService,
               private router: Router,
+              private clipboardService: ClipboardService,
               private sharedAboutService: SharedAboutService) {
   }
 
@@ -192,11 +195,31 @@ export class StreamDeployComponent implements OnInit, OnDestroy {
    */
   runExport(value: Array<string>) {
     this.update(value);
-    const propertiesText = this.properties.join('\n');
-    const date = moment().format('YYYY-MM-HHmmss');
-    const filename = `${this.refConfig.id}_${date}.txt`;
-    const blob = new Blob([propertiesText], { type: 'text/plain' });
-    saveAs(blob, filename);
+    if (this.properties.length === 0) {
+      this.notificationService.error('There are no properties to export.');
+    } else {
+      const propertiesText = this.properties.join('\n');
+      const date = moment().format('YYYY-MM-HHmmss');
+      const filename = `${this.refConfig.id}_${date}.txt`;
+      const blob = new Blob([propertiesText], { type: 'text/plain' });
+      saveAs(blob, filename);
+    }
+  }
+
+  /**
+   * Run copy to clipboard
+   * Update the properties
+   * @param value Array of properties
+   */
+  runCopy(value: Array<string>) {
+    this.update(value);
+    if (this.properties.length === 0) {
+      this.notificationService.error('There are no properties to copy.');
+    } else {
+      const propertiesText = this.properties.join('\n');
+      this.clipboardService.copyFromContent(propertiesText);
+      this.notificationService.success('The properties have been copied to your clipboard.');
+    }
   }
 
   /**
@@ -242,7 +265,7 @@ export class StreamDeployComponent implements OnInit, OnDestroy {
     const busy = obs.pipe(takeUntil(this.ngUnsubscribe$))
       .subscribe(data => {
           if (update) {
-            this.notificationService.success(`Successfully update stream definition "${this.refConfig.id}"`);
+            this.notificationService.success(`Successfully updated stream definition "${this.refConfig.id}"`);
           } else {
             this.notificationService.success(`Successfully deployed stream definition "${this.refConfig.id}"`);
           }