feat: added support for Custom GraphQL Actions for integrations that use GraphQL

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

@@ -2716,10 +2716,14 @@ export const NO_SEARCH_COMMAND_FOUND_EXTERNAL_SAAS = () =>
 
 export const ADD_CUSTOM_ACTION = () => "Add custom action";
 
+export const ADD_CUSTOM_GRAPHQL_ACTION = () => "Add custom GraphQL action";
+
 export const CONFIG_PROPERTY_COMMAND = () => "command";
 
 export const CUSTOM_ACTION_LABEL = () => "Custom Action";
 
+export const CUSTOM_GRAPHQL_ACTION_LABEL = () => "Custom GraphQL Action";
+
 export const AUTH_LOGIN_TOO_MANY_ATTEMPTS = () =>
   "Too many login attempts. Please try again after some time.";
 export const AUTH_ACCOUNT_SUSPENDED_FOR_RATE_LIMIT = () =>

app/client/src/components/formControls/CustomGraphQLActionsConfigControl/NoSearchCommandFoundGraphQL.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+  ADD_CUSTOM_GRAPHQL_ACTION,
+  CONFIG_PROPERTY_COMMAND,
+  createMessage,
+  CUSTOM_GRAPHQL_ACTION_LABEL,
+  NO_SEARCH_COMMAND_FOUND_EXTERNAL_SAAS,
+  NOT_FOUND,
+} 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 NoSearchCommandFoundGraphQL({
+  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(createMessage(CONFIG_PROPERTY_COMMAND));
+
+  const customGraphQLActionOption = options.find((option) =>
+    option.label
+      .toLowerCase()
+      .includes(createMessage(CUSTOM_GRAPHQL_ACTION_LABEL).toLowerCase()),
+  );
+
+  const onClick = () => {
+    onSelectOptions(customGraphQLActionOption!.value);
+    document.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
+  };
+
+  if (isExternalSaasPluginCommandDropdown && customGraphQLActionOption) {
+    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
+          data-testid="t--select-custom-graphql-action"
+          kind="secondary"
+          onClick={onClick}
+          size="sm"
+          startIcon="plus"
+        >
+          {createMessage(ADD_CUSTOM_GRAPHQL_ACTION)}
+        </Button>
+      </Flex>
+    );
+  }
+
+  return <>{createMessage(NOT_FOUND)}</>;
+}