MGMT-20842: Add search to operators page#3017
Conversation
openshift-ci-robot
added
the
jira/valid-reference
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
openshift-ci
bot
added
the
approved
|
/cherry-pick releases/v2.42 |
openshift-ci
bot
added
the
size/L
|
@ammont82: once the present PR merges, I will cherry-pick it on top of DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
|
""" WalkthroughA search term highlighting feature was introduced across operator-related UI components. New utility functions and component props enable highlighting of search term matches within operator titles and descriptions. Operator lists and bundles are now filtered and rendered based on the search input, with visual emphasis on matched text throughout the operator selection workflow. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OperatorsStep
participant OperatorsBundle
participant OperatorsSelect
participant OperatorCheckbox
participant OperatorSpecs
User->>OperatorsStep: Enter search term
OperatorsStep->>OperatorsBundle: Pass filtered bundles & searchTerm
OperatorsStep->>OperatorsSelect: Pass searchTerm
OperatorsBundle->>OperatorSpecs: Highlight matches in bundle title/description
OperatorsSelect->>OperatorCheckbox: Pass searchTerm
OperatorCheckbox->>OperatorSpecs: Highlight matches in operator title/description
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
libs/ui-lib/lib/common/components/operators/operatorSpecs.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "@openshift-assisted/eslint-config" to extend from. Please check that the name of the config is correct. The config "@openshift-assisted/eslint-config" was referenced from the config file in "/libs/ui-lib/.eslintrc.cjs". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (6)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx (1)
1-1: Remove ESLint disable comment after fixing console statements.This ESLint disable rule is only needed because of the console.log statements below. Once those are removed, this directive should also be removed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx(21 hunks)libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx(4 hunks)libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx(5 hunks)libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsSelect.tsx(4 hunks)libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsSelect.tsx (1)
libs/types/assisted-installer-service.d.ts (3)
Cluster(110-407)Bundle(89-109)PreflightHardwareRequirements(2445-2454)
libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx (2)
libs/types/assisted-installer-service.d.ts (3)
Bundle(89-109)Cluster(110-407)PreflightHardwareRequirements(2445-2454)libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx (1)
highlightMatch(87-100)
libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx (3)
libs/types/assisted-installer-service.d.ts (2)
Bundle(89-109)PreflightHardwareRequirements(2445-2454)libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx (2)
useOperatorSpecs(433-454)highlightMatch(87-100)libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/bundleSpecs.tsx (1)
bundleSpecs(11-43)
libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx (2)
libs/ui-lib/lib/common/components/operators/operatorDescriptions.tsx (19)
DESCRIPTION_LSO(7-7)DESCRIPTION_LVM(57-58)DESCRIPTION_ODF(37-37)DESCRIPTION_CNV(12-12)DESCRIPTION_MTV(1-2)DESCRIPTION_OPENSHIFT_AI(39-40)DESCRIPTION_AMD_GPU(4-5)DESCRIPTION_NVIDIA_GPU(34-35)DESCRIPTION_NMSTATE(24-25)DESCRIPTION_SERVICEMESH(54-55)DESCRIPTION_AUTHORINO(9-10)DESCRIPTION_NODE_FEATURE_DISCOVERY(27-28)DESCRIPTION_PIPELINES(45-46)DESCRIPTION_SERVERLESS(51-52)DESCRIPTION_KMM(17-17)DESCRIPTION_MCE(22-22)DESCRIPTION_OSC(42-43)DESCRIPTION_KUBE_DESCHEDULER(19-20)DESCRIPTION_NODE_MAINTENANCE(32-32)libs/ui-lib/lib/common/config/docs_links.ts (4)
ODF_LINK(108-108)CNV_LINK(101-101)MTV_LINK(152-153)OSC_LINK(158-158)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: unit-tests
- GitHub Check: tests
- GitHub Check: translation-files
- GitHub Check: format
- GitHub Check: circular-deps
- GitHub Check: lint
🔇 Additional comments (18)
libs/ui-lib/lib/common/components/operators/operatorSpecs.tsx (1)
129-238: LGTM! Consistent implementation of search term highlighting.The operator Description components are correctly updated to accept the
searchTermprop and use theHighlightedTextcomponent. The prop threading is consistent across all operators.libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsSelect.tsx (3)
27-32: LGTM! Proper type definition for search functionality.The addition of the optional
searchTermprop with correct TypeScript typing enables the search feature while maintaining backward compatibility.
73-75: LGTM! Early loading state check improves readability.Moving the loading state check before the filtering logic is a good organizational improvement.
86-96: LGTM! Well-implemented search filtering logic.The filtering logic correctly:
- Trims whitespace from the search term
- Performs case-insensitive matching
- Searches both title and description fields
- Handles undefined/null values safely
libs/ui-lib/lib/ocm/components/clusterConfiguration/operators/OperatorCheckbox.tsx (4)
29-29: LGTM! Correct import of highlighting utility.The import of
highlightMatchfunction enables title highlighting functionality in the checkbox component.
122-130: LGTM! Proper prop interface extension.The addition of the optional
searchTermprop maintains backward compatibility while enabling the new highlighting feature.
172-172: LGTM! Appropriate title highlighting implementation.Using
highlightMatchfor the operator title within the checkbox label correctly implements the search highlighting feature.
202-202: LGTM! Consistent prop threading to Description.Passing the
searchTermto the Description component ensures consistent highlighting behavior across title and description.libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsStep.tsx (5)
2-2: LGTM! Appropriate imports for search UI components.The addition of Flex layout components and SearchInput enables the new search functionality with proper UI structure.
22-22: LGTM! Simple and effective state management.The
searchTermstate variable correctly manages the search input value for filtering operations.
43-47: LGTM! Consistent filtering logic with other components.The bundle filtering logic matches the pattern used in other components - case-insensitive matching against both title and description fields.
56-71: LGTM! Well-designed search UI layout.The Flex layout provides good spacing and alignment for the header with search input. The minimum width constraint ensures the search input remains usable on smaller screens.
74-86: LGTM! Proper data and prop threading to child components.Both
OperatorsBundleandOperatorsSelectcorrectly receive the filtered data and search term, enabling consistent search behavior across the interface.libs/ui-lib/lib/ocm/components/clusterWizard/OperatorsBundle.tsx (5)
33-37: LGTM! Consistent imports for highlighting functionality.The import of
highlightMatchand related utilities enables highlighting in bundle components, maintaining consistency with the operator components.
41-46: LGTM! Proper highlighting integration in BundleLabel.The addition of the
searchTermprop and use ofhighlightMatchfor the bundle title correctly implements the highlighting feature.
106-112: LGTM! Consistent prop interface extension.The BundleCard component correctly extends its props to include the optional
searchTerm, maintaining the pattern established in other components.
185-191: LGTM! Complete highlighting implementation.Both the bundle title (via BundleLabel) and description correctly use the highlighting functionality, providing consistent visual feedback for search matches.
214-240: LGTM! Proper prop threading through component hierarchy.The OperatorsBundle component correctly accepts the
searchTermprop and passes it down to BundleCard, maintaining the component prop flow pattern.
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
|
@ammont82: This pull request references MGMT-20842 which is a valid jira issue. Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the task to target the "4.20.0" version, but no target version was set. DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository. |
ammont82
force-pushed
the
MGMT-20482-add-search-operators-page
branch
from
c400385 to
bc4c5d7
Compare
openshift-merge-robot
added
the
needs-rebase
openshift-merge-robot
removed
the
needs-rebase
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: ammont82, rawagner The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
/lgtm |
openshift-merge-bot
bot
merged commit d9a7c19
into
openshift-assisted:master
|
@ammont82: #3017 failed to apply on top of branch "releases/v2.42": DetailsIn response to this:
Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. |
* MGMT-20842: Add search to operators page * Remove console.log * Add 'No results found' text * Expand operators section when results are founded * Change regexp for operators search * Add try-catch to highlightMatch function in operatorSpecs file
* MGMT-20842: Add search to operators page * Remove console.log * Add 'No results found' text * Expand operators section when results are founded * Change regexp for operators search * Add try-catch to highlightMatch function in operatorSpecs file
* MGMT-20842: Add search to operators page * Remove console.log * Add 'No results found' text * Expand operators section when results are founded * Change regexp for operators search * Add try-catch to highlightMatch function in operatorSpecs file
5 participants
Related to https://issues.redhat.com/browse/MGMT-20482
Add search to operators page and highlight the searched word.
The search filter the bundles and the operators by title and description.
If operators were selected before, then we should notify users how many of them were selected out of how many we offer, even if the results show nothing.
So, for instance, let's say that before of the search we've selected two operators, now we've searched for a term that returns three results, but none of them were selected. We still need to show in the numbers of the single operators these two operators that were selected before.
The search doesn't reset the selection.
operators_search_.mp4
Summary by CodeRabbit
Summary by CodeRabbit