571 ui list trending technologies (#577)

* feat: #571 technology report

* feat: #571 technology report - move componente TimeTange to shared

* feat: #571 technology report - test create component

* feat: #571 mock data

* fix: #571 update  async for waitForAsync

* fix: #571 test coverage

* TT-52 feat: add toggle flag

* TT-52 feat: update previous test

* TT-52 feat: remove print

* TT-52 feat: unit tests for feature flag ui-list-technologies

* TT-52 feat: include route in the feature toggle

* TT-52 feat: consider global toggle state

* TT-52 feat: update aync methods in user components

* TT-52 feat: remove errors due to rebase

* TT-52 feat: CI test

* ci: update workflow

Co-authored-by: roberto <[email protected]>

Author: scastillo-jp

.github/workflows/CI-time-tracker-ui.yml

@@ -47,7 +47,9 @@ jobs:
         STACK_EXCHANGE_ID: ${{ secrets.STACK_EXCHANGE_ID }}
         STACK_EXCHANGE_ACCESS_TOKEN: ${{ secrets.STACK_EXCHANGE_ACCESS_TOKEN }}
         AZURE_APP_CONFIGURATION_CONNECTION_STRING: ${{ secrets.AZURE_APP_CONFIGURATION_CONNECTION_STRING }}
-      run:  sudo sh scripts/populate-keys.sh
+      run: |
+        chmod +x ./scripts/populate-keys.sh
+        sh ./scripts/populate-keys.sh
 
     - name: Running tests
       run: npm run ci-test --if-present

angular.json

@@ -25,6 +25,7 @@
             ],
             "styles": [
               "node_modules/datatables.net-dt/css/jquery.dataTables.css",
+              "node_modules/datatables.net-responsive-dt/css/responsive.dataTables.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss",
               "node_modules/ngx-toastr/toastr.css",
@@ -39,7 +40,8 @@
               "node_modules/datatables.net-buttons/js/buttons.colVis.js",
               "node_modules/datatables.net-buttons/js/buttons.flash.js",
               "node_modules/datatables.net-buttons/js/buttons.html5.js",
-              "node_modules/datatables.net-buttons/js/buttons.print.js"
+              "node_modules/datatables.net-buttons/js/buttons.print.js",
+              "node_modules/datatables.net-responsive/js/dataTables.responsive.js"
             ]
           },
           "configurations": {

package-lock.json

@@ -21,18 +21,20 @@
     "@angular/platform-browser": "~10.2.2",
     "@angular/platform-browser-dynamic": "~10.2.2",
     "@angular/router": "~10.2.2",
-    "@azure/app-configuration": "^1.1.0",
-    "@azure/identity": "^1.1.0",
     "@ngrx/effects": "^10.0.1",
     "@ngrx/store": "^10.0.1",
     "@ngrx/store-devtools": "^10.0.1",
     "@types/datatables.net-buttons": "^1.4.3",
     "angular-datatables": "^9.0.2",
+    "@azure/app-configuration": "^1.1.0",
+    "@azure/identity": "^1.1.0",
     "bootstrap": "^4.4.1",
     "datatables.net": "^1.10.21",
     "datatables.net-buttons": "^1.6.2",
     "datatables.net-buttons-dt": "^1.6.2",
     "datatables.net-dt": "^1.10.21",
+    "datatables.net-responsive": "^2.2.6",
+    "datatables.net-responsive-dt": "^2.2.6",
     "jquery": "^3.5.1",
     "jszip": "^3.4.0",
     "minimist": "^1.2.5",

package.json

@@ -11,6 +11,8 @@ import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 import { CustomerComponent } from './modules/customer-management/pages/customer.component';
 import { UsersComponent } from './modules/users/pages/users.component';
+import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
+import { TechnologiesReportGuard } from './guards/technologies-report-guard/technologies-report.guard';
 
 const routes: Routes = [
   {
@@ -24,6 +26,7 @@ const routes: Routes = [
       { path: 'activities-management', component: ActivitiesManagementComponent },
       { path: 'customers-management', canActivate: [AdminGuard], component: CustomerComponent },
       { path: 'users', canActivate: [AdminGuard], component: UsersComponent },
+      { path: 'technology-report', canActivate: [AdminGuard, TechnologiesReportGuard], component: TechnologyReportComponent},
       { path: '', pathMatch: 'full', redirectTo: 'time-clock' },
     ],
   },

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ToastrModule } from 'ngx-toastr';
 import { CommonModule, DatePipe } from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataTablesModule } from 'angular-datatables';
