diff --git a/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts b/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts index 971f322bc675..dd7714fb7ea1 100644 --- a/app/client/src/PluginActionEditor/constants/PluginActionConstants.ts +++ b/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); diff --git a/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts b/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts index 3a375877f9a3..4298185f29ea 100644 --- a/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts +++ b/app/client/src/PluginActionEditor/transformers/RestActionTransformers.test.ts @@ -9,6 +9,7 @@ import { MultiPartOptionTypes, POST_BODY_FORMAT_OPTIONS, } from "../constants/CommonApiConstants"; +import { ActionRunBehaviour } from "PluginActionEditor/constants/PluginActionConstants"; // jest.mock("POST_"); @@ -16,6 +17,7 @@ const BASE_ACTION: ApiAction = { dynamicBindingPathList: [], cacheResponse: "", executeOnLoad: false, + runBehavior: ActionRunBehaviour.MANUAL, invalids: [], isValid: false, workspaceId: "", diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 2bc1cf1bfbf1..14a84af3e5d9 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/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 = { diff --git a/app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts b/app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts index 8d225b555af3..f778afdcc940 100644 --- a/app/client/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts +++ b/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: [ { diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx index 2296a19db78a..589e18e426d5 100644 --- a/app/client/src/components/formControls/DropDownControl.tsx +++ b/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={ + + + {option.icon && } + {option.label} + + {option.subText} + + + ) : (