Migrate UI to Vite build engine and update dependencies

.devcontainer/devcontainer.json

@@ -44,20 +44,13 @@
       // Set *default* container specific settings.json values on container create.
       "settings": {
         "terminal.integrated.defaultProfile.linux": "bash",
+        "editor.formatOnPaste": true,
+        "editor.formatOnSave": true,
         "python.pythonPath": "/usr/local/bin/python",
-        "python.linting.enabled": true,
-        "python.linting.pylintEnabled": false,
-        "python.linting.flake8Enabled": true,
         "python.formatting.provider": "black",
         "python.formatting.autopep8Path": "/usr/local/py-utils/bin/autopep8",
         "python.formatting.blackPath": "/usr/local/py-utils/bin/black",
         "python.formatting.yapfPath": "/usr/local/py-utils/bin/yapf",
-        "python.linting.banditPath": "/usr/local/py-utils/bin/bandit",
-        "python.linting.flake8Path": "/usr/local/py-utils/bin/flake8",
-        "python.linting.mypyPath": "/usr/local/py-utils/bin/mypy",
-        "python.linting.pycodestylePath": "/usr/local/py-utils/bin/pycodestyle",
-        "python.linting.pydocstylePath": "/usr/local/py-utils/bin/pydocstyle",
-        "python.linting.pylintPath": "/usr/local/py-utils/bin/pylint",
         "python.testing.unittestEnabled": false,
         "python.testing.pytestEnabled": true,
         "python.testing.pytestArgs": [
@@ -276,6 +269,7 @@
         "ms-python.python",
         "ms-python.pylance",
         "ms-python.flake8",
+        "nwgh.bandit",
         "hashicorp.terraform",
         "github.vscode-pull-request-github",
         "gitHub.copilot",
@@ -295,5 +289,7 @@
   ],
   // Run commands after the container is created.
   "postCreateCommand": "./.devcontainer/scripts/post-create.sh",
-  "initializeCommand": ["./.devcontainer/scripts/initialize"]
+  "initializeCommand": [
+    "./.devcontainer/scripts/initialize"
+  ]
 }

CHANGELOG.md

@@ -12,6 +12,7 @@ ENHANCEMENTS:
 * Subnet definitions are now inline in the `azurerm_virtual_network` resource, and NSG associations are set using `security_group` in each subnet block (no separate `azurerm_subnet_network_security_group_association` needed). ([[#4255](https://github.com/microsoft/AzureTRE/pull/4255/)])
 * Azure Cosmos DB should disable public network access ([#4322](https://github.com/microsoft/AzureTRE/issues/4322))
 * Add bundle target to Makefile for handling different bundle types in single command ([#4372](https://github.com/microsoft/AzureTRE/issues/4372))
+* Migrate UI to Vite build engine and update dependencies ([#4368](https://github.com/microsoft/AzureTRE/pull/4368))
 * Add Windows image field to the Admin VM template ([#4274](https://github.com/microsoft/AzureTRE/pull/4274))
 * Update TLS to the latest version for web apps / function apps (([#4351](https://github.com/microsoft/AzureTRE/issues/4351))
 

docs/tre-developers/ui.md

@@ -4,7 +4,7 @@ This project contains a React-based web UI which covers the core aspects of a TR
 
 ## Chosen UI Stack + Components
 The UI is built upon several popular web frameworks:
-- React v18 (created via create-react-app, with all build configurations left as defaults)
+- React v18 (with Vite)
   - Typescript
   - React Router v6 for client side routing
 - Fluent UI [Fluent UI Docs](https://developer.microsoft.com/en-us/fluentui#/controls/web)
@@ -54,4 +54,53 @@ The UI is deployed as part of the `tre-deploy` make target (unless you set `depl
 To re-deploy _just_ the UI (after an initial deploy), run `make build-and-deploy-ui` from the root of the dev container. This will:
 - Use the environment variables from your deployment to create a `config.json` file for the UI
 - Build the source code, via `yarn build`
-- Deploy the code to Azure blob storage, where it will be statically served behind the App Gateway that also fronts the APi.
+- Deploy the code to Azure blob storage, where it will be statically served behind the App Gateway that also fronts the API.
+
+## Run the UI
+- Ensure `deploy_ui=false` is not set in your `./config.yaml` file
+- In the root of the repo, run `make tre-deploy`. This will provision the necessary resources in Azure, build and deploy the UI to Azure blob storage, behind the App Gateway used for the API. The deployment process will also create the necessary `config.json`, using the `config.source.json` as a template.
+- In Microsoft Entra ID, locate the TRE Client Apps app (possibly called Swagger App). In the Authentication section add reply URIs for:
+  - `http://localhost:3000` (if wanting to run locally)
+  - Your deployed App Url - `https://{TRE_ID}.{LOCATION}.cloudapp.azure.com`.
+
+At this point you should be able to navigate to the web app in Azure, log in, and see your workspaces.
+
+## Available Scripts
+
+In the UI directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br>
+
+### `yarn run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+### `yarn run serve`
+
+Serves the production build from the `build` folder.<br>
+
+### `yarn run test:coverage`
+
+Runs the tests and generates a coverage report.<br>
+
+### `yarn lint`
+
+Runs the linter on the project.<br>
+
+### `yarn format`
+
+Runs the formatter on the project.<br>

ui/app/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": false,
+  "semi": true
+}

ui/app/eslint.config.js

@@ -0,0 +1,24 @@
+import eslintConfigPrettier from "eslint-config-prettier";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import typescriptParser from "@typescript-eslint/parser";
+
+export default [
+  {
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: 2020,
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+    },
+    rules: {},
+  },
+  eslintConfigPrettier,
+];

ui/app/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="stylesheet"
+      href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+    -->
+    <link rel="icon" href="/favicon.ico" />
+    <title>Azure TRE</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

ui/app/package.json

@@ -2,6 +2,7 @@
   "name": "tre-ui",
   "version": "0.7.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@azure/msal-browser": "^2.35.0",
     "@azure/msal-react": "^1.5.12",
@@ -12,43 +13,55 @@
     "@rjsf/fluent-ui": "^5.24.3",
     "@rjsf/utils": "^5.24.3",
     "@rjsf/validator-ajv8": "^5.24.3",
-    "@testing-library/dom": "^7.21.4",
-    "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.0",
     "@types/node": "^20.17.14",
     "@types/react": "^18.3.16",
     "@types/react-dom": "^18.2.6",
+    "@vitejs/plugin-react-swc": "latest",
     "moment": "^2.29.4",
-    "node-sass": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^8.0.3",
     "react-redux": "^8.0.4",
     "react-router-dom": "6.28.2",
     "remark-gfm": "^3.0.1",
     "typescript": "^5.6.3",
+    "vite": "latest",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-svgr": "latest",
+    "vite-tsconfig-paths": "latest",
     "web-vitals": "^3.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-syntax-flow": "^7.23.3",
-    "@babel/plugin-transform-react-jsx": "^7.23.4",
-    "react-scripts": "5.0.1"
+    "@testing-library/dom": "^7.21.4",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^20.17.14",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.2.6",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "@vitest/coverage-v8": "latest",
+    "eslint": "^9.20.1",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.14.0",
+    "jsdom": "latest",
+    "prettier": "3.5.0",
+    "sass-embedded": "^1.83.4",
+    "vitest": "latest"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage --watch=false",
+    "lint": "eslint .",
+    "format": "prettier --write ."
   },
   "browserslist": {
     "production": [

ui/app/public/index.html

@@ -1,15 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="//static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="icon" href="/favicon.ico" />
     <title>Azure TRE</title>
   </head>
   <body>