feat: Replacing execute on load toggle with run behaviour in all actions / jsactions

app/client/src/PluginActionEditor/constants/PluginActionConstants.ts

@@ -1,3 +1,23 @@
 import { EditorTheme } from "components/editorComponents/CodeEditor/EditorConfig";
 
 export const THEME = EditorTheme.LIGHT;
+
+export enum ActionRunBehaviour {
+  PAGE_LOAD = "PAGE_LOAD",
+  MANUAL = "MANUAL",
+}
+
+export const RUN_BEHAVIOR = {
+  PAGE_LOAD: {
+    label: "On page load",
+    subText: "Query runs when the page loads or when manually triggered",
+    value: ActionRunBehaviour.PAGE_LOAD,
+  },
+  MANUAL: {
+    label: "Manual",
+    subText: "Query only runs when called in an event or JS with .run()",
+    value: ActionRunBehaviour.MANUAL,
+  },
+};
+
+export const RUN_BEHAVIOR_VALUES = Object.values(RUN_BEHAVIOR);

app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts

@@ -9,13 +9,15 @@ import {
   MultiPartOptionTypes,
   POST_BODY_FORMAT_OPTIONS,
 } from "../constants/CommonApiConstants";
+import { ActionRunBehaviour } from "PluginActionEditor/constants/PluginActionConstants";
 
 // jest.mock("POST_");
 
 const BASE_ACTION: ApiAction = {
   dynamicBindingPathList: [],
   cacheResponse: "",
   executeOnLoad: false,
+  runBehavior: ActionRunBehaviour.MANUAL,
   invalids: [],
   isValid: false,
   workspaceId: "",

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

@@ -2583,7 +2583,7 @@ export const PREPARED_STATEMENT_WARNING = {
 
 export const JS_EDITOR_SETTINGS = {
   TITLE: () => "Settings",
-  ON_LOAD_TITLE: () => "Choose the functions to run on page load",
+  ON_LOAD_TITLE: () => "Choose functions run behavior",
 };
 
 export const CUSTOM_WIDGET_BUILDER_TAB_TITLE = {

app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts

@@ -2308,6 +2308,7 @@ export const defaultAppState = {
             ],
           },
           executeOnLoad: true,
+          runBehavior: "PAGE_LOAD",
           dynamicBindingPathList: [],
           isValid: true,
           invalids: [],
@@ -2392,6 +2393,7 @@ export const defaultAppState = {
             },
           },
           executeOnLoad: false,
+          runBehavior: "MANUAL",
           isValid: true,
           invalids: [],
           messages: [],
@@ -10038,9 +10040,24 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run the query on page load",
-                configProperty: "executeOnLoad",
-                controlType: "SWITCH",
+                label: "Run behavior",
+                configProperty: "runBehavior",
+                controlType: "DROP_DOWN",
+                initialValue: "MANUAL",
+                options: [
+                  {
+                    label: "On page load",
+                    subText:
+                      "Query runs when the page loads or when manually triggered",
+                    value: "PAGE_LOAD",
+                  },
+                  {
+                    label: "Manual",
+                    subText:
+                      "Query only runs when called in an event or JS with .run()",
+                    value: "MANUAL",
+                  },
+                ],
               },
               {
                 label: "Request confirmation before running this query",
@@ -10074,9 +10091,24 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run the query on page load",
-                configProperty: "executeOnLoad",
-                controlType: "SWITCH",
+                label: "Run behavior",
+                configProperty: "runBehavior",
+                controlType: "DROP_DOWN",
+                initialValue: "MANUAL",
+                options: [
+                  {
+                    label: "On page load",
+                    subText:
+                      "Query runs when the page loads or when manually triggered",
+                    value: "PAGE_LOAD",
+                  },
+                  {
+                    label: "Manual",
+                    subText:
+                      "Query only runs when called in an event or JS with .run()",
+                    value: "MANUAL",
+                  },
+                ],
               },
               {
                 label: "Request confirmation before running this query",
@@ -10110,9 +10142,24 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run the API on page load",
-                configProperty: "executeOnLoad",
-                controlType: "SWITCH",
+                label: "Run behavior",
+                configProperty: "runBehavior",
+                controlType: "DROP_DOWN",
+                initialValue: "MANUAL",
+                options: [
+                  {
+                    label: "On page load",
+                    subText:
+                      "Query runs when the page loads or when manually triggered",
+                    value: "PAGE_LOAD",
+                  },
+                  {
+                    label: "Manual",
+                    subText:
+                      "Query only runs when called in an event or JS with .run()",
+                    value: "MANUAL",
+                  },
+                ],
               },
               {
                 label: "Request confirmation before running this API",
@@ -10175,9 +10222,24 @@ export const defaultAppState = {
             id: 1,
             children: [
               {
-                label: "Run the API on page load",
-                configProperty: "executeOnLoad",
-                controlType: "SWITCH",
+                label: "Run behavior",
+                configProperty: "runBehavior",
+                controlType: "DROP_DOWN",
+                initialValue: "MANUAL",
+                options: [
+                  {
+                    label: "On page load",
+                    subText:
+                      "Query runs when the page loads or when manually triggered",
+                    value: "PAGE_LOAD",
+                  },
+                  {
+                    label: "Manual",
+                    subText:
+                      "Query only runs when called in an event or JS with .run()",
+                    value: "MANUAL",
+                  },
+                ],
               },
               {
                 label: "Request confirmation before running this API",
@@ -10353,6 +10415,7 @@ export const defaultAppState = {
                 jsArguments: [],
               },
               executeOnLoad: false,
+              runBehavior: "MANUAL",
               clientSideExecution: true,
               dynamicBindingPathList: [
                 {
@@ -10403,6 +10466,7 @@ export const defaultAppState = {
                 jsArguments: [],
               },
               executeOnLoad: false,
+              runBehavior: "MANUAL",
               clientSideExecution: true,
               dynamicBindingPathList: [
                 {
@@ -10487,6 +10551,7 @@ export const defaultAppState = {
                 jsArguments: [],
               },
               executeOnLoad: false,
+              runBehavior: "MANUAL",
               clientSideExecution: true,
               dynamicBindingPathList: [
                 {
@@ -10537,6 +10602,7 @@ export const defaultAppState = {
                 jsArguments: [],
               },
               executeOnLoad: false,
+              runBehavior: "MANUAL",
               clientSideExecution: true,
               dynamicBindingPathList: [
                 {

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

@@ -20,7 +20,7 @@ import {
 } from "workers/Evaluation/formEval";
 import type { Action } from "entities/Action";
 import type { SelectOptionProps } from "@appsmith/ads";
-import { Icon, Option, OptGroup, Select } from "@appsmith/ads";
+import { Icon, Option, OptGroup, Select, Flex, Text } from "@appsmith/ads";
 import { getFormConfigConditionalOutput } from "selectors/formSelectors";
 import { fetchFormDynamicValNextPage } from "actions/evaluationActions";
 import { objectKeys } from "@appsmith/utils";
@@ -29,6 +29,18 @@ import type {
   DynamicValues,
 } from "reducers/evaluationReducers/formEvaluationReducer";
 import NoSearchCommandFound from "./CustomActionsConfigControl/NoSearchCommandFound";
+import styled from "styled-components";
+
+const OptionLabel = styled(Text)`
+  color: var(--ads-v2-color-fg);
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const OptionSubText = styled(Text)`
+  color: var(--ads-v2-color-fg-muted);
+  font-size: 12px;
+`;
 
 export interface DropDownGroupedOptions {
   label: string;
@@ -462,6 +474,7 @@ function renderDropdown(
       isDisabled={props.disabled}
       isLoading={props.isLoading}
       isMultiSelect={isMultiSelect}
+      listHeight={240}
       maxTagCount={props.maxTagCount}
       notFoundContent={
         <NoSearchCommandFound
@@ -495,7 +508,24 @@ function renderDropdown(
 }
 
 function renderOptionWithIcon(option: SelectOptionProps) {
-  return (
+  return option.subText ? (
+    <Option
+      aria-label={option.label}
+      disabled={option.disabled}
+      isDisabled={option.isDisabled}
+      key={option.value}
+      label={option.label}
+      value={option.value}
+    >
+      <Flex flexDirection="column">
+        <Flex>
+          {option.icon && <Icon color={option.color} name={option.icon} />}
+          <OptionLabel>{option.label}</OptionLabel>
+        </Flex>
+        <OptionSubText>{option.subText}</OptionSubText>
+      </Flex>
+    </Option>
+  ) : (
     <Option
       aria-label={option.label}
       disabled={option.disabled}

app/client/src/constants/AppsmithActionConstants/formConfig/ApiSettingsConfig.ts

@@ -6,16 +6,22 @@ import {
   HTTP_PROTOCOL,
   HTTP_PROTOCOL_VERSIONS,
 } from "PluginActionEditor/constants/CommonApiConstants";
+import {
+  RUN_BEHAVIOR,
+  RUN_BEHAVIOR_VALUES,
+} from "PluginActionEditor/constants/PluginActionConstants";
 
 export default [
   {
     sectionName: "",
     id: 1,
     children: [
       {
-        label: "Run the API on page load",
-        configProperty: "executeOnLoad",
-        controlType: "SWITCH",
+        label: "Run behavior",
+        configProperty: "runBehavior",
+        controlType: "DROP_DOWN",
+        initialValue: RUN_BEHAVIOR.MANUAL.label,
+        options: RUN_BEHAVIOR_VALUES,
       },
       {
         label: "Request confirmation before running this API",

app/client/src/constants/AppsmithActionConstants/formConfig/GoogleSheetsSettingsConfig.ts

@@ -1,12 +1,19 @@
+import {
+  RUN_BEHAVIOR,
+  RUN_BEHAVIOR_VALUES,
+} from "PluginActionEditor/constants/PluginActionConstants";
+
 export default [
   {
     sectionName: "",
     id: 1,
     children: [
       {
-        label: "Run the API on page load",
-        configProperty: "executeOnLoad",
-        controlType: "SWITCH",
+        label: "Run behavior",
+        configProperty: "runBehavior",
+        controlType: "DROP_DOWN",
+        initialValue: RUN_BEHAVIOR.MANUAL.label,
+        options: RUN_BEHAVIOR_VALUES,
       },
       {
         label: "Request confirmation before running this API",

app/client/src/constants/AppsmithActionConstants/formConfig/QuerySettingsConfig.ts

@@ -1,12 +1,19 @@
+import {
+  RUN_BEHAVIOR,
+  RUN_BEHAVIOR_VALUES,
+} from "PluginActionEditor/constants/PluginActionConstants";
+
 export default [
   {
     sectionName: "",
     id: 1,
     children: [
       {
-        label: "Run the query on page load",
-        configProperty: "executeOnLoad",
-        controlType: "SWITCH",
+        label: "Run behavior",
+        configProperty: "runBehavior",
+        controlType: "DROP_DOWN",
+        initialValue: RUN_BEHAVIOR.MANUAL.label,
+        options: RUN_BEHAVIOR_VALUES,
       },
       {
         label: "Request confirmation before running this query",

app/client/src/entities/Action/index.ts

@@ -10,6 +10,7 @@ import {
   type Plugin,
   type PluginName,
 } from "../Plugin";
+import type { ActionRunBehaviour } from "PluginActionEditor/constants/PluginActionConstants";
 
 export enum PaginationType {
   NONE = "NONE",
@@ -140,6 +141,7 @@ export interface BaseAction {
   collectionId?: string;
   pluginId: string;
   executeOnLoad: boolean;
+  runBehavior?: ActionRunBehaviour;
   dynamicBindingPathList: DynamicPath[];
   isValid: boolean;
   invalids: string[];