Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Make Split screen feature GA (#38731)

Browse Source
This commit is contained in:
Hetu Nandu 2025-01-17 16:42:40 +05:30 committed by GitHub
parent 24a7fa5926
commit 5aeee41104
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 9 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/cypress/support/Objects/FeatureFlags.ts
View File

@ -3,7 +3,6 @@ import { ObjectsRegistry } from "./Registry";
import produce from "immer";
const defaultFlags = {
release_side_by_side_ide_enabled: true,
rollout_remove_feature_walkthrough_enabled: false, // remove this flag from here when it's removed from code
release_git_modularisation_enabled: true,
};

9
app/client/src/IDE/hooks/useIsInSideBySideEditor.test.tsx
View File

@ -17,9 +17,6 @@ import type { Store } from "redux";
const JS_COLLECTION_EDITOR_PATH =
"/app/app-name/page-665dd1103e4483728c9ed11a/edit/jsObjects";
const NON_JS_COLLECTION_EDITOR_PATH = "/some-other-path";
const FEATURE_FLAGS = {
rollout_side_by_side_enabled: true,
};
const renderUseIsInSideBySideEditor = (
history: MemoryHistory,
@ -41,7 +38,6 @@ describe("useIsInSideBySideEditor", () => {
const store = testStore(
getIDETestState({
ideView: EditorViewMode.SplitScreen,
featureFlags: FEATURE_FLAGS,
}),
);
@ -54,7 +50,6 @@ describe("useIsInSideBySideEditor", () => {
const store = testStore(
getIDETestState({
ideView: EditorViewMode.FullScreen,
featureFlags: FEATURE_FLAGS,
}),
);
@ -71,7 +66,6 @@ describe("useIsInSideBySideEditor", () => {
const store = testStore(
getIDETestState({
ideView: EditorViewMode.SplitScreen,
featureFlags: FEATURE_FLAGS,
}),
);
@ -88,7 +82,6 @@ describe("useIsInSideBySideEditor", () => {
const store = testStore(
getIDETestState({
ideView: EditorViewMode.SplitScreen,
featureFlags: FEATURE_FLAGS,
}),
);
@ -105,7 +98,6 @@ describe("useIsInSideBySideEditor", () => {
const store = testStore(
getIDETestState({
ideView: EditorViewMode.SplitScreen,
featureFlags: FEATURE_FLAGS,
}),
);
@ -130,7 +122,6 @@ describe("useIsInSideBySideEditor", () => {
const store = testStore(
getIDETestState({
ideView: EditorViewMode.SplitScreen,
featureFlags: FEATURE_FLAGS,
}),
);

4
app/client/src/ce/entities/FeatureFlag.ts
View File

@ -24,14 +24,12 @@ export const FEATURE_FLAG = {
license_widget_rtl_support_enabled: "license_widget_rtl_support_enabled",
ab_one_click_learning_popover_enabled:
"ab_one_click_learning_popover_enabled",
release_side_by_side_ide_enabled: "release_side_by_side_ide_enabled",
ab_appsmith_ai_query: "ab_appsmith_ai_query",
rollout_remove_feature_walkthrough_enabled:
"rollout_remove_feature_walkthrough_enabled",
rollout_eslint_enabled: "rollout_eslint_enabled",
release_drag_drop_building_blocks_enabled:
"release_drag_drop_building_blocks_enabled",
rollout_side_by_side_enabled: "rollout_side_by_side_enabled",
release_layout_conversion_enabled: "release_layout_conversion_enabled",
release_anvil_toggle_enabled: "release_anvil_toggle_enabled",
release_git_persist_branch_enabled: "release_git_persist_branch_enabled",
@ -79,11 +77,9 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
license_git_continuous_delivery_enabled: false,
license_widget_rtl_support_enabled: false,
ab_one_click_learning_popover_enabled: false,
release_side_by_side_ide_enabled: false,
ab_appsmith_ai_query: false,
rollout_remove_feature_walkthrough_enabled: true,
rollout_eslint_enabled: false,
rollout_side_by_side_enabled: false,
release_layout_conversion_enabled: false,
release_anvil_toggle_enabled: false,
release_git_persist_branch_enabled: false,

1
app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts
View File

@ -12764,7 +12764,6 @@ export const defaultAppState = {
release_show_new_sidebar_announcement_enabled: false,
rollout_app_sidebar_enabled: false,
ab_one_click_learning_popover_enabled: false,
release_side_by_side_ide_enabled: false,
license_git_unlimited_repo_enabled: false,
ask_ai_js: false,
license_connection_pool_size_enabled: false,

13
app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
View File

@ -9,10 +9,6 @@ import { EditorEntityTab, EditorViewMode } from "ee/entities/IDE/constants";
import { PageFactory } from "test/factories/PageFactory";
import { JSObjectFactory } from "test/factories/Actions/JSObject";
const FeatureFlags = {
rollout_side_by_side_enabled: true,
};
const basePageId = "0123456789abcdef00000000";
describe("IDE Render: JS", () => {
@ -24,7 +20,6 @@ describe("IDE Render: JS", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/jsObjects`,
featureFlags: FeatureFlags,
},
);
@ -49,7 +44,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/jsObjects`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -73,7 +67,6 @@ describe("IDE Render: JS", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/jsObjects/add`,
featureFlags: FeatureFlags,
},
);
@ -98,7 +91,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/jsObjects/add`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -137,7 +129,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/jsObjects/${js1.baseId}`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -194,7 +185,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/jsObjects/${js2.baseId}`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -241,7 +231,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/jsObjects/${js3.baseId}/add`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -283,7 +272,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/jsObjects/${js4.baseId}/add`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -334,7 +322,6 @@ describe("IDE Render: JS", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/jsObjects/${Main_JS.baseId}`,
initialState: state,
featureFlags: FeatureFlags,
},
);

22
app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
View File

@ -13,10 +13,6 @@ import { PageFactory } from "test/factories/PageFactory";
import { screen, waitFor } from "@testing-library/react";
import { GoogleSheetFactory } from "test/factories/Actions/GoogleSheetFactory";
const FeatureFlags = {
rollout_side_by_side_enabled: true,
};
const basePageId = "0123456789abcdef00000000";
describe("IDE URL rendering of Queries", () => {
@ -28,7 +24,6 @@ describe("IDE URL rendering of Queries", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/queries`,
featureFlags: FeatureFlags,
},
);
@ -51,7 +46,6 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/queries`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -73,7 +67,6 @@ describe("IDE URL rendering of Queries", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/queries/add`,
featureFlags: FeatureFlags,
},
);
@ -102,7 +95,6 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${basePageId}/edit/queries/add`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -148,7 +140,6 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/api/${anApi.baseId}`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -205,7 +196,6 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/api/${anApi.baseId}`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -250,7 +240,6 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/api/${anApi.baseId}/add`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -292,7 +281,6 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/api/${anApi.baseId}/add`,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -347,7 +335,6 @@ describe("IDE URL rendering of Queries", () => {
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/queries/${anQuery.baseId}`,
sagasToRun: sagasToRunForTests,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -402,7 +389,6 @@ describe("IDE URL rendering of Queries", () => {
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/queries/${anQuery.baseId}`,
sagasToRun: sagasToRunForTests,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -448,7 +434,7 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/${page.slug}-${page.pageId}/edit/queries/${anQuery.baseId}/add`,
initialState: state,
featureFlags: FeatureFlags,
sagasToRun: sagasToRunForTests,
},
);
@ -492,7 +478,6 @@ describe("IDE URL rendering of Queries", () => {
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/queries/${anQuery.baseId}/add`,
sagasToRun: sagasToRunForTests,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -548,7 +533,6 @@ describe("IDE URL rendering of Queries", () => {
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/saas/google-sheets-plugin/api/${anQuery.baseId}`,
sagasToRun: sagasToRunForTests,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -597,7 +581,6 @@ describe("IDE URL rendering of Queries", () => {
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/saas/google-sheets-plugin/api/${anQuery.baseId}`,
sagasToRun: sagasToRunForTests,
initialState: state,
featureFlags: FeatureFlags,
},
);
@ -646,7 +629,7 @@ describe("IDE URL rendering of Queries", () => {
{
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/saas/google-sheets-plugin/api/${anQuery.baseId}/add`,
initialState: state,
featureFlags: FeatureFlags,
sagasToRun: sagasToRunForTests,
},
);
@ -691,7 +674,6 @@ describe("IDE URL rendering of Queries", () => {
url: `/app/applicationSlug/pageSlug-${page.basePageId}/edit/saas/google-sheets-plugin/api/${anQuery.baseId}/add`,
sagasToRun: sagasToRunForTests,
initialState: state,
featureFlags: FeatureFlags,
},
);

8
app/client/src/pages/Editor/IDE/EditorPane/UI/UIRender.test.tsx
View File

@ -13,10 +13,6 @@ import {
} from "test/factories/WidgetFactoryUtils";
import { EditorViewMode } from "ee/entities/IDE/constants";
const FeatureFlags = {
rollout_side_by_side_enabled: true,
};
const pageId = "0123456789abcdef00000000";
describe("IDE URL rendering: UI", () => {
@ -32,7 +28,6 @@ describe("IDE URL rendering: UI", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${pageId}/edit`,
featureFlags: FeatureFlags,
initialState: state,
},
);
@ -52,7 +47,6 @@ describe("IDE URL rendering: UI", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${pageId}/edit/widgets`,
featureFlags: FeatureFlags,
initialState: state,
},
);
@ -101,7 +95,6 @@ describe("IDE URL rendering: UI", () => {
</Route>,
{
url,
featureFlags: FeatureFlags,
initialState: state,
},
);
@ -126,7 +119,6 @@ describe("IDE URL rendering: UI", () => {
</Route>,
{
url: `/app/applicationSlug/pageSlug-${pageId}/edit`,
featureFlags: FeatureFlags,
initialState: state,
},
);

23
app/client/src/pages/Editor/IDE/EditorPane/components/SegmentAddHeader.tsx
View File

@ -1,8 +1,6 @@
import React from "react";
import { Button, Flex, Text } from "@appsmith/ads";
import { Flex, Text } from "@appsmith/ads";
import { createMessage } from "ee/constants/messages";
import { useSelector } from "react-redux";
import { getIsSideBySideEnabled } from "selectors/ideSelectors";
interface Props {
titleMessage: () => string;
@ -10,32 +8,15 @@ interface Props {
}
const SegmentAddHeader = (props: Props) => {
const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
return (
<Flex
alignItems="center"
backgroundColor={
isSideBySideEnabled
? "var(--ads-v2-color-white)"
: "var(--ads-v2-color-gray-50)"
}
backgroundColor="var(--ads-v2-color-white)"
justifyContent="space-between"
>
<Text color="var(--ads-v2-color-fg)" kind="heading-xs">
{createMessage(props.titleMessage)}
</Text>
{isSideBySideEnabled ? null : (
<Button
aria-label="Close pane"
data-testid="t--add-pane-close-icon"
isIconButton
kind={"secondary"}
onClick={props.onCloseClick}
size={"sm"}
startIcon={"close-line"}
/>
)}
</Flex>
);
};

5
app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx
View File

@ -10,10 +10,6 @@ import { PageFactory } from "test/factories/PageFactory";
import { APIFactory } from "test/factories/Actions/API";
import type { AppState } from "ee/reducers";
const FeatureFlags = {
rollout_side_by_side_enabled: true,
};
describe("EditorTabs render checks", () => {
const page = PageFactory.build();
@ -24,7 +20,6 @@ describe("EditorTabs render checks", () => {
</Route>,
{
url,
featureFlags: FeatureFlags,
initialState: state,
},
);

9
app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
View File

@ -1,11 +1,7 @@
import React, { useCallback, useEffect } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";
import { Flex, ScrollArea, ToggleButton } from "@appsmith/ads";
import {
getIDEViewMode,
getIsSideBySideEnabled,
getListViewActiveState,
} from "selectors/ideSelectors";
import { getIDEViewMode, getListViewActiveState } from "selectors/ideSelectors";
import type { EntityItem } from "ee/entities/IDE/constants";
import {
EditorEntityTab,
@ -29,7 +25,6 @@ import { useEventCallback } from "usehooks-ts";
import { EditableTab } from "./EditableTab";
const EditorTabs = () => {
const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
const ideViewMode = useSelector(getIDEViewMode);
const { segment, segmentMode } = useCurrentEditorState();
const { closeClickHandler, tabClickHandler } = useIDETabClickHandlers();
@ -97,8 +92,6 @@ const EditorTabs = () => {
dispatch(setListViewActiveState(false));
});
if (!isSideBySideEnabled) return null;
if (segment === EditorEntityTab.UI) return null;
return (

8
app/client/src/sagas/ActionSagas.ts
View File

@ -125,7 +125,6 @@ import {
getCurrentBasePageId,
getCurrentPageId,
} from "selectors/editorSelectors";
import { getIsSideBySideEnabled } from "selectors/ideSelectors";
import { convertToBaseParentEntityIdSelector } from "selectors/pageListSelectors";
import AppsmithConsole from "utils/AppsmithConsole";
import { getDynamicBindingsChangesSaga } from "utils/DynamicBindingUtils";
@ -1196,12 +1195,7 @@ function* handleCreateNewQueryFromActionCreator(
yield put(setShowQueryCreateNewModal(true));
// Side by Side ramp. Switch to SplitScreen mode to allow user to edit query
// created while having context of the canvas
const isSideBySideEnabled: boolean = yield select(getIsSideBySideEnabled);
if (isSideBySideEnabled) {
yield put(setIdeEditorViewMode(EditorViewMode.SplitScreen));
}
yield put(setIdeEditorViewMode(EditorViewMode.SplitScreen));
// Wait for a query to be created
const createdQuery: ReduxAction<BaseAction> = yield take(

7
app/client/src/sagas/JSPaneSagas.ts
View File

@ -95,7 +95,6 @@ import {
import { getJsPaneDebuggerState } from "selectors/jsPaneSelectors";
import { logMainJsActionExecution } from "ee/utils/analyticsHelpers";
import { getFocusablePropertyPaneField } from "selectors/propertyPaneSelectors";
import { getIsSideBySideEnabled } from "selectors/ideSelectors";
import { setIdeEditorViewMode } from "actions/ideActions";
import { EditorViewMode } from "ee/entities/IDE/constants";
import { updateJSCollectionAPICall } from "ee/sagas/ApiCallerSagas";
@ -866,11 +865,7 @@ function* handleCreateNewJSFromActionCreator(
// Side by Side ramp. Switch to SplitScreen mode to allow user to edit JS function
// created while having context of the canvas
const isSideBySideEnabled: boolean = yield select(getIsSideBySideEnabled);
if (isSideBySideEnabled) {
yield put(setIdeEditorViewMode(EditorViewMode.SplitScreen));
}
yield put(setIdeEditorViewMode(EditorViewMode.SplitScreen));
// Create the JS Object with the given function name
const pageId: string = yield select(getCurrentPageId);

22
app/client/src/selectors/ideSelectors.tsx
View File

@ -1,30 +1,12 @@
import { createSelector } from "reselect";
import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors";
import type { AppState } from "ee/reducers";
import { getPageActions } from "ee/selectors/entitiesSelector";
import { EditorEntityTab, EditorViewMode } from "ee/entities/IDE/constants";
import { EditorEntityTab } from "ee/entities/IDE/constants";
import { getCurrentBasePageId } from "./editorSelectors";
import type { ParentEntityIDETabs } from "../reducers/uiReducers/ideReducer";
import { get } from "lodash";
export const getIsSideBySideEnabled = createSelector(
selectFeatureFlags,
(flags) =>
flags.release_side_by_side_ide_enabled ||
flags.rollout_side_by_side_enabled,
);
export const getIDEViewMode = createSelector(
getIsSideBySideEnabled,
(state) => state.ui.ide.view,
(featureFlag, ideViewMode) => {
if (featureFlag) {
return ideViewMode;
}
return EditorViewMode.FullScreen;
},
);
export const getIDEViewMode = (state: AppState) => state.ui.ide.view;
export const getActionsCount = (pageId: string) =>
createSelector(getPageActions(pageId), (actions) => {