fix: git merge tab issues (#12576)

app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx

@@ -291,10 +291,14 @@ function Deploy() {
             width="max-content"
           />
         )}
+        {isConflicting && (
           <ConflictInfo
-          isConflicting={isConflicting}
+            browserSupportedRemoteUrl={
+              gitMetaData?.browserSupportedRemoteUrl || ""
+            }
             learnMoreLink={gitConflictDocumentUrl}
           />
+        )}
         {showCommitButton && (
           <Tooltip
             autoFocus={false}

app/client/src/pages/Editor/gitSync/Tabs/Merge.tsx

@@ -37,7 +37,6 @@ import {
   getIsFetchingMergeStatus,
   getFetchingBranches,
   getIsMergeInProgress,
-  // getPullFailed,
 } from "selectors/gitSyncSelectors";
 import { fetchMergeStatusInit } from "actions/gitSyncActions";
 import MergeStatus, { MERGE_STATUS_STATE } from "../components/MergeStatus";
@@ -271,10 +270,15 @@ export default function Merge() {
       </Row>
       <MergeStatus message={mergeStatusMessage} status={status} />
       <Space size={10} />
+      {isConflicting && (
         <ConflictInfo
-        isConflicting={isConflicting}
+          browserSupportedRemoteUrl={
+            gitMetaData?.browserSupportedRemoteUrl || ""
+          }
           learnMoreLink={gitConflictDocumentUrl}
         />
+      )}
+
       {showMergeSuccessIndicator ? (
         <MergeSuccessIndicator />
       ) : (

app/client/src/pages/Editor/gitSync/components/ConflictInfo.test.tsx

@@ -0,0 +1,34 @@
+import ConflictInfo from "./ConflictInfo";
+import { render, screen } from "test/testUtils";
+import React from "react";
+
+describe("ConflictInfo", () => {
+  it("renders properly", async () => {
+    render(
+      <ConflictInfo
+        browserSupportedRemoteUrl={"href"}
+        learnMoreLink={"link"}
+      />,
+    );
+
+    // check for existence
+    [
+      await screen.queryByTestId("t--conflict-info-container"),
+      await screen.queryByTestId("t--conflict-info-error-warning"),
+    ].every((query) => {
+      expect(query).not.toBeNull();
+      return true;
+    });
+
+    //check for text
+    const container = await screen.getByTestId("t--conflict-info-container");
+    const html = container.innerHTML.toString();
+    expect(html.includes("Learn More")).toBeTruthy();
+    expect(html.includes("OPEN REPO")).toBeTruthy();
+    expect(
+      html.includes(
+        "Please resolve the conflicts manually on your repository.",
+      ),
+    ).toBeTruthy();
+  });
+});

app/client/src/pages/Editor/gitSync/components/ConflictInfo.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 import Text, { TextType } from "components/ads/Text";
 import InfoWrapper from "./InfoWrapper";
 import Link from "./Link";
@@ -9,10 +9,7 @@ import {
   LEARN_MORE,
   OPEN_REPO,
 } from "@appsmith/constants/messages";
-import { Theme } from "constants/DefaultTheme";
 import Button, { Category, Size } from "components/ads/Button";
-import { useSelector } from "store";
-import { getCurrentAppGitMetaData } from "selectors/applicationSelectors";
 import Icon, { IconSize } from "components/ads/Icon";
 import { Colors } from "constants/Colors";
 
@@ -25,30 +22,26 @@ const OpenRepoButton = styled(Button)`
   margin-right: ${(props) => props.theme.spaces[3]}px;
 `;
 
-type CIPropType = {
+type Props = {
-  isConflicting?: boolean;
+  browserSupportedRemoteUrl: string;
   learnMoreLink: string;
 };
 
-export default function ConflictInfo(props: CIPropType) {
+export default function ConflictInfo({
-  const { isConflicting } = props;
+  browserSupportedRemoteUrl,
-  const theme = useTheme() as Theme;
+  learnMoreLink,
-  const gitMetaData = useSelector(getCurrentAppGitMetaData);
+}: Props) {
-  return isConflicting ? (
+  return (
-    <>
+    <div data-testid="t--conflict-info-container">
-      <InfoWrapper isError>
+      <InfoWrapper data-testid="t--conflict-info-error-warning" isError>
         <Icon fillColor={Colors.CRIMSON} name="info" size={IconSize.XXXL} />
         <div style={{ display: "block" }}>
-          <Text
+          <Text color={Colors.CRIMSON} type={TextType.P3}>
-            color={Colors.CRIMSON}
-            style={{ marginRight: theme.spaces[2] }}
-            type={TextType.P3}
-          >
             {createMessage(GIT_CONFLICTING_INFO)}
           </Text>
           <Link
             color={Colors.CRIMSON}
-            link={props.learnMoreLink as string}
+            link={learnMoreLink}
             text={createMessage(LEARN_MORE)}
           />
         </div>
@@ -57,7 +50,7 @@ export default function ConflictInfo(props: CIPropType) {
         <OpenRepoButton
           category={Category.tertiary}
           className="t--commit-button"
-          href={gitMetaData?.browserSupportedRemoteUrl}
+          href={browserSupportedRemoteUrl}
           size={Size.large}
           tag="a"
           target="_blank"
@@ -65,6 +58,6 @@ export default function ConflictInfo(props: CIPropType) {
           width="max-content"
         />
       </Row>
-    </>
+    </div>
-  ) : null;
+  );
 }

app/client/src/pages/Editor/gitSync/components/GitErrorPopup.tsx

@@ -28,6 +28,7 @@ const StyledGitErrorPopup = styled.div`
       right: 0;
       display: flex;
       justify-content: center;
+
       .${Classes.OVERLAY_CONTENT} {
         overflow: hidden;
         bottom: ${(props) =>
@@ -36,6 +37,7 @@ const StyledGitErrorPopup = styled.div`
         background-color: ${Colors.WHITE};
       }
     }
+
     .git-error-popup {
       width: 364px;
       padding: ${(props) => props.theme.spaces[7]}px;
@@ -80,6 +82,8 @@ function GitErrorPopup() {
 
   const gitConflictDocumentUrl = useSelector(getConflictFoundDocUrlDeploy);
 
+  const isConflicting = true; // refactored
+
   return (
     <StyledGitErrorPopup>
       <Overlay
@@ -93,10 +97,12 @@ function GitErrorPopup() {
           <div className="git-error-popup">
             <Header closePopup={hidePopup} />
             <Space size={2} />
+            {isConflicting && (
               <ConflictInfo
-              isConflicting
+                browserSupportedRemoteUrl={""}
                 learnMoreLink={gitConflictDocumentUrl}
               />
+            )}
           </div>
         </div>
       </Overlay>

app/client/src/pages/Editor/gitSync/components/MergeStatus.tsx

@@ -2,12 +2,15 @@ import React from "react";
 import styled from "constants/DefaultTheme";
 import StatusLoader from "./StatusLoader";
 import Text, { TextType } from "components/ads/Text";
-import ErrorWarning from "remixicon-react/ErrorWarningLineIcon";
-import CheckLine from "remixicon-react/CheckLineIcon";
 import { Colors } from "constants/Colors";
+import { Classes } from "components/ads";
 
 const Flex = styled.div`
   display: flex;
+
+  & ${Classes.TEXT} {
+    align-self: center;
+  }
 `;
 
 export const MERGE_STATUS_STATE = {
@@ -42,13 +45,7 @@ function MergeStatus({
       return (
         <Flex>
           <Wrapper>
-            <CheckLine color={Colors.GREEN} size={18} />
+            <Text color={Colors.GREEN} type={TextType.P3} weight="600">
-            <Text
-              color={Colors.GREEN}
-              style={{ marginLeft: 8, alignSelf: "center" }}
-              type={TextType.P3}
-              weight="600"
-            >
               {message}
             </Text>
           </Wrapper>
@@ -59,37 +56,14 @@ function MergeStatus({
       return (
         <Flex>
           <Wrapper>
-            <ErrorWarning color={Colors.CRIMSON} size={18} />
+            <Text color={Colors.CRIMSON} type={TextType.P3} weight="600">
-            <Text
-              color={Colors.CRIMSON}
-              style={{ marginLeft: 8, alignSelf: "center" }}
-              type={TextType.P3}
-              weight="600"
-            >
               {message}
             </Text>
           </Wrapper>
         </Flex>
       );
-
-    // case MERGE_STATUS_STATE.NONE:
-    //   return (
-    //     <Flex>
-    //       <Space horizontal size={10} />
-    //       <Wrapper>
-    //         <ErrorWarning size={18} />
-    //         <Text
-    //           style={{ marginLeft: 8, alignSelf: "center" }}
-    //           type={TextType.P3}
-    //         >
-    //           {createMessage(FETCH_MERGE_STATUS_FAILURE)}
-    //         </Text>
-    //       </Wrapper>
-    //     </Flex>
-    //   );
     default:
       return null;
-    // status === MERGE_STATUS_STATE.NONE will execute default case.
   }
 }