[release-4.13] OCPBUGS-18443: Fix crash when filtering the quick start catalog

[christoph-jerolimov]

Fixes:
https://issues.redhat.com/browse/OCPBUGS-18443

This is a manual "backport" of #13126

Analysis / Root cause:
When the user enters a filter into the quick start catalog the catalog page crashes. This happened because the PatternFly Quick Start library uses a PF Search field, which changed the props 'recently': patternfly/patternfly-react#8516

So the Quick Start library and the used Search component aren't compatible, and the callback handler expects a string value but receives an event. But the same function is called with a string value when the user clicks the clear button.

A fix for the PatternFly Quick Start library wasn't merged yet: patternfly/patternfly-quickstarts#237

Solution Description:
Since the PF fix wasn't merged yet and this would require a PF Quick Start update, I decided to clone the QuickStartCatalogPage component from @patternfly/quickstarts and add it to our code base. And fix the issue in the copied version.

This reduces the risk of more incompatible issues with an update, esp. in this backport !

The difference to the origin version is mostly that the onSearchInputChange callback handles now strings and events:

  const onSearchInputChange = (searchValue) => {
    if (typeof searchValue !== 'string' && searchValue?.target) {
      // eslint-disable-next-line no-param-reassign
      searchValue = searchValue.target.value;
      if (useQueryParams) {
        setQueryArgument('keyword', searchValue);
      }
    }

Screen shots / Gifs for design review:
Crash without this PR:

4-13-broken.mp4

No crash with this PR:

4-13-fixed.mp4

Unit test coverage report:
Untouched

Test setup:

1. Open the web console and navigate to the quick starts
2. Enter a filter

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

[openshift-ci-robot]

@jerolimov: This pull request references Jira Issue OCPBUGS-18443, which is invalid:

• expected dependent Jira Issue OCPBUGS-13359 to be in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), but it is POST instead

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Fixes:
https://issues.redhat.com/browse/OCPBUGS-18443

This is a manual "backport" of #13126

Analysis / Root cause:
When the user enters a filter into the quick start catalog the catalog page crashes. This happened because the PatternFly Quick Start library uses a PF Search field, which changed the props 'recently': patternfly/patternfly-react#8516

So the Quick Start library and the used Search component aren't compatible, and the callback handler expects a string value but receives an event. But the same function is called with a string value when the user clicks the clear button.

A fix for the PatternFly Quick Start library wasn't merged yet: patternfly/patternfly-quickstarts#237

Solution Description:
Since the PF fix wasn't merged yet and this would require a PF Quick Start update, I decided to clone the QuickStartCatalogPage component from @patternfly/quickstarts and add it to our code base. And fix the issue in the copied version.

This reduces the risk of more incompatible issues with an update, esp. in this backport !

The difference to the origin version is mostly that the onSearchInputChange callback handles now strings and events:

 const onSearchInputChange = (searchValue) => {
   // eslint-disable-next-line no-param-reassign
   searchValue = typeof searchValue === 'string' ? searchValue : searchValue.target.value;

Screen shots / Gifs for design review:
Crash without this PR:

No crash with this PR:

Unit test coverage report:
Untouched

Test setup:

1. Open the web console and navigate to the quick starts
2. Enter a filter

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

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/test-infra repository.

[christoph-jerolimov]

/kind bug
/uncc kyoto TheRealJon
/cc @vikram-raj @lokanandaprabhu @Lucifergene @jhadvig

[vikram-raj]

Verified it.

GH-13127.mov

/lgtm

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jerolimov, vikram-raj

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [jerolimov]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci-robot]

@jerolimov: This pull request references Jira Issue OCPBUGS-18443, which is invalid:

• expected dependent Jira Issue OCPBUGS-13359 to be in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), but it is POST instead

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

Fixes:
https://issues.redhat.com/browse/OCPBUGS-18443

This is a manual "backport" of #13126

Analysis / Root cause:
When the user enters a filter into the quick start catalog the catalog page crashes. This happened because the PatternFly Quick Start library uses a PF Search field, which changed the props 'recently': patternfly/patternfly-react#8516

So the Quick Start library and the used Search component aren't compatible, and the callback handler expects a string value but receives an event. But the same function is called with a string value when the user clicks the clear button.

A fix for the PatternFly Quick Start library wasn't merged yet: patternfly/patternfly-quickstarts#237

Solution Description:
Since the PF fix wasn't merged yet and this would require a PF Quick Start update, I decided to clone the QuickStartCatalogPage component from @patternfly/quickstarts and add it to our code base. And fix the issue in the copied version.

This reduces the risk of more incompatible issues with an update, esp. in this backport !

