chore: set up husky & lint-staged AB#32125

.husky/pre-commit

@@ -0,0 +1,27 @@
+#!/usr/bin/env bash
+#
+# git hook to run a command before actually committing when running `git commit`:
+#
+
+ORANGE='\033[0;33m'
+NC='\033[0m' # No Color
+
+log() {
+  printf "${ORANGE}[pre-commit]${NC} $1\n"
+}
+
+log "Running custom pre-commit hook defined in ./husky/pre-commit"
+
+# Prevent committing to "main"-branch:
+if [ "$(git rev-parse --abbrev-ref HEAD)" = "main" ]; then
+  log "You shouldn't commit directly to the main branch."
+  log "Create a feature branch:  git branch new-branch-name"
+  log "Then reset 'main':        git reset --hard origin/main"
+  log "And continue to work:     git checkout new-branch-name"
+  exit 1
+fi
+
+log "Running lint-staged"
+npx lint-staged
+
+log "All done"

.lintstagedrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  '*.{md,json,yml,scss}': 'prettier --write',
+};

interfaces/IBF-dashboard/.lintstagedrc.js

@@ -0,0 +1,6 @@
+const baseConfig = require('../../.lintstagedrc.js');
+
+module.exports = {
+  ...baseConfig,
+  '*.{ts,js,html}': ['eslint --fix'],
+};

interfaces/IBF-dashboard/package.json

@@ -8,10 +8,8 @@
     "build:prod": "npm run build -- --configuration production",
     "compress": "gzipper compress --skip-compressed --remove-larger --gzip --gzip-level 9 ./www/browser/",
     "e2e": "ng e2e",
-    "format:fix": "npm run format:check -- --write",
-    "format:check": "prettier --check \"**/*.{md,js,ts,scss,html}\" ",
-    "lint:check": "ng lint",
-    "lint": "npx npm-run-all --print-label --parallel lint:check format:check",
+    "fix": "ng lint --fix",
+    "lint": "ng lint",
     "ng": "ng",
     "postbuild:prod": "npm run compress",
     "prebuild": "npm run set-env-variables",

interfaces/IBF-dashboard/src/app/analytics/analytics.enum.ts

@@ -1,30 +1,30 @@
 export enum AnalyticsPage {
-  login = 'login',
-  dashboard = 'dashboard',
   activationLog = 'activation-Log',
+  dashboard = 'dashboard',
+  login = 'login',
 }
 
 export enum AnalyticsEvent {
-  watchIbfGuide = 'watch-ibf-guide',
   aboutTrigger = 'about-trigger',
-  aggregateInformation = 'aggregate-information',
   adminLevel = 'admin-level',
-  mapLayer = 'map-layer',
-  mapLayerInformation = 'map-layer-information',
-  exportView = 'export-view',
-  logOut = 'log-out',
+  aggregateInformation = 'aggregate-information',
+  communityNotification = 'community-notification',
+  damSite = 'dam',
   eapAction = 'eap-action',
   eapSubmit = 'eap-submit',
-  waterPoint = 'water-point',
-  redCrossBranch = 'red-cross-branch',
+  evacuationCenter = 'evacuation-center',
+  exportView = 'export-view',
+  glofasStation = 'glofas-station',
   healthSite = 'health-site',
-  damSite = 'dam',
+  leadTime = 'lead-time',
+  logOut = 'log-out',
+  mapLayer = 'map-layer',
+  mapLayerInformation = 'map-layer-information',
   mapMarker = 'map-marker',
-  glofasStation = 'glofas-station',
-  typhoonTrack = 'typhoon-track',
   mapPlaceSelect = 'map-place-select',
-  leadTime = 'lead-time',
+  redCrossBranch = 'red-cross-branch',
   stopTrigger = 'stop-trigger',
-  evacuationCenter = 'evacuation-center',
-  communityNotification = 'community-notification',
+  typhoonTrack = 'typhoon-track',
+  watchIbfGuide = 'watch-ibf-guide',
+  waterPoint = 'water-point',
 }

interfaces/IBF-dashboard/src/app/analytics/analytics.service.ts

@@ -1,13 +1,13 @@
 import { Injectable } from '@angular/core';
 import {
   ApplicationInsights,
   ITelemetryItem,
 } from '@microsoft/applicationinsights-web';
 import { SeverityLevel } from 'src/app/analytics/severity-level.model';
+import { DEBUG_LOG } from 'src/app/config';
+import { Country } from 'src/app/models/country.model';
+import { CountryService } from 'src/app/services/country.service';
 import { environment } from 'src/environments/environment';
