frontend perf: first try (#1664)

* frontend: remove run-desktop-mainnet

* fix package test script

* fix(perf): increase refetchItervals

* move devtools script to the end of HTML

* remove playwright dep from unnecesary package

* fix frontend tests + add chevron to connect site onboarding step

* change queryClient default networkMode

* add @mintter/ui to paths in app

* add smoke test script

* adding timeouts back

* reorganize root+main components

* remove mintter/ui from tsconfig paths

* React.memo to all list items

* decrease daemon getInfo call to 10s

* upload testing artifacts

* fix test in ci

* change test report path

.github/workflows/desktop-smoke-test.yml

@@ -0,0 +1,116 @@
+name: Desktop app Smoke test
+
+permissions:
+  contents: write
+
+on:
+  #   schedule:
+  #     - cron: "0 8 * * *"
+  push:
+    branches:
+      - app-perf
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  AWS_REGION: us-east-1
+
+jobs:
+  build-binaries:
+    timeout-minutes: 60
+    name: Build ${{ matrix.config.os }} @ ${{ matrix.config.arch }}
+    runs-on: ${{ matrix.config.os }}
+    # if: startsWith(github.ref, 'refs/tags/')
+    strategy:
+      matrix:
+        config:
+          - os: macos-latest
+            arch: x64
+            goarch: amd64
+            daemon_name: x86_64-apple-darwin
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - uses: ./.github/actions/ci-setup
+        with:
+          matrix-os: ${{ matrix.config.os }}
+          # matrix-target: ${{ matrix.config.daemon_name }}
+          # matrix-arch: ${{ matrix.config.arch }}
+
+      - name: Build Backend (Unix)
+        if: matrix.config.os != 'windows-latest-l'
+        run: |
+          mkdir -p plz-out/bin/backend
+          go build -o plz-out/bin/backend/mintterd-${{ matrix.config.daemon_name }} ./backend/cmd/mintterd
+        env:
+          GOARCH: ${{ matrix.config.goarch }}
+          CGO_ENABLED: 1
+
+      - name: Build Backend (Windows)
+        if: matrix.config.os == 'windows-latest-l'
+        run: |
+          mkdir -p plz-out/bin/backend
+          go build -o plz-out/bin/backend/mintterd-${{ matrix.config.daemon_name }}.exe ./backend/cmd/mintterd
+        env:
+          GOOS: "windows"
+          GOARCH: ${{ matrix.config.goarch }}
+          CGO_ENABLED: 1
+
+      - name: Set temporal version in package.json
+        run: |
+          node scripts/set-desktop-version.mjs
+        env:
+          VITE_VERSION: "100.10.1"
+
+      - name: Build, package & make (Unix)
+        if: matrix.config.os != 'windows-latest-l'
+        run: |
+          yarn desktop:make --arch=${{ matrix.config.arch }}
+        env:
+          NODE_ENV: test
+          NODE_OPTIONS: --max_old_space_size=4096
+          DAEMON_NAME: ${{ matrix.config.daemon_name }}
+          VITE_VERSION: "100.10.1"
+          # VITE_VERSION: "0.0.100"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          timeout-minutes: 10
+          SMOKE_TEST: "1"
+          VITE_DESKTOP_P2P_PORT: "58000"
+          VITE_DESKTOP_HTTP_PORT: "58001"
+          VITE_DESKTOP_GRPC_PORT: "58002"
+          VITE_DESKTOP_APPDATA: "Mintter"
+          VITE_DESKTOP_HOSTNAME: "http://localhost"
+          VITE_DESKTOP_SENTRY_DSN: "${{ secrets.DESKTOP_SENTRY_DSN }}"
+
+      - name: Build, package and make (Win32)
+        if: matrix.config.os == 'windows-latest-l'
+        run: |
+          yarn desktop:make --arch=${{ matrix.config.arch }}
+        env:
+          NODE_ENV: test
+          NODE_OPTIONS: --max_old_space_size=4096
+          DAEMON_NAME: "${{ matrix.config.daemon_name }}.exe"
+          VITE_VERSION: "100.10.1"
+          SMOKE_TEST: "1"
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+          timeout-minutes: 10
+          VITE_DESKTOP_P2P_PORT: "58000"
+          VITE_DESKTOP_HTTP_PORT: "58001"
+          VITE_DESKTOP_GRPC_PORT: "58002"
+          VITE_DESKTOP_APPDATA: "Mintter"
+          VITE_DESKTOP_HOSTNAME: "http://localhost"
+          VITE_DESKTOP_SENTRY_DSN: "${{ secrets.DESKTOP_SENTRY_DSN }}"
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: yarn desktop:test:only
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: frontend/apps/desktop/playwright-report/
+          retention-days: 30

dev

@@ -87,23 +87,6 @@ def main():
 
         return run("yarn desktop", args=args)
 
-    @cmd(
-        cmds,
-        "run-desktop-mainnet",
-        "Run frontend desktop app for development in Mainnet.",
-    )
-    def run_desktop_mainnet(args):
-        run("./scripts/cleanup-desktop.sh")
-        run("yarn install")
-        run("yarn workspace @mintter/ui generate")
-        run("plz build //backend:mintterd //:yarn")
-
-        testnet_var = "MINTTER_P2P_TESTNET_NAME"
-        if testnet_var not in os.environ:
-            os.environ[testnet_var] = "dev"
-
-        return run("MINTTER_P2P_TESTNET_NAME='' yarn desktop", args=args)
-
     @cmd(cmds, "build-desktop", "Builds the desktop app for the current platform.")
     def build_desktop(args):
         run("./scripts/cleanup-frontend.sh")

frontend/apps/desktop/index.html

@@ -3,14 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <title>Mintter App</title>
-    <!-- REACT DEVTOOLS -->
-    <script src="http://localhost:8097"></script>
+
   </head>
   <body>
     <div id="root"></div>
     <script>
       global = globalThis
     </script>
     <script type="module" src="/src/renderer.ts"></script>
+    <!-- REACT DEVTOOLS -->
+    <script src="http://localhost:8097"></script>
   </body>
 </html>

frontend/apps/desktop/package.json

@@ -23,7 +23,7 @@
     "devtools": "react-devtools",
     "test": "NODE_ENV=test yarn package:test && yarn e2e",
     "test:only": "NODE_ENV=test yarn e2e",
-    "package:test": "NODE_ENV=test VITE_DESKTOP_P2P_PORT=5800 VITE_DESKTOP_HTTP_PORT=58001 VITE_DESKTOP_GRPC_PORT=58002 VITE_DESKTOP_APPDATA=appData.test.local NODE_ENV=test yarn package",
+    "package:test": "NODE_ENV=test VITE_DESKTOP_P2P_PORT=5800 VITE_DESKTOP_HTTP_PORT=58001 VITE_DESKTOP_GRPC_PORT=58002 VITE_DESKTOP_APPDATA=appData.test.local yarn package",
     "e2e": "NODE_ENV=test npx playwright test --project=e2e",
     "e2e:debug": "NODE_ENV=test PWDEBUG=1 yarn e2e",
     "e2e:report": "NODE_ENV=test npx playwright show-report"

frontend/apps/desktop/playwright.config.ts

@@ -3,7 +3,6 @@ import type {PlaywrightTestConfig} from '@playwright/test'
 
 const config: PlaywrightTestConfig = {
   testDir: 'tests',
-  outputDir: 'test-results',
   // Fail the build on CI if you accidentally left test.only in the source code.
   forbidOnly: !!process.env.CI,
   snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',