chore: git mod - minor fixes (#38634)

## Description
- Adds `isInitialized` state for git components
- Adds message to autocommit progressbar
- Adds proper loading state for merge dropdown

Fixes https://github.com/appsmithorg/appsmith/issues/38593
Fixes https://github.com/appsmithorg/appsmith/issues/38594

## Automation

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

### 🔍 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/12753560383>
> Commit: bd7a5814bd094717bc6bffb746418c3bbe682d55
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12753560383&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Git`
> Spec:
> <hr>Mon, 13 Jan 2025 19:21:01 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **New Features**
	- Added initialization tracking for Git-related components.
	- Enhanced Git editor initialization state management.
- Introduced new selectors for retrieving Git artifact initialization
states.

- **Bug Fixes**
	- Improved conditional rendering for Git quick actions.
	- Updated merge status tracking and display logic.

- **Refactor**
	- Introduced new hooks for Git artifact initialization.
	- Updated state management for Git-related UI components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/git/components/OpsModal/TabMerge/TabMergeView.tsx

@@ -112,7 +112,7 @@ export default function TabMergeView({
 
   let status = MergeStatusState.NONE;
 
-  if (isFetchStatusLoading) {
+  if (isFetchStatusLoading || isFetchBranchesLoading) {
     status = MergeStatusState.FETCHING;
     message = createMessage(FETCH_GIT_STATUS);
   } else if (!isStatusClean) {

app/client/src/git/components/QuickActions/QuickActionsView.test.tsx

@@ -30,6 +30,7 @@ describe("QuickActionsView Component", () => {
     isDiscardLoading: false,
     isFetchStatusLoading: false,
     isConnected: false,
+    isInitialized: true,
     isProtectedMode: false,
     isPullFailing: false,
     isPullLoading: false,
@@ -48,6 +49,24 @@ describe("QuickActionsView Component", () => {
     jest.clearAllMocks();
   });
 
+  it("should not render QuickActionsView when isInitialized is false", () => {
+    const props = {
+      ...defaultProps,
+      isInitialized: false,
+    };
+
+    render(
+      <ThemeProvider theme={theme}>
+        <QuickActionsView {...props} />
+      </ThemeProvider>,
+    );
+
+    expect(screen.queryByTestId("connect-button")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("t--git-quick-actions-commit"),
+    ).not.toBeInTheDocument();
+  });
+
   it("should render ConnectButton when isConnected is false", () => {
     render(
       <ThemeProvider theme={theme}>

app/client/src/git/components/QuickActions/QuickActionsView.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import styled from "styled-components";
 
 import {
+  AUTOCOMMIT_IN_PROGRESS_MESSAGE,
   COMMIT_CHANGES,
   createMessage,
   GIT_SETTINGS,
@@ -13,7 +14,7 @@ import { GitOpsTab } from "../../constants/enums";
 import { GitSettingsTab } from "../../constants/enums";
 import ConnectButton from "./ConnectButton";
 import QuickActionButton from "./QuickActionButton";
-import AutocommitStatusbar from "../Statusbar";
+import Statusbar from "../Statusbar";
 import getPullBtnStatus from "./helpers/getPullButtonStatus";
 import noop from "lodash/noop";
 import BranchButton from "./BranchButton";
@@ -33,6 +34,7 @@ interface QuickActionsViewProps {
   isConnectPermitted: boolean;
   isDiscardLoading: boolean;
   isFetchStatusLoading: boolean;
+  isInitialized: boolean;
   isConnected: boolean;
   isProtectedMode: boolean;
   isPullFailing: boolean;
@@ -61,6 +63,7 @@ function QuickActionsView({
   isConnectPermitted = false,
   isDiscardLoading = false,
   isFetchStatusLoading = false,
+  isInitialized = false,
   isProtectedMode = false,
   isPullFailing = false,
   isPullLoading = false,
@@ -131,6 +134,10 @@ function QuickActionsView({
     toggleConnectModal(true);
   }, [toggleConnectModal]);
 
+  if (!isInitialized) {
+    return null;
+  }
+
   return isConnected ? (
     <Container>
       <BranchButton
@@ -145,7 +152,10 @@ function QuickActionsView({
 
       {isAutocommitEnabled && isAutocommitPolling ? (
         <div data-testid="t--git-autocommit-loader">
-          <AutocommitStatusbar completed={!isAutocommitPolling} />
+          <Statusbar
+            completed={!isAutocommitPolling}
+            message={createMessage(AUTOCOMMIT_IN_PROGRESS_MESSAGE)}
+          />
         </div>
       ) : (
         <>

app/client/src/git/components/QuickActions/index.tsx

@@ -12,6 +12,7 @@ import useOps from "git/hooks/useOps";
 import useBranches from "git/hooks/useBranches";
 import useConnected from "git/hooks/useConnected";
 import useProtectedMode from "git/hooks/useProtectedMode";
+import useInit from "git/hooks/useInit";
 
 function QuickActions() {
   const isConnected = useConnected();
@@ -29,6 +30,7 @@ function QuickActions() {
   const { toggleSettingsModal } = useSettings();
   const { toggleConnectModal } = useConnect();
   const { currentBranch, isBranchPopupOpen, toggleBranchPopup } = useBranches();
+  const { isInitialized } = useInit();
 
   const isPullFailing = !!pullError;
   const isStatusClean = status?.isClean ?? true;
@@ -46,6 +48,7 @@ function QuickActions() {
       isConnected={isConnected}
       isDiscardLoading={isDiscardLoading}
       isFetchStatusLoading={isFetchStatusLoading}
+      isInitialized={isInitialized}
       isProtectedMode={isProtectedMode}
       isPullFailing={isPullFailing}
       isPullLoading={isPullLoading}

app/client/src/git/hooks/useInit.ts

@@ -0,0 +1,16 @@
+import {
+  selectInitialized,
+  selectInitializing,
+} from "git/store/selectors/gitArtifactSelectors";
+import useArtifactSelector from "./useArtifactSelector";
+
+export default function useInit() {
+  const initializing = useArtifactSelector(selectInitializing);
+
+  const initialized = useArtifactSelector(selectInitialized);
+
+  return {
+    isInitializing: initializing ?? false,
+    isInitialized: initialized ?? false,
+  };
+}

app/client/src/git/sagas/initGitSaga.ts

@@ -35,4 +35,6 @@ export default function* initGitForEditorSaga(
       );
     }
   }
+
+  yield put(gitArtifactActions.initGitForEditorSuccess({ artifactDef }));
 }

app/client/src/git/store/actions/initGitActions.ts

@@ -7,5 +7,19 @@ export interface InitGitForEditorPayload {
 
 export const initGitForEditorAction =
   createArtifactAction<InitGitForEditorPayload>((state) => {
-    return state;
+    // need to do this to avoid mutation, bug with redux-toolkit immer
+    const ui = {
+      ...state.ui,
+      initializing: true,
+      initialized: false,
+    };
+
+    return { ...state, ui };
   });
+
+export const initGitForEditorSuccessAction = createArtifactAction((state) => {
+  state.ui.initializing = false;
+  state.ui.initialized = true;
+
+  return state;
+});

app/client/src/git/store/gitArtifactSlice.ts

@@ -108,7 +108,10 @@ import {
   updateProtectedBranchesInitAction,
   updateProtectedBranchesSuccessAction,
 } from "./actions/updateProtectedBranchesActions";
-import { initGitForEditorAction } from "./actions/initGitActions";
+import {
+  initGitForEditorAction,
+  initGitForEditorSuccessAction,
+} from "./actions/initGitActions";
 import {
   fetchAutocommitProgressErrorAction,
   fetchAutocommitProgressInitAction,
@@ -142,6 +145,7 @@ export const gitArtifactSlice = createSlice({
   reducers: {
     // init
     initGitForEditor: initGitForEditorAction,
+    initGitForEditorSuccess: initGitForEditorSuccessAction,
     mount: mountAction,
     unmount: unmountAction,
     fetchMetadataInit: fetchMetadataInitAction,

app/client/src/git/store/helpers/initialState.ts

@@ -11,6 +11,8 @@ import type {
 } from "../types";
 
 const gitArtifactInitialUIState: GitArtifactUIReduxState = {
+  initializing: false,
+  initialized: false,
   connectModalOpen: false,
   connectSuccessModalOpen: false,
   disconnectBaseArtifactId: null,

app/client/src/git/store/selectors/gitArtifactSelectors.ts

@@ -9,6 +9,17 @@ export const selectGitArtifact = (
   ];
 };
 
+// init
+export const selectInitializing = (
+  state: GitRootState,
+  artifactDef: GitArtifactDef,
+) => selectGitArtifact(state, artifactDef)?.ui?.initializing ?? false;
+
+export const selectInitialized = (
+  state: GitRootState,
+  artifactDef: GitArtifactDef,
+) => selectGitArtifact(state, artifactDef)?.ui?.initialized ?? false;
+
 // metadata
 export const selectMetadataState = (
   state: GitRootState,

app/client/src/git/store/types.ts

@@ -63,6 +63,8 @@ export interface GitArtifactAPIResponsesReduxState
 
 export interface GitArtifactUIReduxState
   extends GitArtifactUIReduxStateExtended {
+  initializing: boolean;
+  initialized: boolean;
   connectModalOpen: boolean;
   connectSuccessModalOpen: boolean;
   disconnectBaseArtifactId: string | null;