fix: TT-132 Remove Feature Toggle from User list (#630)

Author: PaulRC-ioet

src/app/modules/users/components/users-list/users-list.component.html

@@ -1,22 +1,23 @@
 <table
-  *ngIf="users && (isLoading$ | async) === false"
+  *ngIf="users"
   class="table table-sm table-bordered table-striped mb-0"
   datatable
+  [dtTrigger]="dtTrigger"
   [dtOptions]="dtOptions"
 >
   <thead class="thead-blue">
     <tr class="d-flex">
-      <th class="col">User Email</th>
-      <th class="col">Names</th>
-      <th class="col" *ngIf="isUserRoleToggleOn">Roles</th>
+      <th class="col-4">User Email</th>
+      <th class="col-5">Names</th>
+      <th class="col-3">Roles</th>
     </tr>
   </thead>
   <app-loading-bar *ngIf="isLoading$ | async"></app-loading-bar>
-  <tbody *ngIf="(isLoading$ | async) === false">
+  <tbody>
     <tr class="d-flex" *ngFor="let user of users">
-      <td class="col">{{ user.email }}</td>
-      <td class="col">{{ user.name }}</td>
-      <td class="col text-center" *ngIf="isUserRoleToggleOn">
+      <td class="col-4">{{ user.email }}</td>
+      <td class="col-5">{{ user.name }}</td>
+      <td class="col-3 text-center">
         <div>
           <ui-switch
             size="small"

src/app/modules/users/components/users-list/users-list.component.spec.ts

@@ -4,16 +4,13 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { UsersListComponent } from './users-list.component';
 import { UserActionTypes, UserState, LoadUsers, GrantRoleUser, RevokeRoleUser } from '../../store';
-import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 import { ActionsSubject } from '@ngrx/store';
 import { DataTablesModule } from 'angular-datatables';
-import { Observable, of } from 'rxjs';
 
 describe('UsersListComponent', () => {
   let component: UsersListComponent;
   let fixture: ComponentFixture<UsersListComponent>;
   let store: MockStore<UserState>;
-  let featureManagerService: FeatureManagerService;
   const actionSub: ActionsSubject = new ActionsSubject();
 
   const state: UserState = {
@@ -39,7 +36,6 @@ describe('UsersListComponent', () => {
         declarations: [UsersListComponent],
         providers: [provideMockStore({ initialState: state }), { provide: ActionsSubject, useValue: actionSub }],
       }).compileComponents();
-      featureManagerService = TestBed.inject(FeatureManagerService);
     })
   );
 
@@ -75,36 +71,6 @@ describe('UsersListComponent', () => {
     expect(component.users).toEqual(state.data);
   });
 
-  it('When Component is created, should call the feature toggle method', () => {
-    spyOn(component, 'isFeatureToggleActivated').and.returnValue(of(true));
-
-    component.ngOnInit();
-
-    expect(component.isFeatureToggleActivated).toHaveBeenCalled();
-    expect(component.isUserRoleToggleOn).toBe(true);
-  });
-
-  const actionsParams = [
-    { actionType: UserActionTypes.GRANT_USER_ROLE_SUCCESS },
-    { actionType: UserActionTypes.REVOKE_USER_ROLE_SUCCESS },
-  ];
-
-  actionsParams.map((param) => {
-    it(`When action ${param.actionType} is dispatched should triggered load Users action`, () => {
-      spyOn(store, 'dispatch');
-
-      const actionSubject = TestBed.inject(ActionsSubject) as ActionsSubject;
-      const action = {
-        type: param.actionType,
-        payload: state.data,
-      };
-
-      actionSubject.next(action);
-
-      expect(store.dispatch).toHaveBeenCalledWith(new LoadUsers());
-    });
-  });
-
   const grantRoleTypes = [
     { roleId: 'admin', roleValue: 'time-tracker-admin' },
     { roleId: 'test', roleValue: 'time-tracker-tester' },
@@ -190,23 +156,7 @@ describe('UsersListComponent', () => {
     });
   });
 
