replace cra with vite

.env.template

@@ -1,10 +1,10 @@
 ## For local development: copy this file, rename it to `.env`, and populate accordingly
 
 # Automatically derived from package.json by NPM
-REACT_APP_VERSION=$npm_package_version
+VITE_VERSION=$npm_package_version
 
 # Automatically derived from package.json by NPM
-REACT_APP_NAME=$npm_package_name
+VITE_NAME=$npm_package_name
 
 # Azure client secret for "Omnia Radix Web Console - Development Clusters" app
 OAUTH2_PROXY_CLIENT_SECRET=

.eslintignore

@@ -0,0 +1,3 @@
+build
+dist
+node_modules

Dockerfile

@@ -1,14 +1,14 @@
-FROM node:16-alpine as builder
+FROM node:20-alpine as builder
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
 RUN npm run lint
 RUN npm run deps
-RUN CI=true npm run test
+RUN CI=true npm run test:no-watch
 RUN npm run build
 
-FROM nginxinc/nginx-unprivileged:1.24-alpine
+FROM nginxinc/nginx-unprivileged:1.25-alpine
 WORKDIR /app
 COPY --from=builder /app/build /app
 COPY proxy/server.conf /default.conf

README.md

@@ -49,13 +49,13 @@ If you need to nuke `node_modules` you can stop the container and run:
 
 ### Without Docker
 
-If you want to connect to local Radix-API, you can omit Docker. You may want to do this for a better experience while debugging JavaScript in your IDE (e.g. JetBrains WebStorm). Run `npm start` with `REACT_APP_RADIX_API_BASE_URI` set to your local instance of Radix-API, e.g.
+If you want to connect to local Radix-API, you can omit Docker. You may want to do this for a better experience while debugging JavaScript in your IDE (e.g. JetBrains WebStorm). Run `npm start` with `VITE_RADIX_API_BASE_URI` set to your local instance of Radix-API, e.g.
 
-`REACT_APP_RADIX_API_BASE_URI=127.0.0.1:3002 npm start`
+`VITE_RADIX_API_BASE_URI=127.0.0.1:3002 npm start`
 
 Radix-API *must* run with `--useOutClusterClient=false` for this to work.
 
-It should be possible to connect to local instances of radix-cost-allocation-api and radix-vulnerability-scanner-api in a similar fashion by setting the `REACT_APP_COST_API_BASE_URI` and `REACT_APP_SCAN_API_BASE_URI` environment variables, but as of August 2022, these backend applications have not been written with debug options to modify CORS settings to allow direct requests from web browser (as opposed to requests routed through the nginx proxy module in this repository).
+It should be possible to connect to local instances of radix-cost-allocation-api and radix-vulnerability-scanner-api in a similar fashion by setting the `VITE_COST_API_BASE_URI` and `VITE_SCAN_API_BASE_URI` environment variables, but as of August 2022, these backend applications have not been written with debug options to modify CORS settings to allow direct requests from web browser (as opposed to requests routed through the nginx proxy module in this repository).
 
 > If you want debugging with JetBrains WebStorm to work, you may also need to set the `HOST=127.0.0.1` and `JB_IDE_HOST=127.0.0.1` environment variables. If breakpoints are not triggered in your browser, try opening your browser window by holding CTRL+Shift and clicking the link from your process console window in WebStorm.
 

docker-compose-host-macos.yml

@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   web:
-    image: node:16-alpine
+    image: node:20-alpine
     container_name: radix-web_container
     stdin_open: true # because of https://github.com/facebook/create-react-app/issues/8688
     working_dir: /app
@@ -30,7 +30,7 @@ services:
       test: "exit 0"
 
   proxy:
-    image: nginxinc/nginx-unprivileged:1.24-alpine
+    image: nginxinc/nginx-unprivileged:1.25-alpine
     container_name: radix-proxy_container
     depends_on:
       web:

docker-compose-host.yml

@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   web:
-    image: node:16-alpine
+    image: node:20-alpine
     container_name: radix-web_container
     stdin_open: true # because of https://github.com/facebook/create-react-app/issues/8688
     working_dir: /app
