;
-
- componentDidMount() {
- const type = this.getFormName();
-
- if (this.props.apiId) {
- this.props.changeAPIPage(this.props.apiId, type === "SAAS");
- }
- }
-
- getFormName = () => {
- const plugins = this.props.plugins;
- const pluginId = this.props.pluginId;
- const plugin =
- plugins &&
- plugins.find((plug) => {
- if (plug.id === pluginId) return plug;
- });
-
- return plugin && plugin.type;
- };
-
- componentDidUpdate(prevProps: Props) {
- if (prevProps.apiId !== this.props.apiId) {
- const type = this.getFormName();
-
- this.props.changeAPIPage(this.props.apiId || "", type === "SAAS");
- }
- }
-
- getPluginUiComponentOfId = (
- id: string,
- plugins: Plugin[],
- ): string | undefined => {
- const plugin = plugins.find((plugin) => plugin.id === id);
-
- if (!plugin) return undefined;
-
- return plugin.uiComponent;
- };
-
- getPluginUiComponentOfName = (plugins: Plugin[]): string | undefined => {
- const plugin = plugins.find(
- (plugin) => plugin.packageName === PluginPackageName.REST_API,
- );
-
- if (!plugin) return undefined;
-
- return plugin.uiComponent;
- };
-
- render() {
- const {
- isCreating,
- isDeleting,
- isEditorInitialized,
- isRunning,
- match: {
- params: { baseApiId },
- },
- paginationType,
- pluginId,
- plugins,
- } = this.props;
-
- if (!pluginId && baseApiId) {
- return ;
- }
-
- if (isCreating || !isEditorInitialized) {
- return (
-
-
-
- );
- }
-
- let formUiComponent: string | undefined;
-
- if (baseApiId) {
- if (pluginId) {
- formUiComponent = this.getPluginUiComponentOfId(pluginId, plugins);
- } else {
- formUiComponent = this.getPluginUiComponentOfName(plugins);
- }
- }
-
- return (
-
- {formUiComponent === "ApiEditorForm" && (
-
- )}
- {formUiComponent === "GraphQLEditorForm" && (
-
- )}
- {formUiComponent === "SaaSEditorForm" &&
- history.push(
- saasEditorApiIdURL({
- basePageId: this.props.match.params.basePageId,
- pluginPackageName:
- getPackageNameFromPluginId(
- this.props.pluginId,
- this.props.plugins,
- ) ?? "",
- baseApiId: this.props.match.params.baseApiId || "",
- }),
- )}
-
- );
- }
-}
-
-const formStyles: CSSProperties = {
- position: "relative",
- display: "flex",
- flexDirection: "column",
- flexGrow: "1",
- overflow: "auto",
-};
-
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
- const apiAction = getActionByBaseId(state, props?.match?.params?.baseApiId);
- const apiName = apiAction?.name ?? "";
- const apiId = apiAction?.id ?? "";
- const isCreating = isPluginActionCreating(state);
- const isDeleting = isActionDeleting(apiId)(state);
- const isRunning = isActionRunning(apiId)(state);
- const pluginId = _.get(apiAction, "pluginId", "");
-
- return {
- actions: state.entities.actions,
- currentApplication: getCurrentApplication(state),
- currentPageName: getCurrentPageName(state),
- pages: getPageList(state),
- apiId,
- apiName,
- plugins: getPlugins(state),
- pluginId,
- paginationType: _.get(apiAction, "actionConfiguration.paginationType"),
- apiAction,
- isRunning,
- isDeleting,
- isCreating,
- applicationId: getCurrentApplicationId(state),
- };
-};
-
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mapDispatchToProps = (dispatch: any): ReduxActionProps => ({
- submitForm: (name: string) => dispatch(submit(name)),
- changeAPIPage: (actionId: string, isSaas: boolean) =>
- dispatch(changeApi(actionId, isSaas)),
-});
-
-export default Sentry.withProfiler(
- connect(mapStateToProps, mapDispatchToProps)(ApiEditor),
-);
diff --git a/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx b/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx
deleted file mode 100644
index 27fa575fb872..000000000000
--- a/app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import type { InjectedFormProps } from "redux-form";
-import { formValueSelector, reduxForm } from "redux-form";
-import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
-import type { Action } from "entities/Action";
-import type { AppState } from "ee/reducers";
-import get from "lodash/get";
-import {
- getActionByBaseId,
- getActionData,
-} from "ee/selectors/entitiesSelector";
-import type { CommonFormProps } from "../CommonEditorForm";
-import CommonEditorForm from "../CommonEditorForm";
-import Pagination from "PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/Pagination";
-import { GRAPHQL_HTTP_METHOD_OPTIONS } from "PluginActionEditor/constants/GraphQLEditorConstants";
-import PostBodyData from "PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/PostBodyData";
-
-type APIFormProps = {
- actionConfigurationBody: string;
-} & CommonFormProps;
-
-type Props = APIFormProps & InjectedFormProps;
-
-/**
- * Graphql Editor form which uses the Common Editor and pass on the differentiating components from the API Editor.
- * @param props using type Props
- * @returns Graphql Editor Area which is used to editor APIs using GraphQL datasource.
- */
-function GraphQLEditorForm(props: Props) {
- const { actionName } = props;
-
- return (
- }
- formName={API_EDITOR_FORM_NAME}
- httpsMethods={GRAPHQL_HTTP_METHOD_OPTIONS}
- paginationUIComponent={
-
- }
- />
- );
-}
-
-const selector = formValueSelector(API_EDITOR_FORM_NAME);
-
-export default connect(
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (state: AppState, props: { pluginId: string; match?: any }) => {
- const actionConfigurationHeaders =
- selector(state, "actionConfiguration.headers") || [];
- const actionConfigurationParams =
- selector(state, "actionConfiguration.queryParameters") || [];
- let datasourceFromAction = selector(state, "datasource");
-
- if (datasourceFromAction && datasourceFromAction.hasOwnProperty("id")) {
- datasourceFromAction = state.entities.datasources.list.find(
- (d) => d.id === datasourceFromAction.id,
- );
- }
-
- const { baseApiId, baseQueryId } = props.match?.params || {};
- const baseActionId = baseQueryId || baseApiId;
- const action = getActionByBaseId(state, baseActionId);
- const apiId = action?.id ?? "";
- const actionName = action?.name ?? "";
- const hintMessages = action?.messages;
-
- const datasourceHeaders =
- get(datasourceFromAction, "datasourceConfiguration.headers") || [];
- const datasourceParams =
- get(datasourceFromAction, "datasourceConfiguration.queryParameters") ||
- [];
-
- const actionConfigurationBody =
- selector(state, "actionConfiguration.body") || "";
-
- const actionResponse = getActionData(state, apiId);
-
- return {
- actionName,
- actionResponse,
- actionConfigurationHeaders,
- actionConfigurationParams,
- actionConfigurationBody,
- datasourceHeaders,
- datasourceParams,
- hintMessages,
- };
- },
-)(
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- reduxForm({
- form: API_EDITOR_FORM_NAME,
- enableReinitialize: true,
- })(GraphQLEditorForm),
-);
diff --git a/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx b/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx
deleted file mode 100644
index 893fe98c2524..000000000000
--- a/app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import type { InjectedFormProps } from "redux-form";
-import { formValueSelector, reduxForm } from "redux-form";
-import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
-import type { Action } from "entities/Action";
-import PostBodyData from "PluginActionEditor/components/PluginActionForm/components/ApiEditor/PostBodyData";
-import type { AppState } from "ee/reducers";
-import { getApiName } from "selectors/formSelectors";
-import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
-import get from "lodash/get";
-import { getAction, getActionResponses } from "ee/selectors/entitiesSelector";
-import type { CommonFormProps } from "./CommonEditorForm";
-import CommonEditorForm from "./CommonEditorForm";
-import Pagination from "PluginActionEditor/components/PluginActionForm/components/ApiEditor/Pagination";
-import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors";
-import { HTTP_METHOD_OPTIONS } from "PluginActionEditor/constants/CommonApiConstants";
-
-type APIFormProps = {
- httpMethodFromForm: string;
-} & CommonFormProps;
-
-type Props = APIFormProps & InjectedFormProps;
-
-function ApiEditorForm(props: Props) {
- const { actionName } = props;
- const theme = EditorTheme.LIGHT;
-
- return (
-
- }
- formName={API_EDITOR_FORM_NAME}
- httpsMethods={HTTP_METHOD_OPTIONS}
- paginationUIComponent={
-
- }
- />
- );
-}
-
-const selector = formValueSelector(API_EDITOR_FORM_NAME);
-
-export default connect((state: AppState) => {
- const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod");
- const actionConfigurationHeaders =
- selector(state, "actionConfiguration.headers") || [];
- const autoGeneratedActionConfigHeaders =
- selector(state, "actionConfiguration.autoGeneratedHeaders") || [];
- const actionConfigurationParams =
- selector(state, "actionConfiguration.queryParameters") || [];
- let datasourceFromAction = selector(state, "datasource");
-
- if (datasourceFromAction && datasourceFromAction.hasOwnProperty("id")) {
- datasourceFromAction = state.entities.datasources.list.find(
- (d) => d.id === datasourceFromAction.id,
- );
- }
-
- // get messages from action itself
- const actionId = selector(state, "id");
- const action = getAction(state, actionId);
- const currentEnvironment = getCurrentEnvironmentId(state);
- const hintMessages = action?.messages;
-
- const datasourceHeaders =
- get(
- datasourceFromAction,
- `datasourceStorages.${currentEnvironment}.datasourceConfiguration.headers`,
- ) || [];
- const datasourceParams =
- get(
- datasourceFromAction,
- `datasourceStorages.${currentEnvironment}.datasourceConfiguration.queryParameters`,
- ) || [];
-
- const apiId = selector(state, "id");
- const currentActionDatasourceId = selector(state, "datasource.id");
-
- const actionName = getApiName(state, apiId) || "";
-
- const responses = getActionResponses(state);
- const actionResponse = responses[apiId];
-
- return {
- actionName,
- actionResponse,
- apiId,
- httpMethodFromForm,
- actionConfigurationHeaders,
- actionConfigurationParams,
- autoGeneratedActionConfigHeaders,
- currentActionDatasourceId,
- datasourceHeaders,
- datasourceParams,
- hintMessages,
- };
-})(
- reduxForm({
- form: API_EDITOR_FORM_NAME,
- enableReinitialize: true,
- })(ApiEditorForm),
-);
diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
deleted file mode 100644
index 8e97ac8ec2c7..000000000000
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import type { RouteComponentProps } from "react-router";
-
-import {
- getIsActionConverting,
- getPageList,
- getPluginSettingConfigs,
- getPlugins,
-} from "ee/selectors/entitiesSelector";
-import { runAction, saveActionName } from "actions/pluginActionActions";
-import AnalyticsUtil from "ee/utils/AnalyticsUtil";
-import Editor from "./Editor";
-import BackToCanvas from "components/common/BackToCanvas";
-import MoreActionsMenu from "../Explorer/Actions/MoreActionsMenu";
-import {
- getIsEditorInitialized,
- getPagePermissions,
-} from "selectors/editorSelectors";
-import { getActionByBaseId } from "ee/selectors/entitiesSelector";
-import type { APIEditorRouteParams } from "constants/routes";
-import {
- getHasCreateActionPermission,
- getHasDeleteActionPermission,
- getHasManageActionPermission,
-} from "ee/utils/BusinessFeatures/permissionPageHelpers";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { ApiEditorContextProvider } from "./ApiEditorContext";
-import type { PaginationField } from "api/ActionAPI";
-import { get, keyBy } from "lodash";
-import ConvertToModuleInstanceCTA from "ee/pages/Editor/EntityEditor/ConvertToModuleInstanceCTA";
-import { MODULE_TYPE } from "ee/constants/ModuleConstants";
-import Disabler from "pages/common/Disabler";
-import ConvertEntityNotification from "ee/pages/common/ConvertEntityNotification";
-import { Icon } from "@appsmith/ads";
-import { resolveIcon } from "../utils";
-import { ENTITY_ICON_SIZE, EntityIcon } from "../Explorer/ExplorerIcons";
-import { getIDEViewMode } from "selectors/ideSelectors";
-import { EditorViewMode } from "ee/entities/IDE/constants";
-
-type ApiEditorWrapperProps = RouteComponentProps;
-
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getPageName(pages: any, basePageId: string) {
- // TODO: Fix this the next time the file is edited
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const page = pages.find((page: any) => page.basePageId === basePageId);
-
- return page ? page.pageName : "";
-}
-
-function ApiEditorWrapper(props: ApiEditorWrapperProps) {
- const { baseApiId = "", basePageId } = props.match.params;
- const dispatch = useDispatch();
- const isEditorInitialized = useSelector(getIsEditorInitialized);
- const action = useSelector((state) => getActionByBaseId(state, baseApiId));
- const apiName = action?.name || "";
- const pluginId = get(action, "pluginId", "");
- const datasourceId = action?.datasource.id || "";
- const plugins = useSelector(getPlugins);
- const pages = useSelector(getPageList);
- const pageName = getPageName(pages, basePageId);
- const settingsConfig = useSelector((state) =>
- getPluginSettingConfigs(state, pluginId),
- );
- const pagePermissions = useSelector(getPagePermissions);
- const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
- const isConverting = useSelector((state) =>
- getIsActionConverting(state, action?.id || ""),
- );
- const editorMode = useSelector(getIDEViewMode);
- const pluginGroups = useMemo(() => keyBy(plugins, "id"), [plugins]);
- const icon = resolveIcon({
- iconLocation: pluginGroups[pluginId]?.iconLocation || "",
- pluginType: action?.pluginType || "",
- moduleType: action?.actionConfiguration?.body?.moduleType,
- }) || (
-
-
-
- );
-
- const isChangePermitted = getHasManageActionPermission(
- isFeatureEnabled,
- action?.userPermissions,
- );
- const isDeletePermitted = getHasDeleteActionPermission(
- isFeatureEnabled,
- action?.userPermissions,
- );
- const isCreatePermitted = getHasCreateActionPermission(
- isFeatureEnabled,
- pagePermissions,
- );
-
- const moreActionsMenu = useMemo(() => {
- const convertToModuleProps = {
- canCreateModuleInstance: isCreatePermitted,
- canDeleteEntity: isDeletePermitted,
- entityId: action?.id || "",
- moduleType: MODULE_TYPE.QUERY,
- };
-
- return (
- <>
-
- )
- }
- />
- {editorMode !== EditorViewMode.SplitScreen && (
-
- )}
-
- );
- }, [
- action?.id,
- action?.name,
- isChangePermitted,
- isDeletePermitted,
- basePageId,
- isCreatePermitted,
- editorMode,
- ]);
-
- const handleRunClick = useCallback(
- (paginationField?: PaginationField) => {
- const pluginName = plugins.find((plugin) => plugin.id === pluginId)?.name;
-
- AnalyticsUtil.logEvent("RUN_API_CLICK", {
- apiName,
- apiID: action?.id,
- pageName: pageName,
- datasourceId,
- pluginName: pluginName,
- isMock: false, // as mock db exists only for postgres and mongo plugins
- });
- dispatch(runAction(action?.id ?? "", paginationField));
- },
- [action?.id, apiName, pageName, plugins, pluginId, datasourceId, dispatch],
- );
-
- const actionRightPaneBackLink = useMemo(() => {
- return ;
- }, [basePageId]);
-
- const notification = useMemo(() => {
- if (!isConverting) return null;
-
- return ;
- }, [action?.name, isConverting, icon]);
-
- return (
-
-
-
-
-
- );
-}
-
-export default ApiEditorWrapper;
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
index fa0c0f25f28c..565e73551df8 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/JSRender.test.tsx
@@ -1,4 +1,3 @@
-import localStorage from "utils/localStorage";
import { render, waitFor } from "test/testUtils";
import { Route } from "react-router-dom";
import { BUILDER_PATH } from "ee/constants/routes/appRoutes";
@@ -17,7 +16,6 @@ const FeatureFlags = {
const basePageId = "0123456789abcdef00000000";
describe("IDE Render: JS", () => {
- localStorage.setItem("SPLITPANE_ANNOUNCEMENT", "false");
describe("JS Blank State", () => {
it("Renders Fullscreen Blank State", async () => {
const { findByText, getByRole, getByText } = render(
@@ -132,7 +130,7 @@ describe("IDE Render: JS", () => {
},
});
- const { container, getAllByText, getByRole, getByTestId } = render(
+ const { getAllByText, getByRole, getByTestId } = render(
,
@@ -147,13 +145,13 @@ describe("IDE Render: JS", () => {
async () => {
const elements = getAllByText("JSObject1"); // Use the common test ID or selector
- expect(elements).toHaveLength(3); // Wait until there are exactly 3 elements
+ expect(elements).toHaveLength(2); // Wait until there are exactly 2 elements
},
{ timeout: 3000, interval: 500 },
);
- // There will be 3 JSObject1 text (Left pane list, editor tab and Editor form)
- expect(getAllByText("JSObject1").length).toEqual(3);
+ // There will be 2 JSObject1 text (Left pane list and editor tab)
+ expect(getAllByText("JSObject1").length).toEqual(2);
// Left pane active state
expect(
getByTestId("t--entity-item-JSObject1").classList.contains("active"),
@@ -162,13 +160,12 @@ describe("IDE Render: JS", () => {
expect(
getByTestId("t--ide-tab-jsobject1").classList.contains("active"),
).toBe(true);
- // Check if the form is rendered
- expect(container.querySelector(".js-editor-tab")).not.toBeNull();
- // Check if the code and settings tabs is visible
- getByRole("tab", { name: /code/i });
- getByRole("tab", { name: /settings/i });
- // Check if run button is visible
+ // Check toolbar elements
+ getByRole("button", { name: /myFun1/i });
getByRole("button", { name: /run/i });
+ getByTestId("t--js-settings-trigger");
+ getByTestId("t--more-action-trigger");
+
// Check if the Add new button is shown
getByTestId("t--add-item");
});
@@ -190,7 +187,7 @@ describe("IDE Render: JS", () => {
ideView: EditorViewMode.SplitScreen,
});
- const { container, getAllByText, getByRole, getByTestId } = render(
+ const { getAllByText, getByRole, getByTestId } = render(
,
@@ -206,19 +203,17 @@ describe("IDE Render: JS", () => {
getByTestId("t--widgets-editor");
// Check if js is rendered in side by side
- expect(getAllByText("JSObject2").length).toBe(2);
+ expect(getAllByText("JSObject2").length).toBe(1);
// Tabs active state
expect(
getByTestId("t--ide-tab-jsobject2").classList.contains("active"),
).toBe(true);
- // Check if the form is rendered
- expect(container.querySelector(".js-editor-tab")).not.toBeNull();
- // Check if the code and settings tabs is visible
- getByRole("tab", { name: /code/i });
- getByRole("tab", { name: /settings/i });
- // Check if run button is visible
+ // Check toolbar elements
+ getByRole("button", { name: /myFun1/i });
getByRole("button", { name: /run/i });
+ getByTestId("t--more-action-trigger");
+
// Check if the Add new button is shown
getByTestId("t--ide-tabs-add-button");
});
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
index 65314ae7a727..77393a10131f 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/QueryRender.test.tsx
@@ -6,10 +6,8 @@ import { createMessage, EDITOR_PANE_TEXTS } from "ee/constants/messages";
import { BUILDER_PATH } from "ee/constants/routes/appRoutes";
import { EditorEntityTab, EditorViewMode } from "ee/entities/IDE/constants";
import { APIFactory } from "test/factories/Actions/API";
-import localStorage from "utils/localStorage";
import { PostgresFactory } from "test/factories/Actions/Postgres";
import { sagasToRunForTests } from "test/sagas";
-import userEvent from "@testing-library/user-event";
import { getIDETestState } from "test/factories/AppIDEFactoryUtils";
import { PageFactory } from "test/factories/PageFactory";
import { screen, waitFor } from "@testing-library/react";
@@ -22,7 +20,6 @@ const FeatureFlags = {
const basePageId = "0123456789abcdef00000000";
describe("IDE URL rendering of Queries", () => {
- localStorage.setItem("SPLITPANE_ANNOUNCEMENT", "false");
describe("Query Blank State", () => {
it("Renders Fullscreen Blank State", async () => {
const { findByText, getByRole, getByText } = render(
@@ -144,7 +141,7 @@ describe("IDE URL rendering of Queries", () => {
},
});
- const { getAllByText, getByRole, getByTestId } = render(
+ const { getAllByRole, getAllByText, getByRole, getByTestId } = render(
,
@@ -159,13 +156,13 @@ describe("IDE URL rendering of Queries", () => {
async () => {
const elements = getAllByText("Api1"); // Use the common test ID or selector
- expect(elements).toHaveLength(3); // Wait until there are exactly 3 elements
+ expect(elements).toHaveLength(2); // Wait until there are exactly 3 elements
},
{ timeout: 3000, interval: 500 },
);
- // There will be 3 Api1 text (Left pane list, editor tab and Editor form)
- expect(getAllByText("Api1").length).toEqual(3);
+ // There will be 2 Api1 text (Left pane list, editor tab)
+ expect(getAllByText("Api1").length).toEqual(2);
// Left pane active state
expect(
getByTestId("t--entity-item-Api1").classList.contains("active"),
@@ -175,11 +172,11 @@ describe("IDE URL rendering of Queries", () => {
true,
);
// Check if the form is rendered
- getByTestId("t--action-form-API");
+ getByTestId("t--api-editor-form");
// Check if the params tabs is visible
getByRole("tab", { name: /params/i });
// Check if run button is visible
- getByRole("button", { name: /run/i });
+ expect(getAllByRole("button", { name: /run/i })).toHaveLength(2);
// Check if the Add new button is shown
getByTestId("t--add-item");
});
@@ -201,7 +198,7 @@ describe("IDE URL rendering of Queries", () => {
ideView: EditorViewMode.SplitScreen,
});
- const { getAllByText, getByRole, getByTestId } = render(
+ const { getAllByRole, getAllByText, getByTestId } = render(
,
@@ -217,15 +214,15 @@ describe("IDE URL rendering of Queries", () => {
getByTestId("t--widgets-editor");
// Check if api is rendered in side by side
- expect(getAllByText("Api2").length).toBe(2);
+ expect(getAllByText("Api2").length).toBe(1);
// Tabs active state
expect(getByTestId("t--ide-tab-api2").classList.contains("active")).toBe(
true,
);
// Check if the form is rendered
- getByTestId("t--action-form-API");
+ getByTestId("t--api-editor-form");
// Check if run button is visible
- getByRole("button", { name: /run/i });
+ expect(getAllByRole("button", { name: /run/i }).length).toBe(2);
// Check if the Add new button is shown
getByTestId("t--ide-tabs-add-button");
});
@@ -358,12 +355,12 @@ describe("IDE URL rendering of Queries", () => {
async () => {
const elements = getAllByText("Query1"); // Use the common test ID or selector
- expect(elements).toHaveLength(3); // Wait until there are exactly 3 elements
+ expect(elements).toHaveLength(2); // Wait until there are exactly 3 elements
},
{ timeout: 3000, interval: 500 },
);
- // There will be 3 Query1 text (Left pane list, editor tab and Editor form)
- expect(getAllByText("Query1").length).toBe(3);
+ // There will be 2 Query1 text (Left pane list, editor tab)
+ expect(getAllByText("Query1").length).toBe(2);
// Left pane active state
expect(
getByTestId("t--entity-item-Query1").classList.contains("active"),
@@ -372,11 +369,8 @@ describe("IDE URL rendering of Queries", () => {
expect(
getByTestId("t--ide-tab-query1").classList.contains("active"),
).toBe(true);
-
- await userEvent.click(getByRole("tab", { name: "Query" }));
-
// Check if the form is rendered
- getByTestId("t--action-form-DB");
+ getByTestId("t--uqi-editor-form");
// Check if run button is visible
getByRole("button", { name: /run/i });
// Check if the Add new button is shown
@@ -417,16 +411,14 @@ describe("IDE URL rendering of Queries", () => {
getByTestId("t--widgets-editor");
// Check if api is rendered in side by side
- expect(getAllByText("Query2").length).toBe(2);
+ expect(getAllByText("Query2").length).toBe(1);
// Tabs active state
expect(
getByTestId("t--ide-tab-query2").classList.contains("active"),
).toBe(true);
- await userEvent.click(getByRole("tab", { name: "Query" }));
-
// Check if the form is rendered
- getByTestId("t--action-form-DB");
+ getByTestId("t--uqi-editor-form");
// Check if run button is visible
getByRole("button", { name: /run/i });
// Check if the Add new button is shown
@@ -449,7 +441,7 @@ describe("IDE URL rendering of Queries", () => {
},
});
- const { container, getByTestId, getByText } = render(
+ const { getByTestId, getByText } = render(
,
@@ -461,8 +453,6 @@ describe("IDE URL rendering of Queries", () => {
},
);
- screen.logTestingPlaygroundURL(container);
-
// Create options are rendered
getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
getByText("New datasource");
@@ -562,8 +552,8 @@ describe("IDE URL rendering of Queries", () => {
},
);
- // There will be 3 Query1 text (Left pane list, editor tab and Editor form)
- expect(getAllByText("Sheets1").length).toBe(3);
+ // There will be 2 Query1 text (Left pane list, editor tab)
+ expect(getAllByText("Sheets1").length).toBe(2);
// Left pane active state
expect(
getByTestId("t--entity-item-Sheets1").classList.contains("active"),
@@ -573,10 +563,8 @@ describe("IDE URL rendering of Queries", () => {
getByTestId("t--ide-tab-sheets1").classList.contains("active"),
).toBe(true);
- await userEvent.click(getByRole("tab", { name: "Query" }));
-
// Check if the form is rendered
- getByTestId("t--action-form-SAAS");
+ getByTestId("t--uqi-editor-form");
// Check if run button is visible
getByRole("button", { name: /run/i });
// Check if the Add new button is shown
@@ -618,18 +606,16 @@ describe("IDE URL rendering of Queries", () => {
getByTestId("t--widgets-editor");
// Check if api is rendered in side by side
- expect(getAllByText("Sheets2").length).toBe(2);
+ expect(getAllByText("Sheets2").length).toBe(1);
// Tabs active state
expect(
getByTestId("t--ide-tab-sheets2").classList.contains("active"),
).toBe(true);
- await userEvent.click(getByRole("tab", { name: "Query" }));
-
screen.logTestingPlaygroundURL(container);
// Check if the form is rendered
- getByTestId("t--action-form-SAAS");
+ getByTestId("t--uqi-editor-form");
// Check if run button is visible
getByRole("button", { name: /run/i });
// Check if the Add new button is shown
@@ -653,7 +639,7 @@ describe("IDE URL rendering of Queries", () => {
},
});
- const { container, getByTestId, getByText } = render(
+ const { getByTestId, getByText } = render(
,
@@ -665,8 +651,6 @@ describe("IDE URL rendering of Queries", () => {
},
);
- screen.logTestingPlaygroundURL(container);
-
// Create options are rendered
getByText(createMessage(EDITOR_PANE_TEXTS.queries_create_from_existing));
getByText("New datasource");
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx b/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx
deleted file mode 100644
index 54181cab50b4..000000000000
--- a/app/client/src/pages/Editor/IDE/EditorPane/components/Announcement.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { useState } from "react";
-import { AnnouncementModal, Button } from "@appsmith/ads";
-import localStorage, { LOCAL_STORAGE_KEYS } from "utils/localStorage";
-import { SPLITPANE_ANNOUNCEMENT, createMessage } from "ee/constants/messages";
-import { getAssetUrl } from "ee/utils/airgapHelpers";
-import { ASSETS_CDN_URL } from "constants/ThirdPartyConstants";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-
-const Announcement = () => {
- const localStorageFlag =
- localStorage.getItem(LOCAL_STORAGE_KEYS.SPLITPANE_ANNOUNCEMENT) || "true";
- const [show, setShow] = useState(JSON.parse(localStorageFlag));
-
- const tryClickHandler = () => {
- setShow(false);
- localStorage.setItem(LOCAL_STORAGE_KEYS.SPLITPANE_ANNOUNCEMENT, "false");
- };
-
- const learnClickHandler = () => {
- window.open(
- "https://community.appsmith.com/content/blog/discover-ide-20-building-more-efficient-ide",
- "_blank",
- );
- };
-
- const featureIsOutOfBeta = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
-
- const modalFooter = () => (
- <>
-
-
-
- );
-
- // If the feature is out of beta, don't show the announcement
- if (featureIsOutOfBeta) {
- return null;
- }
-
- return (
-
- );
-};
-
-export { Announcement };
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx
index 2fdf6d83369b..507c72cdc623 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/Editortabs.test.tsx
@@ -15,7 +15,6 @@ const FeatureFlags = {
};
describe("EditorTabs render checks", () => {
- localStorage.setItem("SPLITPANE_ANNOUNCEMENT", "false");
const page = PageFactory.build();
const renderComponent = (url: string, state: Partial) =>
diff --git a/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx b/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
index 0f07bf982c06..00deacf7bec2 100644
--- a/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorTabs/index.tsx
@@ -17,7 +17,6 @@ import Container from "./Container";
import { useCurrentEditorState, useIDETabClickHandlers } from "../hooks";
import { SCROLL_AREA_OPTIONS, TabSelectors } from "./constants";
import { AddButton } from "./AddButton";
-import { Announcement } from "../EditorPane/components/Announcement";
import { useLocation } from "react-router";
import { identifyEntityFromPath } from "navigation/FocusEntity";
import { List } from "./List";
@@ -162,9 +161,6 @@ const EditorTabs = () => {
{isListViewActive && ideViewMode === EditorViewMode.SplitScreen && (
)}
-
- {/* Announcement modal */}
- {ideViewMode === EditorViewMode.SplitScreen && }
);
};
diff --git a/app/client/src/pages/Editor/IDE/hooks.ts b/app/client/src/pages/Editor/IDE/hooks.ts
index 6d356af8626b..ccfe8c31e57c 100644
--- a/app/client/src/pages/Editor/IDE/hooks.ts
+++ b/app/client/src/pages/Editor/IDE/hooks.ts
@@ -31,8 +31,6 @@ import { useEditorType } from "ee/hooks";
import { useParentEntityInfo } from "ee/hooks/datasourceEditorHooks";
import { useBoolean } from "usehooks-ts";
import { isWidgetActionConnectionPresent } from "selectors/onboardingSelectors";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import localStorage, { LOCAL_STORAGE_KEYS } from "utils/localStorage";
export const useCurrentEditorState = () => {
@@ -212,12 +210,8 @@ export const useShowSideBySideNudge: () => [boolean, () => void] = () => {
LOCAL_STORAGE_KEYS.NUDGE_SHOWN_SPLIT_PANE,
);
- const isActionRedesignEnabled = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
-
const { setFalse, value } = useBoolean(
- widgetBindingsExist && isActionRedesignEnabled && !localStorageFlag,
+ widgetBindingsExist && !localStorageFlag,
);
const dismissNudge = useCallback(() => {
diff --git a/app/client/src/pages/Editor/JSEditor/Form.tsx b/app/client/src/pages/Editor/JSEditor/Form.tsx
index 68028eb4ebaf..1cc944e0226c 100644
--- a/app/client/src/pages/Editor/JSEditor/Form.tsx
+++ b/app/client/src/pages/Editor/JSEditor/Form.tsx
@@ -55,14 +55,14 @@ import {
type JSActionDropdownOption,
convertJSActionToDropdownOption,
getJSActionOption,
+ type OnUpdateSettingsProps,
} from "./JSEditorToolbar";
-import type { JSFunctionSettingsProps } from "./JSEditorToolbar/components/old/JSFunctionSettings";
interface JSFormProps {
jsCollectionData: JSCollectionData;
contextMenu: React.ReactNode;
showSettings?: boolean;
- onUpdateSettings: JSFunctionSettingsProps["onUpdateSettings"];
+ onUpdateSettings: (props: OnUpdateSettingsProps) => void;
saveJSObjectName: JSObjectNameEditorProps["saveJSObjectName"];
backLink?: React.ReactNode;
hideContextMenuOnEditor?: boolean;
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx
index 801b41e6ab2a..27fc6be61268 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorContextMenu.tsx
@@ -12,8 +12,6 @@ import {
MenuTrigger,
Text,
} from "@appsmith/ads";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
export interface ContextMenuOption {
id?: string;
@@ -37,10 +35,6 @@ export function JSEditorContextMenu({
onMenuClose,
options,
}: EntityContextMenuProps) {
- const isActionRedesignEnabled = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
-
if (options.length === 0) {
return null;
}
@@ -59,8 +53,8 @@ export function JSEditorContextMenu({
data-testid="t--more-action-trigger"
isIconButton
kind="tertiary"
- size={isActionRedesignEnabled ? "sm" : "md"}
- startIcon={isActionRedesignEnabled ? "more-2-fill" : "context-menu"}
+ size={"sm"}
+ startIcon={"more-2-fill"}
/>
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
index b7ab3ad48447..ec3b5865022d 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorForm/JSEditorForm.tsx
@@ -1,7 +1,5 @@
import React from "react";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import type { JSEditorTab } from "reducers/uiReducers/jsPaneReducer";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
import {
type BlockCompletion,
CodeEditorBorder,
@@ -12,7 +10,6 @@ import {
} from "components/editorComponents/CodeEditor/EditorConfig";
import type { CodeEditorGutter } from "components/editorComponents/CodeEditor";
import type { JSAction, JSCollection } from "entities/JSCollection";
-import { OldJSEditorForm } from "./old/JSEditorForm";
import type { OnUpdateSettingsProps } from "../JSEditorToolbar";
import LazyCodeEditor from "components/editorComponents/LazyCodeEditor";
import { Flex } from "@appsmith/ads";
@@ -33,29 +30,6 @@ interface Props {
}
export const JSEditorForm = (props: Props) => {
- const isActionRedesignEnabled = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
-
- if (!isActionRedesignEnabled) {
- return (
-
- );
- }
-
return (
void;
- value: JSEditorTab;
- showSettings: undefined | boolean;
- blockCompletions: Array;
- customGutter: CodeEditorGutter;
- currentJSCollection: JSCollection;
- changePermitted: boolean;
- onChange: (valueOrEvent: React.ChangeEvent | string) => void;
- theme: EditorTheme.LIGHT;
- actions: JSAction[];
- onUpdateSettings?: (props: OnUpdateSettingsProps) => void;
-}
-
-export function OldJSEditorForm(props: Props) {
- return (
-
-
-
-
- Code
-
- {props.showSettings && (
-
- Settings
-
- )}
-
-
-
-
-
-
- {props.showSettings && (
-
-
-
-
-
- )}
-
-
- );
-}
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.test.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.test.tsx
index 99efd4a252c4..dd8a655d2ed5 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.test.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.test.tsx
@@ -34,17 +34,7 @@ const defaultProps = {
};
describe("JSEditorToolbar", () => {
- it("renders JSHeader when action redesign is disabled", () => {
- mockUseFeatureFlag.mockReturnValue(false);
- render();
- // Old header shows the name of the JS object
- // since we don't provide the name via props, it has the placeholder text
- expect(
- screen.getByText("Name of the JS Object in camelCase"),
- ).toBeInTheDocument();
- });
-
- it("renders IDEToolbar with JSFunctionRun and JSFunctionSettings when action redesign is enabled", () => {
+ it("renders IDEToolbar with JSFunctionRun and JSFunctionSettings", () => {
mockUseFeatureFlag.mockReturnValue(true);
render();
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
index 10fd5f3f9f09..e48a11848870 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
@@ -1,17 +1,13 @@
import React, { useState } from "react";
import { IDEToolbar, ToolbarSettingsPopover } from "IDE";
import { JSFunctionRun } from "./components/JSFunctionRun";
-import type { JSActionDropdownOption } from "./types";
+import type { JSActionDropdownOption, OnUpdateSettingsProps } from "./types";
import type { SaveActionNameParams } from "PluginActionEditor";
import type { ReduxAction } from "actions/ReduxActionTypes";
import type { JSAction, JSCollection } from "entities/JSCollection";
import type { DropdownOnSelect } from "@appsmith/ads-old";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import { createMessage, JS_EDITOR_SETTINGS } from "ee/constants/messages";
-import { JSHeader } from "./JSHeader";
import { JSFunctionSettings } from "./components/JSFunctionSettings";
-import type { JSFunctionSettingsProps } from "./components/old/JSFunctionSettings";
import { convertJSActionsToDropdownOptions } from "./utils";
import { JSObjectNameEditor } from "./JSObjectNameEditor";
@@ -33,7 +29,7 @@ interface Props {
onSelect: DropdownOnSelect;
jsActions: JSAction[];
selected: JSActionDropdownOption;
- onUpdateSettings: JSFunctionSettingsProps["onUpdateSettings"];
+ onUpdateSettings: (props: OnUpdateSettingsProps) => void;
showNameEditor?: boolean;
showSettings: boolean;
}
@@ -41,23 +37,12 @@ interface Props {
/**
* JSEditorToolbar component.
*
- * This component renders a toolbar for the JS editor. It conditionally renders
- * different components based on the `release_actions_redesign_enabled` feature flag.
+ * This component renders a toolbar for the JS editor.
*
*/
export const JSEditorToolbar = (props: Props) => {
- // Check if the action redesign feature flag is enabled
- const isActionRedesignEnabled = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
-
const [isOpen, setIsOpen] = useState(false);
- // If the action redesign is not enabled, render the JSHeader component
- if (!isActionRedesignEnabled) {
- return ;
- }
-
// Render the IDEToolbar with JSFunctionRun and JSFunctionSettings components
return (
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSHeader.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSHeader.tsx
deleted file mode 100644
index adff92647f4a..000000000000
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSHeader.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import { JSFunctionRun } from "./components/JSFunctionRun";
-import type { JSActionDropdownOption } from "./types";
-import { ActionButtons, NameWrapper, StyledFormRow } from "../styledComponents";
-import type { SaveActionNameParams } from "PluginActionEditor";
-import type { ReduxAction } from "actions/ReduxActionTypes";
-import type { JSAction, JSCollection } from "entities/JSCollection";
-import type { DropdownOnSelect } from "@appsmith/ads-old";
-import { JSObjectNameEditor } from "./JSObjectNameEditor";
-import { Flex } from "@appsmith/ads";
-import { convertJSActionsToDropdownOptions } from "./utils";
-
-interface Props {
- changePermitted: boolean;
- hideEditIconOnEditor?: boolean;
- saveJSObjectName: (
- params: SaveActionNameParams,
- ) => ReduxAction;
- hideContextMenuOnEditor?: boolean;
- contextMenu: React.ReactNode;
- disableRunFunctionality: boolean;
- executePermitted: boolean;
- loading: boolean;
- jsCollection: JSCollection;
- onButtonClick: (
- event: React.MouseEvent | KeyboardEvent,
- ) => void;
- onSelect: DropdownOnSelect;
- jsActions: JSAction[];
- selected: JSActionDropdownOption;
-}
-
-export const JSHeader = (props: Props) => {
- return (
-
-
-
-
-
-
- {!props.hideContextMenuOnEditor && props.contextMenu}
-
-
-
-
- );
-};
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSObjectNameEditor/JSObjectNameEditor.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSObjectNameEditor/JSObjectNameEditor.tsx
index 8b573866d645..5748a2a9a598 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSObjectNameEditor/JSObjectNameEditor.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSObjectNameEditor/JSObjectNameEditor.tsx
@@ -1,7 +1,5 @@
import React, { useCallback, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
import type { ReduxAction } from "actions/ReduxActionTypes";
import { getSavingStatusForJSObjectName } from "selectors/actionSelectors";
import { getAssetUrl } from "ee/utils/airgapHelpers";
@@ -14,7 +12,6 @@ import {
getJsCollectionByBaseId,
getPlugin,
} from "ee/selectors/entitiesSelector";
-import { JSObjectNameEditor as OldJSObjectNameEditor } from "./old/JSObjectNameEditor";
import { EditableName, useIsRenaming } from "IDE";
export interface SaveActionNameParams {
@@ -102,10 +99,6 @@ export const JSObjectNameEditor = ({
[currentJSObjectConfig, saveJSObjectName],
);
- const isActionRedesignEnabled = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
-
const icon = useMemo(() => {
if (!currentPlugin) return null;
@@ -119,15 +112,6 @@ export const JSObjectNameEditor = ({
);
}, [currentPlugin]);
- if (!isActionRedesignEnabled) {
- return (
-
- );
- }
-
return (
ReduxAction;
-}
-
-export function JSObjectNameEditor(props: JSObjectNameEditorProps) {
- const params = useParams<{
- baseCollectionId?: string;
- baseQueryId?: string;
- }>();
-
- const currentJSObjectConfig = useSelector((state: AppState) =>
- getJsCollectionByBaseId(state, params.baseCollectionId || ""),
- );
-
- const currentPlugin = useSelector((state: AppState) =>
- getPlugin(state, currentJSObjectConfig?.pluginId || ""),
- );
-
- const saveStatus = useSelector((state) =>
- getSavingStatusForJSObjectName(state, currentJSObjectConfig?.id || ""),
- );
-
- return (
-
- {({
- forceUpdate,
- handleNameChange,
- isInvalidNameForEntity,
- isNew,
- saveStatus,
- }: {
- forceUpdate: boolean;
- handleNameChange: (value: string) => void;
- isInvalidNameForEntity: (value: string) => string | boolean;
- isNew: boolean;
- saveStatus: { isSaving: boolean; error: boolean };
- }) => (
-
-
- {currentPlugin && (
-
-
-
- )}
-
-
-
- )}
-
- );
-}
-
-export default JSObjectNameEditor;
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.test.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.test.tsx
deleted file mode 100644
index 5be884df8a7d..000000000000
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.test.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "test/testUtils";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { JSObjectFactory } from "test/factories/Actions/JSObject";
-
-import { convertJSActionsToDropdownOptions } from "../utils";
-import { JSFunctionRun } from "./JSFunctionRun";
-import { JS_FUNCTION_RUN_NAME_LENGTH } from "./constants";
-
-jest.mock("utils/hooks/useFeatureFlag");
-const mockUseFeatureFlag = useFeatureFlag as jest.Mock;
-
-const JSObject = JSObjectFactory.build();
-
-const mockProps = {
- disabled: false,
- isLoading: false,
- jsCollection: JSObject,
- onButtonClick: jest.fn(),
- onSelect: jest.fn(),
- options: convertJSActionsToDropdownOptions(JSObject.actions),
- selected: {
- label: JSObject.actions[0].name,
- value: JSObject.actions[0].name,
- data: JSObject.actions[0],
- },
- showTooltip: false,
-};
-
-describe("JSFunctionRun", () => {
- it("renders OldJSFunctionRun when feature flag is disabled", () => {
- mockUseFeatureFlag.mockReturnValue(false);
- render();
- expect(screen.getByText("myFun1")).toBeInTheDocument();
- expect(screen.getByRole("button", { name: "Run" })).toBeInTheDocument();
- });
-
- it("renders new JSFunctionRun when feature flag is enabled", () => {
- mockUseFeatureFlag.mockReturnValue(true);
- render();
- // Assert the Function select is a popup menu
- expect(screen.getByText("myFun1")).toBeInTheDocument();
- expect(screen.getByRole("button", { name: "myFun1" })).toHaveAttribute(
- "aria-haspopup",
- "menu",
- );
- });
-
- // This test is skipped because menu does not open in the test environment
- // eslint-disable-next-line jest/no-disabled-tests
- it.skip("calls onSelect when a menu item is selected", () => {
- mockUseFeatureFlag.mockReturnValue(true);
- render();
- // click the button to open the menu
- fireEvent.click(screen.getByRole("button", { name: "myFun1" }));
-
- fireEvent.click(screen.getByText("myFun2"));
- expect(mockProps.onSelect).toHaveBeenCalledWith("myFun2");
- });
-
- it("disables the button when props.disabled is true", () => {
- mockUseFeatureFlag.mockReturnValue(true);
- render();
- expect(screen.getByRole("button", { name: "myFun1" })).toBeDisabled();
- });
-
- // This test is skipped because tooltip does not show in the test environment
- // eslint-disable-next-line jest/no-disabled-tests
- it.skip("shows tooltip when showTooltip is true", () => {
- mockUseFeatureFlag.mockReturnValue(true);
- render();
- fireEvent.mouseOver(screen.getByText("Run"));
- expect(
- screen.getByText("No JS function to run in TestCollection"),
- ).toBeInTheDocument();
- });
-
- it("calls onButtonClick when run button is clicked", () => {
- mockUseFeatureFlag.mockReturnValue(true);
- render();
- fireEvent.click(screen.getByText("Run"));
- expect(mockProps.onButtonClick).toHaveBeenCalled();
- });
-
- it("truncates long names to 30 characters", () => {
- mockUseFeatureFlag.mockReturnValue(true);
- const options = [
- {
- label:
- "aReallyReallyLongFunctionNameThatConveysALotOfMeaningAndCannotBeShortenedAtAllBecauseItConveysALotOfMeaningAndCannotBeShortened",
- value: "1",
- },
- ];
- const [selected] = options;
- const jsCollection = { name: "CollectionName" };
- const params = { options, selected, jsCollection } as Parameters<
- typeof JSFunctionRun
- >[0];
-
- render();
-
- expect(screen.getByTestId("t--js-function-run").textContent?.length).toBe(
- JS_FUNCTION_RUN_NAME_LENGTH,
- );
- });
-});
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx
index 7f644567c6a1..bf6f174d3f1f 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx
@@ -1,9 +1,6 @@
import React, { useCallback } from "react";
import { truncate } from "lodash";
-import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
-import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
-import { JSFunctionRun as OldJSFunctionRun } from "./old/JSFunctionRun";
import type { JSCollection } from "entities/JSCollection";
import {
Button,
@@ -37,9 +34,6 @@ interface Props {
*/
export const JSFunctionRun = (props: Props) => {
const { onSelect } = props;
- const isActionRedesignEnabled = useFeatureFlag(
- FEATURE_FLAG.release_actions_redesign_enabled,
- );
// Callback function to handle function selection from the dropdown menu
const onFunctionSelect = useCallback(
@@ -51,11 +45,6 @@ export const JSFunctionRun = (props: Props) => {
[onSelect],
);
- if (!isActionRedesignEnabled) {
- return ;
- }
-
- // Render the new version of the component
return (