Skip to content

Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) - #2744

Merged
openshift-merge-bot[bot] merged 1 commit into
red-hat-storage:masterfrom
SanjalKatiyar:fix_modal_issue
May 12, 2026
Merged

Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch)#2744
openshift-merge-bot[bot] merged 1 commit into
red-hat-storage:masterfrom
SanjalKatiyar:fix_modal_issue

Conversation

@SanjalKatiyar

@SanjalKatiyar SanjalKatiyar commented May 1, 2026

Copy link
Copy Markdown
Collaborator

https://redhat.atlassian.net/browse/DFBUGS-6713
https://redhat.atlassian.net/browse/DFBUGS-6698
https://redhat.atlassian.net/browse/DFBUGS-6546

at ToolbarFilter (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:49469:5)
    at div
    at ToolbarItem (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:49672:7)
    at div
    at ToolbarToggleGroup (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:49860:5)
    at div
    at div
    at ToolbarContent (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:49254:5)
    at div
    at Toolbar (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:49103:5)
    at FilterToolbar (http://localhost:9000/static/main-bundle.js:112910:3)
    at ListPageFilter (http://localhost:9000/static/main-bundle.js:109506:3)
    at section
    at PageSection (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:42833:7)
    at PaneBody (http://localhost:9000/static/main-bundle.js:50797:7)
    at ListPageBody (http://localhost:9000/static/main-bundle.js:20435:3)
    at ClientListPage (webpack-internal:///./packages/odf/components/storage-consumers/client-list.tsx:277:109)
    at LazyRoutePage (http://localhost:9000/static/main-bundle.js:19219:3)
    at RoutePage (http://localhost:9000/static/main-bundle.js:19258:3)
    at RenderedRoute (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:16119:26)
    at Routes (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:16937:3)
    at Suspense
    at ErrorBoundaryInner (http://localhost:9000/static/main-bundle.js:41636:5)
    at ErrorBoundary (http://localhost:9000/static/main-bundle.js:41681:3)
    at ErrorBoundaryPage
    at section
    at PageSection (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:42833:7)
    at AppContents (http://localhost:9000/static/main-bundle.js:105372:117)
    at main
    at div
    at div
    at div
    at DrawerMain (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32752:7)
    at DrawerContent (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32628:7)
    at div
    at Drawer (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32468:7)
    at div
    at div
    at Page (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:42328:5)
    at div
    at Flex (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:55511:7)
    at CloudShell (http://localhost:9000/static/main-bundle.js:98660:3)
    at div
    at DrawerContentBody (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32675:7)
    at div
    at div
    at DrawerMain (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32752:7)
    at DrawerContent (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32628:7)
    at div
    at Drawer (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:32468:7)
    at QuickStartDrawer (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:16690:7)
    at QuickStartsLoader (http://localhost:9000/static/main-bundle.js:16137:3)
    at QuickStartDrawer (http://localhost:9000/static/main-bundle.js:15992:3)
    at Suspense
    at EnhancedProvider (http://localhost:9000/static/main-bundle.js:105977:13)
    at QuickStartContextProvider (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:14036:3)
    at EnhancedProvider (http://localhost:9000/static/main-bundle.js:105977:13)
    at EnhancedProvider (http://localhost:9000/static/main-bundle.js:105977:13)
    at Suspense
    at OverlayProvider (http://localhost:9000/static/main-bundle.js:23190:3)
    at ModalProvider (http://localhost:9000/static/main-bundle.js:23059:3)
    at DetectNamespace (http://localhost:9000/static/main-bundle.js:12155:3)
    at DetectPerspective (http://localhost:9000/static/main-bundle.js:12632:3)
    at App (http://localhost:9000/static/main-bundle.js:105991:3)
    at AppWithExtensions (http://localhost:9000/static/main-bundle.js:106168:137)
    at RenderedRoute (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:16119:26)
    at Routes (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:16937:3)
    at Router (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:16867:13)
    at BrowserRouter (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:20117:3)
    at AppRouter (http://localhost:9000/static/main-bundle.js:106190:126)
    at ToastProvider (http://localhost:9000/static/main-bundle.js:62354:3)
    at _HelmetProvider (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:339389:5)
    at ThemeProvider (http://localhost:9000/static/main-bundle.js:104728:3)
    at PluginStoreProvider (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:1046:32)
    at Provider (http://localhost:9000/static/vendor-plugins-shared-node_modules_openshift_dynamic-plugin-sdk_dist_index_esm_js-node_module-9d8b97-bundle.js:7387:11)
    at Suspense
TypeError: Cannot read properties of null (reading 'firstElementChild')
    at ToolbarFilter.render (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:49535:291)
    at finishClassComponent (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:327141:31)
    at updateClassComponent (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:327087:24)
    at beginWork (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:329010:16)
    at beginWork$1 (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:334825:14)
    at performUnitOfWork (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:333956:12)
    at workLoopSync (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:333865:5)
    at renderRootSync (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:333833:7)
    at recoverFromConcurrentError (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:333249:20)
    at performConcurrentWorkOnRoot (http://localhost:9000/static/vendors~vendors-node_modules_octokit_rest_index_js-node_modules_pmmmwh_react-refresh-webpack-plugin_l-f2609e-chunk-ab686b26d24ccf17324f.min.js:333149:22)

When the modal is launched (issue is prominent when it's lazy-loaded), it's crashing PF's ToolbarFilter (we don't use ToolbarFilter directly, it's internally used by console's ListPageFilter component which we import). Please check: patternfly/patternfly-react#12352 for more details.

As a temporary fix, added a wrapper around the useModal launcher, a slight delay before opening the modal preventing any interference with the ToolbarFilter (or ListPageFilter) ongoing lifecycle (eg: unmounting).
Also, added an error boundary around ListPageFilter as a safety measure, in rare case if crash still happens it will silently remove the filter instead of displaying error or breaking the page.

More permanent and better fix will be to:

  1. Either, open a Jira on OCP console for updating PF to 6.4.3 or newer (https://github.com/openshift/console/blob/release-4.22/frontend/package.json#L158).
  2. Or, remove ListPageFilter which is now a deprecated component (https://github.com/openshift/console/blob/release-4.22/frontend/packages/console-dynamic-plugin-sdk/release-notes/4.19.md?plain=1#L16).

@SanjalKatiyar

Copy link
Copy Markdown
Collaborator Author

/cherry-pick release-4.22

@openshift-cherrypick-robot

Copy link
Copy Markdown

@SanjalKatiyar: once the present PR merges, I will cherry-pick it on top of release-4.22 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-4.22

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.

@SanjalKatiyar

Copy link
Copy Markdown
Collaborator Author

/cherry-pick release-4.21-compatibility

@openshift-cherrypick-robot

Copy link
Copy Markdown

@SanjalKatiyar: once the present PR merges, I will cherry-pick it on top of release-4.21-compatibility in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-4.21-compatibility

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.

@openshift-ci

openshift-ci Bot commented May 12, 2026

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: bipuladh, SanjalKatiyar

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:

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

@SanjalKatiyar

Copy link
Copy Markdown
Collaborator Author

/test odf-console-e2e-aws

@openshift-merge-bot
openshift-merge-bot Bot merged commit 04b1996 into red-hat-storage:master May 12, 2026
9 checks passed
@openshift-cherrypick-robot

Copy link
Copy Markdown

@SanjalKatiyar: new pull request created: #2799

Details

In response to this:

/cherry-pick release-4.22

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.

@openshift-cherrypick-robot

Copy link
Copy Markdown

@SanjalKatiyar: #2744 failed to apply on top of branch "release-4.21-compatibility":

Applying: Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch)
Using index info to reconstruct a base tree...
M	packages/mco/components/create-dr-policy/select-cluster-list.tsx
M	packages/mco/components/discovered-application-wizard/wizard-steps/namespace-step/namespace-table.tsx
M	packages/ocs/storage-class/sc-form.tsx
M	packages/ocs/storage-pool/StoragePoolListPage.tsx
M	packages/odf/components/bucket-class/create-bc.tsx
M	packages/odf/components/s3-browser/bucket-overview/BucketOverview.tsx
M	packages/odf/components/s3-browser/bucket-policy/BucketPolicy.tsx
M	packages/odf/components/s3-browser/buckets-list-page/bucketsListPage.tsx
M	packages/odf/components/s3-browser/cors-details/CorsDetailsPage.tsx
M	packages/odf/components/s3-browser/cors-rules-list/CORSRulesList.tsx
M	packages/odf/components/s3-browser/lifecycle-rules-list/LifecycleRulesList.tsx
M	packages/odf/components/s3-browser/object-details/ObjectDetailsSidebar.tsx
M	packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx
M	packages/odf/components/s3-browser/objects-list/ObjectsList.tsx
M	packages/odf/components/s3-iam/users-list-page/UsersListPage.tsx
A	packages/odf/components/s3-vectors/vector-bucket-overview/VectorBucketOverview.tsx
A	packages/odf/components/s3-vectors/vector-bucket-policy/VectorBucketPolicy.tsx
A	packages/odf/components/s3-vectors/vector-buckets-list-page/VectorBucketsListPage.tsx
A	packages/odf/components/s3-vectors/vector-buckets-list-page/VectorBucketsListTable.tsx
A	packages/odf/components/s3-vectors/vector-indexes-list-page/VectorIndexesListPage.tsx
A	packages/odf/components/s3-vectors/vector-indexes-list-page/VectorIndexesListTable.tsx
M	packages/odf/components/san-dashboard/LUNCard.tsx
M	packages/odf/modals/StorageClientDistributionModal/useStorageClientAttacherAction.ts
Falling back to patching base and 3-way merge...
Auto-merging packages/odf/modals/StorageClientDistributionModal/useStorageClientAttacherAction.ts
CONFLICT (content): Merge conflict in packages/odf/modals/StorageClientDistributionModal/useStorageClientAttacherAction.ts
Auto-merging packages/odf/components/san-dashboard/LUNCard.tsx
CONFLICT (modify/delete): packages/odf/components/s3-vectors/vector-indexes-list-page/VectorIndexesListTable.tsx deleted in HEAD and modified in Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch). Version Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) of packages/odf/components/s3-vectors/vector-indexes-list-page/VectorIndexesListTable.tsx left in tree.
CONFLICT (modify/delete): packages/odf/components/s3-vectors/vector-indexes-list-page/VectorIndexesListPage.tsx deleted in HEAD and modified in Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch). Version Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) of packages/odf/components/s3-vectors/vector-indexes-list-page/VectorIndexesListPage.tsx left in tree.
CONFLICT (modify/delete): packages/odf/components/s3-vectors/vector-buckets-list-page/VectorBucketsListTable.tsx deleted in HEAD and modified in Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch). Version Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) of packages/odf/components/s3-vectors/vector-buckets-list-page/VectorBucketsListTable.tsx left in tree.
CONFLICT (modify/delete): packages/odf/components/s3-vectors/vector-buckets-list-page/VectorBucketsListPage.tsx deleted in HEAD and modified in Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch). Version Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) of packages/odf/components/s3-vectors/vector-buckets-list-page/VectorBucketsListPage.tsx left in tree.
CONFLICT (modify/delete): packages/odf/components/s3-vectors/vector-bucket-policy/VectorBucketPolicy.tsx deleted in HEAD and modified in Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch). Version Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) of packages/odf/components/s3-vectors/vector-bucket-policy/VectorBucketPolicy.tsx left in tree.
CONFLICT (modify/delete): packages/odf/components/s3-vectors/vector-bucket-overview/VectorBucketOverview.tsx deleted in HEAD and modified in Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch). Version Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch) of packages/odf/components/s3-vectors/vector-bucket-overview/VectorBucketOverview.tsx left in tree.
Auto-merging packages/odf/components/s3-iam/users-list-page/UsersListPage.tsx
Auto-merging packages/odf/components/s3-browser/objects-list/ObjectsList.tsx
Auto-merging packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx
CONFLICT (content): Merge conflict in packages/odf/components/s3-browser/objects-list/ObjectListWithSidebar.tsx
Auto-merging packages/odf/components/s3-browser/object-details/ObjectDetailsSidebar.tsx
Auto-merging packages/odf/components/s3-browser/lifecycle-rules-list/LifecycleRulesList.tsx
Auto-merging packages/odf/components/s3-browser/cors-rules-list/CORSRulesList.tsx
Auto-merging packages/odf/components/s3-browser/cors-details/CorsDetailsPage.tsx
Auto-merging packages/odf/components/s3-browser/buckets-list-page/bucketsListPage.tsx
Auto-merging packages/odf/components/s3-browser/bucket-policy/BucketPolicy.tsx
CONFLICT (content): Merge conflict in packages/odf/components/s3-browser/bucket-policy/BucketPolicy.tsx
Auto-merging packages/odf/components/s3-browser/bucket-overview/BucketOverview.tsx
Auto-merging packages/odf/components/bucket-class/create-bc.tsx
Auto-merging packages/ocs/storage-pool/StoragePoolListPage.tsx
Auto-merging packages/ocs/storage-class/sc-form.tsx
Auto-merging packages/mco/components/discovered-application-wizard/wizard-steps/namespace-step/namespace-table.tsx
Auto-merging packages/mco/components/create-dr-policy/select-cluster-list.tsx
CONFLICT (content): Merge conflict in packages/mco/components/create-dr-policy/select-cluster-list.tsx
error: Failed to merge in the changes.
hint: Use 'git am --show-current-patch=diff' to see the failed patch
hint: When you have resolved this problem, run "git am --continue".
hint: If you prefer to skip this patch, run "git am --skip" instead.
hint: To restore the original branch and stop patching, run "git am --abort".
hint: Disable this message with "git config set advice.mergeConflict false"
Patch failed at 0001 Add sdk-wrapper for ListPageFilter (error boundary) and useModal (deferred launch)

Details

In response to this:

/cherry-pick release-4.21-compatibility

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants