webui: Update status indicators
- Remove green dot connection indicator
- Add DISCONNECTED state with red styling when connection is lost
- Update the status bar to show DISCONNECTED instead of IDLE/WORKING when disconnected
- Create demo page to preview all three status states
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: skR3m0v3Gr3nD0tD1sc0nn3ct3dR3d
Change-ID: sa2b3679b9cdcaf80k
diff --git a/webui/src/web-components/sketch-network-status.test.ts b/webui/src/web-components/sketch-network-status.test.ts
index bf0f4ba..6930910 100644
--- a/webui/src/web-components/sketch-network-status.test.ts
+++ b/webui/src/web-components/sketch-network-status.test.ts
@@ -1,33 +1,28 @@
import { test, expect } from "@sand4rt/experimental-ct-web";
import { SketchNetworkStatus } from "./sketch-network-status";
-// Test for the status indicator dot
-test("shows status indicator dot when connected", async ({ mount }) => {
+// Test that the network status component doesn't display visible content
+// since we've removed the green dot indicator
+test("network status component is not visible", async ({ mount }) => {
const component = await mount(SketchNetworkStatus, {
props: {
connection: "connected",
},
});
- // The status container and indicator should be visible
- await expect(component.locator(".status-container")).toBeVisible();
- await expect(component.locator(".status-indicator")).toBeVisible();
- await expect(component.locator(".status-indicator")).toHaveClass(/connected/);
+ // The status container should exist but be hidden with display: none
+ await expect(component.locator(".status-container")).toHaveCSS("display", "none");
});
-// Test that tooltip shows error message when provided
-test("includes error in tooltip when provided", async ({ mount }) => {
- const errorMsg = "Connection error";
+// Test that the network status component remains invisible regardless of connection state
+test("network status component is not visible when disconnected", async ({ mount }) => {
const component = await mount(SketchNetworkStatus, {
props: {
connection: "disconnected",
- error: errorMsg,
+ error: "Connection error",
},
});
- await expect(component.locator(".status-indicator")).toBeVisible();
- await expect(component.locator(".status-indicator")).toHaveAttribute(
- "title",
- "Connection status: disconnected - Connection error",
- );
+ // The status container should exist but be hidden with display: none
+ await expect(component.locator(".status-container")).toHaveCSS("display", "none");
});