12865906889

Committed 20 Jan 2025 10:23AM UTC coverage: 64.986% (+0.9%) from 64.112%

Build # 12865906889

Build Type

push

github

Committed by

web-flow

Commit Message

feat(workspace): add dropdown (#123)

* feat(workspace): add workspace dropdown selection

* fix: invalidate cache should be called only for alerts event

* fix: sse api path

* fix: close dialog

* fix: mock workspaces api

Run Details

236 of 438 branches covered (53.88%)

Branch coverage included in aggregate %.

10 of 16 new or added lines in 3 files covered. (62.5%)

473 of 653 relevant lines covered (72.43%)

55.74 hits per line

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

70.0

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

import { useWorkspacesData } from "@/hooks/useWorkspacesData";
import {
  Button,
  DialogTrigger,
  Input,
  ListBox,
  ListBoxItem,
  Popover,
  SearchField,
  Separator,
} from "@stacklok/ui-kit";
import { useQueryClient } from "@tanstack/react-query";
import clsx from "clsx";
import { ChevronDown, Search, Settings } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";

export function WorkspacesSelection() {
  const queryClient = useQueryClient();
  const { data } = useWorkspacesData();
  const [isOpen, setIsOpen] = useState(false);
  const [searchWorkspace, setSearchWorkspace] = useState("");
  const workspaces = data?.workspaces ?? [];
  const filteredWorkspaces = workspaces.filter((workspace) =>
    workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase()),
  );
  const activeWorkspace = workspaces.find((workspace) => workspace.is_active);

  const handleWorkspaceClick = () => {
    queryClient.invalidateQueries({ refetchType: "all" });
    setIsOpen(false);
  };

  return (
    <DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>
      <Button variant="tertiary" className="flex cursor-pointer">
        Workspace {activeWorkspace?.name ?? "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={activeWorkspace?.name ?? []}
            renderEmptyState={() => (
              <p className="text-center">No workspaces found</p>
            )}
          >
            {(item) => (
              <ListBoxItem
                id={item.name}
                onAction={() => handleWorkspaceClick()}
                className={clsx(
                  "cursor-pointer py-2 m-1 text-base hover:bg-gray-300",
                  {
                    "bg-gray-900 text-white hover:text-secondary":
                      item.is_active,
                  },
                )}
                key={item.name}
              >
                {item.name}
              </ListBoxItem>
            )}
          </ListBox>
          <Separator className="" />
          <Link
            to="/workspaces"
            onClick={() => setIsOpen(false)}
            className="text-secondary pt-3 px-2 gap-2 flex"
          >
            <Settings />
            Manage Workspaces
          </Link>
        </div>
      </Popover>
    </DialogTrigger>
  );
}

1	import { useWorkspacesData } from "@/hooks/useWorkspacesData";
2	import {
3	Button,
4	DialogTrigger,
5	Input,
6	ListBox,
7	ListBoxItem,
8	Popover,
9	SearchField,
10	Separator,
11	} from "@stacklok/ui-kit";
12	import { useQueryClient } from "@tanstack/react-query";
13	import clsx from "clsx";
14	import { ChevronDown, Search, Settings } from "lucide-react";
15	import { useState } from "react";
16	import { Link } from "react-router-dom";
17
18	export function WorkspacesSelection() {
19	const queryClient = useQueryClient();	4✔
20	const { data } = useWorkspacesData();	4✔
21	const [isOpen, setIsOpen] = useState(false);	4✔
22	const [searchWorkspace, setSearchWorkspace] = useState("");	4✔
23	const workspaces = data?.workspaces ?? [];	4✔
24	const filteredWorkspaces = workspaces.filter((workspace) =>	4✔
NEW 25	workspace.name.toLowerCase().includes(searchWorkspace.toLowerCase()),	×
26	);
27	const activeWorkspace = workspaces.find((workspace) => workspace.is_active);	4✔
28
29	const handleWorkspaceClick = () => {	4✔
NEW 30	queryClient.invalidateQueries({ refetchType: "all" });	×
NEW 31	setIsOpen(false);	×
32	};
33
34	return (
NEW 35	<DialogTrigger isOpen={isOpen} onOpenChange={(test) => setIsOpen(test)}>	×
36	<Button variant="tertiary" className="flex cursor-pointer">
37	Workspace {activeWorkspace?.name ?? "default"}	8✔
38	<ChevronDown />
39	</Button>
40
41	<Popover className="w-1/4 p-4" placement="bottom left">
42	<div>
43	<div>
44	<SearchField
45	onChange={setSearchWorkspace}
46	autoFocus
47	aria-label="search"
48	>
49	<Input icon={<Search />} />
50	</SearchField>
51	</div>
52
53	<ListBox
54	className="pb-2 pt-3"
55	aria-label="Workspaces"
56	items={filteredWorkspaces}
57	selectedKeys={activeWorkspace?.name ?? []}	8✔
58	renderEmptyState={() => (
59	<p className="text-center">No workspaces found</p>
60	)}
61	>
62	{(item) => (
63	<ListBoxItem
64	id={item.name}
NEW 65	onAction={() => handleWorkspaceClick()}	×
66	className={clsx(
67	"cursor-pointer py-2 m-1 text-base hover:bg-gray-300",
68	{
69	"bg-gray-900 text-white hover:text-secondary":
70	item.is_active,
71	},
72	)}
73	key={item.name}
74	>
75	{item.name}
76	</ListBoxItem>
77	)}
78	</ListBox>
79	<Separator className="" />
80	<Link
81	to="/workspaces"
NEW 82	onClick={() => setIsOpen(false)}	×
83	className="text-secondary pt-3 px-2 gap-2 flex"
84	>
85	<Settings />
86	Manage Workspaces
87	</Link>
88	</div>
89	</Popover>
90	</DialogTrigger>
91	);
92	}

stacklok / codegate-ui / 12865906889

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