console icon indicating copy to clipboard operation
console copied to clipboard
verified publisher icon openshift

CONSOLE-4989: bump to `react-redux` 8 POC

Open logonoff opened this issue 3 weeks ago • 4 comments

Depends on https://github.com/openshift/console/pull/15835

Introduces pre-typed hooks useConsoleDispatch, useConsoleSelector, and useConsoleStore per the recommendation in https://react-redux.js.org/tutorials/typescript-quick-start.

AI made the minimum changes here to decrease the diff but we should consistently use our own hooks some day

logonoff avatar Dec 16 '25 22:12 logonoff

@logonoff: This pull request references CONSOLE-4989 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 story to target the "4.22.0" version, but no target version was set.

In response to this:

Depends on https://github.com/openshift/console/pull/15835

Introduces pre-typed hooks useConsoleDispatch, useConsoleSelector, and useConsoleStore per the recommendation in https://react-redux.js.org/tutorials/typescript-quick-start.

AI made the minimum changes here to decrease the diff but we should consistently use our own hooks some day

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-robot avatar Dec 16 '25 22:12 openshift-ci-robot

Walkthrough

This pull request upgrades react-redux from version 7.2.9 to 8.1.3 and establishes a migration path by introducing custom console-specific Redux hooks (useConsoleDispatch, useConsoleSelector, useConsoleStore) that wrap react-redux equivalents. The hooks are systematically applied across the codebase to replace direct react-redux usage, with targeted refactorings of connected components to functional hooks-based implementations and updated type signatures for better TypeScript support.

Changes

Cohort / File(s) Summary
Dependency and Infrastructure Setup
frontend/package.json, frontend/packages/console-shared/src/hooks/useConsole{Dispatch,Selector,Store}.ts, frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts		 react-redux upgraded from 7.2.9 to 8.1.3; new typed hook abstractions introduced (useConsoleDispatch, useConsoleSelector, useConsoleStore) to provide compile-safe Redux access; new SDKDispatch type alias added for dynamic plugin SDK.
Console Action and Hook Updates
frontend/packages/console-app/src/actions/hooks/use{Binding,Group}Actions.ts, frontend/packages/console-app/src/actions/providers/user-provider.ts, frontend/packages/console-shared/src/{components/dashboard/utilization-card/prometheus-hook.ts,hooks/useDashboardResources.ts}, frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx, frontend/public/components/{masthead/masthead-toolbar.tsx,useImpersonateRefreshFeatures.ts}		 React-Redux hooks systematically replaced with console-specific equivalents; RootState imports removed where replaced by typed hooks; impersonation change detection refined in useImpersonateRefreshFeatures.
SDK Hook Typing Enhancements
frontend/packages/console-dynamic-plugin-sdk/src/utils/k8s/hooks/useK8s{WatchResource,WatchResources}.ts		 useDispatch invoked with SDKDispatch generic; useSelector updated with SDKStoreState typing and explicit ImmutableMap casts; import ordering normalized; type-only imports applied.
Public Action Type Updates
frontend/public/actions/dashboards.ts		 StopWatchURLAction and StopWatchPrometheusAction return types updated from void to ReturnType<typeof stopWatch> for consistency.
Feature Flag and Action Controller Refactor
frontend/public/actions/features.ts, frontend/packages/console-app/src/components/flags/FeatureFlagExtensionLoader.tsx, frontend/packages/console-app/src/components/flags/FeatureFlagExtensionHookResolver.tsx, frontend/public/components/app.tsx		 featureFlagController converted to non-exported constant with deferred dispatch; FeatureFlagExtensionLoader refactored to use internal useFeatureFlagController hook; FeatureFlagExtensionHookResolver converted to named export; import statements updated to use named exports.
Component Migration
frontend/public/components/api-explorer.tsx		 APIResourcesList converted from Redux-connected HOC (withRouter + connect) to functional component using useLocation and useConsoleSelector hooks; stateToProps and APIResourcesListPropsFromState removed.
Documentation Update
frontend/packages/console-dynamic-plugin-sdk/README.md		 Console 4.22.X changelog updated noting dynamic plugin runtime upgrade to react-redux v8 and compatibility requirement for plugins.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

  • FeatureFlagExtensionLoader.tsx: Introduces new useFeatureFlagController hook with debounced callbacks and Redux integration; requires careful verification of dispatch sequencing and ref-based stale closure avoidance
  • api-explorer.tsx: Significant structural refactoring from HOC to functional component; verify state selection logic and selector performance
  • useImpersonateRefreshFeatures.ts: Logic changes with effect dependency optimization and deep equality checks on groups; validate impersonation change detection correctness
  • Public API changes: StopWatchURLAction and StopWatchPrometheusAction return types modified; verify downstream compatibility and usage patterns
  • Systematic hook replacement: While repetitive, verify all hook substitutions follow the same pattern and that no RootState type mismatches exist across files
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to data retention organization setting

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 10d244370ce52b7d5b33e7d5ddd91f56d0f702c7 and 6813aebe081f0425f8942a4730274f7dff645f0b.