@@ -73,6 +73,9 @@ import { LoadingBarComponent } from './modules/shared/components/loading-bar/loa
 import { UsersComponent } from './modules/users/pages/users.component';
 import { UsersListComponent } from './modules/users/components/users-list/users-list.component';
 import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
+// tslint:disable-next-line: max-line-length
+import { TechnologyReportTableComponent } from './modules/technology-report/components/technology-report-table/technology-report-table.component';
+import { TechnologyReportComponent } from './modules/technology-report/pages/technology-report.component';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -122,7 +125,9 @@ const maskConfig: Partial<IConfig> = {
     DialogComponent,
     LoadingBarComponent,
     UsersComponent,
-    UsersListComponent
+    UsersListComponent,
+    TechnologyReportComponent,
+    TechnologyReportTableComponent,
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/app.module.ts

@@ -0,0 +1,45 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Observable, of } from 'rxjs';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
+import { TechnologiesReportGuard } from './technologies-report.guard';
+
+describe('TechnologiesReportGuard', () => {
+
+  let technologiesReportGuard: TechnologiesReportGuard;
+  let featureManagerService: FeatureManagerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ RouterTestingModule ]
+    });
+    technologiesReportGuard = TestBed.inject(TechnologiesReportGuard);
+    featureManagerService = TestBed.inject(FeatureManagerService);
+  });
+
+  it('should be created', () => {
+    expect(technologiesReportGuard).toBeTruthy();
+  });
+
+  it('can activate the route when feature is enabled for user', () => {
+    spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(true));
+
+    const canActivate: Observable<boolean> = technologiesReportGuard.canActivate();
+
+    expect(featureManagerService.isToggleEnabledForUser).toHaveBeenCalled();
+    canActivate.subscribe(value => expect(value).toEqual(true));
+  });
+
+  it('can not active the route and is redirected to home if feature is not enabled for user', inject([Router], (router: Router) => {
+    spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(false));
+    spyOn(router, 'navigate').and.stub();
+
+    const canActivate: Observable<boolean> = technologiesReportGuard.canActivate();
+
+    expect(featureManagerService.isToggleEnabledForUser).toHaveBeenCalled();
+    canActivate.subscribe(value => expect(value).toEqual(false));
+    expect(router.navigate).toHaveBeenCalledWith(['']);
+  }));
+
+});

src/app/guards/technologies-report-guard/technologies-report.guard.spec.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Router, CanActivate } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TechnologiesReportGuard implements CanActivate {
+
+  constructor(
+    private featureManagerService: FeatureManagerService,
+    private router: Router
+  ) { }
+
+  canActivate() {
+    return this.featureManagerService
+    .isToggleEnabledForUser('ui-list-technologies')
+    .pipe(map((enabled) => {
+      if (enabled === true) {
+        return true;
+      } else {
+        this.router.navigate(['']);
+        return false;
+      }
+    }));
+  }
+}

src/app/guards/technologies-report-guard/technologies-report.guard.ts

@@ -2,6 +2,7 @@ import { ToastrService } from 'ngx-toastr';
 import { formatDate } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
+import { DATE_FORMAT } from 'src/environments/environment';
 import * as entryActions from '../../../time-clock/store/entry.actions';
 import {Store} from '@ngrx/store';
 import {EntryState} from '../../../time-clock/store/entry.reducer';