The difference to the origin version is mostly that the onSearchInputChange callback handles now strings and events:

 const onSearchInputChange = (searchValue) => {
   if (typeof searchValue !== 'string' && searchValue?.target) {
     // eslint-disable-next-line no-param-reassign
     searchValue = searchValue.target.value;
     if (useQueryParams) {
       setQueryArgument('keyword', searchValue);
     }
   }

Screen shots / Gifs for design review:
Crash without this PR:

No crash with this PR:

Unit test coverage report:
Untouched

Test setup:

1. Open the web console and navigate to the quick starts
2. Enter a filter

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

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/test-infra repository.

[christoph-jerolimov]

/label backport-risk-assessed

[openshift-ci-robot]

@jerolimov: This pull request references Jira Issue OCPBUGS-18443, which is invalid:

• expected dependent Jira Issue OCPBUGS-13359 to be in one of the following states: VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE), but it is POST instead

Comment /jira refresh to re-evaluate validity if changes to the Jira bug are made, or edit the title of this pull request to link to a different bug.

Details

In response to this:

Fixes:
https://issues.redhat.com/browse/OCPBUGS-18443

This is a manual "backport" of #13126

Analysis / Root cause:
When the user enters a filter into the quick start catalog the catalog page crashes. This happened because the PatternFly Quick Start library uses a PF Search field, which changed the props 'recently': patternfly/patternfly-react#8516

So the Quick Start library and the used Search component aren't compatible, and the callback handler expects a string value but receives an event. But the same function is called with a string value when the user clicks the clear button.

A fix for the PatternFly Quick Start library wasn't merged yet: patternfly/patternfly-quickstarts#237

Solution Description:
Since the PF fix wasn't merged yet and this would require a PF Quick Start update, I decided to clone the QuickStartCatalogPage component from @patternfly/quickstarts and add it to our code base. And fix the issue in the copied version.

This reduces the risk of more incompatible issues with an update, esp. in this backport !

The difference to the origin version is mostly that the onSearchInputChange callback handles now strings and events:

 const onSearchInputChange = (searchValue) => {
   if (typeof searchValue !== 'string' && searchValue?.target) {
     // eslint-disable-next-line no-param-reassign
     searchValue = searchValue.target.value;
     if (useQueryParams) {
       setQueryArgument('keyword', searchValue);
     }
   }

Screen shots / Gifs for design review:
Crash without this PR:

4-13-broken.mp4

No crash with this PR:

4-13-fixed.mp4

Unit test coverage report:
Untouched

Test setup:

1. Open the web console and navigate to the quick starts
2. Enter a filter

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

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/test-infra repository.

[vikram-raj]

/jira refresh

[openshift-ci-robot]

@vikram-raj: This pull request references Jira Issue OCPBUGS-18443, which is valid.

6 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.13.z) matches configured target version for branch (4.13.z)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)
• dependent bug Jira Issue OCPBUGS-13359 is in the state Verified, which is one of the valid states (VERIFIED, RELEASE PENDING, CLOSED (ERRATA), CLOSED (CURRENT RELEASE), CLOSED (DONE))
• dependent Jira Issue OCPBUGS-13359 targets the "4.14.0" version, which is one of the valid target versions: 4.14.0
• bug has dependents

Requesting review from QA contact:
/cc @sanketpathak

Details

In response to this:

/jira refresh

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/test-infra repository.

[The-Anton]

/label cherry-pick-approved

[openshift-ci]

@jerolimov: all tests passed!

Full PR test history. Your PR dashboard.

Details

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/test-infra repository. I understand the commands that are listed here.

[openshift-ci-robot]

@jerolimov: Jira Issue OCPBUGS-18443: All pull requests linked via external trackers have merged:

• openshift/console#13127

Jira Issue OCPBUGS-18443 has been moved to the MODIFIED state.

Details

In response to this:

Fixes:
https://issues.redhat.com/browse/OCPBUGS-18443

This is a manual "backport" of #13126

Analysis / Root cause:
When the user enters a filter into the quick start catalog the catalog page crashes. This happened because the PatternFly Quick Start library uses a PF Search field, which changed the props 'recently': patternfly/patternfly-react#8516

So the Quick Start library and the used Search component aren't compatible, and the callback handler expects a string value but receives an event. But the same function is called with a string value when the user clicks the clear button.

A fix for the PatternFly Quick Start library wasn't merged yet: patternfly/patternfly-quickstarts#237

Solution Description:
Since the PF fix wasn't merged yet and this would require a PF Quick Start update, I decided to clone the QuickStartCatalogPage component from @patternfly/quickstarts and add it to our code base. And fix the issue in the copied version.

This reduces the risk of more incompatible issues with an update, esp. in this backport !

The difference to the origin version is mostly that the onSearchInputChange callback handles now strings and events:

 const onSearchInputChange = (searchValue) => {
   if (typeof searchValue !== 'string' && searchValue?.target) {
     // eslint-disable-next-line no-param-reassign
     searchValue = searchValue.target.value;
     if (useQueryParams) {
       setQueryArgument('keyword', searchValue);
     }
   }

Screen shots / Gifs for design review:
Crash without this PR:

4-13-broken.mp4

No crash with this PR:

4-13-fixed.mp4

Unit test coverage report:
Untouched

Test setup:

1. Open the web console and navigate to the quick starts
2. Enter a filter

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

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/test-infra repository.