Thanks to visit codestin.com
Credit goes to github.com

Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions site/src/modules/terminal/WorkspaceTerminal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -276,14 +276,25 @@ export const WorkspaceTerminal = ({
}, [isVisible, refit]);

useEffect(() => {
if (!terminal || !hasBeenVisible) {
if (!terminal || !isVisible || !autoFocus) {
return;
}

terminal.clear();
if (autoFocus) {
const frame = requestAnimationFrame(() => {
terminal.focus();
});

return () => {
cancelAnimationFrame(frame);
};
}, [terminal, isVisible, autoFocus]);

useEffect(() => {
if (!terminal || !hasBeenVisible) {
return;
}

terminal.clear();
terminal.options.disableStdin = true;

if (loading) {
Expand Down Expand Up @@ -454,7 +465,6 @@ export const WorkspaceTerminal = ({
}, [
hasBeenVisible,
agentId,
autoFocus,
baseUrl,
containerName,
containerUser,
Expand Down
61 changes: 61 additions & 0 deletions site/src/pages/AgentsPage/AgentChatPageView.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
withAuthProvider,
withDashboardProvider,
withProxyProvider,
withWebSocket,
} from "#/testHelpers/storybook";
import {
AgentChatPageLoadingView,
Expand Down Expand Up @@ -1208,3 +1209,63 @@ export const ScrollStableAfterEditTruncation: Story = {
).toBeNull();
},
};

/**
* Selecting the Terminal tab in the sidebar must move keyboard focus into
* the terminal so typing goes there, not the chat input.
*/
export const TerminalFocusOnTabSwitch: Story = {
parameters: {
chromatic: { disableSnapshot: true },
webSocket: { "/api/v2/workspaceagents/": [{ event: "message", data: "" }] },
},
decorators: [withWebSocket],
render: () => (
<StoryAgentChatPageView
showSidebarPanel
workspace={MockWorkspace}
workspaceAgent={MockWorkspaceAgent}
/>
),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);

// The sidebar should open on the Git tab by default.
const terminalTab = await canvas.findByRole("tab", { name: "Terminal" });

// 1. Click the Terminal tab.
await userEvent.click(terminalTab);

// Wait for the terminal container to appear.
const terminalContainer = await waitFor(() => {
const el = canvas.getByTestId("agents-sidebar-terminal");
expect(el).toBeVisible();
return el;
});

// The xterm focus target is a textarea inside the terminal container.
await waitFor(
() => {
const textarea = terminalContainer.querySelector("textarea");
expect(textarea).not.toBeNull();
expect(document.activeElement).toBe(textarea);
},
{ timeout: 3000 },
);

// 2. Switch to Git, then back to Terminal.
const gitTab = canvas.getByRole("tab", { name: "Git" });
await userEvent.click(gitTab);
await userEvent.click(terminalTab);

// Focus should return to the terminal textarea.
await waitFor(
() => {
const textarea = terminalContainer.querySelector("textarea");
expect(textarea).not.toBeNull();
expect(document.activeElement).toBe(textarea);
},
{ timeout: 3000 },
);
},
};
1 change: 0 additions & 1 deletion site/src/pages/AgentsPage/components/TerminalPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@ export const TerminalPanel: FC<TerminalPanelProps> = ({
ref={terminalRef}
agentId={workspaceAgent.id}
operatingSystem={workspaceAgent.operating_system}
autoFocus={false}
isVisible={isVisible}
onStatusChange={setConnectionStatus}
onError={handleTerminalError}
Expand Down
Loading