feat: add merge page ui

app/client/src/components/ads/Dropdown.tsx

@@ -285,6 +285,14 @@ const HeaderWrapper = styled.div`
 const SelectedDropDownHolder = styled.div`
   display: flex;
   align-items: center;
+  min-width: 0;
+  overflow: hidden;
+
+  & ${Text} {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 
 const SelectedIcon = styled(Icon)`

app/client/src/constants/messages.ts

@@ -450,3 +450,5 @@ export const DEPLOY_WITHOUT_GIT = () =>
 export const DEPLOY_YOUR_APPLICATION = () => "Deploy your application";
 export const COMMIT = () => "COMMIT";
 export const PUSH = () => "PUSH";
+export const MERGE_CHANGES = () => "Merge Changes";
+export const SELECT_BRANCH_TO_MERGE = () => "Select branch to merge";

app/client/src/pages/Editor/gitSync/GitSyncModal.tsx

@@ -9,6 +9,7 @@ import Menu from "./Menu";
 import { MENU_ITEM, MENU_ITEMS } from "./constants";
 import GitConnection from "./GitConnection";
 import Deploy from "./Deploy/Deploy";
+import Merge from "./Merge";
 import Icon from "components/ads/Icon";
 import { Colors } from "constants/Colors";
 import { Classes } from "./constants";
@@ -56,7 +57,7 @@ function NoopComponent() {
 const ComponentsByTab = {
   [MENU_ITEM.GIT_CONNECTION]: GitConnection,
   [MENU_ITEM.DEPLOY]: Deploy,
-  [MENU_ITEM.MERGE]: NoopComponent,
+  [MENU_ITEM.MERGE]: Merge,
   [MENU_ITEM.SHARE_APPLICATION]: NoopComponent,
   [MENU_ITEM.SETTINGS]: NoopComponent,
 };

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { Title, Caption, Space } from "./components/StyledComponents";
+import Dropdown from "components/ads/Dropdown";
+
+import {
+  createMessage,
+  MERGE_CHANGES,
+  SELECT_BRANCH_TO_MERGE,
+} from "constants/messages";
+import { ReactComponent as MergeIcon } from "assets/icons/ads/git-merge.svg";
+import { ReactComponent as LeftArrow } from "assets/icons/ads/arrow-left-1.svg";
+
+import styled from "styled-components";
+import * as log from "loglevel";
+import Button, { Size } from "components/ads/Button";
+
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+// mock data
+const options = [
+  { label: "Master", value: "master" },
+  {
+    label: "Feature/new",
+    value: "Feature/new",
+  },
+];
+
+export default function Merge() {
+  return (
+    <>
+      <Title>{createMessage(MERGE_CHANGES)}</Title>
+      <Caption>{createMessage(SELECT_BRANCH_TO_MERGE)}</Caption>
+      <Space size={3} />
+      <Row>
+        <MergeIcon />
+        <Space horizontal size={3} />
+        <Dropdown
+          onSelect={() => {
+            log.debug("selected");
+          }}
+          options={options}
+          selected={{ label: "Master", value: "master" }}
+          showLabelOnly
+          width={"220px"}
+        />
+        <Space horizontal size={3} />
+        <LeftArrow />
+        <Space horizontal size={3} />
+        <Dropdown
+          onSelect={() => {
+            log.debug("selected");
+          }}
+          options={options}
+          selected={{
+            label: "Feature/new-feature",
+            value: "Feature/new-feature",
+          }}
+          showLabelOnly
+          width={"220px"}
+        />
+      </Row>
+      <Space size={3} />
+      <Button
+        size={Size.medium}
+        text={createMessage(MERGE_CHANGES)}
+        width="max-content"
+      />
+    </>
+  );
+}