MGMT-24304: On disconnected environment no Openshift version is set by default on standalone cluster details page and no version is shown in the dropdown till Show all available are shown

[jgyselov]

https://redhat.atlassian.net/browse/MGMT-24304

With OCP Console 4.22 the customOpenshiftSelect fallback wasn't getting set (likely to React 18 concurrency changes).

Needs: stolostron/console#6242

Summary by CodeRabbit

• Style

  • Updated dropdown components to use full-width styling for improved consistency and better UI presentation.

• Improvements

  • Enhanced focus behavior in dropdown menus when selecting items for improved keyboard navigation experience.

[openshift-ci-robot]

@jgyselov: This pull request references MGMT-24304 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 bug to target the "5.0.0" version, but no target version was set.

Details

In response to this:

https://redhat.atlassian.net/browse/MGMT-24304

With OCP Console 4.22 the customOpenshiftSelect fallback wasn't getting set (likely to React 18 concurrency changes).

Needs:

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]

Warning

Rate limit exceeded

@jgyselov has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 42 minutes and 13 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b2073780-f6d7-4441-9fa0-50c7a661118b

📥 Commits

Reviewing files that changed from the base of the PR and between 1910230 and dbe4668.

📒 Files selected for processing (4)

• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ACMClusterDeploymentDetailsStep.tsx
• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDeploymentDetailsStep.tsx
• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDetailsFormFields.tsx
• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/useDetailsFormik.tsx

📝 Walkthrough

Walkthrough

This PR refactors cluster deployment details form initialization by extracting shared Formik setup into a reusable useDetailsFormik hook, eliminating duplicate fallback logic and centralizing OCP version/networkType resolution. The deployment step components now pass expanded version parameters to the hook, while form fields simplify to rely on pre-computed values. PatternFly dropdowns are updated for improved styling and focus behavior.

Changes

Cluster Deployment Details Form Initialization Refactor

Layer / File(s)	Summary
useDetailsFormik hook implementation libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/useDetailsFormik.tsx	New React hook memoizes cluster context, initial form values (including OCP version fallback logic and networkType resolution via getNetworkType), and validation schema. Centralizes logic previously scattered across form components.
Update deployment step components to use hook libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDeploymentDetailsStep.tsx, libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ACMClusterDeploymentDetailsStep.tsx	Both step components refactored to import useDetailsFormik from dedicated module, compute allOcpVersions via getOCPVersions with extended parameters, and pass both ocpVersions and allOcpVersions to the hook for form initialization.
Simplify form field component and update dropdown styling libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDetailsFormFields.tsx, libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx, libs/ui-lib/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx	ClusterDetailsFormFields removes getNetworkType import and eliminates mount-time fallback initialization (logic moved to useDetailsFormik). Dropdown components switch PatternFly MenuToggle to isFullWidth prop and enable shouldFocusToggleOnSelect for improved UX and consistency.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• openshift-assisted/assisted-installer-ui#3019: Refactors ClusterDeployment/clusterDetails form initialization into useDetailsFormik, directly addressing version-selection and form-field behavior changes in the same component.
• openshift-assisted/assisted-installer-ui#3047: Adjusts networkType fallback logic when OpenShift version is empty/hidden, directly related to the networkType resolution moved into useDetailsFormik in this PR.
• openshift-assisted/assisted-installer-ui#3372: Modifies cluster deployment details form behavior around OpenShift version handling and networkType derivation, intersecting with this PR's refactoring of initialValues/validationSchema through useDetailsFormik.

Suggested labels

lgtm, approved, size/M

Suggested reviewers

• rawagner
• ElayAharoni
• ammont82

Poem

🐰 A hook extracted, the form fields now lean,
With useDetailsFormik, the cleanest we've seen.
OCP versions fall back, networkType aligned,
Dropdowns now sparkle with PatternFly's shine.
Refactored with care, the UI's refined! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the core issue fixed in the PR: ensuring OpenShift version defaults are set in disconnected environments and appear in dropdowns. It matches the main objective described in the PR description and commit messages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[jgyselov]

/cherry-pick releases/v2.18-cim

[openshift-cherrypick-robot]

