feat(bridge): Add hint for tree list select component and change texts (

#5576)
keptn · Dec 7, 2021 · 0707ff7 · 0707ff7
1 parent 12d222b
commit 0707ff7
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.html b/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.html
@@ -1,5 +1,8 @@
 <div class="select-overlay-header pl-3" fxLayout="row" fxLayoutAlign="space-between center">
-  <div>{{ options.headerText }}</div>
+  <div fxLayout="row">
+    {{ options.headerText }}
+    <dt-icon *ngIf="options.hintText" name="information" [dtOverlay]="overlay"></dt-icon>
+  </div>
   <button dt-icon-button variant="primary" (click)="closeDialog.emit()">
     <dt-icon name="abort"></dt-icon>
   </button>
@@ -19,3 +22,7 @@
 <ng-template #empty>
   <div class="container" [innerHTML]="options.emptyText"></div>
 </ng-template>
+
+<ng-template #overlay>
+  {{ options.hintText }}
+</ng-template>
diff --git a/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.scss b/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.scss
@@ -33,6 +33,15 @@
     border-color: transparent transparent $turquoise-600 transparent;
   }
 
+  > div > .dt-icon {
+    width: 20px;
+    height: 20px;
+    margin-left: 5px;
+    position: relative;
+    top: 1px;
+    fill: #ffffff;
+  }
+
 }
 
 .tree-entry-selectable {

diff --git a/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.ts b/bridge/client/app/_components/ktb-tree-list-select/ktb-tree-list-select.component.ts
@@ -33,6 +33,7 @@ export class SelectTreeFlatNode implements SelectTreeNode {
 export type TreeListSelectOptions = {
   headerText: string;
   emptyText: string;
+  hintText: string;
 };
 
 @Directive({
@@ -43,7 +44,7 @@ export class KtbTreeListSelectDirective implements OnInit {
   private contentRef: ComponentRef<KtbTreeListSelectComponent> | undefined;
 
   @Input() data: SelectTreeNode[] = [];
-  @Input() options: TreeListSelectOptions = { headerText: '', emptyText: '' };
+  @Input() options: TreeListSelectOptions = { headerText: '', emptyText: '', hintText: '' };
   @Output() selected: EventEmitter<string> = new EventEmitter<string>();
 
   @HostListener('click')
@@ -136,7 +137,7 @@ export class KtbTreeListSelectComponent {
     this.dataSource.data = data;
   }
 
-  @Input() options: TreeListSelectOptions = { headerText: '', emptyText: '' };
+  @Input() options: TreeListSelectOptions = { headerText: '', emptyText: '', hintText: '' };
 
   @Output() closeDialog: EventEmitter<void> = new EventEmitter<void>();
   @Output() selected: EventEmitter<string> = new EventEmitter<string>();

diff --git a/bridge/client/app/_components/ktb-variable-selector/ktb-variable-selector.component.ts b/bridge/client/app/_components/ktb-variable-selector/ktb-variable-selector.component.ts
@@ -11,6 +11,7 @@ export class KtbVariableSelectorComponent {
   public options: TreeListSelectOptions = {
     headerText: 'Select element',
     emptyText: 'No elements available.',
+    hintText: '',
   };
   @Output() changed: EventEmitter<void> = new EventEmitter<void>();
 
@@ -30,6 +31,11 @@ export class KtbVariableSelectorComponent {
     this.options.emptyText = text;
   }
 
+  @Input()
+  set hintText(text: string) {
+    this.options.hintText = text;
+  }
+
   public setVariable(variable: string): void {
     if (this.control) {
       const firstPart = this.control.value.slice(0, this.selectionStart);

diff --git a/bridge/client/app/_components/ktb-webhook-settings/ktb-webhook-settings.component.html b/bridge/client/app/_components/ktb-webhook-settings/ktb-webhook-settings.component.html
@@ -177,8 +177,9 @@ <h2>Webhook configuration</h2>
     [title]="'Select secret'"
     [label]="'Add secret'"
     [emptyText]="
-      'No secrets can be found.<p>Secrets can be configured under the menu entry &quot;Secrets&quot; in the Uniform.</p>'
+      'No secrets for the scope keptn-webhook-service are available.<p>Configure secrets for the scope keptn-webhook-service under the menu entry <span class=&quot;bold&quot;>Secrets</span> in the Uniform.</p>'
     "
+    [hintText]="'Only secrets of scope keptn-webhook-secret can be referenced.'"
     [control]="getFormControl(controlName, index)"
     [selectionStart]="selectionStart"
     (changed)="onWebhookFormChange()"