ESLint Fixes

ui/.eslintrc.json

@@ -19,18 +19,25 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "app",
             "style": "camelCase"
           }
         ],
         "@angular-eslint/component-selector": [
           "error",
           {
             "type": "element",
-            "prefix": "app",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@typescript-eslint/no-unused-vars": [
+          "warn",
+          {
+            "argsIgnorePattern": "^_",
+            "varsIgnorePattern": "^_",
+            "caughtErrorsIgnorePattern": "^_"
+          }
+        ],
+        "@typescript-eslint/no-explicit-any": ["warn"]
       }
     },
     {

ui/src/app/component/app/app.component.html

@@ -11,7 +11,7 @@
         <a class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" routerLink="/user">Add User</a>
       </li>
       <li class="nav-item" *ngIf="auth.canExportUsers()">
-        <a class="nav-link" role="button" [class.disabled]="exporting" (click)="exportUsers()">
+        <a class="nav-link" role="button" [class.disabled]="exporting" (click)="exportUsers()" (keyup)="exportUsers()" tabindex="0">
           <ng-container *ngIf="exporting">
             <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
             Exporting&hellip;

ui/src/app/component/app/app.component.ts

@@ -47,7 +47,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     const params = this.urlHelper.parseQueryString(location.search.replace(/^\?/, ''));
-    if (params.hasOwnProperty('error')) {
+    if (Object.prototype.hasOwnProperty.call(params, 'error')) {
       AppComponent.error(params['error_description'] + ' (' + params['error'] + ')');
       this.loaded = true;
       return;

ui/src/app/component/date/date.component.html

@@ -1,4 +1,4 @@
-<div class="input-group"
+<div class="input-group" tabindex="0"
      (keydown.n)="setDaysFromToday(0)"
      (keydown.t)="setDaysFromToday(1)"
      (keydown.y)="setDaysFromToday(-1)"

ui/src/app/component/item-selector/item-selector.component.html

@@ -16,7 +16,7 @@
     <span class="oi oi-chevron-bottom float-right"></span>
   </button>
   <div class="dropdown-menu bg-light p-2"
-       style="overflow-y: auto; min-width: 100%; max-width: 200%"
+       style="overflow-y: auto; min-width: 100%; max-width: 200%" tabindex="0"
        [class.dropdown-menu-right]="alignRight"
        [ngStyle]="{maxHeight: maxHeight}"
        (click)="!multiple || $event.stopPropagation()"
@@ -26,11 +26,11 @@
        [attr.aria-labelledby]="id+'-toggle-btn'">
     <div class="text-truncate text-muted small border-bottom mb-2">
       <div class="custom-control custom-checkbox float-left" [class.d-none]="readonly"
-           *ngIf="multiple && (maxSelectable == null || available.length <= maxSelectable)">
+           *ngIf="multiple && (maxSelectable === undefined || available.length <= maxSelectable)">
         <div class="pl-1">
           <input #toggleAllBtn [id]="id + '-toggle-all'" class="custom-control-input" type="checkbox"
                  title="Toggle all items"
-                 (change)="subMenuItems == null ? toggleAllItems() : toggleAllSubMenuItems(); updateDropDown()"
+                 (change)="subMenuItems === undefined ? toggleAllItems() : toggleAllSubMenuItems(); updateDropDown()"
                  [checked]="toggleAllCheckboxState()"
                  [indeterminate]="toggleCheckboxIndeterminateState()"/>
           <label [for]="id+'-toggle-all'"
@@ -44,27 +44,27 @@
            (keyup.space)="toggle(null)">Clear</a>
       </div>
       <ul class="nav nav-tabs float-right" style="margin-bottom: -1px"
-          (click)="$event.stopPropagation()">
+          (click)="$event.stopPropagation()" (keyup)="$event.stopPropagation()" tabindex="0">
         <li class="nav-item">
           <a class="nav-link py-1" [class.active]="onlyShowSelected"
              style="cursor: pointer; outline: none" tabindex="0"
              title="Only show selected options"
-             [hidden]="subMenuItems != null"
+             [hidden]="subMenuItems !== undefined"
              (click)="onlyShowSelected = true; updateDropDown()"
              (keyup.space)="onlyShowSelected = true; updateDropDown()">Selected</a>
         </li>
         <li class="nav-item">
           <a class="nav-link py-1" [class.active]="!onlyShowSelected"
              style="cursor: pointer; outline: none" tabindex="0"
              title="Show all options"
-             [hidden]="subMenuItems != null"
+             [hidden]="subMenuItems !== undefined"
              (click)="onlyShowSelected = false; updateDropDown()"
              (keyup.space)="onlyShowSelected = false; updateDropDown()">All</a>
 
           <select (change)="onlyShowSelected = false; getSubMenuList(); updateDropDown()"
                   [(ngModel)]="selectedSubMenuItem"
                   [class.active]="!onlyShowSelected"
-                  [hidden]="subMenuItems == null"
+                  [hidden]="subMenuItems === undefined"
                   class="nav-link py-1"
                   style="cursor: pointer; text-align-last: center"
                   tabindex="0"
@@ -98,7 +98,7 @@
                title="Filter selectable options" placeholder="Search&hellip;" aria-label="Filter">
       </div>
     </div>
-    <div *ngIf="available == null || available.length === 0">{{ subMenuMessage }}</div>
+    <div *ngIf="available === undefined || available.length === 0">{{ subMenuMessage }}</div>
     <div class="text-truncate custom-control custom-{{multiple? 'checkbox': 'radio'}}"
          [class.d-none]="onlyShowSelected && !isSelected(item)"
          *ngFor="let item of filtered; let i = index">

ui/src/app/component/item-selector/item-selector.component.ts

@@ -70,9 +70,11 @@ export class ItemSelectorComponent
   onlyShowSelected: boolean;
   subMenuMessage: string;
 
-  @Input() idMapper: Function = null;
-  @Input() getSubMenu: Function;
-  @Input() labelMapper: Function = (item: any) => item;
+  @Input() idMapper: (_:any) => string = null;
+  @Input() getSubMenu: (item : string) => {
+    subscribe(param: (items) => void, param2: () => string): void;
+  };
+  @Input() labelMapper: (item : any) => string;
 
   private propagateChange = (_: any) => {
   }
@@ -81,7 +83,7 @@ export class ItemSelectorComponent
 
   ngOnChanges(changes: SimpleChanges) {
     // Change detection to the default selectedSubMenuItem (homeArea)
-    if (changes.hasOwnProperty('selectedSubMenuItem')) {
+    if (Object.prototype.hasOwnProperty.call(changes, 'selectedSubMenuItem')) {
       this.getSubMenuList();
     }
   }

ui/src/app/component/message/message.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="message != null" class="mb-0 alert alert-{{severity}} alert-dismissible">
+<div *ngIf="message !== undefined" class="mb-0 alert alert-{{severity}} alert-dismissible">
   <span [innerHTML]="message"></span>
   <a class="close" data-dismiss="alert" aria-label="close">&times;</a>
 </div>

ui/src/app/component/search/search.component.html

@@ -17,7 +17,7 @@ <h1>Search</h1>
             <span *ngFor="let username of RecentUsersUtils.getRecentUsers().reverse(); let isLast = last">
               <a routerLink="/user/{{username}}" (keyup.enter)="router.navigate(['/user/'+username])">{{username}}</a>{{isLast? '': ','}}
             </span>
-            <a (click)="RecentUsersUtils.clear()" title="Clear" style="cursor: pointer">&times;</a>
+            <a (click)="RecentUsersUtils.clear()" (keyup)="RecentUsersUtils.clear()" tabindex="0" title="Clear" style="cursor: pointer">&times;</a>
           </p>
           <div class="input-group input-group-link-overlay">
             <input id="query" name="query" type="search" [(ngModel)]="searchParams.query"
@@ -126,7 +126,7 @@ <h4>No results&hellip;</h4>
               <th>Team(s)</th>
               <th *ngIf="searchParams.includeInactiveUsers" class="text-nowrap">End Date</th>
               <th class="text-right " >
-                <span class="oi oi-data-transfer-download" style="cursor: pointer;" (click)="exportSearchResultToCSV()" title="Export to CSV..."></span >
+                <span class="oi oi-data-transfer-download" style="cursor: pointer;" (click)="exportSearchResultToCSV()" (keyup)="exportSearchResultToCSV()" tabindex="0" title="Export to CSV..."></span >
               </th>
             </tr>
             </thead>
@@ -142,8 +142,8 @@ <h4>No results&hellip;</h4>
               <td *ngIf="showEmailColumn" title="Email">{{result.email}}</td>
               <td title="Staff Code">{{result.staffCode}}</td>
               <td class="w-25" [title]="teamDescriptions(result.teams)">
-                <span *ngIf="result.teams != null && result.teams.length == 1">{{ result.teams[0].description }}</span>
-                <span *ngIf="result.teams != null && result.teams.length > 1">{{ result.teams.length }} teams</span>
+                <span *ngIf="result.teams !== null && result.teams.length === 1">{{ result.teams[0].description }}</span>
+                <span *ngIf="result.teams !== null && result.teams.length > 1">{{ result.teams.length }} teams</span>
               </td>
               <td title="End Date" *ngIf="searchParams.includeInactiveUsers" class="text-nowrap">{{ result.endDate | date: 'dd/MM/yyyy' }}</td>
               <td class="text-right">
@@ -157,14 +157,14 @@ <h4>No results&hellip;</h4>
       <hr/>
       <div class="btn-toolbar justify-content-center">
         <button id="search-results-next" class="btn btn-outline-secondary"
-                [hidden]="results.length % searchParams.pageSize != 0 || hasMoreResults === false"
+                [hidden]="results.length % searchParams.pageSize !== 0 || hasMoreResults === false"
                 [disabled]="searching"
                 (click)="nextPage.next()">
           {{searching ? 'Loading': 'Load more'}}
           <span class="oi oi-arrow-circle-bottom"></span>
         </button>
         <span id="search-results-count" class="small text-muted"
-              [hidden]="results.length % searchParams.pageSize == 0 && hasMoreResults === true">
+              [hidden]="results.length % searchParams.pageSize === 0 && hasMoreResults === true">
           {{results.length}} result{{results.length === 1? '': 's'}}
         </span>
       </div>

ui/src/app/component/user/user.component.html

@@ -91,7 +91,7 @@ <h2 class="card-title mb-0" id="user-details">User Details</h2>
           <div class="col-sm-4">
             <date id="start-date" name="start-date" #startdate="ngModel"
                   [(ngModel)]="user.startDate"
-                  [required]="user.staffCode != null"
+                  [required]="user.staffCode !== undefined"
                   [max]="globalMaxDate"
                   [min]="globalMinDate"
                   [readonly]="mode === 'View'"
@@ -152,14 +152,14 @@ <h2 class="card-title mb-0" id="authorisation">Authorisation</h2>
         <hr>
         <div class="form-group row">
           <label [for]="'role-groups-toggle-btn'" class="col-sm-2 col-form-label">Role Groups</label>
-          <div class="col-sm-{{selectedRoleGroups != null && selectedRoleGroups.length != 0 && mode !== 'View'? '3  pr-sm-0': 4}}">
+          <div class="col-sm-{{selectedRoleGroups !== undefined && selectedRoleGroups.length !== 0 && mode !== 'View'? '3  pr-sm-0': 4}}">
             <item-selector id="role-groups" #roleGroupField multiple="true" maxHeight="300px"
                            [(selected)]="selectedRoleGroups"
                            [available]="roleGroups"
                            [readonly]="mode === 'View'"
                            [labelMapper]="LabelMappingUtils.nameToLabel"></item-selector>
           </div>
-          <div class="col-sm-1 pl-sm-1" *ngIf="selectedRoleGroups != null && selectedRoleGroups.length != 0 && mode !== 'View'">
+          <div class="col-sm-1 pl-sm-1" *ngIf="selectedRoleGroups !== undefined && selectedRoleGroups.length !== 0 && mode !== 'View'">
             <button class="btn btn-sm btn-outline-secondary w-100 py-2" (click)="applyRoleGroup()"
                     title="Apply selected role groups to this user"
                     type="button">
@@ -231,7 +231,7 @@ <h2 class="card-title mb-0" id="authorisation">Authorisation</h2>
               </small>
             </div>
             <div class="text-muted small"
-                 *ngIf="user.homeArea == null && datasetsList.invalid">
+                 *ngIf="user.homeArea === undefined && datasetsList.invalid">
               Datasets must be entered before selecting a Home Area
             </div>
           </div>
@@ -309,21 +309,21 @@ <h2 class="card-title mb-0" id="staff-details">Staff Details</h2>
               <p *ngIf="staffCode.dirty && staffCode.invalid && staffCode.errors['pattern']" class="text-danger">
                 *Staff code should consist of 3 alphanumeric characters followed by one letter and three numbers eg. XXXA001.
               </p>
-              <p *ngIf="staffCode.dirty && staffCode.valid && user.staffCode != null && user.staffCode !== '' && !user.staffCode?.match('[A-Z0-9]{3}[A-Z][0-9]{3}')">
+              <p *ngIf="staffCode.dirty && staffCode.valid && user.staffCode !== undefined && user.staffCode !== '' && !user.staffCode?.match('[A-Z0-9]{3}[A-Z][0-9]{3}')">
                 Warning: Staff code does not match the recommended format of 3 alphanumeric characters followed by one letter and three numbers (eg. XXXA001).
               </p>
-              <p *ngIf="mode === 'Update' && user.homeArea != null && user.homeArea.code != existingHomeAreaCode &&
-                        !staffCode.dirty && staffCode.valid && user.staffCode != null && user.staffCode !== ''">
+              <p *ngIf="mode === 'Update' && user.homeArea !== undefined && user.homeArea.code !== existingHomeAreaCode &&
+                        !staffCode.dirty && staffCode.valid && user.staffCode !== undefined && user.staffCode !== ''">
                 Warning: Home Area has changed. Please either remove the user's Staff Details, or generate a new {{ user.homeArea.code }} Staff Code using the <span class="oi oi-loop-circular small" title="Generate"></span> button above.
                 Otherwise the Staff Code will be automatically unlinked from this user.
               </p>
-              <p *ngIf="userWithStaffCode != null">
-                <ng-container *ngIf="userWithStaffCode.username != null && userWithStaffCode.username != user.username">
+              <p *ngIf="userWithStaffCode !== undefined">
+                <ng-container *ngIf="userWithStaffCode.username !== undefined && userWithStaffCode.username !== user.username">
                   Warning: This staff code already belongs to <strong>{{ userWithStaffCode.username }}</strong> ({{ userWithStaffCode.forenames }} {{ userWithStaffCode.surname }}).
                   Saving this value will cause the staff record to be unlinked from <strong>{{ userWithStaffCode.username }}</strong> and linked to <strong>{{ user.username }}</strong>.
                   This means that any existing values for Staff Grade, Sub-Contracted Provider and Teams that are associated with <strong>{{ user.username }}</strong>, will be overwritten by those of <strong>{{ userWithStaffCode.username }}</strong>.
                 </ng-container>
-                <ng-container *ngIf="userWithStaffCode != null && userWithStaffCode.username == null">
+                <ng-container *ngIf="userWithStaffCode !== undefined && userWithStaffCode.username === undefined">
                   Warning: A staff record already exists for this staff code, but has not been linked to a user.
                   Saving this value will cause the existing staff record to be linked to <strong>{{ user.username }}</strong>.
                   This means that any existing values for Staff Grade, Sub-Contracted Provider and Teams that are associated with <strong>{{ user.username }}</strong>, will be overwritten by those associated with the existing record.
@@ -334,7 +334,7 @@ <h2 class="card-title mb-0" id="staff-details">Staff Details</h2>
           <label [for]="'staff-grade-toggle-btn'" class="col-sm-2 col-form-label">Staff Grade</label>
           <div class="col-sm-4">
             <item-selector id="staff-grade" name="staffGrade" #staffGrade="ngModel" maxHeight="300px"
-                           [required]="user.staffCode != null && user.staffCode !== '' && staffCode.valid == true"
+                           [required]="user.staffCode !== undefined && user.staffCode !== '' && staffCode.valid === true"
                            [(ngModel)]="user.staffGrade"
                            [(selected)]="user.staffGrade"
                            [available]="staffGrades"
@@ -353,7 +353,7 @@ <h2 class="card-title mb-0" id="staff-details">Staff Details</h2>
           <div class="col-sm-4">
             <item-selector id="teams" name="teams" multiple="true" #teamsList="ngModel" maxHeight="300px"
                            [(ngModel)] = "user.teams"
-                           [disabled]="user.staffCode == null || user.staffCode === ''"
+                           [disabled]="user.staffCode === undefined || user.staffCode === ''"
                            [(selected)]="user.teams"
                            [available]="teams"
                            [subMenuItems]="user.datasets"

ui/src/app/directive/auto-focus.directive.ts

@@ -1,7 +1,7 @@
 import {AfterViewInit, Directive, ElementRef} from '@angular/core';
 
 @Directive({
-  selector: '[auto-focus]'
+  selector: '[autoFocus]'
 })
 export class AutoFocusDirective implements AfterViewInit {
   constructor(private el: ElementRef) {}

ui/src/app/interceptor/error.interceptor.spec.ts

@@ -1,8 +1,7 @@
 import {ErrorInterceptor} from './error.interceptor';
-import {HttpErrorResponse, HttpRequest, HttpResponse} from '@angular/common/http';
-import {of, throwError} from 'rxjs';
+import {HttpErrorResponse, HttpRequest} from '@angular/common/http';
+import {throwError} from 'rxjs';
 import {AppComponent} from '../component/app/app.component';
-import {environment} from '../../environments/environment';
 
 describe('ErrorInterceptor', () => {
 

ui/src/app/service/impl/authorisation.service.ts

@@ -91,11 +91,11 @@ export class AuthorisationService {
   login(): void {
     // Login using OAuth if required
     if (!this.oauthService.hasValidAccessToken()) {
-      if (this.initialQueryParams.hasOwnProperty('u') && this.initialQueryParams.hasOwnProperty('t')) {
+      if (Object.prototype.hasOwnProperty.call(this.initialQueryParams, 'u') && Object.prototype.hasOwnProperty.call(this.initialQueryParams, 't')) {
         // We have delius request params, use preauthenticated OAuth flow
         this.oauthService.customQueryParams['grant_type'] = 'preauthenticated';
         this.oauthService.fetchTokenUsingPasswordFlow(null, null).then(_ => location.reload());
-      } else if (!this.initialQueryParams.hasOwnProperty('code')) {
+      } else if (!Object.prototype.hasOwnProperty.call(this.initialQueryParams, 'code')) {
         // Get authorization code first
         this.oauthService.initCodeFlow();
       } else {