fix: remove redundant console chrome
This commit is contained in:
@@ -119,7 +119,6 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: 0.1rem;
|
gap: 0.1rem;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
margin-bottom: -0.75rem;
|
|
||||||
padding-inline: 0.75rem;
|
padding-inline: 0.75rem;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
|
|||||||
@@ -435,6 +435,34 @@ Deno.test("Worker Console exposes a foldable timeline beside the scroll body", a
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Deno.test("Worker Console removes redundant chrome and uses shared alerts", async () => {
|
||||||
|
const page = await Deno.readTextFile(
|
||||||
|
new URL(
|
||||||
|
"./../../../routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte",
|
||||||
|
import.meta.url,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
const tasks = await Deno.readTextFile(
|
||||||
|
new URL("./ConsoleTasks.svelte", import.meta.url),
|
||||||
|
);
|
||||||
|
|
||||||
|
assert(
|
||||||
|
page.includes('<form class="console-composer"') &&
|
||||||
|
!page.includes('class="console-composer card"') &&
|
||||||
|
!page.includes(
|
||||||
|
"padding: var(--space-3) var(--space-6) var(--space-4)",
|
||||||
|
) &&
|
||||||
|
page.includes('import { pushWorkspaceAlert }') &&
|
||||||
|
page.includes('title: "Worker control"') &&
|
||||||
|
page.includes('title: "Rewind targets"') &&
|
||||||
|
page.includes('pushWorkspaceAlert("error"') &&
|
||||||
|
!page.includes("controlNotice") &&
|
||||||
|
!page.includes("console-notice") &&
|
||||||
|
!tasks.includes("margin-bottom: -0.75rem"),
|
||||||
|
"Console should remove redundant card/spacing chrome and route control notices through workspace alerts",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
Deno.test("Worker Console composer fits to content without manual resize", async () => {
|
Deno.test("Worker Console composer fits to content without manual resize", async () => {
|
||||||
const consolePage = await Deno.readTextFile(
|
const consolePage = await Deno.readTextFile(
|
||||||
new URL(
|
new URL(
|
||||||
|
|||||||
+21
-18
@@ -33,6 +33,7 @@
|
|||||||
type ConsoleViewScroll,
|
type ConsoleViewScroll,
|
||||||
} from "$lib/workspace/console/model";
|
} from "$lib/workspace/console/model";
|
||||||
import type { Event as ProtocolEvent, Method as ProtocolMethod, RewindTarget, Segment } from "$lib/generated/protocol";
|
import type { Event as ProtocolEvent, Method as ProtocolMethod, RewindTarget, Segment } from "$lib/generated/protocol";
|
||||||
|
import { pushWorkspaceAlert } from "$lib/workspace/alerts/store";
|
||||||
import { workspaceApiPath } from "$lib/workspace/api/http";
|
import { workspaceApiPath } from "$lib/workspace/api/http";
|
||||||
import { workspaceMultiplexer, type WorkspaceMultiplexerSubscription } from "$lib/workspace/multiplexer";
|
import { workspaceMultiplexer, type WorkspaceMultiplexerSubscription } from "$lib/workspace/multiplexer";
|
||||||
import type {
|
import type {
|
||||||
@@ -111,7 +112,6 @@
|
|||||||
let sendError = $state<string | null>(null);
|
let sendError = $state<string | null>(null);
|
||||||
let rewindTargets = $state<RewindTarget[]>([]);
|
let rewindTargets = $state<RewindTarget[]>([]);
|
||||||
let rewindHeadEntries = $state(0);
|
let rewindHeadEntries = $state(0);
|
||||||
let controlNotice = $state<string | null>(null);
|
|
||||||
let composerNotice = $state<string | null>(null);
|
let composerNotice = $state<string | null>(null);
|
||||||
let protocolState = $state<"connecting" | "open" | "closed" | "error">(
|
let protocolState = $state<"connecting" | "open" | "closed" | "error">(
|
||||||
"connecting",
|
"connecting",
|
||||||
@@ -161,6 +161,9 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const consoleTarget = $derived({ workspaceId, runtimeId, workerId });
|
const consoleTarget = $derived({ workspaceId, runtimeId, workerId });
|
||||||
|
const controlAlertId = $derived(
|
||||||
|
`worker-console-control:${runtimeId}:${workerId}`,
|
||||||
|
);
|
||||||
|
|
||||||
const workerViews = $derived(consoleWorkerViews(consoleProjection));
|
const workerViews = $derived(consoleWorkerViews(consoleProjection));
|
||||||
const selectedWorkerView = $derived(
|
const selectedWorkerView = $derived(
|
||||||
@@ -418,10 +421,18 @@
|
|||||||
function sendControl(method: ProtocolMethod, label: string) {
|
function sendControl(method: ProtocolMethod, label: string) {
|
||||||
try {
|
try {
|
||||||
sendProtocolMethod(method);
|
sendProtocolMethod(method);
|
||||||
controlNotice = `${label} sent through Worker protocol.`;
|
pushWorkspaceAlert(
|
||||||
|
"info",
|
||||||
|
`${label} sent through Worker protocol.`,
|
||||||
|
{ id: controlAlertId, title: "Worker control" },
|
||||||
|
);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
controlNotice = null;
|
const message = error instanceof Error ? error.message : String(error);
|
||||||
sendError = error instanceof Error ? error.message : String(error);
|
sendError = message;
|
||||||
|
pushWorkspaceAlert("error", message, {
|
||||||
|
id: controlAlertId,
|
||||||
|
title: "Worker control failed",
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -674,10 +685,13 @@
|
|||||||
if (event.event === "rewind_targets") {
|
if (event.event === "rewind_targets") {
|
||||||
rewindHeadEntries = event.data.head_entries;
|
rewindHeadEntries = event.data.head_entries;
|
||||||
rewindTargets = event.data.targets;
|
rewindTargets = event.data.targets;
|
||||||
controlNotice =
|
pushWorkspaceAlert(
|
||||||
|
"info",
|
||||||
event.data.targets.length === 0
|
event.data.targets.length === 0
|
||||||
? "No rewind targets are available."
|
? "No rewind targets are available."
|
||||||
: `Loaded ${event.data.targets.length} rewind target(s).`;
|
: `Loaded ${event.data.targets.length} rewind target(s).`,
|
||||||
|
{ id: controlAlertId, title: "Rewind targets" },
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (event.event === "error") {
|
if (event.event === "error") {
|
||||||
@@ -1324,10 +1338,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if controlNotice}
|
|
||||||
<p class="console-notice">{controlNotice}</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if rewindTargets.length > 0}
|
{#if rewindTargets.length > 0}
|
||||||
<section class="card rewind-targets" aria-label="Rewind targets">
|
<section class="card rewind-targets" aria-label="Rewind targets">
|
||||||
<h3>Rewind targets</h3>
|
<h3>Rewind targets</h3>
|
||||||
@@ -1509,7 +1519,7 @@
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<form class="console-composer card" onsubmit={sendMessage}>
|
<form class="console-composer" onsubmit={sendMessage}>
|
||||||
<div class="composer-input-shell">
|
<div class="composer-input-shell">
|
||||||
<textarea
|
<textarea
|
||||||
id="worker-console-message"
|
id="worker-console-message"
|
||||||
@@ -1653,12 +1663,6 @@
|
|||||||
color: var(--bg);
|
color: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-notice {
|
|
||||||
margin: 0;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.86rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.rewind-targets {
|
.rewind-targets {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -1832,7 +1836,6 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--space-3);
|
gap: var(--space-3);
|
||||||
margin-inline: calc(-1 * var(--space-6));
|
margin-inline: calc(-1 * var(--space-6));
|
||||||
padding: var(--space-3) var(--space-6) var(--space-4);
|
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user