root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-863): tokenize create-row input and select styling in Agents View

Browse Source 
- Add tokenized input styling to AgentListModal create-row with themed placeholder and chip-like tokens
- Add custom select dropdown styling to AgentsView with color-matched appearance
- Add comprehensive tests for both AgentListModal and AgentsView token/select behavior
- Update Agents View README with tokenized input/select styling documentation
This commit is contained in:
gsxdsm
2026-04-04 06:01:35 -07:00
parent 911b7bd0c7
commit 904dfcbd9a
5 changed files with 159 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/dashboard/app/components/__tests__/AgentListModal.test.tsx
View File

@@ -789,6 +789,52 @@ describe("AgentListModal", () => {
expect(foundCreateFormRule).toBe(true);
});
it("create form input and select use theme tokens", async () => {
render(
<AgentListModal
isOpen={true}
onClose={mockOnClose}
addToast={mockAddToast}
/>
);
await waitFor(() => {
expect(screen.getByText("New Agent")).toBeTruthy();
});
fireEvent.click(screen.getByText("New Agent"));
const styleElements = document.querySelectorAll("style");
let foundInputRule = false;
let foundSelectRule = false;
styleElements.forEach(styleEl => {
const css = styleEl.textContent ?? "";
if (css.includes(".agent-create-form .input")) {
foundInputRule = true;
// Assert theme token usage
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
// Focus ring token
expect(css).toContain("var(--focus-ring)");
// Guard against hardcoded light-only styles
expect(css).not.toMatch(/background:\s*#fff/);
expect(css).not.toMatch(/background:\s*white/);
}
if (css.includes(".agent-create-form .select")) {
foundSelectRule = true;
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
expect(css).toContain("var(--focus-ring)");
}
});
expect(foundInputRule).toBe(true);
expect(foundSelectRule).toBe(true);
});
it("renders filter with styled container matching AgentsView", async () => {
render(
<AgentListModal

40
packages/dashboard/app/components/__tests__/AgentsView.test.tsx
View File

@@ -376,6 +376,46 @@ describe("AgentsView", () => {
});
expect(foundCreateFormRule).toBe(true);
});
it("create form input and select use theme tokens", async () => {
render(<AgentsView addToast={mockAddToast} />);
await waitFor(() => {
expect(screen.getByText("New Agent")).toBeTruthy();
});
fireEvent.click(screen.getByText("New Agent"));
const styleElements = document.querySelectorAll("style");
let foundInputRule = false;
let foundSelectRule = false;
styleElements.forEach(styleEl => {
const css = styleEl.textContent ?? "";
if (css.includes(".agent-create-form .input")) {
foundInputRule = true;
// Assert theme token usage
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
// Focus ring token
expect(css).toContain("var(--focus-ring)");
// Guard against hardcoded light-only styles
expect(css).not.toMatch(/background:\s*#fff/);
expect(css).not.toMatch(/background:\s*white/);
}
if (css.includes(".agent-create-form .select")) {
foundSelectRule = true;
expect(css).toContain("var(--surface)");
expect(css).toContain("var(--text)");
expect(css).toContain("var(--border)");
expect(css).toContain("var(--radius-sm)");
expect(css).toContain("var(--focus-ring)");
}
});
expect(foundInputRule).toBe(true);
expect(foundSelectRule).toBe(true);
});
});
describe("change agent state", () => {