Bootstrapping UI for ephemeral environments (#565)

## 📝 Description
Ephemeral environments UI

## ✅ Checklist
- [x] I have tested this change
- [ ] This change requires documentation update

Author: skipi

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": 120, "ignoreComments": true, "ignoreStrings": true, "ignoreTemplateLiterals": true}],
         "no-multi-spaces": "error",
         "@typescript-eslint/member-delimiter-style": [
           "warn",
@@ -97,7 +98,7 @@ module.exports = {
             },
             singleline: {
               delimiter: "comma",
-              requireLast: true,
+              requireLast: false,
             },
           },
         ],
@@ -114,6 +115,12 @@ module.exports = {
             beforeClosing: "never",
           },
         ],
+        "@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-semaphore.css

@@ -57,6 +57,8 @@
     transition: background .1s ease, border-color .1s ease;
     position: relative;
 }
+
+.form-control-border,
 input.form-control,
 textarea.form-control {
     box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), inset 0 1px 1px 0 #E5E8EA;

front/assets/css/app.css

@@ -107,40 +107,19 @@ 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"],
@@ -466,21 +445,43 @@ sem-popover {
           user-select: none;
 }
 
-.material-symbols-outlined {
-  font-variation-settings:
-  'FILL' 0,
-  'wght' 300,
-  'GRAD' 0,
-  'opsz' 20
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-2 {
+  flex: 2 2 0%;
+}
+
+.flex-3 {
+  flex: 3 3 0%;
+}
+
+.flex-4 {
+  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/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}>
@@ -18,15 +18,9 @@ export default function ({ dom, config }: { dom: HTMLElement, config: any, }) {
               {configState.accessProvider.canManageAgents() && (
                 <Fragment>
                   <Route path="settings" element={<pages.SelfHosted.Edit/>}/>
-                  <Route
-                    path="disable_all"
-                    element={<pages.SelfHosted.DisableAll/>}
-                  />
+                  <Route path="disable_all" element={<pages.SelfHosted.DisableAll/>}/>
                   <Route path="delete" element={<pages.SelfHosted.Delete/>}/>
-                  <Route
-                    path="reset"
-                    element={<pages.SelfHosted.ResetToken/>}
-                  />
+                  <Route path="reset" element={<pages.SelfHosted.ResetToken/>}/>
                 </Fragment>
               )}
               <Route path="*" element={<Navigate to="." replace/>}/>

front/assets/js/agents/stores/activity.tsx

@@ -125,13 +125,13 @@ export class Item {
 }
 
 export type Action =
-  | { type: `SET_WAITING_ITEMS`, value: Item[], }
-  | { type: `SET_RUNNING_ITEMS`, value: Item[], }
-  | { type: `SET_LOBBY_ITEMS`, value: Item[], }
-  | { type: `SET_HOSTED_AGENTS`, value: Agent[], }
-  | { type: `SET_SELF_HOSTED_AGENTS`, value: Agent[], }
-  | { type: `DELETE_SELF_HOSTED_AGENT`, value: string, }
-  | { type: `SET_INVISIBLE_JOBS_COUNT`, value: number, };
+  | { type: `SET_WAITING_ITEMS`, value: Item[] }
+  | { type: `SET_RUNNING_ITEMS`, value: Item[] }
+  | { type: `SET_LOBBY_ITEMS`, value: Item[] }
+  | { type: `SET_HOSTED_AGENTS`, value: Agent[] }
+  | { type: `SET_SELF_HOSTED_AGENTS`, value: Agent[] }
+  | { type: `DELETE_SELF_HOSTED_AGENT`, value: string }
+  | { type: `SET_INVISIBLE_JOBS_COUNT`, value: number };
 
 export interface State {
   hostedAgents: Agent[];
@@ -159,9 +159,7 @@ export const Reducer = (state: State, action: Action): State => {
     case `DELETE_SELF_HOSTED_AGENT`:
       return {
         ...state,
-        selfHostedAgents: state.selfHostedAgents.filter(
-          (agent) => agent.name !== action.value
-        ),
+        selfHostedAgents: state.selfHostedAgents.filter((agent) => agent.name !== action.value),
       };
 
     case `SET_WAITING_ITEMS`:

front/assets/js/agents/stores/self_hosted_agent.tsx

@@ -2,13 +2,13 @@ import { createContext } from "preact";
 import * as types from "../types";
 
 export type Action =
-  | { type: `SET_AGENT_TYPE`, value: types.SelfHosted.AgentType, }
-  | { type: `SET_AGENTS`, value: types.SelfHosted.Agent[], }
-  | { type: `SET_TOKEN`, value: string, }
-  | { type: `REVEAL_TOKEN`, }
-  | { type: `HIDE_TOKEN`, }
-  | { type: `JUST_CREATED`, }
-  | { type: `JUST_RESET`, };
+  | { type: `SET_AGENT_TYPE`, value: types.SelfHosted.AgentType }
+  | { type: `SET_AGENTS`, value: types.SelfHosted.Agent[] }
+  | { type: `SET_TOKEN`, value: string }
+  | { type: `REVEAL_TOKEN` }
+  | { type: `HIDE_TOKEN` }
+  | { type: `JUST_CREATED` }
+  | { type: `JUST_RESET` };
 
 export interface State {
   token: string;

front/assets/js/app.js

@@ -67,6 +67,7 @@ import { default as AddPeople } from "./people/add_people";
 import { default as EditPerson } from "./people/edit_person";
 import { default as SyncPeople } from "./people/sync_people";
 import { default as ServiceAccounts } from "./service_accounts";
+import { default as EphemeralEnvironments } from "./ephemeral_environments";
 import { default as Report } from "./report";
 
 import { InitializingScreen } from "./project_onboarding/initializing";
@@ -287,6 +288,13 @@ export var App = {
     });
     new Star();
   },
+  ephemeral_environments_page: function () {
+    const ephemeralEnvironmentsEl = document.getElementById("ephemeral-environments");
+    if (ephemeralEnvironmentsEl) {
+      const config = JSON.parse(ephemeralEnvironmentsEl.dataset.config);
+      EphemeralEnvironments({ dom: ephemeralEnvironmentsEl, config });
+    }
+  },
   people_page: function () {
     ListPeople.init();
     ChangeRoleDropdown.init();