⛔ Files ignored due to path filters (1)
  • frontend/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (22)
  • frontend/package.json (1 hunks)
  • frontend/packages/console-app/src/actions/hooks/useBindingActions.ts (2 hunks)
  • frontend/packages/console-app/src/actions/hooks/useGroupActions.ts (1 hunks)
  • frontend/packages/console-app/src/actions/providers/user-provider.ts (1 hunks)
  • frontend/packages/console-app/src/components/flags/FeatureFlagExtensionHookResolver.tsx (1 hunks)
  • frontend/packages/console-app/src/components/flags/FeatureFlagExtensionLoader.tsx (1 hunks)
  • frontend/packages/console-dynamic-plugin-sdk/README.md (1 hunks)
  • frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts (2 hunks)
  • frontend/packages/console-dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sWatchResource.ts (3 hunks)
  • frontend/packages/console-dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sWatchResources.ts (3 hunks)
  • frontend/packages/console-shared/src/components/dashboard/utilization-card/prometheus-hook.ts (1 hunks)
  • frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1 hunks)
  • frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1 hunks)
  • frontend/packages/console-shared/src/hooks/useConsoleStore.ts (1 hunks)
  • frontend/packages/console-shared/src/hooks/useDashboardResources.ts (3 hunks)
  • frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx (3 hunks)
  • frontend/public/actions/dashboards.ts (1 hunks)
  • frontend/public/actions/features.ts (1 hunks)
  • frontend/public/components/api-explorer.tsx (3 hunks)
  • frontend/public/components/app.tsx (1 hunks)
  • frontend/public/components/masthead/masthead-toolbar.tsx (2 hunks)
  • frontend/public/components/useImpersonateRefreshFeatures.ts (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
  • frontend/packages/console-dynamic-plugin-sdk/README.md
  • frontend/public/components/app.tsx
  • frontend/packages/console-app/src/components/flags/FeatureFlagExtensionHookResolver.tsx
  • frontend/packages/console-app/src/actions/hooks/useGroupActions.ts
  • frontend/package.json
  • frontend/packages/operator-lifecycle-manager/src/components/operand/index.tsx
  • frontend/public/components/useImpersonateRefreshFeatures.ts
  • frontend/packages/console-dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sWatchResources.ts
  • frontend/packages/console-dynamic-plugin-sdk/src/utils/k8s/hooks/useK8sWatchResource.ts
🧰 Additional context used
📓 Path-based instructions (1)
**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

  • frontend/packages/console-shared/src/hooks/useConsoleStore.ts
  • frontend/packages/console-shared/src/hooks/useConsoleSelector.ts
  • frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts
  • frontend/public/actions/dashboards.ts
  • frontend/packages/console-shared/src/hooks/useDashboardResources.ts
  • frontend/public/actions/features.ts
  • frontend/public/components/api-explorer.tsx
  • frontend/packages/console-shared/src/components/dashboard/utilization-card/prometheus-hook.ts
  • frontend/packages/console-app/src/components/flags/FeatureFlagExtensionLoader.tsx
  • frontend/packages/console-app/src/actions/hooks/useBindingActions.ts
  • frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts
  • frontend/public/components/masthead/masthead-toolbar.tsx
  • frontend/packages/console-app/src/actions/providers/user-provider.ts
🧬 Code graph analysis (9)
frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1)
frontend/public/redux.ts (1)
  • RootState (19-27)
frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)
frontend/public/redux.ts (1)
  • RootState (19-27)
frontend/packages/console-shared/src/hooks/useDashboardResources.ts (2)
frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)
  • useConsoleDispatch (14-14)
frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1)
  • useConsoleSelector (12-12)
frontend/public/actions/features.ts (2)
frontend/packages/console-dynamic-plugin-sdk/src/extensions/feature-flags.ts (1)
  • SetFeatureFlag (45-45)
frontend/public/actions/flags.ts (1)
  • setFlag (23-24)
frontend/public/components/api-explorer.tsx (4)
frontend/public/components/RBAC/role.jsx (2)
  • location (347-347)
  • location (377-377)
frontend/packages/console-shared/src/hooks/useLocation.ts (1)
  • useLocation (4-5)
frontend/packages/console-dynamic-plugin-sdk/src/extensions/console-types.ts (1)
  • K8sResourceKindReference (97-97)
frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1)
  • useConsoleSelector (12-12)
frontend/packages/console-shared/src/components/dashboard/utilization-card/prometheus-hook.ts (3)
frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)
  • useConsoleDispatch (14-14)
frontend/public/actions/dashboards.ts (2)
  • watchPrometheusQuery (87-113)
  • stopWatchPrometheusQuery (124-125)
frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1)
  • useConsoleSelector (12-12)
frontend/packages/console-app/src/components/flags/FeatureFlagExtensionLoader.tsx (4)
frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)
  • useConsoleDispatch (14-14)
frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1)
  • useConsoleSelector (12-12)
frontend/packages/console-dynamic-plugin-sdk/src/extensions/feature-flags.ts (3)
  • SetFeatureFlag (45-45)
  • FeatureFlagHookProvider (25-31)
  • isFeatureFlagHookProvider (40-41)
