web: fix formatting mostly, add pipeline

2020-12-01 13:59:59 +01:00 · 2020-12-01 13:59:59 +01:00 · bce75dc047
parent 71fbb23a2f
commit bce75dc047
13 changed files with 159 additions and 90 deletions
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -1,19 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-    },
-    extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaVersion: 12,
-        sourceType: "module",
-    },
-    plugins: ["@typescript-eslint"],
-    rules: {
-        indent: ["error", 4],
-        "linebreak-style": ["error", "unix"],
-        quotes: ["error", "double"],
-        semi: ["error", "always"],
-    },
-};
--- a/web/.eslintrc.json
+++ b/web/.eslintrc.json
@ -0,0 +1,25 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+        "indent": ["error", 4],
+        "linebreak-style": ["error", "unix"],
+        "quotes": ["error", "double"],
+        "semi": ["error", "always"],
+        "@typescript-eslint/ban-ts-comment": "off"
+    }
+}
--- a/web/azure-pipelines.yml
+++ b/web/azure-pipelines.yml
@ -0,0 +1,42 @@
+trigger:
+- main
+
+stages:
+  - stage: link
+    jobs:
+      - job: lint
+        pool:
+          vmImage: 'ubuntu-latest'
+        steps:
+          - task: NodeTool@0
+            inputs:
+              versionSpec: '12.x'
+            displayName: 'Install Node.js'
+          - task: Npm@1
+            inputs:
+              command: 'install'
+              workingDir: 'web/'
+          - task: Npm@1
+            inputs:
+              command: 'custom'
+              workingDir: 'web/'
+              customCommand: 'run lint'
+  - stage: Build
+    jobs:
+      - job: build
+        pool:
+          vmImage: 'ubuntu-latest'
+        steps:
+          - task: NodeTool@0
+            inputs:
+              versionSpec: '12.x'
+            displayName: 'Install Node.js'
+          - task: Npm@1
+            inputs:
+              command: 'install'
+              workingDir: 'web/'
+          - task: Npm@1
+            inputs:
+              command: 'custom'
+              workingDir: 'web/'
+              customCommand: 'run build'
--- a/web/package-lock.json
+++ b/web/package-lock.json
@ -816,6 +816,12 @@
                }
            }
        },
