UI: gateway dashboard connectors improvements

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts

@@ -94,15 +94,16 @@ export class EllipsisChipListDirective implements OnDestroy {
         this.renderer.setStyle(ellipsisChip, 'display', 'none');
       }
     } else if (this.chipsValue.length === 1) {
-      this.renderer.setStyle(ellipsisChip, 'display', 'none');
       const chipLabelContainer = chipNodes[0].querySelector('.mdc-evolution-chip__action');
       const textLabelContainer = chipLabelContainer.querySelector('.mdc-evolution-chip__text-label');
       const leftPadding = parseFloat(this.window.getComputedStyle(chipLabelContainer).paddingLeft) || 0;
       const rightPadding = parseFloat(this.window.getComputedStyle(chipLabelContainer).paddingRight) || 0;
-
       const computedTextWidth = chipListElement.offsetWidth - margin -
         (leftPadding + rightPadding);
 
+      this.renderer.setStyle(ellipsisChip, 'display', 'none');
+      this.renderer.setStyle(chipNodes[0], 'display', 'inline-flex');
+
       this.renderer.setStyle(textLabelContainer, 'max-width', computedTextWidth + 'px');
       this.renderer.setStyle(textLabelContainer, 'overflow', 'hidden');
       this.renderer.setStyle(textLabelContainer, 'text-overflow', 'ellipsis');

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table.component.html

@@ -105,7 +105,7 @@
         <mat-header-row [ngClass]="{'mat-row-select': true}" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
         <mat-row *matRowDef="let mapping; columns: displayedColumns;"></mat-row>
       </table>
-      <section [fxShow]="dataSource.isEmpty() | async" fxLayoutAlign="center center"
+      <section [fxShow]="!textSearchMode && (dataSource.isEmpty() | async)" fxLayoutAlign="center center"
                class="mat-headline-5 tb-absolute-fill tb-add-new">
         <button mat-button class="connector"
                 (click)="manageMapping($event)">
@@ -114,5 +114,10 @@
         </button>
       </section>
     </div>
+    <span [fxShow]="textSearchMode && (dataSource.isEmpty() | async)"
+          fxLayoutAlign="center center"
+          class="no-data-found" translate>
+      widget.no-data-found
+    </span>
   </div>
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table.component.scss

@@ -71,6 +71,10 @@
     }
   }
 
+  .no-data-found {
+    height: calc(100% - 120px);
+  }
+
   @media #{$mat-xs} {
     .mat-toolbar {
       height: auto;

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table.component.ts

@@ -215,6 +215,7 @@ export class MappingTableComponent extends PageComponent implements ControlValue
   }
 
   exitFilterMode() {
+    this.updateTableData(this.mappingFormGroup.value);
     this.textSearchMode = false;
     this.textSearch.reset();
   }