feat: sync handler + fetch/pull/push options

kubeshop · Sep 30, 2022 · 59d5932 · 59d5932
1 parent 04147fa
commit 59d5932
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 74 deletions.
diff --git a/src/components/organisms/GitPane/BottomActions.styled.tsx b/src/components/organisms/GitPane/BottomActions.styled.tsx
@@ -16,13 +16,8 @@ export const BottomActionsContainer = styled.div`
   overflow-x: hidden;
 `;
 
-export const CommitButton = styled(RawButton)<{$width: number}>`
-  & span {
-    width: ${({$width}) => `${$width}px` || '100%'};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
+export const CommitButton = styled(RawButton)`
+  width: 100%;
 `;
 
 export const PublishBranchButton = styled(Dropdown.Button)`
@@ -31,21 +26,23 @@ export const PublishBranchButton = styled(Dropdown.Button)`
   }
 `;
 
-export const PushButton = styled(RawButton)`
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  & > span {
-    margin-right: 10px;
-  }
-`;
-
 export const PushPullContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 2px;
   font-size: 12px;
   margin-right: 4px;
 `;
+
+export const SyncButton = styled(Dropdown.Button)`
+  & button:first-child {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+export const SyncButtonLabel = styled.span`
+  margin-right: 10px;
+`;
diff --git a/src/components/organisms/GitPane/BottomActions.tsx b/src/components/organisms/GitPane/BottomActions.tsx
@@ -1,17 +1,11 @@
 import {useCallback, useMemo, useState} from 'react';
-import {useMeasure} from 'react-use';
 
 import {Menu, Tooltip} from 'antd';
 
 import {ArrowDownOutlined, ArrowUpOutlined, DownOutlined} from '@ant-design/icons';
 
 import {TOOLTIP_DELAY} from '@constants/constants';
-import {
-  GitCommitDisabledTooltip,
-  GitCommitEnabledTooltip,
-  GitPushDisabledTooltip,
-  GitPushEnabledTooltip,
-} from '@constants/tooltips';
+import {GitCommitDisabledTooltip, GitCommitEnabledTooltip} from '@constants/tooltips';
 
 import {AlertEnum} from '@models/alert';
 
@@ -31,32 +25,39 @@ const BottomActions: React.FC = () => {
   const selectedProjectRootFolder = useAppSelector(state => state.config.selectedProjectRootFolder);
 
   const [commitLoading, setCommitLoading] = useState(false);
-  const [pushPublishLoading, setPushPublishLoading] = useState(false);
+  const [syncPublishLoading, setSyncPublishLoading] = useState(false);
   const [showCommitModal, setShowCommitModal] = useState(false);
 
-  const [bottomActionsRef, {width: bottomActionsWidth}] = useMeasure<HTMLDivElement>();
-
   const isCommitDisabled = useMemo(
     () => Boolean(!changedFiles.filter(file => file.status === 'staged').length),
     [changedFiles]
   );
+
   const isPushDisabled = useMemo(() => {
     if (!gitRepo) {
       return true;
     }
 
+    return Boolean(!gitRepo.commits.ahead);
+  }, [gitRepo]);
+
+  const isSyncDisabled = useMemo(() => {
+    if (!gitRepo) {
+      return true;
+    }
+
     return Boolean(!gitRepo.commits.ahead && !gitRepo.commits.behind);
   }, [gitRepo]);
 
   const publishHandler = useCallback(async () => {
-    setPushPublishLoading(true);
+    setSyncPublishLoading(true);
 
     await promiseFromIpcRenderer('git.publishLocalBranch', 'git.publishLocalBranch.result', {
       localPath: selectedProjectRootFolder,
       branchName: currentBranch || 'main',
     });
 
-    setPushPublishLoading(false);
+    setSyncPublishLoading(false);
   }, [currentBranch, selectedProjectRootFolder]);
 
   const isBranchOnRemote = useMemo(() => {
@@ -67,14 +68,14 @@ const BottomActions: React.FC = () => {
     return gitRepo.branches.includes(`origin/${gitRepo.currentBranch}`);
   }, [gitRepo]);
 
-  const menuItems = useMemo(
+  const publishMenuItems = useMemo(
     () => [
       {
         disabled: isPushDisabled,
         key: 'publish_and_push',
         label: 'Publish & Push',
         onClick: async () => {
-          setPushPublishLoading(true);
+          setSyncPublishLoading(true);
 
           await publishHandler();
           await promiseFromIpcRenderer('git.pushChanges', 'git.pushChanges.result', {
@@ -84,40 +85,101 @@ const BottomActions: React.FC = () => {
 
           dispatch(setAlert({title: 'Pushed changes successfully', message: '', type: AlertEnum.Success}));
 
-          setPushPublishLoading(false);
+          setSyncPublishLoading(false);
         },
       },
     ],
     [currentBranch, dispatch, isPushDisabled, publishHandler, selectedProjectRootFolder]
   );
 
-  const pushHandler = async () => {
-    setPushPublishLoading(true);
+  const syncMenuItems = useMemo(
+    () => [
+      {
+        key: 'fetch',
+        label: 'Fetch',
+        onClick: async () => {
+          setSyncPublishLoading(true);
+          await promiseFromIpcRenderer('git.fetchRepo', 'git.fetchRepo.result', selectedProjectRootFolder);
+          dispatch(setAlert({title: 'Repo fetched successfully', message: '', type: AlertEnum.Success}));
+          setSyncPublishLoading(false);
+        },
+      },
+      {
+        key: 'pull',
+        label: 'Pull',
+        onClick: async () => {
+          setSyncPublishLoading(true);
+          await promiseFromIpcRenderer('git.pullChanges', 'git.pullChanges.result', selectedProjectRootFolder);
+          dispatch(setAlert({title: 'Pulled changes successfully', message: '', type: AlertEnum.Success}));
+          setSyncPublishLoading(false);
+        },
+      },
+      {
+        disabled: isPushDisabled,
+        key: 'push',
+        label: 'Push',
+        onClick: async () => {
+          setSyncPublishLoading(true);
+          await promiseFromIpcRenderer('git.pushChanges', 'git.pushChanges.result', {
+            localPath: selectedProjectRootFolder,
+            branchName: currentBranch || 'main',
+          });
+          dispatch(setAlert({title: 'Pushed changes successfully', message: '', type: AlertEnum.Success}));
+          setSyncPublishLoading(false);
+        },
+      },
+    ],
+    [currentBranch, dispatch, isPushDisabled, selectedProjectRootFolder]
+  );
+
+  const syncHandler = async () => {
+    if (!gitRepo) {
+      return;
+    }
 
-    await promiseFromIpcRenderer('git.pushChanges', 'git.pushChanges.result', {
-      localPath: selectedProjectRootFolder,
-      branchName: currentBranch || 'main',
-    });
+    setSyncPublishLoading(true);
+
+    let alertActionMessage = '';
 
-    setPushPublishLoading(false);
+    if (gitRepo.commits.behind) {
+      await promiseFromIpcRenderer('git.pullChanges', 'git.pullChanges.result', selectedProjectRootFolder);
+
+      alertActionMessage = 'Pulled';
+    }
+
+    if (gitRepo.commits.ahead) {
+      await promiseFromIpcRenderer('git.pushChanges', 'git.pushChanges.result', {
+        localPath: selectedProjectRootFolder,
+        branchName: currentBranch || 'main',
+      });
+
+      if (alertActionMessage === 'Pulled') {
+        alertActionMessage = 'Synced';
+      } else {
+        alertActionMessage = 'Pushed';
+      }
+    }
+
+    dispatch(setAlert({title: `${alertActionMessage} changes successfully`, message: '', type: AlertEnum.Success}));
+
+    setSyncPublishLoading(false);
   };
 
   if (!gitRepo) {
     return null;
   }
 
   return (
-    <S.BottomActionsContainer ref={bottomActionsRef}>
+    <S.BottomActionsContainer>
       <Tooltip
         mouseEnterDelay={TOOLTIP_DELAY}
         title={
           isCommitDisabled ? GitCommitDisabledTooltip : <GitCommitEnabledTooltip branchName={currentBranch || 'main'} />
         }
       >
         <S.CommitButton
-          $width={bottomActionsWidth / 2 - 48}
           disabled={isCommitDisabled}
-          loading={commitLoading}
+          loading={syncPublishLoading || commitLoading}
           type="primary"
           onClick={() => setShowCommitModal(true)}
         >
@@ -127,43 +189,40 @@ const BottomActions: React.FC = () => {
 
       {!isBranchOnRemote ? (
         <S.PublishBranchButton
-          loading={pushPublishLoading}
+          disabled={!gitRepo.hasRemoteRepo}
+          loading={syncPublishLoading || commitLoading}
           icon={<DownOutlined />}
           placement="topLeft"
           trigger={['click']}
           type="primary"
-          overlay={<Menu items={menuItems} />}
+          overlay={<Menu items={publishMenuItems} />}
           onClick={publishHandler}
-          disabled={!gitRepo.hasRemoteRepo}
         >
           Publish branch
         </S.PublishBranchButton>
       ) : (
-        <Tooltip
-          mouseEnterDelay={TOOLTIP_DELAY}
-          title={
-            isPushDisabled ? GitPushDisabledTooltip : <GitPushEnabledTooltip commitsNumber={gitRepo.commits.ahead} />
-          }
+        <S.SyncButton
+          disabled={!gitRepo.hasRemoteRepo || isSyncDisabled}
+          loading={syncPublishLoading || commitLoading}
+          icon={<DownOutlined />}
+          overlay={<Menu items={syncMenuItems} />}
+          placement="topLeft"
+          trigger={['click']}
+          type="primary"
+          onClick={syncHandler}
         >
-          <S.PushButton
-            disabled={!gitRepo.hasRemoteRepo || isPushDisabled}
-            loading={pushPublishLoading}
-            type="primary"
-            onClick={pushHandler}
-          >
-            Sync
-            {gitRepo.commits.behind > 0 ? (
-              <S.PushPullContainer>
-                {gitRepo.commits.behind} <ArrowDownOutlined />
-              </S.PushPullContainer>
-            ) : null}
-            {gitRepo.commits.ahead > 0 ? (
-              <S.PushPullContainer>
-                {gitRepo.commits.ahead} <ArrowUpOutlined />
-              </S.PushPullContainer>
-            ) : null}
-          </S.PushButton>
-        </Tooltip>
+          <S.SyncButtonLabel>Sync</S.SyncButtonLabel>
+          {gitRepo.commits.behind > 0 ? (
+            <S.PushPullContainer>
+              {gitRepo.commits.behind} <ArrowDownOutlined />
+            </S.PushPullContainer>
+          ) : null}
+          {gitRepo.commits.ahead > 0 ? (
+            <S.PushPullContainer>
+              {gitRepo.commits.ahead} <ArrowUpOutlined />
+            </S.PushPullContainer>
+          ) : null}
+        </S.SyncButton>
       )}
 
       <CommitModal

diff --git a/src/constants/tooltips.tsx b/src/constants/tooltips.tsx
@@ -92,10 +92,6 @@ export const ScaleTooltip = () => <HotkeyLabel text="Change the number of replic
 export const RestartTooltip = 'Restart deployment';
 
 export const GitCommitDisabledTooltip = 'There are no staged files to commit';
-export const GitPushDisabledTooltip = 'There are no commits to push';
 export const GitCommitEnabledTooltip = ({branchName}: {branchName: string}) => (
   <div>Commit staged files to {branchName}</div>
 );
-export const GitPushEnabledTooltip = ({commitsNumber}: {commitsNumber: number}) => (
-  <div>Push {commitsNumber} commits to remote</div>
-);