chore: Moving action settings from editor form to toolbar (appsmithor…

…g#36894)

## Description

Moving action settings from editor form to toolbar to follow the new
designs under action redesign project.

Fixes [appsmithorg#35512](appsmithorg#35512)
[appsmithorg#34670](appsmithorg#34670)
[appsmithorg#35535](appsmithorg#35535)

## Automation

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

### 🔍 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/11384449381>
> Commit: 027e2a3
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11384449381&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Thu, 17 Oct 2024 12:40:29 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

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced new components for managing API and query settings in the
Plugin Action Settings.
- Added functionality to open plugin action settings directly from the
toolbar.
- Implemented a settings popover interface for improved user
interaction.
- Added documentation links for QUERY_SETTINGS to enhance user guidance.

- **Improvements**
- Simplified rendering logic in the Plugin Action Form for better
performance.
- Updated form naming conventions for consistency across API and GraphQL
editors.
- Streamlined configuration settings by replacing `subtitle` with
`tooltipText` for clarity.
- Enhanced styling in Action Settings for better layout and user
experience.

- **Bug Fixes**
- Corrected the navigation logic to open plugin action settings instead
of debugger state.

These enhancements aim to improve user experience and streamline plugin
action management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/design-system/ads/src/Popover/Popover.styles.tsx

@@ -65,5 +65,5 @@ export const StyledBody = styled.div`
   max-height: calc(
     var(--popover-max-height) - calc(var(--popover-padding) * 2 + 25.5px)
   );
-  overflow-y: scroll;
+  overflow-y: auto;
 `;

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>
   );
 };

src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css

@@ -12,6 +12,10 @@
     grid-template-columns: 1fr;
   }
 
+  & > div:empty {
+    display: none;
+  }
+
   /*
    This section can be removed once the condition abouve each is resolved
   */

src/PluginActionEditor/components/PluginActionForm/components/ApiEditor/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);

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);

src/PluginActionEditor/components/PluginActionResponse/components/QueryResponseTab.tsx

@@ -35,13 +35,16 @@ import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig
 import BindDataButton from "./BindDataButton";
 import {
   getPluginActionDebuggerState,
+  openPluginActionSettings,
   setPluginActionEditorSelectedTab,
 } from "../../../store";
-import { EDITOR_TABS } from "constants/QueryEditorConstants";
 import {
   createMessage,
   PREPARED_STATEMENT_WARNING,
 } from "ee/constants/messages";
+import { EDITOR_TABS } from "constants/QueryEditorConstants";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 
 const HelpSection = styled.div``;
 
@@ -89,6 +92,10 @@ const QueryResponseTab = (props: Props) => {
   } = props;
   const dispatch = useDispatch();
 
+  const isActionRedesignEnabled = useFeatureFlag(
+    FEATURE_FLAG.release_actions_redesign_enabled,
+  );
+
   const actionResponse = useSelector((state) =>
     getActionData(state, currentActionConfig.id),
   );
@@ -211,8 +218,12 @@ const QueryResponseTab = (props: Props) => {
   }
 
   const navigateToSettings = useCallback(() => {
-    dispatch(setPluginActionEditorSelectedTab(EDITOR_TABS.SETTINGS));
-  }, [dispatch]);
+    if (isActionRedesignEnabled) {
+      dispatch(openPluginActionSettings(true));
+    } else {
+      dispatch(setPluginActionEditorSelectedTab(EDITOR_TABS.SETTINGS));
+    }
+  }, [dispatch, isActionRedesignEnabled]);
 
   const preparedStatementCalloutLinks: CalloutLinkProps[] = [
     {

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);

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);

