Skip to content

ACM-32879-Appset-Topology-Topology-Alert-window-5#6493

Open
jeswanke wants to merge 14 commits into
stolostron:mainfrom
jeswanke:ACM-32879-Appset-Topology-Topology-Alert-window-5
Open

ACM-32879-Appset-Topology-Topology-Alert-window-5#6493
jeswanke wants to merge 14 commits into
stolostron:mainfrom
jeswanke:ACM-32879-Appset-Topology-Topology-Alert-window-5

Conversation

@jeswanke

@jeswanke jeswanke commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

📝 Summary

implementation notes:
https://docs.google.com/document/d/1vourRy1EXeW3Lzkil8CubyrplJ9A2yYRIbVTF49K2tM/edit?tab=t.0#heading=h.y71s9opsqi5z

demo:
https://redhat-internal.slack.com/archives/C02684L8JMV/p1784316944188839

Ticket Summary (Title):
Appset Topology: Topology Alert window

Ticket Link:
https://redhat.atlassian.net/browse/ACM-32879

Type of Change:

  • 🐞 Bug Fix
  • ✨ Feature
  • 🔧 Refactor
  • 💸 Tech Debt
  • 🧪 Test-related
  • 📄 Docs

✅ Checklist

General

  • PR title follows the convention (e.g. ACM-12340 Fix bug with...)
  • Code builds and runs locally without errors
  • No console logs, commented-out code, or unnecessary files
  • All commits are meaningful and well-labeled
  • All new display strings are externalized for localization (English only)
  • (Nice to have) JSDoc comments added for new functions and interfaces

If Feature

  • UI/UX reviewed (if applicable)
  • All acceptance criteria met
  • Unit test coverage added or updated
  • Relevant documentation or comments included

If Bugfix

  • Root cause and fix summary are documented in the ticket (for future reference / errata)
  • Fix tested thoroughly and resolves the issue
  • Test(s) added to prevent regression

🗒️ Notes for Reviewers

Summary by CodeRabbit

  • New Features
    • Added Application Topology analysis that surfaces actionable alerts for placement issues, unhealthy resources, configuration guidance, and cluster operator checks.
    • Added topology modals to edit ApplicationSets/YAML and to view pod logs.
    • Enhanced the wizard experience with modal support and configurable height.
  • Improvements
    • Updated topology details to use a toolbar-based workflow (Logs / Edit YAML) and a richer, animated alerts list.
    • Extended Sync Editor with an initial “show changes” override and optional side-by-side diff rendering.
  • Bug Fixes
    • Protected status-related YAML paths from unintended edits during sync.

jeswanke added 4 commits July 16, 2026 10:29
Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
@openshift-ci

openshift-ci Bot commented Jul 16, 2026

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jeswanke

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

@coderabbitai

coderabbitai Bot commented Jul 16, 2026

Copy link
Copy Markdown

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

The PR adds topology alert analysis and action modals, refactors diagram construction for asynchronous alerts, introduces custom topology shapes, extends SyncEditor controls, and enables measured modal wizard layouts with callback-driven ApplicationSet editing.

Changes

Application topology

