feat: init bottom bar skeleton, add feature flag for git (#7105)

2021-09-06 14:59:35 +05:30 · 2021-09-06 14:59:35 +05:30 · a2b38c86eb
commit a2b38c86eb
parent 3d85575979
30 changed files with 222 additions and 61 deletions
--- a/app/client/src/assets/icons/ads/down-arrow.svg
+++ b/app/client/src/assets/icons/ads/down-arrow.svg
@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33159 8.28101L5.33159 0.166341L6.66493 0.166341L6.66493 8.28101L10.2409 4.70501L11.1836 5.64768L5.99826 10.833L0.812928 5.64767L1.75559 4.70501L5.33159 8.28101Z" fill="#716E6E"/>
+</svg>
--- a/app/client/src/assets/icons/ads/git-branch.svg
+++ b/app/client/src/assets/icons/ads/git-branch.svg
@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.73793 4.35956C2.85358 4.78278 3.10513 5.15626 3.45387 5.42248C3.80261 5.68871 4.22919 5.83291 4.66793 5.83289H7.3346C8.11995 5.83295 8.88007 6.11025 9.48098 6.6159C10.0819 7.12155 10.485 7.8231 10.6193 8.59689C11.0717 8.74451 11.4568 9.0486 11.7052 9.45455C11.9536 9.8605 12.0492 10.3417 11.9748 10.8118C11.9003 11.2819 11.6608 11.71 11.2991 12.0194C10.9373 12.3287 10.4772 12.499 10.0013 12.4996C9.53562 12.4999 9.08444 12.3378 8.72553 12.0411C8.36662 11.7445 8.12247 11.3319 8.03517 10.8745C7.94788 10.4171 8.02292 9.94358 8.24736 9.53559C8.47179 9.1276 8.83155 8.81071 9.2646 8.63956C9.14896 8.21633 8.8974 7.84286 8.54866 7.57663C8.19992 7.31041 7.77334 7.16621 7.3346 7.16623H4.66793C3.94653 7.16729 3.24442 6.93325 2.66793 6.49956V8.61289C3.11293 8.77016 3.488 9.07969 3.72684 9.48676C3.96568 9.89384 4.05292 10.3722 3.97314 10.8374C3.89336 11.3026 3.65169 11.7246 3.29085 12.0288C2.93001 12.333 2.47324 12.4999 2.00127 12.4999C1.5293 12.4999 1.07252 12.333 0.711685 12.0288C0.350845 11.7246 0.109175 11.3026 0.0293919 10.8374C-0.0503916 10.3722 0.0368488 9.89384 0.275693 9.48676C0.514537 9.07969 0.889604 8.77016 1.3346 8.61289V4.38623C0.892583 4.23016 0.519399 3.92385 0.280168 3.52074C0.0409361 3.11762 -0.0491525 2.6433 0.0256224 2.18055C0.100397 1.71779 0.335287 1.29599 0.689305 0.988735C1.04332 0.681481 1.49399 0.508291 1.96266 0.499385C2.43133 0.490479 2.88825 0.646423 3.25369 0.940005C3.61912 1.23359 3.86987 1.64617 3.96217 2.10575C4.05447 2.56533 3.98247 3.04272 3.75872 3.45464C3.53498 3.86655 3.1737 4.18682 2.73793 4.35956ZM2.00127 3.16623C2.17808 3.16623 2.34765 3.09599 2.47267 2.97096C2.59769 2.84594 2.66793 2.67637 2.66793 2.49956C2.66793 2.32275 2.59769 2.15318 2.47267 2.02815C2.34765 1.90313 2.17808 1.83289 2.00127 1.83289C1.82446 1.83289 1.65489 1.90313 1.52986 2.02815C1.40484 2.15318 1.3346 2.32275 1.3346 2.49956C1.3346 2.67637 1.40484 2.84594 1.52986 2.97096C1.65489 3.09599 1.82446 3.16623 2.00127 3.16623ZM2.00127 11.1662C2.17808 11.1662 2.34765 11.096 2.47267 10.971C2.59769 10.8459 2.66793 10.6764 2.66793 10.4996C2.66793 10.3227 2.59769 10.1532 2.47267 10.0282C2.34765 9.90313 2.17808 9.83289 2.00127 9.83289C1.82446 9.83289 1.65489 9.90313 1.52986 10.0282C1.40484 10.1532 1.3346 10.3227 1.3346 10.4996C1.3346 10.6764 1.40484 10.8459 1.52986 10.971C1.65489 11.096 1.82446 11.1662 2.00127 11.1662ZM10.0013 11.1662C10.1781 11.1662 10.3476 11.096 10.4727 10.971C10.5977 10.8459 10.6679 10.6764 10.6679 10.4996C10.6679 10.3227 10.5977 10.1532 10.4727 10.0282C10.3476 9.90313 10.1781 9.83289 10.0013 9.83289C9.82446 9.83289 9.65489 9.90313 9.52986 10.0282C9.40484 10.1532 9.3346 10.3227 9.3346 10.4996C9.3346 10.6764 9.40484 10.8459 9.52986 10.971C9.65489 11.096 9.82446 11.1662 10.0013 11.1662Z" fill="#858282"/>
+</svg>
--- a/app/client/src/assets/icons/ads/plus.svg
+++ b/app/client/src/assets/icons/ads/plus.svg
@ -0,0 +1,3 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33203 4.83301V0.833008H5.66536V4.83301H9.66537V6.16634H5.66536V10.1663H4.33203V6.16634H0.332031V4.83301H4.33203Z" fill="#858282"/>
+</svg>
--- a/app/client/src/assets/icons/ads/up-arrow.svg
+++ b/app/client/src/assets/icons/ads/up-arrow.svg
@ -0,0 +1,3 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.66841 2.71899V10.8337H5.33507V2.71899L1.75907 6.29499L0.816406 5.35232L6.00174 0.166992L11.1871 5.35232L10.2444 6.29499L6.66841 2.71899Z" fill="#716E6E"/>
+</svg>
--- a/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx
+++ b/app/client/src/components/editorComponents/Debugger/DebuggerTabs.tsx
@ -21,7 +21,7 @@ const TABS_HEADER_HEIGHT = 36;

 const Container = styled.div`
  ${ResizerCSS}
-  position: fixed;
+  position: absolute;
  bottom: 0;
  height: 25%;
  min-height: ${TABS_HEADER_HEIGHT}px;
--- a/app/client/src/components/editorComponents/Debugger/index.tsx
+++ b/app/client/src/components/editorComponents/Debugger/index.tsx
@ -18,7 +18,7 @@ const Container = styled.div<{ errorCount: number; warningCount: number }>`
  z-index: ${Layers.debugger};
  background-color: ${(props) =>
    props.theme.colors.debugger.floatingButton.background};
-  position: fixed;
+  position: absolute;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@ -345,6 +345,7 @@ export type Theme = {
  propertyPane: PropertyPaneTheme;
  headerHeight: string;
  smallHeaderHeight: string;
+  bottomBarHeight: string;
  integrationsPageUnusableHeight: string;
  backBanner: string;
  homePage: any;
@ -1197,6 +1198,15 @@ type ColorType = {
    menuBackgroundColor: string;
    separator: string;
  };
+  editorBottomBar: {
+    background: string;
+    buttonBackgroundHover: string;
+  };
+};
+
+const editorBottomBar = {
+  background: Colors.WHITE,
+  buttonBackgroundHover: Colors.Gallery,
 };

 const gitSyncModal = {
@ -1405,6 +1415,7 @@ const numberedStep = {
 };

 export const dark: ColorType = {
+  editorBottomBar,
  gitSyncModal,
  numberedStep,
  tabItemBackgroundFill,
@ -1978,6 +1989,7 @@ export const dark: ColorType = {
 };

 export const light: ColorType = {
+  editorBottomBar,
  gitSyncModal,
  numberedStep,
  tabItemBackgroundFill,
@ -2823,6 +2835,7 @@ export const theme: Theme = {
  },
  headerHeight: "48px",
  smallHeaderHeight: "35px",
+  bottomBarHeight: "34px",
  integrationsPageUnusableHeight: "182px",
  backBanner: "30px",
  canvasBottomPadding: 200,
--- a/app/client/src/constants/Layers.tsx
+++ b/app/client/src/constants/Layers.tsx
@ -47,6 +47,7 @@ export const Layers = {
  contextMenu: Indices.Layer4,
  dynamicAutoComplete: Indices.Layer5,
  debugger: Indices.Layer6,
+  bottomBar: Indices.Layer6,
  productUpdates: Indices.Layer7,
  portals: Indices.Layer9,
  header: Indices.Layer9,
--- a/app/client/src/constants/messages.ts
+++ b/app/client/src/constants/messages.ts
@ -462,6 +462,7 @@ export const DEPLOY_WITHOUT_GIT = () =>
 export const DEPLOY_YOUR_APPLICATION = () => "Deploy your application";
 export const COMMIT = () => "COMMIT";
 export const PUSH = () => "PUSH";
+export const PULL = () => "PULL";

 export const SNIPPET_DESCRIPTION = () =>
  `Search and Insert code snippets to perform complex actions quickly.`;
--- a/app/client/src/entities/FeatureFlag.ts
+++ b/app/client/src/entities/FeatureFlag.ts
@ -4,6 +4,7 @@ type FeatureFlag = {
  MULTIPLAYER: boolean;
  LINTING: boolean;
  SNIPPET: boolean;
+  GIT: boolean;
 };

 export default FeatureFlag;
--- a/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
+++ b/app/client/src/pages/Editor/APIEditor/CurlImportForm.tsx
@ -14,6 +14,11 @@ import Button from "components/editorComponents/Button";
 import CurlLogo from "assets/images/Curl-logo.svg";
 import CloseEditor from "../../../components/editorComponents/CloseEditor";

+const StyledForm = styled(Form)`
+  flex: 1;
+  overflow: auto;
+`;
+
 const CurlImportFormContainer = styled.div`
  display: flex;
  flex-direction: column;
@ -126,7 +131,7 @@ class CurlImportForm extends React.Component<Props> {
          </p>
          <hr className="divider" />
        </Header>
-        <Form onSubmit={handleSubmit(curlImportSubmitHandler)}>
+        <StyledForm onSubmit={handleSubmit(curlImportSubmitHandler)}>
          <CurlImport>
            <CurlContainer>
              <label className="inputLabel">{"Paste CURL Code Here"}</label>
@ -158,7 +163,7 @@ class CurlImportForm extends React.Component<Props> {
              text="Import"
            />
          </CurlImportFormContainer>
-        </Form>
+        </StyledForm>
      </>
    );
  }
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@ -56,13 +56,7 @@ import { isEmpty } from "lodash";
 const Form = styled.form`
  display: flex;
  flex-direction: column;
-  height: calc(
-    100vh -
-      (
-        ${(props) => props.theme.smallHeaderHeight} +
-          ${(props) => props.theme.backBanner}
-      )
-  );
+  flex: 1;
  overflow: hidden;
  width: 100%;
  ${FormLabel} {
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@ -186,6 +186,8 @@ class ApiEditor extends React.Component<Props> {
        style={{
          position: "relative",
          height: "100%",
+          display: "flex",
+          flexDirection: "column",
        }}
      >
        {formUiComponent === "ApiEditorForm" && (
--- a/app/client/src/pages/Editor/BottomBar/index.tsx
+++ b/app/client/src/pages/Editor/BottomBar/index.tsx
@ -0,0 +1,22 @@
+import React from "react";
+import styled from "styled-components";
+import QuickGitActions from "pages/Editor/gitSync/QuickGitActions";
+import { Layers } from "constants/Layers";
+
+const Container = styled.div`
+  position: relative;
+  width: 100%;
+  height: ${(props) => props.theme.bottomBarHeight};
+  display: flex;
+  justify-content: space-between;
+  background-color: ${(props) => props.theme.colors.editorBottomBar.background};
+  z-index: ${Layers.bottomBar};
+`;
+
+export default function BottomBar() {
+  return (
+    <Container>
+      <QuickGitActions />
+    </Container>
+  );
+}
--- a/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/JSONtoForm.tsx
@ -50,15 +50,9 @@ export const ActionButton = styled(BaseButton)`
 `;

 const DBForm = styled.div`
+  flex: 1;
  padding: 20px;
  margin-right: 0px;
-  height: calc(
-    100vh -
-      (
-        ${(props) => props.theme.smallHeaderHeight} +
-          ${(props) => props.theme.backBanner}
-      )
-  );
  overflow: auto;
  .backBtn {
    padding-bottom: 1px;
@ -230,7 +224,7 @@ export class JSONtoForm<

  renderForm = (content: any) => {
    return (
-      <div>
+      <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
        <CloseEditor />
        <DBForm>{content}</DBForm>
      </div>
--- a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
@ -83,13 +83,10 @@ type Props = DatasourceRestApiEditorProps &
  InjectedFormProps<ApiDatasourceForm, DatasourceRestApiEditorProps>;

 const RestApiForm = styled.div`
+  flex: 1;
  padding: 20px;
  margin-left: 10px;
  margin-right: 0px;
-  height: calc(
-    100vh - ${(props) => props.theme.headerHeight} -
-      ${(props) => props.theme.backBanner}
-  );
  overflow: auto;
  .backBtn {
    padding-bottom: 1px;
--- a/app/client/src/pages/Editor/IntegrationEditor/ActiveDataSources.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/ActiveDataSources.tsx
@ -16,9 +16,7 @@ const QueryHomePage = styled.div`
  overflow: auto;
  display: flex;
  flex-direction: column;
-  height: calc(
-    100vh - ${(props) => props.theme.integrationsPageUnusableHeight}
-  );
+  flex: 1;

  .sectionHeader {
    font-weight: ${(props) => props.theme.fontWeights[2]};
@ -33,9 +31,7 @@ const CreateButton = styled(Button)`
 `;

 const EmptyActiveDatasource = styled.div`
-  height: calc(
-    100vh - ${(props) => props.theme.integrationsPageUnusableHeight}
-  );
+  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
--- a/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/IntegrationsHomeScreen.tsx
@ -33,11 +33,13 @@ const HeaderFlex = styled.div`
 `;

 const ApiHomePage = styled.div`
+  display: flex;
+  flex-direction: column;
+
  font-size: 20px;
  padding: 20px 20px 0 20px;
  /* margin-left: 10px; */
-  min-height: calc(100vh - 66px);
-  max-height: calc(100vh - 66px);
+  flex: 1;
  overflow: hidden !important;
  .closeBtn {
    position: absolute;
@ -67,17 +69,16 @@ const SectionGrid = styled.div`
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 180px;
+  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 16px;
+  flex: 1;
+  min-height: 0;
 `;
 const NewIntegrationsContainer = styled.div`
  ${thinScrollbar};
  scrollbar-width: thin;
  overflow: auto;
-  max-height: calc(
-    100vh - ${(props) => props.theme.integrationsPageUnusableHeight}
-  );
-  /* padding-bottom: 300px; */
-  /* margin-top: 16px; */
+  flex: 1;
  & > div {
    margin-bottom: 20px;
  }
--- a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
@ -15,9 +15,7 @@ const MockDataSourceWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
-  /* height: calc(
-    100vh - ${(props) => props.theme.integrationsPageUnusableHeight}
-  ); */
+  flex: 1;

  .sectionHeader {
    font-weight: ${(props) => props.theme.fontWeights[2]};
--- a/app/client/src/pages/Editor/IntegrationEditor/index.tsx
+++ b/app/client/src/pages/Editor/IntegrationEditor/index.tsx
@ -16,6 +16,8 @@ const integrationsEditor = (props: Props) => {
      style={{
        position: "relative",
        height: "100%",
+        display: "flex",
+        flexDirection: "column",
      }}
    >
      <IntegrationsHomeScreen
--- a/app/client/src/pages/Editor/MainContainer.tsx
+++ b/app/client/src/pages/Editor/MainContainer.tsx
@ -7,31 +7,43 @@ import EditorsRouter from "./routes";
 import WidgetsEditor from "./WidgetsEditor";
 import { BUILDER_URL } from "constants/routes";
 import Sidebar from "components/editorComponents/Sidebar";
+import BottomBar from "./BottomBar";
+
+import getFeatureFlags from "utils/featureFlags";

 const SentryRoute = Sentry.withSentryRouting(Route);

 const Container = styled.div`
  display: flex;
-  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  height: calc(
+    100vh - ${(props) => props.theme.smallHeaderHeight} -
+      ${(props) =>
+        getFeatureFlags().GIT ? props.theme.bottomBarHeight : "0px"}
+  );
  background-color: ${(props) => props.theme.appBackground};
 `;

 const EditorContainer = styled.div`
  position: relative;
  width: calc(100vw - ${(props) => props.theme.sidebarWidth});
+  display: flex;
+  flex-direction: column;
 `;

 function MainContainer() {
  return (
-    <Container>
-      <Sidebar />
-      <EditorContainer>
-        <Switch>
-          <SentryRoute component={WidgetsEditor} exact path={BUILDER_URL} />
-          <SentryRoute component={EditorsRouter} />
-        </Switch>
-      </EditorContainer>
-    </Container>
+    <>
+      <Container>
+        <Sidebar />
+        <EditorContainer>
+          <Switch>
+            <SentryRoute component={WidgetsEditor} exact path={BUILDER_URL} />
+            <SentryRoute component={EditorsRouter} />
+          </Switch>
+        </EditorContainer>
+      </Container>
+      {getFeatureFlags().GIT && <BottomBar />}
+    </>
  );
 }

--- a/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
+++ b/app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx
@ -69,15 +69,12 @@ import { UIComponentTypes } from "../../../api/PluginApi";
 import TooltipComponent from "components/ads/Tooltip";

 const QueryFormContainer = styled.form`
+  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 0px 0px 0px;
  width: 100%;
-  height: calc(
-    100vh - ${(props) => props.theme.smallHeaderHeight} -
-      ${(props) => props.theme.backBanner}
-  );
  .statementTextArea {
    font-size: 14px;
    line-height: 20px;
--- a/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
+++ b/app/client/src/pages/Editor/SaaSEditor/ListView.tsx
@ -29,7 +29,7 @@ const IntegrationHomePage = styled.div`
  overflow: auto;
  display: flex;
  flex-direction: column;
-  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  flex: 1;

  .sectionHeader {
    font-weight: ${(props) => props.theme.fontWeights[2]};
--- a/app/client/src/pages/Editor/Welcome.tsx
+++ b/app/client/src/pages/Editor/Welcome.tsx
@ -8,7 +8,7 @@ import { AppState } from "reducers";
 import { showOnboardingLoader } from "actions/onboardingActions";

 const Wrapper = styled.div`
-  height: calc(100vh - 48px);
+  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
  width: 100%;
  display: flex;
  justify-content: center;
--- a/app/client/src/pages/Editor/WidgetsEditor.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor.tsx
@ -30,11 +30,12 @@ import CrudInfoModal from "./GeneratePage/components/CrudInfoModal";

 const EditorWrapper = styled.div`
  display: flex;
+  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
-  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  position: relative;
 `;

 const CanvasContainer = styled.section`
--- a/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
+++ b/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
@ -0,0 +1,94 @@
+import React from "react";
+import styled from "styled-components";
+import { ReactComponent as UpArrow } from "assets/icons/ads/up-arrow.svg";
+import { ReactComponent as DownArrow } from "assets/icons/ads/down-arrow.svg";
+import { ReactComponent as Plus } from "assets/icons/ads/plus.svg";
+// import { ReactComponent as GitMerge } from "assets/icons/ads/git-merge.svg";
+import { ReactComponent as GitBranch } from "assets/icons/ads/git-branch.svg";
+
+import { COMMIT, PUSH, PULL, MERGE, createMessage } from "constants/messages";
+import { noop } from "lodash";
+
+type QuickActionButtonProps = {
+  icon: React.ReactNode;
+  onClick: () => void;
+  tooltipText: string;
+};
+
+const QuickActionButtonContainer = styled.div`
+  padding: ${(props) => props.theme.spaces[1]}px
+    ${(props) => props.theme.spaces[2]}px;
+  margin-left: ${(props) => props.theme.spaces[2]}px;
+  cursor: pointer;
+  &:hover {
+    background-color: ${(props) =>
+      props.theme.colors.editorBottomBar.buttonBackgroundHover};
+  }
+`;
+
+function QuickActionButton({
+  icon,
+  onClick,
+}: // tooltipText,
+QuickActionButtonProps) {
+  return (
+    <QuickActionButtonContainer onClick={onClick}>
+      {icon}
+    </QuickActionButtonContainer>
+  );
+}
+
+const getQuickActionButtons = ({
+  commit,
+  merge,
+  pull,
+  push,
+}: {
+  commit: () => void;
+  push: () => void;
+  pull: () => void;
+  merge: () => void;
+}) => [
+  {
+    icon: <Plus />,
+    onClick: commit,
+    tooltipText: createMessage(COMMIT),
+  },
+  {
+    icon: <UpArrow />,
+    onClick: push,
+    tooltipText: createMessage(PUSH),
+  },
+  {
+    icon: <DownArrow />,
+    onClick: pull,
+    tooltipText: createMessage(PULL),
+  },
+  {
+    icon: <GitBranch />,
+    onClick: merge,
+    tooltipText: createMessage(MERGE),
+  },
+];
+
+const Container = styled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+export default function QuickGitActions() {
+  const quickActionButtons = getQuickActionButtons({
+    commit: noop,
+    push: noop,
+    pull: noop,
+    merge: noop,
+  });
+  return (
+    <Container>
+      {quickActionButtons.map((button) => (
+        <QuickActionButton key={button.tooltipText} {...button} />
+      ))}
+    </Container>
+  );
+}
--- a/app/client/src/pages/Editor/routes.tsx
+++ b/app/client/src/pages/Editor/routes.tsx
@ -48,7 +48,7 @@ const Wrapper = styled.div<{ isVisible: boolean }>`
  top: 0;
  left: 0;
  width: ${(props) => (!props.isVisible ? "0px" : "100%")};
-  height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
+  height: 100%;
  background-color: ${(props) =>
    props.isVisible ? "rgba(0, 0, 0, 0.26)" : "transparent"};
  z-index: ${(props) => (props.isVisible ? 2 : -1)};
@ -61,6 +61,8 @@ const DrawerWrapper = styled.div<{
  background-color: white;
  width: ${(props) => (!props.isVisible ? "0" : "100%")};
  height: 100%;
+  display: flex;
+  flex-direction: column;
 `;

 interface RouterState {
--- a/app/client/src/pages/Editor/utils.ts
+++ b/app/client/src/pages/Editor/utils.ts
@ -1,6 +1,7 @@
 import { debounce } from "lodash";
 import ReactDOM from "react-dom";
 import ResizeObserver from "resize-observer-polyfill";
+import getFeatureFlags from "utils/featureFlags";

 export const draggableElement = (
  id: string,
@ -38,6 +39,8 @@ export const draggableElement = (
    calculatedLeft: number,
    calculatedTop: number,
  ) => {
+    const bottomBarOffset = getFeatureFlags().GIT ? 34 : 0;
+
    if (calculatedLeft <= 0) {
      calculatedLeft = 0;
    }
@ -47,8 +50,12 @@ export const draggableElement = (
    if (calculatedLeft >= window.innerWidth - element.clientWidth) {
      calculatedLeft = window.innerWidth - element.clientWidth;
    }
-    if (calculatedTop >= window.innerHeight - element.clientHeight) {
-      calculatedTop = window.innerHeight - element.clientHeight;
+    if (
+      calculatedTop >=
+      window.innerHeight - (element.clientHeight + bottomBarOffset)
+    ) {
+      calculatedTop =
+        window.innerHeight - element.clientHeight - bottomBarOffset;
    }
    return {
      left: calculatedLeft,
--- a/app/server/appsmith-server/src/main/java/com/appsmith/server/featureflags/FeatureFlagEnum.java
+++ b/app/server/appsmith-server/src/main/java/com/appsmith/server/featureflags/FeatureFlagEnum.java
@ -28,6 +28,6 @@ public enum FeatureFlagEnum {
    COMMENT,
    SNIPPET,
    LINTING,
-    MULTIPLAYER;
+    MULTIPLAYER,
+    GIT;
 }
-
--- a/app/server/appsmith-server/src/main/resources/features/init-flags.yml
+++ b/app/server/appsmith-server/src/main/resources/features/init-flags.yml
@ -53,3 +53,12 @@ ff4j:
        param:
          - name: emailDomains
            value: appsmith.com
+
+    - uid: GIT
+      enable: true
+      description: Enable git for apps
+      flipstrategy:
+        class: com.appsmith.server.featureflags.strategies.EmailBasedRolloutStrategy
+        param:
+          - name: emailDomains
+            value: test.com