-  const toggleValues = [true, false];
-  toggleValues.map((toggleValue) => {
-    it(`when FeatureToggle is ${toggleValue} should return ${toggleValue}`, () => {
-      spyOn(featureManagerService, 'isToggleEnabledForUser').and.returnValue(of(toggleValue));
-
-      const isFeatureToggleActivated: Observable<boolean> = component.isFeatureToggleActivated();
-
-      expect(featureManagerService.isToggleEnabledForUser).toHaveBeenCalled();
-      isFeatureToggleActivated.subscribe((value) => expect(value).toEqual(toggleValue));
-    });
-  });
-
-  /*
-    TODO: block commented on purpose so that when the tests pass and the Feature toggle is removed,
-        the table will be rendered again with dtInstance and not with dtOptions
-
-    it('on success load users, the datatable should be reloaded', async () => {
+  it('on success load users, the datatable should be reloaded', async () => {
     const actionSubject = TestBed.inject(ActionsSubject);
     const action = {
       type: UserActionTypes.LOAD_USERS_SUCCESS,
@@ -217,7 +167,7 @@ describe('UsersListComponent', () => {
     actionSubject.next(action);
 
     expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
-  });*/
+  });
 
   afterEach(() => {
     component.dtTrigger.unsubscribe();

src/app/modules/users/components/users-list/users-list.component.ts

@@ -2,11 +2,10 @@ import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular
 import { ActionsSubject, select, Store } from '@ngrx/store';
 import { DataTableDirective } from 'angular-datatables';
 import { Observable, Subject, Subscription } from 'rxjs';
-import { delay, filter, map } from 'rxjs/operators';
+import { delay, filter } from 'rxjs/operators';
 import { User } from '../../models/users';
 import { GrantRoleUser, LoadUsers, RevokeRoleUser, UserActionTypes } from '../../store/user.actions';
 import { getIsLoading } from '../../store/user.selectors';
-import { FeatureManagerService } from 'src/app/modules/shared/feature-toggles/feature-toggle-manager.service';
 
 @Component({
   selector: 'app-users-list',
@@ -22,40 +21,19 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild(DataTableDirective, { static: false })
   dtElement: DataTableDirective;
   dtOptions: any = {};
-  isUserRoleToggleOn;
 
-  constructor(
-    private store: Store<User>,
-    private actionsSubject$: ActionsSubject,
-    private featureManagerService: FeatureManagerService
-  ) {
+  constructor(private store: Store<User>, private actionsSubject$: ActionsSubject) {
     this.isLoading$ = store.pipe(delay(0), select(getIsLoading));
   }
 
   ngOnInit(): void {
-    this.isFeatureToggleActivated().subscribe((flag) => {
-      this.isUserRoleToggleOn = flag;
-    });
     this.store.dispatch(new LoadUsers());
     this.loadUsersSubscription = this.actionsSubject$
       .pipe(filter((action: any) => action.type === UserActionTypes.LOAD_USERS_SUCCESS))
       .subscribe((action) => {
         this.users = action.payload;
         this.rerenderDataTable();
       });
-
-    this.switchRoleSubscription = this.actionsSubject$
-      .pipe(
-        filter(
-          (action: any) =>
-            action.type === UserActionTypes.GRANT_USER_ROLE_SUCCESS ||
-            action.type === UserActionTypes.REVOKE_USER_ROLE_SUCCESS
-        )
-      )
-      .subscribe((action) => {
-        this.store.dispatch(new LoadUsers());
-        this.rerenderDataTable();
-      });
   }
 
   ngAfterViewInit(): void {
@@ -83,12 +61,4 @@ export class UsersListComponent implements OnInit, OnDestroy, AfterViewInit {
       ? this.store.dispatch(new RevokeRoleUser(userId, roleId))
       : this.store.dispatch(new GrantRoleUser(userId, roleId));
   }
-
-  isFeatureToggleActivated() {
-    return this.featureManagerService.isToggleEnabledForUser('ui-list-test-users').pipe(
-      map((enabled) => {
-        return enabled === true ? true : false;
-      })
-    );
-  }
 }