add tooltips

libs/remix-ui/git/src/components/buttons/gituibutton.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import { gitPluginContext } from '../gitui'
+import { CustomTooltip } from '@remix-ui/helper';
 
 interface ButtonWithContextProps {
   onClick: React.MouseEventHandler<HTMLButtonElement>;
@@ -7,18 +8,31 @@ interface ButtonWithContextProps {
   disabledCondition?: boolean; // Optional additional disabling condition
   // You can add other props if needed, like 'type', 'className', etc.
   [key: string]: any; // Allow additional props to be passed
+  tooltip?: string;
 }
 
 // This component extends a button, disabling it when loading is true
-const GitUIButton = ({ children, disabledCondition = false, ...rest }:ButtonWithContextProps) => {
+const GitUIButton = ({ children, disabledCondition = false, ...rest }: ButtonWithContextProps) => {
   const { loading } = React.useContext(gitPluginContext)
 
   const isDisabled = loading || disabledCondition
-  return (
-    <button disabled={isDisabled} {...rest}>
-      {children}
-    </button>
-  );
+
+  if (rest.tooltip) {
+
+    return (
+      <CustomTooltip tooltipText={rest.tooltip} placement="top">
+        <button disabled={isDisabled} {...rest}>
+          {children}
+        </button>
+      </CustomTooltip>
+    );
+  } else {
+    return (
+      <button disabled={isDisabled} {...rest}>
+        {children}
+      </button>
+    );
+  }
 };
 
 export default GitUIButton;

libs/remix-ui/git/src/components/navigation/branchedetails.tsx

@@ -72,22 +72,22 @@ export const BrancheDetailsNavigation = (props: BrancheDetailsNavigationProps) =
             <FontAwesomeIcon className='pointer text-success' icon={faToggleOff} ></FontAwesomeIcon>
           </GitUIButton>
           :
-          <GitUIButton data-id={`branches-toggle-branch-${branch.name}`} className="btn btn-sm p-0 mr-1" onClick={() => checkout(branch)}>
+          <GitUIButton tooltip="checkout branch" data-id={`branches-toggle-branch-${branch.name}`} className="btn btn-sm p-0 mr-1" onClick={() => checkout(branch)}>
             <FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon>
           </GitUIButton>
         }
         {!branch.remote && canFetch() && <>
-          <GitUIButton className="btn btn-sm p-0 mr-1 text-muted" onClick={() => fetchBranch()}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon></GitUIButton>
-          <GitUIButton className="btn btn-sm p-0 mr-1 text-muted" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>
+          <GitUIButton tooltip="fetch branch" className="btn btn-sm p-0 mr-1 text-muted" onClick={() => fetchBranch()}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon></GitUIButton>
+          <GitUIButton tooltip="open on remote" className="btn btn-sm p-0 mr-1 text-muted" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>
         </>}
         {branch.remote?.url && <>
-          <GitUIButton className="btn btn-sm p-0 mr-1 text-muted" onClick={() => reloadBranch()}>
+          <GitUIButton tooltip="fetch branch" className="btn btn-sm p-0 mr-1 text-muted" onClick={() => reloadBranch()}>
             <FontAwesomeIcon icon={faSync} ></FontAwesomeIcon>
           </GitUIButton>
         </>}
 
         {branch.remote?.url && <>
-          <GitUIButton className="btn btn-sm p-0 mr-1 text-muted" onClick={() => openRemote()}>
+          <GitUIButton tooltip="open remote" className="btn btn-sm p-0 mr-1 text-muted" onClick={() => openRemote()}>
             <FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon>
           </GitUIButton>
         </>}

libs/remix-ui/git/src/components/navigation/remotesdetails.tsx

@@ -54,15 +54,15 @@ export const RemotesDetailsNavigation = (props: RemotesDetailsNavigationProps) =
         {context.defaultRemote && context.defaultRemote?.url === remote.url ?
           <GitUIButton className="btn btn-sm" onClick={() => { }} disabledCondition={true}><FontAwesomeIcon className='text-success' icon={faCheck} ></FontAwesomeIcon></GitUIButton>
           :
-          <GitUIButton className="btn btn-sm" onClick={setAsDefault}><FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon></GitUIButton>
+          <GitUIButton tooltip="set as default" className="btn btn-sm" onClick={setAsDefault}><FontAwesomeIcon icon={faToggleOn}></FontAwesomeIcon></GitUIButton>
         }
-        <GitUIButton data-id={`remote-sync-${remote.name}`} className="btn btn-sm" onClick={async () => {
+        <GitUIButton tooltip="Fetch remote" data-id={`remote-sync-${remote.name}`} className="btn btn-sm" onClick={async () => {
           await actions.fetch({
             remote
           })
         }}><FontAwesomeIcon icon={faSync} ></FontAwesomeIcon></GitUIButton>
         <GitUIButton data-id={`remote-rm-${remote.name}`} className="btn btn-sm" onClick={() => actions.removeRemote(remote)}><FontAwesomeIcon className='text-danger' icon={faTrash} ></FontAwesomeIcon></GitUIButton>
-        {remote?.url && <GitUIButton className="btn btn-sm pr-0" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>}
+        {remote?.url && <GitUIButton tooltip="open on remote" className="btn btn-sm pr-0" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>}
       </div>
     </>
   );

libs/remix-ui/git/src/components/panels/commits/commitdetailsitem.tsx

@@ -4,6 +4,7 @@ import path from "path";
 import { gitActionsContext, pluginActionsContext } from "../../../state/context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGlobe } from "@fortawesome/free-solid-svg-icons";
+import GitUIButton from "../../buttons/gituibutton";
 
 export interface CCommitDetailsItemsProps {
   commitChange: commitChange;
@@ -43,7 +44,8 @@ export const CommitDetailsItems = (props: CCommitDetailsItemsProps) => {
       </div>
       <div className="d-flex align-items-end">
         {!isAheadOfRepo ?
-          <FontAwesomeIcon role={'button'} icon={faGlobe} onClick={() => openRemote()} className="pointer mr-1 align-self-center" /> : <></>}
+          <GitUIButton tooltip="open on remote" className="btn btn-sm p-0 text-muted mr-1" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>
+          : <></>}
         <FunctionStatusIcons></FunctionStatusIcons>
       </div>
     </div>

libs/remix-ui/git/src/components/panels/commits/commitsummary.tsx

@@ -65,7 +65,7 @@ export const CommitSummary = (props: CommitSummaryProps) => {
       </div>
       {commit.commit.author.name || ""}
       <span className="ml-1">{getDate(commit)}</span>
-      {getRemote() && getRemote()?.url && !isAheadOfRepo && <GitUIButton className="btn btn-sm p-0 text-muted ml-1" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>}
+      {getRemote() && getRemote()?.url && !isAheadOfRepo && <GitUIButton tooltip="open on remote" className="btn btn-sm p-0 text-muted ml-1" onClick={() => openRemote()}><FontAwesomeIcon icon={faGlobe} ></FontAwesomeIcon></GitUIButton>}
     </>
   )
 }