+        "eslint-config-google": {
+            "version": "0.14.0",
+            "resolved": "https://registry.npmjs.org/eslint-config-google/-/eslint-config-google-0.14.0.tgz",
+            "integrity": "sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==",
+            "dev": true
+        },
        "eslint-scope": {
            "version": "5.1.1",
            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
--- a/web/package.json
+++ b/web/package.json
@ -3,7 +3,7 @@
    "scripts": {
        "build": "rollup -c ./rollup.config.js",
        "watch": "rollup -c -w",
-        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
+        "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.1",
@ -28,6 +28,7 @@
        "@typescript-eslint/eslint-plugin": "^4.9.0",
        "@typescript-eslint/parser": "^4.9.0",
        "eslint": "^7.14.0",
+        "eslint-config-google": "^0.14.0",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-minify-html-literals": "^1.2.5",
        "rollup-plugin-node-resolve": "^5.2.0",
--- a/web/src/api/admin_overview.ts
+++ b/web/src/api/admin_overview.ts
@ -1,13 +1,17 @@
 import { DefaultClient } from "./client";

 export class AdminOverview {
-    version?: string;
-    version_latest?: string;
-    worker_count?: number;
-    providers_without_application?: number;
-    policies_without_binding?: number;
-    cached_policies?: number;
-    cached_flows?: number;
+    version: string;
+    version_latest: string;
+    worker_count: number;
+    providers_without_application: number;
+    policies_without_binding: number;
+    cached_policies: number;
+    cached_flows: number;
+
+    constructor() {
+        throw Error();
+    }

    static get(): Promise<AdminOverview> {
        return DefaultClient.fetch<AdminOverview>(["admin", "overview"]);
--- a/web/src/api/application.ts
+++ b/web/src/api/application.ts
@ -1,17 +1,21 @@
 import { DefaultClient, PBResponse } from "./client";

 export class Application {
-    pk?: string;
-    name?: string;
-    slug?: string;
-    provider?: number;
+    pk: string;
+    name: string;
+    slug: string;
+    provider: number;

-    launch_url?: string;
-    meta_launch_url?: string;
-    meta_icon?: string;
-    meta_description?: string;
-    meta_publisher?: string;
-    policies?: string[];
+    launch_url: string;
+    meta_launch_url: string;
+    meta_icon: string;
+    meta_description: string;
+    meta_publisher: string;
+    policies: string[];
+
+    constructor() {
+        throw Error();
+    }

    static get(slug: string): Promise<Application> {
        return DefaultClient.fetch<Application>(["core", "applications", slug]);
--- a/web/src/api/config.ts
+++ b/web/src/api/config.ts
@ -4,12 +4,16 @@ import { Integrations } from "@sentry/tracing";
 import { VERSION } from "../constants";

 export class Config {
-    branding_logo?: string;
-    branding_title?: string;
+    branding_logo: string;
+    branding_title: string;

-    error_reporting_enabled?: boolean;
-    error_reporting_environment?: string;
-    error_reporting_send_pii?: boolean;
+    error_reporting_enabled: boolean;
+    error_reporting_environment: string;
+    error_reporting_send_pii: boolean;
+
+    constructor() {
+        throw Error();
+    }

    static get(): Promise<Config> {
        return DefaultClient.fetch<Config>(["root", "config"]).then((config) => {
--- a/web/src/api/user.ts
+++ b/web/src/api/user.ts
@ -1,12 +1,16 @@
 import { DefaultClient, PBResponse } from "./client";

 export class User {
-    pk?: number;
-    username?: string;
-    name?: string;
-    is_superuser?: boolean;
-    email?: boolean;
-    avatar?: string;
+    pk: number;
+    username: string;
+    name: string;
+    is_superuser: boolean;
+    email: boolean;
+    avatar: string;
+
+    constructor() {
+        throw Error();
+    }

    static me(): Promise<User> {
        return DefaultClient.fetch<User>(["core", "users", "me"]);
--- a/web/src/elements/sidebar/Sidebar.ts
+++ b/web/src/elements/sidebar/Sidebar.ts
@ -24,7 +24,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
        name: "Monitor",
        path: ["/audit/audit/"],
        condition: (sb: Sidebar) => {
-            return sb.user?.is_superuser!;
+            return sb.user?.is_superuser || false;
        },
    },
    {
@ -124,7 +124,7 @@ export const SIDEBAR_ITEMS: SidebarItem[] = [
            },
        ],
        condition: (sb: Sidebar) => {
-            return sb.user?.is_superuser!;
+            return sb.user?.is_superuser || false;
        },
    },
 ];
@ -181,29 +181,22 @@ export class Sidebar extends LitElement {
                return html``;
            }
        }
-        return html` <li
-            class="pf-c-nav__item ${item.children ? "pf-m-expandable pf-m-expanded" : ""}"
-        >
-            ${item.path
-        ? html`<a
-                      href="#${item.path}"
-                      class="pf-c-nav__link ${item.path.some((v) => v === this.activePath)
-        ? "pf-m-current"
-        : ""}"
-                  >
-                      ${item.name}
-                  </a>`
-        : html`<a class="pf-c-nav__link" aria-expanded="true"
-                          >${item.name}
-                          <span class="pf-c-nav__toggle">
-                              <i class="fas fa-angle-right" aria-hidden="true"></i>
-                          </span>
-                      </a>
-                      <section class="pf-c-nav__subnav">
-                          <ul class="pf-c-nav__simple-list">
-                              ${item.children?.map((i) => this.renderItem(i))}
-                          </ul>
-                      </section>`}
+        return html` <li class="pf-c-nav__item ${item.children ? "pf-m-expandable pf-m-expanded" : ""}">
+            ${item.path ?
+        html`<a href="#${item.path}" class="pf-c-nav__link ${item.path.some((v) => v === this.activePath) ? "pf-m-current": ""}">
+                        ${item.name}
+                    </a>` :
+        html`<a class="pf-c-nav__link" aria-expanded="true">
+                        ${item.name}
+                        <span class="pf-c-nav__toggle">
+                            <i class="fas fa-angle-right" aria-hidden="true"></i>
+                        </span>
+                    </a>
+                    <section class="pf-c-nav__subnav">
+                        <ul class="pf-c-nav__simple-list">
+                            ${item.children?.map((i) => this.renderItem(i))}
+                        </ul>
+                    </section>`}
        </li>`;
    }

--- a/web/src/elements/sidebar/SidebarBrand.ts
+++ b/web/src/elements/sidebar/SidebarBrand.ts
@ -53,8 +53,8 @@ export class SidebarBrand extends LitElement {
            <div class="pf-c-brand pb-brand">
                <img src="${this.config.branding_logo}" alt="passbook icon" loading="lazy" />
                ${this.config.branding_title
-                    ? html`<span>${this.config.branding_title}</span>`
-                    : ""}
+        ? html`<span>${this.config.branding_title}</span>`
+        : ""}
            </div>
        </a>`;
    }
--- a/web/src/pages/AdminOverviewPage.ts
+++ b/web/src/pages/AdminOverviewPage.ts
@ -82,39 +82,39 @@ export class AdminOverviewPage extends LitElement {
                </pb-aggregate-card>
                <pb-aggregate-card icon="pf-icon pf-icon-server" header="Workers">
                    ${this.data ?
-                        this.data?.worker_count! < 1 ?
-                            html`<p class="pb-aggregate-card">
+        this.data?.worker_count < 1 ?
+            html`<p class="pb-aggregate-card">
                                    <i class="fa fa-exclamation-triangle"></i> ${this.data.worker_count}
                                </p>
                                <p>${gettext("No workers connected.")}</p>` :
-                            html`<p class="pb-aggregate-card">
+            html`<p class="pb-aggregate-card">
                                    <i class="fa fa-check-circle"></i> ${this.data.worker_count}
                                </p>`
-                    : html`<pb-spinner></pb-spinner>`}
+        : html`<pb-spinner></pb-spinner>`}
                </pb-aggregate-card>
                <pb-aggregate-card icon="pf-icon pf-icon-plugged" header="Providers" headerLink="#/administration/providers/">
                    ${this.data ?
-                        this.data?.providers_without_application! < 1 ?
-                            html`<p class="pb-aggregate-card">
+        this.data?.providers_without_application < 1 ?
+            html`<p class="pb-aggregate-card">
                                    <i class="fa fa-exclamation-triangle"></i> 0
                                </p>
                                <p>${gettext("At least one Provider has no application assigned.")}</p>` :
-                            html`<p class="pb-aggregate-card">
+            html`<p class="pb-aggregate-card">
                                    <i class="fa fa-check-circle"></i> 0
                                </p>`
-                    : html`<pb-spinner></pb-spinner>`}
+        : html`<pb-spinner></pb-spinner>`}
                </pb-aggregate-card>
                <pb-aggregate-card icon="pf-icon pf-icon-plugged" header="Policies" headerLink="#/administration/policies/">
                    ${this.data ?
-                        this.data?.policies_without_binding! < 1 ?
-                            html`<p class="pb-aggregate-card">
+        this.data?.policies_without_binding < 1 ?
+            html`<p class="pb-aggregate-card">
                                    <i class="fa fa-exclamation-triangle"></i> 0
                                </p>
                                <p>${gettext("Policies without binding exist.")}</p>` :
-                            html`<p class="pb-aggregate-card">
+            html`<p class="pb-aggregate-card">
                                    <i class="fa fa-check-circle"></i> 0
                                </p>`
-                    : html`<pb-spinner></pb-spinner>`}
+        : html`<pb-spinner></pb-spinner>`}
                </pb-aggregate-card>
                <pb-aggregate-card-promise
                    icon="pf-icon pf-icon-user"
--- a/web/src/pages/applications/ApplicationViewPage.ts
+++ b/web/src/pages/applications/ApplicationViewPage.ts
@ -1,3 +1,4 @@
+import { gettext } from "django";
 import { css, customElement, html, LitElement, property, TemplateResult } from "lit-element";
 import { Application } from "../../api/application";
 import { DefaultClient, PBResponse } from "../../api/client";
@ -61,7 +62,7 @@ export class ApplicationViewPage extends LitElement {
    @property()
    application?: Application;

-    static get styles() {
+    static get styles(): any[] {
        return COMMON_STYLES.concat(
            css`
                img.pf-icon {
@ -90,12 +91,16 @@ export class ApplicationViewPage extends LitElement {
                        <div class="pf-c-card pf-c-card-aggregate pf-l-gallery__item pf-m-4-col" style="grid-column-end: span 3;grid-row-end: span 2;">
                            <div class="pf-c-card__header">
                                <div class="pf-c-card__header-main">
-                                    <i class="pf-icon pf-icon-server"></i> Logins over the last 24 hours
+                                    <i class="pf-icon pf-icon-server"></i> ${gettext("Logins over the last 24 hours")}
                                </div>
                            </div>
                            <div class="pf-c-card__body">
                                ${this.application ?
-        html`<pb-admin-logins-chart url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug!, "metrics"])}"></pb-admin-logins-chart>` : ""}
+        html`
+                                    <pb-admin-logins-chart
+                                        url="${DefaultClient.makeUrl(["core", "applications", this.application?.slug, "metrics"])}">
+                                    </pb-admin-logins-chart>`
+        : ""}
                            </div>
                        </div>
                    </div>