MGMT-21827: Improve alert spacing

[jgyselov]

https://issues.redhat.com/browse/MGMT-21827

Before:

After:

Summary by CodeRabbit

• New Features

  • Added an inline info alert about kubeconfig availability when applicable.
  • Introduced a post-install alert with a direct platform link when available.
  • Enhanced “Add Hosts” alert with contextual title, dynamic platform-specific messaging, and a clickable console link.

• Refactor

  • Reorganized alerts into a stacked layout for clearer spacing and readability.
  • Separated detail list and alert into distinct layout blocks without changing behavior.

[openshift-ci-robot]

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

Details

In response to this:

https://issues.redhat.com/browse/MGMT-21827

Before:

After:

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.

[jgyselov]

/cherry-pick releases/v2.46

[openshift-cherrypick-robot]

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

Details

In response to this:

/cherry-pick releases/v2.46

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]

Walkthrough

Refactors UI layout in two components. DownloadIso splits a combined StackItem into separate items for DetailList and Alert. ClusterDetailStatusMessages replaces a fragment with a Stack layout, wraps alerts in StackItems, adjusts Add Hosts alert content/title, adds a kubeconfig info alert, and conditionally renders a PlatformLink-based post-install alert.

Changes

Cohort / File(s)	Summary
Layout separation in Download ISO libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx	Split the DetailList and subsequent Alert into separate PatternFly StackItem blocks; no functional changes.
Status messages layout and conditional alerts libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx	Replaced fragment with Stack; wrapped alerts in StackItem; added kubeconfig inline info Alert under numeric inactiveDeletionHours when kubeconfig is downloadable; updated Add Hosts alert title/content and added data-testid; added conditional PlatformLink-based PostInstallAlert.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant B as Browser
  participant C as ClusterDetailStatusMessages
  participant S as State/Props
  participant L as PF Stack
  participant A as Alerts

  B->>C: Render component
  C->>S: Read inactiveDeletionHours, kubeconfigAvailable, platformType, platformLink
  C->>L: Initialize Stack layout
  alt Add Hosts condition
    C->>A: Render Add Hosts Alert (StackItem)<br/>- dynamic title and paragraph<br/>- console link
  end
  alt kubeconfig info condition
    C->>A: Render kubeconfig info Alert (StackItem)
  end
  alt platformLink present
    C->>A: Render PostInstallAlert with PlatformLink (StackItem)
  end
  C-->>B: Stack with conditional alerts

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• ABI: Do not show kubeconfig deletion info #2926 — Also modifies ClusterDetailStatusMessages kubeconfig alert rendering and conditions.
• MGMT-21611: Add DevPreview badge to chatbot and update privacy msg #3144 — Similar refactor replacing fragments with Stack/StackItem across UI alerts.

Suggested reviewers

• ElayAharoni
• celdrake

Poem

A hop and a stack, neat rows align,
Alerts now queue in a tidy line.
Kubeconfig whispers, “ready to go,”
Hosts add in chorus, platform aglow.
With links that sparkle, UIs that flow—
A rabbit approves, with a jubilant “woah!” 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly captures the primary change—improving alert spacing—and directly relates to the visual layout adjustments made in the diff, while remaining clear and focused on the main objective.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.}

[openshift-ci-robot]

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

Details

In response to this:

https://issues.redhat.com/browse/MGMT-21827

Before:

After:

Summary by CodeRabbit

• New Features

• Added an inline info alert about kubeconfig availability when applicable.

• Introduced a post-install alert with a direct platform link when available.

• Enhanced “Add Hosts” alert with contextual title, dynamic platform-specific messaging, and a clickable console link.

• Refactor

• Reorganized alerts into a stacked layout for clearer spacing and readability.

• Separated detail list and alert into distinct layout blocks without changing behavior.

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]

Actionable comments posted: 0

🧹 Nitpick comments (2)

libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx (2)

46-62: Consider consolidating the alert title into a single template literal.

The kubeconfig alert logic is correct and the conditional rendering is appropriate. However, the title construction on lines 56-58 mixes string concatenation styles (template literals with + operator), which could be simplified for better readability.

