[Tock Studio] Handle namespaces in state service + refresh dialogs on app change + misc

bot/admin/web/src/app/analytics/activity/activity.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 // import * as html2pdf from 'html2pdf.js';
 import { StateService } from 'src/app/core-nlp/state.service';
 import { BotConfigurationService } from 'src/app/core/bot-configuration.service';
@@ -28,13 +28,15 @@ import { UserAnalyticsQueryResult } from '../users/users';
 import { UserFilter } from '../users/users.component';
 import { toISOStringWithoutOffset } from '../../shared/utils';
 import { SelectBotEvent } from '../../shared/components';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'tock-activity',
   templateUrl: './activity.component.html',
   styleUrls: ['./activity.component.css']
 })
-export class ActivityComponent implements OnInit {
+export class ActivityComponent implements OnInit, OnDestroy {
+  destroy$ = new Subject();
   startDate: Date;
   endDate: Date;
   selectedConnectorId: string;
@@ -78,7 +80,7 @@ export class ActivityComponent implements OnInit {
   variationUsersPercentage: number;
 
   constructor(private state: StateService, private analytics: AnalyticsService, private botConfiguration: BotConfigurationService) {
-    this.botConfiguration.configurations.subscribe((configs) => {
+    this.botConfiguration.configurations.pipe(takeUntil(this.destroy$)).subscribe((configs) => {
       this.configurations = configs;
     });
     this.userPreferences = this.analytics.getUserPreferences();
@@ -375,4 +377,9 @@ export class ActivityComponent implements OnInit {
   waitAndRefresh() {
     setTimeout((_) => this.reload());
   }
+
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
 }

bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.html

@@ -137,17 +137,18 @@
   </nb-card-body>
 </nb-card>
 
+<nb-card
+  [nbSpinner]="loading"
+  *ngIf="loading"
+>
+  <nb-card-body class="loader"></nb-card-body>
+</nb-card>
+
 <div *ngIf="total !== -1">
-  <h1 *ngIf="total === 0">
-    No dialogs found!
-    <button
-      nbButton
-      ghost
-      (click)="refresh()"
-    >
-      <nb-icon icon="arrow-clockwise"></nb-icon>
-    </button>
-  </h1>
+  <tock-no-data-found
+    *ngIf="total === 0"
+    title="No dialogs found"
+  ></tock-no-data-found>
 
   <div
     infinite-scroll
@@ -191,11 +192,3 @@ <h1 *ngIf="total === 0">
     </div>
   </div>
 </div>
-
-<nb-card
-  [nbSpinner]="loading"
-  nbSpinnerStatus="primary"
-  *ngIf="loading"
->
-  <nb-card-body></nb-card-body>
-</nb-card>

bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.scss

@@ -13,3 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+.loader {
+  min-height: 20vh;
+}

bot/admin/web/src/app/analytics/dialogs/dialogs-list/dialogs-list.component.ts

@@ -69,32 +69,27 @@ export class DialogsListComponent implements OnInit, OnChanges, OnDestroy {
     private route: ActivatedRoute,
     public botSharedService: BotSharedService,
     private router: Router
-  ) {
-    this.state = state;
-
-    this.botConfiguration.configurations.pipe(takeUntil(this.destroy$)).subscribe((configs) => {
-      this.isSatisfactionRoute().subscribe((res) => {
-        this.botSharedService.getIntentsByApplication(this.state.currentApplication._id).subscribe((intents) => (this.intents = intents));
-
-        this.configurationNameList = configs.filter((item) => item.targetConfigurationId == null).map((item) => item.applicationId);
-
-        if (res) {
-          this.ratingFilter = [1, 2, 3, 4, 5];
-        }
-        this.refresh();
-      });
-    });
+  ) {}
 
+  ngOnInit() {
     this.botSharedService
       .getConnectorTypes()
       .pipe(take(1))
       .subscribe((confConf) => {
         this.connectorTypes = confConf.map((it) => it.connectorType);
       });
-  }
 
-  ngOnInit() {
-    this.load();
+    this.botConfiguration.configurations.pipe(takeUntil(this.destroy$)).subscribe((configs) => {
+      this.botSharedService.getIntentsByApplication(this.state.currentApplication._id).subscribe((intents) => (this.intents = intents));
+
+      this.configurationNameList = configs
+        .filter((item) => item.targetConfigurationId == null)
+        .map((item) => {
+          return item.applicationId;
+        });
+
+      this.refresh();
+    });
   }
 
   ngOnChanges(changes: SimpleChanges) {

bot/admin/web/src/app/analytics/satisfaction/satisfaction.component.html

@@ -1,11 +1,19 @@
-<div *ngIf="loaded">
+<ng-container *ngIf="!loading && configurations?.length === 0">
+  <div class="d-flex flex-wrap align-items-center">
+    <h1 class="flex-grow-1">Satisfaction</h1>
+  </div>
+
+  <tock-no-data-found title="No bot configuration detected"></tock-no-data-found>
+</ng-container>
+
+<div *ngIf="configurations?.length">
   <div *ngIf="isStatisfactionActivated">
     <tock-satisfaction-details></tock-satisfaction-details>
   </div>
+
   <div *ngIf="!isStatisfactionActivated && !errorMsg">
     <tock-activate-satisfaction (enableSatisfaction)="isStatisfactionActivated = $event"></tock-activate-satisfaction>
   </div>
-</div>
-
 
-<h2 *ngIf="errorMsg">{{errorMsg}}</h2>
+  <h2 *ngIf="errorMsg">{{ errorMsg }}</h2>
+</div>

bot/admin/web/src/app/analytics/satisfaction/satisfaction.component.ts

@@ -14,42 +14,50 @@
  * limitations under the License.
  */
 
-import {Component, OnInit} from '@angular/core';
-import {AnalyticsService} from "../analytics.service";
-import {StateService} from 'src/app/core-nlp/state.service';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AnalyticsService } from '../analytics.service';
+import { StateService } from 'src/app/core-nlp/state.service';
+import { BotConfigurationService } from '../../core/bot-configuration.service';
+import { Subject, take, takeUntil } from 'rxjs';
+import { BotApplicationConfiguration } from '../../core/model/configuration';
 
 @Component({
   selector: 'tock-satisfaction',
   templateUrl: './satisfaction.component.html',
   styleUrls: ['./satisfaction.component.css']
 })
-export class SatisfactionComponent implements OnInit {
+export class SatisfactionComponent implements OnInit, OnDestroy {
+  destroy = new Subject();
+  configurations: BotApplicationConfiguration[];
   isStatisfactionActivated: boolean = false;
   errorMsg: string;
-  public loaded: boolean = false;
+  public loading: boolean = true;
 
-  constructor(
-    private analytics: AnalyticsService,
-    private state: StateService
-  ) {
-  }
+  constructor(private analytics: AnalyticsService, private state: StateService, private botConfiguration: BotConfigurationService) {}
 
   ngOnInit(): void {
-    this.state.currentIntents.subscribe(() => {
-      this.isActiveSatisfaction()
+    this.botConfiguration.configurations.pipe(takeUntil(this.destroy)).subscribe((confs) => {
+      this.configurations = confs;
+
+      if (this.configurations.length) this.isActiveSatisfaction();
+
+      this.loading = false;
     });
   }
 
   isActiveSatisfaction() {
     this.errorMsg = null;
-    this.loaded = false;
-    this.analytics.isActiveSatisfactionByBot()
-      .subscribe((res: boolean) =>
-          this.isStatisfactionActivated = res,
-        err => this.errorMsg = err,
-        () => this.loaded = true);
+    this.analytics
+      .isActiveSatisfactionByBot()
+      .pipe(take(1))
+      .subscribe({
+        next: (res: boolean) => (this.isStatisfactionActivated = res),
+        error: (err) => (this.errorMsg = err)
+      });
   }
 
-
+  ngOnDestroy() {
+    this.destroy.next(true);
+    this.destroy.complete();
+  }
 }
-

bot/admin/web/src/app/applications/namespace/namespaces.component.html

@@ -34,7 +34,7 @@ <h1 class="flex-grow-1">Namespaces</h1>
 </div>
 
 <nb-card
-  *ngFor="let n of namespaces"
+  *ngFor="let n of state.namespaces"
   class="mb-2"
 >
   <nb-card-body>

bot/admin/web/src/app/applications/namespace/namespaces.component.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { StateService } from '../../core-nlp/state.service';
 import { ApplicationService } from '../../core-nlp/applications.service';
 import { NamespaceConfiguration, NamespaceSharingConfiguration, UserNamespace } from '../../model/application';
@@ -30,9 +30,8 @@ import { Subject, takeUntil } from 'rxjs';
   templateUrl: 'namespaces.component.html',
   styleUrls: ['namespaces.component.scss']
 })
-export class NamespacesComponent implements OnInit, OnDestroy {
+export class NamespacesComponent implements OnDestroy {
   destroy = new Subject();
-  namespaces: UserNamespace[];
 
   managedNamespace: string;
   managedUsers: UserNamespace[];
@@ -53,22 +52,10 @@ export class NamespacesComponent implements OnInit, OnDestroy {
     private nbDialogService: NbDialogService
   ) {}
 
-  ngOnInit(): void {
-    this.state.currentApplicationEmitter.pipe(takeUntil(this.destroy)).subscribe((arg) => {
-      this.grabNamespaces();
-    });
-    this.grabNamespaces();
-  }
-
-  grabNamespaces(): void {
-    this.applicationService.getNamespaces().subscribe((n) => (this.namespaces = n));
-  }
-
   selectNamespace(namespace: string): void {
     this.applicationService.selectNamespace(namespace).subscribe((_) =>
       this.authService.loadUser().subscribe((_) => {
-        this.applicationService.resetConfiguration;
-        this.grabNamespaces();
+        this.applicationService.resetConfiguration();
       })
     );
   }
@@ -85,7 +72,7 @@ export class NamespacesComponent implements OnInit, OnDestroy {
     const modal = this.nbDialogService.open(CreateNamespaceComponent);
     const validate = modal.componentRef.instance.validate.pipe(takeUntil(this.destroy)).subscribe((result) => {
       this.applicationService.createNamespace(result.name.trim()).subscribe((b) => {
-        this.ngOnInit();
+        this.applicationService.resetConfiguration();
       });
       this.closeEdition();
       modal.close();

bot/admin/web/src/app/bot/i18n/i18n-filters/i18n-filters.component.ts

@@ -38,7 +38,7 @@ export class I18nFiltersComponent implements OnInit {
   constructor(public state: StateService) {}
 
   ngOnInit(): void {
-    this.form.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(250)).subscribe(() => this.submitFiltersChange());
+    this.form.valueChanges.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe(() => this.submitFiltersChange());
   }
 
   form = new FormGroup<I18nFiltersForm>({

bot/admin/web/src/app/bot/story/edit-story/edit-story.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subject, take, takeUntil } from 'rxjs';
+import { Subject, take } from 'rxjs';
 import { BotService } from '../../bot-service';
 import { StoryDefinitionConfiguration } from '../../model/story';
 

bot/admin/web/src/app/bot/story/search-story/stories-filter/stories-filter.component.ts

@@ -49,7 +49,7 @@ export class StoriesFilterComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.form.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(300)).subscribe(() => {
+    this.form.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$)).subscribe(() => {
       this.onFilter.emit(this.form.value as StoriesFilters);
     });
   }

bot/admin/web/src/app/configuration/bot-configurations/bot-configuration/bot-configuration.component.html

@@ -15,7 +15,15 @@
   -->
 
 <nb-card *ngIf="configuration">
-  <nb-card-body [ngClass]="{ 'pt-5': configuration._id }">
+  <nb-card-body
+    *ngIf="loading"
+    [nbSpinner]="loading"
+  ></nb-card-body>
+
+  <nb-card-body
+    *ngIf="!loading"
+    [ngClass]="{ 'pt-5': configuration._id }"
+  >
     <div
       *ngIf="configuration._id"
       class="connector-title-box"
@@ -255,7 +263,10 @@
     </nb-accordion>
   </nb-card-body>
 
-  <nb-card-footer style="text-align: right">
+  <nb-card-footer
+    *ngIf="!loading"
+    style="text-align: right"
+  >
     <button
       nbButton
       ghost