chore: Update JS Editor Run designs

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { IDEToolbar } from "IDE";
+import React, { useState } from "react";
+import { IDEToolbar, ToolbarSettingsPopover } from "IDE";
 import { JSFunctionRun } from "./components/JSFunctionRun";
 import type { JSActionDropdownOption } from "./types";
 import type { SaveActionNameParams } from "PluginActionEditor";
@@ -8,6 +8,7 @@ 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";
@@ -48,6 +49,8 @@ export const JSEditorToolbar = (props: Props) => {
     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 <JSHeader {...props} />;
@@ -71,11 +74,18 @@ export const JSEditorToolbar = (props: Props) => {
           />
         </div>
         {props.showSettings ? (
-          <JSFunctionSettings
-            actions={props.jsActions}
-            disabled={!props.changePermitted}
-            onUpdateSettings={props.onUpdateSettings}
-          />
+          <ToolbarSettingsPopover
+            dataTestId={"t--js-editor-SETTINGS"}
+            handleOpenChange={setIsOpen}
+            isOpen={isOpen}
+            title={createMessage(JS_EDITOR_SETTINGS.TITLE)}
+          >
+            <JSFunctionSettings
+              actions={props.jsActions}
+              disabled={!props.changePermitted}
+              onUpdateSettings={props.onUpdateSettings}
+            />
+          </ToolbarSettingsPopover>
         ) : null}
 
         {props.hideContextMenuOnEditor ? null : props.contextMenu}

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

@@ -0,0 +1,22 @@
+import type { JSActionDropdownOption } from "../types";
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import { MenuTitle } from "./styled";
+
+export const JSFunctionItem = ({
+  onSelect,
+  option,
+}: {
+  option: JSActionDropdownOption;
+  onSelect: (option: JSActionDropdownOption) => void;
+}) => {
+  const onFunctionSelect = useCallback(() => {
+    onSelect(option);
+  }, [onSelect, option]);
+
+  return (
+    <MenuItem onSelect={onFunctionSelect} size="sm">
+      <MenuTitle>{option.label}</MenuTitle>
+    </MenuItem>
+  );
+};

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

@@ -8,13 +8,13 @@ import {
   Flex,
   Menu,
   MenuContent,
-  MenuItem,
   MenuTrigger,
   Tooltip,
 } from "@appsmith/ads";
 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";
 
 interface Props {
   disabled: boolean;
@@ -33,16 +33,21 @@ 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((option: JSActionDropdownOption) => {
-    if (props.onSelect) {
-      props.onSelect(option.value);
-    }
-  }, []);
+  const onFunctionSelect = useCallback(
+    (option: JSActionDropdownOption) => {
+      if (onSelect) {
+        onSelect(option.value);
+      }
+    },
+    [onSelect],
+  );
 
   if (!isActionRedesignEnabled) {
     return <OldJSFunctionRun {...props} />;
@@ -58,20 +63,18 @@ export const JSFunctionRun = (props: Props) => {
             isDisabled={props.disabled}
             kind="tertiary"
             size="sm"
-            startIcon=""
+            startIcon="js-function"
           >
             {props.selected.label}
           </Button>
         </MenuTrigger>
         <MenuContent align="end">
           {props.options.map((option) => (
-            <MenuItem
+            <JSFunctionItem
               key={option.label}
-              onSelect={() => onFunctionSelect(option)}
-              size="sm"
-            >
-              {option.label}
-            </MenuItem>
+              onSelect={onFunctionSelect}
+              option={option}
+            />
           ))}
         </MenuContent>
       </Menu>

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

@@ -1,6 +1,6 @@
 import React from "react";
 import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "test/testUtils";
+import { render, screen } from "test/testUtils";
 import { JSFunctionSettings } from "./JSFunctionSettings";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { JSObjectFactory } from "test/factories/Actions/JSObject";
@@ -31,8 +31,6 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button"));
-
     expect(screen.getByLabelText(actions[0].name)).toBeDisabled();
   });
 
@@ -47,8 +45,6 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button"));
-
     expect(screen.getAllByRole("switch")).toHaveLength(actions.length);
   });
 
@@ -74,8 +70,6 @@ describe("JSFunctionSettings", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button"));
-
     const switchElement1 = screen.getByLabelText(updatedJSActions[0].name);
     const switchElement2 = screen.getByLabelText(updatedJSActions[1].name);
 

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

@@ -8,7 +8,6 @@ import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 import { createMessage, JS_EDITOR_SETTINGS } from "ee/constants/messages";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
-import { ToolbarSettingsPopover } from "IDE";
 
 interface Props {
   disabled: boolean;
@@ -73,8 +72,6 @@ export const JSFunctionSettings = (props: Props) => {
     FEATURE_FLAG.release_actions_redesign_enabled,
   );
 
-  const [isOpen, setIsOpen] = useState(false);
-
   // If the feature flag is disabled, render the old version of the component
   if (!isActionRedesignEnabled) {
     return (
@@ -88,25 +85,18 @@ export const JSFunctionSettings = (props: Props) => {
 
   // Render the new version of the component
   return (
-    <ToolbarSettingsPopover
-      dataTestId={"t--js-editor-SETTINGS"}
-      handleOpenChange={setIsOpen}
-      isOpen={isOpen}
-      title={createMessage(JS_EDITOR_SETTINGS.TITLE)}
-    >
-      <Flex flexDirection="column" gap="spaces-4" w="100%">
-        <Text kind="heading-xs">
-          {createMessage(JS_EDITOR_SETTINGS.ON_LOAD_TITLE)}
-        </Text>
-        {props.actions.map((action) => (
-          <FunctionSettingRow
-            action={action}
-            disabled={props.disabled}
-            key={action.id}
-            onUpdateSettings={props.onUpdateSettings}
-          />
-        ))}
-      </Flex>
-    </ToolbarSettingsPopover>
+    <Flex flexDirection="column" gap="spaces-4" w="100%">
+      <Text kind="heading-xs">
+        {createMessage(JS_EDITOR_SETTINGS.ON_LOAD_TITLE)}
+      </Text>
+      {props.actions.map((action) => (
+        <FunctionSettingRow
+          action={action}
+          disabled={props.disabled}
+          key={action.id}
+          onUpdateSettings={props.onUpdateSettings}
+        />
+      ))}
+    </Flex>
   );
 };

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

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { Text } from "@appsmith/ads";
+
+export const MenuTitle = styled(Text)`
+  --button-font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 30ch;
+`;