-import { DEBUG_LOG } from '../config';
-import { Country } from '../models/country.model';
-import { CountryService } from '../services/country.service';
 
 @Injectable({
   providedIn: 'root',
@@ -72,7 +72,7 @@
 
   logEvent(
     name: string,
-    properties?: { [key: string]: string | number | boolean },
+    properties?: Record<string, boolean | number | string>,
   ): void {
     if (this.isApplicationInsightsEnabled) {
       this.applicationInsights.trackEvent({ name }, properties);
@@ -94,7 +94,7 @@
 
   logTrace(
     message: string,
-    properties?: { [key: string]: string | number | boolean },
+    properties?: Record<string, boolean | number | string>,
   ) {
     if (this.isApplicationInsightsEnabled) {
       this.applicationInsights.trackTrace({ message }, properties);

interfaces/IBF-dashboard/src/app/analytics/severity-level.model.ts

@@ -1,3 +1,4 @@
+/* eslint-disable perfectionist/sort-enums */
 // Application Insights Severity Level
 export enum SeverityLevel {
   Verbose = 0,

interfaces/IBF-dashboard/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import { AuthGuard } from './auth/auth.guard';
+import { AuthGuard } from 'src/app/auth/auth.guard';
 
 const routes: Routes = [
   {
@@ -26,4 +26,4 @@
   ],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}

interfaces/IBF-dashboard/src/app/app.component.spec.ts

@@ -1,8 +1,8 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { Platform } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
-import { AppComponent } from './app.component';
+import { AppComponent } from 'src/app/app.component';
 
 describe('AppComponent', () => {
   let platformReadySpy;
@@ -10,7 +10,7 @@
 
   beforeEach(waitForAsync(() => {
     platformReadySpy = Promise.resolve();
     platformSpy = jasmine.createSpyObj('Platform', {
       ready: platformReadySpy,
     });
 

interfaces/IBF-dashboard/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import {
-  HttpClient,
   HTTP_INTERCEPTORS,
+  HttpClient,
   provideHttpClient,
   withInterceptorsFromDi,
 } from '@angular/common/http';
@@ -11,11 +11,11 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { AppComponent } from 'src/app/app.component';
+import { AppRoutingModule } from 'src/app/app-routing.module';
+import { AuthInterceptorService } from 'src/app/services/auth.interceptor.service';
 import { LoaderInterceptorService } from 'src/app/services/loader.interceptor.service';
 import { environment } from 'src/environments/environment';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { AuthInterceptorService } from './services/auth.interceptor.service';
 
 export function createTranslateLoader(http: HttpClient) {
   return new TranslateHttpLoader(http, './assets/i18n/', '.json');

interfaces/IBF-dashboard/src/app/auth/auth.guard.ts

@@ -6,7 +6,7 @@ import {
   UrlTree,
 } from '@angular/router';
 import { Observable } from 'rxjs';
-import { AuthService } from './auth.service';
+import { AuthService } from 'src/app/auth/auth.service';
 
 @Injectable({
   providedIn: 'root',
@@ -21,9 +21,9 @@ export class AuthGuard {
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot,
   ):
+    | boolean
     | Observable<boolean | UrlTree>
     | Promise<boolean | UrlTree>
-    | boolean
     | UrlTree {
     const url: string = state.url;
 

interfaces/IBF-dashboard/src/app/auth/auth.service.ts

@@ -3,9 +3,9 @@ import { Router } from '@angular/router';
 import { ToastController } from '@ionic/angular';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { User } from 'src/app/models/user/user.model';
+import { UserRole } from 'src/app/models/user/user-role.enum';
 import { ApiService } from 'src/app/services/api.service';
 import { JwtService } from 'src/app/services/jwt.service';
-import { UserRole } from '../models/user/user-role.enum';
 
 const HTTP_STATUS_MESSAGE_MAP = {
   401: 'Email and/or password unknown',
@@ -95,7 +95,7 @@ export class AuthService implements OnDestroy {
   }
 
   private onLoginResponse = (response) => {
-    if (!response.user || !response.user.token) {
+    if (!response.user?.token) {
       return;
     }
 

interfaces/IBF-dashboard/src/app/components/about-btn/about-btn.component.ts

@@ -11,8 +11,8 @@ import {
   DisasterType,
 } from 'src/app/models/country.model';
 import { CountryService } from 'src/app/services/country.service';
+import { DisasterTypeService } from 'src/app/services/disaster-type.service';
 import { EventService } from 'src/app/services/event.service';
-import { DisasterTypeService } from '../../services/disaster-type.service';
 
 @Component({
   selector: 'app-about-btn',

interfaces/IBF-dashboard/src/app/components/action-result-popover/action-result-popover.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { IonicModule } from '@ionic/angular';
 import { TranslateModule } from '@ngx-translate/core';
-import { ActionResultPopoverComponent } from './action-result-popover.component';
+import { ActionResultPopoverComponent } from 'src/app/components/action-result-popover/action-result-popover.component';
 
 describe('ActionResultPopoverComponent', () => {
   let component: ActionResultPopoverComponent;

interfaces/IBF-dashboard/src/app/components/activation-log-button/activation-log-button.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnDestroy } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
-import { Country, DisasterType } from '../../models/country.model';
-import { CountryService } from '../../services/country.service';
-import { DisasterTypeService } from '../../services/disaster-type.service';
+import { Country, DisasterType } from 'src/app/models/country.model';
+import { CountryService } from 'src/app/services/country.service';
+import { DisasterTypeService } from 'src/app/services/disaster-type.service';
 
 @Component({
   selector: 'app-activation-log-button',

interfaces/IBF-dashboard/src/app/components/admin-level/admin-level.component.ts

@@ -6,27 +6,27 @@ import {
   AnalyticsPage,
 } from 'src/app/analytics/analytics.enum';
 import { AnalyticsService } from 'src/app/analytics/analytics.service';
+import {
+  Country,
+  CountryDisasterSettings,
+  DisasterType,
+} from 'src/app/models/country.model';
+import { PlaceCode } from 'src/app/models/place-code.model';
 import {
   AdminLevelButton,
   AdminLevelService,
 } from 'src/app/services/admin-level.service';
+import { CountryService } from 'src/app/services/country.service';
+import { DisasterTypeService } from 'src/app/services/disaster-type.service';
 import { EventService } from 'src/app/services/event.service';
 import { MapService } from 'src/app/services/map.service';
+import { MapViewService } from 'src/app/services/map-view.service';
+import { PlaceCodeService } from 'src/app/services/place-code.service';
 import { AdminLevel, AdminLevelType } from 'src/app/types/admin-level';
+import { DisasterTypeKey } from 'src/app/types/disaster-type-key';
+import { EventState } from 'src/app/types/event-state';
 import { IbfLayer, IbfLayerGroup, IbfLayerName } from 'src/app/types/ibf-layer';
-import {
-  Country,
-  CountryDisasterSettings,
-  DisasterType,
-} from '../../models/country.model';
-import { PlaceCode } from '../../models/place-code.model';
-import { CountryService } from '../../services/country.service';
-import { DisasterTypeService } from '../../services/disaster-type.service';
-import { MapViewService } from '../../services/map-view.service';
-import { PlaceCodeService } from '../../services/place-code.service';
-import { DisasterTypeKey } from '../../types/disaster-type-key';
-import { EventState } from '../../types/event-state';
-import { MapView } from '../../types/map-view';
+import { MapView } from 'src/app/types/map-view';
 
 @Component({
   selector: 'app-admin-level',
@@ -184,9 +184,7 @@ export class AdminLevelComponent implements OnInit, OnDestroy {
   }
 
   public useBreadcrumbs(disasterType: DisasterType): boolean {
-    return this.breadcrumbDisasters.includes(
-      disasterType?.disasterType as DisasterTypeKey,
-    );
+    return this.breadcrumbDisasters.includes(disasterType?.disasterType);
   }
 
   public clickBreadcrumbButton(breadCrumb: MapView, selected: boolean) {
@@ -247,19 +245,19 @@ export class AdminLevelComponent implements OnInit, OnDestroy {
   public showBreadcrumb(breadCrumb: MapView): boolean {
     if (breadCrumb === MapView.national) {
       return [
-        MapView.national,
-        MapView.event,
         MapView.adminArea,
         MapView.adminArea2,
         MapView.adminArea3,
+        MapView.event,
+        MapView.national,
       ].includes(this.currentMapView);
     } else if (breadCrumb === MapView.event) {
       return (
         [
-          MapView.event,
           MapView.adminArea,
           MapView.adminArea2,
           MapView.adminArea3,
+          MapView.event,
         ].includes(this.currentMapView) &&
         this.countryDisasterSettings?.isEventBased
       );

interfaces/IBF-dashboard/src/app/components/areas-of-focus-summary/areas-of-focus-summary.component.ts

@@ -1,24 +1,27 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
 import { Subscription } from 'rxjs';
+import {
+  AnalyticsEvent,
+  AnalyticsPage,
+} from 'src/app/analytics/analytics.enum';
+import { AnalyticsService } from 'src/app/analytics/analytics.service';
+import { LayerControlInfoPopoverComponent } from 'src/app/components/layer-control-info-popover/layer-control-info-popover.component';
+import {
+  Country,
+  CountryDisasterSettings,
+  DisasterType,
+} from 'src/app/models/country.model';
 import { PlaceCode } from 'src/app/models/place-code.model';
 import { ApiService } from 'src/app/services/api.service';
+import { CountryService } from 'src/app/services/country.service';
+import { DisasterTypeService } from 'src/app/services/disaster-type.service';
 import { EapActionsService } from 'src/app/services/eap-actions.service';
 import { EventService } from 'src/app/services/event.service';
 import { PlaceCodeService } from 'src/app/services/place-code.service';
+import { AreaOfFocus } from 'src/app/types/area-of-focus';
 import { EventState } from 'src/app/types/event-state';
-import { AnalyticsEvent, AnalyticsPage } from '../../analytics/analytics.enum';
-import { AnalyticsService } from '../../analytics/analytics.service';
-import {
-  Country,
-  CountryDisasterSettings,
-  DisasterType,
-} from '../../models/country.model';
-import { CountryService } from '../../services/country.service';
-import { DisasterTypeService } from '../../services/disaster-type.service';
-import { AreaOfFocus } from '../../types/area-of-focus';
-import { TriggeredArea } from '../../types/triggered-area';
-import { LayerControlInfoPopoverComponent } from '../layer-control-info-popover/layer-control-info-popover.component';
+import { TriggeredArea } from 'src/app/types/triggered-area';
 
 @Component({
   selector: 'app-areas-of-focus-summary',