Add eslint

.github/workflows/tests.yml

@@ -58,10 +58,17 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/setup_evap
+        with:
+          npm-ci: 'true'
+
       - name: Run ruff
         run: ruff check .
       - name: Run pylint
         run: pylint evap tools
+      - name: Run ESLint
+        run: |
+          cd evap/static/ts
+          npx eslint --quiet
 
   formatter:
     runs-on: ubuntu-22.04

evap/evaluation/management/commands/lint.py

@@ -9,7 +9,9 @@ class Command(BaseCommand):
     requires_migrations_checks = False
 
     def handle(self, *args, **options):
-        self.stdout.write("Executing ruff .")
+        self.stdout.write("Executing ruff check .")
         subprocess.run(["ruff", "check", "."], check=False)  # nosec
         self.stdout.write("Executing pylint evap")
         subprocess.run(["pylint", "evap", "tools"], check=False)  # nosec
+        self.stdout.write("Executing npx eslint --quiet")
+        subprocess.run(["npx", "eslint", "--quiet"], cwd="evap/static/ts", check=False)  # nosec

evap/evaluation/tests/test_commands.py

@@ -453,9 +453,10 @@ class TestLintCommand(TestCase):
     @patch("subprocess.run")
     def test_pylint_called(self, mock_subprocess_run: MagicMock):
         management.call_command("lint", stdout=StringIO())
-        self.assertEqual(mock_subprocess_run.call_count, 2)
+        self.assertEqual(mock_subprocess_run.call_count, 3)
         mock_subprocess_run.assert_any_call(["ruff", "check", "."], check=False)
         mock_subprocess_run.assert_any_call(["pylint", "evap", "tools"], check=False)
+        mock_subprocess_run.assert_any_call(["npx", "eslint", "--quiet"], cwd="evap/static/ts", check=False)
 
 
 class TestFormatCommand(TestCase):

evap/static/ts/eslint.config.js

@@ -0,0 +1,54 @@
+// @ts-check
+
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    eslint.configs.recommended,
+    ...tseslint.configs.strictTypeChecked,
+    ...tseslint.configs.stylisticTypeChecked,
+    {
+        ignores: ["rendered/", "eslint.config.js"],
+    },
+    {
+        languageOptions: {
+            ecmaVersion: 2019,
+            parserOptions: {
+                project: ["tsconfig.json", "tsconfig.compile.json"],
+            },
+            sourceType: "module",
+        },
+    },
+    // ignore @typescript-eslint/no-misused-promises
+    {
+        rules: {
+            "@typescript-eslint/restrict-template-expressions": ["error", { allowNumber: true }],
+            "@typescript-eslint/no-confusing-void-expression": ["error", { ignoreArrowShorthand: true }],
+            "no-else-return": "error",
+            "arrow-body-style": ["error", "as-needed"],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    args: "all",
+                    argsIgnorePattern: "^_",
+                    caughtErrors: "all",
+                    caughtErrorsIgnorePattern: "^_",
+                    destructuredArrayIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                    ignoreRestSiblings: true,
+                },
+            ],
+            "@typescript-eslint/no-empty-function": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-unnecessary-type-parameters": "off",
+            "@typescript-eslint/no-unnecessary-condition": "warn",
+            "@typescript-eslint/no-misused-promises": "warn",
+            "@typescript-eslint/no-namespace": "warn",
+            "@typescript-eslint/no-non-null-assertion": "warn",
+            "@typescript-eslint/no-unsafe-call": "warn",
+            "@typescript-eslint/no-unsafe-member-access": "warn",
+            "@typescript-eslint/no-unsafe-argument": "warn",
+            "@typescript-eslint/no-unsafe-assignment": "warn",
+        },
+    },
+);

evap/static/ts/src/base-template.ts

