Bug: Not all suggestions are being displayed on insight page

[Olaleye-Blessing]

Describe the bug

Just few repos are being showed when a user searches for a repo even tho the query returns many repos.

Steps to reproduce

• Go to the page to create a new insight, https://insights.opensauced.pizza/hub/insights/new
• Open dev tools and click on the Network tab

Browsers

No response

Additional context (Is this in dev or production?)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[aryanas159]

@Olaleye-Blessing @brandonroberts
if (req.ok) { const res = await req.json(); const suggestions = res.items.map((item: any) => item.full_name); if (suggestions.length > 5) suggestions.length = 5; setSuggestions(suggestions);

According to this only 5 results can be displayed, is it a bug or a feature?

[babblebey]

This thus seem like it was intentional and I want to assume it was indeed made that way in the absence of a ScrollArea component in the beta design system at initial implementation.

Here's what happen without (if (suggestions.length > 5) suggestions.length = 5;) limiting suggestions count to 5

I added a ScrollArea component to the design system recently #1283

Would any of you guys want to give implementing it into the Search component a shot?

[aryanas159]

@babblebey Okay, I will try implementing it.

[babblebey]

Okay, I will try implementing it.

Great 🍕 Let us know if you need any help!

You can reference the ScrollArea documentation here -> ScrollArea Story

[aryanas159]

@babblebey Could you please checkout the changes I have made.

[babblebey]

Could you please checkout the changes I have made.

Great stuff @aryanas159, kindly note that your PR #1377 doesn't exactly fix this current issue.

I have created a new issue for what your PR fixes at #1378. Take the new Issue, then edit your PR Description, relate it accordingly.

Either you or @Olaleye-Blessing can proceed to fixing this current issue with another PR.

[babblebey]

Hey @aryanas159,

My apologies, I have taken notice of how separating the PRs makes them both ineffective. So let fix this!

• Commit your second change to this branch to effect the removal of line below from the InsightPage component

if (suggestions.length > 5) suggestions.length = 5;

• Close your PR fix: Search component suggestion div is without ScrollArea #1377
• I will close the Issue bug: Search component suggestion div is without ScrollArea #1378

This way we are be able to see a working demo of the ScrollArea implemented with the full suggestions list.

[NsdHSO]

@babblebey could you check this issue I think this is a feature, not a bug.

[NsdHSO]

IMHO the page will be so huge if we drop the limitation, or we can make overflow only in the suggestions area to have scroll and see only 5 elements once,

[babblebey]

could you check this issue I think this is a feature, not a bug.

@NsdHSO

True, the TableHeader component seen in the 'suggested solution' section of the issue #932 indeed implements the same logic in handling the suggestions counts as with the InsightPage component, that's where it must've gotten the idea from.

if (suggestions.length > 5) suggestions.length = 5;

IMHO the page will be so huge if we drop the limitation, or we can make overflow only in the suggestions area to have scroll and see only 5 elements once,

The goal is introduce all the suggestions without the limit and implement the ScrollArea which will surely allow us see only 5 elements at once and the rest will require a scroll as seen below

What do you think?

[NsdHSO]

I think this approach is more feasible.

[aryanas159]

@babblebey I have made a different PR and closed the other two, this should fix all the issues.

[github-actions]

🎉 This issue has been resolved in version 1.56.1-beta.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