From 338a8faf70f11d373787acb710588976e27ae262 Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Wed, 22 Jan 2025 10:23:06 -0500
Subject: [PATCH 1/8] Added query variables on Query Dialogue, added parameters
 on Run a Data Query of Event Handlers.

---
 .../actionSelector/executeQueryAction.tsx     | 43 ++++++++++++-------
 .../controls/actionSelector/goToURLAction.tsx |  2 +-
 .../lowcoder/src/comps/queries/queryComp.tsx  |  2 +
 .../queries/queryComp/queryPropertyView.tsx   | 34 +++++++++++++++
 .../queries/queryComp/variablesCompl.tsx      | 16 +++++++
 .../packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 .../packages/lowcoder/src/util/appUtils.tsx   |  1 +
 7 files changed, 83 insertions(+), 16 deletions(-)
 create mode 100644 client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx

diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 720fc93fe..e425f1e3e 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -7,10 +7,13 @@ import { BranchDiv, Dropdown } from "lowcoder-design";
 import { BottomResTypeEnum } from "types/bottomRes";
 import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { trans } from "i18n";
+import {keyValueListControl, keyValueListToSearchStr, withDefault} from "lowcoder-sdk";
+import {KeyValue} from "@lowcoder-ee/types/common";
 
 const ExecuteQueryTmpAction = (function () {
   const childrenMap = {
     queryName: SimpleNameComp,
+    query: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }])
   };
   return new MultiCompBuilder(childrenMap, () => {
     return () => Promise.resolve(undefined as unknown);
@@ -22,6 +25,8 @@ const ExecuteQueryTmpAction = (function () {
 export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   override getView() {
     const queryName = this.children.queryName.getView();
+    const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
+    console.log(queryParams, queryName);
     if (!queryName) {
       return () => Promise.resolve();
     }
@@ -80,21 +85,29 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
       return options;
     };
     return (
-      <BranchDiv $type={"inline"}>
-        <EditorContext.Consumer>
-          {(editorState) => (
-            <>
-              <Dropdown
-                showSearch={true}
-                value={this.children.queryName.getView()}
-                options={getQueryOptions(editorState)}
-                label={trans("eventHandler.selectQuery")}
-                onChange={(value) => this.dispatchChangeValueAction({ queryName: value })}
-              />
-            </>
-          )}
-        </EditorContext.Consumer>
-      </BranchDiv>
+      <>
+        <BranchDiv $type={"inline"}>
+          <EditorContext.Consumer>
+            {(editorState) => (
+              <>
+                <Dropdown
+                  showSearch={true}
+                  value={this.children.queryName.getView()}
+                  options={getQueryOptions(editorState)}
+                  label={trans("eventHandler.selectQuery")}
+                  onChange={(value) => this.dispatchChangeValueAction({ queryName: value })}
+                />
+              </>
+            )}
+          </EditorContext.Consumer>
+        </BranchDiv>
+        <BranchDiv>
+          {this.children.query.propertyView({
+            label: trans("eventHandler.queryParams"),
+            layout: "vertical",
+          })}
+        </BranchDiv>
+      </>
     );
   }
 }
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
index 462cd6213..2223079ef 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/goToURLAction.tsx
@@ -20,7 +20,7 @@ const childrenMap = {
 };
 
 export const GoToURLAction = new MultiCompBuilder(childrenMap, (props) => {
-  return () => {
+  return () => {  
     const queryParams = keyValueListToSearchStr(
       props.query.map((i) => i.getView() as KeyValue)
     );
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index e90bf8d19..13682595b 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -75,6 +75,7 @@ import { QueryNotificationControl } from "./queryComp/queryNotificationControl";
 import { QueryPropertyView } from "./queryComp/queryPropertyView";
 import { getTriggerType, onlyManualTrigger } from "./queryCompUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import {VariablesComp} from "@lowcoder-ee/comps/queries/queryComp/variablesCompl";
 
 const latestExecution: Record<string, string> = {};
 
@@ -153,6 +154,7 @@ const childrenMap = {
     defaultValue: 10 * 1000,
   }),
   confirmationModal: QueryConfirmationModal,
+  variables: VariablesComp,
   periodic: BoolPureControl,
   periodicTime: millisecondsControl({
     defaultValue: Number.NaN,
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index 07f4ef1e0..fa0f078e1 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -171,6 +171,17 @@ export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp>
               </QueryPropertyViewWrapper>
             ),
           },
+          {
+            key: "variables",
+            title: trans("query.variablesTab"),
+            children: (
+              <QueryPropertyViewWrapper>
+                <QuerySectionWrapper>
+                  {children.variables.getPropertyView()}
+                </QuerySectionWrapper>
+              </QueryPropertyViewWrapper>
+            ),
+          },
         ] as const
       }
       tabTitle={children.name.getView()}
@@ -501,6 +512,29 @@ export const QueryGeneralPropertyView = (props: {
   );
 };
 
+export const QueryVariablesPropertyView = (props: {
+  comp: InstanceType<typeof QueryComp>;
+  placement?: PageType;
+}) => {
+  const { comp, placement = "editor" } = props;
+
+  const children = comp.children;
+  let datasourceId = children.datasourceId.getView();
+
+  console.log(children.datasourceId);
+  return (
+    <QueryPropertyViewWrapper>
+      <QuerySectionWrapper>
+        {isCompWithPropertyView(children.comp)
+          ? children.comp.propertyView({
+            datasourceId: datasourceId,
+          })
+          : children.comp.getPropertyView()}
+      </QuerySectionWrapper>
+    </QueryPropertyViewWrapper>
+  );
+};
+
 function findQueryInNestedStructure(
   structure: any,
   queryName: string,
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx
new file mode 100644
index 000000000..87c5bd432
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx
@@ -0,0 +1,16 @@
+import {MultiCompBuilder, withDefault} from "../../generators";
+import {keyValueListControl} from "lowcoder-sdk";
+
+export const VariablesComp = new MultiCompBuilder(
+  {
+    variables: withDefault(keyValueListControl(), [{ key: "", value: "" }]),
+  },
+  (props) =>
+    props.variables
+  )
+  .setPropertyViewFn((children) => (
+    <>
+      {children.variables.propertyView({})}
+    </>
+  ))
+  .build();
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 9c8cdddfa..c4c14c228 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -705,6 +705,7 @@ export const en = {
     "newDatasource": "New Data Source",
     "generalTab": "General",
     "notificationTab": "Notification",
+    "variablesTab": "Variables",
     "advancedTab": "Advanced",
     "showFailNotification": "Show Notification on Failure",
     "failCondition": "Failure Conditions",
diff --git a/client/packages/lowcoder/src/util/appUtils.tsx b/client/packages/lowcoder/src/util/appUtils.tsx
index 5aed643ae..be38dfc22 100644
--- a/client/packages/lowcoder/src/util/appUtils.tsx
+++ b/client/packages/lowcoder/src/util/appUtils.tsx
@@ -32,6 +32,7 @@ export function openApp(props: {
   hashParams?: string;
   newTab?: boolean;
 }) {
+  console.log(props.queryParams)
   const m = matchPath<AppPathParams>(window.location.pathname, APP_EDITOR_URL);
   if (!m || !props.applicationId) {
     return;

From 2c730804050b080211373c1b93af6707c22ef93c Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Fri, 24 Jan 2025 10:02:46 -0500
Subject: [PATCH 2/8] Added Variables to every queries of Data Queries in your
 App of left panel. Added ability to apply query variables when running a
 query in the bottom panel.

---
 .../actionSelector/executeQueryAction.tsx     | 10 +++++--
 .../lowcoder/src/comps/queries/queryComp.tsx  | 27 ++++++++++++++++++-
 .../{variablesCompl.tsx => variablesComp.tsx} |  0
 3 files changed, 34 insertions(+), 3 deletions(-)
 rename client/packages/lowcoder/src/comps/queries/queryComp/{variablesCompl.tsx => variablesComp.tsx} (100%)

diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index e425f1e3e..807adc986 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -25,8 +25,14 @@ const ExecuteQueryTmpAction = (function () {
 export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   override getView() {
     const queryName = this.children.queryName.getView();
-    const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
-    console.log(queryParams, queryName);
+    // const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
+    const result = Object.values(this.children.query.children as Record<string, {
+      children: {
+        key: { unevaledValue: string },
+        value: { unevaledValue: string }
+      }}>)
+      .filter(item => item.children.key.unevaledValue !== "" && item.children.value.unevaledValue !== "")
+      .map(item => ({[item.children.key.unevaledValue]: item.children.value.unevaledValue}));
     if (!queryName) {
       return () => Promise.resolve();
     }
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 13682595b..2d49400d3 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -75,7 +75,7 @@ import { QueryNotificationControl } from "./queryComp/queryNotificationControl";
 import { QueryPropertyView } from "./queryComp/queryPropertyView";
 import { getTriggerType, onlyManualTrigger } from "./queryCompUtils";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
-import {VariablesComp} from "@lowcoder-ee/comps/queries/queryComp/variablesCompl";
+import {VariablesComp} from "@lowcoder-ee/comps/queries/queryComp/variablesComp";
 
 const latestExecution: Record<string, string> = {};
 
@@ -137,6 +137,7 @@ const childrenMap = {
   isFetching: stateComp<boolean>(false),
   lastQueryStartTime: stateComp<number>(-1), // The last execution time of the query, in order to avoid multiple executions overwriting each other, not persistent
   latestEndTime: stateComp<number>(0), // The time when the query was last executed
+  variable: stateComp<number>(0), // The time when the query was last executed
   runTime: stateComp<number>(0), // query run time
 
   datasourceId: StringControl,
@@ -406,16 +407,21 @@ QueryCompTmp = class extends QueryCompTmp {
     return this;
   }
 
+
+
+
   /**
    * Process the execution result
    */
   private processResult(result: QueryResult, action: ExecuteQueryAction, startTime: number) {
     const lastQueryStartTime = this.children.lastQueryStartTime.getView();
+
     if (lastQueryStartTime > startTime) {
       // There are more new requests, ignore this result
       // FIXME: cancel this request in advance in the future
       return;
     }
+
     const changeAction = multiChangeAction({
       code: this.children.code.changeValueAction(result.code ?? QUERY_EXECUTION_OK),
       success: this.children.success.changeValueAction(result.success ?? true),
@@ -424,6 +430,24 @@ QueryCompTmp = class extends QueryCompTmp {
       extra: this.children.extra.changeValueAction(result.extra ?? {}),
       isFetching: this.children.isFetching.changeValueAction(false),
       latestEndTime: this.children.latestEndTime.changeValueAction(Date.now()),
+      variable: this.children.variable.changeValueAction(
+
+        Object.values(this.children?.variables?.children?.variables?.children || {})
+          .filter(
+            (item: any) =>
+              item?.children?.key?.children?.text?.unevaledValue !== "" &&
+              item?.children?.value?.children?.text?.unevaledValue !== ""
+          )
+          .reduce((acc: any, item: any) => {
+            const key = item?.children?.key?.children?.text?.unevaledValue;
+            const value = item?.children?.value?.children?.text?.unevaledValue;
+            if (key !== undefined && value !== undefined) {
+              acc[key] = value;
+            }
+            return acc;
+          }, {})
+      ),
+
       runTime: this.children.runTime.changeValueAction(result.runTime ?? 0),
     });
     getPromiseAfterDispatch(this.dispatch, changeAction, {
@@ -655,6 +679,7 @@ export const QueryComp = withExposingConfigs(QueryCompTmp, [
   new NameConfig("isFetching", trans("query.isFetchingExportDesc")),
   new NameConfig("runTime", trans("query.runTimeExportDesc")),
   new NameConfig("latestEndTime", trans("query.latestEndTimeExportDesc")),
+  new NameConfig("variable", trans("query.variables")),
   new NameConfig("triggerType", trans("query.triggerTypeExportDesc")),
 ]);
 
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx
similarity index 100%
rename from client/packages/lowcoder/src/comps/queries/queryComp/variablesCompl.tsx
rename to client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx

From 6f9ae4141e7f9c6b7b4a954e9fe448f48e6ced43 Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Sat, 25 Jan 2025 09:41:48 -0500
Subject: [PATCH 3/8] Added console to query.

---
 .../src/comps/controls/actionSelector/executeQueryAction.tsx  | 4 +++-
 .../src/comps/queries/queryComp/queryPropertyView.tsx         | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 807adc986..ba01dc22f 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -32,7 +32,9 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
         value: { unevaledValue: string }
       }}>)
       .filter(item => item.children.key.unevaledValue !== "" && item.children.value.unevaledValue !== "")
-      .map(item => ({[item.children.key.unevaledValue]: item.children.value.unevaledValue}));
+      .map(item => ({[item.children.key.unevaledValue]: item.children.value.unevaledValue}))
+      .reduce((acc, curr) => Object.assign(acc, curr), {});
+    console.log(result);
     if (!queryName) {
       return () => Promise.resolve();
     }
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index fa0f078e1..d0cbab197 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -274,6 +274,8 @@ export const QueryGeneralPropertyView = (props: {
     return options;
   }, [editorState]);
 
+  console.log(children.variable)
+
   return (
     <QueryPropertyViewWrapper>
       <QuerySectionWrapper>

From 8564f794b5e85f8eda6e638e16cccabee36e1808 Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Mon, 27 Jan 2025 11:01:57 -0500
Subject: [PATCH 4/8] overwrite variables before executeQuery

---
 .../actionSelector/executeQueryAction.tsx     |  5 +---
 .../lowcoder/src/comps/queries/queryComp.tsx  | 28 ++++++-------------
 .../queries/queryComp/queryPropertyView.tsx   |  2 --
 3 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index ba01dc22f..718560217 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -34,7 +34,6 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
       .filter(item => item.children.key.unevaledValue !== "" && item.children.value.unevaledValue !== "")
       .map(item => ({[item.children.key.unevaledValue]: item.children.value.unevaledValue}))
       .reduce((acc, curr) => Object.assign(acc, curr), {});
-    console.log(result);
     if (!queryName) {
       return () => Promise.resolve();
     }
@@ -43,9 +42,7 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
         this.dispatch,
         routeByNameAction(
           queryName,
-          executeQueryAction({
-            // can add context in the future
-          })
+          executeQueryAction({args: result})
         ),
         { notHandledError: trans("eventHandler.notHandledError") }
       );
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 2d49400d3..74f41b8fc 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -135,9 +135,9 @@ const childrenMap = {
   data: stateComp<JSONValue>(null),
   extra: stateComp<JSONValue>({}),
   isFetching: stateComp<boolean>(false),
+  variable: stateComp<JSONObject>({}),
   lastQueryStartTime: stateComp<number>(-1), // The last execution time of the query, in order to avoid multiple executions overwriting each other, not persistent
   latestEndTime: stateComp<number>(0), // The time when the query was last executed
-  variable: stateComp<number>(0), // The time when the query was last executed
   runTime: stateComp<number>(0), // query run time
 
   datasourceId: StringControl,
@@ -364,6 +364,14 @@ QueryCompTmp = class extends QueryCompTmp {
     }
     if (action.type === CompActionTypes.EXECUTE_QUERY) {
       if (getReduceContext().disableUpdateState) return this;
+      let variableVal = {};
+      if(action.args) variableVal = action.args;
+      else variableVal = this.children.variables.children.variables.toJsonValue().reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
+      //Update query.variable
+      const changeValAction = this.children.variable.changeValueAction(variableVal);
+      const changeValAction2 = this.changeChildAction("variable", variableVal)
+      this.dispatch(changeValAction2);
+      console.log("changed value: ", this.children.variable.toJsonValue());
       return this.executeQuery(action);
     }
     if (action.type === CompActionTypes.CHANGE_VALUE) {
@@ -430,24 +438,6 @@ QueryCompTmp = class extends QueryCompTmp {
       extra: this.children.extra.changeValueAction(result.extra ?? {}),
       isFetching: this.children.isFetching.changeValueAction(false),
       latestEndTime: this.children.latestEndTime.changeValueAction(Date.now()),
-      variable: this.children.variable.changeValueAction(
-
-        Object.values(this.children?.variables?.children?.variables?.children || {})
-          .filter(
-            (item: any) =>
-              item?.children?.key?.children?.text?.unevaledValue !== "" &&
-              item?.children?.value?.children?.text?.unevaledValue !== ""
-          )
-          .reduce((acc: any, item: any) => {
-            const key = item?.children?.key?.children?.text?.unevaledValue;
-            const value = item?.children?.value?.children?.text?.unevaledValue;
-            if (key !== undefined && value !== undefined) {
-              acc[key] = value;
-            }
-            return acc;
-          }, {})
-      ),
-
       runTime: this.children.runTime.changeValueAction(result.runTime ?? 0),
     });
     getPromiseAfterDispatch(this.dispatch, changeAction, {
diff --git a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
index d0cbab197..fa0f078e1 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx
@@ -274,8 +274,6 @@ export const QueryGeneralPropertyView = (props: {
     return options;
   }, [editorState]);
 
-  console.log(children.variable)
-
   return (
     <QueryPropertyViewWrapper>
       <QuerySectionWrapper>

From 845f9c110f78bb06039028af9e79f683c6072166 Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Mon, 27 Jan 2025 12:08:19 -0500
Subject: [PATCH 5/8] key to label on event handler popup

---
 .../src/components/keyValueList.tsx           |  3 +++
 .../actionSelector/executeQueryAction.tsx     | 25 ++++++++++++++---
 .../src/comps/controls/keyValueControl.tsx    | 27 ++++++++++++-------
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/client/packages/lowcoder-design/src/components/keyValueList.tsx b/client/packages/lowcoder-design/src/components/keyValueList.tsx
index 7bd9f317a..fb075420f 100644
--- a/client/packages/lowcoder-design/src/components/keyValueList.tsx
+++ b/client/packages/lowcoder-design/src/components/keyValueList.tsx
@@ -76,6 +76,7 @@ export const KeyValueList = (props: {
   list: ReactNode[];
   onAdd: () => void;
   onDelete: (item: ReactNode, index: number) => void;
+  isStatic?: boolean;
 }) => (
   <>
     {props.list.map((item, index) => (
@@ -87,9 +88,11 @@ export const KeyValueList = (props: {
         />
       </KeyValueListItem>
     ))}
+    {!props.isStatic && 
     <AddBtn onClick={props.onAdd}>
       <AddIcon />
       {trans("addItem")}
     </AddBtn>
+    }
   </>
 );
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 718560217..7b6063de6 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -89,6 +89,24 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
         });
       return options;
     };
+    const getVariableOptions = (editorState?: EditorState) => {
+      const options =
+        editorState
+          ?.getQueriesComp()
+          .getView()
+          .filter(
+            // Filter out the current query under query
+            (option) => {
+              return option.children.name.getView() === this.children.queryName.getView();
+            }
+          ) || [];
+      return this.children.query.propertyView({
+        label: trans("eventHandler.queryParams"),
+        layout: "vertical",
+        isStatic: true,
+        keyFixed: true,
+      });
+    }
     return (
       <>
         <BranchDiv $type={"inline"}>
@@ -107,10 +125,9 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
           </EditorContext.Consumer>
         </BranchDiv>
         <BranchDiv>
-          {this.children.query.propertyView({
-            label: trans("eventHandler.queryParams"),
-            layout: "vertical",
-          })}
+          <EditorContext.Consumer>
+            {(editorState) => getVariableOptions(editorState)}
+          </EditorContext.Consumer>
         </BranchDiv>
       </>
     );
diff --git a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
index 89cc6d276..1f4d722a2 100644
--- a/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/keyValueControl.tsx
@@ -47,6 +47,8 @@ export type KeyValueControlParams = ControlParams & {
   typeTooltip?: ReactNode;
   keyFlexBasics?: number;
   valueFlexBasics?: number;
+  isStatic?: boolean;
+  keyFixed?: boolean;
 };
 
 /**
@@ -82,16 +84,20 @@ function keyValueControl<T extends OptionsType>(
       return (
         <KeyValueWrapper>
           <KeyWrapper $flexBasics={params.keyFlexBasics}>
-            {this.children.key.propertyView({ placeholder: "key", indentWithTab: false })}
-            {hasType && params.showType && (
-              <TypeWrapper>
-                {this.children.type.propertyView({
-                  placeholder: "key",
-                  indentWithTab: false,
-                  tooltip: params.typeTooltip,
-                })}
-              </TypeWrapper>
-            )}
+            {params.keyFixed?
+              <>{this.children.key.getView()}</>
+            :<>
+              {this.children.key.propertyView({ placeholder: "key", indentWithTab: false })}
+              {hasType && params.showType && (
+                <TypeWrapper>
+                  {this.children.type.propertyView({
+                    placeholder: "key",
+                    indentWithTab: false,
+                    tooltip: params.typeTooltip,
+                  })}
+                </TypeWrapper>
+              )}
+            </>}
           </KeyWrapper>
           <ValueWrapper $flexBasics={params.valueFlexBasics}>
             {this.children.value.propertyView({
@@ -136,6 +142,7 @@ export function keyValueListControl<T extends OptionsType>(
             list={this.getView().map((child) => child.propertyView(params))}
             onAdd={() => this.dispatch(this.pushAction({}))}
             onDelete={(item, index) => this.dispatch(this.deleteAction(index))}
+            isStatic={params.isStatic}
           />
         </ControlPropertyViewWrapper>
       );

From 5e1cf9e5746a2576ccbc0482273390020a45169f Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Tue, 28 Jan 2025 06:39:47 -0500
Subject: [PATCH 6/8] use overwritten variable in query request

---
 .../lowcoder/src/comps/queries/queryComp.tsx  | 32 ++++++++++++-------
 .../src/comps/queries/queryCompUtils.tsx      |  7 +++-
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/queries/queryComp.tsx b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
index 74f41b8fc..fbfabeaaa 100644
--- a/client/packages/lowcoder/src/comps/queries/queryComp.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryComp.tsx
@@ -67,7 +67,7 @@ import { JSONObject, JSONValue } from "../../util/jsonTypes";
 import { BoolPureControl } from "../controls/boolControl";
 import { millisecondsControl } from "../controls/millisecondControl";
 import { paramsMillisecondsControl } from "../controls/paramsControl";
-import { NameConfig, withExposingConfigs } from "../generators/withExposing";
+import { DepsConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { HttpQuery } from "./httpQuery/httpQuery";
 import { StreamQuery } from "./httpQuery/streamQuery";
 import { QueryConfirmationModal } from "./queryComp/queryConfirmationModal";
@@ -135,7 +135,6 @@ const childrenMap = {
   data: stateComp<JSONValue>(null),
   extra: stateComp<JSONValue>({}),
   isFetching: stateComp<boolean>(false),
-  variable: stateComp<JSONObject>({}),
   lastQueryStartTime: stateComp<number>(-1), // The last execution time of the query, in order to avoid multiple executions overwriting each other, not persistent
   latestEndTime: stateComp<number>(0), // The time when the query was last executed
   runTime: stateComp<number>(0), // query run time
@@ -364,14 +363,8 @@ QueryCompTmp = class extends QueryCompTmp {
     }
     if (action.type === CompActionTypes.EXECUTE_QUERY) {
       if (getReduceContext().disableUpdateState) return this;
-      let variableVal = {};
-      if(action.args) variableVal = action.args;
-      else variableVal = this.children.variables.children.variables.toJsonValue().reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
-      //Update query.variable
-      const changeValAction = this.children.variable.changeValueAction(variableVal);
-      const changeValAction2 = this.changeChildAction("variable", variableVal)
-      this.dispatch(changeValAction2);
-      console.log("changed value: ", this.children.variable.toJsonValue());
+      if(!action.args) action.args = this.children.variables.children.variables.toJsonValue().reduce((acc, curr) => Object.assign(acc, {[curr.key as string]:curr.value}), {});
+
       return this.executeQuery(action);
     }
     if (action.type === CompActionTypes.CHANGE_VALUE) {
@@ -486,6 +479,7 @@ QueryCompTmp = class extends QueryCompTmp {
           applicationId: applicationId,
           applicationPath: parentApplicationPath,
           args: action.args,
+          variables: action.args,
           timeout: this.children.timeout,
           callback: (result) => this.processResult(result, action, startTime)
         });
@@ -669,7 +663,23 @@ export const QueryComp = withExposingConfigs(QueryCompTmp, [
   new NameConfig("isFetching", trans("query.isFetchingExportDesc")),
   new NameConfig("runTime", trans("query.runTimeExportDesc")),
   new NameConfig("latestEndTime", trans("query.latestEndTimeExportDesc")),
-  new NameConfig("variable", trans("query.variables")),
+  new DepsConfig(
+    "variable",
+    (children: any) => {
+      return {data: children.variables.children.variables.node()};
+    },
+    (input) => {
+      if (!input.data) {
+        return undefined;
+      }
+      const newNode = Object.values(input.data)
+        .filter((kvNode: any) => kvNode.key.text.value)
+        .map((kvNode: any) => ({[kvNode.key.text.value]: kvNode.value.text.value}))
+        .reduce((prev, obj) => ({...prev, ...obj}), {});
+      return newNode;
+    },
+    trans("query.variables")
+  ),
   new NameConfig("triggerType", trans("query.triggerTypeExportDesc")),
 ]);
 
diff --git a/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx b/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx
index 1971e8ec5..1203e1cfd 100644
--- a/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx
+++ b/client/packages/lowcoder/src/comps/queries/queryCompUtils.tsx
@@ -25,18 +25,23 @@ export function toQueryView(params: FunctionProperty[]) {
     applicationId: string;
     applicationPath: string[];
     args?: Record<string, unknown>;
+    variables?: any;
     timeout: InstanceType<ParamsControlType>;
   }): Promise<QueryResult> => {
     const { applicationId, isViewMode } = getGlobalSettings();
 
+    const mappedVariables = Object.keys(props.variables).map(key => ({key: `query1.variable.${key}`, value: props.variables[key]}));
     let request: QueryExecuteRequest = {
       path: props.applicationPath,
       params: [
-        ...params.map(({ key, value }) => ({ key, value: value(props.args) })),
+        ...params.filter(param => {
+          return !mappedVariables.map(v => v.key).includes(param.key);
+        }).map(({ key, value }) => ({ key, value: value(props.args) })),
         ...Object.entries(props.timeout.getView()).map(([key, value]) => ({
           key,
           value: value(props.args),
         })),
+        ...mappedVariables,
       ],
       viewMode: !!isViewMode,
     };

From 63faec27f37953ef9934abca5b078dded1f9ac1c Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Wed, 29 Jan 2025 17:44:12 +0500
Subject: [PATCH 7/8] show query variables in event handlers popup

---
 .../actionSelector/executeQueryAction.tsx     | 170 ++++++++++--------
 .../comps/controls/eventHandlerControl.tsx    |   6 +
 2 files changed, 100 insertions(+), 76 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 7b6063de6..5c2148816 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -9,11 +9,98 @@ import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { trans } from "i18n";
 import {keyValueListControl, keyValueListToSearchStr, withDefault} from "lowcoder-sdk";
 import {KeyValue} from "@lowcoder-ee/types/common";
+import { useCallback, useContext, useEffect, useMemo } from "react";
 
+const ExecuteQueryPropertyView = ({
+  comp,
+  placement,
+}: {
+  comp: any,
+  placement?: "query" | "table"
+}) => {
+  const getQueryOptions = useCallback((editorState?: EditorState) => {
+    const options: { label: string; value: string; variable?: Record<string, string> }[] =
+      editorState
+        ?.queryCompInfoList()
+        .map((info) => {
+          return {
+            label: info.name,
+            value: info.name,
+            variable: info.data.variable,
+          }
+      })
+        .filter(
+          // Filter out the current query under query
+          (option) => {
+            if (
+              placement === "query" &&
+              editorState.selectedBottomResType === BottomResTypeEnum.Query
+            ) {
+              return option.value !== editorState.selectedBottomResName;
+            }
+            return true;
+          }
+        ) || [];
+
+    // input queries
+    editorState
+      ?.getModuleLayoutComp()
+      ?.getInputs()
+      .forEach((i) => {
+        const { name, type } = i.getView();
+        if (type === InputTypeEnum.Query) {
+          options.push({ label: name, value: name });
+        }
+      });
+    return options;
+  }, [placement]);
+
+  const getVariableOptions = useCallback((editorState?: EditorState) => {
+    return comp.children.queryVariables.propertyView({
+      label: trans("eventHandler.queryParams"),
+      layout: "vertical",
+      isStatic: true,
+      keyFixed: true,
+    });
+  }, [comp.children.queryVariables.getView()])
+  
+  return (
+    <>
+      <BranchDiv $type={"inline"}>
+        <EditorContext.Consumer>
+          {(editorState) => (
+            <>
+              <Dropdown
+                showSearch={true}
+                value={comp.children.queryName.getView()}
+                options={getQueryOptions(editorState)}
+                label={trans("eventHandler.selectQuery")}
+                onChange={(value) => {
+                  const options = getQueryOptions(editorState);
+                  const selectedQuery = options.find(option => option.value === value);
+                  const variables = selectedQuery ? Object.keys(selectedQuery.variable || {}) : [];
+                  comp.dispatchChangeValueAction({
+                    queryName: value,
+                    queryVariables: variables.map((variable) => ({key: variable, value: ''})),
+                  });
+                }}
+              />
+            </>
+          )}
+        </EditorContext.Consumer>
+      </BranchDiv>
+      <BranchDiv>
+        <EditorContext.Consumer>
+          {(editorState) => getVariableOptions(editorState)}
+        </EditorContext.Consumer>
+      </BranchDiv>
+    </>
+  );
+}
 const ExecuteQueryTmpAction = (function () {
   const childrenMap = {
     queryName: SimpleNameComp,
-    query: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }])
+    queryVariables: withDefault(keyValueListControl(false, [], "string"), [])
   };
   return new MultiCompBuilder(childrenMap, () => {
     return () => Promise.resolve(undefined as unknown);
@@ -26,7 +113,7 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   override getView() {
     const queryName = this.children.queryName.getView();
     // const queryParams = keyValueListToSearchStr(Array.isArray(this?.children?.query) ? (this.children.query as unknown as any[]).map((i: any) => i.getView() as KeyValue) : []);
-    const result = Object.values(this.children.query.children as Record<string, {
+    const result = Object.values(this.children.queryVariables.children as Record<string, {
       children: {
         key: { unevaledValue: string },
         value: { unevaledValue: string }
@@ -56,80 +143,11 @@ export class ExecuteQueryAction extends ExecuteQueryTmpAction {
   }
 
   propertyView({ placement }: { placement?: "query" | "table" }) {
-    const getQueryOptions = (editorState?: EditorState) => {
-      const options: { label: string; value: string }[] =
-        editorState
-          ?.queryCompInfoList()
-          .map((info) => ({
-            label: info.name,
-            value: info.name,
-          }))
-          .filter(
-            // Filter out the current query under query
-            (option) => {
-              if (
-                placement === "query" &&
-                editorState.selectedBottomResType === BottomResTypeEnum.Query
-              ) {
-                return option.value !== editorState.selectedBottomResName;
-              }
-              return true;
-            }
-          ) || [];
-
-      // input queries
-      editorState
-        ?.getModuleLayoutComp()
-        ?.getInputs()
-        .forEach((i) => {
-          const { name, type } = i.getView();
-          if (type === InputTypeEnum.Query) {
-            options.push({ label: name, value: name });
-          }
-        });
-      return options;
-    };
-    const getVariableOptions = (editorState?: EditorState) => {
-      const options =
-        editorState
-          ?.getQueriesComp()
-          .getView()
-          .filter(
-            // Filter out the current query under query
-            (option) => {
-              return option.children.name.getView() === this.children.queryName.getView();
-            }
-          ) || [];
-      return this.children.query.propertyView({
-        label: trans("eventHandler.queryParams"),
-        layout: "vertical",
-        isStatic: true,
-        keyFixed: true,
-      });
-    }
     return (
-      <>
-        <BranchDiv $type={"inline"}>
-          <EditorContext.Consumer>
-            {(editorState) => (
-              <>
-                <Dropdown
-                  showSearch={true}
-                  value={this.children.queryName.getView()}
-                  options={getQueryOptions(editorState)}
-                  label={trans("eventHandler.selectQuery")}
-                  onChange={(value) => this.dispatchChangeValueAction({ queryName: value })}
-                />
-              </>
-            )}
-          </EditorContext.Consumer>
-        </BranchDiv>
-        <BranchDiv>
-          <EditorContext.Consumer>
-            {(editorState) => getVariableOptions(editorState)}
-          </EditorContext.Consumer>
-        </BranchDiv>
-      </>
-    );
+      <ExecuteQueryPropertyView
+        comp={this}
+        placement={placement}
+      />
+    )
   }
 }
diff --git a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx
index 3a22afe71..70bf77962 100644
--- a/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx
@@ -167,12 +167,18 @@ const EventHandlerControlPropertyView = (props: {
     if (eventConfigs.length === 0) {
       return;
     }
+    
+    const queryVariables = editorState
+      ?.selectedOrFirstQueryComp()
+      ?.children.variables.children.variables.toJsonValue();
+
     const queryExecHandler = {
       compType: "executeQuery",
       comp: {
         queryName: editorState
           ?.selectedOrFirstQueryComp()
           ?.children.name.getView(),
+        queryVariables: queryVariables?.map((variable) => ({...variable, value: ''})),
       },
     };
     const messageHandler = {

From e43aba83a19cb955f03ba2d022ef2b9e5d294bb9 Mon Sep 17 00:00:00 2001
From: Imiss-U1025 <imissu1025@gmail.com>
Date: Wed, 29 Jan 2025 09:31:54 -0500
Subject: [PATCH 8/8] Fix label and remove del button

---
 .../lowcoder-design/src/components/keyValueList.tsx    | 10 ++++++----
 .../controls/actionSelector/executeQueryAction.tsx     |  2 +-
 client/packages/lowcoder/src/i18n/locales/en.ts        |  1 +
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder-design/src/components/keyValueList.tsx b/client/packages/lowcoder-design/src/components/keyValueList.tsx
index fb075420f..6cedce3c4 100644
--- a/client/packages/lowcoder-design/src/components/keyValueList.tsx
+++ b/client/packages/lowcoder-design/src/components/keyValueList.tsx
@@ -82,10 +82,12 @@ export const KeyValueList = (props: {
     {props.list.map((item, index) => (
       <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
         {item}
-        <DelIcon
-          onClick={() => props.list.length > 1 && props.onDelete(item, index)}
-          $forbidden={props.list.length === 1}
-        />
+        {!props.isStatic &&
+          <DelIcon
+            onClick={() => props.list.length > 1 && props.onDelete(item, index)}
+            $forbidden={props.list.length === 1}
+          />
+        }
       </KeyValueListItem>
     ))}
     {!props.isStatic && 
diff --git a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
index 5c2148816..cc4018bd5 100644
--- a/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
+++ b/client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx
@@ -57,7 +57,7 @@ const ExecuteQueryPropertyView = ({
 
   const getVariableOptions = useCallback((editorState?: EditorState) => {
     return comp.children.queryVariables.propertyView({
-      label: trans("eventHandler.queryParams"),
+      label: trans("eventHandler.queryVariables"),
       layout: "vertical",
       isStatic: true,
       keyFixed: true,
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index c4c14c228..7623177c6 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -277,6 +277,7 @@ export const en = {
     "moduleEvent": "Module Event",
     "goToApp": "Go to an other App",
     "queryParams": "Query Parameters",
+    "queryVariables": "Query Variables",
     "hashParams": "Hash Parameters",
     "showNotification": "Show a Notification",
     "text": "Text",

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1470.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1470.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1470.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1470.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>