@@ -4,7 +4,7 @@
 document.addEventListener("shown.bs.modal", e => {
     if (!e.target) return;
     const modalEl = e.target as HTMLElement;
-    const autofocusEl = modalEl.querySelector("[autofocus]") as HTMLElement;
+    const autofocusEl = modalEl.querySelector<HTMLElement>("[autofocus]");
     if (autofocusEl) {
         autofocusEl.focus();
     }

evap/static/ts/src/confirmation-modal.ts

@@ -46,7 +46,7 @@ export class ConfirmationModal extends HTMLElement {
     onDialogFormSubmit = (event: SubmitEvent) => {
         event.preventDefault();
 
-        const isConfirm = event.submitter?.dataset?.eventType === "confirm";
+        const isConfirm = event.submitter?.dataset.eventType === "confirm";
 
         if (isConfirm && this.internals.form && !this.internals.form.reportValidity()) {
             return;

evap/static/ts/src/contact_modal.ts

@@ -10,7 +10,7 @@ export class ContactModalLogic {
     private readonly successMessageModal: bootstrap.Modal;
     private readonly actionButtonElement: HTMLButtonElement;
     private readonly messageTextElement: HTMLInputElement;
-    private readonly showButtonElements: Array<HTMLElement>;
+    private readonly showButtonElements: HTMLElement[];
     private readonly title: string;
 
     // may be null if anonymous feedback is not enabled
@@ -39,7 +39,7 @@ export class ContactModalLogic {
             try {
                 const response = await fetch("/contact", {
                     body: new URLSearchParams({
-                        anonymous: String(this.anonymousRadioElement !== null && this.anonymousRadioElement.checked),
+                        anonymous: String(this.anonymousRadioElement?.checked),
                         message,
                         title: this.title,
                     }),

evap/static/ts/src/copy-to-clipboard.ts

@@ -5,7 +5,8 @@ function copyToClipboard(text: string) {
     document.body.appendChild(el);
     const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false;
     el.select();
-    document.execCommand("copy");
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    document.execCommand("copy"); // required by puppeteer tests
     el.remove();
     if (selected) {
         selection.removeAllRanges();

evap/static/ts/src/custom-success-form.ts

@@ -15,7 +15,7 @@ const overrideSuccessfulSubmit = (
                 assert(response.ok);
                 onSuccess({ body, response });
             })
-            .catch(error => {
+            .catch((error: unknown) => {
                 console.error(error);
                 window.alert(window.gettext("The server is not responding."));
             });

evap/static/ts/src/datagrid.ts

@@ -34,7 +34,7 @@ abstract class DataGrid {
     protected container: HTMLElement;
     private searchInput: HTMLInputElement;
     protected rows: Row[] = [];
-    private delayTimer: any | null;
+    private delayTimer: number | undefined;
     protected state: State;
 
     protected constructor({ storageKey, head, container, searchInput }: DataGridParameters) {
@@ -59,7 +59,7 @@ abstract class DataGrid {
     }
 
     protected bindEvents() {
-        this.delayTimer = null;
+        this.delayTimer = undefined;
         this.searchInput.addEventListener("input", () => {
             clearTimeout(this.delayTimer);
             this.delayTimer = setTimeout(() => {
@@ -87,7 +87,7 @@ abstract class DataGrid {
     private static NUMBER_REGEX = /^[+-]?\d+(?:[.,]\d*)?$/;
 
     private fetchRows(): Row[] {
-        let rows = [...this.container.children]
+        const rows = [...this.container.children]
             .map(row => row as HTMLElement)
             .map(row => {
                 const searchWords = this.findSearchableCells(row).flatMap(element =>
@@ -118,11 +118,11 @@ abstract class DataGrid {
     protected abstract fetchRowFilterValues(row: HTMLElement): Map<string, string[]>;
 
     private fetchRowOrderValues(row: HTMLElement): Map<string, string> {
-        let orderValues = new Map();
+        const orderValues = new Map<string, string>();
         for (const column of this.sortableHeaders.keys()) {
             const cell = row.querySelector<HTMLElement>(`[data-col=${column}]`)!;
             if (cell.matches("[data-order]")) {
-                orderValues.set(column, cell.dataset.order);
+                orderValues.set(column, cell.dataset.order!);
             } else {
                 orderValues.set(column, cell.innerHTML.trim());
             }
@@ -138,20 +138,20 @@ abstract class DataGrid {
     protected filterRows() {
         const searchWords = DataGrid.searchWordsOf(this.state.search);
         for (const row of this.rows) {
-            const isDisplayedBySearch = searchWords.every(searchWord => {
-                return row.searchWords.some(rowWord => rowWord.includes(searchWord));
-            });
-            const isDisplayedByFilters = [...this.state.equalityFilter].every(([name, filterValues]) => {
-                return filterValues.some(filterValue => {
-                    return row.filterValues.get(name)?.some(rowValue => rowValue === filterValue);
-                });
-            });
-            const isDisplayedByRangeFilters = [...this.state.rangeFilter].every(([name, bound]) => {
-                return row.filterValues
+            const isDisplayedBySearch = searchWords.every(searchWord =>
+                row.searchWords.some(rowWord => rowWord.includes(searchWord)),
+            );
+            const isDisplayedByFilters = [...this.state.equalityFilter].every(([name, filterValues]) =>
+                filterValues.some(filterValue =>
+                    row.filterValues.get(name)?.some(rowValue => rowValue === filterValue),
+                ),
+            );
+            const isDisplayedByRangeFilters = [...this.state.rangeFilter].every(([name, bound]) =>
+                row.filterValues
                     .get(name)
                     ?.map(rawValue => parseFloat(rawValue))
-                    .some(rowValue => rowValue >= bound.low && rowValue <= bound.high);
-            });
+                    .some(rowValue => rowValue >= bound.low && rowValue <= bound.high),
+            );
             row.isDisplayed = isDisplayedBySearch && isDisplayedByFilters && isDisplayedByRangeFilters;
         }
     }
@@ -264,9 +264,8 @@ export class TableGrid extends DataGrid {
         if (this.sortableHeaders.size > 0) {
             const [firstColumn] = this.sortableHeaders.keys();
             return [[firstColumn, "asc"]];
-        } else {
-            return [];
         }
+        return [];
     }
 }
 
@@ -285,9 +284,9 @@ export class EvaluationGrid extends TableGrid {
     public bindEvents() {
         super.bindEvents();
         this.filterButtons.forEach(button => {
-            const count = this.rows.filter(row => {
-                return row.filterValues.get("evaluationState")!.includes(button.dataset.filter!);
-            }).length;
+            const count = this.rows.filter(row =>
+                row.filterValues.get("evaluationState")!.includes(button.dataset.filter!),
+            ).length;
             button.append(EvaluationGrid.createBadgePill(count));
 
             button.addEventListener("click", () => {
@@ -362,7 +361,7 @@ export class QuestionnaireGrid extends TableGrid {
                     body: new URLSearchParams(
                         this.rows.map((row, index) => [row.element.dataset.id!, index.toString()]),
                     ),
-                }).catch(error => {
+                }).catch((error: unknown) => {
                     console.error(error);
                     window.alert(window.gettext("The server is not responding."));
                 });
@@ -477,7 +476,7 @@ export class ResultGrid extends DataGrid {
     }
 
     protected fetchRowFilterValues(row: HTMLElement): Map<string, string[]> {
-        let filterValues = new Map<string, string[]>();
+        const filterValues = new Map<string, string[]>();
         for (const [name, { selector, checkboxes }] of this.filterCheckboxes.entries()) {
             // To store filter values independent of the language, use the corresponding id from the checkbox
             const values = [...row.querySelectorAll(selector)]
@@ -509,9 +508,7 @@ export class ResultGrid extends DataGrid {
             checkboxes.forEach(checkbox => {
                 let isActive;
                 if (this.state.equalityFilter.has(name)) {
-                    isActive = this.state.equalityFilter.get(name)!.some(filterValue => {
-                        return filterValue === checkbox.value;
-                    });
+                    isActive = this.state.equalityFilter.get(name)!.some(filterValue => filterValue === checkbox.value);
                 } else {
                     isActive = false;
                 }

evap/static/ts/src/quick-review-slider.ts

@@ -55,8 +55,8 @@ export class QuickReviewSlider {
     private readonly slider: HTMLElement;
     private readonly reviewDecisionForm: HTMLFormElement;
     private readonly flagForm: HTMLFormElement;
-    private readonly sliderItems: Array<HTMLElement>;
-    private answerSlides: Array<HTMLElement> = [];
+    private readonly sliderItems: HTMLElement[];
+    private answerSlides: HTMLElement[] = [];
     private selectedSlideIndex = 0;
 
     private readonly alertSlide: HTMLElement;
@@ -66,7 +66,7 @@ export class QuickReviewSlider {
     private nextEvaluationIndex = 0;
 
     private readonly startOverTriggers: { undecided: HTMLElement; all: HTMLElement };
-    private readonly slideTriggers: Array<HTMLElement>;
+    private readonly slideTriggers: HTMLElement[];
     private readonly navigationButtons: { left: NavigationButtonWithCounters; right: NavigationButtonWithCounters };
 
     constructor(
@@ -114,6 +114,7 @@ export class QuickReviewSlider {
         assert(!this.isShowingEndslide(), "No answer slide is selected!");
         return this.answerSlides[this.selectedSlideIndex];
     }
+
     public isShowingEndslide = () => this.selectedSlideIndex === this.answerSlides.length;
 
     //
@@ -238,9 +239,8 @@ export class QuickReviewSlider {
         }
     };
 
-    private isWrongSubmit = (submitter: SubmitterElement) => {
-        return submitter.value === Action.MakePrivate && !("contribution" in this.selectedSlide.dataset);
-    };
+    private isWrongSubmit = (submitter: SubmitterElement) =>
+        (submitter.value as Action) === Action.MakePrivate && !("contribution" in this.selectedSlide.dataset);
 
     private transitionHandler = (item: HTMLElement) => () => {
         this.updateButtons();
@@ -421,7 +421,7 @@ export class QuickReviewSlider {
             last.classList.add(`to-${reversed}`);
         }
 
-        if (layer > 0) {
+        if (layer > Layer.Questionnaire) {
             let activeInParentLayer;
             if (nextActiveElement && !this.isShowingEndslide()) {
                 activeInParentLayer =

evap/static/ts/src/student-vote.ts

@@ -24,9 +24,9 @@ function selectByNumberKey(row: HTMLElement, num: number) {
     nextElement.click();
 }
 
-const studentForm = document.getElementById("student-vote-form") as HTMLElement;
+const studentForm = document.getElementById("student-vote-form")!;
 const selectables: NodeListOf<HTMLElement> = studentForm.querySelectorAll(".tab-selectable");
-const rows = Array.from(studentForm.getElementsByClassName("tab-row")) as Array<HTMLElement>;
+const rows = Array.from(studentForm.getElementsByClassName("tab-row")) as HTMLElement[];
 const letterRegex = new RegExp("^[A-Za-zÄÖÜäöü.*+-]$");
 
 // Sometimes we just want the browser to do its thing.
@@ -141,22 +141,20 @@ studentForm.addEventListener("keydown", (e: KeyboardEvent) => {
 });
 
 function findCorrectInputInRow(row: HTMLElement) {
-    const alreadySelectedElement: HTMLElement = row.querySelector(".tab-selectable:checked")!;
+    const alreadySelectedElement = row.querySelector<HTMLElement>(".tab-selectable:checked");
 
     if (alreadySelectedElement) {
         return alreadySelectedElement;
-    } else {
-        const possibleTargets: NodeListOf<HTMLElement> = row.querySelectorAll(".tab-selectable");
-        if (possibleTargets.length === 3) {
-            // Yes-No / No-Yes question, should focus first element
-            return possibleTargets[0];
-        } else {
-            // Everything else: The middle of all the answers excluding "no answer"
-            // This also handles all the single possibility cases
-            const index = Math.floor((possibleTargets.length - 1) / 2);
-            return possibleTargets[index];
-        }
     }
+    const possibleTargets: NodeListOf<HTMLElement> = row.querySelectorAll(".tab-selectable");
+    if (possibleTargets.length === 3) {
+        // Yes-No / No-Yes question, should focus first element
+        return possibleTargets[0];
+    }
+    // Everything else: The middle of all the answers excluding "no answer"
+    // This also handles all the single possibility cases
+    const index = Math.floor((possibleTargets.length - 1) / 2);
+    return possibleTargets[index];
 }
 
 function fancyFocus(element: HTMLElement) {
@@ -171,7 +169,7 @@ document.querySelector("#btn-jump-unanswered-question")?.addEventListener("click
 
 function scrollToFirstChoiceError() {
     const firstErrorRow = document.querySelector(".row .choice-error");
-    const tabRow = firstErrorRow?.closest(".row")?.querySelector(".tab-row") as HTMLElement;
+    const tabRow = firstErrorRow?.closest(".row")?.querySelector<HTMLElement>(".tab-row");
     if (tabRow) {
         fancyFocus(findCorrectInputInRow(tabRow));
     }

evap/static/ts/src/text-answer-warnings.ts

@@ -13,7 +13,7 @@ function doesTextContainTriggerString(text: string, triggerStrings: string[]): b
 function updateTextareaWarning(textarea: HTMLTextAreaElement, textAnswerWarnings: string[][]) {
     const text = normalize(textarea.value);
 
-    let matchingWarnings = [];
+    const matchingWarnings = [];
     if (isTextMeaningless(text)) {
         matchingWarnings.push("meaningless");
     }