feat(security-group): select first not preselected sg (#595)

src/app/vm/vm-sidebar/vms-sg-list/vms-sg-list.component.spec.ts

@@ -1,19 +1,66 @@
 import { TestBed } from '@angular/core/testing';
+import { SimpleChange } from '@angular/core';
+
 import { VmsSgListComponent } from './vms-sg-list.component';
-import { SecurityGroup } from '../../../security-group/sg.model';
+import { getMockSecurityGroup } from '../../../../testutils/mocks/mocks';
 
 describe('VmsSgListComponent', () => {
   let comp: VmsSgListComponent;
-  const securityGroup = { id: 'sg-1', name: 'name', isPreselected: false } as SecurityGroup;
 
   beforeEach(() => {
     TestBed.configureTestingModule({});
 
     comp = new VmsSgListComponent();
   });
 
-  it('should select security group', () => {
-    comp.selectSecurityGroup(securityGroup);
-    expect(comp.currentSelectedSecurityGroup).toBe(securityGroup);
+  describe('selectSecurityGroup', () => {
+    it('should select security group', () => {
+      const securityGroup = getMockSecurityGroup({ id: 'sg-1', isPreselected: false });
+      comp.selectSecurityGroup(securityGroup);
+      expect(comp.currentSelectedSecurityGroup).toBe(securityGroup);
+    });
+
+    it('should not select preselected security group', () => {
+      const securityGroup = getMockSecurityGroup({ id: 'sg-1', isPreselected: true });
+      comp.selectSecurityGroup(securityGroup);
+      expect(comp.currentSelectedSecurityGroup).toBeUndefined();
+    });
+  });
+
+  describe('ngOnChanges', () => {
+    it('should change currentSelectedSecurityGroup', () => {
+      const securityGroups = [
+        getMockSecurityGroup({ id: 'first_preselected', isPreselected: true }),
+        getMockSecurityGroup({ id: 'first_not_selected', isPreselected: false }),
+        getMockSecurityGroup({ id: 'second_not_selected', isPreselected: false }),
+      ];
+      comp.securityGroups = securityGroups;
+      comp.ngOnChanges({ securityGroups: new SimpleChange(null, securityGroups, false) });
+      expect(comp.currentSelectedSecurityGroup).toEqual(securityGroups[1]);
+    });
+
+    it('should not change currentSelectedSecurityGroup if it was selected', () => {
+      const securityGroups = [
+        getMockSecurityGroup({ id: 'first_preselected', isPreselected: true }),
+        getMockSecurityGroup({ id: 'first_not_selected', isPreselected: false }),
+        getMockSecurityGroup({ id: 'second_not_selected', isPreselected: false }),
+      ];
+      comp.currentSelectedSecurityGroup = securityGroups[2];
+      comp.securityGroups = securityGroups;
+      comp.ngOnChanges({ securityGroups: new SimpleChange([], securityGroups, false) });
+      expect(comp.currentSelectedSecurityGroup).toEqual(securityGroups[2]);
+    });
+
+    it('should change currentSelectedSecurityGroup if it not in securityGroups', () => {
+      const securityGroups = [
+        getMockSecurityGroup({ id: 'first_preselected', isPreselected: true }),
+        getMockSecurityGroup({ id: 'first_not_selected', isPreselected: false }),
+        getMockSecurityGroup({ id: 'second_not_selected', isPreselected: false }),
+      ];
+      comp.currentSelectedSecurityGroup = getMockSecurityGroup();
+      comp.securityGroups = securityGroups;
+      comp.ngOnChanges({ securityGroups: new SimpleChange([], securityGroups, false) });
+      expect(comp.currentSelectedSecurityGroup).toEqual(securityGroups[1]);
+    });
   });
 });

src/app/vm/vm-sidebar/vms-sg-list/vms-sg-list.component.ts

@@ -1,12 +1,12 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { SecurityGroup } from '../../../security-group/sg.model';
 
 @Component({
   selector: 'cs-vms-sg-list',
   templateUrl: 'vms-sg-list.component.html',
   styleUrls: ['vms-sg-list.component.scss'],
 })
-export class VmsSgListComponent {
+export class VmsSgListComponent implements OnChanges {
   @Input()
   public securityGroups: SecurityGroup[];
   @Input()
@@ -23,4 +23,15 @@ export class VmsSgListComponent {
       this.currentSelectedSecurityGroup = sg;
     }
   }
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    // select the first not preselected sg
+    if (
+      changes['securityGroups'].currentValue &&
+      (!this.currentSelectedSecurityGroup ||
+        !this.securityGroups.includes(this.currentSelectedSecurityGroup))
+    ) {
+      this.currentSelectedSecurityGroup = this.securityGroups.find(sg => !sg.isPreselected);
+    }
+  }
 }

src/testutils/mocks/mocks.ts

@@ -0,0 +1,18 @@
+import { SecurityGroup } from '../../app/security-group/sg.model';
+
+export function getMockSecurityGroup(updates: Partial<SecurityGroup> = {}): SecurityGroup {
+  return {
+    id: null,
+    account: null,
+    description: null,
+    domain: null,
+    domainid: null,
+    name: null,
+    tags: [],
+    virtualmachinecount: null,
+    virtualmachineids: [],
+    egressrule: [],
+    ingressrule: [],
+    ...updates,
+  };
+}