fix: add max length to js run function name (#38363)

## Description
Fixes issue where JS run function name can take up too much space in
toolbar.

Fixes #38150 

## Automation

/ok-to-test tags="@tag.IDE"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12491948782>
> Commit: c11b60d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12491948782&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Wed, 25 Dec 2024 10:35:52 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a character limit for function names in the `JSFunctionRun`
component, ensuring names are truncated to a maximum of 30 characters
for improved UI consistency.

- **Bug Fixes**
- Added a test case to verify that function names exceeding the
character limit are correctly truncated.

- **Documentation**
	- Updated constants to define the maximum length for function names.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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;