Adding Template button to new service instance + cypress test + filter

Issue-ID: VID-724
Change-Id: Ie69a32dd6b74de57fd747a92935c1ce5edb86351
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>
Signed-off-by: Ittay Stern <ittay.stern@att.com>

1 files changed, 25 insertions, 20 deletions

diff --git a/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts b/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
index 07f4d481b..a7b8ac744 100644
--- a/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
+++ b/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
@@ -3,18 +3,20 @@ import {HighlightPipe} from "../../pipes/highlight/highlight-filter.pipe";
 import * as _ from 'lodash';
 
 @Component({
-  selector : 'custom-ellipsis',
+  selector: 'custom-ellipsis',
   template: `
     <span
-          sdc-tooltip
-          class="ellipsis"
-          id="{{id}}"
-          [innerHtml]="displayValue | safe : 'html'"
-          [ngClass]="{'breakWord' : breakWord == true}"
-          [tooltip-text]="value">
+      sdc-tooltip
+      class="ellipsis"
+      [attr.data-tests-id]="dataTestId"
+      id="{{id}}"
+      [innerHtml]="displayValue | safe : 'html'"
+      [ngStyle]="{'white-space' :  showDots ? 'nowrap' : 'initial'}"
+      [ngClass]="{'breakWord' : breakWord == true}"
+      [tooltip-text]="value">
       </span>`,
-  styles : [
-    `
+  styles: [
+      `
       .ellipsis {
         white-space: nowrap;
         overflow: hidden;
@@ -23,30 +25,33 @@ import * as _ from 'lodash';
         width: 99%;
         text-align: left;
       }
-      
+
       .breakWord {
         word-wrap: break-word;
         white-space: normal;
       }
     `
   ],
-  providers : [HighlightPipe]
+  providers: [HighlightPipe]
 })
-export class EllipsisComponent implements OnChanges{
-  @Input() value : string;
-  @Input() id : string;
-  @Input() hightlight : string;
-  @Input() breakWord : boolean = false;
+export class EllipsisComponent implements OnChanges {
+  @Input() value: string;
+  @Input() id: string;
+  @Input() hightlight: string;
+  @Input() breakWord: boolean = false;
+  @Input() dataTestId: string;
+  @Input() showDots: boolean = false;
+
+  displayValue: string;
 
-  displayValue : string;
-  constructor(private _highlightPipe : HighlightPipe){
+  constructor(private _highlightPipe: HighlightPipe) {
     this.displayValue = this.value;
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.displayValue = this.value;
-    if(!_.isNil(this.hightlight)){
-      this.displayValue = this._highlightPipe.transform(this.value ,this.hightlight ? this.hightlight : '');
+    if (!_.isNil(this.hightlight)) {
+      this.displayValue = this._highlightPipe.transform(this.value, this.hightlight ? this.hightlight : '');
     }
   }
 }