Merge pull request #5509 from dodona-edu/chore/update-eslint-and-node

Update major Node and Eslint versions

.github/workflows/lint.yml

@@ -33,7 +33,7 @@ jobs:
     - name: Set up Node
       uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 22.x
         cache: yarn
     - name: Install dependencies
       run: |
@@ -53,7 +53,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 22.x
           cache: yarn
       - name: Install dependencies
         run: |

.github/workflows/test.yml

@@ -34,10 +34,10 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         bundler-cache: true
-    - name: Use node 16
+    - name: Use node 22
       uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 22.x
         cache: yarn
     - name: Run tests
       env:
@@ -63,7 +63,7 @@ jobs:
     - name: Set up Node
       uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 22.x
         cache: yarn
     - name: Install dependencies
       run: |
@@ -102,10 +102,10 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         bundler-cache: true
-    - name: Use node 16
+    - name: Use node 22
       uses: actions/setup-node@v4
       with:
-        node-version: 16.x
+        node-version: 22.x
         cache: yarn
     - name: Setup chromium-chromedriver
       uses: nanasess/setup-chromedriver@master

app/assets/javascripts/components/annotations/annotation_form.ts

@@ -1,5 +1,5 @@
 import { customElement, property } from "lit/decorators.js";
-import { html, TemplateResult } from "lit";
+import { html, PropertyValues, TemplateResult } from "lit";
 import { watchMixin } from "components/meta/watch_mixin";
 import { createRef, Ref, ref } from "lit/directives/ref.js";
 import "components/saved_annotations/saved_annotation_input";
@@ -210,7 +210,7 @@ export class AnnotationForm extends watchMixin(DodonaElement) {
         this.inputRef.value.focus();
     }
 
-    updated(changedProperties: Map<string, any>): void {
+    updated(changedProperties: PropertyValues): void {
         // Focus the newly shown title input if the user wants to save the annotation.
         if (changedProperties.has("saveAnnotation") && this.saveAnnotation) {
             this.titleRef.value.focus();

app/assets/javascripts/components/annotations/annotations_cell.ts

@@ -61,7 +61,7 @@ export class AnnotationsCell extends DodonaElement {
             const mode = annotationState.isQuestionMode ? "question" : "annotation";
             await userAnnotationState.create(annotationData, submissionState.id, mode, e.detail.saveAnnotation, e.detail.savedAnnotationTitle);
             this.closeForm();
-        } catch (err) {
+        } catch {
             this.annotationFormRef.value.hasErrors = true;
             this.annotationFormRef.value.disabled = false;
         }

app/assets/javascripts/components/annotations/thread.ts

@@ -56,7 +56,7 @@ export class Thread extends DodonaElement {
             const mode = annotationState.isQuestionMode ? "question" : "annotation";
             await userAnnotationState.create(annotationData, submissionState.id, mode, e.detail.saveAnnotation, e.detail.savedAnnotationTitle);
             this.formShown = false;
-        } catch (err) {
+        } catch {
             this.annotationFormRef.value.hasErrors = true;
             this.annotationFormRef.value.disabled = false;
         }

app/assets/javascripts/components/annotations/user_annotation.ts

@@ -116,7 +116,7 @@ export class UserAnnotationComponent extends DodonaElement {
                 });
             }
             this.editing = false;
-        } catch (e) {
+        } catch {
             this.annotationFormRef.value.hasErrors = true;
             this.annotationFormRef.value.disabled = false;
         }
