From 61d82c0e09ceba615bde88bceac9fde5a8726e70 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Tue, 14 Jan 2025 09:56:24 +1030
Subject: [PATCH] feat: enhance push button functionality in OutgoingChanges
 component with detailed tooltip and conditional rendering

---
 .../settings/git/status/OutgoingChanges.jsx   | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/settings/git/status/OutgoingChanges.jsx b/frontend/src/components/settings/git/status/OutgoingChanges.jsx
index c312d11..6d05e6d 100644
--- a/frontend/src/components/settings/git/status/OutgoingChanges.jsx
+++ b/frontend/src/components/settings/git/status/OutgoingChanges.jsx
@@ -52,16 +52,6 @@ const OutgoingChanges = ({
                         />
                         <span>Ready to Push ({totalUnpushedCommits})</span>
                     </h4>
-                    <div className='space-x-2 flex'>
-                        <IconButton
-                            onClick={onPushSelected}
-                            disabled={false}
-                            loading={loadingAction === 'push_changes'}
-                            icon={<Upload />}
-                            tooltip='Push Changes'
-                            className='bg-gray-700'
-                        />
-                    </div>
                 </div>
                 <div className='overflow-hidden'>
                     <PushTable changes={unpushedFiles} />
@@ -123,6 +113,33 @@ const OutgoingChanges = ({
                         className='bg-gray-700'
                         disabledTooltip={getButtonTooltips.revert()}
                     />
+                    {hasUnpushedCommits && (
+                        <IconButton
+                            onClick={onPushSelected}
+                            disabled={!hasUnpushedCommits}
+                            loading={loadingAction === 'push_changes'}
+                            icon={<Upload />}
+                            tooltip={
+                                <div>
+                                    <div>Push Changes</div>
+                                    {unpushedFiles?.length > 0 && (
+                                        <div className='mt-1 text-xs'>
+                                            {unpushedFiles.map(
+                                                (file, index) => (
+                                                    <div key={index}>
+                                                        • {file.type}:{' '}
+                                                        {file.name}
+                                                    </div>
+                                                )
+                                            )}
+                                        </div>
+                                    )}
+                                </div>
+                            }
+                            className='bg-gray-700'
+                            disabledTooltip='No changes to push'
+                        />
+                    )}
                 </div>
             </div>
             {changes.length > 0 && (