refactor: fix ScriptBeeClient lint issues

.github/workflows/release.yml

@@ -49,9 +49,8 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install chromium --with-deps
 
-      # TODO FIXIT(#123): uncomment when eslint issues are fixed
-      #      - name: Lint
-      #        run: npm run lint
+      - name: Lint
+        run: npm run lint
 
       - name: Run tests
         run: npm run test:ci
@@ -197,7 +196,7 @@ jobs:
   # ------------------------------------------------------------------
   create-release:
     name: Create GitHub Release
-    needs: [ui-build-push, gateway-build-push, calculation-build-push]
+    needs: [ ui-build-push, gateway-build-push, calculation-build-push ]
     runs-on: ubuntu-latest
     permissions:
       contents: write

.github/workflows/ui-ci.yml

@@ -52,9 +52,8 @@ jobs:
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: npx playwright install chromium --with-deps
 
-# TODO FIXIT(#123): uncomment when eslint issues are fixed
-#      - name: Lint
-#        run: npm run lint
+      - name: Lint
+        run: npm run lint
 
       - name: Run Tests
         run: npm run test:ci

ScriptBeeClient/.prettierrc.json

@@ -8,7 +8,7 @@
   "trailingComma": "es5",
   "bracketSameLine": true,
   "printWidth": 160,
-  "endOfLine": "crlf",
+  "endOfLine": "auto",
   "overrides": [
     {
       "files": "*.html",

ScriptBeeClient/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NavMenuComponent } from './components/nav-menu/nav-menu.component';
 import { MatIconRegistry } from '@angular/material/icon';
@@ -11,7 +11,10 @@ import { DomSanitizer } from '@angular/platform-browser';
   styleUrl: './app.component.scss',
 })
 export class AppComponent {
-  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
-    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
+  private matIconRegistry = inject(MatIconRegistry);
+  private domSanitizer = inject(DomSanitizer);
+
+  constructor() {
+    this.matIconRegistry.addSvgIconSet(this.domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
   }
 }

ScriptBeeClient/src/app/components/dialogs/confirmation-dialog/confirmation-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
 
@@ -16,10 +16,8 @@ export interface ConfirmationDialogData {
   styleUrls: ['./confirmation-dialog.component.scss'],
 })
 export class ConfirmationDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: ConfirmationDialogData
