chore: Moving action settings from editor form to toolbar

app/client/src/PluginActionEditor/components/PluginActionForm/PluginActionForm.tsx

@@ -19,10 +19,10 @@ const PluginActionForm = () => {
       {plugin.uiComponent === UIComponentTypes.GraphQLEditorForm && (
         <GraphQLEditorForm />
       )}
-      {plugin.uiComponent === UIComponentTypes.DbEditorForm ||
-        (plugin.uiComponent === UIComponentTypes.UQIDbEditorForm && (
-          <UQIEditorForm />
-        ))}
+      {(plugin.uiComponent === UIComponentTypes.DbEditorForm ||
+        plugin.uiComponent === UIComponentTypes.UQIDbEditorForm) && (
+        <UQIEditorForm />
+      )}
     </Flex>
   );
 };

app/client/src/PluginActionEditor/components/PluginActionForm/components/APIEditorForm.tsx

@@ -15,8 +15,6 @@ import {
   useAnalyticsOnRunClick,
 } from "PluginActionEditor/hooks";
 
-const FORM_NAME = API_EDITOR_FORM_NAME;
-
 const APIEditorForm = () => {
   const { action } = usePluginActionContext();
   const { handleRunClick } = useHandleRunClick();
@@ -43,7 +41,7 @@ const APIEditorForm = () => {
           theme={EditorTheme.LIGHT}
         />
       }
-      formName={FORM_NAME}
+      formName={API_EDITOR_FORM_NAME}
       httpMethodOptions={HTTP_METHOD_OPTIONS}
       isChangePermitted={isChangePermitted}
       paginationUiComponent={
@@ -58,6 +56,7 @@ const APIEditorForm = () => {
   );
 };
 
-export default reduxForm({ form: FORM_NAME, enableReinitialize: true })(
-  APIEditorForm,
-);
+export default reduxForm({
+  form: API_EDITOR_FORM_NAME,
+  enableReinitialize: true,
+})(APIEditorForm);

app/client/src/PluginActionEditor/components/PluginActionForm/components/GraphQLEditor/GraphQLEditorForm.tsx

@@ -12,8 +12,6 @@ import { getHasManageActionPermission } from "ee/utils/BusinessFeatures/permissi
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 import useGetFormActionValues from "../CommonEditorForm/hooks/useGetFormActionValues";
 
-const FORM_NAME = API_EDITOR_FORM_NAME;
-
 function GraphQLEditorForm() {
   const { action } = usePluginActionContext();
   const theme = EditorTheme.LIGHT;
@@ -30,13 +28,13 @@ function GraphQLEditorForm() {
     <CommonEditorForm
       action={action}
       bodyUIComponent={<PostBodyData actionName={action.name} />}
-      formName={FORM_NAME}
+      formName={API_EDITOR_FORM_NAME}
       httpMethodOptions={GRAPHQL_HTTP_METHOD_OPTIONS}
       isChangePermitted={isChangePermitted}
       paginationUiComponent={
         <Pagination
           actionName={action.name}
-          formName={FORM_NAME}
+          formName={API_EDITOR_FORM_NAME}
           paginationType={action.actionConfiguration.paginationType}
           query={actionConfigurationBody}
           theme={theme}
@@ -46,6 +44,7 @@ function GraphQLEditorForm() {
   );
 }
 
-export default reduxForm({ form: FORM_NAME, enableReinitialize: true })(
-  GraphQLEditorForm,
-);
+export default reduxForm({
+  form: API_EDITOR_FORM_NAME,
+  enableReinitialize: true,
+})(GraphQLEditorForm);

app/client/src/PluginActionEditor/components/PluginActionSettings/ApiSettings.tsx

@@ -0,0 +1,10 @@
+import { API_EDITOR_FORM_NAME } from "ee/constants/forms";
+import { reduxForm } from "redux-form";
+import PluginActionSettingsPopover, {
+  type SettingsProps,
+} from "./SettingsPopover";
+
+export default reduxForm<unknown, SettingsProps>({
+  form: API_EDITOR_FORM_NAME,
+  enableReinitialize: true,
+})(PluginActionSettingsPopover);

app/client/src/PluginActionEditor/components/PluginActionSettings/QuerySettings.tsx

@@ -0,0 +1,10 @@
+import { QUERY_EDITOR_FORM_NAME } from "ee/constants/forms";
+import { reduxForm } from "redux-form";
+import PluginActionSettingsPopover, {
+  type SettingsProps,
+} from "./SettingsPopover";
+
+export default reduxForm<unknown, SettingsProps>({
+  form: QUERY_EDITOR_FORM_NAME,
+  enableReinitialize: true,
+})(PluginActionSettingsPopover);

app/client/src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx

@@ -0,0 +1,92 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  Button,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+} from "@appsmith/ads";
+import ActionSettings from "pages/Editor/ActionSettings";
+import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
+import { usePluginActionContext } from "../../PluginActionContext";
+import styled from "styled-components";
+import { API_EDITOR_TAB_TITLES, createMessage } from "ee/constants/messages";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  isPluginActionSettingsOpen,
+  openPluginActionSettings,
+} from "PluginActionEditor/store";
+
+export interface SettingsProps {
+  formName: string;
+}
+
+/* TODO: Remove this after removing custom width from server side (Ankita) */
+const SettingsWrapper = styled.div`
+  .t--form-control-INPUT_TEXT,
+  .t--form-control-DROP_DOWN {
+    > div {
+      width: 100%;
+    }
+  }
+`;
+
+const PluginActionSettingsPopover = (props: SettingsProps) => {
+  const { settingsConfig } = usePluginActionContext();
+  const openSettings = useSelector(isPluginActionSettingsOpen);
+  const [open, setOpen] = useState(false);
+  const dispatch = useDispatch();
+  const theme = EditorTheme.LIGHT;
+
+  useEffect(() => {
+    if (openSettings) {
+      onOpenChange(true);
+    }
+  }, [openSettings]);
+
+  const onOpenChange = useCallback(
+    (open: boolean) => {
+      setOpen(open);
+
+      if (openSettings && !open) {
+        dispatch(openPluginActionSettings(false));
+      }
+    },
+    [dispatch, openSettings],
+  );
+
+  return (
+    <Popover onOpenChange={onOpenChange} open={open}>
+      <PopoverTrigger>
+        <Button
+          isIconButton
+          kind="secondary"
+          onClick={() => onOpenChange(true)}
+          size="sm"
+          startIcon="settings-2-line"
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        onEscapeKeyDown={() => onOpenChange(false)}
+        size="md"
+      >
+        <PopoverHeader className="sticky top-0" isClosable>
+          {createMessage(API_EDITOR_TAB_TITLES.SETTINGS)}
+        </PopoverHeader>
+        <PopoverBody className={"!overflow-y-clip"}>
+          <SettingsWrapper>
+            <ActionSettings
+              actionSettingsConfig={settingsConfig}
+              formName={props.formName}
+              theme={theme}
+            />
+          </SettingsWrapper>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default PluginActionSettingsPopover;

app/client/src/PluginActionEditor/components/PluginActionSettings/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { UIComponentTypes } from "api/PluginApi";
+import { usePluginActionContext } from "PluginActionEditor/PluginActionContext";
+import ApiSettings from "./ApiSettings";
+import QuerySettings from "./QuerySettings";
+import {
+  API_EDITOR_FORM_NAME,
+  QUERY_EDITOR_FORM_NAME,
+} from "ee/constants/forms";
+
+const PluginActionSettings = () => {
+  const { plugin } = usePluginActionContext();
+
+  return [
+    UIComponentTypes.ApiEditorForm,
+    UIComponentTypes.GraphQLEditorForm,
+  ].includes(plugin.uiComponent) ? (
+    <ApiSettings formName={API_EDITOR_FORM_NAME} />
+  ) : (
+    <QuerySettings formName={QUERY_EDITOR_FORM_NAME} />
+  );
+};
+
+export default PluginActionSettings;

app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx

@@ -11,6 +11,7 @@ import {
 import { useToggle } from "@mantine/hooks";
 import { useSelector } from "react-redux";
 import { isActionRunning } from "PluginActionEditor/store";
+import PluginActionSettings from "./PluginActionSettings";
 
 interface PluginActionToolbarProps {
   runOptions?: React.ReactNode;
@@ -51,12 +52,7 @@ const PluginActionToolbar = (props: PluginActionToolbarProps) => {
             Run
           </Button>
         </Tooltip>
-        <Button
-          isIconButton
-          kind="secondary"
-          size="sm"
-          startIcon="settings-2-line"
-        />
+        <PluginActionSettings />
         <Menu onOpenChange={toggleMenuOpen} open={isMenuOpen}>
           <MenuTrigger>
             <Button

app/client/src/PluginActionEditor/store/pluginActionEditorActions.ts

@@ -19,6 +19,13 @@ export const setPluginActionEditorSelectedTab = (payload: string) => ({
   },
 });
 
+export const openPluginActionSettings = (payload: boolean) => ({
+  type: ReduxActionTypes.OPEN_PLUGIN_ACTION_SETTINGS,
+  payload: {
+    settingsOpen: payload,
+  },
+});
+
 export const updatePostBodyContentType = (
   title: string,
   apiId: string,

app/client/src/PluginActionEditor/store/pluginActionEditorSelectors.ts

@@ -59,3 +59,6 @@ export const getPluginActionDebuggerState = (state: AppState) =>
 
 export const isPluginActionCreating = (state: AppState) =>
   state.ui.pluginActionEditor.isCreating;
+
+export const isPluginActionSettingsOpen = (state: AppState) =>
+  state.ui.pluginActionEditor.settingsOpen;

app/client/src/PluginActionEditor/store/pluginEditorReducer.ts

@@ -28,6 +28,7 @@ export interface PluginActionEditorState {
   selectedConfigTab?: string;
   formData: Record<string, Record<string, { label: string; value: string }>>;
   debugger: PluginEditorDebuggerState;
+  settingsOpen?: boolean;
 }
 
 const initialState: PluginActionEditorState = {
@@ -42,6 +43,7 @@ const initialState: PluginActionEditorState = {
     open: false,
     responseTabHeight: ActionExecutionResizerHeight,
   },
+  settingsOpen: false,
 };
 
 export const handlers = {
@@ -170,6 +172,14 @@ export const handlers = {
   [ReduxActionTypes.RESET_EDITOR_REQUEST]: (state: PluginActionEditorState) => {
     state.isSaving = {};
   },
+  [ReduxActionTypes.OPEN_PLUGIN_ACTION_SETTINGS]: (
+    state: PluginActionEditorState,
+    action: ReduxAction<{ settingsOpen: boolean }>,
+  ) => {
+    const { settingsOpen } = action.payload;
+
+    state.settingsOpen = settingsOpen;
+  },
 };
 
 const pluginActionEditorReducer = createImmerReducer(initialState, handlers);

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -499,6 +499,7 @@ const IDEActionTypes = {
   CLOSE_QUERY_ACTION_TAB: "CLOSE_QUERY_ACTION_TAB",
   CLOSE_QUERY_ACTION_TAB_SUCCESS: "CLOSE_QUERY_ACTION_TAB_SUCCESS",
   SET_IS_LIST_VIEW_ACTIVE: "SET_IS_LIST_VIEW_ACTIVE",
+  OPEN_PLUGIN_ACTION_SETTINGS: "OPEN_PLUGIN_ACTION_SETTINGS",
 };
 
 const IDEActionErrorTypes = {

app/client/src/pages/Editor/APIEditor/GraphQL/GraphQLEditorForm.tsx

@@ -22,8 +22,6 @@ type APIFormProps = {
 
 type Props = APIFormProps & InjectedFormProps<Action, APIFormProps>;
 
-const FORM_NAME = API_EDITOR_FORM_NAME;
-
 /**
  * Graphql Editor form which uses the Common Editor and pass on the differentiating components from the API Editor.
  * @param props using type Props
@@ -36,12 +34,12 @@ function GraphQLEditorForm(props: Props) {
     <CommonEditorForm
       {...props}
       bodyUIComponent={<PostBodyData actionName={actionName} />}
-      formName={FORM_NAME}
+      formName={API_EDITOR_FORM_NAME}
       httpsMethods={GRAPHQL_HTTP_METHOD_OPTIONS}
       paginationUIComponent={
         <Pagination
           actionName={actionName}
-          formName={FORM_NAME}
+          formName={API_EDITOR_FORM_NAME}
           paginationType={props.paginationType}
           query={props.actionConfigurationBody}
         />
@@ -50,7 +48,7 @@ function GraphQLEditorForm(props: Props) {
   );
 }
 
-const selector = formValueSelector(FORM_NAME);
+const selector = formValueSelector(API_EDITOR_FORM_NAME);
 
 export default connect(
   // TODO: Fix this the next time the file is edited
@@ -101,7 +99,7 @@ export default connect(
   // TODO: Fix this the next time the file is edited
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   reduxForm<Action, any>({
-    form: FORM_NAME,
+    form: API_EDITOR_FORM_NAME,
     enableReinitialize: true,
   })(GraphQLEditorForm),
 );

app/client/src/pages/Editor/APIEditor/RestAPIForm.tsx

@@ -22,8 +22,6 @@ type APIFormProps = {
 
 type Props = APIFormProps & InjectedFormProps<Action, APIFormProps>;
 
-const FORM_NAME = API_EDITOR_FORM_NAME;
-
 function ApiEditorForm(props: Props) {
   const { actionName } = props;
   const theme = EditorTheme.LIGHT;
@@ -34,7 +32,7 @@ function ApiEditorForm(props: Props) {
       bodyUIComponent={
         <PostBodyData dataTreePath={`${actionName}.config`} theme={theme} />
       }
-      formName={FORM_NAME}
+      formName={API_EDITOR_FORM_NAME}
       httpsMethods={HTTP_METHOD_OPTIONS}
       paginationUIComponent={
         <Pagination
@@ -48,7 +46,7 @@ function ApiEditorForm(props: Props) {
   );
 }
 
-const selector = formValueSelector(FORM_NAME);
+const selector = formValueSelector(API_EDITOR_FORM_NAME);
 
 export default connect((state: AppState) => {
   const httpMethodFromForm = selector(state, "actionConfiguration.httpMethod");
@@ -106,7 +104,7 @@ export default connect((state: AppState) => {
   };
 })(
   reduxForm<Action, APIFormProps>({
-    form: FORM_NAME,
+    form: API_EDITOR_FORM_NAME,
     enableReinitialize: true,
   })(ApiEditorForm),
 );