From 7a7dd4e5a56cd33c51bf2b4b84f5e7ee205d2eeb Mon Sep 17 00:00:00 2001
From: "argo-cd-cherry-pick-bot[bot]"
 <231928284+argo-cd-cherry-pick-bot[bot]@users.noreply.github.com>
Date: Tue, 17 Mar 2026 21:46:39 -0400
Subject: [PATCH] fix(UI): show RollingSync step clearly when labels match no
 step (cherry-pick #26877 for 3.1) (#26885)

Signed-off-by: Atif Ali <atali@redhat.com>
Co-authored-by: Atif Ali <atali@redhat.com>
---
 .../application-status-panel/application-status-panel.tsx | 3 ++-
 ui/src/app/applications/components/utils.tsx              | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
index 34b7e77c94..c829923f40 100644
--- a/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
+++ b/ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
@@ -8,6 +8,7 @@ import {services} from '../../../shared/services';
 import {
     ApplicationSyncWindowStatusIcon,
     ComparisonStatusIcon,
+    formatApplicationSetProgressiveSyncStep,
     getAppDefaultSource,
     getAppDefaultSyncRevisionExtra,
     getAppOperationState,
@@ -130,7 +131,7 @@ const ProgressiveSyncStatus = ({application}: {application: models.Application})
                         <div className='application-status-panel__item-value' style={{color: getProgressiveSyncStatusColor(appResource.status)}}>
                             {getProgressiveSyncStatusIcon({status: appResource.status})}&nbsp;{appResource.status}
                         </div>
-                        {appResource?.step && <div className='application-status-panel__item-value'>Wave: {appResource.step}</div>}
+                        {appResource?.step !== undefined && <div className='application-status-panel__item-value'>{formatApplicationSetProgressiveSyncStep(appResource.step)}</div>}
                         {lastTransitionTime && (
                             <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
                                 Last Transition: <br />
diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
index 6ed584be6c..9e2db9192c 100644
--- a/ui/src/app/applications/components/utils.tsx
+++ b/ui/src/app/applications/components/utils.tsx
@@ -1705,6 +1705,14 @@ export function getAppUrl(app: appModels.Application): string {
     return `applications/${app.metadata.namespace}/${app.metadata.name}`;
 }
 
+/** RollingSync step for display; backend uses -1 when no step matches the app's labels. */
+export function formatApplicationSetProgressiveSyncStep(step: string | undefined): string {
+    if (step === '-1') {
+        return 'Step: unmatched label';
+    }
+    return `Step: ${step ?? ''}`;
+}
+
 export const getProgressiveSyncStatusIcon = ({status, isButton}: {status: string; isButton?: boolean}) => {
     const getIconProps = () => {
         switch (status) {