chore: Update JS Editor Run designs (#36998)

## Description - Update the icons in ADS - Override the Menu Title text styles ## Automation /ok-to-test tags="@tag.JS" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/11440728547> > Commit: 1df24c6 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11440728547&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.JS` > Spec: > <hr>Mon, 21 Oct 2024 13:43:16 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit - **New Features** - Introduced a new styled component, `MenuTitle`, for improved dropdown menu item labeling. - Enhanced the `JSFunctionRun` component with a new button icon and improved function selection handling. - **Bug Fixes** - Updated the callback function to ensure it correctly responds to changes in the `onSelect` prop.
appsmithorg · Oct 23, 2024 · 203b322 · 203b322
1 parent a8da0e1
commit 203b322
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 53 deletions.
diff --git a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import React from "react";
 import { importRemixIcon, importSvg } from "./loadables";
+
 const AddMoreIcon = importRemixIcon(
   async () => import("remixicon-react/AddCircleLineIcon"),
 );
@@ -1063,6 +1064,10 @@ const MaximizeV3Icon = importSvg(
   async () => import("../__assets__/icons/ads/maximize-v3-icon.svg"),
 );
 
+const ExternalLinkIcon = importRemixIcon(
+  async () => import("remixicon-react/ExternalLinkLineIcon"),
+);
+
 import PlayIconPNG from "../__assets__/icons/control/play-icon.png";
 
 function PlayIconPNGWrapper() {
@@ -1211,6 +1216,7 @@ const ICON_LOOKUP = {
   "link-2": Link2,
   "link-unlink": LinkUnlinkIcon,
   "links-line": LinksLineIcon,
+  "external-link-line": ExternalLinkIcon,
   "lock-2-line": Lock2LineIcon,
   "lock-password-line": LockPasswordLineIcon,
   "lock-unlock-line": LockUnlockLineIcon,

diff --git a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
@@ -15,6 +15,7 @@ interface Props {
   title: string;
   children: React.ReactNode;
   dataTestId?: string;
+  disabled?: boolean;
 }
 
 const Variables = css`
@@ -43,6 +44,7 @@ export const ToolbarSettingsPopover = (props: Props) => {
       <PopoverTrigger>
         <ToggleButton
           data-testId={props.dataTestId}
+          disabled={props.disabled}
           icon="settings-2-line"
           isSelected={isOpen}
           onClick={handleButtonClick}

diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx
@@ -12,7 +12,7 @@ const PluginActionForm = () => {
   const { plugin } = usePluginActionContext();
 
   return (
-    <Flex flex="1" overflow="hidden" p="spaces-2" w="100%">
+    <Flex flex="1" overflow="hidden" p="spaces-4" w="100%">
       {plugin.uiComponent === UIComponentTypes.ApiEditorForm && (
         <APIEditorForm />
       )}

diff --git a/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx b/app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx
@@ -88,7 +88,7 @@ const PluginActionSettingsPopover = (props: SettingsProps) => {
         {props.docsLink && (
           <LearnMoreLink
             className="t--action-settings-documentation-link"
-            endIcon="share-box-line"
+            endIcon="external-link-line"
             kind="secondary"
             onClick={handleLearnMoreClick}
           >

diff --git a/app/client/src/assets/icons/menu/js-function.svg b/app/client/src/assets/icons/menu/js-function.svg
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx b/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}

diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionItem.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionItem.tsx
@@ -0,0 +1,22 @@
+import React, { useCallback } from "react";
+import { MenuItem } from "@appsmith/ads";
+import type { JSActionDropdownOption } from "../types";
+import * as Styled from "./styles";
+
+export const JSFunctionItem = ({
+  onSelect,
+  option,
+}: {
+  option: JSActionDropdownOption;
+  onSelect: (option: JSActionDropdownOption) => void;
+}) => {
+  const onFunctionSelect = useCallback(() => {
+    onSelect(option);
+  }, [onSelect, option]);
+
+  return (
+    <MenuItem onSelect={onFunctionSelect} size="sm">
+      <Styled.MenuTitle>{option.label}</Styled.MenuTitle>
+    </MenuItem>
+  );
+};
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionRun.tsx b/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>

diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.test.tsx b/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);
 

diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx b/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>
   );
 };
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/styles.ts b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/styles.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;
+`;