diff --git a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx index 5dcc8d2878..ea7203f6d4 100644 --- a/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx +++ b/app/client/src/pages/Editor/gitSync/Tabs/Deploy.tsx @@ -291,10 +291,14 @@ function Deploy() { width="max-content" /> )} - + {isConflicting && ( + + )} {showCommitButton && ( - + {isConflicting && ( + + )} + {showMergeSuccessIndicator ? ( ) : ( diff --git a/app/client/src/pages/Editor/gitSync/components/ConflictInfo.test.tsx b/app/client/src/pages/Editor/gitSync/components/ConflictInfo.test.tsx new file mode 100644 index 0000000000..625860c0f8 --- /dev/null +++ b/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( + , + ); + + // 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(); + }); +}); diff --git a/app/client/src/pages/Editor/gitSync/components/ConflictInfo.tsx b/app/client/src/pages/Editor/gitSync/components/ConflictInfo.tsx index f23636eca3..2e9dc56a43 100644 --- a/app/client/src/pages/Editor/gitSync/components/ConflictInfo.tsx +++ b/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 = { - isConflicting?: boolean; +type Props = { + browserSupportedRemoteUrl: string; learnMoreLink: string; }; -export default function ConflictInfo(props: CIPropType) { - const { isConflicting } = props; - const theme = useTheme() as Theme; - const gitMetaData = useSelector(getCurrentAppGitMetaData); - return isConflicting ? ( - <> - +export default function ConflictInfo({ + browserSupportedRemoteUrl, + learnMoreLink, +}: Props) { + return ( +
+
- + {createMessage(GIT_CONFLICTING_INFO)}
@@ -57,7 +50,7 @@ export default function ConflictInfo(props: CIPropType) { - - ) : null; +
+ ); } diff --git a/app/client/src/pages/Editor/gitSync/components/GitErrorPopup.tsx b/app/client/src/pages/Editor/gitSync/components/GitErrorPopup.tsx index 7521548ee1..86fa198b10 100644 --- a/app/client/src/pages/Editor/gitSync/components/GitErrorPopup.tsx +++ b/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 (
- + {isConflicting && ( + + )} diff --git a/app/client/src/pages/Editor/gitSync/components/MergeStatus.tsx b/app/client/src/pages/Editor/gitSync/components/MergeStatus.tsx index 3c716d4d42..891f5afa73 100644 --- a/app/client/src/pages/Editor/gitSync/components/MergeStatus.tsx +++ b/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 ( - - + {message} @@ -59,37 +56,14 @@ function MergeStatus({ return ( - - + {message} ); - - // case MERGE_STATUS_STATE.NONE: - // return ( - // - // - // - // - // - // {createMessage(FETCH_MERGE_STATUS_FAILURE)} - // - // - // - // ); default: return null; - // status === MERGE_STATUS_STATE.NONE will execute default case. } }