Layer / File(s) Summary
Topology analysis and contracts
frontend/.../ApplicationTopology/analysis/*, model/topology*, types.ts
Topology analysis produces placement, application, cluster, deployment, and condition alerts, with shared alert contracts, suggestions, tests, asynchronous diagram results, and pruning metadata.
Topology actions and presentation
ApplicationTopology.tsx, topology/Topology.tsx, components/*, modals/*
Topology state displays sortable alerts and opens ApplicationSet, YAML, and log modals through node actions.
Custom topology visuals and processing
topology/components/*, model/topologyAppSet.ts, model/resourceStatusesAppSet.ts
Nodes use custom multi-resource and pulse-aware ellipses; pending edge animation is removed, status rendering handles none, and shared resource fetching checks destination namespaces.

Sync editor controls

Layer / File(s) Summary
Diff preferences and protected paths
frontend/src/components/SyncEditor/*
SyncEditor accepts initial change visibility and side-by-side controls, while indexed status paths are included in protected Monaco ranges.

Wizard modal editing

Layer / File(s) Summary
Modal wizard layout
frontend/packages/react-form-wizard/src/Wizard.tsx, frontend/src/wizards/*
Wizard height and modal props are wired through measured layouts, with YAML editing disabled in modal mode.
ApplicationSet route integration
frontend/src/routes/Applications/Applications.tsx, frontend/src/routes/Applications/CreateArgoApplication/*
ApplicationSet editing uses a route wrapper for navigation callbacks, while the editor component accepts explicit resource and lifecycle props.

Estimated code review effort: 5 (Critical) | ~120 minutes

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 18

Note

Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx (1)

542-562: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Add accessibility assertions to both changed component tests.

  • frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx#L542-L562: run axe against the rendered edit page.
  • frontend/src/routes/Applications/CreateArgoApplication/CreatePushApplicationSet.test.tsx#L466-L489: run the same assertion for the push-model edit page.

As per coding guidelines, “Every component test must include an accessibility assertion with jest-axe.”

🤖 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
`@frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx`
around lines 542 - 562, Update the edit-page tests in
frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx:542-562
and
frontend/src/routes/Applications/CreateArgoApplication/CreatePushApplicationSet.test.tsx:466-489
to run jest-axe against each rendered edit page and assert that no accessibility
violations are found. Add the assertions after the existing render/readiness
steps, reusing the repository’s established axe testing pattern.

Source: Coding guidelines

frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/DetailsView.tsx (1)

121-123: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Pass the unwrapped node into the toolbar actions. renderToolbar still receives currentNode, so the Logs/Edit YAML callbacks can be invoked with the layout node instead of the underlying resource node that detailsNode unwraps to.

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/DetailsView.tsx`
around lines 121 - 123, Update the DetailsView flow around currentUpdatedNode
and renderToolbar so toolbar actions receive the unwrapped underlying resource
node from detailsNode, rather than the layout node. Ensure the Logs and Edit
YAML callbacks use this unwrapped node while preserving the existing node
selection and toolbar behavior.
🟡 Minor comments (6)
frontend/src/components/SyncEditor/SyncEditorDiff.tsx-124-124 (1)

124-124: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Make renderSideBySide dynamically reactive.

Currently, applyDiffLayoutFromContainer is invoked on mount and resize, but it is not automatically executed when renderSideBySideProp changes. If a parent component dynamically updates this prop after mounting, the diff layout will not reflect the change until the browser window is resized.

Consider adding a useEffect to trigger layout updates when the callback updates.

💡 Proposed fix to ensure reactivity
     if (diffEditorRef.current) {
       diffEditorRef.current.layout({ width, height })
     }
   }, [renderSideBySideProp])
+
+  useEffect(() => {
+    applyDiffLayoutFromContainer()
+  }, [applyDiffLayoutFromContainer])
🤖 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 `@frontend/src/components/SyncEditor/SyncEditorDiff.tsx` at line 124, Update
the SyncEditor layout effect around applyDiffLayoutFromContainer so it also runs
whenever renderSideBySideProp changes, not only on mount or resize. Add the
dependency-aware effect using the existing layout callback and preserve the
current resize behavior.
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts-264-268 (1)

264-268: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use the YAML path matching the ApplicationSet source shape.

This action always highlights spec.template.spec.sources; single-source ApplicationSets use spec.template.spec.source, so the editor cannot focus the relevant field. Select the path from appSet.specs.raw.

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts`
around lines 264 - 268, Update the edit-YAML action in the ApplicationSet
topology analysis to derive highlightEditorPath from appSet.specs.raw, using
spec.template.spec.source for single-source configurations and
spec.template.spec.sources for multi-source configurations. Preserve the
existing editYaml action and appSet node while selecting the path that matches
the actual ApplicationSet source shape.
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.test.ts-408-415 (1)

408-415: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Assert that alertsPromise exists before awaiting it.

await undefined succeeds, so this test would not catch removal of asynchronous analysis.

Proposed fix
       expect(addDiagramDetails).toHaveBeenCalled()
       expect(computeNodeStatus).toHaveBeenCalled()
       expect(diagramElements).toBeDefined()
+      expect(alertsPromise).toBeDefined()
       await alertsPromise

As per path instructions, getDiagramElements confirms that non-null statuses must create this promise.

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.test.ts`
around lines 408 - 415, Update the test around getDiagramElements to explicitly
assert that alertsPromise is defined before awaiting it, while preserving the
existing addDiagramDetails, computeNodeStatus, and diagramElements assertions.

Source: Path instructions

frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsPlacement.ts-144-146 (1)

144-146: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Dump the full Placement specification.

The fallback says “Current specification” but serializes only placement.spec.clusterSets, hiding predicates and other fields needed to diagnose unknown failures.

Proposed fix
-        const currentYaml = jsYaml.dump(placement.spec.clusterSets ?? {}, { indent: 2 }).split('\n')
+        const currentYaml = jsYaml.dump(placement.spec ?? {}, { indent: 2 }).split('\n')
🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsPlacement.ts`
around lines 144 - 146, Update the default branch of createSuggestsPlacement to
serialize the complete placement.spec object, rather than only
placement.spec.clusterSets, so the “Current specification” suggestion includes
predicates and all other fields.
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/EditAppSetModal.tsx-14-15 (1)

14-15: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Forward showWizardInput or remove it from the modal API. EditAppSetModalContent drops the prop, so any caller-provided wizard target is ignored.

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/EditAppSetModal.tsx`
around lines 14 - 15, Update the EditAppSetModal API so the showWizardInput
value is forwarded through to EditAppSetModalContent and used by the modal flow,
or remove showWizardInput from the modal props and all callers if it is no
longer needed. Ensure caller-provided wizard targets are not silently ignored.
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx-42-223 (1)

42-223: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Missing accessibility assertions in component tests.

Component tests must include an accessibility assertion using jest-axe (e.g., expect(await axe(container)).toHaveNoViolations()). As per coding guidelines, every component test must adhere to this rule.

  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx#L42-L223: Add a jest-axe assertion to the test suite.
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledNode.test.tsx#L369-L440: Add a jest-axe assertion to the custom shape tests.
🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx`
around lines 42 - 223, Add jest-axe accessibility assertions to the component
tests: in
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx
(lines 42-223), update the relevant CustomEllipse test flow to await axe on the
rendered container and assert no violations; likewise, in
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledNode.test.tsx
(lines 369-440), add the same assertion to the custom shape tests. Ensure both
suites import and use the established axe matcher setup.

Source: Coding guidelines

🧹 Nitpick comments (3)
frontend/src/wizards/WizardPage.css (1)

23-44: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift

Implement the modal layout through supported PatternFly composition.

The modal sizing currently spans direct .pf-v6-* overrides and custom HTML wrappers.

  • frontend/src/wizards/WizardPage.css#L23-L44: remove selectors overriding PatternFly internals.
  • frontend/src/wizards/WizardPage.tsx#L69-L77: replace the custom outer shell with PatternFly layout primitives.
  • frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx#L232-L246: remove the duplicate inline-styled modal wrapper.

As per coding guidelines, use PatternFly variants and modifiers instead of custom PatternFly CSS and custom HTML.

🤖 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 `@frontend/src/wizards/WizardPage.css` around lines 23 - 44, Replace the custom
modal layout with supported PatternFly composition: remove the direct .pf-v6-*
overrides in frontend/src/wizards/WizardPage.css at lines 23-44, replace the
custom outer shell in frontend/src/wizards/WizardPage.tsx at lines 69-77 with
appropriate PatternFly layout primitives and variants, and remove the duplicate
inline-styled modal wrapper in
frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx
at lines 232-246.

Source: Coding guidelines

frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/types.ts (1)

2-2: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Move the copyright header before all imports.

The required header is currently at Line 18, so this source file does not start with it.

As per coding guidelines, “All source files must start with the copyright header.”

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/types.ts`
at line 2, Move the existing copyright header in the topology types source file
to the very beginning, before the TopologyAlert import and any other content.
Preserve the header text unchanged.

Source: Coding guidelines

frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.ts (1)

28-28: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Make Service a type-only import.

Service is only used in services: Service[]; importing it as a value violates the repository’s type-only import rule.

Proposed fix
-import { Service, type Placement } from '../../../../../resources'
+import type { Placement, Service } from '../../../../../resources'

As per coding guidelines, “Use import type for type-only imports to avoid generating runtime imports.”

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.ts`
at line 28, Update the import from the resources module used by the topology
model so Service is imported as a type-only symbol, while preserving the
existing Placement import usage and services: Service[] typing.

Source: Coding guidelines

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts`:
- Around line 99-103: Update isBadDeployResourceHealth to return true when
either the normalized health status is not Healthy or the normalized sync status
is not Synced, replacing the current && condition. Reuse the existing
status-normalization logic rather than comparing raw values directly.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyAppSet.ts`:
- Around line 54-75: The placement-reference validation currently runs only when
no topology placement node exists, so missing references are skipped when one
node is present. Update the analysis flow around placement and
collectReferencedPlacements to run reference validation unconditionally,
treating a matching topology placement node or entry in placements as existing
before calling missingPlacementAlert; add a regression test covering mixed
existing and missing references from matrix or merge generators.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsApplication.ts`:
- Around line 147-169: Update createSuggestsApplication to derive the displayed
source value and YAML editor path from applicationSet.spec.template.spec,
selecting source for single-source ApplicationSets and sources otherwise. Apply
this consistently across all affected suggestions and edit actions, preserving
the existing behavior for multi-source templates. Add a regression test covering
a single-source ApplicationSet, including its rendered YAML and highlighted
editor path.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/utils.ts`:
- Around line 98-106: Update isErrorCondition to evaluate errorKeywords against
both the lowercased condition.type and condition.reason when present, rather
than selecting only one via reasonLower ?? typeLower. Preserve the existing
positive-status check and return true whenever either field contains an error
keyword.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/ApplicationTopology.tsx`:
- Around line 192-207: Handle rejection of alertsPromise in the
topology-analysis flow by adding a rejection handler that clears or otherwise
resets the displayed alerts to prevent stale results. Keep the existing
cancellation guard and finally cleanup, including analyzingTimer and isAnalyzing
state updates, unchanged.
- Around line 163-165: Update the topology-loading flow around the topology
availability check so the derived nodes and alerts state is cleared before
returning when topology is unavailable. Preserve the existing early return while
ensuring stale data from the previous application is not retained during
loading.
- Around line 220-221: Update the effect dependency array associated with the
eslint suppression to include topology, statuses, canUpdateStatuses, t, and
placements alongside startup and refreshTime. Remove the exhaustive-deps
suppression once the full dependency list is restored, preserving the existing
alert analysis logic.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/EditYamlModal.tsx`:
- Around line 397-420: Update the Save button state in the EditYamlModal
component to also disable when resources is empty or while the resource is
reloading, preventing the onSave handler from dumping resources[0] when
unavailable. Preserve the existing readOnly and editorValidationStatus checks.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/LogsModal.tsx`:
- Around line 318-342: Update the logsError handling in LogsModal so it renders
the AcmAlert within the normal log viewer layout instead of returning early.
Preserve the resource URL link and error details, while keeping the pod and
container selectors available so users can switch resources after a failure.
- Around line 220-278: Update the effect’s asynchronous handlers in LogsModal to
ignore results and errors from aborted requests. Guard both the fleetLogsRequest
and fetchRetry success and failure callbacks using their corresponding
abortController.signal.aborted (or an equivalent request-generation check),
including setLogsError and setIsLoadingLogs, while preserving updates for the
active request.
- Around line 189-208: Update the fullscreen listener setup in the useEffect
cleanup to unregister the exact callback references registered with
screenfull.on for both change and error events. Define the handlers once within
the effect, reuse them in screenfull.on and screenfull.off, and preserve the
existing state updates.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledNode.tsx`:
- Around line 90-95: In StyledNode, replace the inline CustomShape definition
inside getCustomShape with a useCallback-stabilized custom shape factory
declared before the return, using isMulti and shouldPulse as dependencies. Pass
this stable factory to DefaultNode so the custom shape component identity
remains unchanged between renders.
- Around line 90-95: In StyledNode, replace the inline getCustomShape component
factory with a useCallback-memoized customShapeFactory defined before the
return, using isMulti and shouldPulse as dependencies. Pass this stable factory
to DefaultNode so CustomShape does not remount on every render.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/TopologyAlerts.tsx`:
- Around line 173-233: The alert timers created in the sortedInputAlerts effect
and closeAction must be tracked and canceled during cleanup. Add refs for
stagger, fade, and dismissal timeout handles; register each created timer, clear
and remove them when inputs change or the component unmounts, and ensure
canceled timers cannot re-add alerts or update state.
- Around line 119-149: Use currentAlertsKey in TopologyAlerts to scope
dismissedIdsRef: accept it in the component destructuring, clear dismissedIdsRef
and related visible/dismissal state when the key changes, and ensure alerts for
a new application or analysis are eligible to display. Pass the
application/analysis key from ApplicationTopology and add a regression test
verifying a previously dismissed alert reappears after the key changes.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/css/Drawer.css`:
- Around line 25-50: Replace the `.pf-v6-c-toolbar__content`,
`.pf-v6-c-toolbar__group`, `.pf-v6-c-divider`, and `.pf-v6-c-button` overrides
with PatternFly toolbar variants/props and a local wrapper for the required
spacing and alignment. Remove selectors targeting PatternFly internals while
preserving the toolbar layout, and add the required empty line before the
`border` declaration in `.topologyDetails .details-view-toolbar`.

In
`@frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx`:
- Around line 171-174: Move the missing-ApplicationSet validation before the
JSON.parse(JSON.stringify(applicationSet)) clone in the edit flow. Return via
onApplicationSetNotFound() immediately when applicationSet is undefined, and
preserve the existing cloning and update behavior for valid ApplicationSets.

In `@frontend/src/wizards/WizardPage.tsx`:
- Line 5: Use type-only imports consistently at all affected sites: in
frontend/src/wizards/WizardPage.tsx:5-5, move ReactElement and ReactNode to
import type; in
frontend/src/routes/Applications/CreateArgoApplication/EditApplicationSetPage.tsx:4-4,
import PathParam with import type; and in
frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx:15-28,
separate type-only resource and editor symbols from runtime imports.

---

Outside diff comments:
In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/DetailsView.tsx`:
- Around line 121-123: Update the DetailsView flow around currentUpdatedNode and
renderToolbar so toolbar actions receive the unwrapped underlying resource node
from detailsNode, rather than the layout node. Ensure the Logs and Edit YAML
callbacks use this unwrapped node while preserving the existing node selection
and toolbar behavior.

In
`@frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx`:
- Around line 542-562: Update the edit-page tests in
frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx:542-562
and
frontend/src/routes/Applications/CreateArgoApplication/CreatePushApplicationSet.test.tsx:466-489
to run jest-axe against each rendered edit page and assert that no accessibility
violations are found. Add the assertions after the existing render/readiness
steps, reusing the repository’s established axe testing pattern.

---

Minor comments:
In `@frontend/src/components/SyncEditor/SyncEditorDiff.tsx`:
- Line 124: Update the SyncEditor layout effect around
applyDiffLayoutFromContainer so it also runs whenever renderSideBySideProp
changes, not only on mount or resize. Add the dependency-aware effect using the
existing layout callback and preserve the current resize behavior.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts`:
- Around line 264-268: Update the edit-YAML action in the ApplicationSet
topology analysis to derive highlightEditorPath from appSet.specs.raw, using
spec.template.spec.source for single-source configurations and
spec.template.spec.sources for multi-source configurations. Preserve the
existing editYaml action and appSet node while selecting the path that matches
the actual ApplicationSet source shape.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsPlacement.ts`:
- Around line 144-146: Update the default branch of createSuggestsPlacement to
serialize the complete placement.spec object, rather than only
placement.spec.clusterSets, so the “Current specification” suggestion includes
predicates and all other fields.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/EditAppSetModal.tsx`:
- Around line 14-15: Update the EditAppSetModal API so the showWizardInput value
is forwarded through to EditAppSetModalContent and used by the modal flow, or
remove showWizardInput from the modal props and all callers if it is no longer
needed. Ensure caller-provided wizard targets are not silently ignored.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.test.ts`:
- Around line 408-415: Update the test around getDiagramElements to explicitly
assert that alertsPromise is defined before awaiting it, while preserving the
existing addDiagramDetails, computeNodeStatus, and diagramElements assertions.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx`:
- Around line 42-223: Add jest-axe accessibility assertions to the component
tests: in
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx
(lines 42-223), update the relevant CustomEllipse test flow to await axe on the
rendered container and assert no violations; likewise, in
frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledNode.test.tsx
(lines 369-440), add the same assertion to the custom shape tests. Ensure both
suites import and use the established axe matcher setup.

---

Nitpick comments:
In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.ts`:
- Line 28: Update the import from the resources module used by the topology
model so Service is imported as a type-only symbol, while preserving the
existing Placement import usage and services: Service[] typing.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/types.ts`:
- Line 2: Move the existing copyright header in the topology types source file
to the very beginning, before the TopologyAlert import and any other content.
Preserve the header text unchanged.

In `@frontend/src/wizards/WizardPage.css`:
- Around line 23-44: Replace the custom modal layout with supported PatternFly
composition: remove the direct .pf-v6-* overrides in
frontend/src/wizards/WizardPage.css at lines 23-44, replace the custom outer
shell in frontend/src/wizards/WizardPage.tsx at lines 69-77 with appropriate
PatternFly layout primitives and variants, and remove the duplicate
inline-styled modal wrapper in
frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx
at lines 232-246.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 3fed08f7-b89e-4d12-a4a0-08f2232176ac

📥 Commits

Reviewing files that changed from the base of the PR and between d149900 and beb72ea.

⛔ Files ignored due to path filters (1)
  • frontend/public/locales/en/translation.json is excluded by !frontend/public/locales/**
📒 Files selected for processing (62)
  • frontend/packages/react-form-wizard/src/Wizard.tsx
  • frontend/src/components/SyncEditor/SyncEditor.tsx
  • frontend/src/components/SyncEditor/SyncEditorDiff.tsx
  • frontend/src/components/SyncEditor/process.ts
  • frontend/src/components/SyncEditor/synchronize.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationDetails/ApplicationDetails.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/ApplicationTopology.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/__fixtures__/topologyAnalysisFixtures.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopology.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopology.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyAppSet.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyAppSet.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyClusters.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyClusters.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsApplication.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsApplication.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsAppset.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsAppset.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsPlacement.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/createSuggestsPlacement.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/utils.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/utils.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/DetailsView.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/LogsContainer.css
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/LogsContainer.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/LogsContainer.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/YAMLContainer.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/YAMLContainer.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/EditAppSetModal.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/EditYamlModal.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/modals/LogsModal.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/NodeDetailsProviderStatuses.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topology.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/topologyAppSet.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/Topology.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipse.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipseAnchor.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/CustomEllipseAnchor.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/MultiEllipse.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/MultiEllipse.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledEdge.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledNode.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/StyledNode.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/TopologyAlerts.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/TopologyAlerts.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/nodeIcons.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/nodeStyle.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/css/Drawer.css
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/types.ts
  • frontend/src/routes/Applications/Applications.tsx
  • frontend/src/routes/Applications/CreateArgoApplication/CreatePullApplicationSet.test.tsx
  • frontend/src/routes/Applications/CreateArgoApplication/CreatePushApplicationSet.test.tsx
  • frontend/src/routes/Applications/CreateArgoApplication/EditApplicationSetPage.tsx
  • frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx
  • frontend/src/typings.d.ts
  • frontend/src/wizards/Argo/ArgoWizard.tsx
  • frontend/src/wizards/WizardPage.css
  • frontend/src/wizards/WizardPage.tsx
💤 Files with no reviewable changes (8)
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/LogsContainer.css
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/MultiEllipse.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/LogsContainer.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/topology/components/MultiEllipse.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/LogsContainer.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/YAMLContainer.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/components/YAMLContainer.test.tsx
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/model/NodeDetailsProviderStatuses.tsx

Comment thread frontend/src/routes/Applications/CreateArgoApplication/EditArgoApplicationSet.tsx Outdated
Comment thread frontend/src/wizards/WizardPage.tsx Outdated
@jeswanke

Copy link
Copy Markdown
Contributor Author

@coderabbitai review

@coderabbitai

coderabbitai Bot commented Jul 17, 2026

Copy link
Copy Markdown
✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

jeswanke added 3 commits July 20, 2026 11:27
Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 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
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyClusters.ts`:
- Around line 146-150: Wrap the hardcoded `'OpenShift GitOps Operator issues'`
title passed to `createTopologyAlert` in the file’s existing `t()` translation
function, matching the localized alert titles used elsewhere in
`analyzeTopologyClusters` while leaving the description handling unchanged.

In
`@frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyDeployments.ts`:
- Around line 45-54: Update the message construction near title in the topology
deployment analysis to use a single i18next translation key with interpolation
for kind and name, rather than concatenating t('Resource did not deploy') with a
template literal. Preserve the existing message meaning and values while
allowing translations to control word order.
🪄 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: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: 5b221894-f504-4661-b62c-23c5301065d8

📥 Commits

Reviewing files that changed from the base of the PR and between 00a710d and e685b80.

📒 Files selected for processing (6)
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyAppSet.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyClusters.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyDeployments.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyDeployments.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.test.ts
  • frontend/src/routes/Applications/ApplicationDetails/ApplicationTopology/analysis/analyzeTopologyApplications.ts

jeswanke added 4 commits July 21, 2026 11:52
Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
…-32879-Appset-Topology-Topology-Alert-window-5

Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
jeswanke added 2 commits July 21, 2026 13:36
Signed-off-by: John Swanke <jswanke@redhat.com>
…-32879-Appset-Topology-Topology-Alert-window-5

Signed-off-by: John Swanke <jswanke@redhat.com>
Signed-off-by: John Swanke <jswanke@redhat.com>
@sonarqubecloud

Copy link
Copy Markdown

Quality Gate Failed Quality Gate failed

Failed conditions
D Reliability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

💡 Need a hand with PR review? Try Gitar by Sonar!

@openshift-ci

openshift-ci Bot commented Jul 21, 2026

Copy link
Copy Markdown

@jeswanke: 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/unit-tests-sonarcloud 2a54319 link true /test unit-tests-sonarcloud

Full PR test history. Your PR dashboard.

Details

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.

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.

1 participant