611: Fix - Expand side menu workflows/project when workflow is open (#616)

Author: jozefbakus

ui/src/app/components/workflows/workflows.component.html

@@ -28,11 +28,11 @@
       All workflows
     </a>
     <section class="nav-group collapsible" *ngFor="let project of projects; let index = index;">
-      <input [id]="index" type="checkbox" checked>
+      <input [id]="index" type="checkbox" [checked]="isProjectClosed(project.name, project.workflows)" (change)="toggleProject(project.name)">
       <label [for]="index">{{project.name}}</label>
       <ul class="nav-list" *ngFor="let workflow of project.workflows">
         <li>
-          <a routerLinkActive="active"
+          <a [class]="isWorkflowHighlighted(workflow.id) ? 'active' : null"
              [routerLink]="[absoluteRoutes.SHOW_WORKFLOW, workflow.id]"
              class="nav-link">{{workflow.name}}</a>
         </li>

ui/src/app/components/workflows/workflows.component.spec.ts

@@ -16,12 +16,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { WorkflowsComponent } from './workflows.component';
 import { provideMockStore } from '@ngrx/store/testing';
-import { ProjectModelFactory } from '../../models/project.model';
+import { ProjectModelFactory, WorkflowIdentityModelFactory } from '../../models/project.model';
 import { WorkflowModelFactory } from '../../models/workflow.model';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Router, Routes } from '@angular/router';
 
 describe('WorkflowsComponent', () => {
   let fixture: ComponentFixture<WorkflowsComponent>;
   let underTest: WorkflowsComponent;
+  let router: Router;
+
+  const routes = [{ path: 'workflows/show/:id', component: {} }] as Routes;
 
   const initialAppState = {
     workflows: {
@@ -42,7 +47,9 @@ describe('WorkflowsComponent', () => {
       TestBed.configureTestingModule({
         providers: [provideMockStore({ initialState: initialAppState })],
         declarations: [WorkflowsComponent],
+        imports: [RouterTestingModule.withRoutes(routes)],
       }).compileComponents();
+      router = TestBed.inject(Router);
     }),
   );
 
@@ -65,4 +72,106 @@ describe('WorkflowsComponent', () => {
       });
     }),
   );
+
+  describe('isWorkflowHighlighted', () => {
+    it(
+      'should return true when url contains input id',
+      waitForAsync(() => {
+        const idMatching = 555;
+        router.navigate(['workflows/show', idMatching]).then(() => {
+          expect(underTest.isWorkflowHighlighted(idMatching)).toBeTruthy();
+        });
+      }),
+    );
+
+    it(
+      'should return false when url does not contain input id',
+      waitForAsync(() => {
+        const idNonMatching = 5;
+        router.navigate(['workflows/show', 555]).then(() => {
+          expect(underTest.isWorkflowHighlighted(idNonMatching)).toBeFalse();
+        });
+      }),
+    );
+  });
+
+  it(
+    'toggleProject() should toggle a project',
+    waitForAsync(() => {
+      const project = 'project';
+      const projectOther = 'projectOther';
+
+      expect(underTest.openedProjects.size).toEqual(0);
+
+      underTest.toggleProject(project);
+      expect(underTest.openedProjects.size).toEqual(1);
+      expect(underTest.openedProjects).toContain(project);
+
+      underTest.toggleProject(projectOther);
+      expect(underTest.openedProjects.size).toEqual(2);
+      expect(underTest.openedProjects).toContain(project);
+      expect(underTest.openedProjects).toContain(projectOther);
+
+      underTest.toggleProject(project);
+      expect(underTest.openedProjects.size).toEqual(1);
+      expect(underTest.openedProjects).toContain(projectOther);
+
+      underTest.toggleProject(projectOther);
+      expect(underTest.openedProjects.size).toEqual(0);
+    }),
+  );
+
+  describe('isProjectClosed', () => {
+    it(
+      'should return true if project is not in opened projects no workflow is highlighted',
+      waitForAsync(() => {
+        const id = 555;
+        const otherId = 5;
+        router.navigate(['workflows/show', id]).then(() => {
+          expect(underTest.openedProjects.size).toEqual(0);
+          expect(underTest.isWorkflowHighlighted(otherId)).toBeFalse();
+
+          const result = underTest.isProjectClosed('project', [WorkflowIdentityModelFactory.create(otherId, 'name')]);
+
+          expect(result).toBeTruthy();
+        });
+      }),
+    );
+
+    it(
+      'should return false if project is in opened projects',
+      waitForAsync(() => {
+        const id = 555;
+        const otherId = 5;
+        const projectName = 'project';
+        underTest.openedProjects.add(projectName);
+
+        router.navigate(['workflows/show', id]).then(() => {
+          expect(underTest.openedProjects.size).toEqual(1);
+          expect(underTest.openedProjects).toContain(projectName);
+          expect(underTest.isWorkflowHighlighted(otherId)).toBeFalse();
+
+          const result = underTest.isProjectClosed(projectName, [WorkflowIdentityModelFactory.create(otherId, 'name')]);
+
+          expect(result).toBeFalse();
+        });
+      }),
+    );
+
+    it(
+      'should return false if project workflow is highlighted',
+      waitForAsync(() => {
+        const id = 555;
+        router.navigate(['workflows/show', id]).then(() => {
+          expect(underTest.openedProjects.size).toEqual(0);
+          expect(underTest.isWorkflowHighlighted(id)).toBeTruthy();
+
+          const result = underTest.isProjectClosed('project', [WorkflowIdentityModelFactory.create(id, 'name')]);
+
+          expect(underTest.openedProjects.size).toEqual(1);
+          expect(result).toBeFalse();
+        });
+      }),
+    );
+  });
 });

ui/src/app/components/workflows/workflows.component.ts

@@ -14,12 +14,13 @@
  */
 
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
-import { ProjectModel } from '../../models/project.model';
+import { ProjectModel, WorkflowIdentityModel } from '../../models/project.model';
 import { Store } from '@ngrx/store';
 import { AppState, selectWorkflowState } from '../../stores/app.reducers';
 import { Subscription } from 'rxjs';
 import { InitializeWorkflows } from '../../stores/workflows/workflows.actions';
 import { absoluteRoutes } from '../../constants/routes.constants';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-workflows',
@@ -31,10 +32,11 @@ export class WorkflowsComponent implements AfterViewInit, OnDestroy {
 
   loading = true;
   projects: ProjectModel[] = [];
+  openedProjects: Set<string> = new Set<string>();
 
   absoluteRoutes = absoluteRoutes;
 
-  constructor(private store: Store<AppState>) {
+  constructor(private store: Store<AppState>, private router: Router) {
     this.store.dispatch(new InitializeWorkflows());
   }
 
@@ -45,6 +47,25 @@ export class WorkflowsComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  isWorkflowHighlighted(id: number): boolean {
+    return this.router.url.split('/').some((part) => part === id.toString());
+  }
+
+  isProjectClosed(project: string, workflows: WorkflowIdentityModel[]): boolean {
+    if (!this.openedProjects.has(project) && workflows.some((workflow: WorkflowIdentityModel) => this.isWorkflowHighlighted(workflow.id))) {
+      this.openedProjects.add(project);
+    }
+    return !this.openedProjects.has(project);
+  }
+
+  toggleProject(project: string) {
+    if (this.openedProjects.has(project)) {
+      this.openedProjects.delete(project);
+    } else {
+      this.openedProjects.add(project);
+    }
+  }
+
   ngOnDestroy(): void {
     !!this.workflowsSubscription && this.workflowsSubscription.unsubscribe();
   }