From 3ad06e215e6b1dd6f9cc180f25198630e0e2fc38 Mon Sep 17 00:00:00 2001 From: Rudraprasad Das Date: Tue, 14 Jan 2025 11:58:10 +0100 Subject: [PATCH] chore: git mod - minor fixes (#38634) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 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" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: bd7a5814bd094717bc6bffb746418c3bbe682d55 > Cypress dashboard. > Tags: `@tag.Git` > Spec: >
Mon, 13 Jan 2025 19:21:01 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No ## 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. --- .../OpsModal/TabMerge/TabMergeView.tsx | 2 +- .../QuickActions/QuickActionsView.test.tsx | 19 +++++++++++++++++++ .../QuickActions/QuickActionsView.tsx | 14 ++++++++++++-- .../src/git/components/QuickActions/index.tsx | 3 +++ app/client/src/git/hooks/useInit.ts | 16 ++++++++++++++++ app/client/src/git/sagas/initGitSaga.ts | 2 ++ .../src/git/store/actions/initGitActions.ts | 16 +++++++++++++++- app/client/src/git/store/gitArtifactSlice.ts | 6 +++++- .../src/git/store/helpers/initialState.ts | 2 ++ .../store/selectors/gitArtifactSelectors.ts | 11 +++++++++++ app/client/src/git/store/types.ts | 2 ++ 11 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 app/client/src/git/hooks/useInit.ts diff --git a/app/client/src/git/components/OpsModal/TabMerge/TabMergeView.tsx b/app/client/src/git/components/OpsModal/TabMerge/TabMergeView.tsx index acfc7d50e2..337aa18e74 100644 --- a/app/client/src/git/components/OpsModal/TabMerge/TabMergeView.tsx +++ b/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) { diff --git a/app/client/src/git/components/QuickActions/QuickActionsView.test.tsx b/app/client/src/git/components/QuickActions/QuickActionsView.test.tsx index bb47195dab..aa3ee90cb7 100644 --- a/app/client/src/git/components/QuickActions/QuickActionsView.test.tsx +++ b/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( + + + , + ); + + 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( diff --git a/app/client/src/git/components/QuickActions/QuickActionsView.tsx b/app/client/src/git/components/QuickActions/QuickActionsView.tsx index 9a11ca5de4..c5b49fb39c 100644 --- a/app/client/src/git/components/QuickActions/QuickActionsView.tsx +++ b/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 ? ( - + ) : ( <> diff --git a/app/client/src/git/components/QuickActions/index.tsx b/app/client/src/git/components/QuickActions/index.tsx index 9224823d80..5ec638e8aa 100644 --- a/app/client/src/git/components/QuickActions/index.tsx +++ b/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} diff --git a/app/client/src/git/hooks/useInit.ts b/app/client/src/git/hooks/useInit.ts new file mode 100644 index 0000000000..fd0c802035 --- /dev/null +++ b/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, + }; +} diff --git a/app/client/src/git/sagas/initGitSaga.ts b/app/client/src/git/sagas/initGitSaga.ts index cf1a823f8c..3a8aebba5b 100644 --- a/app/client/src/git/sagas/initGitSaga.ts +++ b/app/client/src/git/sagas/initGitSaga.ts @@ -35,4 +35,6 @@ export default function* initGitForEditorSaga( ); } } + + yield put(gitArtifactActions.initGitForEditorSuccess({ artifactDef })); } diff --git a/app/client/src/git/store/actions/initGitActions.ts b/app/client/src/git/store/actions/initGitActions.ts index ebe588555a..e7bcdfeeb0 100644 --- a/app/client/src/git/store/actions/initGitActions.ts +++ b/app/client/src/git/store/actions/initGitActions.ts @@ -7,5 +7,19 @@ export interface InitGitForEditorPayload { export const initGitForEditorAction = createArtifactAction((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; +}); diff --git a/app/client/src/git/store/gitArtifactSlice.ts b/app/client/src/git/store/gitArtifactSlice.ts index bcb70f89aa..7109bcfbfe 100644 --- a/app/client/src/git/store/gitArtifactSlice.ts +++ b/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, diff --git a/app/client/src/git/store/helpers/initialState.ts b/app/client/src/git/store/helpers/initialState.ts index 18b6e58ca8..f292762153 100644 --- a/app/client/src/git/store/helpers/initialState.ts +++ b/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, diff --git a/app/client/src/git/store/selectors/gitArtifactSelectors.ts b/app/client/src/git/store/selectors/gitArtifactSelectors.ts index 4f53465593..7b31459089 100644 --- a/app/client/src/git/store/selectors/gitArtifactSelectors.ts +++ b/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, diff --git a/app/client/src/git/store/types.ts b/app/client/src/git/store/types.ts index c23f4d431a..bcf59c0759 100644 --- a/app/client/src/git/store/types.ts +++ b/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;