@@ -128,7 +128,7 @@ export class UserAnnotationComponent extends DodonaElement {
         try {
             // Ask MathJax to search for math in the annotations
             window.MathJax.typeset([this]);
-        } catch (e) {
+        } catch {
             // MathJax is not loaded
             console.warn("MathJax is not loaded");
         }

app/assets/javascripts/components/meta/i18n_mixin.ts

@@ -1,6 +1,7 @@
 import { LitElement } from "lit";
 import { ready } from "utilities";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor = new (...args: any[]) => LitElement;
 
 export function i18nMixin<T extends Constructor>(superClass: T): T {
@@ -9,6 +10,7 @@ export function i18nMixin<T extends Constructor>(superClass: T): T {
      * It also makes sure that the component is rerendered when the language becomes available
      */
     class I18nMixinClass extends superClass {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         constructor(...args: any[]) {
             super(args);
             // Reload when I18n is available

app/assets/javascripts/components/meta/watch_mixin.ts

@@ -1,5 +1,6 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor = abstract new (...args: any[]) => LitElement;
 
 export function watchMixin<T extends Constructor>(superClass: T): T {
@@ -9,7 +10,7 @@ export function watchMixin<T extends Constructor>(superClass: T): T {
     abstract class WatchMixinClass extends superClass {
         abstract get watch(): {[key: string]: (old: unknown) => void};
 
-        update(changedProperties: Map<string, unknown>): void {
+        update(changedProperties: PropertyValues): void {
             for (const [key, f] of Object.entries(this.watch)) {
                 if (changedProperties.has(key)) {
                     f.bind(this);

app/assets/javascripts/components/modal_mixin.ts

@@ -1,4 +1,4 @@
-import { html, TemplateResult, render } from "lit";
+import { html, TemplateResult, render, PropertyValues } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { Modal as Modal } from "bootstrap";
 import { DodonaElement } from "components/meta/dodona_element";
@@ -20,6 +20,7 @@ export declare abstract class ModalMixinInterface {
     hideModal(): void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Constructor<T> = abstract new (...args: any[]) => T;
 
 export function modalMixin<T extends Constructor<DodonaElement>>(superClass: T): Constructor<ModalMixinInterface> & T {
@@ -60,7 +61,7 @@ export function modalMixin<T extends Constructor<DodonaElement>>(superClass: T):
         // This can cause unexpected behaviour if update is triggered on a modal component which is different from the currently active modalcomponent
         // (As there is only one real html modal, the wrong `filledModalTemplate` will be displayed)
         // This could be solved by tracking which modalcomponent is currently active
-        update(changedProperties: Map<string, any>): void {
+        update(changedProperties: PropertyValues): void {
             super.update(changedProperties);
             this.renderModal();
         }

app/assets/javascripts/components/progress_bar.ts

@@ -1,6 +1,6 @@
-import { html, TemplateResult } from "lit";
+import { html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { initTooltips, ready } from "../utilities";
+import { initTooltips } from "../utilities";
 import { i18n } from "i18n/i18n";
 import { DodonaElement } from "components/meta/dodona_element";
 
@@ -38,7 +38,7 @@ export class ProgressBar extends DodonaElement {
         return i18n.t(this.titleKey + i18n.t(this.titleKey + ".key", index), { index: index, smart_count: value });
     }
 
-    updated(changedProperties: Map<string, any>): void {
+    updated(changedProperties: PropertyValues): void {
         initTooltips(this);
         super.updated(changedProperties);
     }

app/assets/javascripts/components/search/filter_collection_element.ts

@@ -67,7 +67,7 @@ export class FilterCollectionElement extends DodonaElement {
         searchQueryState.arrayQueryParams.set(this.param, [...this.multiSelected, this.str(label)]);
     }
 
-    private singleUnSelect(label: Label): void {
+    private singleUnSelect(): void {
         searchQueryState.queryParams.set(this.param, undefined);
     }
 
@@ -80,7 +80,7 @@ export class FilterCollectionElement extends DodonaElement {
     }
 
     isSelected = this.singleIsSelected;
-    unSelect = this.singleUnSelect;
+    unSelect: (label: Label) => void = this.singleUnSelect;
     select = this.singleSelect;
 
     toggle(label: Label): void {

app/assets/javascripts/components/search/loading_bar.ts

@@ -1,4 +1,4 @@
-import { html, PropertyValues, TemplateResult } from "lit";
+import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { search } from "search";
 import { DodonaElement } from "components/meta/dodona_element";

app/assets/javascripts/components/search/search_option.ts

@@ -2,7 +2,6 @@ import { customElement, property } from "lit/decorators.js";
 import { DodonaElement } from "components/meta/dodona_element";
 import { searchQueryState } from "state/SearchQuery";
 import { html, TemplateResult } from "lit";
-import { i18n } from "i18n/i18n";
 
 export type Option = {param: string, label: string};
 

app/assets/javascripts/components/sign_in_search_bar.ts

@@ -1,7 +1,6 @@
 import { customElement, property } from "lit/decorators.js";
 import { html, TemplateResult } from "lit";
 import { Option } from "components/datalist_input";
-import { ready } from "utilities";
 import "components/datalist_input";
 import { DodonaElement } from "components/meta/dodona_element";
 import { i18n } from "i18n/i18n";

app/assets/javascripts/course.ts

@@ -226,39 +226,41 @@ function initCourseNew(): void {
     const formCollapse = new bootstrap.Collapse(formCollapseElement, { toggle: false });
 
     function initPanelLogic(): void {
-        document.getElementById("new-course").addEventListener("click", function () {
+        const newCourseButton = document.getElementById("new-course");
+        newCourseButton.addEventListener("click", function () {
             choosePanel.classList.add("hidden");
             formPanel.querySelector(".step-circle").innerHTML = "2";
-            this.closest(".panel")
+            newCourseButton.closest(".panel")
                 .querySelector(".answer")
-                .textContent = this.dataset.answer;
+                .textContent = newCourseButton.dataset.answer;
             fetch("/courses/new.js")
                 .then(req => req.text())
                 .then(resp => eval(resp));
         });
 
-        document.getElementById("copy-course").addEventListener("click", function () {
+        const copyCourseButton = document.getElementById("copy-course");
+        copyCourseButton.addEventListener("click", function () {
             choosePanel.classList.remove("hidden");
             chooseCollapse.show();
             choosePanel.querySelectorAll<HTMLInputElement>(`input[type="radio"]`).forEach(el => {
                 el.checked = false;
             });
             formPanel.classList.add("hidden");
             formPanel.querySelector(".step-circle").innerHTML = "3";
-            this.closest(".panel")
+            copyCourseButton.closest(".panel")
                 .querySelector(".answer")
-                .textContent = this.dataset.answer;
+                .textContent = copyCourseButton.dataset.answer;
         });
     }
 
     function copyCoursesLoaded(): void {
-        document.querySelectorAll("[data-course_id]").forEach(el => {
+        document.querySelectorAll("[data-course_id]").forEach((el: HTMLElement) => {
             el.addEventListener("click", function () {
-                this.querySelector(`input[type="radio"]`).checked = true;
-                this.closest(".panel")
+                (el.querySelector(`input[type="radio"]`) as HTMLInputElement).checked = true;
+                el.closest(".panel")
                     .querySelector(".answer")
-                    .textContent = this.dataset.answer;
-                fetch(`/courses/new.js?copy_options[base_id]=${this.dataset.course_id}`)
+                    .textContent = el.dataset.answer;
+                fetch(`/courses/new.js?copy_options[base_id]=${el.dataset.course_id}`)
                     .then(req => req.text())
                     .then(resp => eval(resp));
             });

app/assets/javascripts/drag_and_drop.ts

@@ -31,12 +31,12 @@ function initDragAndDrop(args: DragAndDropArguments): void {
     const tableBody = document.querySelectorAll(args.table_selector)[0];
 
     dragula([tableBody], {
-        moves: (el, source, handle, sibling) => {
+        moves: (el, source, handle) => {
             return handle.classList.contains("drag-handle") || getParentByClassName(handle, "drag-handle") !== null;
         },
         mirrorContainer: tableBody,
     })
-        .on("cloned", (clone, original, type) => {
+        .on("cloned", (clone, original) => {
             copyWidth(clone, original, "td");
         })
         .on("drop", () => {

app/assets/javascripts/exercise.ts

@@ -17,7 +17,7 @@ function showLightbox(content): void {
         // MathJax to search for new math (but only in the captions).
         try {
             window.MathJax.typeset( Array.from(document.querySelectorAll(".gslide-description")));
-        } catch (e) {
+        } catch {
             // MathJax is not loaded
             console.warn("MathJax is not loaded");
         }
@@ -410,7 +410,7 @@ async function initExerciseShow(options: {
                 } else if (errors.exercise && errors.exercise[0] === "not permitted") {
                     message = i18n.t("js.submission-not-allowed");
                 }
-            } catch (e) {
+            } catch {
                 message = i18n.t("js.submission-failed");
             }
         }