Merge pull request #4194 from kubeshop/fix-git-pane-glitch

fix: fix glitch in git pane while remote URL is showing
kubeshop · Nov 20, 2023 · f5e9274 · f5e9274
2 parents 52d61a3 + 63a51f8
commit f5e9274
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 65 deletions.
diff --git a/src/components/organisms/GitPane/BottomActions.styled.tsx b/src/components/organisms/GitPane/BottomActions.styled.tsx
@@ -14,6 +14,7 @@ export const BottomActionsContainer = styled.div`
   padding: 0px 14px;
   width: 100%;
   overflow-x: hidden;
+  flex-shrink: 0;
 `;
 
 export const CommitButton = styled(RawButton)`

diff --git a/src/components/organisms/GitPane/GitPane.styled.tsx b/src/components/organisms/GitPane/GitPane.styled.tsx
@@ -83,10 +83,9 @@ export const FilePath = styled.div`
   line-height: 22px;
 `;
 
-export const FileContainer = styled.div<{$height: number}>`
+export const FileContainer = styled.div`
   position: relative;
-  ${props => `height: ${props.$height ? `${props.$height}px` : '100%'};`}
-  margin-top: 12px;
+  flex-grow: 1;
   overflow-y: auto;
 `;
 
@@ -101,8 +100,8 @@ export const GitPaneContainer = styled.div<{$height: number}>`
     height: ${$height}px;
   `}
 
-  display: grid;
-  grid-template-rows: max-content 1fr max-content;
+  display: flex;
+  flex-direction: column;
 `;
 
 export const NoChangedFilesLabel = styled.div`

diff --git a/src/components/organisms/GitPane/GitPane.tsx b/src/components/organisms/GitPane/GitPane.tsx
@@ -1,11 +1,8 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {useMeasure} from 'react-use';
+import React, {useEffect, useState} from 'react';
 
 import {Checkbox} from 'antd';
 import {CheckboxChangeEvent} from 'antd/lib/checkbox';
 
-import {DEFAULT_PANE_TITLE_HEIGHT} from '@constants/constants';
-
 import {setGitLoading} from '@redux/git';
 import {stageChangedFiles, unstageFiles} from '@redux/git/git.ipc';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
@@ -37,26 +34,8 @@ const GitPane: React.FC = () => {
   const [stagedFiles, setStagedFiles] = useState<GitChangedFile[]>([]);
   const [unstagedFiles, setUnstagedFiles] = useState<GitChangedFile[]>([]);
 
-  const [remoteInputRef, {height: remoteInputHeight}] = useMeasure<HTMLDivElement>();
-  const [bottomActionsRef, {height: bottomActionsHeight}] = useMeasure<HTMLDivElement>();
-
   const height = usePaneHeight();
 
-  const fileContainerHeight = useMemo(() => {
-    let h: number = height - DEFAULT_PANE_TITLE_HEIGHT - 22;
-
-    // 12 is the margin top of the git pane content
-    if (gitRepo) {
-      h -= bottomActionsHeight + 12;
-    }
-
-    if (!remoteRepo?.exists) {
-      h -= remoteInputHeight;
-    }
-
-    return h;
-  }, [bottomActionsHeight, gitRepo, remoteRepo, height, remoteInputHeight]);
-
   const handleSelect = (event: CheckboxChangeEvent, item: GitChangedFile) => {
     if (event.target.checked) {
       if (item.status === 'staged') {
@@ -142,13 +121,9 @@ const GitPane: React.FC = () => {
         </S.AuthRequiredContainer>
       ) : changedFiles.length ? (
         <>
-          {!remoteRepo?.exists ? (
-            <S.RemoteInputContainer ref={remoteInputRef}>
-              <RemoteInput />
-            </S.RemoteInputContainer>
-          ) : null}
+          {!remoteRepo?.exists ? <RemoteInput /> : null}
 
-          <S.FileContainer $height={fileContainerHeight}>
+          <S.FileContainer>
             <S.ChangeList>
               Changelist <S.ChangeListStatus>{changedFiles.length} files</S.ChangeListStatus>
             </S.ChangeList>
@@ -218,11 +193,7 @@ const GitPane: React.FC = () => {
         </S.NoChangedFilesLabel>
       )}
 
-      {gitRepo ? (
-        <S.BottomActionsRef ref={bottomActionsRef}>
-          <BottomActions />
-        </S.BottomActionsRef>
-      ) : null}
+      {gitRepo ? <BottomActions /> : null}
     </S.GitPaneContainer>
   );
 };

diff --git a/src/components/organisms/GitPane/RemoteInput.styled.tsx b/src/components/organisms/GitPane/RemoteInput.styled.tsx
diff --git a/src/components/organisms/GitPane/RemoteInput.tsx b/src/components/organisms/GitPane/RemoteInput.tsx
@@ -5,13 +5,15 @@ import {useForm} from 'antd/es/form/Form';
 
 import {CheckOutlined} from '@ant-design/icons';
 
+import styled from 'styled-components';
+
 import {updateRemoteRepo} from '@redux/git';
 import {setRemote} from '@redux/git/git.ipc';
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
 
 import {showGitErrorModal} from '@utils/terminal';
 
-import * as S from './RemoteInput.styled';
+import {Colors} from '@shared/styles/colors';
 
 const RemoteInput: React.FC = () => {
   const dispatch = useAppDispatch();
@@ -39,10 +41,10 @@ const RemoteInput: React.FC = () => {
   };
 
   return (
-    <S.RemoteInputContainer>
-      <S.RemoteInputInfo>To publish your branch to a remote origin:</S.RemoteInputInfo>
+    <Box>
+      <Description>To publish your branch to a remote origin:</Description>
       <Form form={form} layout="vertical">
-        <S.RemoteInputFlex>
+        <RemoteInputFlex>
           <Form.Item
             name="remoteURL"
             required
@@ -60,10 +62,28 @@ const RemoteInput: React.FC = () => {
           <Button loading={loading} type="primary" onClick={handleAddRemote}>
             <CheckOutlined />
           </Button>
-        </S.RemoteInputFlex>
+        </RemoteInputFlex>
       </Form>
-    </S.RemoteInputContainer>
+    </Box>
   );
 };
 
 export default RemoteInput;
+
+const Box = styled.div`
+  margin: 14px;
+  color: ${Colors.grey9};
+`;
+
+const RemoteInputFlex = styled.div`
+  display: flex;
+  gap: 10px;
+
+  .ant-form-item {
+    margin-bottom: 0px;
+  }
+`;
+
+const Description = styled.div`
+  margin-bottom: 12px;
+`;