jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor: Enhance InputList Component UI/UX (#5726)

Browse source 
* [LFOSS-74]: input list UI improvements

* ✨ (frontend): Add new component 'DeleteButtonInputList' to improve user experience by providing a button to delete items in a list
📝 (frontend): Comment out unused code related to duplicating input items for now, to be revisited in a future release
📝 (frontend): Add a comment to indicate that the 'DropdownMenuInputList' feature will be added back in a future release
📝 (frontend): Update CSS styling for 'hit-area-icon' class to adjust size to h-7 and w-7 for consistency
📝 (frontend): Adjust color values in CSS to improve visual appearance, changing smooth-red to a new shade

* ✨ (keypairListComponent/index.tsx): simplify conditional styling logic for list items to improve readability and maintainability

* 📝 (delete-button-input-list.tsx): Remove unused imports and update function parameter type for removeInput to specify React.MouseEvent
📝 (delete-button-input-list.tsx): Update button className and IconComponent className for better styling and readability
📝 (delete-button-input-list.tsx): Update ICON_STROKE_WIDTH constant value from 1.25 to 1.5 for better icon appearance
📝 (index.tsx): Update InputListComponent to render DeleteButtonInputList component conditionally based on value length
📝 (constants.ts): Update ICON_STROKE_WIDTH constant value from 1.25 to 1.5 for better icon appearance
📝 (inputListComponent.spec.ts): Update test cases to use updated test IDs for delete buttons and adjust expected input values to match changes in component behavior

* [autofix.ci] apply automated fixes

* 🔧 (applies.css): adjust positioning of input-slider-text to fix alignment issue and improve user experience

* 🐛 (button-input-list.tsx): fix button position by adjusting translate-x value to align properly on the page

* ✨ (index.tsx): add visual indicator for focused input element in the list to improve user experience

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
This commit is contained in:
Cristhian Zanforlin Lousa 2025-01-20 10:25:55 -03:00 • committed by GitHub
commit 5c3c680c41
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 116 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/frontend/tests/core/unit/inputListComponent.spec.ts
View file

@ -54,20 +54,16 @@ test(
expect(false).toBeTruthy();
}
await page.getByTestId("input-list-dropdown-menu-0-edit").click();
await page.getByTestId("input-list-dropdown-menu-0-delete").click();
await page.getByTestId("input-list-delete-btn-edit_urls-0").click();
expect(
await page.getByTestId("input-list-dropdown-menu-2-edit").count(),
await page.getByTestId("input-list-delete-btn-edit_urls-2").count(),
).toBe(0);
await page.getByTestId("input-list-dropdown-menu-1-edit").click();
await page.getByTestId("input-list-dropdown-menu-1-delete").click();
await page.getByTestId("input-list-delete-btn-edit_urls-1").click();
expect(
await page.getByTestId("input-list-dropdown-menu-1-edit").count(),
await page.getByTestId("input-list-delete-btn-edit_urls-1").count(),
).toBe(0);
await page.getByText("Close").last().click();
@ -76,35 +72,32 @@ test(
await page.getByTestId("input-list-plus-btn_urls-0").click();
await page.getByTestId("input-list-plus-btn_urls-0").click();
expect(
await page.getByTestId("input-list-dropdown-menu-0-view").count(),
).toBe(1);
expect(await page.getByTestId("input-list-delete-btn_urls-0").count()).toBe(
1,
);
expect(
await page.getByTestId("input-list-dropdown-menu-1-view").count(),
).toBe(1);
expect(await page.getByTestId("input-list-delete-btn_urls-1").count()).toBe(
1,
);
expect(
await page.getByTestId("input-list-dropdown-menu-2-view").count(),
).toBe(1);
expect(await page.getByTestId("input-list-delete-btn_urls-2").count()).toBe(
1,
);
expect(
await page.getByTestId("input-list-dropdown-menu-3-view").count(),
).toBe(1);
expect(await page.getByTestId("input-list-delete-btn_urls-3").count()).toBe(
1,
);
expect(
await page.getByTestId("input-list-dropdown-menu-4-view").count(),
).toBe(0);
await page.getByTestId("input-list-dropdown-menu-0-view").click();
await page.getByTestId("input-list-dropdown-menu-0-duplicate").click();
expect(await page.getByTestId("input-list-delete-btn_urls-4").count()).toBe(
0,
);
expect(await page.getByTestId("inputlist_str_urls_0").inputValue()).toBe(
"test1 test1 test1 test1",
);
expect(await page.getByTestId("inputlist_str_urls_1").inputValue()).toBe(
"test1 test1 test1 test1",
"",
);
await page.getByTestId("edit-button-modal").click();
@ -115,22 +108,6 @@ test(
expect(
await page.getByTestId("inputlist_str_edit_urls_1").inputValue(),
).toBe("test1 test1 test1 test1");
await page.getByTestId("input-list-dropdown-menu-1-edit").click();
await page.getByTestId("input-list-dropdown-menu-1-duplicate").click();
expect(
await page.getByTestId("inputlist_str_edit_urls_0").inputValue(),
).toBe("test1 test1 test1 test1");
expect(
await page.getByTestId("inputlist_str_edit_urls_1").inputValue(),
).toBe("test1 test1 test1 test1");
expect(
await page.getByTestId("inputlist_str_edit_urls_2").inputValue(),
).toBe("test1 test1 test1 test1");
).toBe("");
},
);