Fixed and improved Smart Search events to use cached result (#413)

Author: petruki

src/app/dashboard-module/domain-module/common/detail-component.ts

@@ -38,7 +38,7 @@ export class DetailComponent {
     }
 
     protected showResumed(value: string, length: number): string {
-        return  DataUtils.showResumed(value, length);
+        return DataUtils.showResumed(value, length);
     }
 
     scrollToElement($element: any): void {

src/app/dashboard-module/domain-module/common/element-autocomplete/element-autocomplete.component.html

@@ -1,6 +1,6 @@
 <mat-form-field style="width: 100%;">
     <mat-label>Smart Search</mat-label>
-    <input id="smartSearchInput" #smartSearchInput class="smart-search" matInput (click)="loadComponent()"
+    <input id="smartSearchInput" #smartSearchInput class="smart-search" matInput (keyup)="loadComponent($event)" (click)="loadComponent($event)"
         matTooltip="Use 'S:' for Switchers, 'G:' for Groups and 'C:' for Components"
         readonly="{{ lockFilter }}"
         [formControl]="smartSearchFormControl"

src/app/dashboard-module/domain-module/common/element-autocomplete/element-autocomplete.component.ts

@@ -1,10 +1,11 @@
 import { Component, OnInit, OnDestroy, Input } from '@angular/core';
-import { takeUntil, startWith, map } from 'rxjs/operators';
+import { takeUntil, startWith, map, debounceTime } from 'rxjs/operators';
 import { Subject, Observable } from 'rxjs';
-import { QueryRef } from 'apollo-angular';
 import { ConsoleLogger } from 'src/app/_helpers/console-logger';
 import { FormControl } from '@angular/forms';
 import { DomainService } from 'src/app/services/domain.service';
+import { Group } from 'src/app/model/group';
+import { ApolloQueryResult } from '@apollo/client';
 
 @Component({
   selector: 'element-autocomplete',
@@ -25,13 +26,18 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy {
   smartSearchFormControl = new FormControl('');
   searchListItems: any[] = [];
   searchedValues: Observable<string[]>;
-  private query: QueryRef<any>;
+  private query: Observable<ApolloQueryResult<any>>;
 
   constructor(
     private readonly domainService: DomainService
   ) { }
 
   ngOnInit() {
+    this.searchedValues = this.smartSearchFormControl.valueChanges.pipe(
+      startWith(''),
+      map(value => this.filter(value))
+    );
+    
     if (this.value) {
       this.smartSearchFormControl.setValue(this.value);
     }
@@ -42,26 +48,27 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy {
     this.unsubscribe.complete();
   }
 
-  loadComponent() {
-    if (!this.query) {
-      this.loadKeys(this.parentComponent.getDomainId());
+  loadComponent($event: any) {
+    if ($event instanceof MouseEvent) {
+      this.loadKeys(this.parentComponent.getDomainId(), true);
     } else {
-      this.query?.refetch();
+      this.loadKeys(this.parentComponent.getDomainId());
     }
   }
 
   showTooltip(item: any): string {
     return `[${item.name}]: ${item.description}`;
   }
 
-  private loadKeys(domainId: string): void {
-    if (!domainId)
+  private loadKeys(domainId: string, forceRefresh = false): void {
+    if (!domainId) {
       return;
+    }
 
     this.query = this.domainService.executeConfigurationTreeQuery(
-      domainId, this.switchers, this.groups, this.components);
+      domainId, this.switchers, this.groups, this.components, forceRefresh);
 
-    this.query.valueChanges.pipe(takeUntil(this.unsubscribe))
+    this.query.pipe(takeUntil(this.unsubscribe), debounceTime(500))
       .subscribe({
         next: result => {
           if (result?.data?.domain?.group) {
@@ -77,16 +84,12 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy {
           ConsoleLogger.printError(error);
         }
       });
-
-    this.searchedValues = this.smartSearchFormControl.valueChanges.pipe(
-      startWith(''),
-      map(value => this.filter(value))
-    );
   }
 
-  private loadByComponent(groups?: any) {
-    if (!this.components)
+  private loadByComponent(groups?: Group[]) {
+    if (!this.components) {
       return;
+    }
 
     const filtered = groups?.map(
       group => group.config?.map(config => {
@@ -103,9 +106,10 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy {
       this.searchListItems.push(...filtered.flat());
   }
 
-  private loadBySwitcher(groups: any) {
-    if (!this.switchers || !groups)
+  private loadBySwitcher(groups: Group[]) {
+    if (!this.switchers || !groups) {
       return;
+    }
 
     const filtered = groups.map(
       group => group.config?.map(config => {
@@ -122,9 +126,10 @@ export class ElementAutocompleteComponent implements OnInit, OnDestroy {
       this.searchListItems.push(...filtered.flat());
   }
 
-  private loadByGroup(groups: any) {
-    if (!this.groups || !groups)
+  private loadByGroup(groups: Group[]) {
+    if (!this.groups || !groups) {
       return;
+    }
 
     const filtered = groups.map(group => {
       return {

src/app/dashboard-module/domain-module/config/config-detail/config-detail.component.ts

@@ -111,11 +111,19 @@ export class ConfigDetailComponent extends DetailComponent implements OnInit, On
       this.domainId = params.domainid;
       this.domainName = params.name;
     });
-
+    
     this.route.params.subscribe(params => {
       this.groupId = params.groupid;
       this.configId = params.configid;
-      this.loadConfig();
+
+      const configFromState = this.router.getCurrentNavigation()?.extras.state?.element;
+      if (configFromState) {
+        this.config = JSON.parse(configFromState);
+        this.updateData(this.config);
+        this.loadStrategies();
+      } else {
+        this.loadConfig();
+      }
     });
 
     this.hasNewStrategy = false;
@@ -307,7 +315,7 @@ export class ConfigDetailComponent extends DetailComponent implements OnInit, On
     if ($event.reloadPermissions) {
       this.readPermissionToObject();
     }
-
+    
     this.loadStrategies();
     this.disableMetrics = this.isMetricDisabled();
   }

src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.html

@@ -66,7 +66,7 @@
             </div>
         </section>
     </div>
-    <div *ngIf="environments" class="config-list">
+    <div *ngIf="!loading && environments" class="config-list">
         <hr>
         <app-config-list [childEnvironmentEmitter]="childEnvironmentEmitter" [environments]="environments"></app-config-list>
     </div>

src/app/dashboard-module/domain-module/group/group-detail/group-detail.component.ts

@@ -68,8 +68,16 @@ export class GroupDetailComponent extends DetailComponent implements OnInit, OnD
     });
 
     this.route.params.subscribe(params => {
+      this.detailBodyStyle = 'detail-body loading';
+      this.loading = true;
       this.groupId = params.groupid;
-      this.loadGroup();
+      
+      const groupFromState = this.router.getCurrentNavigation()?.extras.state?.element;
+      if (groupFromState) {
+        this.updateData(JSON.parse(groupFromState));
+      } else {
+        this.loadGroup();
+      }
     });
   }
 

src/app/home/home.component.html

@@ -111,7 +111,7 @@ <h1>
                 </h1>
                 <p>
                     Our team is diverse and vital to keep this project growing.<br>
-                    As an open-source project, we appreciate any feedback and contribution from the community.<br>
+                    As an open-source project, we appreciate any feedback and contribution from the community.<br><br>
                     Your support will help us to continue evolving and providing the best Feature Management experience.
                 </p>
                 <br>

src/app/model/config.ts

@@ -1,6 +1,7 @@
 import { Admin } from "./admin";
 
 export class Config {
+  _id: string;
   id: string;
   key: string;
   description: string;

src/app/model/group.ts

@@ -2,6 +2,7 @@ import { Admin } from './admin';
 import { Config } from './config';
 
 export class Group {
+  _id: string;
   id: string;
   name: string;
   description: string;

src/app/services/domain.service.ts

@@ -119,9 +119,10 @@ export class DomainService extends ApiService {
     });
   }
 
-  public executeConfigurationTreeQuery(domainId: string, switchers: boolean, groups: boolean, components: boolean) {
-    return this.apollo.watchQuery<any>({
+  public executeConfigurationTreeQuery(domainId: string, switchers: boolean, groups: boolean, components: boolean, forceFetch = false) {
+    return this.apollo.query<any>({
       query: configurationTreeQuery(switchers, groups, components),
+      fetchPolicy: forceFetch ? 'network-only' : 'cache-first',
       variables: { 
         id: domainId,
       }