-
Notifications
You must be signed in to change notification settings - Fork 121
Enhance Query Input with Autocomplete #930
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Enhance Query Input with Autocomplete #930
Conversation
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
Merge remote-tracking branch 'origin/autocomplete_feature' into autocomplete_feature
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey, I had some comments regarding the code; but could you also share some screenshots of this new input?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR enhances the query input component by adding autocomplete suggestions to help users build queries faster and with fewer errors.
- Integrates react-autosuggest into the query input component.
- Adds a new autocompletes module with preset suggestions for attributes, operators, and statuses.
- Updates tests and package dependencies to support the new autocomplete functionality.
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.
File | Description |
---|---|
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx | Integrated react-autosuggest, added suggestion fetching/selection, and updated input rendering logic. |
src/views/shared/workflows-header/workflows-query-input/autocompletes.tsx | Introduced a new module that defines autocomplete suggestions. |
src/views/shared/workflows-header/workflows-query-input/tests/workflows-query-input.test.tsx | Adjusted tests to account for the new behavior (with some tests skipped due to jsdom limitations). |
package.json | Added react-autosuggest dependency and its TypeScript definitions. |
Comments suppressed due to low confidence (2)
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx:294
- The onSubmit function is referenced in the form submission handler but is not defined or passed as a prop. Consider either adding onSubmit to the component's props or using an existing prop like refetchQuery if that was the intended behavior.
onSubmit();
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx:250
- [nitpick] The conversion and deletion of 'max', 'min', and 'step' properties is performed twice in renderInputComponent. Consolidating this logic could improve maintainability.
});
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/autocompletes.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/autocompletes.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/.autocompletes.ts
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/.autocompletes.ts
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/.autocompletes.ts
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/.autocompletes.ts
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/helpers/get-autocomplete-suggestions.ts
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.types.ts
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
src/views/shared/workflows-header/workflows-query-input/workflows-query-input.tsx
Outdated
Show resolved
Hide resolved
...views/shared/workflows-header/workflows-query-input/__tests__/workflows-query-input.test.tsx
Outdated
Show resolved
Hide resolved
...ed/workflows-header/workflows-query-input/helpers/tests/get-autocomplete-suggestions.test.ts
Show resolved
Hide resolved
This reverts commit d373034.
Adding Autocomplete feature to Query Input. Query bar provides helpful suggestions as you type and guides in building queries without needing to memorize specific attribute names. Leads to fewer errors and makes the process of filtering workflows quicker and efficient. Performed local testing using development environment, ensuring styling of component was maintained.