@@ -20,7 +20,7 @@ services:
       - "9222:9222"
 
   proxy:
-    image: nginxinc/nginx-unprivileged:1.24-alpine
+    image: nginxinc/nginx-unprivileged:1.25-alpine
     container_name: radix-proxy_container
     environment:
       - DYNATRACE_API_TOKEN=${DYNATRACE_API_TOKEN}

docker-compose.yml

@@ -2,7 +2,7 @@ version: "3.8"
 
 services:
   web:
-    image: node:16-alpine
+    image: node:20-alpine
     container_name: radix-web_container
     stdin_open: true # because of https://github.com/facebook/create-react-app/issues/8688
     working_dir: /app
@@ -23,7 +23,7 @@ services:
       - "9222:9222"
 
   proxy:
-    image: nginxinc/nginx-unprivileged:1.24-alpine
+    image: nginxinc/nginx-unprivileged:1.25-alpine
     container_name: radix-proxy_container
     environment:
       - DYNATRACE_API_TOKEN=${DYNATRACE_API_TOKEN}

index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+
+                                            `````````
+                                        `````-`````.``
+                                    ````.``       ```
+                                  ```..           ```
+                                ````              ```
+                                ````              ```
+                              .````    ````       ``.
+                              ``.:   `````       ```
+                            ```   ````         ```
+                            ```` ````         ````
+                            ``/```         ```.`
+                            `````       ``````
+                            ```.`````.`````
+                            .``..``````
+                            ```
+                          ```
+                          .``
+                          -``
+                            ``
+                          `/`-`
+                            ```
+                            ```
+                            ````..
+                          ```-..-
+                        ````` ``````
+                      ````     ````````
+                    `````        ````````````
+              ```.`````:          ````   ```````````      `````
+        `````````                 ````        `````.``````````
+                                ```````:.
+                            ``````   `:``
+                ```````````````       .```
+                      ``-.              ```
+                                        `
+
+                 ______ _______ ______  _____ _     _
+                |_____/ |_____| |     \   |    \___/
+                |    \_ |     | |_____/ __|__ _/   \_
+
+-->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1h7zOvlFSE">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1h7zOvlFSE">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1h7zOvlFSE">
+    <link rel="manifest" href="/site.webmanifest?v=1h7zOvlFSE" crossorigin="use-credentials">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=1h7zOvlFSE" color="#eb0037">
+    <link rel="shortcut icon" href="/favicon.ico?v=1h7zOvlFSE">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#d0d0d0">
+
+    <style media="(prefers-color-scheme: dark)">
+      html {
+        background-color: hsl(202, 0%, 18%);
+        color: hsl(0, 0%, 77%);
+      }
+    </style>
+
+    <title>Radix Web Console</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+
+    <div id="root"></div>
+    <script type="module" src="./src/index.ts">
+      window.RADIX_API_ENVIRONMENT = "${RADIX_API_ENVIRONMENT}";
+      window.RADIX_CLUSTER_BASE = "${RADIX_DNS_ZONE}";
+      window.RADIX_CLUSTERNAME = "${RADIX_CLUSTERNAME}";
+      window.RADIX_CLUSTER_TYPE = "${RADIX_CLUSTER_TYPE}";
+      window.RADIX_ENVIRONMENT = "${RADIX_ENVIRONMENT}";
+      window.CLUSTER_EGRESS_IPS = "${CLUSTER_EGRESS_IPS}";
+      window.CLUSTER_INGRESS_IPS = "${CLUSTER_INGRESS_IPS}";
+      window.OAUTH2_CLIENT_ID = "${OAUTH2_CLIENT_ID}";
+      window.OAUTH2_AUTHORITY = "${OAUTH2_AUTHORITY}";
+      window.SERVICENOW_PROXY_SCOPES = "${SERVICENOW_PROXY_SCOPES}"
+      window.SERVICENOW_PROXY_BASEURL = "${SERVICENOW_PROXY_BASEURL}"
+      window.CMDB_CI_URL = "${CMDB_CI_URL}"
+      window.CLUSTER_OIDC_ISSUER_URL = "${CLUSTER_OIDC_ISSUER_URL}"
+    </script>
+  </body>
+</html>