OCPBUGS-13359: Fix crash when filtering the quick start catalog

[jerolimov]

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

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.

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);
      }
    }

I opened a tech debt issue (ODC-7381) to update the Quick Start dependency in 4.15 from our current version 2.4.0 to the latest version 5.0.0. (We should do this as part of the PF 5 update.)

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

4-14-broken.mp4

No crash with this PR:

4-14-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-13359, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.14.0) matches configured target version for branch (4.14.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @sanketpathak

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

In response to this:

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

Analysis / Root cause:
When the user enters a filter into the quick start catalog the catalog page crashes. This happen 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 when the user clicks on the clear button, the same function was called with a string value.

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.

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;

I opened a tech debt issue (ODC-7381) to update the Quick Start dependency in 4.15 from our current version 2.4.0 to the latest version 5.0.0. (We should do this as part of the PF 5 update.)

Screen shots / Gifs for design review:

Unit test coverage report:
Crash without this PR:

No crash with this PR:

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.

[openshift-ci-robot]

@jerolimov: This pull request references Jira Issue OCPBUGS-13359, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.14.0) matches configured target version for branch (4.14.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @sanketpathak

In response to this:

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

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.

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;

I opened a tech debt issue (ODC-7381) to update the Quick Start dependency in 4.15 from our current version 2.4.0 to the latest version 5.0.0. (We should do this as part of the PF 5 update.)

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.

[jerolimov]

/kind bug
/uncc dtaylor113 rhamilto
/cc @vikram-raj @lokanandaprabhu @Lucifergene @jhadvig

[jerolimov]

/label acknowledge-critical-fixes-only

[vikram-raj]

Verified it and it works as expected.

/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

Needs approval from an approver in each of these files:

• frontend/OWNERS [jerolimov,vikram-raj]

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-13359, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.14.0) matches configured target version for branch (4.14.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @sanketpathak

In response to this:

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

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.

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);
     }
   }

I opened a tech debt issue (ODC-7381) to update the Quick Start dependency in 4.15 from our current version 2.4.0 to the latest version 5.0.0. (We should do this as part of the PF 5 update.)

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.

[openshift-ci-robot]

@jerolimov: This pull request references Jira Issue OCPBUGS-13359, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.14.0) matches configured target version for branch (4.14.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Requesting review from QA contact:
/cc @sanketpathak

In response to this:

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

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.

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);
     }
   }

I opened a tech debt issue (ODC-7381) to update the Quick Start dependency in 4.15 from our current version 2.4.0 to the latest version 5.0.0. (We should do this as part of the PF 5 update.)

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

4-14-broken.mp4

No crash with this PR:

4-14-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.

[openshift-ci-robot]

/retest-required

Remaining retests: 0 against base HEAD 48a6d12 and 2 for PR HEAD 2fe8f06 in total

[openshift-ci]

@jerolimov: all tests passed!

Full PR test history. Your PR dashboard.

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-13359: All pull requests linked via external trackers have merged:

• openshift/console#13126

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

In response to this:

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

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.

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);
     }
   }

I opened a tech debt issue (ODC-7381) to update the Quick Start dependency in 4.15 from our current version 2.4.0 to the latest version 5.0.0. (We should do this as part of the PF 5 update.)

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

4-14-broken.mp4

No crash with this PR:

4-14-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.