Apply this diff to consolidate the string construction:

           <Alert
             variant="info"
             isInline
             title={
               dateDifference > 0
-                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                  `deleted from Assisted Installer's service in ${dateDifference} days.`
+                ? `Download and save your kubeconfig file in a safe place. This file will be automatically deleted from Assisted Installer's service in ${dateDifference} days.`
                 : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
             }
           />

---

50-62: Prefer template literals for the alert title.

The kubeconfig alert message uses string concatenation. Template literals would improve readability.

Apply this diff:

           <Alert
             variant="info"
             isInline
             title={
-              dateDifference > 0
-                ? `Download and save your kubeconfig file in a safe place. This file will be automatically ` +
-                  `deleted from Assisted Installer's service in ${dateDifference} days.`
-                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
+              dateDifference > 0
+                ? `Download and save your kubeconfig file in a safe place. This file will be automatically deleted from Assisted Installer's service in ${dateDifference} days.`
+                : `Kubeconfig file was automatically deleted ${inactiveDeletionDays} days after installation.`
             }
           />

Note: This alert appears to be new functionality beyond the PR's stated objective of "improving alert spacing." Verify this addition is intentional.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 930f49a and 43a26f0.

📒 Files selected for processing (2)

• libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx (1 hunks)
• libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx (3)

libs/ui-lib/lib/common/components/hosts/utils.ts (1)

• canDownloadKubeconfig (99-102)

libs/ui-lib/lib/common/selectors/clusterSelectors.ts (1)

• isClusterPlatformTypeVM (119-122)

libs/ui-lib/lib/common/config/docs_links.ts (1)

• REDHAT_CONSOLE_OPENSHIFT (140-140)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: unit-tests
• GitHub Check: translation-files
• GitHub Check: tests
• GitHub Check: circular-deps
• GitHub Check: lint
• GitHub Check: format

🔇 Additional comments (7)

libs/ui-lib/lib/common/components/clusterConfiguration/DownloadIso.tsx (2)

106-107: LGTM! Layout structure improved.

Splitting the DetailList and Alert into separate StackItems provides better spacing control and aligns with the PR objective to improve alert spacing. The change is consistent with the Stack/StackItem pattern already established in this file.

---

106-107: LGTM! Spacing improvement aligns with PR objective.

Separating the DetailList and Alert into individual StackItem components provides better visual spacing and aligns with the PR's goal of improving alert layout.

libs/ui-lib/lib/ocm/components/clusterDetail/ClusterDetailStatusMessages.tsx (5)

63-82: LGTM! Alert properly refactored with improved structure.

The Add Hosts alert has been successfully wrapped in a StackItem and the title content updated to use JSX for better formatting. The implementation correctly:

• Adds a test ID for improved testability
• Renders platform-specific messages using conditional logic
• Includes proper security attributes (rel="noopener noreferrer") for the external link
• Uses the PatternFly ExternalLinkAltIcon for visual indication

---

83-87: LGTM! PostInstallAlert integrated correctly.

The new PostInstallAlert is properly wrapped in a StackItem and conditionally rendered based on the presence of a platform link. This maintains consistency with the Stack-based layout pattern and provides appropriate post-installation guidance for platform-integrated clusters.

---

2-2: LGTM! Stack layout improves alert spacing.

The migration from a fragment to a Stack with hasGutter prop provides consistent spacing between alerts, aligning with the PR's spacing improvement objective.

Also applies to: 46-46, 88-88

---

83-87: Verify PostInstallAlert addition scope.

The StackItem wrapper is consistent with the spacing improvements. However, this appears to be a new alert being added conditionally based on platformLink.

Confirm that adding this new PostInstallAlert is intentional for a PR focused on "improving alert spacing." This addition appears to introduce new functionality beyond the stated objective.

---

63-82: Confirm intentionality of content updates

PatternFly 6’s Alert title prop accepts ReactNode, so the JSX title is valid. The platform-specific messaging and external console link extend beyond spacing and testability improvements—confirm these content changes are intentional.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

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

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 [ammont82,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: #3206

Details

In response to this:

/cherry-pick releases/v2.46

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.