src/PluginActionEditor/components/PluginActionSettings/SettingsPopover.tsx

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+  Link,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverHeader,
+  PopoverTrigger,
+  ToggleButton,
+} from "@appsmith/ads";
+import ActionSettings from "pages/Editor/ActionSettings";
+import { usePluginActionContext } from "../../PluginActionContext";
+import styled, { css } from "styled-components";
+import {
+  API_EDITOR_TAB_TITLES,
+  createMessage,
+  LEARN_MORE,
+} from "ee/constants/messages";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  isPluginActionSettingsOpen,
+  openPluginActionSettings,
+} from "../../store";
+import { THEME } from "../../constants/PluginActionConstants";
+import { type DocsLink, openDoc } from "constants/DocumentationLinks";
+
+export interface SettingsProps {
+  formName: string;
+  docsLink?: DocsLink;
+}
+
+const Variables = css`
+  --popover-width: 280px;
+`;
+
+/* TODO: Remove this after removing custom width from server side (Ankita) */
+const SettingsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ads-v2-spaces-4);
+
+  .t--form-control-INPUT_TEXT,
+  .t--form-control-DROP_DOWN {
+    > div {
+      min-width: unset;
+      width: 100%;
+    }
+  }
+`;
+
+const StyledPopoverHeader = styled(PopoverHeader)`
+  margin-bottom: var(--ads-v2-spaces-5);
+`;
+
+const StyledPopoverContent = styled(PopoverContent)`
+  ${Variables};
+`;
+
+const LearnMoreLink = styled(Link)`
+  span {
+    font-weight: bold;
+  }
+`;
+
+const PluginActionSettingsPopover = (props: SettingsProps) => {
+  const { settingsConfig } = usePluginActionContext();
+  const openSettings = useSelector(isPluginActionSettingsOpen);
+  const [isOpen, setIsOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (openSettings) {
+      handleOpenChange(true);
+    }
+  }, [openSettings]);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+
+      if (openSettings && !open) {
+        dispatch(openPluginActionSettings(false));
+      }
+    },
+    [openSettings],
+  );
+
+  const handleEscapeKeyDown = () => {
+    handleOpenChange(false);
+  };
+
+  const handleButtonClick = () => {
+    handleOpenChange(true);
+  };
+
+  const handleLearnMoreClick = () => {
+    openDoc(props.docsLink as DocsLink);
+  };
+
+  return (
+    <Popover onOpenChange={handleOpenChange} open={isOpen}>
+      <PopoverTrigger>
+        <ToggleButton
+          icon="settings-2-line"
+          isSelected={isOpen}
+          onClick={handleButtonClick}
+          size="md"
+        />
+      </PopoverTrigger>
+      <StyledPopoverContent
+        align="end"
+        onEscapeKeyDown={handleEscapeKeyDown}
+        size="sm"
+      >
+        <StyledPopoverHeader isClosable>
+          {createMessage(API_EDITOR_TAB_TITLES.SETTINGS)}
+        </StyledPopoverHeader>
+        <PopoverBody>
+          <SettingsWrapper>
+            <ActionSettings
+              actionSettingsConfig={settingsConfig}
+              formName={props.formName}
+              theme={THEME}
+            />
+            {props.docsLink && (
+              <LearnMoreLink
+                className="t--action-settings-documentation-link"
+                endIcon="share-box-line"
+                kind="secondary"
+                onClick={handleLearnMoreClick}
+              >
+                {createMessage(LEARN_MORE)}
+              </LearnMoreLink>
+            )}
+          </SettingsWrapper>
+        </PopoverBody>
+      </StyledPopoverContent>
+    </Popover>
+  );
+};
+
+export default PluginActionSettingsPopover;

src/PluginActionEditor/components/PluginActionSettings/index.tsx

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

src/PluginActionEditor/components/PluginActionToolbar.tsx

@@ -11,6 +11,7 @@ import {
 import { useToggle } from "@mantine/hooks";
 import { useSelector } from "react-redux";
 import { isActionRunning } from "../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

src/PluginActionEditor/constants/PluginActionConstants.ts

@@ -0,0 +1,3 @@
+import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
+
+export const THEME = EditorTheme.LIGHT;

src/PluginActionEditor/store/constants.ts

@@ -1 +1,4 @@
+import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
+
 export const POST_BODY_FORM_DATA_KEY = "displayFormat";
+export const THEME = EditorTheme.LIGHT;

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,

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;