From 9ba9a3a4565702135f22736a6b2310fc0da1d2f1 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Wed, 25 Mar 2026 09:03:52 -0400
Subject: [PATCH] fix(e2e): wait for sidebar stacks to finish loading before
 assertions (#149)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: add license gating system with Lemon Squeezy integration

Add Community/Pro tier infrastructure:
- LicenseService singleton with Lemon Squeezy license API integration
- /api/license endpoints (GET info, POST activate/deactivate/validate)
- 14-day Pro trial activated automatically on first boot
- 72-hour periodic validation with 30-day offline grace period
- LicenseContext provider for frontend tier awareness
- License settings tab with activation UI and status display
- ProBadge and ProGate reusable components for feature gating
- requirePro per-route guard for backend Pro-only endpoints
- Proxy bypass for /api/license routes (local-only, never proxied)

* feat: add user profile dropdown and reorganize top navigation

- Create UserProfileDropdown component with settings, billing, theme
  toggle (System/Light/Dark), documentation links, and logout button
- Remove logout button from sidebar header
- Remove standalone settings button from top bar
- Move theme toggle from Settings modal to profile dropdown
- Inject app version via Vite define from root package.json
- Add globals.d.ts for __APP_VERSION__ type declaration

* refactor(settings): remove appearance tab from settings modal

Theme toggle was moved to the User Profile Dropdown in the previous
commit. Remove the now-redundant Appearance section, its nav button,
and the unused theme/setTheme props from SettingsModal.

* feat: add fleet view dashboard and about settings section

Fleet Overview: aggregates all nodes into a card grid showing status,
container counts, CPU/RAM/disk usage bars. Pro tier unlocks stack
drill-down with auto-refresh (30s). Backend endpoints /api/fleet/overview
and /api/fleet/node/:nodeId/stacks query nodes in parallel.

About section in Settings: displays version, license tier, status,
instance ID, and links to docs/changelog/issues.

Sidebar perf fix: stack status fetches now run in parallel via
Promise.allSettled instead of sequential for-loop, significantly
reducing load time for nodes with many stacks.

Also removes version number from User Profile Dropdown (now in About).

* fix(ci): resolve Docker build and E2E test failures

- Copy root package.json into frontend build stage so vite.config.ts
  can read the app version during Docker multi-stage build.
- Update auth E2E test: logout button moved into User Profile Dropdown.
- Update nodes E2E test: Settings button moved into User Profile Dropdown.

* fix(e2e): wait for sidebar stacks to finish loading before assertions

The create-stack test raced against the async refreshStacks() fetch —
the "Create Stack" button renders immediately but the stack list is
still loading. Added data-stacks-loaded attribute to the CommandList
so E2E tests can reliably wait for the fetch to complete.
---
 e2e/stacks.spec.ts                       | 5 ++++-
 frontend/src/components/EditorLayout.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/e2e/stacks.spec.ts b/e2e/stacks.spec.ts
index c9a55fc6..f37a6eb5 100644
--- a/e2e/stacks.spec.ts
+++ b/e2e/stacks.spec.ts
@@ -6,9 +6,12 @@ import { loginAs } from './helpers';
 
 const TEST_STACK = 'e2e-test-stack';
 
-/** Wait for the stacks sidebar to be ready (Create Stack button is always rendered). */
+/** Wait for the stacks sidebar to finish loading (skeletons replaced with actual stack list). */
 async function waitForStacksLoaded(page: import('@playwright/test').Page) {
   await expect(page.getByRole('button', { name: 'Create Stack' })).toBeVisible({ timeout: 15_000 });
+  // The CommandList has data-stacks-loaded="true" once the async refreshStacks() completes.
+  // Without this, tests can race against the loading state and miss newly created stacks.
+  await expect(page.locator('[data-stacks-loaded="true"]')).toBeAttached({ timeout: 15_000 });
 }
 
 /** Delete the test stack via the browser's authenticated fetch (so cookies are included). */
diff --git a/frontend/src/components/EditorLayout.tsx b/frontend/src/components/EditorLayout.tsx
index 2dcd357c..aaa62b73 100644
--- a/frontend/src/components/EditorLayout.tsx
+++ b/frontend/src/components/EditorLayout.tsx
@@ -1009,7 +1009,7 @@ export default function EditorLayout() {
           </div>
           <h3 className="text-sm font-semibold text-muted-foreground px-4 py-2 mt-2 flex-none">STACKS</h3>
           <ScrollArea className="flex-1 px-2 pb-2">
-            <CommandList className="max-h-none overflow-visible">
+            <CommandList className="max-h-none overflow-visible" data-stacks-loaded={!isLoading}>
               {isLoading ? (
                 <div className="space-y-2 px-2 mt-2">
                   <Skeleton className="h-12 w-full" />