web: update to new formatting rules, make eslint warnings fail ci

web/src/elements/table/Table.ts

@@ -1,7 +1,8 @@
 import { gettext } from "django";
-import { html, LitElement, property, TemplateResult } from "lit-element";
+import { CSSResult, html, LitElement, property, TemplateResult } from "lit-element";
 import { PBResponse } from "../../api/client";
 import { COMMON_STYLES } from "../../common/styles";
+import { htmlFromString } from "../../utils";
 
 export abstract class Table<T> extends LitElement {
     abstract apiEndpoint(page: number): Promise<PBResponse<T>>;
@@ -14,11 +15,11 @@ export abstract class Table<T> extends LitElement {
     @property()
     page = 1;
 
-    static get styles() {
-        return [COMMON_STYLES];
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
     }
 
-    public fetch() {
+    public fetch(): void {
         this.apiEndpoint(this.page).then((r) => {
             this.data = r;
             this.page = r.pagination.current;
@@ -57,11 +58,11 @@ export abstract class Table<T> extends LitElement {
                 })
             );
             fullRow.push("</tr>");
-            return html(<any>fullRow);
+            return htmlFromString(...fullRow);
         });
     }
 
-    renderTable() {
+    renderTable(): TemplateResult {
         if (!this.data) {
             this.fetch();
         }
@@ -85,9 +86,7 @@ export abstract class Table<T> extends LitElement {
             <table class="pf-c-table pf-m-compact pf-m-grid-md">
                 <thead>
                     <tr role="row">
-                        ${this.columns().map(
-        (col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`
-    )}
+                        ${this.columns().map((col) => html`<th role="columnheader" scope="col">${gettext(col)}</th>`)}
                     </tr>
                 </thead>
                 <tbody role="rowgroup">
@@ -102,7 +101,7 @@ export abstract class Table<T> extends LitElement {
             </div>`;
     }
 
-    render() {
+    render(): TemplateResult {
         return this.renderTable();
     }
 }

web/src/elements/table/TablePage.ts

@@ -1,4 +1,4 @@
-import { html } from "lit-html";
+import { html, TemplateResult } from "lit-html";
 import { Table } from "./Table";
 
 export abstract class TablePage<T> extends Table<T> {
@@ -6,7 +6,7 @@ export abstract class TablePage<T> extends Table<T> {
     abstract pageDescription(): string;
     abstract pageIcon(): string;
 
-    render() {
+    render(): TemplateResult {
         return html`<section class="pf-c-page__main-section pf-m-light">
                 <div class="pf-c-content">
                     <h1>

web/src/elements/table/TablePagination.ts

@@ -1,17 +1,17 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Table } from "./Table";
 import { COMMON_STYLES } from "../../common/styles";
 
 @customElement("pb-table-pagination")
 export class TablePagination extends LitElement {
     @property()
-    table?: Table<any>;
+    table?: Table<unknown>;
 
-    static get styles() {
-        return [COMMON_STYLES];
+    static get styles(): CSSResult[] {
+        return COMMON_STYLES;
     }
 
-    previousHandler() {
+    previousHandler(): void {
         if (!this.table?.data?.pagination.previous) {
             console.debug("passbook/tables: no previous");
             return;
@@ -19,7 +19,7 @@ export class TablePagination extends LitElement {
         this.table.page = this.table?.data?.pagination.previous;
     }
 
-    nextHandler() {
+    nextHandler(): void {
         if (!this.table?.data?.pagination.next) {
             console.debug("passbook/tables: no next");
             return;
@@ -27,7 +27,7 @@ export class TablePagination extends LitElement {
         this.table.page = this.table?.data?.pagination.next;
     }
 
-    render() {
+    render(): TemplateResult {
         return html` <div class="pf-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md">
             <div class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md">
                 <div class="pf-c-options-menu">
@@ -43,9 +43,7 @@ export class TablePagination extends LitElement {
                     <div class="pf-c-pagination__nav-control pf-m-prev">
                         <button
                             class="pf-c-button pf-m-plain"
-                            @click=${() => {
-        this.previousHandler();
-    }}
+                            @click=${() => {this.previousHandler();}}
                             disabled="${this.table?.data?.pagination.previous ? "true" : "false"}"
                             aria-label="{% trans 'Go to previous page' %}"
                         >
@@ -55,9 +53,7 @@ export class TablePagination extends LitElement {
                     <div class="pf-c-pagination__nav-control pf-m-next">
                         <button
                             class="pf-c-button pf-m-plain"
-                            @click=${() => {
-        this.nextHandler();
-    }}
+                            @click=${() => {this.nextHandler();}}
                             disabled="${this.table?.data?.pagination.next ? "true" : "false"}"
                             aria-label="{% trans 'Go to next page' %}"
                         >