PromucFlow_constructor/app/client/src/entities/Engine/AppEditorEngine.ts
Rudraprasad Das e827042c69
fix: fixing non blocking calls (#29170)
## Description
Git-connected apps are taking substantially more time to load compared
to normal apps
The primary reason was due to long-running blocking API calls for `git
status` and `git fetch`. This PR makes the blocking API calls run in the
background instead

#### PR fixes following issue(s)
Fixes #29169

#### Media
Previously

![image](https://github.com/appsmithorg/appsmith/assets/8724051/b5bd08eb-ea95-4002-9ff3-4c6815e1c0ef)

Now

![image](https://github.com/appsmithorg/appsmith/assets/8724051/53e70d61-2773-40ab-962c-bb145eb113a1)


#### Type of change
- Bug fix (non-breaking change which fixes an issue)
>
>
>
## 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
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [x] 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
2023-11-29 14:18:50 +05:30

298 lines
9.5 KiB
TypeScript

import { fetchMockDatasources } from "actions/datasourceActions";
import {
fetchGitRemoteStatusInit,
fetchGitProtectedBranchesInit,
fetchGitStatusInit,
remoteUrlInputValue,
resetPullMergeStatus,
fetchBranchesInit,
} from "actions/gitSyncActions";
import { restoreRecentEntitiesRequest } from "actions/globalSearchActions";
import { resetEditorSuccess } from "actions/initActions";
import { loadGuidedTourInit } from "actions/onboardingActions";
import { fetchAllPageEntityCompletion, setupPage } from "actions/pageActions";
import {
executePageLoadActions,
fetchActions,
} from "actions/pluginActionActions";
import { fetchPluginFormConfigs } from "actions/pluginActions";
import type {
ApplicationPayload,
ReduxAction,
} from "@appsmith/constants/ReduxActionConstants";
import {
ReduxActionErrorTypes,
ReduxActionTypes,
} from "@appsmith/constants/ReduxActionConstants";
import { addBranchParam } from "constants/routes";
import type { APP_MODE } from "entities/App";
import { call, fork, put, select, spawn } from "redux-saga/effects";
import {
failFastApiCalls,
reportSWStatus,
waitForWidgetConfigBuild,
} from "sagas/InitSagas";
import { getCurrentApplication } from "selectors/editorSelectors";
import {
getCurrentGitBranch,
getIsGitStatusLiteEnabled,
} from "selectors/gitSyncSelectors";
import AnalyticsUtil from "utils/AnalyticsUtil";
import history from "utils/history";
import PerformanceTracker, {
PerformanceTransactionName,
} from "utils/PerformanceTracker";
import type { AppEnginePayload } from ".";
import AppEngine, {
ActionsNotFoundError,
PluginFormConfigsNotFoundError,
PluginsNotFoundError,
} from ".";
import { fetchJSLibraries } from "actions/JSLibraryActions";
import CodemirrorTernService from "utils/autocomplete/CodemirrorTernService";
import {
waitForSegmentInit,
waitForFetchUserSuccess,
} from "@appsmith/sagas/userSagas";
import { getFirstTimeUserOnboardingComplete } from "selectors/onboardingSelectors";
import { isAirgapped } from "@appsmith/utils/airgapHelpers";
import { getAIPromptTriggered } from "utils/storage";
import { trackOpenEditorTabs } from "../../utils/editor/browserTabsTracking";
import { EditorModes } from "components/editorComponents/CodeEditor/EditorConfig";
import { waitForFetchEnvironments } from "@appsmith/sagas/EnvironmentSagas";
import { getPageDependencyActions } from "@appsmith/entities/Engine/actionHelpers";
import { getCurrentWorkspaceId } from "@appsmith/selectors/workspaceSelectors";
import {
getFeatureFlagsForEngine,
type DependentFeatureFlags,
} from "@appsmith/selectors/engineSelectors";
import { fetchJSCollections } from "actions/jsActionActions";
import {
fetchAppThemesAction,
fetchSelectedAppThemeAction,
} from "actions/appThemingActions";
export default class AppEditorEngine extends AppEngine {
constructor(mode: APP_MODE) {
super(mode);
this.setupEngine = this.setupEngine.bind(this);
this.loadAppData = this.loadAppData.bind(this);
this.loadAppURL = this.loadAppURL.bind(this);
this.loadAppEntities = this.loadAppEntities.bind(this);
this.loadGit = this.loadGit.bind(this);
this.completeChore = this.completeChore.bind(this);
this.loadPageThemesAndActions = this.loadPageThemesAndActions.bind(this);
this.loadPluginsAndDatasources = this.loadPluginsAndDatasources.bind(this);
}
/**
* this saga is called once then application is loaded.
* It will hold the editor in uninitialized till all the apis/actions are completed
*
* @param AppEnginePayload
* @returns
*/
public *setupEngine(payload: AppEnginePayload): any {
yield* super.setupEngine.call(this, payload);
yield put(resetEditorSuccess());
CodemirrorTernService.resetServer();
}
public startPerformanceTracking() {
PerformanceTracker.startAsyncTracking(
PerformanceTransactionName.INIT_EDIT_APP,
);
}
public stopPerformanceTracking() {
PerformanceTracker.stopAsyncTracking(
PerformanceTransactionName.INIT_EDIT_APP,
);
}
private *loadPageThemesAndActions(
toLoadPageId: string,
applicationId: string,
) {
const initActionsCalls = [
setupPage(toLoadPageId, true),
fetchActions({ applicationId }, []),
fetchJSCollections({ applicationId }),
fetchSelectedAppThemeAction(applicationId),
fetchAppThemesAction(applicationId),
];
const successActionEffects = [
ReduxActionTypes.FETCH_JS_ACTIONS_SUCCESS,
ReduxActionTypes.FETCH_ACTIONS_SUCCESS,
ReduxActionTypes.FETCH_APP_THEMES_SUCCESS,
ReduxActionTypes.FETCH_SELECTED_APP_THEME_SUCCESS,
ReduxActionTypes.SETUP_PAGE_SUCCESS,
];
const failureActionEffects = [
ReduxActionErrorTypes.FETCH_JS_ACTIONS_ERROR,
ReduxActionErrorTypes.FETCH_ACTIONS_ERROR,
ReduxActionErrorTypes.FETCH_APP_THEMES_ERROR,
ReduxActionErrorTypes.FETCH_SELECTED_APP_THEME_ERROR,
ReduxActionErrorTypes.SETUP_PAGE_ERROR,
];
initActionsCalls.push(fetchJSLibraries(applicationId));
successActionEffects.push(ReduxActionTypes.FETCH_JS_LIBRARIES_SUCCESS);
const allActionCalls: boolean = yield call(
failFastApiCalls,
initActionsCalls,
successActionEffects,
failureActionEffects,
);
if (!allActionCalls)
throw new ActionsNotFoundError(
`Unable to fetch actions for the application: ${applicationId}`,
);
yield call(waitForFetchUserSuccess);
yield call(waitForSegmentInit, true);
yield call(waitForFetchEnvironments);
yield put(fetchAllPageEntityCompletion([executePageLoadActions()]));
}
private *loadPluginsAndDatasources() {
const isAirgappedInstance = isAirgapped();
const currentWorkspaceId: string = yield select(getCurrentWorkspaceId);
const featureFlags: DependentFeatureFlags = yield select(
getFeatureFlagsForEngine,
);
const { errorActions, initActions, successActions } =
getPageDependencyActions(currentWorkspaceId, featureFlags);
if (!isAirgappedInstance) {
initActions.push(fetchMockDatasources() as ReduxAction<{ type: string }>);
successActions.push(ReduxActionTypes.FETCH_MOCK_DATASOURCES_SUCCESS);
errorActions.push(ReduxActionErrorTypes.FETCH_MOCK_DATASOURCES_ERROR);
}
const initActionCalls: boolean = yield call(
failFastApiCalls,
initActions,
successActions,
errorActions,
);
if (!initActionCalls)
throw new PluginsNotFoundError("Unable to fetch plugins");
const pluginFormCall: boolean = yield call(
failFastApiCalls,
[fetchPluginFormConfigs()],
[ReduxActionTypes.FETCH_PLUGIN_FORM_CONFIGS_SUCCESS],
[ReduxActionErrorTypes.FETCH_PLUGIN_FORM_CONFIGS_ERROR],
);
if (!pluginFormCall)
throw new PluginFormConfigsNotFoundError(
"Unable to fetch plugin form configs",
);
}
public *loadAppEntities(toLoadPageId: string, applicationId: string): any {
yield call(this.loadPageThemesAndActions, toLoadPageId, applicationId);
yield call(this.loadPluginsAndDatasources);
}
public *completeChore() {
const isFirstTimeUserOnboardingComplete: boolean = yield select(
getFirstTimeUserOnboardingComplete,
);
const currentApplication: ApplicationPayload = yield select(
getCurrentApplication,
);
const [isAnotherEditorTabOpen, currentTabs] = yield call(
trackOpenEditorTabs,
currentApplication.id,
);
if (currentApplication) {
AnalyticsUtil.logEvent("EDITOR_OPEN", {
appId: currentApplication.id,
appName: currentApplication.name,
isAnotherEditorTabOpen,
currentTabs,
});
}
yield put(loadGuidedTourInit());
if (isFirstTimeUserOnboardingComplete) {
yield put({
type: ReduxActionTypes.SET_FIRST_TIME_USER_ONBOARDING_APPLICATION_IDS,
payload: [],
});
}
const noOfTimesAIPromptTriggered: number = yield getAIPromptTriggered(
EditorModes.TEXT_WITH_BINDING,
);
yield put({
type: ReduxActionTypes.UPDATE_AI_TRIGGERED,
payload: {
value: noOfTimesAIPromptTriggered,
mode: EditorModes.TEXT_WITH_BINDING,
},
});
const noOfTimesAIPromptTriggeredForQuery: number =
yield getAIPromptTriggered(EditorModes.POSTGRESQL_WITH_BINDING);
yield put({
type: ReduxActionTypes.UPDATE_AI_TRIGGERED,
payload: {
value: noOfTimesAIPromptTriggeredForQuery,
mode: EditorModes.POSTGRESQL_WITH_BINDING,
},
});
yield call(waitForWidgetConfigBuild);
yield spawn(reportSWStatus);
yield put({
type: ReduxActionTypes.INITIALIZE_EDITOR_SUCCESS,
});
}
public *loadGit(applicationId: string) {
const branchInStore: string = yield select(getCurrentGitBranch);
yield put(
restoreRecentEntitiesRequest({
applicationId,
branch: branchInStore,
}),
);
// init of temporary remote url from old application
yield put(remoteUrlInputValue({ tempRemoteUrl: "" }));
// add branch query to path and fetch status
if (branchInStore) {
history.replace(addBranchParam(branchInStore));
yield fork(this.loadGitInBackground);
}
}
private *loadGitInBackground() {
const isGitStatusLiteEnabled: boolean = yield select(
getIsGitStatusLiteEnabled,
);
yield put(fetchBranchesInit());
yield put(fetchGitProtectedBranchesInit());
if (isGitStatusLiteEnabled) {
yield put(fetchGitRemoteStatusInit());
yield put(fetchGitStatusInit({ compareRemote: false }));
} else {
yield put(fetchGitStatusInit({ compareRemote: true }));
}
yield put(resetPullMergeStatus());
}
}