update toolbar division

appsmithorg · Oct 22, 2024 · 0d96ee5 · 0d96ee5
1 parent b53f6d6
commit 0d96ee5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 30 deletions.
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/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>
   );
 };