-  ) {}
+  public dialogRef = inject(MatDialogRef<ConfirmationDialogComponent>);
+  public data = inject<ConfirmationDialogData>(MAT_DIALOG_DATA);
 
   onCancel(): void {
     this.dialogRef.close(false);

ScriptBeeClient/src/app/components/dialogs/instance-not-allocated-dialog/instance-not-allocated-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatButtonModule } from '@angular/material/button';
@@ -21,12 +21,9 @@ export interface InstanceNotAllocatedDialogData {
 export class InstanceNotAllocatedDialog {
   isAllocateLoading = signal(false);
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public data: InstanceNotAllocatedDialogData,
-    public dialogRef: MatDialogRef<InstanceNotAllocatedDialog>,
-    private instanceService: InstanceService
-  ) {}
+  public data = inject<InstanceNotAllocatedDialogData>(MAT_DIALOG_DATA);
+  public dialogRef = inject(MatDialogRef<InstanceNotAllocatedDialog>);
+  private instanceService = inject(InstanceService);
 
   onCloseClick(): void {
     this.dialogRef.close();

ScriptBeeClient/src/app/components/drag-and-drop-files/drag-and-drop-files.component.ts

@@ -14,7 +14,7 @@ export class DragAndDropFilesComponent {
   @ViewChild('modelFileInput') modelFileInput?: ElementRef;
   @Output() filesChange = new EventEmitter<File[]>();
 
-  isHovering: boolean = false;
+  isHovering = false;
   @Input() files: File[] = [];
 
   toggleHover(event: boolean) {

ScriptBeeClient/src/app/components/lazy-file-tree/lazy-file-tree.component.html

@@ -4,14 +4,14 @@
 
 <mat-tree #tree [dataSource]="data()" [childrenAccessor]="childrenAccessor()" [trackBy]="trackByFn" class="non-selectable-tree">
   <!-- Leaf node -->
-  <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding (click)="onClick.emit(node)">
+  <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding (click)="clickChange.emit(node)">
     <div class="leaf-node">
       <span class="node-with-icon">
         <mat-icon>description</mat-icon>
         {{ node.name }}
         @if (enableDelete()) {
           <div class="flex-spacer"></div>
-          <app-tree-actions-menu (onDelete)="onDelete.emit(node)" />
+          <app-tree-actions-menu (delete)="delete.emit(node)" />
         }
       </span>
     </div>
@@ -20,7 +20,7 @@
   <!-- Parent node (Folder) -->
   <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <div class="mat-tree-node">
-      <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name" (click)="onExpand.emit(node)">
+      <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name" (click)="expand.emit(node)">
         <mat-icon class="mat-icon-rtl-mirror">
           {{ tree.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
         </mat-icon>
@@ -31,7 +31,7 @@
           {{ node.name }}
           @if (enableDelete()) {
             <div class="flex-spacer"></div>
-            <app-tree-actions-menu (onDelete)="onDelete.emit(node)" />
+            <app-tree-actions-menu (delete)="delete.emit(node)" />
           }
         </span>
       </div>
@@ -50,9 +50,9 @@
       } @else if (node.state === 'error') {
         <mat-icon color="warn">error</mat-icon>
         <span style="margin-left: 8px; color: var(--sys-error)">Error loading folder</span>
-        <button mat-button color="primary" (click)="onRetry.emit(node.parentId)" style="margin-left: 8px">Retry</button>
+        <button mat-button color="primary" (click)="retry.emit(node.parentId)" style="margin-left: 8px">Retry</button>
       } @else if (node.state === 'load-more') {
-        <button mat-button color="primary" (click)="onLoadMore.emit(node.parentId)">Load More</button>
+        <button mat-button color="primary" (click)="loadMore.emit(node.parentId)">Load More</button>
       }
     </div>
   </mat-nested-tree-node>

ScriptBeeClient/src/app/components/lazy-file-tree/lazy-file-tree.component.ts

@@ -27,11 +27,11 @@ export class LazyFileTreeComponent {
   data = input.required<FileTreeNode[]>();
   enableDelete = input<boolean>(false);
 
-  onDelete = output<ProjectFileNode>();
-  onClick = output<ProjectFileNode>();
-  onExpand = output<ProjectFileNode>();
-  onRetry = output<string | null>();
-  onLoadMore = output<string | null>();
+  delete = output<ProjectFileNode>();
+  clickChange = output<ProjectFileNode>();
+  expand = output<ProjectFileNode>();
+  retry = output<string | null>();
+  loadMore = output<string | null>();
 
   childrenAccessor = input.required<(node: FileTreeNode) => FileTreeNode[] | Observable<FileTreeNode[]>>();
 

ScriptBeeClient/src/app/components/script-parameters-list/script-parameter/script-parameter.component.ts

@@ -9,7 +9,7 @@ import { ErrorStateMatcher } from '@angular/material/core';
 import { ScriptParameterValueComponent } from './script-parameter-value/script-parameter-value.component';
 
 class ParameterNameErrorMatcher implements ErrorStateMatcher {
-  private isError: boolean = false;
+  private isError = false;
 
   setErrorState(isError: boolean) {
     this.isError = isError;

ScriptBeeClient/src/app/components/script-parameters-list/script-parameters-list.component.ts

@@ -67,8 +67,8 @@ export class ScriptParametersListComponent {
 
   private isParameterNameUnique(parameter: ScriptParameter, parameters: ScriptParameter[]): boolean {
     let numbersOfApparitions = 0;
-    for (let i = 0; i < parameters.length; i++) {
-      if (parameters[i].name === parameter.name) {
+    for (const item of parameters) {
+      if (item.name === parameter.name) {
         numbersOfApparitions++;
       }
     }

ScriptBeeClient/src/app/components/selectable-tree/selectable-tree.component.html

@@ -1,6 +1,6 @@
 <mat-tree #tree [dataSource]="data()" [childrenAccessor]="childrenAccessor" class="non-selectable-tree">
   <!-- Leaf node -->
-  <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding (click)="onClick.emit(node)">
+  <mat-nested-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding (click)="clickChange.emit(node)">
     <div class="leaf-node">
       <span class="node-with-icon">
         @if (fileIcon()) {
@@ -11,7 +11,7 @@
 
         @if (enableDelete()) {
           <div class="flex-spacer"></div>
-          <app-tree-actions-menu (onDelete)="onDelete.emit(node)" />
+          <app-tree-actions-menu (delete)="delete.emit(node)" />
         }
       </span>
     </div>
@@ -35,7 +35,7 @@
 
           @if (enableDelete()) {
             <div class="flex-spacer"></div>
-            <app-tree-actions-menu (onDelete)="onDelete.emit(node)" />
+            <app-tree-actions-menu (delete)="delete.emit(node)" />
           }
         </span>
       </div>

ScriptBeeClient/src/app/components/selectable-tree/selectable-tree.component.ts

@@ -20,8 +20,8 @@ export class SelectableTreeComponent {
   fileIcon = input<string | undefined>(undefined);
   enableDelete = input<boolean>(false);
 
-  onDelete = output<TreeNode>();
-  onClick = output<TreeNode>();
+  delete = output<TreeNode>();
+  clickChange = output<TreeNode>();
 
   childrenAccessor = (node: TreeNodeWithParent) => node.children ?? [];
 

ScriptBeeClient/src/app/components/selectable-tree/tree-actions-menu/tree-actions-menu.component.html

@@ -3,7 +3,7 @@
 </button>
 
 <mat-menu #menu="matMenu">
-  <button mat-menu-item (click)="onDelete.emit()">
+  <button mat-menu-item (click)="delete.emit()">
     <mat-icon>delete</mat-icon>
     <span>Delete</span>
   </button>

ScriptBeeClient/src/app/components/selectable-tree/tree-actions-menu/tree-actions-menu.component.ts

@@ -13,5 +13,5 @@ import { ClickStopPropagation } from '../../../directives/click-stop-propagation
   styleUrls: ['./tree-actions-menu.component.scss'],
 })
 export class TreeActionsMenuComponent {
-  onDelete = output();
+  delete = output();
 }

ScriptBeeClient/src/app/directives/click-stop-propagation.ts

@@ -5,7 +5,7 @@ import { Directive, HostListener } from '@angular/core';
 })
 export class ClickStopPropagation {
   @HostListener('click', ['$event'])
-  public onClick(event: any): void {
+  public onClick(event: Event): void {
     event.stopPropagation();
   }
 }

ScriptBeeClient/src/app/directives/file-drop.directive.ts

@@ -8,11 +8,11 @@ export class FileDropDirective {
   @Output() filesHovered = new EventEmitter<boolean>();
 
   @HostListener('drop', ['$event'])
-  onDrop($event: any) {
+  onDrop($event: DragEvent) {
     $event.preventDefault();
 
     const transfer = $event.dataTransfer;
-    this.filesDropped.emit(transfer.files);
+    this.filesDropped.emit(transfer?.files);
     this.filesHovered.emit(false);
   }
 

ScriptBeeClient/src/app/pages/projects/create-project/create-project.component.ts

@@ -1,4 +1,4 @@
-import { Component, signal, WritableSignal } from '@angular/core';
+import { Component, inject, signal, WritableSignal } from '@angular/core';
 import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -23,10 +23,8 @@ export class CreateProjectPage {
   projectNameErrorMessage = signal('');
   isCreateLoading = signal(false);
 
-  constructor(
-    private projectService: ProjectService,
-    private router: Router
-  ) {}
+  private projectService = inject(ProjectService);
+  private router = inject(Router);
 
   updateProjectIdErrorMessage() {
     this.updateErrorMessage(this.projectId, this.projectIdErrorMessage);

ScriptBeeClient/src/app/pages/projects/project-details/analysis/analysis.component.html

@@ -3,7 +3,7 @@
     <as-split-area size="65">
       <as-split direction="horizontal">
         <as-split-area size="25">
-          <app-script-tree [projectId]="projectId()!" (onFileSelected)="onFileSelected($event)" />
+          <app-script-tree [projectId]="projectId()!" (fileSelected)="onFileSelected($event)" />
         </as-split-area>
 
         <as-split-area size="75">

ScriptBeeClient/src/app/pages/projects/project-details/analysis/analysis.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, model, signal, viewChild } from '@angular/core';
+import { Component, computed, inject, model, signal, viewChild } from '@angular/core';
 import { AngularSplitModule } from 'angular-split';
 import { ScriptsContentComponent } from './scripts-content/scripts-content.component';
 import { ScriptTreeComponent } from './script-tree/script-tree.component';
@@ -25,12 +25,12 @@ export class AnalysisComponent {
   projectId = computed(() => this.projectStateService.currentProjectId());
   instanceId = computed(() => this.projectStateService.currentInstanceId());
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private projectStateService: ProjectStateService
-  ) {
-    route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private projectStateService = inject(ProjectStateService);
+
+  constructor() {
+    this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
       this.selectedFileId.set(params.get('fileId'));
     });
   }

ScriptBeeClient/src/app/pages/projects/project-details/analysis/output/file-output/file-output.component.ts

@@ -11,11 +11,12 @@ import { MatIcon } from '@angular/material/icon';
 })
 export class FileOutputComponent {
   files = input.required<AnalysisFile[]>();
-  // TODO FIXIT: update download with the new endpoints
+  // TODO FIXIT(#125): update download with the new endpoints
   // constructor(private outputFilesService: OutputFilesService) {
   // }
   //
   onDownloadFileButtonClick(file: AnalysisFile) {
+    console.log(file);
     //   this.outputFilesService.downloadFile(file.fileId, file.fileName).subscribe((data) => {
     //     FileOutputComponent.downloadFile(file.fileName, data);
     //   });

ScriptBeeClient/src/app/pages/projects/project-details/analysis/script-tree/create-script-dialog/create-script-dialog-script-language/create-script-dialog-script-language.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, input, model } from '@angular/core';
+import { Component, computed, inject, input, model } from '@angular/core';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatFormField } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -26,5 +26,5 @@ export class CreateScriptDialogScriptLanguageComponent {
   });
   availableScriptLanguagesResourceError = computed(() => convertError(this.availableScriptLanguagesResource.error()));
 
-  constructor(private projectStructureService: ProjectStructureService) {}
+  private projectStructureService = inject(ProjectStructureService);
 }

ScriptBeeClient/src/app/pages/projects/project-details/analysis/script-tree/create-script-dialog/create-script-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, Inject, signal } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { ScriptParameter } from '../../../../../../types/script-types';
 import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -45,11 +45,9 @@ export class CreateScriptDialogComponent {
 
   isOkDisabled = computed(() => !this.scriptPath() || !this.scriptLanguage() || this.hasParameterErrors() || this.isCreateLoading());
 
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: CreateScriptDialogData,
-    public dialogRef: MatDialogRef<CreateScriptDialogComponent>,
-    private projectStructureService: ProjectStructureService
-  ) {}
+  public data = inject<CreateScriptDialogData>(MAT_DIALOG_DATA);
+  public dialogRef = inject(MatDialogRef<CreateScriptDialogComponent>);
+  private projectStructureService = inject(ProjectStructureService);
 
   onParametersChange(parameters: ScriptParameter[]) {
     this.parameters.set(parameters);

ScriptBeeClient/src/app/pages/projects/project-details/analysis/script-tree/script-tree.component.html

@@ -15,9 +15,9 @@
     [data]="rootData()"
     [enableDelete]="true"
     [childrenAccessor]="childrenAccessor"
-    (onDelete)="onNodeDelete($event)"
-    (onClick)="onNodeClick($event)"
-    (onExpand)="onExpand($event)"
-    (onRetry)="onRetry($event)"
-    (onLoadMore)="onLoadMore($event)" />
+    (delete)="onNodeDelete($event)"
+    (clickChange)="onNodeClick($event)"
+    (expand)="onExpand($event)"
+    (retry)="onRetry($event)"
+    (loadMore)="onLoadMore($event)" />
 }