Skip to content

Show matchExpressions in Progressive Sync Step Groups (#10177) - #256

Merged
aali309 merged 2 commits into
redhat-developer:mainfrom
keithchong:10177-MatchExpressionsInStepGroupTitle
Aug 7, 2026
Merged

Show matchExpressions in Progressive Sync Step Groups (#10177)#256
aali309 merged 2 commits into
redhat-developer:mainfrom
keithchong:10177-MatchExpressionsInStepGroupTitle

Conversation

@keithchong

Copy link
Copy Markdown
Collaborator

See GITOPS-10177

@openshift-ci
openshift-ci Bot requested a review from wtam2018 July 14, 2026 07:36
@keithchong
keithchong requested review from aali309 and removed request for wtam2018 July 14, 2026 07:36
@codecov-commenter

codecov-commenter commented Jul 14, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 71 lines in your changes missing coverage. Please review.
✅ Project coverage is 11.30%. Comparing base (01e9db1) to head (3bd1dab).
⚠️ Report is 45 commits behind head on main.

Files with missing lines Patch % Lines
...mponents/appset/graph/nodes/StepGroupComponent.tsx 0.00% 24 Missing ⚠️
...omponents/appset/graph/ApplicationSetGraphView.tsx 0.00% 23 Missing ⚠️
...ps/components/appset/AppSetMatchExpressionsTab.tsx 0.00% 15 Missing ⚠️
src/gitops/components/appset/graph/graph-utils.tsx 0.00% 7 Missing ⚠️
...itops/components/application/graph/graph-utils.tsx 0.00% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #256      +/-   ##
==========================================
- Coverage   11.92%   11.30%   -0.63%     
==========================================
  Files         154      169      +15     
  Lines        6272     6679     +407     
  Branches     2028     2235     +207     
==========================================
+ Hits          748      755       +7     
- Misses       5524     5923     +399     
- Partials        0        1       +1     
Flag Coverage Δ
unit-tests 11.30% <0.00%> (-0.63%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@coderabbitai

coderabbitai Bot commented Jul 14, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Added a sidebar for viewing ApplicationSet match expressions and progressive sync step details.
    • Added context-menu access to match expressions from progressive sync step groups.
    • Improved graph nodes with application metadata and clearer match-expression labels.
  • Bug Fixes

    • Added outlines to application graph node labels for improved visibility.
  • Style

    • Updated detail views for improved compatibility with the latest design system styles.
  • Localization

    • Updated English, Japanese, Korean, and Chinese labels for match expressions, rollout actions, errors, and related UI text.

Walkthrough

The ApplicationSet graph now exposes progressive sync match expressions through a localized context-menu action and topology sidebar. Graph nodes include API metadata. The change also adds YAML support, updates translations, applies PatternFly v6 classes, and adjusts graph styling.

Changes

ApplicationSet match expressions and UI updates

Layer / File(s) Summary
Graph data and progressive-sync labels
src/gitops/components/application/graph/graph-utils.tsx, src/gitops/components/application/graph/ApplicationGraphView.scss, src/gitops/components/appset/graph/*
Graph nodes include API metadata. Progressive sync labels use match-expression values. Step groups support localized context-menu interaction and updated label styling.
Context menu and match-expressions sidebar
src/gitops/components/appset/AppSetMatchExpressionsTab.tsx, src/gitops/components/appset/graph/ApplicationSetGraphView.tsx, package.json
A context-menu action opens a topology sidebar. The sidebar renders the selected rolling-sync step as formatted YAML using the added yaml dependency.
Match-expression and rollout translations
locales/*/plugin__gitops-plugin.json
English, Japanese, Korean, and Chinese entries add match-expression and rollout labels, reorder related entries, and remove duplicate namespace labels.
PatternFly v6 detail styling
src/gitops/components/application/*, src/gitops/components/appset/*, src/gitops/components/imageupdater/*, src/gitops/components/project/*, src/gitops/components/rollout/*, src/gitops/components/shared/*
Details components use PatternFly v6 description-list classes. Analysis status styling uses the PatternFly v6 row-gap variable.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant StepGroupComponent
  participant AppSetContextMenuItem
  participant ApplicationSetGraphView
  participant AppSetMatchExpressionsTab
  User->>StepGroupComponent: Open step-group context menu
  StepGroupComponent->>AppSetContextMenuItem: Show match-expressions action
  User->>AppSetContextMenuItem: Select action
  AppSetContextMenuItem->>ApplicationSetGraphView: Set showMatchExpressions to true
  ApplicationSetGraphView->>AppSetMatchExpressionsTab: Render selected rolling-sync step
  AppSetMatchExpressionsTab-->>User: Display formatted step YAML
Loading

Suggested reviewers: aali309

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description check ✅ Passed The description references the issue associated with the match-expression changes.
Title check ✅ Passed The title clearly summarizes the main change: showing match expressions in Progressive Sync step groups.
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.

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

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

@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: 5

🧹 Nitpick comments (1)
src/gitops/components/appset/graph/ApplicationSetGraphView.tsx (1)

371-371: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Prefer .getType() over ID-suffix matching for node-type detection.

selectedNode?.getId().endsWith('-step-group') is brittle compared to the .getType() === 'step-group' check used consistently elsewhere in this file/module for identifying step-group nodes.

🤖 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 `@src/gitops/components/appset/graph/ApplicationSetGraphView.tsx` at line 371,
Update the isStepGroup calculation to use selectedNode?.getType() ===
'step-group' instead of matching the node ID suffix, consistent with the other
step-group detection logic in the module.
🤖 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 `@package.json`:
- Line 81: Move the yaml package entry from devDependencies to dependencies in
package.json, preserving its current version constraint so the runtime import in
AppSetMatchExpressionsTab.tsx remains available in production installs.

In `@src/gitops/components/appset/AppSetMatchExpressionsTab.tsx`:
- Around line 13-23: Update AppSetMatchExpressionsTabProps so customData uses
the established shape from ApplicationSetGraphView.tsx, including its step
field, instead of object. Before parseInt and any translation-string
interpolation in AppSetMatchExpressionsTab, coerce customData.step to a string
and then parse it, preserving the existing step-index lookup behavior.

In `@src/gitops/components/appset/graph/ApplicationSetGraphView.tsx`:
- Around line 351-448: Update getTopologySideBar to remove the React.useMemo
call and hoist the stable pages definition to module scope. Refactor the
selectedNode rendering logic into a small helper or equivalent conditional
structure so no nested ternary remains, and remove the redundant selectedNode
!== undefined check while preserving the existing sidebar output for no
selection, regular nodes, and step groups.

In `@src/gitops/components/appset/graph/graph-utils.tsx`:
- Around line 235-247: Update the key, operator, and values access in the graph
step logic to use optional chaining when indexing rollingSync.steps and
matchExpressions.values, including `?.[]` for array access. Extract the selected
step or match expression if useful to avoid repeating the long chain, while
preserving empty-string fallbacks for missing data.

In `@src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx`:
- Line 322: Replace the concatenated step translation in
src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx#L322-L322 with
the interpolation pattern using the step value, and add the “Step {{x}}”
translation key to every locale file. Apply the same change in
src/gitops/components/appset/AppSetMatchExpressionsTab.tsx#L37-L37 using
“Progressive Sync Step {{x}}” with customData?.step, and add that matching key
to every locale file.

---

Nitpick comments:
In `@src/gitops/components/appset/graph/ApplicationSetGraphView.tsx`:
- Line 371: Update the isStepGroup calculation to use selectedNode?.getType()
=== 'step-group' instead of matching the node ID suffix, consistent with the
other step-group detection logic in the module.
🪄 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: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: b69cf727-962e-42d6-8eef-69c63d2afe78

📥 Commits

Reviewing files that changed from the base of the PR and between 4a79605 and 7b31b33.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (11)
  • locales/en/plugin__gitops-plugin.json
  • locales/ja/plugin__gitops-plugin.json
  • locales/ko/plugin__gitops-plugin.json
  • locales/zh/plugin__gitops-plugin.json
  • package.json
  • src/gitops/components/application/graph/ApplicationGraphView.scss
  • src/gitops/components/application/graph/graph-utils.tsx
  • src/gitops/components/appset/AppSetMatchExpressionsTab.tsx
  • src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
  • src/gitops/components/appset/graph/graph-utils.tsx
  • src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx

Comment thread package.json Outdated
Comment thread src/gitops/components/appset/AppSetMatchExpressionsTab.tsx Outdated
Comment thread src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
Comment thread src/gitops/components/appset/graph/graph-utils.tsx Outdated
Comment thread src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx Outdated
@keithchong keithchong changed the title Show matchExpressions in Progressive Sync Step Groups (#10177) WIP - Show matchExpressions in Progressive Sync Step Groups (#10177) Jul 15, 2026
@keithchong
keithchong force-pushed the 10177-MatchExpressionsInStepGroupTitle branch from 7b31b33 to fbd0b43 Compare July 15, 2026 18:01
@keithchong keithchong changed the title WIP - Show matchExpressions in Progressive Sync Step Groups (#10177) Show matchExpressions in Progressive Sync Step Groups (#10177) Jul 15, 2026
@keithchong

Copy link
Copy Markdown
Collaborator Author

@coderabbitai

@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

@keithchong I see you've tagged me but didn't include a specific request. Could you let me know what you'd like help with? For example, I can:

  • Review the changes in this PR (``)
  • Answer questions about specific files like AppSetMatchExpressionsTab.tsx or ApplicationSetGraphView.tsx
  • Help address the Codecov coverage report above
  • Something else entirely

Just let me know!

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

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

🧹 Nitpick comments (1)
src/gitops/components/appset/graph/graph-utils.tsx (1)

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

Improve label formatting and provide a fallback for empty expressions.

Concatenating the parts with hardcoded spaces (key + ' ' + operator + ' ' + values) will result in trailing spaces for operators that do not have values (e.g., Exists), or an almost empty label (" ") if matchExpressions is undefined.

Consider filtering out empty values and providing a fallback label so the step group always has a meaningful name in the graph.

♻️ Proposed refactor
       const stepGroupApps = stepGroupAppsMap.get(step);
       const stepMatchExpression =
         applicationSet.spec?.strategy?.rollingSync?.steps?.[
           parseInt(step) - 1
         ]?.matchExpressions?.at(0);
       const key = stepMatchExpression?.key || '';
       const operator = stepMatchExpression?.operator || '';
       const values = stepMatchExpression?.values?.[0] || '';
+      const labelText = [key, operator, values].filter(Boolean).join(' ') || `Progressive Sync Step ${step}`;
       if (stepGroupApps.length === 0 && hasApplicationStatus) {
         stepGroupAppsMap.set(step.toString(), [step + '-filler-node']);
...
       const stepGroup = {
         anchor: CenterAnchor,
         id: step + '-step-group',
         type: 'step-group',
         group: true,
         rank: 3,
-        label: key + ' ' + operator + ' ' + values,
+        label: labelText,
         children: [...stepGroupApps],

Also applies to: 285-285

🤖 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 `@src/gitops/components/appset/graph/graph-utils.tsx` around lines 235 - 241,
Update the step-group label construction near stepMatchExpression to build the
label from non-empty key, operator, and values parts, avoiding extra spaces for
operators without values. When matchExpressions is missing or all parts are
empty, use a meaningful fallback label so every step group remains named in the
graph.
🤖 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.

Nitpick comments:
In `@src/gitops/components/appset/graph/graph-utils.tsx`:
- Around line 235-241: Update the step-group label construction near
stepMatchExpression to build the label from non-empty key, operator, and values
parts, avoiding extra spaces for operators without values. When matchExpressions
is missing or all parts are empty, use a meaningful fallback label so every step
group remains named in the graph.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Enterprise

Run ID: abb86971-bb4b-4c7e-bc9e-179d9b37ef01

📥 Commits

Reviewing files that changed from the base of the PR and between 7b31b33 and fbd0b43.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (11)
  • locales/en/plugin__gitops-plugin.json
  • locales/ja/plugin__gitops-plugin.json
  • locales/ko/plugin__gitops-plugin.json
  • locales/zh/plugin__gitops-plugin.json
  • package.json
  • src/gitops/components/application/graph/ApplicationGraphView.scss
  • src/gitops/components/application/graph/graph-utils.tsx
  • src/gitops/components/appset/AppSetMatchExpressionsTab.tsx
  • src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
  • src/gitops/components/appset/graph/graph-utils.tsx
  • src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx
🚧 Files skipped from review as they are similar to previous changes (9)
  • src/gitops/components/application/graph/graph-utils.tsx
  • src/gitops/components/appset/AppSetMatchExpressionsTab.tsx
  • src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx
  • locales/ko/plugin__gitops-plugin.json
  • src/gitops/components/application/graph/ApplicationGraphView.scss
  • locales/zh/plugin__gitops-plugin.json
  • locales/ja/plugin__gitops-plugin.json
  • locales/en/plugin__gitops-plugin.json
  • src/gitops/components/appset/graph/ApplicationSetGraphView.tsx

@aali309 aali309 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Lets merge the pf6 PR first?

Signed-off-by: Keith Chong <kykchong@redhat.com>
@keithchong
keithchong force-pushed the 10177-MatchExpressionsInStepGroupTitle branch from fbd0b43 to 3bd1dab Compare August 5, 2026 20:54

@aali309 aali309 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Hey Keith, Looks good just a few comments/questions, then we are good to go! Also should we make this opaque?

Image

Comment thread src/gitops/components/appset/AppSetMatchExpressionsTab.tsx Outdated
Comment thread src/gitops/components/appset/AppSetMatchExpressionsTab.tsx Outdated
Comment thread src/gitops/components/appset/AppSetMatchExpressionsTab.tsx Outdated
Comment thread src/gitops/components/appset/graph/ApplicationSetGraphView.tsx Outdated
@keithchong

keithchong commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator Author

Lets merge the pf6 PR first?

The opaque issue is because, at the time when this PR was first created, we didn't merge the PF5->PF6 change and it was working fine. After the PF6 change, this issue got exposed. So yep, need to update it.

Signed-off-by: Keith Chong <kykchong@redhat.com>
@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@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: 1

🤖 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 `@locales/ko/plugin__gitops-plugin.json`:
- Around line 104-111: Translate the newly added English locale values using
reviewed translations: update the ApplicationSet entries at
locales/ko/plugin__gitops-plugin.json lines 104-111 and
locales/zh/plugin__gitops-plugin.json lines 104-111, and update the rollout
entries at locales/ko/plugin__gitops-plugin.json lines 264-265 and
locales/zh/plugin__gitops-plugin.json lines 264-265. Preserve the existing keys
and valid JSON structure.
🪄 Autofix

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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2700fd41-9413-4868-bb85-42dba9207590

📥 Commits

Reviewing files that changed from the base of the PR and between 0c2b29d and a880928.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (20)
  • locales/en/plugin__gitops-plugin.json
  • locales/ja/plugin__gitops-plugin.json
  • locales/ko/plugin__gitops-plugin.json
  • locales/zh/plugin__gitops-plugin.json
  • package.json
  • src/gitops/components/application/ApplicationDetailsTab.tsx
  • src/gitops/components/application/ApplicationSyncStatusTab.tsx
  • src/gitops/components/application/graph/ApplicationGraphView.scss
  • src/gitops/components/application/graph/graph-utils.tsx
  • src/gitops/components/appset/AppSetDetailsTab.scss
  • src/gitops/components/appset/AppSetDetailsTab.tsx
  • src/gitops/components/appset/AppSetMatchExpressionsTab.tsx
  • src/gitops/components/appset/graph/ApplicationSetGraphView.tsx
  • src/gitops/components/appset/graph/graph-utils.tsx
  • src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx
  • src/gitops/components/imageupdater/ImageUpdaterDetailsTab.tsx
  • src/gitops/components/project/ProjectDetailsTab.tsx
  • src/gitops/components/rollout/RolloutDetailsTab.tsx
  • src/gitops/components/rollout/components/AnalysisRunStatus/AnalysisRunStatus.scss
  • src/gitops/components/shared/BaseDetailsSummary/BaseDetailsSummary.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
  • package.json
  • src/gitops/components/application/graph/ApplicationGraphView.scss
  • src/gitops/components/application/graph/graph-utils.tsx
  • locales/ja/plugin__gitops-plugin.json
  • src/gitops/components/appset/graph/nodes/StepGroupComponent.tsx
  • src/gitops/components/appset/graph/graph-utils.tsx
  • src/gitops/components/appset/AppSetMatchExpressionsTab.tsx
  • src/gitops/components/appset/graph/ApplicationSetGraphView.tsx

Comment on lines +104 to +111
"Progressive Sync Step {{x}}": "Progressive Sync Step {{x}}",
"Applications": "Applications",
"Show all match expressions": "Show all match expressions",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"View Graph": "View Graph",
"Match Expressions": "Match Expressions",
"Name must be unique within a namespace.": "Name must be unique within a namespace.",

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Translate the new entries in the Korean and Chinese locale files.

The new values are English source text in both non-English locale files. This makes the new ApplicationSet and rollout UI display English instead of localized text.

  • locales/ko/plugin__gitops-plugin.json#L104-L111: Replace the ApplicationSet values with reviewed Korean translations.
  • locales/ko/plugin__gitops-plugin.json#L264-L265: Replace the rollout values with reviewed Korean translations.
  • locales/zh/plugin__gitops-plugin.json#L104-L111: Replace the ApplicationSet values with reviewed Chinese translations.
  • locales/zh/plugin__gitops-plugin.json#L264-L265: Replace the rollout values with reviewed Chinese translations.
📍 Affects 2 files
  • locales/ko/plugin__gitops-plugin.json#L104-L111 (this comment)
  • locales/ko/plugin__gitops-plugin.json#L264-L265
  • locales/zh/plugin__gitops-plugin.json#L104-L111
  • locales/zh/plugin__gitops-plugin.json#L264-L265
🤖 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 `@locales/ko/plugin__gitops-plugin.json` around lines 104 - 111, Translate the
newly added English locale values using reviewed translations: update the
ApplicationSet entries at locales/ko/plugin__gitops-plugin.json lines 104-111
and locales/zh/plugin__gitops-plugin.json lines 104-111, and update the rollout
entries at locales/ko/plugin__gitops-plugin.json lines 264-265 and
locales/zh/plugin__gitops-plugin.json lines 264-265. Preserve the existing keys
and valid JSON structure.

@aali309 aali309 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

LGTM! Thanks Keith

@aali309
aali309 merged commit 04d25ab into redhat-developer:main Aug 7, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants