git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-25 20:32:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement PushButton component with tooltip for unpushed files in OutgoingChanges

Browse Source
This commit is contained in:
Sam Chau
2025-01-15 09:01:07 +10:30
parent 61d82c0e09
commit 9b9dde0ae9
1 changed files with 56 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/src/components/settings/git/status/OutgoingChanges.jsx
View File

@@ -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 && (