Initial commit

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+.wrangler

.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {
+        "@typescript-eslint/no-extra-semi": "error",
+        "no-extra-semi": "off"
+      }
+    }
+  ]
+}

.github/workflows/pr.yml

@@ -0,0 +1,67 @@
+on:
+  pull_request:
+    branches: [main]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm nx affected --targets=build --base=origin/main --head=HEAD
+  test:
+    runs-on: ubuntu-latest
+    name: Unit tests
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm nx affected --targets=test --base=origin/main --head=HEAD --passWithNoTests --watch=false
+  static-analysis:
+    runs-on: ubuntu-latest
+    name: Static Analyzis
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm nx affected --targets=lint --base=origin/main --head=HEAD
+      - run: NX_BASE=origin/main NX_HEAD=HEAD ./scripts/typecheck.js
+      - run: NX_BASE=origin/main NX_HEAD=HEAD pnpm nx format:check
+  e2e:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: E2E tests
+    env:
+      VERSION: ${{ github.sha }}
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: pnpm install --frozen-lockfile
+      - run: npx playwright install --with-deps
+      - name: E2E
+        run: pnpm nx affected --targets=e2e --base=origin/main --head=HEAD
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: dist/.playwright/
+          retention-days: 3

.github/workflows/release.yml

@@ -0,0 +1,26 @@
+on:
+  push:
+    tags:
+      - 'v**'
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    name: Release
+    steps:
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm nx build web-ui --skip-nx-cache
+      - run: cd dist/apps/web-ui && zip -r ../../../ui-${{ github.ref_name }}.zip .
+      - name: Create a release
+        uses: ncipollo/release-action@v1
+        with:
+          artifacts: ui-${{ github.ref_name }}.zip
+          generateReleaseNotes: true

.gitignore

@@ -0,0 +1,49 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+dist
+tmp
+/out-tsc
+
+# dependencies
+node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+.nx/cache
+.nx/workspace-data
+/.editorconfig
+/.vscode
+/db.json
+.wrangler
+.nx
+**/playwright/.auth
+test-results

.npmrc

@@ -0,0 +1,4 @@
+strict-peer-dependencies=false
+auto-install-peers=true
+enable-modules-dir=true
+ignore-dep-scripts=true

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

@types/global-env.d.ts

@@ -0,0 +1,8 @@
+interface Env {
+  VERSION: string;
+  [key: string]: string & {};
+}
+
+declare module globalThis {
+  var env: Env;
+}

@types/vite.d.ts

@@ -0,0 +1,4 @@
+declare module '*?url' {
+  const content: string;
+  export default content;
+}

README.md

@@ -0,0 +1,31 @@
+# Restate Web UI
+
+This repository is for Restate Web UI.
+
+## Getting started
+
+- This repository uses [`pnpm`](https://pnpm.io) as the package manager. If you are not contributing to the project, you do not need to install `pnpm`.
+
+```sh
+# Install dependencies
+pnpm install
+```
+
+- This repository utilizes [`nx`](https://nx.dev) for the monorepo structure. Each package within the monorepo has multiple targets. To run a target for a package, use commands like:
+
+```sh
+# pnpm nx <target> <project> <...options>
+
+# Run the web ui app in dev mode with mock configuration
+pnpm nx serve web-ui --configuration=mock
+
+# Run the ui-button unit tests in watch mode
+pnpm nx run test ui-button --watch
+```
+
+Details of each package's targets can be available in the `project.json` file within each package.
+
+## Important Packages
+
+- [Web UI App](apps/web-ui/README.md)
+- [Admin Api Client](libs/data-access/admin-api/README.md)

apps/mock-admin-api/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/mock-admin-api/project.json

@@ -0,0 +1,65 @@
+{
+  "name": "mock-admin-api",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/mock-admin-api/src",
+  "projectType": "application",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/esbuild:esbuild",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "platform": "node",
+        "outputPath": "dist/apps/mock-admin-api",
+        "format": ["cjs"],
+        "bundle": true,
+        "main": "apps/mock-admin-api/src/main.ts",
+        "tsConfig": "apps/mock-admin-api/tsconfig.app.json",
+        "assets": ["apps/mock-admin-api/src/assets"],
+        "generatePackageJson": true,
+        "esbuildOptions": {
+          "sourcemap": true,
+          "outExtension": {
+            ".js": ".js"
+          }
+        }
+      },
+      "configurations": {
+        "proxy": {
+          "main": "apps/mock-admin-api/src/proxy.ts"
+        },
+        "development": {},
+        "production": {
+          "esbuildOptions": {
+            "sourcemap": false,
+            "outExtension": {
+              ".js": ".js"
+            }
+          }
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/js:node",
+      "defaultConfiguration": "development",
+      "dependsOn": ["build"],
+      "options": {
+        "port": 0,
+        "buildTarget": "mock-admin-api:build",
+        "runBuildTargetDependencies": false
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "mock-admin-api:build:development"
+        },
+        "proxy": {
+          "buildTarget": "mock-admin-api:build:proxy"
+        },
+        "production": {
+          "buildTarget": "mock-admin-api:build:production"
+        }
+      }
+    }
+  }
+}

apps/mock-admin-api/src/main.ts

@@ -0,0 +1,15 @@
+import { adminApiMockHandlers } from '@restate/data-access/admin-api-fixtures';
+
+const port = process.env.PORT ? Number(process.env.PORT) : 4001;
+
+import { createMiddleware } from '@mswjs/http-middleware';
+import express from 'express';
+import cors from 'cors';
+
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+app.use(createMiddleware(...adminApiMockHandlers));
+
+app.listen(port);

apps/mock-admin-api/src/proxy.ts

@@ -0,0 +1,38 @@
+const port = process.env.PORT ? Number(process.env.PORT) : 4001;
+const ADMIN_ENDPOINT = process.env.ADMIN_ENDPOINT ?? 'http://localhost:9070';
+import express, { RequestHandler } from 'express';
+import cors from 'cors';
+
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+
+const proxyHandler: RequestHandler = async (req, res) => {
+  const response = await fetch(`${ADMIN_ENDPOINT}${req.url}`, {
+    method: req.method,
+    headers: new Headers(req.headers as Record<string, string>),
+    ...(req.body &&
+      ['POST', 'PUT'].includes(req.method) && {
+        body: JSON.stringify(req.body),
+      }),
+  });
+
+  response.body?.pipeTo(
+    new WritableStream({
+      start() {
+        res.statusCode = response.status;
+        response.headers.forEach((v, n) => res.setHeader(n, v));
+      },
+      write(chunk) {
+        res.write(chunk);
+      },
+      close() {
+        res.end();
+      },
+    })
+  );
+};
+
+app.all('*', proxyHandler);
+app.listen(port);