Enable searching on the blacklist tab; adjust the length of keywords in te icon

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.html

@@ -334,7 +334,7 @@
         <p [ngClass]="{'animation-blink': searchMode}"
            matTooltip="{{'topic-cloud-dialog.keyword-counter' | translate}}">
           {{searchMode ? filteredKeywords.length :
-          keywords.length}}</p>
+            selectedTabIndex === 0 ? keywords.length : blacklistKeywords.length}}</p>
       </div>
       <div class="margin-left vertical-center">
         <button [ngClass]="{'animation-blink': sortMode!=='alphabetic'}" mat-icon-button [matMenuTriggerFor]="sortMenu">
@@ -361,16 +361,15 @@
       </button>
     </mat-menu>
 
-    <mat-card class="color-surface"
-              *ngIf="(keywords.length === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading">
-      <p class="color-on-surface" fxLayoutAlign="center">
-        {{'topic-cloud-dialog.no-keywords-note' | translate}}
-      </p>
-    </mat-card>
-
     <mat-accordion>
-      <mat-tab-group animationDuration="0ms" mat-stretch-tabs mat-align-tabs="center">
+      <mat-tab-group [selectedIndex]="selectedTabIndex" (selectedIndexChange)="changeTabIndex()" animationDuration="0ms" mat-stretch-tabs mat-align-tabs="center">
         <mat-tab label="{{'topic-cloud-dialog.keywords' | translate}}">
+          <mat-card class="color-surface"
+              *ngIf="(keywords.length === 0 || (searchMode && filteredKeywords.length === 0))&&!isLoading">
+            <p class="color-on-surface" fxLayoutAlign="center">
+              {{'topic-cloud-dialog.no-keywords-note' | translate}}
+            </p>
+          </mat-card>
           <div *ngFor="let keyword of (searchMode ? filteredKeywords : keywords); let i = index">
             <mat-expansion-panel class="color-surface" (opened)="panelOpenState = true"
               (closed)="panelOpenState = edit = false" [attr.data-index]="i"

src/app/components/shared/_dialogs/topic-cloud-administration/topic-cloud-administration.component.ts

@@ -59,6 +59,7 @@ export class TopicCloudAdministrationComponent implements OnInit, OnDestroy {
   minUpvotes: string;
   startDate: string;
   endDate: string;
+  selectedTabIndex = 0;
 
   keywords: Keyword[] = [];
   private topicCloudAdminData: TopicCloudAdminData;
@@ -105,6 +106,13 @@ export class TopicCloudAdministrationComponent implements OnInit, OnDestroy {
     this.initializeKeywords();
   }
 
+  changeTabIndex() {
+    this.selectedTabIndex = this.selectedTabIndex === 0 ? 1 : 0;
+    if (this.searchMode) {
+      this.searchKeyword();
+    }
+  }
+
   removeFromKeywords(comment: Comment) {
     for (const keyword of this.keywords) {
       keyword.comments.forEach(_comment => {
@@ -450,10 +458,11 @@ export class TopicCloudAdministrationComponent implements OnInit, OnDestroy {
   }
 
   searchKeyword(): void {
+    const toFilteredKeywords = this.selectedTabIndex === 0 ? this.keywords : this.blacklistKeywords;
     if (!this.searchedKeyword) {
       this.searchMode = false;
     } else {
-      this.filteredKeywords = this.keywords.filter(keyword =>
+      this.filteredKeywords = toFilteredKeywords.filter(keyword =>
         keyword.keyword.toLowerCase().includes(this.searchedKeyword.toLowerCase())
       );
       this.searchMode = true;