-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[UI v2] feat: Adds Work Queues select component
- Loading branch information
1 parent
f5b0d19
commit 21be0e8
Showing
5 changed files
with
371 additions
and
81 deletions.
There are no files selected for viewing
This file contains 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 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 @@ | ||
| export { WorkQueueSelect } from "./work-queue-select"; |
47 changes: 47 additions & 0 deletions
47
ui-v2/src/components/work-pools/work-queue-select/work-queue-select.stories.tsx
This file contains 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,47 @@ | ||
| import { createFakeWorkQueue } from "@/mocks"; | ||
| import { reactQueryDecorator } from "@/storybook/utils"; | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { buildApiUrl } from "@tests/utils/handlers"; | ||
| import { http, HttpResponse } from "msw"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { WorkQueueSelect } from "./work-queue-select"; | ||
|
|
||
| const MOCK_WORK_POOLS_DATA = Array.from({ length: 5 }, () => | ||
| createFakeWorkQueue({ work_pool_name: "my-work-pool" }), | ||
| ); | ||
| const PRESET_OPTIONS = [{ label: "None", value: undefined }]; | ||
| const meta = { | ||
| title: "Components/WorkQueues/WorkQueueSelect", | ||
| render: () => <WorkQueueSelectStory />, | ||
| decorators: [reactQueryDecorator], | ||
| parameters: { | ||
| msw: { | ||
| handlers: [ | ||
| http.post( | ||
| buildApiUrl("/work_pools/:work_pool_name/queues/filter"), | ||
| () => { | ||
| return HttpResponse.json(MOCK_WORK_POOLS_DATA); | ||
| }, | ||
| ), | ||
| ], | ||
| }, | ||
| }, | ||
| } satisfies Meta; | ||
|
|
||
| export default meta; | ||
|
|
||
| export const story: StoryObj = { name: "WorkQueueSelect" }; | ||
|
|
||
| const WorkQueueSelectStory = () => { | ||
| const [selected, setSelected] = useState<string | undefined | null>(); | ||
|
|
||
| return ( | ||
| <WorkQueueSelect | ||
| workPoolName="my-work-pool" | ||
| selected={selected} | ||
| onSelect={setSelected} | ||
| presetOptions={PRESET_OPTIONS} | ||
| /> | ||
| ); | ||
| }; |
125 changes: 125 additions & 0 deletions
125
ui-v2/src/components/work-pools/work-queue-select/work-queue-select.test.tsx
This file contains 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,125 @@ | ||
| import type { WorkQueue } from "@/api/work-queues"; | ||
| import { createFakeWorkQueue } from "@/mocks"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import { buildApiUrl, createWrapper, server } from "@tests/utils"; | ||
| import { mockPointerEvents } from "@tests/utils/browser"; | ||
| import { http, HttpResponse } from "msw"; | ||
| import { beforeAll, describe, expect, it, vi } from "vitest"; | ||
| import { WorkQueueSelect } from "./work-queue-select"; | ||
|
|
||
| describe("WorkQueueSelect", () => { | ||
| beforeAll(mockPointerEvents); | ||
|
|
||
| const WORK_POOL_NAME = "my-work-pool"; | ||
|
|
||
| const mockListWorkPoolWorkQueuesAPI = (workQueues: Array<WorkQueue>) => { | ||
| server.use( | ||
| http.post( | ||
| buildApiUrl("/work_pools/:work_pool_name/queues/filter"), | ||
| () => { | ||
| return HttpResponse.json(workQueues); | ||
| }, | ||
| ), | ||
| ); | ||
| }; | ||
|
|
||
| it("able to select a work queue", async () => { | ||
| const mockOnSelect = vi.fn(); | ||
| mockListWorkPoolWorkQueuesAPI([ | ||
| createFakeWorkQueue({ | ||
| work_pool_name: WORK_POOL_NAME, | ||
| name: "my work queue 0", | ||
| }), | ||
| createFakeWorkQueue({ | ||
| work_pool_name: WORK_POOL_NAME, | ||
| name: "my work queue 1", | ||
| }), | ||
| ]); | ||
|
|
||
| const user = userEvent.setup(); | ||
|
|
||
| // ------------ Setup | ||
| render( | ||
| <WorkQueueSelect | ||
| workPoolName={WORK_POOL_NAME} | ||
| selected={undefined} | ||
| onSelect={mockOnSelect} | ||
| />, | ||
| { wrapper: createWrapper() }, | ||
| ); | ||
|
|
||
| // ------------ Act | ||
| await user.click( | ||
| screen.getByRole("combobox", { name: /select a work queue/i }), | ||
| ); | ||
| await user.click(screen.getByRole("option", { name: "my work queue 0" })); | ||
|
|
||
| // ------------ Assert | ||
| expect(mockOnSelect).toHaveBeenLastCalledWith("my work queue 0"); | ||
| }); | ||
|
|
||
| it("able to select a preset option", async () => { | ||
| const mockOnSelect = vi.fn(); | ||
| mockListWorkPoolWorkQueuesAPI([ | ||
| createFakeWorkQueue({ | ||
| work_pool_name: WORK_POOL_NAME, | ||
| name: "my work queue 0", | ||
| }), | ||
| createFakeWorkQueue({ | ||
| work_pool_name: WORK_POOL_NAME, | ||
| name: "my work queue 1", | ||
| }), | ||
| ]); | ||
|
|
||
| const user = userEvent.setup(); | ||
|
|
||
| // ------------ Setup | ||
| const PRESETS = [{ label: "None", value: undefined }]; | ||
| render( | ||
| <WorkQueueSelect | ||
| workPoolName={WORK_POOL_NAME} | ||
| presetOptions={PRESETS} | ||
| selected={undefined} | ||
| onSelect={mockOnSelect} | ||
| />, | ||
| { wrapper: createWrapper() }, | ||
| ); | ||
|
|
||
| // ------------ Act | ||
| await user.click( | ||
| screen.getByRole("combobox", { name: /select a work queue/i }), | ||
| ); | ||
| await user.click(screen.getByRole("option", { name: "None" })); | ||
|
|
||
| // ------------ Assert | ||
| expect(mockOnSelect).toHaveBeenLastCalledWith(undefined); | ||
| }); | ||
|
|
||
| it("has the selected value displayed", () => { | ||
| mockListWorkPoolWorkQueuesAPI([ | ||
| createFakeWorkQueue({ | ||
| work_pool_name: WORK_POOL_NAME, | ||
| name: "my work queue 0", | ||
| }), | ||
| createFakeWorkQueue({ | ||
| work_pool_name: WORK_POOL_NAME, | ||
| name: "my work queue 1", | ||
| }), | ||
| ]); | ||
| // ------------ Setup | ||
| const PRESETS = [{ label: "None", value: undefined }]; | ||
| render( | ||
| <WorkQueueSelect | ||
| workPoolName={WORK_POOL_NAME} | ||
| presetOptions={PRESETS} | ||
| selected="my work pool 0" | ||
| onSelect={vi.fn()} | ||
| />, | ||
| { wrapper: createWrapper() }, | ||
| ); | ||
|
|
||
| // ------------ Assert | ||
| expect(screen.getByText("my work pool 0")).toBeVisible(); | ||
| }); | ||
| }); |
Oops, something went wrong.