Refactor search input: unified SearchWhereInput and SQL editor expand-on-focus #1726
+1,376
−653
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Updated SQLInlineEditor to enable line wrapping only when the editor is focused and multiline input is allowed. Enhanced styling to support expanded view when multiline is active, ensuring better user experience. Adjusted component structure for improved layout and responsiveness.
…behavior Updated the AutocompleteInput component to improve the layout by wrapping the Popover and Textarea in a div. Added dynamic height adjustment for the Textarea when focused, ensuring a smoother user experience. Introduced a spacer div to maintain layout consistency when the Textarea is positioned absolutely.
…cene queries Replaced WhereLanguageControlled with the new SearchWhereInput component across DBSearchPage, ServicesDashboardPage, and SessionsPage. This new component streamlines the handling of SQL and Lucene queries, improving code maintainability and user experience. The SearchWhereInput component supports dynamic language switching and integrates both SQLInlineEditor and SearchInputV2 for enhanced functionality.
Introduced a new storybook file for the SearchWhereInput component, showcasing various configurations including Lucene and SQL modes, custom widths, and label visibility. Additionally, added comprehensive tests to ensure functionality across different input modes and props, enhancing overall component reliability and user experience.
Updated AutocompleteInput to improve focus behavior and layout consistency. Added dynamic styling for the right section based on input focus state. Adjusted DBSearchPage to set a maximum width for the search input. Removed unused showHotkey prop from SearchInputV2 and refactored InputLanguageSwitch to simplify its structure. Enhanced SearchWhereInput to support maxWidth styling and ensure proper layout handling. Updated SQLInlineEditor for improved background color and layout adjustments during expansion.
Removed the unused showHotkey prop from AutocompleteInput and refactored InputLanguageSwitch to utilize SegmentedControl for improved language selection. Adjusted styling in SQLInlineEditor for consistent alignment and layout during expansion. Updated DBSearchPage to remove maxWidth constraint on the search input for better responsiveness.
Moved SQLInlineEditor and SearchWhereInput components into a dedicated SearchInput directory for better modularity. Updated import paths across various files to reflect this new structure. This change enhances code maintainability and clarity in the component hierarchy.
Added InputLanguageSwitch to SearchWhereInput for improved language selection between SQL and Lucene. Updated styling and layout to accommodate the new component, ensuring a better user experience. Adjusted SegmentedControl styles in the theme to support the primary variant for consistent design across the application.
Refactored the DBSearchPage component to enhance the layout of the live tail refresh interval by wrapping the Select component in a Box for better styling. Removed the SQLInlineEditor component entirely to streamline the codebase. Added a new SearchWhereInput.module.scss file for improved styling of the SearchWhereInput component, ensuring a more cohesive design. Updated InputLanguageSwitch to use a gray color variant for better visual consistency.
Enhanced the Select component within the DBSearchPage by adding the allowMultiline prop, enabling better handling of multiline selections. This change aims to improve user experience and flexibility in input handling.
Updated the layout of the SQLInlineEditor component to ensure it occupies full width and maintains a minimum width of 0 for better responsiveness. Adjusted the DBSearchPage to enhance the styling of the Box component wrapping the SQLInlineEditor, improving overall layout consistency and user experience.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR Review✅ No critical issues found. Minor Observations:
Nice improvements in this PR:
The refactoring is well-executed and maintains consistency with the codebase patterns outlined in CLAUDE.md. |
Contributor
E2E Test Results❌ 2 tests failed • 63 passed • 4 skipped • 982s
Tests ran across 4 shards in parallel. |
Introduced a fade effect at the bottom of the AutocompleteInput and SQLInlineEditor components when collapsed, enhancing the visual appearance of single-line inputs. This change improves user experience by preventing text from appearing hard-cut. Updated styles accordingly and removed redundant fade styles from SearchWhereInput.
Adjusted import paths for mocked components in the DBEditTimeChartForm test file to reflect the new directory structure, enhancing code organization and maintainability.
…onality Refactored AutocompleteInput and SQLInlineEditor to incorporate new styles and layout adjustments, enhancing user experience. Introduced a Select component for language switching in InputLanguageSwitch, replacing the previous SegmentedControl. Updated SearchWhereInput to integrate the language switcher and improved overall styling consistency across components. Added new styles in SearchInputV2 for better presentation of search examples and descriptions.
Replaced 'combobox' role with 'textbox' for the Query language select input in multiline tests and updated the Data Source select input in the sessions test to use role-based selection for improved accessibility and consistency in test structure.
Removed the 'where-language-switch' wrapper from the Query language selection in multiline tests, directly using the textbox for improved clarity and efficiency in the test structure.
…stency Modified SearchWhereInput styles by removing border-radius and changing background color to enhance visual clarity. Updated theme tokens for 'field-highlighted' background colors in both clickstack and hyperdx themes to ensure consistent styling across components.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WIP: Refactors the search/where experience and SQL inline editor.
components/SearchInput/and replaces WhereLanguageControlled with a single SearchWhereInput (SQL/Lucene switch, submit, history).