Merge branch 'main' into DT-264

.env.test.e2e

@@ -0,0 +1,4 @@
+VITE_TEMPORAL_UI_BUILD_TARGET="local"
+VITE_TEMPORAL_PORT="7233"
+VITE_API="http://localhost:8080"
+VITE_MODE="development"

.env.test.integration

@@ -1,3 +1,3 @@
 VITE_TEMPORAL_PORT="4444"
-VITE_API="http://localhost:5555"
+VITE_API="http://localhost:8233"
 VITE_MODE="development"

.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'prettier',
   ],
-  plugins: ['svelte3', '@typescript-eslint', 'vitest'],
+  plugins: ['svelte3', '@typescript-eslint', 'vitest', 'import'],
   ignorePatterns: ['*.cjs', 'prism.cjs', '/server'],
   overrides: [
     {
@@ -17,7 +17,7 @@ module.exports = {
        * So, we're selectively adding to this list until we get all
        * components to pass linting.
        */
-      files: ['src/lib/holocene/*.svelte'],
+      files: ['src/**/*.svelte'],
       processor: 'svelte3/svelte3',
       /**
        * Temporary fix, see the following:
@@ -54,7 +54,7 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/no-unused-vars': [
-      1,
+      'error',
       {
         argsIgnorePattern: '^_',
         varsIgnorePattern: '^_',
@@ -68,6 +68,7 @@ module.exports = {
       'error',
       { assertionStyle: 'as' },
     ],
+    '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-restricted-imports': [
       'error',
       {
@@ -79,5 +80,43 @@ module.exports = {
         ],
       },
     ],
+    'sort-imports': [
+      'error',
+      { ignoreCase: true, ignoreDeclarationSort: true },
+    ],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          ['parent', 'sibling', 'index'],
+        ],
+        pathGroups: [
+          {
+            pattern: 'svelte/**',
+            group: 'external',
+            position: 'before',
+          },
+          { pattern: '$app/**', group: 'external', position: 'after' },
+          { pattern: './$types', group: 'external', position: 'after' },
+          { pattern: '$lib/**', group: 'internal' },
+          {
+            pattern: '$components/**/*.svelte',
+            group: 'internal',
+            position: 'after',
+          },
+          { pattern: './**/*.svelte', group: 'index', position: 'after' },
+        ],
+        pathGroupsExcludedImportTypes: ['svelte'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: false,
+          orderImportKind: 'asc',
+        },
+      },
+    ],
   },
 };

.github/workflows/playwright.yml

@@ -1,4 +1,4 @@
-name: Playwright Tests
+name: Playwright
 run-name: ${{github.event.pull_request.title}} (${{ github.event.pull_request.number }}) by @${{ github.triggering_actor }} (Attempt ${{ github.run_attempt }})
 
 on:
@@ -16,7 +16,7 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  playwright:
+  integration-tests:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
@@ -25,11 +25,46 @@ jobs:
         uses: ./.github/actions/checkout-and-setup
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
-      - name: Run Playwright tests
-        run: pnpm run test:integration
+      - name: Run Integration tests
+        run: pnpm test:integration:run
       - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: playwright-report
+          name: playwright-report-integration
+          path: playwright-report/
+          retention-days: 30
+  e2e-tests:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+      - name: Checkout and Setup Node
+        uses: ./.github/actions/checkout-and-setup
+      - name: Build UI
+        run: pnpm build:server
+      - uses: actions/setup-go@v3
+        with:
+          go-version-file: server/go.mod
+          cache-dependency-path: server/go.sum
+          cache: true
+          check-latest: true
+      - name: Set up Protoc
+        uses: arduino/setup-protoc@v1
+        with:
+          version: '3.x'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - name: Build UI Server
+        working-directory: server
+        run: make install-utils build
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Run E2E tests
+        run: pnpm test:e2e
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report-e2e
           path: playwright-report/
           retention-days: 30

.github/workflows/semgrep.yml

@@ -0,0 +1,25 @@
+name: Semgrep
+on:
+  workflow_dispatch: {}
+  pull_request: {}
+  push:
+    branches:
+      - main
+      - master
+    paths:
+      - .github/workflows/semgrep.yml
+  schedule:
+    # random HH:MM to avoid a load spike on GitHub Actions at 00:00
+    - cron: '15 21 * * *'
+jobs:
+  semgrep:
+    name: semgrep/ci
+    runs-on: ubuntu-20.04
+    env:
+      SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }}
+    container:
+      image: returntocorp/semgrep
+    if: (github.actor != 'dependabot[bot]')
+    steps:
+      - uses: actions/checkout@v3
+      - run: semgrep ci

.gitignore

@@ -22,3 +22,4 @@ server/ui/assets
 /playwright-report/
 /playwright/.cache/
 /dist
+/audits

.prettierignore

@@ -12,3 +12,5 @@ pnpm-lock.yaml
 README.md
 playwright-report
 dist/**/*
+tests/**/storageState.json
+*.har

README.md

