feat: added custom action config control type for paragon integrations

app/client/src/ce/constants/messages.ts

@@ -2632,3 +2632,8 @@ export const DATASOURCE_SECURE_TEXT = () =>
 export const TABLE_LOADING_RECORDS = () => "loading records";
 
 export const UPCOMING_SAAS_INTEGRATIONS = () => "Upcoming SaaS Integrations";
+
+export const NO_SEARCH_COMMAND_FOUND_EXTERNAL_SAAS = () =>
+  "No actions match your search";
+
+export const ADD_CUSTOM_ACTION = () => "Add custom action";

app/client/src/components/formControls/CustomActionsConfigControl/NoSearchCommandFound.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import {
+  ADD_CUSTOM_ACTION,
+  createMessage,
+  NO_SEARCH_COMMAND_FOUND_EXTERNAL_SAAS,
+} from "ee/constants/messages";
+import { Button, Flex, Text, type SelectOptionProps } from "@appsmith/ads";
+import { useSelector } from "react-redux";
+import { getPlugin } from "ee/selectors/entitiesSelector";
+import { PluginType, type Plugin } from "entities/Plugin";
+export default function NoSearchCommandFound({
+  configProperty,
+  onSelectOptions,
+  options,
+  pluginId,
+}: {
+  configProperty: string;
+  onSelectOptions: (optionValueToSelect: string) => void;
+  options: SelectOptionProps[];
+  pluginId?: string;
+}) {
+  const plugin: Plugin | undefined = useSelector((state) =>
+    getPlugin(state, pluginId || ""),
+  );
+
+  const isExternalSaasPluginCommandDropdown =
+    plugin?.type === PluginType.EXTERNAL_SAAS &&
+    configProperty.includes("command");
+
+  const onClick = () => {
+    const customActionOption = options.find((option) =>
+      option.label.toLowerCase().includes("custom action"),
+    );
+
+    if (customActionOption?.value) {
+      onSelectOptions(customActionOption?.value);
+      document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+    }
+  };
+
+  if (isExternalSaasPluginCommandDropdown) {
+    return (
+      <Flex
+        alignItems="center"
+        flexDirection={"column"}
+        gap="spaces-5"
+        padding="spaces-7"
+      >
+        <Text color="var(--ads-v2-color-gray-500)">
+          {createMessage(NO_SEARCH_COMMAND_FOUND_EXTERNAL_SAAS)}
+        </Text>
+        <Button kind="secondary" onClick={onClick} size="sm" startIcon="plus">
+          {createMessage(ADD_CUSTOM_ACTION)}
+        </Button>
+      </Flex>
+    );
+  }
+
+  return null;
+}

