chore: Removing unnecessary code and keeping the logic same for plugin based and other action settings only on frontend

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/PluginActionSettings/SettingsPopover.tsx

@@ -8,14 +8,16 @@ import {
   API_EDITOR_TAB_TITLES,
   MORE_ON_QUERY_SETTINGS,
 } from "ee/constants/messages";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch, useSelector, type DefaultRootState } from "react-redux";
 import {
   isPluginActionSettingsOpen,
   openPluginActionSettings,
 } from "../../store";
 import { THEME } from "../../types/PluginActionTypes";
 import { type DocsLink, openDoc } from "constants/DocumentationLinks";
 import { ToolbarSettingsPopover } from "IDE";
+import { updateRunBehaviourForActionSettings } from "utils/PluginUtils";
+import { selectFeatureFlagCheck } from "ee/selectors/featureFlagsSelectors";
 
 export interface SettingsProps {
   formName: string;
@@ -41,6 +43,15 @@ const PluginActionSettingsPopover = (props: SettingsProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const dispatch = useDispatch();
 
+  const featureFlagEnabled: boolean = useSelector((state: DefaultRootState) =>
+    selectFeatureFlagCheck(state, "release_reactive_actions_enabled"),
+  );
+
+  const updateSettingsConfig = updateRunBehaviourForActionSettings(
+    settingsConfig || [],
+    featureFlagEnabled,
+  );
+
   const handleOpenChange = useCallback(
     (open: boolean) => {
       setIsOpen(open);
@@ -74,7 +85,7 @@ const PluginActionSettingsPopover = (props: SettingsProps) => {
     >
       <SettingsWrapper>
         <ActionSettings
-          actionSettingsConfig={settingsConfig}
+          actionSettingsConfig={updateSettingsConfig}
           formName={props.formName}
           theme={THEME}
         />

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 PluginActionSettingsConfigChildren {
+  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 PluginActionSettingsConfig {
+  sectionName: string;
+  id: number;
+  children: PluginActionSettingsConfigChildren[];
+}

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

@@ -14,11 +14,10 @@ import {
 } from "ee/constants/messages";
 import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 import type { OnUpdateSettingsProps } from "../types";
-import {
-  RUN_BEHAVIOR_VALUES,
-  type ActionRunBehaviourType,
-} from "PluginActionEditor/types/PluginActionTypes";
+import { 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 +46,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) =>
+      (option.value !== "AUTOMATIC" && !flagValueForReactiveActions) ||
+      flagValueForReactiveActions,
+  ) as SelectOptionProps[];
   const selectedValue = options.find((opt) => opt.value === runBehaviour);
 
   const onSelectOptions = useCallback(
@@ -82,7 +88,6 @@ const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
       </Text>
       <StyledSelect
         data-testid={`t--dropdown-runBehaviour`}
-        defaultValue={selectedValue}
         id={props.action.id}
         isDisabled={props.disabled}
         listHeight={240}