feat: add responsive search functionality with sticky search bar and …

[Ryadav0654]

Title:

feat: add responsive search functionality with sticky search bar and navigation

Linked Issue(s)

fixes: #556

Acceptance Criteria fulfillment

• Sticky search bar remains at the top of the page as logs are scrolled.
• Search input field allows searching through logs with matching terms highlighted.
• Previous and Next buttons allow navigation through highlighted search results.
• The layout of the search bar and buttons is responsive and adapts to mobile screens.

Proposed changes (including videos or screenshots)

• Implemented a sticky search bar and navigation buttons that remain visible while scrolling through system logs.
• Added functionality to highlight matching logs based on search input.
• Integrated Previous and Next buttons to navigate through the highlighted search results.
• Applied responsive design: On smaller screens, the search bar and buttons stack vertically for better usability.
• Created a new search-functionality.css file for styling the search and navigation components, ensuring responsiveness with media queries.

Further comments

This change was made to improve the log searching experience within the application, eliminating the need to rely on browser-native search functionality. The sticky search bar ensures the search and navigation controls are always available, while responsive behavior enhances mobile usability.

[CLAassistant]

All committers have signed the CLA.

[Ryadav0654]

Hi @jayantbh ,

I've created this pull request that implements a sticky, responsive search bar with log navigation (Previous/Next) and highlighting of matching search terms. It includes mobile-friendly layout adjustments.

Please review and let me know your feedback!

Thanks!

[jayantbh]

Hey, great PR!
Would be great if you could share a small screen recording showing this in action. :)

Additionally, going purely by the screenshot, I think we can use a bit softer colours. Even simply setting some opacity would help.

Plus, adding some icons beside Previous/Next buttons could help too.

If nothing is being searched, what happens then?

[jayantbh]

What are these characters at the start?

[jayantbh]

While this is technically supported, this isn't generally how styles are defined and used in this codebase. :)

Usually it's some kind of a CSS-in-JS approach.

[jayantbh]

I see this was resolved, but I'm not sure what was done to resolve it.

[jayantbh]

Note: This isn't a complete review. That'll come from the team.

[Ryadav0654]

Hey, great PR! Would be great if you could share a small screen recording showing this in action. :)

Additionally, going purely by the screenshot, I think we can use a bit softer colours. Even simply setting some opacity would help.

Plus, adding some icons beside Previous/Next buttons could help too.

If nothing is being searched, what happens then?

Recording.2024-10-11.203130.2.mp4

[jayantbh]

You can hide the buttons if nothing is being searched, or nothing has matched the search term, of if there's only one match.

I'm also not seeing much of a change in the colors, though I notice a code change for that.

The icons are also disproportionately larger than the text they are beside, they should be a little smaller to fit in better.

And finally, there's seemingly no spacing between the divider and the first line of the logs.

[Ryadav0654]

You can hide the buttons if nothing is being searched, or nothing has matched the search term, of if there's only one match.

I'm also not seeing much of a change in the colors, though I notice a code change for that.

The icons are also disproportionately larger than the text they are beside, they should be a little smaller to fit in better.

And finally, there's seemingly no spacing between the divider and the first line of the logs.

Could you let me know which specific color you'd like to use or if you have any preferences?

[jayantbh]

I think your chosen colors are fine, but I'm thinking 30% and 50% opacity for selected/unselected search matches.

[Ryadav0654]

I think your chosen colors are fine, but I'm thinking 30% and 50% opacity for selected/unselected search matches.

Hi @jayantbh,

I've fixed the color opacity and hidden the button when no search results are found. Please review the changes.
Thanks!

Recording.2024-10-13.234631.1.mp4

[jayantbh]

I think the yellow is fine to show selected line/segment.

But the white is a little to bright. Let's make its opacity 0.1 or 0.2 or something.

I really thought I already left this review comment, but I guess I didn't. 🤷🏽

[jayantbh]

Hey @Ryadav0654 could you rebase your branch on main?
There's been some significant changes to how logs are rendered.