@jgyselov: once the present PR merges, I will cherry-pick it on top of releases/v2.18-cim in a new PR and assign it to you.

Details

In response to this:

/cherry-pick releases/v2.18-cim

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.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

libs/ui-lib/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx (1)

83-83: ⚡ Quick win

Use the onOpenChange boolean argument instead of toggling local state.

Line 83 should set the explicit next state (setIsOpen(nextIsOpen)) rather than !isOpen; inversion can desync under repeated/open-close events.

Suggested patch

-        onOpenChange={() => setIsOpen(!isOpen)}
+        onOpenChange={(_event, nextIsOpen) => setIsOpen(nextIsOpen)}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@libs/ui-lib/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx`
at line 83, The onOpenChange handler in ExternalPlatformsDropdown currently
toggles local state with setIsOpen(!isOpen), which can desync; change the
handler to accept the boolean argument and call setIsOpen(nextIsOpen) (use the
provided parameter name such as nextIsOpen or isOpenArg) so the dropdown state
is set explicitly; update the arrow function attached to onOpenChange to receive
the boolean and pass it to setIsOpen instead of inverting the existing isOpen
variable.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/useDetailsFormik.tsx`:
- Line 82: The useMemo that computes initialValues currently uses an empty
dependency array (and disables the lint rule), which freezes initialValues after
mount; update the dependency array for the useMemo that returns initialValues to
include the actual reactive inputs [cluster, ocpVersions, allOcpVersions],
remove the // eslint-disable-line react-hooks/exhaustive-deps comment, and
ensure any values referenced inside the useMemo (e.g., cluster, ocpVersions,
allOcpVersions) are listed so initialValues updates when those change.
- Line 1: Replace the non-ESM import with the standard ESM React import by
changing the module import at the top of useDetailsFormik to use "import React
from 'react';" (update any JSX typing/import expectations in the file
accordingly). Locate the useEffect (inside useDetailsFormik) that currently uses
an empty dependency array with an eslint-disable comment and remove the
eslint-disable; then either add the correct dependencies to the dependency array
or refactor the effect body to use stable refs or memoized callbacks
(useRef/useCallback/useMemo) so the dependency list is accurate—ensure any
helper functions or values referenced inside the effect (e.g., formik
values/handlers or local functions) are included or stabilized to satisfy
react-hooks/exhaustive-deps.

---

Nitpick comments:
In
`@libs/ui-lib/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx`:
- Line 83: The onOpenChange handler in ExternalPlatformsDropdown currently
toggles local state with setIsOpen(!isOpen), which can desync; change the
handler to accept the boolean argument and call setIsOpen(nextIsOpen) (use the
provided parameter name such as nextIsOpen or isOpenArg) so the dropdown state
is set explicitly; update the arrow function attached to onOpenChange to receive
the boolean and pass it to setIsOpen instead of inverting the existing isOpen
variable.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 287bb707-6695-468c-82e0-32a6c7c72fba

📥 Commits

Reviewing files that changed from the base of the PR and between e775971 and 1910230.

📒 Files selected for processing (6)

• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ACMClusterDeploymentDetailsStep.tsx
• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDeploymentDetailsStep.tsx
• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/ClusterDetailsFormFields.tsx
• libs/ui-lib/lib/cim/components/ClusterDeployment/clusterDetails/useDetailsFormik.tsx
• libs/ui-lib/lib/cim/components/common/CpuArchitectureDropdown.tsx
• libs/ui-lib/lib/common/components/clusterConfiguration/ExternalPlatformsDropdown.tsx

[asadawar]

Hi @jgyselov — heads up, there's a similar issue on the standalone OCM side. The disconnected BasicStep.tsx (libs/ui-lib/lib/ocm/components/clusterWizard/disconnected/) has the OpenShift version hardcoded to "4.20", so 4.21/4.22 aren't available when the disconnected toggle is enabled. Opened a separate PR to fix it: #3731 (linked to OCPBUGS-86070).

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jgyselov, LiorSoffer

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:

• OWNERS [LiorSoffer,jgyselov]

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

[openshift-cherrypick-robot]

@jgyselov: new pull request created: #3765

Details

In response to this:

/cherry-pick releases/v2.18-cim

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.