12869085634

Committed 20 Jan 2025 01:28PM UTC coverage: 66.288% (-1.7%) from 67.945%

Build # 12869085634

Build Type

Pull #130

github

Committed by

web-flow

Commit Message

Merge d610a1ad3 into 987b3eeee

Pull Request Pull Request #130: feat: enable toggle workspace, invalidate on workspace update

Run Details

252 of 463 branches covered (54.43%)

Branch coverage included in aggregate %.

12 of 38 new or added lines in 7 files covered. (31.58%)

5 existing lines in 1 file now uncovered.

507 of 682 relevant lines covered (74.34%)

54.66 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

53.13

/src/features/workspace/components/workspaces-selection.tsx

import { useListWorkspaces } from "@/features/workspace/hooks/use-list-workspaces";
import {
  Button,
  DialogTrigger,
  Input,
  LinkButton,
  ListBox,
  ListBoxItem,
  Popover,
  SearchField,
  Separator,
} from "@stacklok/ui-kit";
import { useQueryClient } from "@tanstack/react-query";
import { ChevronDown, Search, Settings } from "lucide-react";
import { useState } from "react";
import { useActiveWorkspaces } from "../hooks/use-active-workspaces";
import { useActivateWorkspace } from "../hooks/use-activate-workspace";

export function WorkspacesSelection() {
  const queryClient = useQueryClient();

  const { data: workspacesResponse } = useListWorkspaces();
  const { data: activeWorkspacesResponse } = useActiveWorkspaces();
  const { mutateAsync: activateWorkspace } = useActivateWorkspace();

  const activeWorkspaceName: string | null =
    activeWorkspacesResponse?.workspaces[0]?.name ?? null;

  const [isOpen, setIsOpen] = useState(false);
  const [searchWorkspace, setSearchWorkspace] = useState("");
  const workspaces = workspacesResponse?.workspaces ?? [];
  const filteredWorkspaces = workspaces.filter((workspace) =>
    workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase()),
  );

  const handleWorkspaceClick = (name: string) => {
    activateWorkspace({ body: { name } }).then(() => {
      queryClient.invalidateQueries({ refetchType: "all" });
      setIsOpen(false);
    });
  };

  return (
    <DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>
      <Button variant="tertiary" className="flex cursor-pointer">
        Workspace {activeWorkspaceName ?? "default"}
        <ChevronDown />
      </Button>

      <Popover className="w-1/4 p-4" placement="bottom left">
        <div>
          <div>
            <SearchField
              onChange={setSearchWorkspace}
              autoFocus
              aria-label="search"
            >
              <Input icon={<Search />} />
            </SearchField>
          </div>

          <ListBox
            className="pb-2 pt-3"
            aria-label="Workspaces"
            items={filteredWorkspaces}
            selectedKeys={activeWorkspaceName ? [activeWorkspaceName] : []}
            selectionMode="single"
            onSelectionChange={(v) => {
              if (v === "all") return; // Not possible with `selectionMode="single"`
              const [key] = v.keys();
              if (!key) return;
              handleWorkspaceClick(key?.toString());
            }}
            renderEmptyState={() => (
              <p className="text-center">No workspaces found</p>
            )}
          >
            {(item) => (
              <ListBoxItem id={item.name} key={item.name}>
                {item.name}
              </ListBoxItem>
            )}
          </ListBox>
          <Separator className="" />
          <LinkButton
            href="/workspaces"
            onPress={() => setIsOpen(false)}
            variant="tertiary"
            className="text-secondary h-8 pl-2 gap-2 flex mt-2 justify-start"
          >
            <Settings />
            Manage Workspaces
          </LinkButton>
        </div>
      </Popover>
    </DialogTrigger>
  );
}

1	import { useListWorkspaces } from "@/features/workspace/hooks/use-list-workspaces";
2	import {
3	Button,
4	DialogTrigger,
5	Input,
6	LinkButton,
7	ListBox,
8	ListBoxItem,
9	Popover,
10	SearchField,
11	Separator,
12	} from "@stacklok/ui-kit";
13	import { useQueryClient } from "@tanstack/react-query";
14	import { ChevronDown, Search, Settings } from "lucide-react";
15	import { useState } from "react";
16	import { useActiveWorkspaces } from "../hooks/use-active-workspaces";
17	import { useActivateWorkspace } from "../hooks/use-activate-workspace";
18
19	export function WorkspacesSelection() {
20	const queryClient = useQueryClient();	4✔
21
22	const { data: workspacesResponse } = useListWorkspaces();	4✔
23	const { data: activeWorkspacesResponse } = useActiveWorkspaces();	4✔
24	const { mutateAsync: activateWorkspace } = useActivateWorkspace();	4✔
25
26	const activeWorkspaceName: string \| null =
27	activeWorkspacesResponse?.workspaces[0]?.name ?? null;	4✔
28
29	const [isOpen, setIsOpen] = useState(false);	4✔
30	const [searchWorkspace, setSearchWorkspace] = useState("");	4✔
31	const workspaces = workspacesResponse?.workspaces ?? [];	4✔
32	const filteredWorkspaces = workspaces.filter((workspace) =>	4✔
UNCOV 33	workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase()),	×
34	);
35
36	const handleWorkspaceClick = (name: string) => {	4✔
NEW 37	activateWorkspace({ body: { name } }).then(() => {	×
NEW 38	queryClient.invalidateQueries({ refetchType: "all" });	×
NEW 39	setIsOpen(false);	×
40	});
41	};
42
43	return (
UNCOV 44	<DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>	×
45	<Button variant="tertiary" className="flex cursor-pointer">
46	Workspace {activeWorkspaceName ?? "default"}	8✔
47	<ChevronDown />
48	</Button>
49
50	<Popover className="w-1/4 p-4" placement="bottom left">
51	<div>
52	<div>
53	<SearchField
54	onChange={setSearchWorkspace}
55	autoFocus
56	aria-label="search"
57	>
58	<Input icon={<Search />} />
59	</SearchField>
60	</div>
61
62	<ListBox
63	className="pb-2 pt-3"
64	aria-label="Workspaces"
65	items={filteredWorkspaces}
66	selectedKeys={activeWorkspaceName ? [activeWorkspaceName] : []}	4!
67	selectionMode="single"
68	onSelectionChange={(v) => {
NEW 69	if (v === "all") return; // Not possible with `selectionMode="single"`	×
NEW 70	const [key] = v.keys();	×
NEW UNCOV 71	if (!key) return;	×
NEW UNCOV 72	handleWorkspaceClick(key?.toString());	×
73	}}
74	renderEmptyState={() => (
75	<p className="text-center">No workspaces found</p>
76	)}
77	>
78	{(item) => (
79	<ListBoxItem id={item.name} key={item.name}>
80	{item.name}
81	</ListBoxItem>
82	)}
83	</ListBox>
84	<Separator className="" />
85	<LinkButton
86	href="/workspaces"
NEW UNCOV 87	onPress={() => setIsOpen(false)}	×
88	variant="tertiary"
89	className="text-secondary h-8 pl-2 gap-2 flex mt-2 justify-start"
90	>
91	<Settings />
92	Manage Workspaces
93	</LinkButton>
94	</div>
95	</Popover>
96	</DialogTrigger>
97	);
98	}

stacklok / codegate-ui / 12869085634

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous