chore: added automatic option to run behaviour behind feature flag

app/client/package.json

@@ -427,4 +427,4 @@
     "axios": "^1.8.3",
     "esbuild": "^0.25.1"
   }
-}
+}

app/client/src/PluginActionEditor/PluginActionContext.tsx

@@ -8,12 +8,13 @@ import type { Action } from "entities/Action";
 import type { Plugin } from "entities/Plugin";
 import type { Datasource, EmbeddedRestDatasource } from "entities/Datasource";
 import type { ActionResponse } from "api/ActionAPI";
+import type { PluginActionSettingsConfig } from "./types/PluginActionTypes";
 
 interface PluginActionContextType {
   action: Action;
   actionResponse?: ActionResponse;
   editorConfig?: unknown[];
-  settingsConfig?: unknown[];
+  settingsConfig?: PluginActionSettingsConfig[];
   plugin: Plugin;
   datasource?: EmbeddedRestDatasource | Datasource;
 }

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/hooks/useGoogleSheetsSetDefaultProperty.ts

@@ -7,6 +7,7 @@ import { getPathAndValueFromActionDiffObject } from "utils/getPathAndValueFromAc
 import { setActionProperty } from "actions/pluginActionActions";
 import { usePluginActionContext } from "../../../../../PluginActionContext";
 import { useDispatch } from "react-redux";