@@ -6,8 +6,6 @@ Temporal must be running in development.
 
 Temporal UI requires [Temporal v1.16.0](https://github.com/temporalio/temporal/releases/tag/v1.16.0) or later.
 
-## Trying it out
-
 ### Using Temporal CLI
 
 You can install [Temporal CLI][] using [Homebrew][]:
@@ -27,19 +25,16 @@ You can access the UI by visiting `http://localhost:8233`. OpenAPI is accessible
 [temporal cli]: https://github.com/temporalio/cli
 [homebrew]: https://brew.sh
 
-### Using Docker
-
-After pulling down the lastest version of Temporal's [`docker-compose`](https://github.com/temporalio/docker-compose), you can access the UI by visiting `http://localhost:8080`.
+## Development
 
-## Trying it out: Bleeding edge
+### Local Development
 
-If you want to use the most recent commit to `main`, you can spin up a bleeding-edge build as described below.
+#### Setup
 
 Once you have the prerequisites going, run the following:
 
 ```bash
 pnpm install
-pnpm start
 ```
 
 Running `pnpm install` will attempt to download and install the most recent version of [Temporal CLI][] into `./bin/cli/temporal`. The development server will attempt to use use this version of this Temporal when starting up.
@@ -48,52 +43,78 @@ Running `pnpm install` will attempt to download and install the most recent vers
 - If you do not have a version of Temporal CLI at `./bin/cli/temporal`, the development server will look for a version of Temporal CLI in your path.
 - For Windows users, you will need to start Temporal using one of the methods listed above until we have sufficiently tested this functionality on Windows. (We would absolutely welcome a pull request.)
 
-### Using Docker
+```bash
+git submodule update
+```
+
+This clones the [Temporal API Protos](https://github.com/temporalio/api) into the git submodule, which is required for local development of the UI when running against a local version of the UI server.
+
+```bash
+cd server/
+make install-utils
+```
+
+This installs various Go dependencies which are required for compiling the gRPC protos for running a local version of the UI server.
 
-If you're running the development version of the UI and you want to point it at the `docker-compose` version of Temporal, you can run this command:
 
+To run a local development version of the Svelte application via Vite, run `pnpm dev`. The application will run on [http://localhost:3000]() against a local ui-server running along with Temporal server from the temporal-cli.
+
+```bash
+pnpm dev
 ```
-pnpn run build:docker
-pnpn run preview:docker
+
+Alternatively, you can run `pnpm dev:temporal-cli` to run against the version of ui-server and Temporal server included temporal-cli.
+```bash
+pnpm dev:temporal-cli
 ```
 
-## Developing
+### Building the UI
+
+The Temporal UI can be built for local preview. You must set the `VITE_TEMPORAL_UI_BUILD_TARGET` environment variable in order to build the assets. This will be set for you if you use either of the following `pnpm` scripts. The resulting assets will be placed in `./dist`.
+
+> You can preview the built app with `pnpm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
 
-Developing the UI has the same prequisites as trying it out. Once you've created a project and installed dependencies with `pnpm install`, start the development server:
 
 ```bash
-pnpm start
+pnpm build:local
 ```
 
-and open [`localhost:3000`](http://localhost:3000).
 
-By default, the application will start up with a version of the UI for the local version of Temporal. You can start the UI for Temporal Cloud by setting the `VITE_TEMPORAL_UI_BUILD_TARGET` target to `cloud`. Alternatively, you can use either of the following scripts:
+The Temporal UI can build assets for ui-server. The resulting assets will be placed in `./server/ui/assets`.
 
 ```bash
-pnpm run dev:local
-pnpm run dev:cloud
+pnpm build:server
 ```
 
 ### Using Docker
 
+After pulling down the lastest version of Temporal's [`docker-compose`](https://github.com/temporalio/docker-compose), you can access the UI by visiting `http://localhost:8080`.
+
 If you want to point the development environment at the `docker-compose` version of Temporal, you can use the following command:
 
+```bash
+pnpm dev:docker
 ```
-pnpm run dev:docker
+
+```bash
+pnpn run build:docker
+pnpn run preview:docker
 ```
 
-## Building
+## Testing
+We use [Playwright](https://playwright.dev) to interactively test the Temporal UI.
 
-The Temporal UI _must_ be built for either the local version or Temporal Cloud. You must set the `VITE_TEMPORAL_UI_BUILD_TARGET` environment variable in order to build the assets. This will be set for you if you use either of the following `pnpm` scripts.
+### Running the E2E tests
+The e2e tests run against the UI with workflows via the [TypeScript SDK](https://github.com/temporalio/sdk-typescript), a locally built version of the UI Server, a NodeJS/Express Codec Server, and a Temporal dev server via [Temporal CLI](https://github.com/temporalio/cli)
 
-```bash
-pnpm run build:local
-pnpm run build:cloud
-```
+`pnpm test:e2e`
 
-The resulting assets will be placed in `./build`.
+### Running the Integration tests
+The integration tests run against the UI using Mocks
 
-> You can preview the built app with `pnpm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+`pnpm test:integration`
+
+Both `pnpm test:e2e` and `pnpm test:integration` use the `playwright.config.ts` at the root of the repo. This file will [run the UI via the vite development server](https://playwright.dev/docs/api/class-testconfig#test-config-web-server) with the correct configuration by running either `pnpm serve:playwright:e2e` or `pnpm serve:playwright:integration`. It will also invoke the default function in `tests/globalSetup.ts`, which instantiates all of the necessary dependencies (UI Server, Codec Server, Temporal Server, Temporl Workers, etc.) when running in e2e mode.
 
 ## Configuration