chore: git mod - integration with applications (appsmithorg#38439)

## Description
- Git mod integration with applications behind feature flag

Fixes appsmithorg#37815 
Fixes appsmithorg#37816 
Fixes appsmithorg#37817 
Fixes appsmithorg#37818 
Fixes appsmithorg#37819 
Fixes appsmithorg#37820 

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12570655268>
> Commit: 7d2f1a7
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12570655268&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 01 Jan 2025 14:35:46 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No

packages/design-system/ads/src/Icon/Icon.provider.tsx

@@ -1103,6 +1103,10 @@ const ContentTypeRaw = importSvg(
   async () => import("../__assets__/icons/ads/content-type-raw.svg"),
 );
 
+const CloudIconV2 = importSvg(
+  async () => import("../__assets__/icons/ads/cloudy-line.svg"),
+);
+
 const NotionIcon = importSvg(
   async () => import("../__assets__/icons/ads/notion.svg"),
 );
@@ -1225,6 +1229,7 @@ const ICON_LOOKUP = {
   "close-modal": CloseLineIcon,
   "close-x": CloseLineIcon,
   "cloud-off-line": CloudOfflineIcon,
+  "cloud-v2": CloudIconV2,
   "collapse-control": CollapseIcon,
   "column-freeze": ColumnFreeze,
   "column-unfreeze": SubtractIcon,

src/api/interceptors/request/apiRequestInterceptor.ts

@@ -30,6 +30,7 @@ const blockAirgappedRoutes = (config: InternalAxiosRequestConfig) => {
 
 const addGitBranchHeader = (config: InternalAxiosRequestConfig) => {
   const state = store.getState();
+  // ! git mod - not sure how to replace this, we could directly read state if required
   const branch = getCurrentGitBranch(state) || getQueryParamsObject().branch;
 
   return _addGitBranchHeader(config, { branch });

src/ce/entities/FeatureFlag.ts

@@ -48,6 +48,7 @@ export const FEATURE_FLAG = {
     "release_table_html_column_type_enabled",
   release_gs_all_sheets_options_enabled:
     "release_gs_all_sheets_options_enabled",
+  release_git_modularisation_enabled: "release_git_modularisation_enabled",
   ab_premium_datasources_view_enabled: "ab_premium_datasources_view_enabled",
   kill_session_recordings_enabled: "kill_session_recordings_enabled",
   config_mask_session_recordings_enabled:
@@ -95,6 +96,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   release_evaluation_scope_cache: false,
   release_table_html_column_type_enabled: false,
   release_gs_all_sheets_options_enabled: false,
+  release_git_modularisation_enabled: false,
   ab_premium_datasources_view_enabled: false,
   kill_session_recordings_enabled: false,
   config_user_session_recordings_enabled: true,

src/ce/navigation/FocusStrategy/AppIDEFocusStrategy.ts

@@ -2,7 +2,6 @@ import { all, select, take } from "redux-saga/effects";
 import type { FocusPath, FocusStrategy } from "sagas/FocusRetentionSaga";
 import type { AppsmithLocationState } from "utils/history";
 import { NavigationMethod } from "utils/history";
-import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
 import type { FocusEntityInfo } from "navigation/FocusEntity";
 import {
   FocusEntity,
@@ -18,6 +17,7 @@ import {
   widgetListURL,
 } from "ee/RouteBuilder";
 import AppIDEFocusElements from "../FocusElements/AppIDE";
+import { selectGitApplicationCurrentBranch } from "selectors/gitModSelectors";
 
 function shouldSetState(
   prevPath: string,
@@ -86,8 +86,17 @@ const isPageChange = (prevPath: string, currentPath: string) => {
   );
 };
 
-export const createEditorFocusInfoKey = (basePageId: string, branch?: string) =>
-  `EDITOR_STATE.${basePageId}#${branch}`;
+export const createEditorFocusInfoKey = (
+  basePageId: string,
+  branch: string | null = null,
+) => {
+  const r = branch
+    ? `EDITOR_STATE.${basePageId}#${branch}`
+    : `EDITOR_STATE.${basePageId}`;
+
+  return r;
+};
+
 export const createEditorFocusInfo = (basePageId: string, branch?: string) => ({
   key: createEditorFocusInfoKey(basePageId, branch),
   entityInfo: {
@@ -109,7 +118,9 @@ export const AppIDEFocusStrategy: FocusStrategy = {
       return [];
     }
 
-    const branch: string | undefined = yield select(getCurrentGitBranch);
+    const branch: string | undefined = yield select(
+      selectGitApplicationCurrentBranch,
+    );
     const entities: Array<{ entityInfo: FocusEntityInfo; key: string }> = [];
     const prevEntityInfo = identifyEntityFromPath(previousPath);
     const currentEntityInfo = identifyEntityFromPath(currentPath);
@@ -136,7 +147,9 @@ export const AppIDEFocusStrategy: FocusStrategy = {
     return entities;
   },
   *getEntitiesForStore(path: string, currentPath: string) {
-    const branch: string | undefined = yield select(getCurrentGitBranch);
+    const branch: string | undefined = yield select(
+      selectGitApplicationCurrentBranch,
+    );
     const entities: Array<FocusPath> = [];
     const currentFocusEntityInfo = identifyEntityFromPath(currentPath);
     const prevFocusEntityInfo = identifyEntityFromPath(path);
@@ -179,7 +192,9 @@ export const AppIDEFocusStrategy: FocusStrategy = {
           appState: EditorState.EDITOR,
           params: prevFocusEntityInfo.params,
         },
-        key: `EDITOR_STATE.${prevFocusEntityInfo.params.basePageId}#${branch}`,
+        key: branch
+          ? `EDITOR_STATE.${prevFocusEntityInfo.params.basePageId}#${branch}`
+          : `EDITOR_STATE.${prevFocusEntityInfo.params.basePageId}`,
       });
     }
 

src/ce/pages/Applications/CreateNewAppsOption.test.tsx

@@ -9,6 +9,10 @@ import CreateNewAppsOption from "./CreateNewAppsOption";
 import { BrowserRouter as Router } from "react-router-dom";
 import { unitTestBaseMockStore } from "layoutSystems/common/dropTarget/unitTestUtils";
 
+jest.mock("selectors/gitModSelectors", () => ({
+  selectCombinedPreviewMode: jest.fn(() => false),
+}));
+
 const defaultStoreState = {
   ...unitTestBaseMockStore,
   tenant: {

src/ce/pages/Applications/index.tsx

@@ -122,7 +122,6 @@ import { MOBILE_MAX_WIDTH } from "constants/AppConstants";
 import { Indices } from "constants/Layers";
 import ImportModal from "pages/common/ImportModal";
 import SharedUserList from "pages/common/SharedUserList";
-import GitSyncModal from "pages/Editor/gitSync/GitSyncModal";
 import ReconnectDatasourceModal from "pages/Editor/gitSync/ReconnectDatasourceModal";
 import RepoLimitExceededErrorModal from "pages/Editor/gitSync/RepoLimitExceededErrorModal";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
@@ -133,6 +132,15 @@ import { getAssetUrl } from "ee/utils/airgapHelpers";
 import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
 import { LayoutSystemTypes } from "layoutSystems/types";
 import { getIsAnvilLayoutEnabled } from "layoutSystems/anvil/integrations/selectors";
+import OldGitSyncModal from "pages/Editor/gitSync/GitSyncModal";
+import { useGitModEnabled } from "pages/Editor/gitSync/hooks/modHooks";
+import { GitImportModal as NewGitImportModal } from "git";
+
+function GitImportModal() {
+  const isGitModEnabled = useGitModEnabled();
+
+  return isGitModEnabled ? <NewGitImportModal /> : <OldGitSyncModal isImport />;
+}
 
 export const { cloudHosting } = getAppsmithConfigs();
 
@@ -955,7 +963,7 @@ export function ApplicationsSection(props: any) {
       isMobile={isMobile}
     >
       {workspacesListComponent}
-      <GitSyncModal isImport />
+      <GitImportModal />
       <ReconnectDatasourceModal />
     </ApplicationContainer>
   );

src/ce/pages/Editor/IDE/MainPane/useRoutes.tsx

@@ -34,12 +34,12 @@ import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
 import type { RouteProps } from "react-router";
 import { useSelector } from "react-redux";
-import { combinedPreviewModeSelector } from "selectors/editorSelectors";
 import { lazy, Suspense } from "react";
 import React from "react";
 
 import { retryPromise } from "utils/AppsmithUtils";
 import Skeleton from "widgets/Skeleton";
+import { selectCombinedPreviewMode } from "selectors/gitModSelectors";
 
 const FirstTimeUserOnboardingChecklist = lazy(async () =>
   retryPromise(
@@ -67,7 +67,7 @@ export interface RouteReturnType extends RouteProps {
  */
 
 function useRoutes(path: string): RouteReturnType[] {
-  const isPreviewMode = useSelector(combinedPreviewModeSelector);
+  const isPreviewMode = useSelector(selectCombinedPreviewMode);
 
   return [
     {

src/ce/reducers/index.tsx

@@ -77,6 +77,8 @@ import type { ActiveField } from "reducers/uiReducers/activeFieldEditorReducer";
 import type { SelectedWorkspaceReduxState } from "ee/reducers/uiReducers/selectedWorkspaceReducer";
 import type { ConsolidatedPageLoadState } from "reducers/uiReducers/consolidatedPageLoadReducer";
 import type { BuildingBlocksReduxState } from "reducers/uiReducers/buildingBlockReducer";
+import type { GitArtifactRootReduxState, GitGlobalReduxState } from "git";
+import { gitReducer } from "git/store";
 
 export const reducerObject = {
   entities: entityReducer,
@@ -86,6 +88,7 @@ export const reducerObject = {
   settings: SettingsReducer,
   tenant: tenantReducer,
   linting: lintErrorReducer,
+  git: gitReducer,
 };
 
 export interface AppState {
@@ -176,4 +179,8 @@ export interface AppState {
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tenant: TenantReduxState<any>;
+  git: {
+    global: GitGlobalReduxState;
+    artifacts: GitArtifactRootReduxState;
+  };
 }

src/ce/reducers/uiReducers/applicationsReducer.tsx

@@ -25,6 +25,8 @@ import {
 import produce from "immer";
 import { isEmpty } from "lodash";
 import type { ApplicationPayload } from "entities/Application";
+import { gitConnectSuccess, type GitConnectSuccessPayload } from "git";
+import type { PayloadAction } from "@reduxjs/toolkit";
 
 export const initialState: ApplicationsReduxState = {
   isSavingAppName: false,
@@ -744,6 +746,20 @@ export const handlers = {
       isSavingNavigationSetting: false,
     };
   },
+  // git
+  [gitConnectSuccess.type]: (
+    state: ApplicationsReduxState,
+    action: PayloadAction<GitConnectSuccessPayload>,
+  ) => {
+    return {
+      ...state,
+      currentApplication: {
+        ...state.currentApplication,
+        gitApplicationMetadata:
+          action.payload.responseData.gitApplicationMetadata,
+      },
+    };
+  },
 };
 
 const applicationsReducer = createReducer(initialState, handlers);

src/ce/sagas/PageSagas.tsx

@@ -75,7 +75,6 @@ import {
 import { IncorrectBindingError, validateResponse } from "sagas/ErrorSagas";
 import type { ApiResponse } from "api/ApiResponses";
 import {
-  combinedPreviewModeSelector,
   getCurrentApplicationId,
   getCurrentLayoutId,
   getCurrentPageId,
@@ -128,7 +127,6 @@ import { getPageList } from "ee/selectors/entitiesSelector";
 import { setPreviewModeAction } from "actions/editorActions";
 import { SelectionRequestType } from "sagas/WidgetSelectUtils";
 import { toast } from "@appsmith/ads";
-import { getCurrentGitBranch } from "selectors/gitSyncSelectors";
 import type { MainCanvasReduxState } from "reducers/uiReducers/mainCanvasReducer";
 import { UserCancelledActionExecutionError } from "sagas/ActionExecution/errorUtils";
 import { getInstanceId } from "ee/selectors/tenantSelectors";
@@ -150,6 +148,10 @@ import { getIsAnvilLayout } from "layoutSystems/anvil/integrations/selectors";
 import { convertToBasePageIdSelector } from "selectors/pageListSelectors";
 import type { Page } from "entities/Page";
 import { ConsolidatedPageLoadApi } from "api";
+import {
+  selectCombinedPreviewMode,
+  selectGitApplicationCurrentBranch,
+} from "selectors/gitModSelectors";
 
 export const checkIfMigrationIsNeeded = (
   fetchPageResponse?: FetchPageResponse,
@@ -172,7 +174,9 @@ export function* refreshTheApp() {
     const currentPageId: string = yield select(getCurrentPageId);
     const defaultBasePageId: string = yield select(getDefaultBasePageId);
     const pagesList: Page[] = yield select(getPageList);
-    const gitBranch: string = yield select(getCurrentGitBranch);
+    const gitBranch: string | undefined = yield select(
+      selectGitApplicationCurrentBranch,
+    );
 
     const isCurrentPageIdInList =
       pagesList.filter((page) => page.pageId === currentPageId).length > 0;
@@ -637,7 +641,7 @@ export function* saveLayoutSaga(action: ReduxAction<{ isRetry?: boolean }>) {
   try {
     const currentPageId: string = yield select(getCurrentPageId);
     const currentPage: Page = yield select(getPageById(currentPageId));
-    const isPreviewMode: boolean = yield select(combinedPreviewModeSelector);
+    const isPreviewMode: boolean = yield select(selectCombinedPreviewMode);
 
     const appMode: APP_MODE | undefined = yield select(getAppMode);
 
@@ -1401,7 +1405,7 @@ export function* setCanvasCardsStateSaga(action: ReduxAction<string>) {
 }
 
 export function* setPreviewModeInitSaga(action: ReduxAction<boolean>) {
-  const isPreviewMode: boolean = yield select(combinedPreviewModeSelector);
+  const isPreviewMode: boolean = yield select(selectCombinedPreviewMode);
 
   if (action.payload) {
     // we animate out elements and then move to the canvas

src/ce/sagas/index.tsx

@@ -52,6 +52,7 @@ import sendSideBySideWidgetHoverAnalyticsEventSaga from "sagas/AnalyticsSaga";
 
 /* Sagas that are registered by a module that is designed to be independent of the core platform */
 import ternSagas from "sagas/TernSaga";
+import gitSagas from "git/sagas";
 
 export const sagas = [
   initSagas,
@@ -106,4 +107,5 @@ export const sagas = [
   ternSagas,
   ideSagas,
   sendSideBySideWidgetHoverAnalyticsEventSaga,
+  gitSagas,
 ];