frontend/public/actions/flags.ts (1)
  • setFlag (23-24)
frontend/packages/console-app/src/actions/hooks/useBindingActions.ts (1)
frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)
  • useConsoleDispatch (14-14)
frontend/packages/console-app/src/actions/providers/user-provider.ts (3)
frontend/public/module/k8s/types.ts (1)
  • UserKind (1001-1004)
frontend/packages/console-dynamic-plugin-sdk/src/extensions/actions.ts (1)
  • Action (95-129)
frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)
  • useConsoleDispatch (14-14)
🔇 Additional comments (14)
frontend/public/actions/dashboards.ts (1)

136-140: LGTM! Type signatures now accurately reflect the action return types.

The updated return types correctly specify that these action creators return action objects (via ReturnType<typeof stopWatch>) rather than void, aligning the type declarations with their existing implementations at lines 124-126.

frontend/packages/console-app/src/actions/hooks/useBindingActions.ts (1)

16-16: LGTM! Clean migration to typed console hook.

The replacement of useDispatch with useConsoleDispatch maintains type safety while aligning with the react-redux v8 upgrade strategy.

Also applies to: 40-40

frontend/packages/console-dynamic-plugin-sdk/src/app/redux-types.ts (1)

2-3: LGTM! Proper TypeScript support for thunk-enabled dispatch.

The new SDKDispatch type correctly defines the dispatch signature for redux-thunk integration with the SDK store state.

Also applies to: 33-33

frontend/public/actions/features.ts (1)

140-150: LGTM! TOCTOU race condition properly resolved.

The implementation correctly addresses the previous race condition concern by performing the flag value check inside the microtask, ensuring atomicity while maintaining the deferral strategy to avoid React rendering conflicts.

frontend/packages/console-shared/src/hooks/useConsoleStore.ts (1)

1-12: LGTM! Type-safe store access hook.

The useConsoleStore hook properly wraps useStore with accurate typing for the console store. The TODO note about react-redux v9 is a helpful forward-looking reminder.

frontend/packages/console-shared/src/hooks/useConsoleDispatch.ts (1)

1-14: LGTM! Type-safe dispatch hook for thunk actions.

The useConsoleDispatch hook correctly wraps useDispatch with ThunkDispatch typing for the console RootState, enabling proper TypeScript support for async actions.

frontend/packages/console-app/src/actions/providers/user-provider.ts (1)

9-9: LGTM! Consistent migration to typed console hook.

The migration from useDispatch to useConsoleDispatch maintains type safety and aligns with the codebase-wide react-redux v8 upgrade pattern.

Also applies to: 16-16

frontend/packages/console-shared/src/components/dashboard/utilization-card/prometheus-hook.ts (1)

10-11: LGTM! Proper migration to console hooks.

The migration from useDispatch/useSelector to useConsoleDispatch/useConsoleSelector is correct. The type cast to ImmutableMap<string, any> is necessary given the Immutable.js state structure.

Also applies to: 15-15, 23-25

frontend/public/components/masthead/masthead-toolbar.tsx (1)

4-5: LGTM! Comprehensive migration to console hooks.

The migration from useDispatch/useSelector to useConsoleDispatch/useConsoleSelector is thorough and correct, maintaining all existing functionality while providing improved type safety for the react-redux v8 upgrade.

Also applies to: 163-163, 171-176

frontend/packages/console-shared/src/hooks/useConsoleSelector.ts (1)

1-12: LGTM!

Clean implementation following the react-redux TypeScript quick start pattern. The TODO for future v9 migration is a good forward-looking note.

frontend/packages/console-shared/src/hooks/useDashboardResources.ts (1)

10-11: LGTM!

The migration from useDispatch/useSelector to useConsoleDispatch/useConsoleSelector is clean and addresses the previous architectural concern about package dependencies. The hooks are now sourced from within the same console-shared package.

Also applies to: 23-23, 38-41

frontend/packages/console-app/src/components/flags/FeatureFlagExtensionLoader.tsx (2)

13-38: LGTM!

The TOCTOU fix is correctly implemented using the ref pattern. The flagsRef is updated via useEffect when flags changes, and the microtask reads from flagsRef.current to get fresh state, avoiding the stale closure issue. The dependency array correctly includes only dispatch.

40-66: LGTM!

The component correctly integrates the new controller hook and maintains the same rendering logic for feature flag providers.

frontend/public/components/api-explorer.tsx (1)

153-157: LGTM!

Clean migration from the HOC pattern (compose(withRouter, connect(...))) to hooks. The component now uses useLocation() for routing and useConsoleSelector to access the k8s models from state, which is more idiomatic for modern React.

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Dec 16 '25 22:12 coderabbitai[bot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff

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:

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

openshift-ci[bot] avatar Dec 17 '25 15:12 openshift-ci[bot]

/label px-approved /label docs-approved

logonoff avatar Dec 18 '25 20:12 logonoff

@logonoff: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name Commit Details Required Rerun command
ci/prow/images 6813aebe081f0425f8942a4730274f7dff645f0b link unknown /test images

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

openshift-ci[bot] avatar Dec 19 '25 01:12 openshift-ci[bot]