@@ -28,8 +29,8 @@ export class TimeRangeFormComponent implements OnInit {
 
   setInitialDataOnScreen() {
     this.reportForm.setValue({
-      startDate: formatDate(moment().startOf('week').toString(), 'yyyy-MM-dd', 'en'),
-      endDate: formatDate(moment().endOf('week').toString(), 'yyyy-MM-dd', 'en')
+      startDate: formatDate(moment().startOf('week').toString(), DATE_FORMAT, 'en'),
+      endDate: formatDate(moment().endOf('week').toString(), DATE_FORMAT, 'en')
     });
     this.onSubmit();
   }

src/app/modules/reports/components/time-range-form/time-range-form.component.ts

@@ -20,6 +20,8 @@ import { ProjectSelectedEvent } from './project-selected-event';
 import { SaveEntryEvent } from './save-entry-event';
 import { NgxMaterialTimepickerModule } from 'ngx-material-timepicker';
 
+import { DATE_FORMAT } from 'src/environments/environment';
+import { DATE_FORMAT_YEAR } from 'src/environments/environment';
 
 describe('DetailsFieldsComponent', () => {
   type Merged = TechnologyState & ProjectState & EntryState;
@@ -67,8 +69,8 @@ describe('DetailsFieldsComponent', () => {
     project_name: '',
     activity_id: '',
     uri: '',
-    start_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
-    end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+    start_date: formatDate(new Date(), DATE_FORMAT, 'en'),
+    end_date: formatDate(new Date(), DATE_FORMAT, 'en'),
     start_hour: '00:00',
     end_hour: '00:00',
     description: '',
@@ -179,8 +181,8 @@ describe('DetailsFieldsComponent', () => {
       project_name: '',
       activity_id: '',
       uri: '',
-      start_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
-      end_date: formatDate(new Date(), 'yyyy-MM-dd', 'en'),
+      start_date: formatDate(new Date(), DATE_FORMAT, 'en'),
+      end_date: formatDate(new Date(), DATE_FORMAT, 'en'),
       start_hour: '00:00',
       end_hour: '00:00',
       description: '',
@@ -315,7 +317,7 @@ describe('DetailsFieldsComponent', () => {
   it('displays error message when the date selected is in the future', () => {
     spyOn(toastrServiceStub, 'error');
 
-    const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
+    const futureDate = moment().add(1, 'days').format(DATE_FORMAT_YEAR);
     component.entryForm.setValue({ ...formValues, start_date: futureDate, end_date: futureDate });
     component.onSubmit();
 
@@ -325,8 +327,8 @@ describe('DetailsFieldsComponent', () => {
   it('when start_date is in the future and end_date is OK then throws an error', () => {
     spyOn(toastrServiceStub, 'error');
 
-    const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
-    const currentDate = moment().format('YYYY-MM-DD');
+    const futureDate = moment().add(1, 'days').format(DATE_FORMAT_YEAR);
+    const currentDate = moment().format(DATE_FORMAT_YEAR);
     component.entryForm.setValue({ ...formValues, start_date: futureDate, end_date: currentDate });
     component.onSubmit();
 
@@ -336,8 +338,8 @@ describe('DetailsFieldsComponent', () => {
   it('when start_date is OK and end_date is in the future then throws an error future', () => {
     spyOn(toastrServiceStub, 'error');
 
-    const futureDate = moment().add(1, 'days').format('YYYY-MM-DD');
-    const currentDate = moment().format('YYYY-MM-DD');
+    const futureDate = moment().add(1, 'days').format(DATE_FORMAT_YEAR);
+    const currentDate = moment().format(DATE_FORMAT_YEAR);
     component.entryForm.setValue({ ...formValues, start_date: currentDate, end_date: futureDate });
     component.onSubmit();