feat: ui for autocommit (#29441)

## Description
- Adds a button to enable/disable auto-commit in Git Settings
- Adds loading state for auto-commit

#### PR fixes following issue(s)
Fixes #29127 

#### Media
<img width="694" alt="image"
src="https://github.com/appsmithorg/appsmith/assets/8724051/628d9c93-f374-4611-9c1d-c568d3a6bed5">


#### Type of change
> Please delete options that are not relevant.
- New feature (non-breaking change which adds functionality)
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
  - Introduced auto-commit functionality for Git synchronization.
- Added modals and status bars to manage and display auto-commit
progress.
- Implemented feature flags to enable or disable the auto-commit
feature.

- **Enhancements**
  - Updated Git settings to include auto-commit configuration options.
- Improved user interface with new messages and warnings related to
auto-commit.

- **Bug Fixes**
- Addressed issues with Git-related actions to ensure smoother user
experience.

- **Documentation**
- Added user-facing messages and descriptions for the auto-commit
feature.

- **Refactor**
- Refactored Git settings components to accommodate new auto-commit
feature.

- **Style**
- Updated styles to support new components related to auto-commit
functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>

app/client/cypress/e2e/Regression/Apps/CurrencyInputIssue_Spec.js

@@ -14,12 +14,12 @@ describe("Currency Input Issue", function () {
       agHelper.VisitNAssert("/applications", "getReleaseItems");
       homePage.ImportApp("CurrencyInputIssueExport.json");
       cy.wait("@importNewApplication").then((interception) => {
-          const { isPartialImport } = interception.response.body.data;
+        const { isPartialImport } = interception.response.body.data;
         if (isPartialImport) {
           cy.get(reconnectDatasourceModal.SkipToAppBtn).click({
             force: true,
           });
-          } else {
+        } else {
           homePage.AssertImportToast();
         }
       });

app/client/cypress/e2e/Regression/ClientSide/Binding/TableV2_Widget_API_Pagination_spec.js

@@ -19,29 +19,29 @@ describe(
       agHelper.AddDsl("tableV2TextPaginationDsl");
     });
 
-  it("1. Create an API and Execute the API and bind with Table", function () {
-    apiPage.CreateAndFillApi(
-      this.dataSet.paginationUrl + this.dataSet.paginationParam,
-    );
-    agHelper.VerifyEvaluatedValue(
-      this.dataSet.paginationUrl + "mock-api?records=20&page=1&size=10",
-    );
-    apiPage.RunAPI();
-    //Validate Table V2 with API data and then add a column
-    EditorNavigation.SelectEntityByName("Table1", EntityType.Widget);
-    propPane.UpdatePropertyFieldValue("Table data", "{{Api1.data}}");
-    cy.CheckWidgetProperties(commonlocators.serverSidePaginationCheckbox);
-    cy.get(`.t--widget-tablewidgetv2 .page-item`)
-      .first()
-      .should("contain", "1");
-    cy.get(`.t--widget-tablewidgetv2 .t--table-widget-next-page`)
-      .first()
-      .click();
-    cy.get(`.t--widget-tablewidgetv2 .page-item`)
-      .first()
-      .should("contain", "2");
-    agHelper.WaitUntilToastDisappear("done");
-  });
+    it("1. Create an API and Execute the API and bind with Table", function () {
+      apiPage.CreateAndFillApi(
+        this.dataSet.paginationUrl + this.dataSet.paginationParam,
+      );
+      agHelper.VerifyEvaluatedValue(
+        this.dataSet.paginationUrl + "mock-api?records=20&page=1&size=10",
+      );
+      apiPage.RunAPI();
+      //Validate Table V2 with API data and then add a column
+      EditorNavigation.SelectEntityByName("Table1", EntityType.Widget);
+      propPane.UpdatePropertyFieldValue("Table data", "{{Api1.data}}");
+      cy.CheckWidgetProperties(commonlocators.serverSidePaginationCheckbox);
+      cy.get(`.t--widget-tablewidgetv2 .page-item`)
+        .first()
+        .should("contain", "1");
+      cy.get(`.t--widget-tablewidgetv2 .t--table-widget-next-page`)
+        .first()
+        .click();
+      cy.get(`.t--widget-tablewidgetv2 .page-item`)
+        .first()
+        .should("contain", "2");
+      agHelper.WaitUntilToastDisappear("done");
+    });
 
     it("2. Bug #22477: should check whether the next page button is disabled and not clickable when last page is reached", () => {
       /**
@@ -53,7 +53,8 @@ describe(
       propPane.UpdatePropertyFieldValue("Total Records", "20");
       agHelper.GetNClick(table._nextPage("v2"));
 
-    agHelper.AssertAttribute(table._nextPage("v2"), "disabled", "disabled");
-    agHelper.AssertElementAbsence(locators._toastMsg);
-  });
-});
+      agHelper.AssertAttribute(table._nextPage("v2"), "disabled", "disabled");
+      agHelper.AssertElementAbsence(locators._toastMsg);
+    });
+  },
+);

app/client/src/actions/gitSyncActions.ts

@@ -485,3 +485,18 @@ export const updateGitProtectedBranchesInit = (payload: {
     payload,
   };
 };
+
+export const setIsAutocommitEnabled = (isAutocommitEnabled: boolean) => ({
+  type: ReduxActionTypes.GIT_SET_IS_AUTOCOMMIT_ENABLED,
+  payload: { isAutocommitEnabled },
+});
+
+export const setIsAutocommitModalOpen = (isAutocommitModalOpen: boolean) => ({
+  type: ReduxActionTypes.GIT_SET_IS_AUTOCOMMIT_MODAL_OPEN,
+  payload: { isAutocommitModalOpen },
+});
+
+export const setIsAutocommitInProgress = (isAutocommitInProgress: boolean) => ({
+  type: ReduxActionTypes.GIT_SET_IS_AUTOCOMMIT_IN_PROGRESS,
+  payload: { isAutocommitInProgress },
+});

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -128,6 +128,9 @@ const ActionTypes = {
   GIT_UPDATE_PROTECTED_BRANCHES_SUCCESS:
     "GIT_UPDATE_PROTECTED_BRANCHES_SUCCESS",
   GIT_UPDATE_PROTECTED_BRANCHES_ERROR: "GIT_UPDATE_PROTECTED_BRANCHES_ERROR",
+  GIT_SET_IS_AUTOCOMMIT_ENABLED: "GIT_SET_AUTOCOMMIT_ENABLED",
+  GIT_SET_IS_AUTOCOMMIT_MODAL_OPEN: "GIT_SET_AUTOCOMMIT_MODAL_OPEN",
+  GIT_SET_IS_AUTOCOMMIT_IN_PROGRESS: "GIT_SET_IS_AUTOCOMMIT_IN_PROGRESS",
 
   APP_COLLAB_LIST_EDITORS: "APP_COLLAB_LIST_EDITORS",
   APP_COLLAB_RESET_EDITORS: "APP_COLLAB_RESET_EDITORS",

app/client/src/ce/constants/messages.ts

@@ -1050,6 +1050,15 @@ export const GIT_AUTHOR = () => "Git author";
 export const DISCONNECT_GIT = () => "Disconnect Git";
 export const DISCONNECT_GIT_MESSAGE = () =>
   "This is irreversible. If you wish to reconnect, you will have to connect a new empty repository.";
+export const AUTOCOMMIT = () => "Auto - commit";
+export const AUTOCOMMIT_MESSAGE = () =>
+  "Enable/disable auto migrations from Appsmith.";
+export const AUTOCOMMIT_ENABLE = () => "Enable auto - commit";
+export const AUTOCOMMIT_DISABLE = () => "Disable auto - commit";
+export const AUTOCOMMIT_CONFIRM_DISABLE_MESSAGE = () =>
+  "Disabling auto-commit may result in uncommitted system changes after an Appsmith instance upgrade, requiring manual handling and potential discrepancies in Git versioning.";
+export const AUTOCOMMIT_IN_PROGRESS_MESSAGE = () =>
+  "Auto-committing Appsmith upgrade changes...";
 export const NEED_EMPTY_REPO_MESSAGE = () =>
   "You need an empty repository to connect to Git on Appsmith, please create one on your Git service provider to continue.";
 export const GIT_IMPORT_WAITING = () =>

app/client/src/ce/entities/FeatureFlag.ts

@@ -32,6 +32,8 @@ export const FEATURE_FLAG = {
     "release_server_dsl_migrations_enabled",
   license_git_branch_protection_enabled:
     "license_git_branch_protection_enabled",
+  release_git_autocommit_feature_enabled:
+    "release_git_autocommit_feature_enabled",
   license_widget_rtl_support_enabled: "license_widget_rtl_support_enabled",
   release_custom_widgets_enabled: "release_custom_widgets_enabled",
   ab_create_new_apps_enabled: "ab_create_new_apps_enabled",
@@ -74,6 +76,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_app_sidebar_enabled: false,
   release_server_dsl_migrations_enabled: false,
   license_git_branch_protection_enabled: false,
+  release_git_autocommit_feature_enabled: false,
   license_widget_rtl_support_enabled: false,
   release_custom_widgets_enabled: false,
   ab_create_new_apps_enabled: false,

app/client/src/ce/pages/Applications/index.tsx

@@ -108,6 +108,7 @@ import WorkflowCardList from "@appsmith/pages/Applications/WorkflowCardList";
 import { allowManageEnvironmentAccessForUser } from "@appsmith/selectors/environmentSelectors";
 import CreateNewAppsOption from "@appsmith/pages/Applications/CreateNewAppsOption";
 import { resetCurrentApplicationIdForCreateNewApp } from "actions/onboardingActions";
+import DisableAutocommitModal from "pages/Editor/gitSync/DisableAutocommitModal";
 
 export const { cloudHosting } = getAppsmithConfigs();
 
@@ -786,6 +787,7 @@ export function ApplicationsSection(props: any) {
       {workspacesListComponent}
       <>
         <GitSyncModal isImport />
+        <DisableAutocommitModal />
         <DisconnectGitModal />
       </>
       <ReconnectDatasourceModal />

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

@@ -0,0 +1,72 @@
+import {
+  setIsAutocommitEnabled,
+  setIsAutocommitModalOpen,
+} from "actions/gitSyncActions";
+import {
+  AUTOCOMMIT_CONFIRM_DISABLE_MESSAGE,
+  AUTOCOMMIT_DISABLE,
+  createMessage,
+} from "@appsmith/constants/messages";
+import {
+  Button,
+  Callout,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+} from "design-system";
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { getIsAutocommitModalOpen } from "selectors/gitSyncSelectors";
+
+function DisableAutocommitModal() {
+  const isAutocommitModalOpen = useSelector(getIsAutocommitModalOpen);
+
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    dispatch(setIsAutocommitModalOpen(false));
+  };
+
+  const handleDisableAutocommit = () => {
+    dispatch(setIsAutocommitEnabled(false));
+    dispatch(setIsAutocommitModalOpen(false));
+  };
+
+  return (
+    <Modal
+      onOpenChange={(open: boolean) => {
+        if (!open) handleClose();
+      }}
+      open={isAutocommitModalOpen}
+    >
+      <ModalContent
+        data-testid="t--autocommit-git-modal"
+        style={{ width: "640px" }}
+      >
+        <ModalHeader style={{ margin: 0 }}>
+          {createMessage(AUTOCOMMIT_DISABLE)}
+        </ModalHeader>
+        <ModalBody>
+          <Callout kind="warning">
+            <Text>{createMessage(AUTOCOMMIT_CONFIRM_DISABLE_MESSAGE)}</Text>
+          </Callout>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            className="t--autocommit-modal-cta-button"
+            kind="primary"
+            onClick={handleDisableAutocommit}
+            size="md"
+          >
+            {createMessage(AUTOCOMMIT_DISABLE)}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}
+
+export default DisableAutocommitModal;

app/client/src/pages/Editor/gitSync/QuickGitActions/AutocommitStatusbar.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { Statusbar } from "design-system-old";
+import styled from "styled-components";
+import {
+  AUTOCOMMIT_IN_PROGRESS_MESSAGE,
+  createMessage,
+} from "@appsmith/constants/messages";
+
+interface AutocommitStatusbarProps {
+  completed: boolean;
+  onHide?: () => void;
+}
+
+const StatusbarWrapper = styled.div`
+  > div {
+    display: flex;
+    height: initial;
+    align-items: center;
+  }
+
+  > div > div {
+    margin-top: 0px;
+    width: 150px;
+    margin-right: 12px;
+  }
+
+  > div > p {
+    margin-top: 0;
+  }
+`;
+
+export default function AutocommitStatusbar({
+  completed,
+  onHide,
+}: AutocommitStatusbarProps) {
+  const period = 4;
+  const [percentage, setPercentage] = useState(0);
+  useEffect(() => {
+    if (completed) {
+      setPercentage(100);
+      if (onHide) {
+        const timeout = setTimeout(() => {
+          onHide && onHide();
+        }, 1000);
+        return () => clearTimeout(timeout);
+      }
+    } else {
+      if (percentage < 90) {
+        const interval = setInterval(
+          () => {
+            setPercentage((percentage) => percentage + 10);
+          },
+          (period * 1000) / 9,
+        );
+        return () => clearInterval(interval);
+      }
+    }
+  });
+  return (
+    <StatusbarWrapper>
+      <Statusbar
+        active={false}
+        message={createMessage(AUTOCOMMIT_IN_PROGRESS_MESSAGE)}
+        percentage={percentage}
+        showOnlyMessage
+      />
+    </StatusbarWrapper>
+  );
+}

app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx

@@ -33,6 +33,7 @@ import { GitSyncModalTab } from "entities/GitSync";
 import {
   getCountOfChangesToCommit,
   getGitStatus,
+  getIsAutocommitInProgress,
   getIsFetchingGitStatus,
   getIsGitConnected,
   getPullFailed,
@@ -47,6 +48,7 @@ import AnalyticsUtil from "utils/AnalyticsUtil";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import { useIsGitAdmin } from "../hooks/useIsGitAdmin";
+import AutocommitStatusbar from "./AutocommitStatusbar";
 
 interface QuickActionButtonProps {
   className?: string;
@@ -333,6 +335,11 @@ export default function QuickGitActions() {
     FEATURE_FLAG.release_git_connect_v2_enabled,
   );
 
+  const isAutocommitFeatureEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_git_autocommit_feature_enabled,
+  );
+  const isAutocommitInProgress = useSelector(getIsAutocommitInProgress);
+
   const quickActionButtons = getQuickActionButtons({
     commit: () => {
       dispatch(
@@ -396,9 +403,13 @@ export default function QuickGitActions() {
   return isGitConnected ? (
     <Container>
       <BranchButton />
-      {quickActionButtons.map((button) => (
-        <QuickActionButton key={button.tooltipText} {...button} />
-      ))}
+      {isAutocommitFeatureEnabled && isAutocommitInProgress ? (
+        <AutocommitStatusbar completed={!isAutocommitInProgress} />
+      ) : (
+        quickActionButtons.map((button) => (
+          <QuickActionButton key={button.tooltipText} {...button} />
+        ))
+      )}
     </Container>
   ) : (
     <ConnectGitPlaceholder />

app/client/src/pages/Editor/gitSync/Tabs/GitSettings/DangerZone.tsx

@@ -0,0 +1,148 @@
+import {
+  AUTOCOMMIT,
+  AUTOCOMMIT_DISABLE,
+  AUTOCOMMIT_ENABLE,
+  AUTOCOMMIT_MESSAGE,
+  DANGER_ZONE,
+  DISCONNECT_GIT,
+  DISCONNECT_GIT_MESSAGE,
+  createMessage,
+} from "@appsmith/constants/messages";
+import {
+  setDisconnectingGitApplication,
+  setIsAutocommitEnabled,
+  setIsAutocommitModalOpen,
+  setIsDisconnectGitModalOpen,
+  setIsGitSyncModalOpen,
+} from "actions/gitSyncActions";
+import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
+import { Button, Divider, Text } from "design-system";
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getCurrentApplication } from "selectors/editorSelectors";
+import { getIsAutocommitEnabled } from "selectors/gitSyncSelectors";
+import styled from "styled-components";
+import AnalyticsUtil from "utils/AnalyticsUtil";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+
+const Container = styled.div`
+  padding-top: 16px;
+  padding-bottom: 16px;
+`;
+
+const HeadContainer = styled.div`
+  margin-bottom: 16px;
+`;
+
+const ZoneContainer = styled.div`
+  border: solid 0.4px var(--ads-v2-color-red-600);
+  padding: 12px;
+  border-radius: 4px;
+`;
+
+const BodyContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const BodyInnerContainer = styled.div`
+  flex: 1;
+  margin-right: 32px;
+`;
+
+const SectionTitle = styled(Text)`
+  font-weight: 600;
+`;
+
+const StyledDivider = styled(Divider)`
+  display: block;
+  margin-top: 16px;
+  margin-bottom: 16px;
+`;
+
+function GitDisconnect() {
+  const isAutocommitFeatureEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_git_autocommit_feature_enabled,
+  );
+  const isAutocommitEnabled = useSelector(getIsAutocommitEnabled);
+
+  const dispatch = useDispatch();
+
+  const currentApp = useSelector(getCurrentApplication);
+
+  const handleDisconnect = () => {
+    AnalyticsUtil.logEvent("GS_DISCONNECT_GIT_CLICK", {
+      source: "GIT_CONNECTION_MODAL",
+    });
+    dispatch(setIsGitSyncModalOpen({ isOpen: false }));
+    dispatch(
+      setDisconnectingGitApplication({
+        id: currentApp?.id || "",
+        name: currentApp?.name || "",
+      }),
+    );
+    dispatch(setIsDisconnectGitModalOpen(true));
+  };
+
+  const handleToggleAutocommit = () => {
+    if (isAutocommitEnabled) {
+      dispatch(setIsGitSyncModalOpen({ isOpen: false }));
+      dispatch(setIsAutocommitModalOpen(true));
+    } else {
+      dispatch(setIsAutocommitEnabled(true));
+    }
+  };
+
+  return (
+    <Container>
+      <HeadContainer>
+        <SectionTitle kind="heading-s">
+          {createMessage(DANGER_ZONE)}
+        </SectionTitle>
+      </HeadContainer>
+      <ZoneContainer>
+        {isAutocommitFeatureEnabled ? (
+          <>
+            <BodyContainer>
+              <BodyInnerContainer>
+                <Text kind="heading-xs" renderAs="p">
+                  {createMessage(AUTOCOMMIT)}
+                </Text>
+                <Text renderAs="p">{createMessage(AUTOCOMMIT_MESSAGE)}</Text>
+              </BodyInnerContainer>
+              <Button
+                data-testid="t--git-disconnect-btn"
+                kind={isAutocommitEnabled ? "error" : "secondary"}
+                onClick={handleToggleAutocommit}
+                size="md"
+              >
+                {isAutocommitEnabled
+                  ? createMessage(AUTOCOMMIT_DISABLE)
+                  : createMessage(AUTOCOMMIT_ENABLE)}
+              </Button>
+            </BodyContainer>
+            <StyledDivider />
+          </>
+        ) : null}
+        <BodyContainer>
+          <BodyInnerContainer>
+            <Text kind="heading-xs" renderAs="p">
+              {createMessage(DISCONNECT_GIT)}
+            </Text>
+            <Text renderAs="p">{createMessage(DISCONNECT_GIT_MESSAGE)}</Text>
+          </BodyInnerContainer>
+          <Button
+            data-testid="t--git-disconnect-btn"
+            kind="error"
+            onClick={handleDisconnect}
+            size="md"
+          >
+            {createMessage(DISCONNECT_GIT)}
+          </Button>
+        </BodyContainer>
+      </ZoneContainer>
+    </Container>
+  );
+}
+
+export default GitDisconnect;

app/client/src/pages/Editor/gitSync/Tabs/GitSettings/GitDisconnect.tsx

@@ -1,90 +0,0 @@
-import {
-  DANGER_ZONE,
-  DISCONNECT_GIT,
-  DISCONNECT_GIT_MESSAGE,
-  createMessage,
-} from "@appsmith/constants/messages";
-import {
-  setDisconnectingGitApplication,
-  setIsDisconnectGitModalOpen,
-  setIsGitSyncModalOpen,
-} from "actions/gitSyncActions";
-import { Button, Text } from "design-system";
-import React from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { getCurrentApplication } from "selectors/editorSelectors";
-import styled from "styled-components";
-import AnalyticsUtil from "utils/AnalyticsUtil";
-
-const Container = styled.div`
-  padding-top: 16px;
-  padding-bottom: 16px;
-`;
-
-const HeadContainer = styled.div`
-  margin-bottom: 16px;
-`;
-
-const BodyContainer = styled.div`
-  display: flex;
-  border: solid 0.4px var(--ads-v2-color-red-600);
-  padding: 12px;
-  border-radius: 4px;
-  align-items: center;
-`;
-
-const BodyInnerContainer = styled.div`
-  flex: 1;
-  margin-right: 32px;
-`;
-
-const SectionTitle = styled(Text)`
-  font-weight: 600;
-`;
-
-function GitDisconnect() {
-  const dispatch = useDispatch();
-  const currentApp = useSelector(getCurrentApplication);
-
-  const handleDisconnect = () => {
-    AnalyticsUtil.logEvent("GS_DISCONNECT_GIT_CLICK", {
-      source: "GIT_CONNECTION_MODAL",
-    });
-    dispatch(setIsGitSyncModalOpen({ isOpen: false }));
-    dispatch(
-      setDisconnectingGitApplication({
-        id: currentApp?.id || "",
-        name: currentApp?.name || "",
-      }),
-    );
-    dispatch(setIsDisconnectGitModalOpen(true));
-  };
-
-  return (
-    <Container>
-      <HeadContainer>
-        <SectionTitle kind="heading-s">
-          {createMessage(DANGER_ZONE)}
-        </SectionTitle>
-      </HeadContainer>
-      <BodyContainer>
-        <BodyInnerContainer>
-          <Text kind="heading-xs" renderAs="p">
-            {createMessage(DISCONNECT_GIT)}
-          </Text>
-          <Text renderAs="p">{createMessage(DISCONNECT_GIT_MESSAGE)}</Text>
-        </BodyInnerContainer>
-        <Button
-          data-testid="t--git-disconnect-btn"
-          kind="error"
-          onClick={handleDisconnect}
-          size="md"
-        >
-          {createMessage(DISCONNECT_GIT)}
-        </Button>
-      </BodyContainer>
-    </Container>
-  );
-}
-
-export default GitDisconnect;

app/client/src/pages/Editor/gitSync/Tabs/GitSettings/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import GitUserSettings from "./GitUserSettings";
-import GitDisconnect from "./GitDisconnect";
+import DangerZone from "./DangerZone";
 import styled from "styled-components";
 import { Divider, ModalBody } from "design-system";
 import GitDefaultBranch from "./GitDefaultBranch";
@@ -32,7 +32,7 @@ function GitSettings() {
             <GitProtectedBranches />
           </>
         ) : null}
-        {isGitAdmin && <GitDisconnect />}
+        {isGitAdmin && <DangerZone />}
       </Container>
     </ModalBody>
   );

app/client/src/pages/Editor/index.tsx

@@ -43,6 +43,7 @@ import SignpostingOverlay from "pages/Editor/FirstTimeUserOnboarding/Overlay";
 import { editorInitializer } from "../../utils/editor/EditorUtils";
 import { widgetInitialisationSuccess } from "../../actions/widgetActions";
 import urlBuilder from "@appsmith/entities/URLRedirect/URLAssembly";
+import DisableAutocommitModal from "./gitSync/DisableAutocommitModal";
 
 interface EditorProps {
   currentApplicationId?: string;
@@ -167,6 +168,7 @@ class Editor extends Component<Props> {
             <IDE />
             <GitSyncModal />
             <DisconnectGitModal />
+            <DisableAutocommitModal />
             <GuidedTourModal />
             <RepoLimitExceededErrorModal />
             <TemplatesModal />

app/client/src/reducers/uiReducers/gitSyncReducer.ts

@@ -44,6 +44,10 @@ const initialState: GitSyncReducerState = {
   protectedBranches: [],
 
   isUpdateProtectedBranchesLoading: false,
+
+  isAutocommitModalOpen: false,
+  isAutocommitEnabled: false,
+  isAutocommitInProgress: false,
 };
 
 const gitSyncReducer = createReducer(initialState, {
@@ -598,6 +602,27 @@ const gitSyncReducer = createReducer(initialState, {
     ...state,
     isUpdateProtectedBranchesLoading: false,
   }),
+  [ReduxActionTypes.GIT_SET_IS_AUTOCOMMIT_ENABLED]: (
+    state,
+    action: ReduxAction<{ isAutocommitEnabled: boolean }>,
+  ) => ({
+    ...state,
+    isAutocommitEnabled: action.payload.isAutocommitEnabled,
+  }),
+  [ReduxActionTypes.GIT_SET_IS_AUTOCOMMIT_MODAL_OPEN]: (
+    state,
+    action: ReduxAction<{ isAutocommitModalOpen: boolean }>,
+  ) => ({
+    ...state,
+    isAutocommitModalOpen: action.payload.isAutocommitModalOpen,
+  }),
+  [ReduxActionTypes.GIT_SET_IS_AUTOCOMMIT_IN_PROGRESS]: (
+    state,
+    action: ReduxAction<{ isAutocommitInProgress: boolean }>,
+  ) => ({
+    ...state,
+    isAutocommitInProgress: action.payload.isAutocommitInProgress,
+  }),
 });
 
 export interface GitStatusData {
@@ -737,6 +762,10 @@ export type GitSyncReducerState = GitBranchDeleteState & {
   protectedBranches: string[];
   protectedBranchesLoading: boolean;
   isUpdateProtectedBranchesLoading: boolean;
+
+  isAutocommitEnabled: boolean;
+  isAutocommitModalOpen: boolean;
+  isAutocommitInProgress: boolean;
 };
 
 export default gitSyncReducer;

app/client/src/selectors/gitSyncSelectors.tsx

@@ -243,3 +243,12 @@ export const getIsUpdateProtectedBranchesLoading = (state: AppState) => {
 export const getIsGetProtectedBranchesLoading = (state: AppState) => {
   return state.ui.gitSync.protectedBranchesLoading;
 };
+
+export const getIsAutocommitEnabled = (state: AppState) =>
+  state.ui.gitSync.isAutocommitEnabled;
+
+export const getIsAutocommitModalOpen = (state: AppState) =>
+  state.ui.gitSync.isAutocommitModalOpen;
+
+export const getIsAutocommitInProgress = (state: AppState) =>
+  state.ui.gitSync.isAutocommitInProgress;