NAS-133871 / 25.10 / Fix virt instance is not selected when it is created

src/app/pages/instances/components/all-instances/instance-list/instance-list.component.spec.ts

@@ -1,4 +1,5 @@
-import { createComponentFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
+import { Router } from '@angular/router';
+import { createRoutingFactory, mockProvider, Spectator } from '@ngneat/spectator/jest';
 import { mockAuth } from 'app/core/testing/utils/mock-auth.utils';
 import { VirtualizationStatus, VirtualizationType } from 'app/enums/virtualization.enum';
 import { VirtualizationInstance } from 'app/interfaces/virtualization.interface';
@@ -7,31 +8,34 @@ import { InstanceRowComponent } from 'app/pages/instances/components/all-instanc
 import { VirtualizationDevicesStore } from 'app/pages/instances/stores/virtualization-devices.store';
 import { VirtualizationInstancesStore } from 'app/pages/instances/stores/virtualization-instances.store';
 
-const instance = {
-  id: '1',
-  name: 'agi_instance',
-  status: VirtualizationStatus.Running,
-  type: VirtualizationType.Container,
-} as VirtualizationInstance;
-
 describe('InstanceListComponent', () => {
   let spectator: Spectator<InstanceListComponent>;
 
-  const createComponent = createComponentFactory({
+  const mockInstance = {
+    id: '1',
+    name: 'agi_instance',
+    status: VirtualizationStatus.Running,
+    type: VirtualizationType.Container,
+  } as VirtualizationInstance;
+
+  const createComponent = createRoutingFactory({
     component: InstanceListComponent,
     imports: [InstanceRowComponent],
     providers: [
       mockAuth(),
       mockProvider(VirtualizationInstancesStore, {
         initialize: jest.fn(),
-        instances: jest.fn(() => [instance]),
+        instances: jest.fn(() => [mockInstance]),
         isLoading: jest.fn(() => false),
       }),
       mockProvider(VirtualizationDevicesStore, {
         selectInstance: jest.fn(),
-        selectedInstance: jest.fn(),
+        selectedInstance: jest.fn(() => null),
       }),
     ],
+    params: {
+      id: 'invalid',
+    },
   });
 
   beforeEach(() => {
@@ -42,6 +46,11 @@ describe('InstanceListComponent', () => {
     const instances = spectator.queryAll(InstanceRowComponent);
 
     expect(instances).toHaveLength(1);
-    expect(instances[0].instance()).toEqual(instance);
+    expect(instances[0].instance()).toEqual(mockInstance);
+  });
+
+  it('redirects to instances when given invalid instanceId', () => {
+    const spyOn = jest.spyOn(spectator.inject(Router), 'navigate');
+    expect(spyOn).toHaveBeenCalledWith(['/instances']);
   });
 });

src/app/pages/instances/components/all-instances/instance-list/instance-list.component.ts

@@ -6,12 +6,11 @@ import {
   input,
   effect,
 } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { ActivatedRoute, Router } from '@angular/router';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { Router } from '@angular/router';
+import { UntilDestroy } from '@ngneat/until-destroy';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { filter, switchMap } from 'rxjs';
+import { injectParams } from 'ngxtension/inject-params';
 import { EmptyType } from 'app/enums/empty-type.enum';
 import { WINDOW } from 'app/helpers/window.helper';
 import { EmptyConfig } from 'app/interfaces/empty-config.interface';
@@ -46,6 +45,7 @@ import { VirtualizationInstancesStore } from 'app/pages/instances/stores/virtual
 })
 
 export class InstanceListComponent {
+  readonly instanceId = injectParams('id');
   readonly isMobileView = input<boolean>();
   readonly toggleShowMobileDetails = output<boolean>();
 
@@ -57,7 +57,6 @@ export class InstanceListComponent {
   protected readonly isLoading = this.store.isLoading;
 
   protected readonly selectedInstance = this.deviceStore.selectedInstance;
-
   get isAllSelected(): boolean {
     return this.selection.selected.length === this.filteredInstances().length;
   }
@@ -96,26 +95,24 @@ export class InstanceListComponent {
   constructor(
     private store: VirtualizationInstancesStore,
     private router: Router,
-    private activatedRoute: ActivatedRoute,
     private translate: TranslateService,
     private deviceStore: VirtualizationDevicesStore,
     private searchDirectives: UiSearchDirectivesService,
   ) {
-    toObservable(this.instances).pipe(
-      filter((instances) => !!instances?.length),
-      switchMap(() => this.activatedRoute.params),
-      untilDestroyed(this),
-    ).subscribe((params) => {
-      const instanceId = params.id as string;
-      if (instanceId && this.instances().some((instance) => instance.id === instanceId)) {
+    effect(() => {
+      const instanceId = this.instanceId();
+      if (instanceId) {
         this.deviceStore.selectInstance(instanceId);
-      } else {
-        this.navigateToDetails(this.instances()[0]);
+        if (this.selectedInstance() === null) {
+          this.router.navigate(['/instances']);
+        }
       }
-    });
+      const instances = this.instances();
+      if (instances?.length > 0) {
+        if (!instanceId) {
+          this.navigateToDetails(instances[0]);
+        }
 
-    effect(() => {
-      if (this.instances()?.length > 0) {
         setTimeout(() => {
           this.handlePendingGlobalSearchElement();
         });

src/app/pages/instances/stores/virtualization-instances.store.ts

@@ -1,6 +1,6 @@
 import { computed, Injectable } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { UntilDestroy } from '@ngneat/until-destroy';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { ComponentStore } from '@ngrx/component-store';
 import { of, switchMap, tap } from 'rxjs';
 import { catchError, map, startWith } from 'rxjs/operators';
@@ -78,6 +78,7 @@ export class VirtualizationInstancesStore extends ComponentStore<VirtualizationI
           }),
         );
       }),
+      untilDestroyed(this),
     );
   });