app/client/src/components/formControls/CustomActionsConfigControl/index.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import type { ControlType } from "constants/PropertyControlConstants";
+import FormControl from "pages/Editor/FormControl";
+import { Grid, Tabs, TabPanel, TabsList, Tab, Flex } from "@appsmith/ads";
+import BaseControl, { type ControlProps } from "../BaseControl";
+import { HTTP_METHOD } from "PluginActionEditor/constants/CommonApiConstants";
+import { API_EDITOR_TAB_TITLES } from "ee/constants/messages";
+import { createMessage } from "ee/constants/messages";
+
+enum CUSTOM_ACTION_TABS {
+  HEADERS = "HEADERS",
+  PARAMS = "PARAMS",
+  BODY = "BODY",
+}
+
+const TabbedControls = (props: ControlProps) => {
+  return (
+    <Tabs defaultValue={CUSTOM_ACTION_TABS.HEADERS}>
+      <TabsList>
+        {Object.values(CUSTOM_ACTION_TABS).map((tab) => (
+          <Tab data-testid={`t--api-editor-${tab}`} key={tab} value={tab}>
+            {createMessage(API_EDITOR_TAB_TITLES[tab])}
+          </Tab>
+        ))}
+      </TabsList>
+
+      <TabPanel value={CUSTOM_ACTION_TABS.HEADERS}>
+        <FormControl
+          config={{
+            controlType: "KEYVALUE_ARRAY",
+            configProperty: `${props.configProperty}.headers`,
+            formName: props.formName,
+            id: `${props.configProperty}.headers`,
+            isValid: true,
+            // @ts-expect-error FormControl component has incomplete TypeScript definitions for some valid properties
+            showHeader: true,
+          }}
+          formName={props.formName}
+        />
+      </TabPanel>
+      <TabPanel value={CUSTOM_ACTION_TABS.PARAMS}>
+        <FormControl
+          config={{
+            controlType: "KEYVALUE_ARRAY",
+            configProperty: `${props.configProperty}.params`,
+            formName: props.formName,
+            id: `${props.configProperty}.params`,
+            // @ts-expect-error FormControl component has incomplete TypeScript definitions for some valid properties
+            showHeader: true,
+            isValid: true,
+          }}
+          formName={props.formName}
+        />
+      </TabPanel>
+      <TabPanel value={CUSTOM_ACTION_TABS.BODY}>
+        <FormControl
+          config={{
+            controlType: "QUERY_DYNAMIC_TEXT",
+            configProperty: `${props.configProperty}.body`,
+            formName: props.formName,
+            id: `${props.configProperty}.body`,
+            label: "",
+            isValid: true,
+          }}
+          formName={props.formName}
+        />
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+/**
+ * This component is used to configure the custom actions for the external integration.
+ * It allows the user to add or update details for the custom action like method type, path, headers, params, body.
+ */
+export class CustomActionsControl extends BaseControl<ControlProps> {
+  getControlType(): ControlType {
+    return "CUSTOM_ACTIONS_CONFIG_FORM";
+  }
+  render() {
+    const { props } = this;
+
+    return (
+      <Flex flexDirection="column" gap="spaces-4">
+        <Grid gap="spaces-4" gridTemplateColumns="100px 1fr">
+          <FormControl
+            config={{
+              controlType: "DROP_DOWN",
+              configProperty: `${props.configProperty}.method`,
+              formName: props.formName,
+              id: `${props.configProperty}.method`,
+              label: "",
+              isValid: true,
+              // @ts-expect-error FormControl component has incomplete TypeScript definitions for some valid properties
+              options: Object.values(HTTP_METHOD).map((method) => ({
+                label: method,
+                value: method,
+              })),
+            }}
+            formName={props.formName}
+          />
+          <FormControl
+            config={{
+              controlType: "QUERY_DYNAMIC_INPUT_TEXT",
+              configProperty: `${props.configProperty}.path`,
+              formName: props.formName,
+              id: `${props.configProperty}.path`,
+              label: "",
+              isValid: true,
+              placeholderText: "/v1/users",
+            }}
+            formName={props.formName}
+          />
+        </Grid>
+        <TabbedControls {...props} />
+      </Flex>
+    );
+  }
+}

app/client/src/components/formControls/DropDownControl.tsx

@@ -28,6 +28,7 @@ import type {
   ConditionalOutput,
   DynamicValues,
 } from "reducers/evaluationReducers/formEvaluationReducer";
+import NoSearchCommandFound from "./CustomActionsConfigControl/NoSearchCommandFound";
 
 export interface DropDownGroupedOptions {
   label: string;
@@ -462,6 +463,14 @@ function renderDropdown(
       isLoading={props.isLoading}
       isMultiSelect={isMultiSelect}
       maxTagCount={props.maxTagCount}
+      notFoundContent={
+        <NoSearchCommandFound
+          configProperty={props.configProperty}
+          onSelectOptions={onSelectOptions}
+          options={options}
+          pluginId={props.formValues.pluginId}
+        />
+      }
       onClear={clearAllOptions}
       onDeselect={onRemoveOptions}
       onPopupScroll={handlePopupScroll}

app/client/src/utils/formControl/FormControlRegistry.tsx

@@ -47,6 +47,7 @@ import {
 } from "components/formControls/SliderControl";
 import { HybridSearchControl } from "components/formControls/HybridSearch";
 import FunctionCallingConfigControl from "components/formControls/FunctionCallingConfigControl";
+import { CustomActionsControl } from "components/formControls/CustomActionsConfigControl";
 
 /**
  * NOTE: If you are adding a component that uses FormControl
@@ -240,6 +241,14 @@ class FormControlRegistry {
         },
       },
     );
+    FormControlFactory.registerControlBuilder(
+      formControlTypes.CUSTOM_ACTIONS_CONFIG_FORM,
+      {
+        buildPropertyControl(controlProps): JSX.Element {
+          return <CustomActionsControl {...controlProps} />;
+        },
+      },
+    );
   }
 }
 

app/client/src/utils/formControl/formControlTypes.ts

@@ -24,4 +24,5 @@ export default {
   RAG_DOCUMENTS_SELECTOR: "RAG_DOCUMENTS_SELECTOR",
   HYBRID_SEARCH: "HYBRID_SEARCH",
   FUNCTION_CALLING_CONFIG_FORM: "FUNCTION_CALLING_CONFIG_FORM",
+  CUSTOM_ACTIONS_CONFIG_FORM: "CUSTOM_ACTIONS_CONFIG_FORM",
 };