- Notifications
You must be signed in to change notification settings - Fork1k
chore: add tasks sidebar component#19926
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
Merged
+339 −4
Merged
Changes fromall commits
Commits
Show all changes
5 commits Select commitHold shift + click to select a range
1c0bc42 chore: add UserCombobox component for tasks sidebar
BrunoQuaresma81a8d22 chore: add tasks sidebar component
BrunoQuaresma6c06079 apply PR reviews
BrunoQuaresma3aa73a9 Merge branch 'bq/users-combobox' into bq/tasks-sidebar
BrunoQuaresmab4db699 fix conflict
BrunoQuaresmaFile filter
Filter by extension
Conversations
Failed to load comments.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Jump to
Jump to file
Failed to load files.
Loading
Uh oh!
There was an error while loading.Please reload this page.
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { MockTasks, MockUserOwner, mockApiError } from "testHelpers/entities"; | ||
| import { withAuthProvider } from "testHelpers/storybook"; | ||
| import type { Meta, StoryObj } from "@storybook/react-vite"; | ||
| import { API } from "api/api"; | ||
| import { MockUsers } from "pages/UsersPage/storybookData/users"; | ||
| import { spyOn, userEvent, within } from "storybook/test"; | ||
| import { reactRouterParameters } from "storybook-addon-remix-react-router"; | ||
| import { TasksSidebar } from "./TasksSidebar"; | ||
| const meta: Meta<typeof TasksSidebar> = { | ||
| title: "modules/tasks/TasksSidebar", | ||
| component: TasksSidebar, | ||
| decorators: [withAuthProvider], | ||
| parameters: { | ||
| user: MockUserOwner, | ||
| layout: "fullscreen", | ||
| permissions: { | ||
| viewAllUsers: true, | ||
| }, | ||
| }, | ||
| beforeEach: () => { | ||
| spyOn(API, "getUsers").mockResolvedValue({ | ||
| users: MockUsers, | ||
| count: MockUsers.length, | ||
| }); | ||
| }, | ||
| }; | ||
| export default meta; | ||
| type Story = StoryObj<typeof TasksSidebar>; | ||
| export const Loading: Story = { | ||
| beforeEach: () => { | ||
| spyOn(API.experimental, "getTasks").mockReturnValue(new Promise(() => {})); | ||
| }, | ||
| }; | ||
| export const Failed: Story = { | ||
| beforeEach: () => { | ||
| spyOn(API.experimental, "getTasks").mockRejectedValue( | ||
| mockApiError({ | ||
| message: "Failed to fetch tasks", | ||
| }), | ||
| ); | ||
| }, | ||
| }; | ||
| export const Loaded: Story = { | ||
| beforeEach: () => { | ||
| spyOn(API.experimental, "getTasks").mockResolvedValue(MockTasks); | ||
| }, | ||
| parameters: { | ||
| reactRouter: reactRouterParameters({ | ||
| location: { | ||
| pathParams: { | ||
| workspace: MockTasks[0].workspace.name, | ||
| }, | ||
| }, | ||
| routing: { path: "/tasks/:workspace" }, | ||
| }), | ||
| }, | ||
| }; | ||
| export const Empty: Story = { | ||
| beforeEach: () => { | ||
| spyOn(API.experimental, "getTasks").mockResolvedValue([]); | ||
| }, | ||
| }; | ||
| export const Closed: Story = { | ||
| beforeEach: () => { | ||
| spyOn(API.experimental, "getTasks").mockResolvedValue(MockTasks); | ||
| }, | ||
| parameters: { | ||
| reactRouter: reactRouterParameters({ | ||
| location: { | ||
| pathParams: { | ||
| workspace: MockTasks[0].workspace.name, | ||
| }, | ||
| }, | ||
| routing: { path: "/tasks/:workspace" }, | ||
| }), | ||
| }, | ||
| play: async ({ canvasElement }) => { | ||
| const canvas = within(canvasElement); | ||
| const button = canvas.getByRole("button", { name: /close sidebar/i }); | ||
| await userEvent.click(button); | ||
| }, | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,237 @@ | ||
| import { API } from "api/api"; | ||
| import { getErrorMessage } from "api/errors"; | ||
| import { cva } from "class-variance-authority"; | ||
| import { Button } from "components/Button/Button"; | ||
| import { CoderIcon } from "components/Icons/CoderIcon"; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "components/Tooltip/Tooltip"; | ||
| import { useAuthenticated } from "hooks"; | ||
| import { useSearchParamsKey } from "hooks/useSearchParamsKey"; | ||
| import { EditIcon, PanelLeftIcon } from "lucide-react"; | ||
| import type { Task } from "modules/tasks/tasks"; | ||
| import { type FC, useState } from "react"; | ||
| import { useQuery } from "react-query"; | ||
| import { Link as RouterLink, useParams } from "react-router"; | ||
| import { cn } from "utils/cn"; | ||
| import { UserCombobox } from "./UserCombobox"; | ||
| export const TasksSidebar: FC = () => { | ||
| const { user, permissions } = useAuthenticated(); | ||
| const usernameParam = useSearchParamsKey({ | ||
| key: "username", | ||
| defaultValue: user.username, | ||
| }); | ||
| const [isCollapsed, setIsCollapsed] = useState(false); | ||
| return ( | ||
| <div | ||
| className={cn( | ||
| "h-full flex flex-col flex-1 min-h-0 gap-6 bg-surface-secondary max-w-80", | ||
| "border-solid border-0 border-r transition-all p-3", | ||
| { "max-w-16 items-center": isCollapsed }, | ||
| )} | ||
| > | ||
| <div className="flex items-center place-content-between"> | ||
| {!isCollapsed && ( | ||
| <Button | ||
| size="icon" | ||
| variant="subtle" | ||
| className={cn([ | ||
| "size-8 p-0 transition-[margin,opacity]", | ||
| "group-data-[collapsible=icon]:-ml-10 group-data-[collapsible=icon]:opacity-0", | ||
| ])} | ||
| > | ||
| <CoderIcon className="fill-content-primary !size-6 !p-0" /> | ||
| </Button> | ||
| )} | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button | ||
| size="icon" | ||
| variant="subtle" | ||
| onClick={() => setIsCollapsed((v) => !v)} | ||
| className="[&_svg]:p-0" | ||
| > | ||
| <PanelLeftIcon /> | ||
| <span className="sr-only"> | ||
| {isCollapsed ? "Open" : "Close"} Sidebar | ||
| </span> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right" align="center"> | ||
| {isCollapsed ? "Open" : "Close"} Sidebar | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| </div> | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <Button | ||
| variant={isCollapsed ? "subtle" : "default"} | ||
| size={isCollapsed ? "icon" : "sm"} | ||
| asChild={true} | ||
| className={cn({ | ||
| "[&_svg]:p-0": isCollapsed, | ||
| })} | ||
| > | ||
| <RouterLink to="/tasks"> | ||
| <span className={isCollapsed ? "hidden" : ""}>New Task</span>{" "} | ||
| <EditIcon /> | ||
| </RouterLink> | ||
| </Button> | ||
| </TooltipTrigger> | ||
| <TooltipContent side="right" align="center"> | ||
| New task | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| {!isCollapsed && ( | ||
| <> | ||
| {permissions.viewAllUsers && ( | ||
| <UserCombobox | ||
| value={usernameParam.value} | ||
| onValueChange={(username) => { | ||
| if (username === usernameParam.value) { | ||
| usernameParam.setValue(""); | ||
| return; | ||
| } | ||
| usernameParam.setValue(username); | ||
| }} | ||
| /> | ||
| )} | ||
| <TasksSidebarGroup username={usernameParam.value} /> | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
| type TasksSidebarGroupProps = { | ||
| username: string; | ||
| }; | ||
| const TasksSidebarGroup: FC<TasksSidebarGroupProps> = ({ username }) => { | ||
| const filter = { username }; | ||
| const tasksQuery = useQuery({ | ||
| queryKey: ["tasks", filter], | ||
| queryFn: () => API.experimental.getTasks(filter), | ||
| refetchInterval: 10_000, | ||
| }); | ||
| return ( | ||
| <div className="flex flex-col flex-1 gap-2 min-h-0 transition-[opacity] group-data-[collapsible=icon]:opacity-0"> | ||
| <div className="text-content-secondary text-xs">Tasks</div> | ||
| <div className="flex flex-col flex-1 gap-1 min-h-0 overflow-y-auto"> | ||
| {tasksQuery.data ? ( | ||
| tasksQuery.data.length > 0 ? ( | ||
| tasksQuery.data.map((t) => ( | ||
| <TaskSidebarMenuItem key={t.workspace.id} task={t} /> | ||
| )) | ||
| ) : ( | ||
| <div className="text-content-secondary text-xs p-4 border-border border-solid rounded text-center"> | ||
| No tasks found | ||
| </div> | ||
| ) | ||
| ) : tasksQuery.error ? ( | ||
| <div className="text-content-secondary text-xs p-4 border-border border-solid rounded text-center"> | ||
| {getErrorMessage(tasksQuery.error, "Failed to load tasks")} | ||
| </div> | ||
| ) : ( | ||
| <div className="flex flex-col gap-1"> | ||
| {Array.from({ length: 5 }).map((_, index) => ( | ||
| <div | ||
| key={index} | ||
| aria-hidden={true} | ||
| className="h-8 w-full rounded-lg bg-surface-tertiary animate-pulse" | ||
| /> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
| type TaskSidebarMenuItemProps = { | ||
| task: Task; | ||
| }; | ||
| const TaskSidebarMenuItem: FC<TaskSidebarMenuItemProps> = ({ task }) => { | ||
| const { workspace } = useParams<{ workspace: string }>(); | ||
| const isActive = task.workspace.name === workspace; | ||
| return ( | ||
| <Button | ||
| size="sm" | ||
| variant="subtle" | ||
| className={cn( | ||
| "w-full justify-start text-content-secondary hover:bg-surface-tertiary gap-2", | ||
| { | ||
| "text-content-primary bg-surface-quaternary pointer-events-none": | ||
| isActive, | ||
| }, | ||
| )} | ||
| asChild | ||
| > | ||
| <RouterLink | ||
| to={{ | ||
| pathname: `/tasks/${task.workspace.owner_name}/${task.workspace.name}`, | ||
| search: window.location.search, | ||
| }} | ||
| > | ||
| <TaskSidebarMenuItemStatus task={task} /> | ||
| {task.workspace.name} | ||
| </RouterLink> | ||
| </Button> | ||
| ); | ||
| }; | ||
| const taskStatusVariants = cva("block size-2 rounded-full shrink-0", { | ||
| variants: { | ||
| state: { | ||
| default: "border border-content-secondary border-solid", | ||
| complete: "bg-content-success", | ||
| failure: "bg-content-destructive", | ||
| idle: "bg-content-secondary", | ||
| working: "bg-highlight-sky", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| state: "default", | ||
| }, | ||
| }); | ||
| const TaskSidebarMenuItemStatus: FC<{ task: Task }> = ({ task }) => { | ||
| const statusText = task.workspace.latest_app_status | ||
| ? task.workspace.latest_app_status.state | ||
| : "No activity yet"; | ||
| return ( | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <div | ||
| className={taskStatusVariants({ | ||
| state: task.workspace.latest_app_status?.state ?? "default", | ||
| })} | ||
| > | ||
| <span className="sr-only">{statusText}</span> | ||
| </div> | ||
| </TooltipTrigger> | ||
| <TooltipContent className="first-letter:capitalize"> | ||
| {statusText} | ||
| </TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletionssite/src/testHelpers/entities.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
Oops, something went wrong.
Uh oh!
There was an error while loading.Please reload this page.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.