From bc53d5e71d3202631506d0a8354664f686590ddb Mon Sep 17 00:00:00 2001 From: Bilal ABBAD Date: Mon, 13 Jan 2025 17:16:53 +0100 Subject: [PATCH] Fix overflow on combobox for hierarchical model (#5442) --- changelog/5431.fixed.md | 1 + .../entities/ipam/ip-namespace-selector.tsx | 4 +- ...onship-hierarchical-combobox-list.test.tsx | 37 +++++++++++++++++++ .../ui/relationship-hierarchical-input.tsx | 8 +--- .../components/inputs/relationship-one.tsx | 8 +++- .../items/breadcrumb-branch-selector.tsx | 4 +- .../app/src/shared/components/ui/combobox.tsx | 31 ++++++++-------- .../app/src/shared/components/ui/command.tsx | 5 ++- .../src/shared/components/ui/pagination.tsx | 2 +- 9 files changed, 70 insertions(+), 30 deletions(-) create mode 100644 changelog/5431.fixed.md diff --git a/changelog/5431.fixed.md b/changelog/5431.fixed.md new file mode 100644 index 0000000000..5a24afcf61 --- /dev/null +++ b/changelog/5431.fixed.md @@ -0,0 +1 @@ +- Fixed text overflow when there is too many options when selecting a relationship with a hierarchical model diff --git a/frontend/app/src/entities/ipam/ip-namespace-selector.tsx b/frontend/app/src/entities/ipam/ip-namespace-selector.tsx index 541ac9489d..7f3dd39709 100644 --- a/frontend/app/src/entities/ipam/ip-namespace-selector.tsx +++ b/frontend/app/src/entities/ipam/ip-namespace-selector.tsx @@ -86,8 +86,8 @@ const IpNamespaceSelectorContent = ({ namespaces }: IpNamespaceSelectorContentPr {selectedNamespace?.display_label ?? defaultNamespace?.display_label} - - + + {namespaces.map((namespace) => ( { expect(onSelect).toHaveBeenCalledOnce(); expect(onSelect).toHaveBeenCalledWith(childRelationships[1]); }); + + it("displays load more button when there are more results", async () => { + // GIVEN + const manyRelationships = Array.from({ length: 20 }, (_, i) => ({ + id: `test-id-${i}`, + display_label: `Test Relationship ${i}`, + __typename: rootSchema.kind, + })); + vi.mocked(getRelationships).mockResolvedValue(manyRelationships); + + // WHEN + const component = render( + + ); + + // THEN + await expect.element(component.getByRole("option", { name: "Load more" })).toBeVisible(); + }); + + it("shows scrollbar when there are many options", async () => { + // GIVEN + const manyRelationships = Array.from({ length: 30 }, (_, i) => ({ + id: `test-id-${i}`, + display_label: `Test Relationship ${i}`, + __typename: rootSchema.kind, + })); + vi.mocked(getRelationships).mockResolvedValue(manyRelationships); + + // WHEN + const component = render( + + ); + + // THEN + const listbox = component.getByRole("listbox"); + expect(listbox.element().scrollHeight).toBeGreaterThan(listbox.element().clientHeight); + }); }); diff --git a/frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-input.tsx b/frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-input.tsx index 882d5a2c20..eaf103ae75 100644 --- a/frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-input.tsx +++ b/frontend/app/src/entities/nodes/relationships/ui/relationship-hierarchical-input.tsx @@ -42,13 +42,7 @@ export const RelationshipHierarchicalContent = ({ - + diff --git a/frontend/app/src/shared/components/inputs/relationship-one.tsx b/frontend/app/src/shared/components/inputs/relationship-one.tsx index 66e12a76e4..66ea9f0b1b 100644 --- a/frontend/app/src/shared/components/inputs/relationship-one.tsx +++ b/frontend/app/src/shared/components/inputs/relationship-one.tsx @@ -137,8 +137,12 @@ export const RelationshipInput = React.forwardRef< - loadPoolList()}> - + loadPoolList()} + > + {!isPoolListLoading && No pools found} {!isPoolListLoading && diff --git a/frontend/app/src/shared/components/layout/breadcrumb-navigation/items/breadcrumb-branch-selector.tsx b/frontend/app/src/shared/components/layout/breadcrumb-navigation/items/breadcrumb-branch-selector.tsx index 067e776541..cfd2f7b45d 100644 --- a/frontend/app/src/shared/components/layout/breadcrumb-navigation/items/breadcrumb-branch-selector.tsx +++ b/frontend/app/src/shared/components/layout/breadcrumb-navigation/items/breadcrumb-branch-selector.tsx @@ -36,8 +36,8 @@ export default function BreadcrumbBranchSelector({ {value} - - + + No branch found. {branches.map((branch) => { const branchUrl = constructPath(`/branches/${branch.name}`); diff --git a/frontend/app/src/shared/components/ui/combobox.tsx b/frontend/app/src/shared/components/ui/combobox.tsx index 8a215c5646..a30eff145e 100644 --- a/frontend/app/src/shared/components/ui/combobox.tsx +++ b/frontend/app/src/shared/components/ui/combobox.tsx @@ -41,32 +41,33 @@ export const ComboboxTrigger = React.forwardRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => { + React.ComponentPropsWithoutRef & { fitTriggerWidth?: boolean } +>(({ className, fitTriggerWidth = true, style, ...props }, ref) => { return ( - + ); }); export const ComboboxList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & { - fitTriggerWidth?: boolean; shouldFilter?: boolean; onValueChange?: (search: string) => void; } ->(({ fitTriggerWidth = true, style, shouldFilter, autoFocus, onValueChange, ...props }, ref) => { +>(({ shouldFilter, autoFocus, onValueChange, ...props }, ref) => { return ( - + diff --git a/frontend/app/src/shared/components/ui/command.tsx b/frontend/app/src/shared/components/ui/command.tsx index ba119a93fd..e267a467b0 100644 --- a/frontend/app/src/shared/components/ui/command.tsx +++ b/frontend/app/src/shared/components/ui/command.tsx @@ -39,7 +39,10 @@ export const CommandList = React.forwardRef< >(({ className, ...props }, ref) => ( diff --git a/frontend/app/src/shared/components/ui/pagination.tsx b/frontend/app/src/shared/components/ui/pagination.tsx index 6a020d1299..71b09b8915 100644 --- a/frontend/app/src/shared/components/ui/pagination.tsx +++ b/frontend/app/src/shared/components/ui/pagination.tsx @@ -84,7 +84,7 @@ export const Pagination = (props: tPaginationType) => { {limit} - + {[10, 20, 50].map((option) => {