fix: add max length to js run function name

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.test.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 import "@testing-library/jest-dom";
 import { render, screen, fireEvent } from "test/testUtils";
-import { JSFunctionRun } from "./JSFunctionRun";
 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;
@@ -80,4 +82,26 @@ describe("JSFunctionRun", () => {
     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(<JSFunctionRun {...params} />);
+
+    expect(screen.getByTestId("t--js-function-run").textContent?.length).toBe(
+      JS_FUNCTION_RUN_NAME_LENGTH,
+    );
+  });
 });

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx

@@ -1,4 +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";
@@ -15,6 +17,7 @@ import type { JSActionDropdownOption } from "../types";
 import { RUN_BUTTON_DEFAULTS, testLocators } from "../constants";
 import { createMessage, NO_JS_FUNCTION_TO_RUN } from "ee/constants/messages";
 import { JSFunctionItem } from "./JSFunctionItem";
+import { JS_FUNCTION_RUN_NAME_LENGTH } from "./constants";
 
 interface Props {
   disabled: boolean;
@@ -34,7 +37,6 @@ interface Props {
  */
 export const JSFunctionRun = (props: Props) => {
   const { onSelect } = props;
-
   const isActionRedesignEnabled = useFeatureFlag(
     FEATURE_FLAG.release_actions_redesign_enabled,
   );
@@ -66,7 +68,9 @@ export const JSFunctionRun = (props: Props) => {
             size="sm"
             startIcon="js-function"
           >
-            {props.selected.label}
+            {truncate(props.selected.label, {
+              length: JS_FUNCTION_RUN_NAME_LENGTH,
+            })}
           </Button>
         </MenuTrigger>
         {!!props.options.length && (

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/constants.ts

@@ -0,0 +1,2 @@
+/** Maximum length of run function name, after which it will be truncated. */
+export const JS_FUNCTION_RUN_NAME_LENGTH = 30;