chore: git mod - adding init saga and connecting components to ctx (#38088)

## Description
- Adds more selectors
- Adds more sagas
- Introduces init steps for git
- Improvements upon CtxAwareGitQuickActions

Fixes #37800 
Fixes #36814 


## 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/12295168481>
> Commit: ea1ab49
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12295168481&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Git`
> Spec:
> <hr>Thu, 12 Dec 2024 12:06:09 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

## Summary by CodeRabbit

- **New Features**
  - Introduced a context provider for managing Git-related state.
  - Added a `GitQuickActions` component for various Git actions.
- Implemented custom hooks for managing Git branches, metadata,
operations, and settings.
- Added Redux Saga functions for fetching Git metadata and protected
branches.
  - Enhanced autocommit functionality with polling for progress.
- Introduced actions for managing the autocommit process and fetching
protected branches.
- Added new actions to initialize Git for editor context and manage
loading states.

- **Bug Fixes**
  - Improved error handling in various action creators and sagas.

- **Chores**
- Updated action creators and types for better type safety and clarity.
- Refined test cases for components to ensure accurate button selection.
- Modified request functions to utilize Axios promises directly for
better consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: Rudraprasad Das

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

@@ -5,9 +5,13 @@ import useStatusChangeCount from "./hooks/useStatusChangeCount";
 
 function CtxAwareGitQuickActions() {
   const {
+    autocommitEnabled,
+    autocommitPolling,
     discard,
     discardLoading,
     fetchStatusLoading,
+    gitConnected,
+    protectedMode,
     pull,
     pullError,
     pullLoading,
@@ -17,12 +21,7 @@ function CtxAwareGitQuickActions() {
     toggleGitSettingsModal,
   } = useGitContext();
 
-  const isGitConnected = false;
-  const isAutocommitEnabled = true;
-  const isAutocommitPolling = false;
-  const isConnectPermitted = true;
-  const isProtectedMode = false;
-
+  const connectPermitted = true;
   const isPullFailing = !!pullError;
   const isStatusClean = status?.isClean ?? false;
   const statusBehindCount = status?.behindCount ?? 0;
@@ -31,13 +30,13 @@ function CtxAwareGitQuickActions() {
   return (
     <GitQuickActions
       discard={discard}
-      isAutocommitEnabled={isAutocommitEnabled}
-      isAutocommitPolling={isAutocommitPolling}
-      isConnectPermitted={isConnectPermitted}
+      isAutocommitEnabled={autocommitEnabled}
+      isAutocommitPolling={autocommitPolling}
+      isConnectPermitted={connectPermitted}
       isDiscardLoading={discardLoading}
       isFetchStatusLoading={fetchStatusLoading}
-      isGitConnected={isGitConnected}
-      isProtectedMode={isProtectedMode}
+      isGitConnected={gitConnected}
+      isProtectedMode={protectedMode}
       isPullFailing={isPullFailing}
       isPullLoading={pullLoading}
       isStatusClean={isStatusClean}

app/client/src/git/components/GitContextProvider/hooks/useGitBranches.ts

@@ -113,18 +113,18 @@ export default function useGitBranches({
   };
 
   return {
-    branches: branchesState?.value ?? null,
+    branches: branchesState?.value,
     fetchBranchesLoading: branchesState?.loading ?? false,
-    fetchBranchesError: branchesState?.error ?? null,
+    fetchBranchesError: branchesState?.error,
     fetchBranches,
     createBranchLoading: createBranchState?.loading ?? false,
-    createBranchError: createBranchState?.error ?? null,
+    createBranchError: createBranchState?.error,
     createBranch,
     deleteBranchLoading: deleteBranchState?.loading ?? false,
-    deleteBranchError: deleteBranchState?.error ?? null,
+    deleteBranchError: deleteBranchState?.error,
     deleteBranch,
     checkoutBranchLoading: checkoutBranchState?.loading ?? false,
-    checkoutBranchError: checkoutBranchState?.error ?? null,
+    checkoutBranchError: checkoutBranchState?.error,
     checkoutBranch,
     toggleGitBranchListPopup,
   };

app/client/src/git/components/GitContextProvider/hooks/useGitContextValue.ts

@@ -8,14 +8,17 @@ import useGitOps from "./useGitOps";
 import useGitBranches from "./useGitBranches";
 import useGitSettings from "./useGitSettings";
 import { useMemo } from "react";
+import type { UseGitMetadataReturnValue } from "./useGitMetadata";
+import useGitMetadata from "./useGitMetadata";
 
 interface UseGitContextValueParams {
   artifactType: keyof typeof GitArtifactType;
   baseArtifactId: string;
 }
 
 export interface GitContextValue
-  extends UseGitConnectReturnValue,
+  extends UseGitMetadataReturnValue,
+    UseGitConnectReturnValue,
     UseGitOpsReturnValue,
     UseGitSettingsReturnValue,
     UseGitBranchesReturnValue {}
@@ -28,12 +31,14 @@ export default function useGitContextValue({
     () => ({ artifactType, baseArtifactId }),
     [artifactType, baseArtifactId],
   );
+  const useGitMetadataReturnValue = useGitMetadata(basePayload);
   const useGitConnectReturnValue = useGitConnect(basePayload);
   const useGitOpsReturnValue = useGitOps(basePayload);
   const useGitBranchesReturnValue = useGitBranches(basePayload);
   const useGitSettingsReturnValue = useGitSettings(basePayload);
 
   return {
+    ...useGitMetadataReturnValue,
     ...useGitOpsReturnValue,
     ...useGitBranchesReturnValue,
     ...useGitConnectReturnValue,

app/client/src/git/components/GitContextProvider/hooks/useGitMetadata.ts

@@ -0,0 +1,45 @@
+import type { GitArtifactType } from "git/constants/enums";
+import type { FetchGitMetadataResponseData } from "git/requests/fetchGitMetadataRequest.types";
+import {
+  selectGitConnected,
+  selectGitMetadata,
+} from "git/store/selectors/gitSingleArtifactSelectors";
+import type { GitRootState } from "git/store/types";
+import { useMemo } from "react";
+import { useSelector } from "react-redux";
+
+interface UseGitMetadataParams {
+  artifactType: keyof typeof GitArtifactType;
+  baseArtifactId: string;
+}
+
+export interface UseGitMetadataReturnValue {
+  gitMetadata: FetchGitMetadataResponseData | null;
+  fetchGitMetadataLoading: boolean;
+  fetchGitMetadataError: string | null;
+  gitConnected: boolean;
+}
+
+export default function useGitMetadata({
+  artifactType,
+  baseArtifactId,
+}: UseGitMetadataParams): UseGitMetadataReturnValue {
+  const basePayload = useMemo(
+    () => ({ artifactType, baseArtifactId }),
+    [artifactType, baseArtifactId],
+  );
+
+  const gitMetadataState = useSelector((state: GitRootState) =>
+    selectGitMetadata(state, basePayload),
+  );
+  const gitConnected = useSelector((state: GitRootState) =>
+    selectGitConnected(state, basePayload),
+  );
+
+  return {
+    gitMetadata: gitMetadataState.value,
+    fetchGitMetadataLoading: gitMetadataState.loading ?? false,
+    fetchGitMetadataError: gitMetadataState.error,
+    gitConnected: gitConnected ?? false,
+  };
+}

app/client/src/git/components/GitContextProvider/hooks/useGitOps.ts

@@ -133,24 +133,24 @@ export default function useGitOps({
 
   return {
     commitLoading: commitState?.loading ?? false,
-    commitError: commitState?.error ?? null,
+    commitError: commitState?.error,
     commit,
     discardLoading: discardState?.loading ?? false,
-    discardError: discardState?.error ?? null,
+    discardError: discardState?.error,
     discard,
-    status: statusState?.value ?? null,
+    status: statusState?.value,
     fetchStatusLoading: statusState?.loading ?? false,
-    fetchStatusError: statusState?.error ?? null,
+    fetchStatusError: statusState?.error,
     fetchStatus,
     mergeLoading: mergeState?.loading ?? false,
-    mergeError: mergeState?.error ?? null,
+    mergeError: mergeState?.error,
     merge,
-    mergeStatus: mergeStatusState?.value ?? null,
+    mergeStatus: mergeStatusState?.value,
     fetchMergeStatusLoading: mergeStatusState?.loading ?? false,
-    fetchMergeStatusError: mergeStatusState?.error ?? null,
+    fetchMergeStatusError: mergeStatusState?.error,
     fetchMergeStatus,
     pullLoading: pullState?.loading ?? false,
-    pullError: pullState?.error ?? null,
+    pullError: pullState?.error,
     pull,
     toggleGitOpsModal,
   };

app/client/src/git/components/GitContextProvider/hooks/useGitSettings.ts

@@ -1,14 +1,29 @@
 import type { GitArtifactType, GitSettingsTab } from "git/constants/enums";
+import type { FetchProtectedBranchesResponseData } from "git/requests/fetchProtectedBranchesRequest.types";
 import { gitArtifactActions } from "git/store/gitArtifactSlice";
+import {
+  selectAutocommitEnabled,
+  selectAutocommitPolling,
+  selectProtectedBranches,
+  selectProtectedMode,
+} from "git/store/selectors/gitSingleArtifactSelectors";
+import type { GitRootState } from "git/store/types";
 import { useMemo } from "react";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 
 interface UseGitSettingsParams {
   artifactType: keyof typeof GitArtifactType;
   baseArtifactId: string;
 }
 
 export interface UseGitSettingsReturnValue {
+  autocommitEnabled: boolean;
+  autocommitPolling: boolean;
+  protectedBranches: FetchProtectedBranchesResponseData | null;
+  fetchProtectedBranchesLoading: boolean;
+  fetchProtectedBranchesError: string | null;
+  fetchProtectedBranches: () => void;
+  protectedMode: boolean;
   toggleGitSettingsModal: (
     open: boolean,
     tab: keyof typeof GitSettingsTab,
@@ -25,6 +40,33 @@ export default function useGitSettings({
     [artifactType, baseArtifactId],
   );
 
+  // autocommit
+  const autocommitEnabled = useSelector((state: GitRootState) =>
+    selectAutocommitEnabled(state, basePayload),
+  );
+
+  const autocommitPolling = useSelector((state: GitRootState) =>
+    selectAutocommitPolling(state, basePayload),
+  );
+
+  // branch protection
+  const protectedBranchesState = useSelector((state: GitRootState) =>
+    selectProtectedBranches(state, basePayload),
+  );
+
+  const fetchProtectedBranches = () => {
+    dispatch(
+      gitArtifactActions.fetchProtectedBranchesInit({
+        ...basePayload,
+      }),
+    );
+  };
+
+  const protectedMode = useSelector((state: GitRootState) =>
+    selectProtectedMode(state, basePayload),
+  );
+
+  // ui
   const toggleGitSettingsModal = (
     open: boolean,
     tab: keyof typeof GitSettingsTab,
@@ -39,6 +81,13 @@ export default function useGitSettings({
   };
 
   return {
+    autocommitEnabled: autocommitEnabled ?? false,
+    autocommitPolling: autocommitPolling ?? false,
+    protectedBranches: protectedBranchesState.value,
+    fetchProtectedBranchesLoading: protectedBranchesState.loading ?? false,
+    fetchProtectedBranchesError: protectedBranchesState.error,
+    fetchProtectedBranches,
+    protectedMode: protectedMode ?? false,
     toggleGitSettingsModal,
   };
 }

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect } from "react";
+import React, { createContext, useContext } from "react";
 import type { GitArtifactType } from "git/constants/enums";
 import type { GitContextValue } from "./hooks/useGitContextValue";
 import useGitContextValue from "./hooks/useGitContextValue";
@@ -15,24 +15,18 @@ interface GitContextProviderProps {
   artifactType: keyof typeof GitArtifactType;
   baseArtifactId: string;
   children: React.ReactNode;
+  // extra
+  // connectPermitted?: boolean;
 }
 
 export default function GitContextProvider({
   artifactType,
   baseArtifactId,
   children,
+  // connectPermitted = true,
 }: GitContextProviderProps) {
   const contextValue = useGitContextValue({ artifactType, baseArtifactId });
 
-  const { fetchBranches } = contextValue;
-
-  useEffect(
-    function gitInitEffect() {
-      fetchBranches();
-    },
-    [fetchBranches],
-  );
-
   return (
     <GitContext.Provider value={contextValue}>{children}</GitContext.Provider>
   );

app/client/src/git/components/GitQuickActions/QuickActionButton.test.tsx

@@ -50,7 +50,7 @@ describe("QuickActionButton", () => {
         <QuickActionButton {...defaultProps} />
       </ThemeProvider>,
     );
-    const btn = container.getElementsByClassName("t--test-btn")[0];
+    const btn = container.querySelectorAll(".t--test-btn button")[0];
 
     fireEvent.click(btn);
     expect(defaultProps.onClick).toHaveBeenCalledTimes(1);

app/client/src/git/components/GitQuickActions/QuickActionButton.tsx

@@ -19,12 +19,11 @@ const SpinnerContainer = styled.div`
   padding: 0 10px;
 `;
 
-const QuickActionButtonContainer = styled.button<{ disabled?: boolean }>`
+const QuickActionButtonContainer = styled.div<{ disabled?: boolean }>`
   margin: 0 ${(props) => props.theme.spaces[1]}px;
   display: block;
   position: relative;
   overflow: visible;
-  cursor: ${({ disabled = false }) => (disabled ? "not-allowed" : "pointer")};
   opacity: ${({ disabled = false }) => (disabled ? 0.6 : 1)};
 `;
 
@@ -57,11 +56,7 @@ function QuickActionButton({
   const content = capitalizeFirstLetter(tooltipText);
 
   return (
-    <QuickActionButtonContainer
-      className={className}
-      disabled={disabled}
-      onClick={onClick}
-    >
+    <QuickActionButtonContainer className={className} disabled={disabled}>
       {loading ? (
         <SpinnerContainer className="t--loader-quick-git-action">
           <SpinnerLoader size="md" />
@@ -73,6 +68,7 @@ function QuickActionButton({
               isDisabled={disabled}
               isIconButton
               kind="tertiary"
+              onClick={onClick}
               size="md"
               startIcon={icon}
             />