From 9b9dde0ae9ae511fdc14b5616095e180891fbe23 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Wed, 15 Jan 2025 09:01:07 +1030
Subject: [PATCH] feat: implement PushButton component with tooltip for
 unpushed files in OutgoingChanges

---
 .../settings/git/status/OutgoingChanges.jsx   | 84 ++++++++++++-------
 1 file changed, 56 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/settings/git/status/OutgoingChanges.jsx b/frontend/src/components/settings/git/status/OutgoingChanges.jsx
index 6d05e6d..3be0ee8 100644
--- a/frontend/src/components/settings/git/status/OutgoingChanges.jsx
+++ b/frontend/src/components/settings/git/status/OutgoingChanges.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, {useRef, useState, useEffect} from 'react';
+import ReactDOM from 'react-dom';
 import {
     ArrowUpFromLine,
     Plus,
@@ -38,6 +39,56 @@ const OutgoingChanges = ({
     const totalOutgoingChanges = changes.length;
     const totalUnpushedCommits = unpushedFiles?.length || 0;
 
+    const PushButton = () => {
+        const [showTooltip, setShowTooltip] = useState(false);
+        const buttonRef = useRef(null);
+
+        return (
+            <>
+                <div
+                    ref={buttonRef}
+                    onMouseEnter={() => setShowTooltip(true)}
+                    onMouseLeave={() => setShowTooltip(false)}>
+                    <IconButton
+                        onClick={onPushSelected}
+                        disabled={!hasUnpushedCommits}
+                        loading={loadingAction === 'push_changes'}
+                        icon={<Upload />}
+                        className='bg-gray-700'
+                    />
+                </div>
+                {showTooltip &&
+                    buttonRef.current &&
+                    ReactDOM.createPortal(
+                        <div
+                            className='fixed bg-gray-900 text-white p-2 rounded shadow-lg text-xs'
+                            style={{
+                                left:
+                                    buttonRef.current.getBoundingClientRect()
+                                        .left +
+                                    buttonRef.current.getBoundingClientRect()
+                                        .width /
+                                        2,
+                                top:
+                                    buttonRef.current.getBoundingClientRect()
+                                        .top - 10,
+                                transform: 'translate(-50%, -100%)'
+                            }}>
+                            {unpushedFiles?.length > 0 && (
+                                <div className='mt-1'>
+                                    {unpushedFiles.map((file, index) => (
+                                        <div key={index}>
+                                            • {file.type}: {file.name}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>,
+                        document.body
+                    )}
+            </>
+        );
+    };
     // If we only have committed changes waiting to be pushed
     if (totalOutgoingChanges === 0 && hasUnpushedCommits) {
         console.log('Unpushed Files:', unpushedFiles);
@@ -52,6 +103,9 @@ const OutgoingChanges = ({
                         />
                         <span>Ready to Push ({totalUnpushedCommits})</span>
                     </h4>
+                    <div className='space-x-2 flex'>
+                        <PushButton />
+                    </div>
                 </div>
                 <div className='overflow-hidden'>
                     <PushTable changes={unpushedFiles} />
@@ -113,33 +167,7 @@ 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'
-                        />
-                    )}
+                    <PushButton />
                 </div>
             </div>
             {changes.length > 0 && (