fix(web): browse pull requests across remote servers

apps/web/src/components/pullRequest/PullRequestListFilters.test.tsx

@@ -1,4 +1,4 @@
-import type { ProjectId } from "@t3tools/contracts";
+import { EnvironmentId, type ProjectId } from "@t3tools/contracts";
 import { CircleIcon } from "lucide-react";
 import { Children, isValidElement, type ReactElement, type ReactNode } from "react";
 import { describe, expect, it, vi } from "vite-plus/test";
@@ -28,6 +28,26 @@ function findValueChange(
   return undefined;
 }
 
+function findValueChangeForValue(
+  node: ReactNode,
+  value: string,
+): ReactElement<{ readonly onValueChange: (value: string) => void }> | undefined {
+  for (const child of Children.toArray(node)) {
+    if (!isValidElement(child)) continue;
+    const props = child.props as {
+      readonly children?: ReactNode;
+      readonly value?: string;
+      readonly onValueChange?: (value: string) => void;
+    };
+    if (props.value === value && props.onValueChange) {
+      return child as ReactElement<{ readonly onValueChange: (value: string) => void }>;
+    }
+    const nested = findValueChangeForValue(props.children, value);
+    if (nested) return nested;
+  }
+  return undefined;
+}
+
 /** The nested radio-group component element carrying this label, invoked so its group shows. */
 function findLabeledGroup(node: ReactNode, label: string): ReactNode {
   for (const child of Children.toArray(node)) {
@@ -43,6 +63,7 @@ function findLabeledGroup(node: ReactNode, label: string): ReactNode {
 }
 
 function menu(overrides: Partial<Parameters<typeof PullRequestFiltersMenu>[0]>) {
+  const environmentId = EnvironmentId.make("environment-1");
   return PullRequestFiltersMenu({
     state: "open",
     stateOptions: [
@@ -56,11 +77,11 @@ function menu(overrides: Partial<Parameters<typeof PullRequestFiltersMenu>[0]>)
     host: undefined,
     hostOptions: [],
     onHost: () => undefined,
-    environmentId: null,
-    projects: [],
+    environmentId,
+    environments: [{ id: environmentId, label: "Local", isPrimary: true, projects: [] }],
     projectId: undefined,
     unavailable: new Map(),
-    onProject: () => undefined,
+    onProjectScope: () => undefined,
     ...overrides,
   });
 }
@@ -80,20 +101,67 @@ describe("pull request filters menu", () => {
   });
 
   it("does not emit a change when the selected project is chosen again", () => {
+    const environmentId = EnvironmentId.make("environment-1");
     const projectId = "project-1" as ProjectId;
-    const onProject = vi.fn();
+    const onProjectScope = vi.fn();
     const view = menu({
-      projects: [{ id: projectId, title: "T3 Code", workspaceRoot: "/work/t3code" }],
+      environmentId,
+      environments: [
+        {
+          id: environmentId,
+          label: "Local",
+          isPrimary: true,
+          projects: [{ id: projectId, title: "T3 Code", workspaceRoot: "/work/t3code" }],
+        },
+      ],
       projectId,
-      onProject,
+      onProjectScope,
     });
-    const radioGroup = findValueChange(view);
+    const radioGroup = findValueChangeForValue(view, JSON.stringify([environmentId, projectId]));
     expect(radioGroup).toBeDefined();
 
-    radioGroup?.props.onValueChange(projectId);
-    expect(onProject).not.toHaveBeenCalled();
+    radioGroup?.props.onValueChange(JSON.stringify([environmentId, projectId]));
+    expect(onProjectScope).not.toHaveBeenCalled();
+
+    radioGroup?.props.onValueChange("all-projects");
+    expect(onProjectScope).toHaveBeenLastCalledWith(environmentId, undefined);
+  });
+
+  it("selects all servers independently from the project filter", () => {
+    const environmentId = EnvironmentId.make("environment-1");
+    const onProjectScope = vi.fn();
+    const view = menu({ environmentId, onProjectScope });
+    const serverGroup = findValueChangeForValue(view, environmentId);
+
+    serverGroup?.props.onValueChange("all-environments");
+
+    expect(onProjectScope).toHaveBeenCalledWith(null, undefined);
+  });
+
+  it("selects a project together with its remote server", () => {
+    const localEnvironmentId = EnvironmentId.make("environment-1");
+    const remoteEnvironmentId = EnvironmentId.make("environment-2");
+    const remoteProjectId = "project-2" as ProjectId;
+    const onProjectScope = vi.fn();
+    const view = menu({
+      environmentId: null,
+      environments: [
+        { id: localEnvironmentId, label: "Local", isPrimary: true, projects: [] },
+        {
+          id: remoteEnvironmentId,
+          label: "Remote",
+          isPrimary: false,
+          projects: [
+            { id: remoteProjectId, title: "Remote project", workspaceRoot: "/work/remote" },
+          ],
+        },
+      ],
+      onProjectScope,
+    });
+    const projectGroup = findValueChangeForValue(view, "all-projects");
+
+    projectGroup?.props.onValueChange(JSON.stringify([remoteEnvironmentId, remoteProjectId]));
 
-    radioGroup?.props.onValueChange("all");
-    expect(onProject).toHaveBeenCalledWith(undefined);
+    expect(onProjectScope).toHaveBeenCalledWith(remoteEnvironmentId, remoteProjectId);
   });
 });