alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reuse existing tabs when opening sessions instead of always creating new ones

Browse Source 
Use named window targets (session-{id}, instance-{id}) instead of _blank:
- use-instance-actions.ts: window.open(..., 'session-{id}') for programmatic opens
- session-card.tsx: <a target='session-{id}'> for direct link opens (mobile + desktop)
- workspace-instance-chips.tsx: <a target='instance-{id}'> for chip links
- instance-list.tsx: <a target='instance-{id}'> for instance open links

Browser behavior: if a tab with that target name exists, it navigates/focuses
that tab instead of opening a new one.

Quality gates: tsc --noEmit pass, npm run build pass, 80/80 tests pass
This commit is contained in:
Developer
2026-06-09 11:01:40 +00:00
parent 152f87a254
commit 486f3cbc44
5 changed files with 136 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/features/project/repositories-settings-tab.test.tsx
+127 -94
View File
@@ -1,4 +1,10 @@
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { RepositoriesSettingsTab } from "./repositories-settings-tab";
@@ -6,119 +12,146 @@ import * as gitRepositoriesApi from "../../../api/git-repositories";
import * as sshKeysApi from "../../../api/ssh-keys";
const mockRepositories = [
{
id: "repo-1",
name: "Main Repo",
path: "/repos/main",
project_id: "proj-1",
owner_id: "user-1",
is_mirror: false,
remote_url: null,
last_push: null,
created_at: null,
},
{
id: "repo-1",
name: "Main Repo",
path: "/repos/main",
project_id: "proj-1",
owner_id: "user-1",
is_mirror: false,
remote_url: null,
last_push: null,
created_at: null,
},
];
vi.mock("react-router-dom", async () => {
const actual = await vi.importActual<typeof import("react-router-dom")>("react-router-dom");
return {
...actual,
useParams: () => ({ projectId: "proj-1" }),
};
const actual =
await vi.importActual<typeof import("react-router-dom")>(
"react-router-dom",
);
return {
...actual,
useParams: () => ({ projectId: "proj-1" }),
};
});
afterEach(() => {
cleanup();
vi.restoreAllMocks();
cleanup();
vi.restoreAllMocks();
});
describe("RepositoriesSettingsTab", () => {
it("opens create dialog and clones an existing repository", async () => {
const listMock = vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(mockRepositories);
const createMock = vi.spyOn(gitRepositoriesApi, "createRepository").mockResolvedValue(mockRepositories[0]);
vi.spyOn(sshKeysApi, "listSSHKeys").mockResolvedValue([
{ id: "key-1", name: "My Key", public_key: "ssh-ed25519 AAA...", created_at: "2024-01-01" },
]);
it("opens create dialog and clones an existing repository", async () => {
const listMock = vi
.spyOn(gitRepositoriesApi, "listRepositories")
.mockResolvedValue(mockRepositories);
const createMock = vi
.spyOn(gitRepositoriesApi, "createRepository")
.mockResolvedValue(mockRepositories[0]);
vi.spyOn(sshKeysApi, "listSSHKeys").mockResolvedValue([
{
id: "key-1",
name: "My Key",
public_key: "ssh-ed25519 AAA...",
created_at: "2024-01-01",
},
]);
render(<RepositoriesSettingsTab />);
render(<RepositoriesSettingsTab />);
await waitFor(() => {
expect(screen.getByText("Main Repo")).toBeInTheDocument();
});
await waitFor(() => {
expect(screen.getByText("Main Repo")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
target: { value: "New Repo" },
});
fireEvent.change(screen.getByPlaceholderText(/owner/i), {
target: { value: "alice" },
});
fireEvent.change(screen.getByPlaceholderText(/repo-name/i), {
target: { value: "demo" },
});
const sshSelect = screen.getByRole("combobox", { name: /ssh key/i });
await waitFor(() => expect(sshSelect.querySelector('option[value="key-1"]')).toBeTruthy());
(sshSelect as HTMLSelectElement).value = "key-1";
fireEvent.change(sshSelect);
fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
target: { value: "New Repo" },
});
fireEvent.change(screen.getByPlaceholderText(/owner/i), {
target: { value: "alice" },
});
fireEvent.change(screen.getByPlaceholderText(/repo-name/i), {
target: { value: "demo" },
});
const sshSelect = screen.getByRole("combobox", { name: /ssh key/i });
await waitFor(() =>
expect(sshSelect.querySelector('option[value="key-1"]')).toBeTruthy(),
);
(sshSelect as HTMLSelectElement).value = "key-1";
fireEvent.change(sshSelect);
fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
await waitFor(() => {
expect(createMock).toHaveBeenCalledWith("proj-1", {
name: "New Repo",
remote_url: "git@git.commumedia.org:alice/demo.git",
ssh_key_id: "key-1",
});
});
expect(listMock).toHaveBeenCalledTimes(2);
});
await waitFor(() => {
expect(createMock).toHaveBeenCalledWith("proj-1", {
name: "New Repo",
remote_url: "git@git.commumedia.org:alice/demo.git",
ssh_key_id: "key-1",
});
});
expect(listMock).toHaveBeenCalledTimes(2);
});
it("uses advanced url fallback when requested", async () => {
const listMock = vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(mockRepositories);
const createMock = vi.spyOn(gitRepositoriesApi, "createRepository").mockResolvedValue(mockRepositories[0]);
vi.spyOn(sshKeysApi, "listSSHKeys").mockResolvedValue([]);
it("uses advanced url fallback when requested", async () => {
const listMock = vi
.spyOn(gitRepositoriesApi, "listRepositories")
.mockResolvedValue(mockRepositories);
const createMock = vi
.spyOn(gitRepositoriesApi, "createRepository")
.mockResolvedValue(mockRepositories[0]);
vi.spyOn(sshKeysApi, "listSSHKeys").mockResolvedValue([]);
render(<RepositoriesSettingsTab />);
render(<RepositoriesSettingsTab />);
await waitFor(() => {
expect(screen.getByText("Main Repo")).toBeInTheDocument();
});
await waitFor(() => {
expect(screen.getByText("Main Repo")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
target: { value: "New Repo" },
});
fireEvent.click(screen.getByRole("button", { name: /use full url instead/i }));
fireEvent.change(screen.getByPlaceholderText(/https:\/\/github.com\/user\/repo.git/i), {
target: { value: "https://github.com/user/repo.git" },
});
fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
target: { value: "New Repo" },
});
fireEvent.click(
screen.getByRole("button", { name: /use full url instead/i }),
);
fireEvent.change(
screen.getByPlaceholderText(/https:\/\/github.com\/user\/repo.git/i),
{
target: { value: "https://github.com/user/repo.git" },
},
);
fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
await waitFor(() => {
expect(createMock).toHaveBeenCalledWith("proj-1", {
name: "New Repo",
remote_url: "https://github.com/user/repo.git",
});
});
expect(listMock).toHaveBeenCalledTimes(2);
});
await waitFor(() => {
expect(createMock).toHaveBeenCalledWith("proj-1", {
name: "New Repo",
remote_url: "https://github.com/user/repo.git",
});
});
expect(listMock).toHaveBeenCalledTimes(2);
});
it("shows validation when cloning without a remote url", async () => {
vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(mockRepositories);
render(<RepositoriesSettingsTab />);
it("shows validation when cloning without a remote url", async () => {
vi.spyOn(gitRepositoriesApi, "listRepositories").mockResolvedValue(
mockRepositories,
);
render(<RepositoriesSettingsTab />);
await waitFor(() => {
expect(screen.getByText("Main Repo")).toBeInTheDocument();
});
await waitFor(() => {
expect(screen.getByText("Main Repo")).toBeInTheDocument();
});
fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
target: { value: "New Repo" },
});
fireEvent.change(screen.getByPlaceholderText(/owner/i), {
target: { value: "" },
});
fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
fireEvent.click(screen.getByRole("button", { name: /add repository/i }));
fireEvent.change(screen.getByPlaceholderText(/repository-name/i), {
target: { value: "New Repo" },
});
fireEvent.change(screen.getByPlaceholderText(/owner/i), {
target: { value: "" },
});
fireEvent.click(screen.getByRole("button", { name: /clone repository/i }));
expect(screen.getByText(/owner and repository name are required/i)).toBeInTheDocument();
});
expect(
screen.getByText(/owner and repository name are required/i),
).toBeInTheDocument();
});
});
apps/web/src/components/features/session/session-card.tsx
+3 -3
View File
@@ -138,7 +138,7 @@ export function SessionCard({
)}
{session.url && (
<p className="session-card-url">
<a href={session.url} target="_blank" rel="noopener noreferrer">
<a href={session.url} target={`session-${session.id}`} rel="noopener noreferrer">
{session.url}
</a>
</p>
@@ -158,7 +158,7 @@ export function SessionCard({
{openHref ? (
<a
href={openHref}
target="_blank"
target={`session-${session.id}`}
rel="noopener noreferrer"
className="secondary-button mobile-primary"
>
@@ -215,7 +215,7 @@ export function SessionCard({
{openHref ? (
<a
href={openHref}
target="_blank"
target={`session-${session.id}`}
rel="noopener noreferrer"
className="secondary-button small"
>
apps/web/src/components/features/tool/instance-list.tsx
+1 -1
View File
@@ -282,7 +282,7 @@ export const InstanceList = ({
? instance.url
: `${API_BASE_URL}${instance.url}`
}
target="_blank"
target={`instance-${instance.id}`}
rel="noopener noreferrer"
className="secondary-button small"
>
apps/web/src/components/features/workspace/workspace-instance-chips.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export function WorkspaceInstanceChips({
{inst.status === "running" && inst.url && (
<a
href={inst.url}
target="_blank"
target={`instance-${inst.id}`}
rel="noopener noreferrer"
onClick={(e) => e.stopPropagation()}
>
apps/web/src/hooks/use-instance-actions.ts
+4 -3
View File
@@ -35,15 +35,16 @@ export function useInstanceActions(
const [dirtyDeleteFiles, setDirtyDeleteFiles] = useState<string[]>([]);
const handleOpen = useCallback((session: Session) => {
const tabName = `session-${session.id}`;
if (session.url) {
window.open(session.url, "_blank", "noopener,noreferrer");
window.open(session.url, tabName, "noopener,noreferrer");
return;
}
if (session.tool_type_interfaces?.includes("terminal")) {
window.open(`/instances/${session.id}/terminal`, "_blank", "noopener,noreferrer");
window.open(`/instances/${session.id}/terminal`, tabName, "noopener,noreferrer");
return;
}
window.open(`/projects/${session.project_id}`, "_blank", "noopener,noreferrer");
window.open(`/projects/${session.project_id}`, tabName, "noopener,noreferrer");
}, []);
const handleStart = useCallback(