fix: adding new settings modal (#30320)

## Description Separates git sync modal from git settings modal #### PR fixes following issue(s) Fixes #30319 #### Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video > > #### Type of change - 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  ## Summary by CodeRabbit - **New Features** - Introduced the `GitSettingsModal` for enhanced Git configuration. - Added the ability to switch between General and Branch settings tabs within the Git settings modal. - Implemented new user permission checks for displaying Git user settings and danger zone sections. - **Enhancements** - Streamlined the Git settings experience by removing unnecessary modals and components. - **Refactor** - Improved action and selector naming for better clarity and maintainability. - Adjusted UI components to utilize new Redux state management for Git settings. - **Style** - Updated padding for better visual spacing in Git user settings. - **Tests** - Modified and removed tests to align with the updated component structure and functionality. - **Bug Fixes** - Fixed navigation issues within the Git settings modal by refining action dispatches and state handling.
2024-01-19 15:14:38 +05:30 · 2024-01-19 15:14:38 +05:30 · 877aa1a2c9
commit 877aa1a2c9
parent 302ecb6a1c
21 changed files with 220 additions and 57 deletions
--- a/app/client/src/actions/gitSyncActions.ts
+++ b/app/client/src/actions/gitSyncActions.ts
@ -9,9 +9,10 @@ import {
 import type { ConnectToGitPayload } from "api/GitSyncAPI";
 import type { GitConfig, GitSyncModalTab, MergeStatus } from "entities/GitSync";
 import type { GitApplicationMetadata } from "@appsmith/api/ApplicationApi";
-import type {
-  GitStatusData,
-  GitRemoteStatusData,
+import {
+  type GitStatusData,
+  type GitRemoteStatusData,
+  GitSettingsTab,
 } from "reducers/uiReducers/gitSyncReducer";
 import type { ResponseMeta } from "api/ApiResponses";
 import { noop } from "lodash";
@ -506,3 +507,11 @@ export const stopAutocommitProgressPolling = () => ({
 export const getGitMetadataInitAction = () => ({
  type: ReduxActionTypes.GIT_GET_METADATA_INIT,
 });
+
+export const setGitSettingsModalOpenAction = (payload: {
+  open: boolean;
+  tab?: GitSettingsTab;
+}) => ({
+  type: ReduxActionTypes.GIT_SET_SETTINGS_MODAL_OPEN,
+  payload: { open: payload.open, tab: payload.tab || GitSettingsTab.GENERAL },
+});
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/app/client/src/ce/constants/ReduxActionConstants.tsx
@ -140,6 +140,8 @@ const ActionTypes = {
  GIT_GET_METADATA_INIT: "GIT_GET_METADATA_INIT",
  GIT_GET_METADATA_SUCCESS: "GIT_GET_METADATA_SUCCESS",

+  GIT_SET_SETTINGS_MODAL_OPEN: "GIT_SET_SETTINGS_MODAL_OPEN",
+
  APP_COLLAB_LIST_EDITORS: "APP_COLLAB_LIST_EDITORS",
  APP_COLLAB_RESET_EDITORS: "APP_COLLAB_RESET_EDITORS",
  APP_COLLAB_SET_EDITORS_POINTER_DATA: "APP_COLLAB_SET_EDITORS_POINTER_DATA",
--- a/app/client/src/ce/constants/messages.ts
+++ b/app/client/src/ce/constants/messages.ts
@ -1110,6 +1110,9 @@ export const UPDATE_DEFAULT_BRANCH_SUCCESS = (branchName: string) =>
  `Updated default branch ${!!branchName ? `to ${branchName}` : ""}`;
 export const CONTACT_ADMIN_FOR_GIT = () =>
  "Please contact your workspace admin to connect your app to a git repo";
+
+export const GENERAL = () => "General";
+export const BRANCH = () => "Branch";
 // Git Branch Protection end

 export const NAV_DESCRIPTION = () =>
@ -1798,7 +1801,6 @@ export const SAVE_OR_DISCARD_DATASOURCE_WARNING = () =>
 export const APP_SETTINGS_PANE_HEADER = () => "Settings";
 export const APP_SETTINGS_CLOSE_TOOLTIP = () => "Close settings panel";

-export const GENERAL_SETTINGS_SECTION_HEADER = () => "General";
 export const GENERAL_SETTINGS_SECTION_CONTENT_HEADER = () => "General settings";
 export const GENERAL_SETTINGS_SECTION_HEADER_DESC = () =>
  "App name, icon and share";
--- a/app/client/src/ce/pages/Applications/index.tsx
+++ b/app/client/src/ce/pages/Applications/index.tsx
@ -78,7 +78,6 @@ import SharedUserList from "pages/common/SharedUserList";
 import { useIsMobileDevice } from "utils/hooks/useDeviceDetect";
 import { Indices } from "constants/Layers";
 import GitSyncModal from "pages/Editor/gitSync/GitSyncModal";
-import DisconnectGitModal from "pages/Editor/gitSync/DisconnectGitModal";
 import ReconnectDatasourceModal from "pages/Editor/gitSync/ReconnectDatasourceModal";
 import LeftPaneBottomSection from "pages/Home/LeftPaneBottomSection";
 import { MOBILE_MAX_WIDTH } from "constants/AppConstants";
@ -108,7 +107,6 @@ 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";
 import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";

 export const { cloudHosting } = getAppsmithConfigs();
@ -786,11 +784,7 @@ export function ApplicationsSection(props: any) {
      isMobile={isMobile}
    >
      {workspacesListComponent}
-      <>
-        <GitSyncModal isImport />
-        <DisableAutocommitModal />
-        <DisconnectGitModal />
-      </>
+      <GitSyncModal isImport />
      <ReconnectDatasourceModal />
    </ApplicationContainer>
  );
--- a/app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx
+++ b/app/client/src/pages/Editor/AppSettingsPane/AppSettings/index.tsx
@ -14,8 +14,8 @@ import { getAppSettingsPane } from "selectors/appSettingsPaneSelectors";
 import {
  APP_NAVIGATION_SETTING,
  createMessage,
+  GENERAL,
  GENERAL_SETTINGS_SECTION_CONTENT_HEADER,
-  GENERAL_SETTINGS_SECTION_HEADER,
  GENERAL_SETTINGS_SECTION_HEADER_DESC,
  IN_APP_EMBED_SETTING,
  PAGE_SETTINGS_SECTION_CONTENT_HEADER,
@ -127,7 +127,7 @@ function AppSettings() {
      id: "t--general-settings-header",
      icon: "settings-2-line",
      isSelected: selectedTab.type === AppSettingsTabs.General,
-      name: createMessage(GENERAL_SETTINGS_SECTION_HEADER),
+      name: createMessage(GENERAL),
      onClick: () => {
        setSelectedTab({ type: AppSettingsTabs.General });
        AnalyticsUtil.logEvent("APP_SETTINGS_SECTION_CLICK", {
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/GitDefaultBranch.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/GitDefaultBranch.tsx
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/GitProtectedBranches.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/GitProtectedBranches.tsx
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/hooks.ts
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/hooks.ts
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/index.test.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/index.test.tsx
@ -1,22 +1,19 @@
 /* eslint-disable jest/no-focused-tests */
 import React from "react";
 import { render, screen } from "test/testUtils";
-import GitSettings from ".";
+import TabBranch from ".";
 import type { AppState } from "@appsmith/reducers";

 jest.mock("../../hooks/gitPermissionHooks", () => ({
  useHasManageProtectedBranchesPermission: () => false,
  useHasManageDefaultBranchPermission: () => false,
-  useHasConnectToGitPermission: () => false,
-  useHasManageAutoCommitPermission: () => false,
 }));

-describe("GitSettings test for git admin disabled", () => {
-  it("Branch protection, default branch and disconnect disabled when not ", () => {
+describe("TabBranch test for git admin disabled", () => {
+  it("Branch protection and default branch disabled when no permission", () => {
    const initialState: Partial<AppState> = {};
-    render(<GitSettings />, { initialState });
+    render(<TabBranch />, { initialState });
    expect(screen.queryByTestId("t--git-protected-branches-select")).toBe(null);
    expect(screen.queryByTestId("t--git-default-branch-select")).toBe(null);
-    expect(screen.queryByTestId("t--git-disconnect-btn")).toBe(null);
  });
 });
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/index.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabBranch/index.tsx
@ -1,15 +1,11 @@
 import React from "react";
-import GitUserSettings from "./GitUserSettings";
-import DangerZone from "./DangerZone";
 import styled from "styled-components";
-import { Divider, ModalBody } from "design-system";
+import { ModalBody } from "design-system";
 import GitDefaultBranch from "./GitDefaultBranch";
 import GitProtectedBranches from "./GitProtectedBranches";
 import {
-  useHasConnectToGitPermission,
  useHasManageDefaultBranchPermission,
  useHasManageProtectedBranchesPermission,
-  useHasManageAutoCommitPermission,
 } from "../../hooks/gitPermissionHooks";

 const Container = styled.div`
@ -17,36 +13,22 @@ const Container = styled.div`
  min-height: calc(360px + 52px);
 `;

-const StyledDivider = styled(Divider)`
-  display: block;
-  margin-top: 8px;
-  margin-bottom: 8px;
-`;
-
-function GitSettings() {
+function TabBranch() {
  const isManageProtectedBranchesPermitted =
    useHasManageProtectedBranchesPermission();
  const isManageDefaultBranchPermitted = useHasManageDefaultBranchPermission();
-  const isConnectToGitPermitted = useHasConnectToGitPermission();
-  const isManageAutoCommitPermitted = useHasManageAutoCommitPermission();

-  const showDivider =
-    isManageDefaultBranchPermitted || isManageProtectedBranchesPermitted;
-  const showDangerZone = isConnectToGitPermitted || isManageAutoCommitPermitted;
  const showDefaultBranch = isManageDefaultBranchPermitted;
  const showProtectedBranches = isManageProtectedBranchesPermitted;

  return (
    <ModalBody>
      <Container>
-        <GitUserSettings />
-        {showDivider && <StyledDivider />}
        {showDefaultBranch && <GitDefaultBranch />}
        {showProtectedBranches && <GitProtectedBranches />}
-        {showDangerZone && <DangerZone />}
      </Container>
    </ModalBody>
  );
 }

-export default GitSettings;
+export default TabBranch;
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/DangerZone.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/DangerZone.tsx
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/GitUserSettings.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/GitUserSettings.tsx
@ -31,7 +31,7 @@ import {

 const Container = styled.div`
  padding-top: 8px;
-  padding-bottom: 16px;
+  padding-bottom: 8px;
 `;

 const HeadContainer = styled.div`
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/index.test.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/index.test.tsx
@ -0,0 +1,18 @@
+/* eslint-disable jest/no-focused-tests */
+import React from "react";
+import { render, screen } from "test/testUtils";
+import TabGeneral from ".";
+import type { AppState } from "@appsmith/reducers";
+
+jest.mock("../../hooks/gitPermissionHooks", () => ({
+  useHasConnectToGitPermission: () => false,
+  useHasManageAutoCommitPermission: () => false,
+}));
+
+describe("GitSettings TabGeneral test for git admin disabled", () => {
+  it("disconnect disabled when no permission", () => {
+    const initialState: Partial<AppState> = {};
+    render(<TabGeneral />, { initialState });
+    expect(screen.queryByTestId("t--git-disconnect-btn")).toBe(null);
+  });
+});
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/index.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/TabGeneral/index.tsx
@ -0,0 +1,32 @@
+import React from "react";
+import GitUserSettings from "./GitUserSettings";
+import DangerZone from "./DangerZone";
+import styled from "styled-components";
+import { ModalBody } from "design-system";
+import {
+  useHasConnectToGitPermission,
+  useHasManageAutoCommitPermission,
+} from "../../hooks/gitPermissionHooks";
+
+const Container = styled.div`
+  overflow: auto;
+  min-height: calc(360px + 52px);
+`;
+
+function TabGeneral() {
+  const isConnectToGitPermitted = useHasConnectToGitPermission();
+  const isManageAutoCommitPermitted = useHasManageAutoCommitPermission();
+
+  const showDangerZone = isConnectToGitPermitted || isManageAutoCommitPermitted;
+
+  return (
+    <ModalBody>
+      <Container>
+        <GitUserSettings />
+        {showDangerZone && <DangerZone />}
+      </Container>
+    </ModalBody>
+  );
+}
+
+export default TabGeneral;
--- a/app/client/src/pages/Editor/gitSync/GitSettingsModal/index.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSettingsModal/index.tsx
@ -0,0 +1,91 @@
+import React from "react";
+import {
+  activeGitSettingsModalTabSelector,
+  isGitSettingsModalOpenSelector,
+} from "selectors/gitSyncSelectors";
+import { useDispatch, useSelector } from "react-redux";
+import { setGitSettingsModalOpenAction } from "actions/gitSyncActions";
+
+import GitErrorPopup from "../components/GitErrorPopup";
+
+import { Modal, ModalContent, ModalHeader } from "design-system";
+import styled from "styled-components";
+import Menu from "../Menu";
+import { GitSettingsTab } from "reducers/uiReducers/gitSyncReducer";
+import {
+  BRANCH,
+  GENERAL,
+  SETTINGS_GIT,
+  createMessage,
+} from "@appsmith/constants/messages";
+import TabGeneral from "./TabGeneral";
+import TabBranch from "./TabBranch";
+
+const menuOptions = [
+  {
+    key: GitSettingsTab.GENERAL,
+    title: createMessage(GENERAL),
+  },
+  {
+    key: GitSettingsTab.BRANCH,
+    title: createMessage(BRANCH),
+  },
+];
+
+const StyledModalContent = styled(ModalContent)`
+  &&& {
+    width: 640px;
+    transform: none !important;
+    top: 100px;
+    left: calc(50% - 320px);
+    max-height: calc(100vh - 200px);
+  }
+`;
+
+function GitSettingsModal() {
+  const isModalOpen = useSelector(isGitSettingsModalOpenSelector);
+  const activeTabKey = useSelector(activeGitSettingsModalTabSelector);
+  const dispatch = useDispatch();
+
+  const setActiveTabKey = (tabKey: GitSettingsTab) => {
+    dispatch(
+      setGitSettingsModalOpenAction({
+        open: true,
+        tab: tabKey,
+      }),
+    );
+  };
+
+  const handleClose = () => {
+    dispatch(setGitSettingsModalOpenAction({ open: false }));
+  };
+
+  return (
+    <>
+      <Modal
+        onOpenChange={(open) => {
+          if (!open) {
+            handleClose();
+          }
+        }}
+        open={isModalOpen}
+      >
+        <StyledModalContent data-testid="t--git-settings-modal">
+          <ModalHeader>{createMessage(SETTINGS_GIT)}</ModalHeader>
+          <Menu
+            activeTabKey={activeTabKey}
+            onSelect={(tabKey: string) =>
+              setActiveTabKey(tabKey as GitSettingsTab)
+            }
+            options={menuOptions}
+          />
+          {activeTabKey === GitSettingsTab.GENERAL && <TabGeneral />}
+          {activeTabKey === GitSettingsTab.BRANCH && <TabBranch />}
+        </StyledModalContent>
+      </Modal>
+      <GitErrorPopup />
+    </>
+  );
+}
+
+export default GitSettingsModal;
--- a/app/client/src/pages/Editor/gitSync/GitSyncModal/GitSyncModalV2.tsx
+++ b/app/client/src/pages/Editor/gitSync/GitSyncModal/GitSyncModalV2.tsx
@ -26,7 +26,6 @@ import {
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { Modal, ModalContent, ModalHeader } from "design-system";
 import GitConnectionV2 from "../Tabs/GitConnectionV2";
-import GitSettings from "../Tabs/GitSettings";
 import { GitSyncModalTab } from "entities/GitSync";
 import ConnectionSuccess from "../Tabs/ConnectionSuccess";
 import styled from "styled-components";
@ -152,7 +151,6 @@ function GitSyncModalV2({ isImport = false }: GitSyncModalV2Props) {
            ))}
          {activeTabKey === GitSyncModalTab.DEPLOY && <Deploy />}
          {activeTabKey === GitSyncModalTab.MERGE && <Merge />}
-          {activeTabKey === GitSyncModalTab.SETTINGS && <GitSettings />}
        </StyledModalContent>
      </Modal>
      <GitErrorPopup />
--- a/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
+++ b/app/client/src/pages/Editor/gitSync/QuickGitActions/index.tsx
@ -27,6 +27,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
  discardChanges,
  gitPullInit,
+  setGitSettingsModalOpenAction,
  setIsGitSyncModalOpen,
 } from "actions/gitSyncActions";
 import { GitSyncModalTab } from "entities/GitSync";
@ -49,6 +50,7 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import AutocommitStatusbar from "./AutocommitStatusbar";
 import { useHasConnectToGitPermission } from "../hooks/gitPermissionHooks";
+import { GitSettingsTab } from "reducers/uiReducers/gitSyncReducer";

 interface QuickActionButtonProps {
  className?: string;
@ -354,15 +356,22 @@ export default function QuickGitActions() {
      });
    },
    settings: () => {
-      dispatch(
-        setIsGitSyncModalOpen({
-          isOpen: true,
-          tab: isGitConnectV2Enabled
-            ? GitSyncModalTab.SETTINGS
-            : GitSyncModalTab.GIT_CONNECTION,
-          isDeploying: true,
-        }),
-      );
+      if (isGitConnectV2Enabled) {
+        dispatch(
+          setGitSettingsModalOpenAction({
+            open: true,
+            tab: GitSettingsTab.GENERAL,
+          }),
+        );
+      } else {
+        dispatch(
+          setIsGitSyncModalOpen({
+            isOpen: true,
+            tab: GitSyncModalTab.GIT_CONNECTION,
+            isDeploying: true,
+          }),
+        );
+      }
      AnalyticsUtil.logEvent("GS_SETTING_CLICK", {
        source: "BOTTOM_BAR_GIT_SETTING_BUTTON",
      });
--- a/app/client/src/pages/Editor/gitSync/Tabs/ConnectionSuccess.tsx
+++ b/app/client/src/pages/Editor/gitSync/Tabs/ConnectionSuccess.tsx
@ -1,5 +1,6 @@
 import {
  fetchBranchesInit,
+  setGitSettingsModalOpenAction,
  setIsGitSyncModalOpen,
 } from "actions/gitSyncActions";
 import {
@ -14,12 +15,12 @@ import {
  createMessage,
 } from "@appsmith/constants/messages";
 import { Button, Icon, ModalBody, ModalFooter, Tag, Text } from "design-system";
-import { GitSyncModalTab } from "entities/GitSync";
 import React, { useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import { getCurrentAppGitMetaData } from "@appsmith/selectors/applicationSelectors";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import { GitSettingsTab } from "reducers/uiReducers/gitSyncReducer";

 const Container = styled.div``;

@ -91,9 +92,9 @@ function ConnectionSuccess() {

  const handleOpenSettings = () => {
    dispatch(
-      setIsGitSyncModalOpen({
-        isOpen: true,
-        tab: GitSyncModalTab.SETTINGS,
+      setGitSettingsModalOpenAction({
+        open: true,
+        tab: GitSettingsTab.GENERAL,
      }),
    );
    AnalyticsUtil.logEvent("GS_OPEN_GIT_SETTINGS", {
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@ -44,6 +44,7 @@ import { editorInitializer } from "../../utils/editor/EditorUtils";
 import { widgetInitialisationSuccess } from "../../actions/widgetActions";
 import urlBuilder from "@appsmith/entities/URLRedirect/URLAssembly";
 import DisableAutocommitModal from "./gitSync/DisableAutocommitModal";
+import GitSettingsModal from "./gitSync/GitSettingsModal";

 interface EditorProps {
  currentApplicationId?: string;
@ -167,6 +168,7 @@ class Editor extends Component<Props> {
          <GlobalHotKeys>
            <IDE />
            <GitSyncModal />
+            <GitSettingsModal />
            <DisconnectGitModal />
            <DisableAutocommitModal />
            <GuidedTourModal />
--- a/app/client/src/reducers/uiReducers/gitSyncReducer.ts
+++ b/app/client/src/reducers/uiReducers/gitSyncReducer.ts
@ -9,6 +9,12 @@ import { GitSyncModalTab } from "entities/GitSync";
 import type { GetSSHKeyResponseData, SSHKeyType } from "actions/gitSyncActions";
 import type { PageDefaultMeta } from "@appsmith/api/ApplicationApi";

+export enum GitSettingsTab {
+  GENERAL = "GENERAL",
+  BRANCH = "BRANCH",
+  CD = "CD",
+}
+
 const initialState: GitSyncReducerState = {
  isGitSyncModalOpen: false,
  isCommitting: false,
@ -51,6 +57,9 @@ const initialState: GitSyncReducerState = {

  gitMetadata: null,
  gitMetadataLoading: false,
+
+  isGitSettingsModalOpen: false,
+  activeGitSettingsModalTab: GitSettingsTab.GENERAL,
 };

 const gitSyncReducer = createReducer(initialState, {
@ -652,6 +661,14 @@ const gitSyncReducer = createReducer(initialState, {
    ...state,
    gitMetadataLoading: false,
  }),
+  [ReduxActionTypes.GIT_SET_SETTINGS_MODAL_OPEN]: (
+    state,
+    action: ReduxAction<{ open: boolean; tab?: GitSettingsTab }>,
+  ) => ({
+    ...state,
+    isGitSettingsModalOpen: action.payload.open,
+    activeGitSettingsModalTab: action.payload.tab || GitSettingsTab.GENERAL,
+  }),
 });

 export interface GitStatusData {
@ -813,6 +830,9 @@ export type GitSyncReducerState = GitBranchDeleteState & {

  gitMetadata: GitMetadata | null;
  gitMetadataLoading: boolean;
+
+  isGitSettingsModalOpen: boolean;
+  activeGitSettingsModalTab: GitSettingsTab;
 };

 export default gitSyncReducer;
--- a/app/client/src/selectors/gitSyncSelectors.tsx
+++ b/app/client/src/selectors/gitSyncSelectors.tsx
@ -261,3 +261,9 @@ export const getGitMetadataLoadingSelector = (state: AppState) =>

 export const getAutocommitEnabledSelector = (state: AppState) =>
  !!state.ui.gitSync.gitMetadata?.autoCommitConfig?.enabled;
+
+export const isGitSettingsModalOpenSelector = (state: AppState) =>
+  state.ui.gitSync.isGitSettingsModalOpen;
+
+export const activeGitSettingsModalTabSelector = (state: AppState) =>
+  state.ui.gitSync.activeGitSettingsModalTab;