+import type { PluginActionSettingsConfig } from "PluginActionEditor/types/PluginActionTypes";
 
 export const useGoogleSheetsSetDefaultProperty = () => {
   const {
@@ -30,7 +31,9 @@ export const useGoogleSheetsSetDefaultProperty = () => {
 
         merge(
           initialValues,
-          getConfigInitialValues(settingsConfig as Record<string, unknown>[]),
+          getConfigInitialValues(
+            settingsConfig as PluginActionSettingsConfig[],
+          ),
         );
 
         // initialValues contains merge of action, editorConfig, settingsConfig and will be passed to redux form

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

@@ -6,6 +6,9 @@ import type { EditorTheme } from "components/editorComponents/CodeEditor/EditorC
 import styled from "styled-components";
 import { Text } from "@appsmith/ads";
 import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
+import { useSelector, type DefaultRootState } from "react-redux";
+import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
+import { updateRunBehaviourForActionSettings } from "utils/PluginUtils";
 
 interface ActionSettingsProps {
   // TODO: Fix this the next time the file is edited
@@ -41,9 +44,18 @@ const ActionSettingsWrapper = styled.div`
 `;
 
 function ActionSettings(props: ActionSettingsProps): JSX.Element {
+  const featureFlagEnabled: boolean = useSelector((state: DefaultRootState) =>
+    selectFeatureFlagCheck(state, "release_reactive_actions_enabled"),
+  );
+
+  const updateSettingsConfig = updateRunBehaviourForActionSettings(
+    props.actionSettingsConfig || [],
+    featureFlagEnabled,
+  );
+
   return (
     <ActionSettingsWrapper>
-      {!props.actionSettingsConfig ? (
+      {!updateSettingsConfig ? (
         <CenteredWrapper>
           <Text color="var(--ads-v2-color-fg-error)" kind="heading-m">
             Error: No settings config found
@@ -52,7 +64,7 @@ function ActionSettings(props: ActionSettingsProps): JSX.Element {
       ) : (
         /* TODO: Fix this the next time the file is edited */
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-        props.actionSettingsConfig.map((section: any) =>
+        updateSettingsConfig.map((section: any) =>
           renderEachConfig(section, props.formName),
         )
       )}

app/client/src/PluginActionEditor/types/PluginActionTypes.ts

@@ -5,23 +5,26 @@ export const THEME = EditorTheme.LIGHT;
 export enum ActionRunBehaviour {
   ON_PAGE_LOAD = "ON_PAGE_LOAD",
   MANUAL = "MANUAL",
+  AUTOMATIC = "AUTOMATIC",
 }
 
-export const RUN_BEHAVIOR = {
-  ON_PAGE_LOAD: {
-    label: "On page load",
-    subText: "Query runs when the page loads or when manually triggered",
-    value: ActionRunBehaviour.ON_PAGE_LOAD,
-    children: "On page load",
-  },
-  MANUAL: {
-    label: "Manual",
-    subText: "Query only runs when called in an event or JS with .run()",
-    value: ActionRunBehaviour.MANUAL,
-    children: "Manual",
-  },
-};
+export type ActionRunBehaviourType = `${ActionRunBehaviour}`;
 
-export const RUN_BEHAVIOR_VALUES = Object.values(RUN_BEHAVIOR);
+export interface ActionSettingsConfigChildren {
+  label: string;
+  configProperty: string;
+  controlType: string;
+  initialValue?: string | boolean;
+  options?: Array<{ label: string; value: string }>;
+  tooltipText?: string;
+  placeholder?: string;
+  dataType?: string;
+  subtitle?: string;
+  name?: string;
+}
 
-export type ActionRunBehaviourType = `${ActionRunBehaviour}`;
+export interface ActionSettingsConfig {
+  sectionName: string;
+  id: number;
+  children: ActionSettingsConfigChildren[];
+}

app/client/src/ce/entities/FeatureFlag.ts

@@ -60,6 +60,7 @@ export const FEATURE_FLAG = {
     "license_external_saas_plugins_enabled",
   release_computation_cache_enabled: "release_computation_cache_enabled",
   release_ai_chat_integrations_enabled: "release_ai_chat_integrations_enabled",
+  release_reactive_actions_enabled: "release_reactive_actions_enabled",
 } as const;
 
 export type FeatureFlag = keyof typeof FEATURE_FLAG;
@@ -110,6 +111,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   license_external_saas_plugins_enabled: false,
   release_computation_cache_enabled: false,
   release_ai_chat_integrations_enabled: false,
+  release_reactive_actions_enabled: false,
 };
 
 export const AB_TESTING_EVENT_KEYS = {

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

@@ -10043,6 +10043,12 @@ export const defaultAppState = {
                 controlType: "DROP_DOWN",
                 initialValue: "MANUAL",
                 options: [
+                  {
+                    label: "Automatic",
+                    subText:
+                      "Query runs on page load or when a variable it depends on changes",
+                    value: "AUTOMATIC",
+                  },
                   {
                     label: "On page load",
                     subText:
@@ -10094,6 +10100,12 @@ export const defaultAppState = {
                 controlType: "DROP_DOWN",
                 initialValue: "MANUAL",
                 options: [
+                  {
+                    label: "Automatic",
+                    subText:
+                      "Query runs on page load or when a variable it depends on changes",
+                    value: "AUTOMATIC",
+                  },
                   {
                     label: "On page load",
                     subText:
@@ -10145,6 +10157,12 @@ export const defaultAppState = {
                 controlType: "DROP_DOWN",
                 initialValue: "MANUAL",
                 options: [
+                  {
+                    label: "Automatic",
+                    subText:
+                      "Query runs on page load or when a variable it depends on changes",
+                    value: "AUTOMATIC",
+                  },
                   {
                     label: "On page load",
                     subText:
@@ -10225,6 +10243,12 @@ export const defaultAppState = {
                 controlType: "DROP_DOWN",
                 initialValue: "MANUAL",
                 options: [
+                  {
+                    label: "Automatic",
+                    subText:
+                      "Query runs on page load or when a variable it depends on changes",
+                    value: "AUTOMATIC",
+                  },
                   {
                     label: "On page load",
                     subText:

app/client/src/constants/AppsmithActionConstants/ActionConstants.tsx

@@ -8,6 +8,7 @@ import saasActionSettingsConfig from "constants/AppsmithActionConstants/formConf
 import apiActionDependencyConfig from "constants/AppsmithActionConstants/formConfig/ApiDependencyConfigs";
 import apiActionDatasourceFormButtonConfig from "constants/AppsmithActionConstants/formConfig/ApiDatasourceFormsButtonConfig";
 import type { EntityTypeValue } from "ee/entities/DataTree/types";
+import type { PluginActionSettingsConfig } from "PluginActionEditor/types/PluginActionTypes";
 
 export interface ExecuteActionPayloadEvent {
   type: EventType;
@@ -166,9 +167,10 @@ export const POSTMAN = "POSTMAN";
 export const CURL = "CURL";
 export const Swagger = "Swagger";
 
-// TODO: Fix this the next time the file is edited
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const defaultActionSettings: Record<PluginType, any> = {
+export const defaultActionSettings: Record<
+  PluginType,
+  PluginActionSettingsConfig[]
+> = {
   [PluginType.API]: apiActionSettingsConfig,
   [PluginType.DB]: queryActionSettingsConfig,
   [PluginType.SAAS]: saasActionSettingsConfig,

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

@@ -7,9 +7,10 @@ import {
   HTTP_PROTOCOL_VERSIONS,
 } from "PluginActionEditor/constants/CommonApiConstants";
 import {
-  RUN_BEHAVIOR,
   RUN_BEHAVIOR_VALUES,
-} from "PluginActionEditor/types/PluginActionTypes";
+  RUN_BEHAVIOR_CONFIG_PROPERTY,
+} from "constants/AppsmithActionConstants/formConfig/PluginSettings";
+import { ActionRunBehaviour } from "PluginActionEditor/types/PluginActionTypes";
 
 export default [
   {
@@ -18,9 +19,9 @@ export default [
     children: [
       {
         label: "Run behavior",
-        configProperty: "runBehaviour",
+        configProperty: RUN_BEHAVIOR_CONFIG_PROPERTY,
         controlType: "DROP_DOWN",
-        initialValue: RUN_BEHAVIOR.MANUAL.label,
+        initialValue: ActionRunBehaviour.MANUAL,
         options: RUN_BEHAVIOR_VALUES,
       },
       {

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

@@ -1,7 +1,8 @@
 import {
-  RUN_BEHAVIOR,
   RUN_BEHAVIOR_VALUES,
-} from "PluginActionEditor/types/PluginActionTypes";
+  RUN_BEHAVIOR_CONFIG_PROPERTY,
+} from "constants/AppsmithActionConstants/formConfig/PluginSettings";
+import { ActionRunBehaviour } from "PluginActionEditor/types/PluginActionTypes";
 
 export default [
   {
@@ -10,9 +11,9 @@ export default [
     children: [
       {
         label: "Run behavior",
-        configProperty: "runBehaviour",
+        configProperty: RUN_BEHAVIOR_CONFIG_PROPERTY,
         controlType: "DROP_DOWN",
-        initialValue: RUN_BEHAVIOR.MANUAL.label,
+        initialValue: ActionRunBehaviour.MANUAL,
         options: RUN_BEHAVIOR_VALUES,
       },
       {

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

@@ -0,0 +1,24 @@
+import { ActionRunBehaviour } from "PluginActionEditor/types/PluginActionTypes";
+
+export const RUN_BEHAVIOR_CONFIG_PROPERTY = "runBehaviour";
+
+export const RUN_BEHAVIOR_VALUES = [
+  {
+    label: "Automatic",
+    subText: "Query runs on page load or when a variable it depends on changes",
+    value: ActionRunBehaviour.AUTOMATIC,
+    children: "Automatic",
+  },
+  {
+    label: "On page load",
+    subText: "Query runs when the page loads or when manually triggered",
+    value: ActionRunBehaviour.ON_PAGE_LOAD,
+    children: "On page load",
+  },
+  {
+    label: "Manual",
+    subText: "Query only runs when called in an event or JS with .run()",
+    value: ActionRunBehaviour.MANUAL,
+    children: "Manual",
+  },
+];

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

@@ -1,7 +1,8 @@
 import {
-  RUN_BEHAVIOR,
   RUN_BEHAVIOR_VALUES,
-} from "PluginActionEditor/types/PluginActionTypes";
+  RUN_BEHAVIOR_CONFIG_PROPERTY,
+} from "constants/AppsmithActionConstants/formConfig/PluginSettings";
+import { ActionRunBehaviour } from "PluginActionEditor/types/PluginActionTypes";
 
 export default [
   {
@@ -10,9 +11,9 @@ export default [
     children: [
       {
         label: "Run behavior",
-        configProperty: "runBehaviour",
+        configProperty: RUN_BEHAVIOR_CONFIG_PROPERTY,
         controlType: "DROP_DOWN",
-        initialValue: RUN_BEHAVIOR.MANUAL.label,
+        initialValue: ActionRunBehaviour.MANUAL,
         options: RUN_BEHAVIOR_VALUES,
       },
       {

app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx

@@ -15,10 +15,12 @@ import {
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import type { OnUpdateSettingsProps } from "../types";
 import {
-  RUN_BEHAVIOR_VALUES,
+  ActionRunBehaviour,
   type ActionRunBehaviourType,
 } from "PluginActionEditor/types/PluginActionTypes";
 import styled from "styled-components";
+import { RUN_BEHAVIOR_VALUES } from "constants/AppsmithActionConstants/formConfig/PluginSettings";
+import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 
 const OptionLabel = styled(Text)`
   color: var(--ads-v2-color-fg);
@@ -47,7 +49,14 @@ interface FunctionSettingsRowProps extends Omit<Props, "actions"> {
 
 const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
   const [runBehaviour, setRunBehaviour] = useState(props.action.runBehaviour);
-  const options = RUN_BEHAVIOR_VALUES as SelectOptionProps[];
+  const flagValueForReactiveActions = useFeatureFlag(
+    "release_reactive_actions_enabled",
+  );
+  const options = RUN_BEHAVIOR_VALUES.filter(
+    (option) =>
+      flagValueForReactiveActions ||
+      option.value !== ActionRunBehaviour.AUTOMATIC,
+  ) as SelectOptionProps[];
   const selectedValue = options.find((opt) => opt.value === runBehaviour);
 
   const onSelectOptions = useCallback(
@@ -82,7 +91,6 @@ const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
       </Text>
       <StyledSelect
         data-testid={`t--dropdown-runBehaviour`}
-        defaultValue={selectedValue}
         id={props.action.id}
         isDisabled={props.disabled}
         listHeight={240}