toil(front): cleanup js/css

front/Dockerfile

@@ -47,9 +47,8 @@ RUN mix sentry_recompile && mix compile --warnings-as-errors
 # -- node stage
 FROM node:16-alpine AS node
 WORKDIR /assets
-COPY front/assets/package.json front/assets/package-lock.json ./
-RUN npm set progress=false && npm install
 COPY front/assets ./
+RUN npm ci --force
 # -- node stage
 
 # -- dev stage - for local development

front/assets/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
   },
   ignorePatterns: ["*.js", "*.json"],
   rules: {},
- overrides: [
+  overrides: [
     {
       files: ["js/**/*.spec.js"],
       env: {
@@ -86,7 +86,8 @@ module.exports = {
             },
           },
         ],
-        "no-console": 1,
+        "no-console": ["error", { allow: ["warn", "error"] }],
+        "max-len": ["error", {"code": 140, "ignoreComments": true, "ignoreStrings": true, "ignoreTemplateLiterals": true}],
         "no-multi-spaces": "error",
         "@typescript-eslint/member-delimiter-style": [
           "warn",
@@ -97,14 +98,17 @@ module.exports = {
             },
             singleline: {
               delimiter: "comma",
-              requireLast: true,
+              requireLast: false,
             },
           },
         ],
         "semi-spacing": ["error", {"before": false, "after": true}],
         "react/jsx-uses-react": "off",
         "react/react-in-jsx-scope": "off",
         "react/display-name": "off",
+        "react/jsx-first-prop-new-line": ["error", "multiline"],
+        "react/jsx-max-props-per-line": ["error", { maximum: {single: 2, multi: 1} }],
+        "react/jsx-closing-bracket-location": ["error", { selfClosing: "line-aligned", nonEmpty: "line-aligned" }],
         "react/jsx-tag-spacing": [
           "error",
           {
@@ -114,6 +118,27 @@ module.exports = {
             beforeClosing: "never",
           },
         ],
+        "comma-dangle": "off",
+        "@typescript-eslint/comma-dangle": [
+          "error",
+          {
+            arrays: "always-multiline",
+            objects: "always-multiline",
+            imports: "always-multiline",
+            exports: "always-multiline",
+            functions: "never",
+            enums: "always-multiline",
+            generics: "always-multiline",
+            tuples: "always-multiline"
+          }
+        ],
+        "@typescript-eslint/consistent-type-imports": ["warn", { prefer: "type-imports" }],
+        "@typescript-eslint/no-misused-promises": [
+          "error",
+          {
+            "checksVoidReturn": false
+          }
+        ]
       },
     },
   ],

front/assets/build.js

