Skip to content

Commit 0b4f9b6

Browse files
MbeaulneMbeaulne
committed
Test filter route
1 parent 7fd3ae4 commit 0b4f9b6

3 files changed

Lines changed: 159 additions & 1 deletion

File tree

‎knip.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
"node_modules/**",
66
"src/components/ui/**",
77
"openapi-ts.config.ts",
8-
"vite.config.ghpages.js"
8+
"vite.config.ghpages.js",
9+
"src/types/pipelineRunFilters.ts",
10+
"src/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar.tsx",
11+
"src/hooks/useRunSearchParams.ts",
12+
"src/components/shared/PipelineRunFiltersBar/**"
913
],
1014
"ignoreDependencies": [
1115
"@radix-ui/react-accordion",

‎src/routes/FilterTest/FilterTest.tsx‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import { useState } from "react";
2+
import type { DateRange } from "react-day-picker";
3+
4+
import type { ContainerExecutionStatus } from "@/api/types.gen";
5+
import { AnnotationFilterInput } from "@/components/shared/AnnotationFilterInput/AnnotationFilterInput";
6+
import { PipelineRunFiltersBar } from "@/components/shared/PipelineRunFiltersBar/PipelineRunFiltersBar";
7+
import { StatusFilterSelect } from "@/components/shared/StatusFilterSelect/StatusFilterSelect";
8+
import { DatePickerWithRange } from "@/components/ui/date-picker";
9+
import { BlockStack } from "@/components/ui/layout";
10+
import { Text } from "@/components/ui/typography";
11+
import { useRunSearchParams } from "@/hooks/useRunSearchParams";
12+
import type { AnnotationFilter } from "@/types/pipelineRunFilters";
13+
14+
const FilterTest = () => {
15+
const { filters } = useRunSearchParams();
16+
17+
// Local state for individual component demos
18+
const [demoAnnotations, setDemoAnnotations] = useState<AnnotationFilter[]>([
19+
{ key: "team", value: "ml" },
20+
]);
21+
const [demoDateRange, setDemoDateRange] = useState<DateRange | undefined>();
22+
const [demoStatus, setDemoStatus] = useState<
23+
ContainerExecutionStatus | undefined
24+
>();
25+
26+
return (
27+
<div className="container mx-auto max-w-5xl p-6">
28+
<BlockStack gap="8">
29+
<BlockStack gap="2">
30+
<Text as="h1" size="xl" weight="bold">
31+
Filter Test Page
32+
</Text>
33+
<Text tone="subdued">
34+
Testing filter components and URL synchronization
35+
</Text>
36+
</BlockStack>
37+
38+
{/* Section 1: Full Filter Bar */}
39+
<BlockStack gap="3">
40+
<Text as="h2" size="lg" weight="semibold">
41+
Full Filter Bar
42+
</Text>
43+
<Text size="sm" tone="subdued">
44+
Integrated component with all filters and URL sync
45+
</Text>
46+
<PipelineRunFiltersBar totalCount={128} filteredCount={42} />
47+
</BlockStack>
48+
49+
{/* Debug: Current URL State */}
50+
<div className="rounded-lg border bg-muted/50 p-4">
51+
<BlockStack gap="2">
52+
<Text size="sm" weight="semibold">
53+
Current URL Filter State
54+
</Text>
55+
<pre className="text-xs break-all whitespace-pre-wrap bg-background p-2 rounded">
56+
{JSON.stringify(filters, null, 2)}
57+
</pre>
58+
</BlockStack>
59+
</div>
60+
61+
{/* Section 2: Individual Components */}
62+
<BlockStack gap="6">
63+
<BlockStack gap="2">
64+
<Text as="h2" size="lg" weight="semibold">
65+
Individual Components
66+
</Text>
67+
<Text size="sm" tone="subdued">
68+
Standalone components with local state (not synced to URL)
69+
</Text>
70+
</BlockStack>
71+
72+
{/* Status Filter Select */}
73+
<div className="rounded-lg border p-4">
74+
<BlockStack gap="3">
75+
<BlockStack gap="1">
76+
<Text weight="semibold">StatusFilterSelect</Text>
77+
<Text size="sm" tone="subdued">
78+
Filter by pipeline run execution status
79+
</Text>
80+
</BlockStack>
81+
<StatusFilterSelect value={demoStatus} onChange={setDemoStatus} />
82+
<div className="bg-muted/50 p-2 rounded">
83+
<Text size="xs" tone="subdued">
84+
State: {demoStatus ?? "undefined"}
85+
</Text>
86+
</div>
87+
</BlockStack>
88+
</div>
89+
90+
{/* Date Picker */}
91+
<div className="rounded-lg border p-4">
92+
<BlockStack gap="3">
93+
<BlockStack gap="1">
94+
<Text weight="semibold">DatePickerWithRange</Text>
95+
<Text size="sm" tone="subdued">
96+
Select a date range with two-month calendar
97+
</Text>
98+
</BlockStack>
99+
<DatePickerWithRange
100+
value={demoDateRange}
101+
onChange={setDemoDateRange}
102+
placeholder="Select date range"
103+
/>
104+
<div className="bg-muted/50 p-2 rounded">
105+
<Text size="xs" tone="subdued">
106+
State:{" "}
107+
{demoDateRange
108+
? JSON.stringify({
109+
from: demoDateRange.from?.toISOString(),
110+
to: demoDateRange.to?.toISOString(),
111+
})
112+
: "undefined"}
113+
</Text>
114+
</div>
115+
</BlockStack>
116+
</div>
117+
118+
{/* Annotation Filter Input */}
119+
<div className="rounded-lg border p-4">
120+
<BlockStack gap="3">
121+
<BlockStack gap="1">
122+
<Text weight="semibold">AnnotationFilterInput</Text>
123+
<Text size="sm" tone="subdued">
124+
Add/remove key-value annotation filters
125+
</Text>
126+
</BlockStack>
127+
<AnnotationFilterInput
128+
filters={demoAnnotations}
129+
onChange={setDemoAnnotations}
130+
/>
131+
<div className="bg-muted/50 p-2 rounded">
132+
<Text size="xs" tone="subdued">
133+
State: {JSON.stringify(demoAnnotations)}
134+
</Text>
135+
</div>
136+
</BlockStack>
137+
</div>
138+
</BlockStack>
139+
</BlockStack>
140+
</div>
141+
);
142+
};
143+
144+
export default FilterTest;

‎src/routes/router.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants";
1313
import RootLayout from "../components/layout/RootLayout";
1414
import Editor from "./Editor";
1515
import ErrorPage from "./ErrorPage";
16+
import FilterTest from "./FilterTest/FilterTest";
1617
import Home from "./Home";
1718
import NotFoundPage from "./NotFoundPage";
1819
import PipelineRun from "./PipelineRun";
@@ -27,13 +28,15 @@ declare module "@tanstack/react-router" {
2728
export const EDITOR_PATH = "/editor";
2829
export const RUNS_BASE_PATH = "/runs";
2930
export const QUICK_START_PATH = "/quick-start";
31+
export const FILTER_TEST_PATH = "/filter-test";
3032
export const APP_ROUTES = {
3133
HOME: "/",
3234
QUICK_START: QUICK_START_PATH,
3335
PIPELINE_EDITOR: `${EDITOR_PATH}/$name`,
3436
RUN_DETAIL: `${RUNS_BASE_PATH}/$id`,
3537
RUN_DETAIL_WITH_SUBGRAPH: `${RUNS_BASE_PATH}/$id/$subgraphExecutionId`,
3638
RUNS: RUNS_BASE_PATH,
39+
FILTER_TEST: FILTER_TEST_PATH,
3740
GITHUB_AUTH_CALLBACK: "/authorize/github",
3841
HUGGINGFACE_AUTH_CALLBACK: "/authorize/huggingface",
3942
};
@@ -96,12 +99,19 @@ const runDetailWithSubgraphRoute = createRoute({
9699
component: PipelineRun,
97100
});
98101

102+
const filterTestRoute = createRoute({
103+
getParentRoute: () => mainLayout,
104+
path: APP_ROUTES.FILTER_TEST,
105+
component: FilterTest,
106+
});
107+
99108
const appRouteTree = mainLayout.addChildren([
100109
indexRoute,
101110
quickStartRoute,
102111
editorRoute,
103112
runDetailRoute,
104113
runDetailWithSubgraphRoute,
114+
filterTestRoute,
105115
]);
106116

107117
const rootRouteTree = rootRoute.addChildren([

0 commit comments

Comments
 (0)