Create 3.19 branch

.github/workflows/playwright.yml

@@ -0,0 +1,70 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main, release/* ]
+  pull_request:
+    branches: [ main, release/* ]
+env:
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+  PLAYWRIGHT_BROWSERS_PATH: 0
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 16
+
+    - name: Install frontend dependencies
+      run: |
+        npx playwright install-deps
+        npm ci --legacy-peer-deps
+      working-directory: src
+
+    - name: Install wait-on
+      run: npm install -g wait-on
+
+    - name: Install Playwright browsers
+      run: npx playwright install
+      working-directory: src
+
+    - name: Build and run backend
+      run: |
+        docker run --rm -p 5000:5000 -e FML_DEV_MODE=true gresearch/fasttrackml:main &
+        npx wait-on http://localhost:5000
+
+    - name: Install k6
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y gnupg software-properties-common ca-certificates curl
+        curl -s https://dl.k6.io/key.gpg | sudo apt-key add -
+        echo "deb https://dl.k6.io/deb stable main" | sudo tee /etc/apt/sources.list.d/k6.list
+        sudo apt-get update
+        sudo apt-get install -y k6
+
+    - name: Seed database with k6
+      run: |
+        wget https://raw.githubusercontent.com/G-Research/fasttrackml/main/docs/example/k6_load.js
+        k6 run k6_load.js
+
+    - name: Start frontend dev server and run E2E tests
+      run: |
+        npm start &
+        npx wait-on http://localhost:3000
+        npx playwright test src/e2e
+      working-directory: src
+
+    - name: Upload Playwright report
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1 +1,3 @@
 embed/
+.idea/
+.vscode/

README.md

@@ -26,6 +26,18 @@ An embed directory will be created with the built UI, ready to be embedded in th
 
 Once you're happy with them, create a pull request **against the `release/vX.Y.Z` branch*** that you started from (***not `main`!***). Once merged, the CI will run and build the UI. It will then push it to a new tag that is compatible with the Go module rules. For example, the first customization to `v3.16.2` of Aim will end up in a tag named `v0.31602.1`.
 
+### How to run E2E tests?
+
+The E2E tests can be run locally by following these steps:
+1. Start the FastTrackML server
+2. Run the Aim UI in development mode (on localhost:3000)
+3. In another terminal, run `cd src/e2e`
+4. Run `npx playwright test` to run the test suite
+
+New tests can be added directly to the `src/e2e` directory. You may also run `npx playwright show-report` to see the test results.
+
+For a guide on how to write a test, see [Playwright's example tests](https://github.com/microsoft/playwright/blob/main/examples/todomvc/tests/integration.spec.ts).
+
 ### How is this all enforced?
 
 A GitHub app has been created with the `contents:write` permissions on this repo. Its App ID and private key are stored as secrets under the `restricted` environment. This environment is limited to the `main` and `release/v*` branches
@@ -244,4 +256,5 @@ for rule in $(gh api /repos/G-Research/fasttrackml-ui-aim/rulesets -q '.[].id')
 do
   gh api /repos/G-Research/fasttrackml-ui-aim/rulesets/$rule | jq '[{name: .name, target: .target, conditions: .conditions, rules: .rules, bypass_actors: .bypass_actors}]'
 done | jq -s add
-```
+```
+

src/.editorconfig

@@ -0,0 +1,2 @@
+[*]
+end_of_line = lf

src/.eslintrc

@@ -0,0 +1,142 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "react-app",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": "error",
+    "react/no-unescaped-entities": 0,
+    "no-console": "warn",
+    "quotes": [
+      "error",
+      "single",
+      {
+        "avoidEscape": true
+      }
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/react-in-jsx-scope": "off",
+    "react/display-name": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "unknown"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "*.+(css|sass|less|scss|pcss|styl)",
+            "group": "unknown",
+            "patternOptions": {
+              "matchBase": true
+            },
+            "position": "after"
+          },
+          {
+            "pattern": "*",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@+/**",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "assets/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "components/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "config/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "fonts/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "hooks/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "modules/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "pages/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "routes/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "services/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "styles/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "tests/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "types/**",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "utils/**",
+            "group": "parent",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [],
+        "warnOnUnassignedImports": true,
+        "newlines-between": "always"
+      }
+    ]
+  },
+  "plugins": [
+    "react",
+    "prettier",
+    "react-hooks",
+    "@typescript-eslint"
+  ]
+}

src/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+/public/vs
+
+# testing
+/coverage
+.vscode
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+Desktop
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

src/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

src/.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+  ],
+  framework: '@storybook/react',
+};

src/.storybook/preview-body.html

@@ -0,0 +1,10 @@
+<style>
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+  html {
+    font-family: 'Inter', sans-serif;
+  }
+</style>

src/.storybook/preview-head.html

@@ -0,0 +1,34 @@
+<link
+  rel="preload"
+  as="font"
+  href="%PUBLIC_URL%/assets/inter/fonts/Inter.ttf"
+  crossorigin
+/>
+<link
+  rel="preload"
+  as="font"
+  href="%PUBLIC_URL%/assets/inconsolata/fonts/Inconsolata.ttf"
+  crossorigin
+/>
+<link
+  rel="preload"
+  as="font"
+  href="%PUBLIC_URL%/assets/icomoon/fonts/icomoon.eot"
+  crossorigin
+/>
+<link
+  rel="preload"
+  as="font"
+  href="%PUBLIC_URL%/assets/icomoon/fonts/icomoon.ttf"
+  crossorigin
+/>
+<link
+  rel="preload"
+  as="font"
+  href="%PUBLIC_URL%/assets/icomoon/fonts/icomoon.woff"
+  crossorigin
+/>
+
+<link rel="stylesheet" href="%PUBLIC_URL%/assets/icomoon/icomoonIcons.css" />
+<link rel="stylesheet" href="%PUBLIC_URL%/assets/inter/inter.css" />
+<link rel="stylesheet" href="%PUBLIC_URL%/assets/inconsolata/inconsolata.css" />

src/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

src/aim_ui/VERSION

@@ -0,0 +1 @@
+../../../VERSION

src/aim_ui/build

@@ -0,0 +1 @@
+../build