@@ -83,7 +83,7 @@ const buildOptions = {
 
 if (watch) {
   esbuild.context(buildOptions).then(async context => {
-    context.watch()
+    await context.watch()
     await copyAssets()
 
     const chokidar = require('chokidar')

front/assets/css/app.css

@@ -107,42 +107,22 @@ summary.no-expand::marker {
 }
 
 .material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 16;
-  font-size: 16px;
-}
-
-.material-symbols-outlined.f1 {
-  font-size: 3rem;
-}
-
-.material-symbols-outlined.f2 {
-  font-size: 2.25rem;
-}
-
-.material-symbols-outlined.f3 {
-  font-size: 1.5rem;
-}
-
-.material-symbols-outlined.f4 {
-  font-size: 1.25rem;
-}
-
-.material-symbols-outlined.f5 {
-  font-size: 1rem;
-}
-
-.material-symbols-outlined.f6 {
-  font-size: .875rem;
+  font-variation-settings:
+    'FILL' var(--material-symbol-fill, 0),
+    'wght' var(--material-symbol-weight, 300),
+    'GRAD' var(--material-symbol-grad, 0),
+    'opsz' var(--material-symbol-opsz, 20);
 }
 
-.material-symbols-outlined.f7 {
-  font-size: .75rem;
+.material-symbols-outlined.fill {
+  --material-symbol-fill: 1;
 }
 
 .material-symbols-outlined.b {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+  --material-symbol-weight: 400;
 }
 
+
 sem-tooltip slot[slot="content"],
 sem-popover slot[slot="content"] {
   display: none;
@@ -466,21 +446,43 @@ sem-popover {
           user-select: none;
 }
 
-.material-symbols-outlined {
-  font-variation-settings:
-  'FILL' 0,
-  'wght' 300,
-  'GRAD' 0,
-  'opsz' 20
+.gap1 {
+  gap: 0.25rem;
+}
+
+.gap2 {
+  gap: 0.5rem;
+}
+
+.gap3 {
+  gap: 0.75rem;
+}
+
+.gap4 {
+  gap: 1rem;
+}
+
+.flex1 {
+  flex: 1 1 0%;
+}
+
+.flex2 {
+  flex: 2 2 0%;
+}
+
+.flex3 {
+  flex: 3 3 0%;
+}
+
+.flex4 {
+  flex: 4 4 0%;
+}
+
+.flex-break {
+  flex-basis: 100%;
+  height: 0;
+}
+.break-column {
+  flex-basis: 100%;
+  width: 0;
 }
-.material-symbols-outlined.fill {
-  font-variation-settings:
-  'FILL' 1,
-  'wght' 300,
-  'GRAD' 0,
-  'opsz' 20
-}
-.material-symbols-outlined.md-18 { font-size: 18px; }
-.material-symbols-outlined.md-24 { font-size: 24px; }
-.material-symbols-outlined.md-36 { font-size: 36px; }
-.material-symbols-outlined.md-48 { font-size: 48px; }

front/assets/js/agents/components/activity_item.tsx

@@ -1,4 +1,5 @@
-import { Fragment, h, VNode } from "preact";
+import type { h, VNode } from "preact";
+import { Fragment } from "preact";
 import { useContext, useState } from "preact/hooks";
 import * as stores from "../stores";
 import * as toolbox from "js/toolbox";

front/assets/js/agents/components/activity_monitor.tsx

@@ -59,7 +59,11 @@ const LobbyItems = () => {
         in their branch, pull request and delivery queue
       </summary>
       {lobbyItems.map((item, idx) => (
-        <ActivityItem item={item} key={idx} inLobby={true}/>
+        <ActivityItem
+          item={item}
+          key={idx}
+          inLobby={true}
+        />
       ))}
     </details>
   );

front/assets/js/agents/components/agents.tsx

@@ -1,4 +1,5 @@
-import { h, Fragment } from "preact";
+import type { h } from "preact";
+import { Fragment } from "preact";
 import { useContext } from "preact/hooks";
 import * as stores from "../stores";
 import { useNavigate } from "react-router-dom";

front/assets/js/agents/components/code.tsx

@@ -1,4 +1,4 @@
-import { h } from "preact";
+import type { h } from "preact";
 interface CodeProps extends h.JSX.HTMLAttributes {
   content: string;
 }

front/assets/js/agents/components/git_providers.tsx

@@ -1,4 +1,4 @@
-import { h } from "preact";
+import type { h } from "preact";
 import * as components from ".";
 import { useState } from "preact/compat";
 import styled from "styled-components";

front/assets/js/agents/components/instructions/aws.tsx

@@ -1,7 +1,8 @@
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext, useState } from "preact/hooks";
-import { Fragment, h, VNode } from "preact";
+import type { h, VNode } from "preact";
+import { Fragment } from "preact";
 import styled from "styled-components";
 
 export const name = `AWS`;

front/assets/js/agents/components/instructions/kubernetes.tsx

@@ -1,4 +1,5 @@
-import { Fragment, VNode } from "preact";
+import type { VNode } from "preact";
+import { Fragment } from "preact";
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext } from "preact/hooks";
@@ -18,7 +19,11 @@ export const Component = (): VNode => {
           <li>
             <div className="mb2">
               Install{` `}
-              <a href="https://helm.sh/" target="_blank" rel="noreferrer">
+              <a
+                href="https://helm.sh/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 helm
               </a>
             </div>

front/assets/js/agents/components/instructions/linux.tsx

@@ -1,4 +1,5 @@
-import { Fragment, VNode } from "preact";
+import type { VNode } from "preact";
+import { Fragment } from "preact";
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext } from "preact/hooks";

front/assets/js/agents/components/instructions/macos.tsx

@@ -1,4 +1,5 @@
-import { Fragment, h, VNode } from "preact";
+import type { h, VNode } from "preact";
+import { Fragment } from "preact";
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext, useState } from "preact/hooks";
@@ -182,7 +183,11 @@ export const HomebrewInstructions = () => {
           <li>
             <div className="mb2">
               Install{` `}
-              <a href="https://brew.sh/" target="_blank" rel="noreferrer">
+              <a
+                href="https://brew.sh/"
+                target="_blank"
+                rel="noreferrer"
+              >
                 Homebrew
               </a>
             </div>

front/assets/js/agents/components/instructions/rhel.tsx

@@ -1,4 +1,5 @@
-import { Fragment, VNode } from "preact";
+import type { VNode } from "preact";
+import { Fragment } from "preact";
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext } from "preact/hooks";

front/assets/js/agents/components/instructions/ubuntu.tsx

@@ -1,4 +1,5 @@
-import { Fragment, VNode } from "preact";
+import type { VNode } from "preact";
+import { Fragment } from "preact";
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext } from "preact/hooks";

front/assets/js/agents/components/instructions/windows.tsx

@@ -1,4 +1,5 @@
-import { Fragment, VNode } from "preact";
+import type { VNode } from "preact";
+import { Fragment } from "preact";
 import * as stores from "../../stores";
 import * as components from "../";
 import { useContext } from "preact/hooks";

front/assets/js/agents/components/os_box.tsx

@@ -1,5 +1,5 @@
 import * as toolbox from "js/toolbox";
-import { VNode, h } from "preact";
+import type { VNode, h } from "preact";
 interface OsBoxProps extends h.JSX.HTMLAttributes {
   name: string;
   icon?: string;

front/assets/js/agents/components/pre_copy.tsx

@@ -1,4 +1,4 @@
-import { h } from "preact";
+import type { h } from "preact";
 import * as toolbox from "js/toolbox";
 import { useState } from "preact/hooks";
 import dedent from "dedent";

front/assets/js/agents/components/self_hosted.tsx

@@ -1,7 +1,7 @@
-import { h } from "preact";
+import type { h } from "preact";
 import * as components from "../components";
 import { useEffect, useState } from "preact/hooks";
-import * as types from "../types";
+import type * as types from "../types";
 import * as Instructions from "./instructions";
 
 export interface Instruction {

front/assets/js/agents/index.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import * as stores from "js/agents/stores";
 import * as pages from "js/agents/pages";
 
-export default function ({ dom, config }: { dom: HTMLElement, config: any, }) {
+export default function ({ dom, config }: { dom: HTMLElement, config: any }) {
   const configState = stores.Config.State.fromJSON(config);
   render(
     <BrowserRouter basename={config.baseUrl}>