From f1a88361851f9fccd1d0d791ff693e34e5c05b14 Mon Sep 17 00:00:00 2001
From: Rafal Pelczar <rafal@akuity.io>
Date: Tue, 31 Oct 2023 18:04:57 +0100
Subject: [PATCH] fix(ui): Missing data in Sync Status if application never
 been synced

Signed-off-by: Rafal Pelczar <rafal@akuity.io>
---
 .../application-status-panel.tsx              | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

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 c82252144849c..0e4104f3f12b3 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
@@ -89,20 +89,18 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
                         hasMultipleSources,
                         () => showMetadataInfo(application.status.sync ? application.status.sync.revision : '')
                     )}
-                    {appOperationState && (
-                        <div className={`application-status-panel__item-value application-status-panel__item-value--${appOperationState.phase}`}>
-                            <div>
-                                {application.status.sync.status === models.SyncStatuses.OutOfSync ? (
-                                    <a onClick={() => showDiff && showDiff()}>
-                                        <ComparisonStatusIcon status={application.status.sync.status} label={true} />
-                                    </a>
-                                ) : (
+                    <div className={`application-status-panel__item-value${appOperationState?.phase ? ` application-status-panel__item-value--${appOperationState.phase}` : ''}`}>
+                        <div>
+                            {application.status.sync.status === models.SyncStatuses.OutOfSync ? (
+                                <a onClick={() => showDiff && showDiff()}>
                                     <ComparisonStatusIcon status={application.status.sync.status} label={true} />
-                                )}
-                            </div>
-                            <div className='application-status-panel__item-value__revision show-for-large'>{syncStatusMessage(application)}</div>
+                                </a>
+                            ) : (
+                                <ComparisonStatusIcon status={application.status.sync.status} label={true} />
+                            )}
                         </div>
-                    )}
+                        <div className='application-status-panel__item-value__revision show-for-large'>{syncStatusMessage(application)}</div>
+                    </div>
                     <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
                         {application.spec.syncPolicy?.automated ? 'Auto sync is enabled.' : 'Auto sync is not enabled.'}
                     </div>