Merge branch 'main' into deploy_pr

# Conflicts:
#	client/Dockerfile
#	client/gulpfile.js
#	client/package-lock.json
#	client/package.json
#	client/src/app/index.tsx
#	client/src/app/loadAndRunWasm.ts
#	docker-compose-arm64.yml

.github/workflows/integrate.yml

@@ -26,16 +26,16 @@ jobs:
     needs: pre
     if: needs.pre.outputs.should_skip != 'true'
     runs-on: ${{ matrix.os }}
-    timeout-minutes: 30
+    timeout-minutes: 60
     strategy:
       matrix:
-        go-version: [1.19.3]
         os: [ubuntu-latest]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
         with:
           submodules: recursive
+          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Setup for running tests
         run: |
@@ -70,3 +70,9 @@ jobs:
 
       - name: Stop the containers
         run: docker compose --profile e2e down
+
+      - uses: sonarsource/sonarqube-scan-action@master
+#        if: github.ref_name == 'main' && github.event_name == 'push'
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}

.gitignore

@@ -4,4 +4,4 @@
 /client-e2e/test/files/sizes/
 dist/
 node_modules/
-wasm_exec.js
+/client/wasm/target/

.gitmodules

@@ -1,6 +1,6 @@
-[submodule "client/vendor/wormhole-william"]
-	path = client/vendor/wormhole-william
-	url = [email protected]:LeastAuthority/wormhole-william.git
 [submodule "feedback-api/feedback-api"]
 	path = feedback-api
 	url = [email protected]:LeastAuthority/feedback-api.git
+[submodule "client/vendor/magic-wormhole.rs"]
+	path = client/vendor/magic-wormhole.rs
+	url = https://github.com/magic-wormhole/magic-wormhole.rs

ARCHITECTURE.md

@@ -9,16 +9,12 @@ The folder structure looks like so:
 ```
 - client/
 - client-e2e/
-- mailbox/
-- relay/
 - docker-compose.yml
 ```
 
 The codebase is meant to be run on docker containers through `docker-compose`. Each top-level folder is responsible for a particular container, so there's a `docker-compose.yml` file as well as a `Dockerfile` in each folder.
 
