diff --git a/ui-v2/biome.json b/ui-v2/biome.json index 091a590367fb..d72e1a381493 100644 --- a/ui-v2/biome.json +++ b/ui-v2/biome.json @@ -1,5 +1,5 @@ { - "$schema": "https://biomejs.dev/schemas/2.1.2/schema.json", + "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json", "vcs": { "enabled": true, "clientKind": "git", @@ -50,5 +50,11 @@ "formatter": { "quoteStyle": "double" } + }, + "css": { + "parser": { + "cssModules": true, + "tailwindDirectives": true + } } } diff --git a/ui-v2/package-lock.json b/ui-v2/package-lock.json index 10cf1518d3b7..3aba89897883 100644 --- a/ui-v2/package-lock.json +++ b/ui-v2/package-lock.json @@ -70,7 +70,7 @@ "zod": "^3.25.76" }, "devDependencies": { - "@biomejs/biome": "^2.1.2", + "@biomejs/biome": "^2.3.8", "@eslint/js": "^9.38.0", "@storybook/addon-docs": "^9.1.3", "@storybook/addon-themes": "^9.1.3", @@ -556,7 +556,9 @@ } }, "node_modules/@biomejs/biome": { - "version": "2.1.2", + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.3.8.tgz", + "integrity": "sha512-Qjsgoe6FEBxWAUzwFGFrB+1+M8y/y5kwmg5CHac+GSVOdmOIqsAiXM5QMVGZJ1eCUCLlPZtq4aFAQ0eawEUuUA==", "dev": true, "license": "MIT OR Apache-2.0", "bin": { @@ -570,18 +572,88 @@ "url": "https://opencollective.com/biome" }, "optionalDependencies": { - "@biomejs/cli-darwin-arm64": "2.1.2", - "@biomejs/cli-darwin-x64": "2.1.2", - "@biomejs/cli-linux-arm64": "2.1.2", - "@biomejs/cli-linux-arm64-musl": "2.1.2", - "@biomejs/cli-linux-x64": "2.1.2", - "@biomejs/cli-linux-x64-musl": "2.1.2", - "@biomejs/cli-win32-arm64": "2.1.2", - "@biomejs/cli-win32-x64": "2.1.2" + "@biomejs/cli-darwin-arm64": "2.3.8", + "@biomejs/cli-darwin-x64": "2.3.8", + "@biomejs/cli-linux-arm64": "2.3.8", + "@biomejs/cli-linux-arm64-musl": "2.3.8", + "@biomejs/cli-linux-x64": "2.3.8", + "@biomejs/cli-linux-x64-musl": "2.3.8", + "@biomejs/cli-win32-arm64": "2.3.8", + "@biomejs/cli-win32-x64": "2.3.8" + } + }, + "node_modules/@biomejs/cli-darwin-arm64": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.3.8.tgz", + "integrity": "sha512-HM4Zg9CGQ3txTPflxD19n8MFPrmUAjaC7PQdLkugeeC0cQ+PiVrd7i09gaBS/11QKsTDBJhVg85CEIK9f50Qww==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-darwin-x64": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.3.8.tgz", + "integrity": "sha512-lUDQ03D7y/qEao7RgdjWVGCu+BLYadhKTm40HkpJIi6kn8LSv5PAwRlew/DmwP4YZ9ke9XXoTIQDO1vAnbRZlA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-arm64": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.3.8.tgz", + "integrity": "sha512-Uo1OJnIkJgSgF+USx970fsM/drtPcQ39I+JO+Fjsaa9ZdCN1oysQmy6oAGbyESlouz+rzEckLTF6DS7cWse95g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-linux-arm64-musl": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.3.8.tgz", + "integrity": "sha512-PShR4mM0sjksUMyxbyPNMxoKFPVF48fU8Qe8Sfx6w6F42verbwRLbz+QiKNiDPRJwUoMG1nPM50OBL3aOnTevA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=14.21.3" } }, "node_modules/@biomejs/cli-linux-x64": { - "version": "2.1.2", + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.3.8.tgz", + "integrity": "sha512-QDPMD5bQz6qOVb3kiBui0zKZXASLo0NIQ9JVJio5RveBEFgDgsvJFUvZIbMbUZT3T00M/1wdzwWXk4GIh0KaAw==", "cpu": [ "x64" ], @@ -596,7 +668,9 @@ } }, "node_modules/@biomejs/cli-linux-x64-musl": { - "version": "2.1.2", + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.3.8.tgz", + "integrity": "sha512-YGLkqU91r1276uwSjiUD/xaVikdxgV1QpsicT0bIA1TaieM6E5ibMZeSyjQ/izBn4tKQthUSsVZacmoJfa3pDA==", "cpu": [ "x64" ], @@ -610,6 +684,40 @@ "node": ">=14.21.3" } }, + "node_modules/@biomejs/cli-win32-arm64": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.3.8.tgz", + "integrity": "sha512-H4IoCHvL1fXKDrTALeTKMiE7GGWFAraDwBYFquE/L/5r1927Te0mYIGseXi4F+lrrwhSWbSGt5qPFswNoBaCxg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.21.3" + } + }, + "node_modules/@biomejs/cli-win32-x64": { + "version": "2.3.8", + "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.3.8.tgz", + "integrity": "sha512-RguzimPoZWtBapfKhKjcWXBVI91tiSprqdBYu7tWhgN8pKRZhw24rFeNZTNf6UiBfjCYCi9eFQs/JzJZIhuK4w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT OR Apache-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=14.21.3" + } + }, "node_modules/@bundled-es-modules/cookie": { "version": "2.0.1", "dev": true, diff --git a/ui-v2/package.json b/ui-v2/package.json index 3f5c6568f03c..b3c54fc262f0 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -81,7 +81,7 @@ "zod": "^3.25.76" }, "devDependencies": { - "@biomejs/biome": "^2.1.2", + "@biomejs/biome": "^2.3.8", "@eslint/js": "^9.38.0", "@storybook/addon-docs": "^9.1.3", "@storybook/addon-themes": "^9.1.3", diff --git a/ui-v2/src/components/flow-runs/flow-run-tags-select.tsx b/ui-v2/src/components/flow-runs/flow-run-tags-select.tsx index 9c61d5b29714..1b59b1d73abc 100644 --- a/ui-v2/src/components/flow-runs/flow-run-tags-select.tsx +++ b/ui-v2/src/components/flow-runs/flow-run-tags-select.tsx @@ -41,7 +41,9 @@ export function FlowRunTagsSelect({ const suggestions = useMemo(() => { const all = new Set(); (data?.results ?? []).forEach((fr) => { - (fr.tags ?? []).forEach((t) => all.add(t)); + (fr.tags ?? []).forEach((t) => { + all.add(t); + }); }); return Array.from(all).sort((a, b) => a.localeCompare(b)); }, [data?.results]); diff --git a/ui-v2/src/components/schemas/schema-form-input-any-of.tsx b/ui-v2/src/components/schemas/schema-form-input-any-of.tsx index c22fa2252747..04cd34abd414 100644 --- a/ui-v2/src/components/schemas/schema-form-input-any-of.tsx +++ b/ui-v2/src/components/schemas/schema-form-input-any-of.tsx @@ -27,7 +27,7 @@ export function SchemaFormInputAnyOf({ const values = useRef(new Map()); function onSelectedIndexChange(newSelectedIndexValue: string) { - const newSelectedIndex = Number.parseInt(newSelectedIndexValue); + const newSelectedIndex = Number.parseInt(newSelectedIndexValue, 10); if (Number.isNaN(newSelectedIndex)) { throw new Error(`Invalid index: ${newSelectedIndexValue}`); diff --git a/ui-v2/src/components/ui/date-range-select/rich-date-range-selector.tsx b/ui-v2/src/components/ui/date-range-select/rich-date-range-selector.tsx index 99cd936d17d6..33ba3f8d61bd 100644 --- a/ui-v2/src/components/ui/date-range-select/rich-date-range-selector.tsx +++ b/ui-v2/src/components/ui/date-range-select/rich-date-range-selector.tsx @@ -569,7 +569,7 @@ function RelativeView({ const [quantitySearch = ""] = search.match(/\d+/) ?? []; const [unitSearch = ""] = search.match(/[a-zA-Z]+/) ?? []; const [directionSearch = ""] = search.match(/[+-]+/) ?? []; - const parsed = Number.parseInt(quantitySearch); + const parsed = Number.parseInt(quantitySearch, 10); const quantity = Number.isNaN(parsed) ? 1 : parsed; const spans: Option[] = [ diff --git a/ui-v2/src/components/ui/date-time-picker/date-time-picker.tsx b/ui-v2/src/components/ui/date-time-picker/date-time-picker.tsx index 2a081b7960c4..eddde3026b9e 100644 --- a/ui-v2/src/components/ui/date-time-picker/date-time-picker.tsx +++ b/ui-v2/src/components/ui/date-time-picker/date-time-picker.tsx @@ -46,10 +46,11 @@ export function DateTimePicker({ const newDate = new Date(date); if (type === "hour") { newDate.setHours( - (Number.parseInt(value) % 12) + (newDate.getHours() >= 12 ? 12 : 0), + (Number.parseInt(value, 10) % 12) + + (newDate.getHours() >= 12 ? 12 : 0), ); } else if (type === "minute") { - newDate.setMinutes(Number.parseInt(value)); + newDate.setMinutes(Number.parseInt(value, 10)); } else if (type === "ampm") { const currentHours = newDate.getHours(); newDate.setHours( diff --git a/ui-v2/src/components/ui/flow-run-activity-bar-graph/flow-run-activity-bar-graph.test.tsx b/ui-v2/src/components/ui/flow-run-activity-bar-graph/flow-run-activity-bar-graph.test.tsx index 5aa17c7573c7..39f45db55451 100644 --- a/ui-v2/src/components/ui/flow-run-activity-bar-graph/flow-run-activity-bar-graph.test.tsx +++ b/ui-v2/src/components/ui/flow-run-activity-bar-graph/flow-run-activity-bar-graph.test.tsx @@ -69,26 +69,23 @@ describe("FlowRunActivityBarChart", () => { ["PAUSED", "fill-gray-500"], ["RUNNING", "fill-blue-700"], ["CRASHED", "fill-orange-600"], - ])( - "renders the bars with expected colors for %s", - (stateType, expectedClass) => { - const enrichedFlowRun = { - ...mockFlowRun, - state_type: stateType, - }; - render( - , - ); - const bars = screen.getAllByRole("graphics-symbol"); - expect( - within(bars[0]).getByTestId("bar-rect-test-flow-run-1"), - ).toHaveClass(expectedClass); - }, - ); + ])("renders the bars with expected colors for %s", (stateType, expectedClass) => { + const enrichedFlowRun = { + ...mockFlowRun, + state_type: stateType, + }; + render( + , + ); + const bars = screen.getAllByRole("graphics-symbol"); + expect(within(bars[0]).getByTestId("bar-rect-test-flow-run-1")).toHaveClass( + expectedClass, + ); + }); it("applies custom bar width when provided", () => { const customBarWidth = 12; diff --git a/ui-v2/src/components/ui/state-badge/state-badge.test.tsx b/ui-v2/src/components/ui/state-badge/state-badge.test.tsx index 198ca95462bb..00b0d67b0d53 100644 --- a/ui-v2/src/components/ui/state-badge/state-badge.test.tsx +++ b/ui-v2/src/components/ui/state-badge/state-badge.test.tsx @@ -57,29 +57,29 @@ describe("StateBadge", () => { }, ]; - test.each(states)( - "renders correct icon and classes for $type state", - ({ type, name }) => { - render(); + test.each(states)("renders correct icon and classes for $type state", ({ + type, + name, + }) => { + render(); - // Check if state name is rendered - expect(screen.getByText(name)).toBeInTheDocument(); + // Check if state name is rendered + expect(screen.getByText(name)).toBeInTheDocument(); - // Check if correct classes are applied based on the CLASSES mapping - const badge = screen.getByText(name).closest("span"); - const expectedClasses = { - COMPLETED: "bg-green-50 text-green-600 hover:bg-green-50", - FAILED: "bg-red-50 text-red-600 hover:bg-red-50", - RUNNING: "bg-blue-100 text-blue-700 hover:bg-blue-100", - CANCELLED: "bg-gray-300 text-gray-800 hover:bg-gray-300", - CANCELLING: "bg-gray-300 text-gray-800 hover:bg-gray-300", - CRASHED: "bg-orange-50 text-orange-600 hover:bg-orange-50", - PAUSED: "bg-gray-300 text-gray-800 hover:bg-gray-300", - PENDING: "bg-gray-300 text-gray-800 hover:bg-gray-300", - SCHEDULED: "bg-yellow-100 text-yellow-700 hover:bg-yellow-100", - }[type]; + // Check if correct classes are applied based on the CLASSES mapping + const badge = screen.getByText(name).closest("span"); + const expectedClasses = { + COMPLETED: "bg-green-50 text-green-600 hover:bg-green-50", + FAILED: "bg-red-50 text-red-600 hover:bg-red-50", + RUNNING: "bg-blue-100 text-blue-700 hover:bg-blue-100", + CANCELLED: "bg-gray-300 text-gray-800 hover:bg-gray-300", + CANCELLING: "bg-gray-300 text-gray-800 hover:bg-gray-300", + CRASHED: "bg-orange-50 text-orange-600 hover:bg-orange-50", + PAUSED: "bg-gray-300 text-gray-800 hover:bg-gray-300", + PENDING: "bg-gray-300 text-gray-800 hover:bg-gray-300", + SCHEDULED: "bg-yellow-100 text-yellow-700 hover:bg-yellow-100", + }[type]; - expect(badge).toHaveClass(...expectedClasses.split(" ")); - }, - ); + expect(badge).toHaveClass(...expectedClasses.split(" ")); + }); }); diff --git a/ui-v2/src/components/work-pools/priority-management/priority-editor-dialog.tsx b/ui-v2/src/components/work-pools/priority-management/priority-editor-dialog.tsx index 5f0af0d06e91..26932aa6b7cf 100644 --- a/ui-v2/src/components/work-pools/priority-management/priority-editor-dialog.tsx +++ b/ui-v2/src/components/work-pools/priority-management/priority-editor-dialog.tsx @@ -103,7 +103,7 @@ export const PriorityEditorDialog = ({ onChange={(e) => setPriorities((prev) => ({ ...prev, - [queue.id]: Number.parseInt(e.target.value) || 0, + [queue.id]: Number.parseInt(e.target.value, 10) || 0, })) } className="w-20" diff --git a/ui-v2/src/index.css b/ui-v2/src/index.css index 3ef7ca4cbac0..91bcb6ad7762 100644 --- a/ui-v2/src/index.css +++ b/ui-v2/src/index.css @@ -1,7 +1,7 @@ @import "tailwindcss"; -@plugin 'tailwindcss-animate'; -@plugin '@tailwindcss/typography'; +@plugin "tailwindcss-animate"; +@plugin "@tailwindcss/typography"; @custom-variant dark (&:is(.dark *));