-- `mailbox` runs the magic wormhole mailbox
-- `relay` runs the magic wormhole transit relay
-- `client` contains the code for the front-end. It uses `mailbox` and `relay` to achieve magic wormhole functionality.
+- `client` contains the code for the front-end.
 - `client-e2e` is a project using [WebdriverIO](https://webdriver.io/) and [Selenium](https://www.selenium.dev/) to run end-to-end tests for `client`.
 
 ### Selenium docker containers
@@ -43,11 +39,10 @@ The folder structure for `client` looks like this:
     - hooks
     - types
     - util
-    - wormhole
   - public
-  - worker
 - vendor
-  - wormhole-william
+  - magic-wormhole.rs
+- wasm
 ```
 
 ### `src`
@@ -56,7 +51,11 @@ The folder structure for `client` looks like this:
 
 ### `vendor`
 
-- `vendor` as of now only contains a submodule to `wormhole-william`. This is included to compile the wasm module (`wormhole.wasm`). The compilation is handled by Gulp.
+- `vendor` as of now only contains a submodule to `magic-wormhole.rs`. This is included to compile the wasm module.
+
+### `wasm`
+
+- `wasm` contains the bindings that allow us to use `magic-wormhole.rs` in the browser via webassembly.
 
 ### `src/app`
 
@@ -66,11 +65,6 @@ The react app code is located here.
 - `src/app/hooks` for React hooks.
 - `src/app/types` for type-only `.ts` files and `d.ts` files
 - `src/app/util` contain files that typically export a single pure function or several constant values. They are usually shared across multiple files
-- `src/app/wormhole` contains bridge code to interact with the webworker code located at `src/worker` (see [src/worker](#srcworker))
-
-### `src/worker`
-
-- `src/worker` contains code that compiles the webworker. The webworker is responsible for communication with the wasm module compiled from `vendor/wormhole-william/wasm` (see [vendor](#vendor))
 
 ### `src/public`
 
@@ -81,14 +75,12 @@ The react app code is located here.
 `gulp` builds the following parts of the application and outputs them to `client/dist`, which can be viewed in the browser.
 
 - the react app (`src/app`)
-- the webworker (`src/worker`)
-- the wasm module (`vendor/wormhole-william/wasm`)
+- the wasm module (`wasm` and `src/vendor/magic-wormhole.rs`)
 - the static assets (`src/public`)
 
 ### Gulp task overview
 
-- `gulp javascript` builds the react app to `dist/app`. The code is bundled by Webpack.
-- `gulp worker` builds the webworker to `dist/worker`. The code is bundled by Webpack.
+- `gulp javascript` builds the react app to `dist/app`. This includes the wasm module. The code is bundled by Webpack.
 - `gulp public` copies the files in `src/public` to `dist`.
 - `gulp` (the default task) will compile all parts at once.
 - `gulp watch` will run a development server at `localhost:8080` that serves the `dist/` folder, as well as recompile on any file changes. [gulp-connect](https://github.com/avevlad/gulp-connect) is used so that the browser will automatically refresh the page on file change. This is the default command when starting the `client` container.

README.md

@@ -75,7 +75,9 @@ docker compose logs -f
 ```
 
 #### Email from Feedback API
+
 We use a dummy SMTP server to log emails sent from `feedback-api`. To view the emails, run the following command:
+
 ```sh
 docker compose logs -f dummy-smtp-server
 ```
@@ -97,7 +99,7 @@ docker compose run -p 6006:6006 client npm run storybook
 Winden uses [prettier](https://prettier.io/) for code formatting. When code is pushed to this repo, a git hook will run to verify that the code is formatted. The push will be rejected if the check fails. In order to successfully push, format the code with the following command:
 
 ```
-docker-compose run client npm run format
+docker compose run client npm run format
 ```
 
 ## Testing
@@ -121,22 +123,19 @@ docker compose run client npm run test
 docker compose run client npm run test -- --watch
 
 # or run individual tests
-docker compose run client npm run test -- -i client/src/worker/tests/streaming.test.ts
+docker compose run client npm run test -- client/src/app/components/CodeInput.test.tsx
 ```
 
 Run the end-to-end tests with the following
 
 ```sh
 # Run the tests. This would also start the selenium hub if it's not running yet.
-docker-compose run --rm client-e2e
+docker compose -f docker-compose.yml -f docker-compose.e2e.yml run --rm client-e2e
+# If running on ARM64, you must use the e2e-arm64 override instead.
+docker compose -f docker-compose.yml -f docker-compose.e2e-arm64.yml run --rm client-e2e
 
 # Once you're done working with the e2e tests, stop the containers running the selenium hub.
-docker-compose --profile e2e down
-```
-
-*Note*: Run on ARM64 system, use different compose file:
-```sh
-docker compose -f docker-compose-arm64.yml run --rm client-e2e 
+docker compose --profile e2e down
 ```
 
 ### Debugging end-to-end tests
@@ -189,7 +188,7 @@ NODE_ENV=production # or `development` if deploying to playground
 Now you can deploy by running the following:
 
 ```sh
-docker-compose run client gulp deploy
+docker compose run client gulp deploy
 ```
 
 Note that this gulp task will also create a new [build](#building) of the app.

client-e2e/images/Dockerfile.chrome-arm64

@@ -1,4 +1,3 @@
-# specific image to run chromium on M1 chip machines
-FROM seleniarm/node-chromium
+FROM seleniarm/node-chromium:latest
 RUN mkdir /home/seluser/downloads && chown 1200:1201 /home/seluser/downloads
 CMD ["/opt/bin/entry_point.sh"]

client-e2e/images/Dockerfile.firefox-arm64

@@ -1,3 +1,3 @@
-FROM seleniarm/node-firefox
+FROM seleniarm/node-firefox:latest
 RUN mkdir /home/seluser/downloads && chown 1200:1201 /home/seluser/downloads
 CMD ["/opt/bin/entry_point.sh"]

client-e2e/test/specs/feedback.ts

@@ -2,7 +2,7 @@ import * as Page from "../pageobjects/page";
 
 describe("Sending feedback", () => {
   describe("when all forms are empty", () => {
-    it.only("will give a validation error", async () => {
+    it("will give a validation error", async () => {
       await Page.open();
       const feedbackLink = await $('a[href="/feedback"]');
       await feedbackLink.click();

client/.prettierignore

@@ -1,5 +1,4 @@
 dist
 node_modules
 src/public
-vendor
-wasm_exec.js
+vendor

client/Dockerfile

@@ -2,17 +2,22 @@ FROM node:lts-alpine
 
 WORKDIR /usr/src/app/client
 
-RUN apk add bash git openssh lftp
+RUN apk add git openssh lftp curl rust
 
-RUN npm install --global gulp-cli
-RUN npm install --global prettier
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+ENV PATH="/root/.cargo/bin:${PATH}"
+RUN curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
 
-COPY --from=golang:1.19.3-alpine /usr/local/go/ /usr/local/go/
+RUN npm install --global gulp-cli
 
-ENV PATH="/usr/local/go/bin:${PATH}"
-ENV GOROOT="/usr/local/go"
+RUN npm install --location=global @sentry/cli
+ENV SENTRYCLI_SKIP_DOWNLOAD=1
 
-ADD start-gulp.sh .
+COPY package.json .
+COPY package-lock.json .
+ARG SENTRYCLI_USE_LOCAL=1
+RUN npm install --location=global --unsafe-perm
+COPY . .
 
 CMD ./start-gulp.sh
 

client/gulpfile.js

@@ -5,11 +5,12 @@ const log = require("fancy-log");
 const connect = require("gulp-connect");
 const replace = require("gulp-replace");
 const gulpif = require("gulp-if");
-const webpack = require("webpack-stream");
+const webpackStream = require("webpack-stream");
 const Dotenv = require("dotenv-webpack");
 const fs = require("fs");
 const path = require("path");
 const proxy = require("http-proxy-middleware");
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 require("dotenv").config();
 
@@ -39,19 +40,28 @@ const webpackConfig = {
       },
     ],
   },
-  plugins: [new Dotenv()],
+  plugins: [
+    new WasmPackPlugin({
+      crateDirectory: path.resolve(__dirname, "./wasm"),
+      outDir: path.resolve(__dirname, "./pkg"),
+    }),
+    new Dotenv(),
+  ],
   optimization: {
     minimize: process.env.NODE_ENV === "production",
   },
+  experiments: {
+    asyncWebAssembly: true,
+  },
 };
 
 const javascript = () =>
   gulp
     .src(`src/app/index.tsx`)
     .pipe(
-      webpack({
+      webpackStream({
         ...webpackConfig,
-        entry: ["web-streams-polyfill", `./src/app/index.tsx`],
+        entry: ["web-streams-polyfill/ponyfill", `./src/app/index.tsx`],
       })
     )
     .pipe(gulp.dest("dist/app"));
@@ -60,25 +70,18 @@ const javascriptWatch = () =>
   gulp
     .src(`src/app/index.tsx`)
     .pipe(
-      webpack({
+      webpackStream({
         ...webpackConfig,
         watch: true,
-        entry: ["web-streams-polyfill", `./src/app/index.tsx`],
+        entry: ["web-streams-polyfill/ponyfill", `./src/app/index.tsx`],
       })
     )
     .pipe(gulp.dest("dist/app"))
     .pipe(connect.reload());
 
-const prepWorker = (cb) => {
-  // cp wasm_exec.js to be glued
-  execSync('cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" src/app');
-  cb();
-};
-
 const storybook = () => exec("npm run build-storybook");
 
-const publicClean = () =>
-  del(["dist/*", "!dist/app", "!dist/storybook", "!dist/wormhole.wasm"]);
+const publicClean = () => del(["dist/*", "!dist/app", "!dist/storybook"]);
 const publicCopy = () =>
   gulp
     .src("src/public/**/*", { dot: true })
@@ -114,33 +117,6 @@ const public = gulp.series(
   allowRobots
 );
 
-// Set agent version in go library to identify as web app client
-const setWasmVersion = async () => {
-  gulp
-    .src(["vendor/wormhole-william/version/version.go"])
-    .pipe(
-      replace(new RegExp(`AgentString = "(.*)"`), 'AgentString = "winden.app"')
-    )
-    .pipe(
-      replace(
-        new RegExp(`AgentVersion = "(.*)"`),
-        'AgentVersion = "' + package.version + '"'
-      )
-    )
-    .pipe(gulp.dest("vendor/wormhole-william/version/"));
-};
-
-// added -buildvcs=false as it fails to build on Github actions with error obtaining VCS status: exit status 128
-const wasmBuild = () =>
-  exec(
-    "cd vendor/wormhole-william && GOOS=js GOARCH=wasm go build  -buildvcs=false -o ../../dist/wormhole.wasm ./wasm/module"
-  );
-// exec doesn't return a stream, but we need a non-empty stream to be able to reload.
-// so we build a stream using gulpfile.js
-const wasmReload = () => gulp.src("gulpfile.js").pipe(connect.reload());
-
-const wasm = gulp.series(wasmBuild, wasmReload);
-
 const start = () => {
   connect.server({
     host: "0.0.0.0",
@@ -165,7 +141,6 @@ const watch = () => {
     javascriptWatch
   );
   gulp.watch("src/public/**/*", { ignoreInitial: false }, public);
-  gulp.watch("vendor/wormhole-william/**/*.go", { ignoreInitial: false }, wasm);
   start();
 };
 
@@ -200,21 +175,19 @@ const deploySftp = (cb) => {
 
 exports.javascript = javascript;
 exports.public = public;
-exports.wasm = wasm;
 exports.storybook = storybook;
-exports.watch = gulp.series(prepWorker, watch);
+exports.watch = gulp.series(watch);
 // for CI optimization without watch
 exports.start = start;
 exports.clean = clean;
-exports.prepWorker = prepWorker;
 
-exports.default = gulp.series(
-  prepWorker,
+exports.deploy = gulp.series(
   public,
   javascript,
-  setWasmVersion,
-  wasm
-  //storybook
+  // storybook,
+  deploySftp
 );
 
+exports.default = gulp.series(public, javascript, storybook);
+
 exports.deploy = gulp.series(exports.default, deploySftp);

client/jest.config.js

@@ -6,4 +6,5 @@ module.exports = {
   moduleNameMapper: {
     "\\.css$": "<rootDir>/jest-style-mock.js",
   },
+  testResultsProcessor: "jest-sonar-reporter",
 };