expose query variables in input hints dropdown

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/gridItemComp.tsx

@@ -97,6 +97,7 @@ const CachedPropertyView = React.memo((props: {
   useEffect(() => {
     setSearchText("");
   }, [props.name]);
+
   return useMemo(() => {
     return (
       <>

client/packages/lowcoder/src/comps/controls/keyValueControl.tsx

@@ -69,7 +69,7 @@ export function keyValueControl<T extends OptionsType>(
   if(controlType === "variable") {
     childrenMap = {
       key: SimpleVariableHeaderComp(true) as any,
-      value: SimpleVariableHeaderComp() as any,
+      value: StringControl,
       type: dropdownControl(types, types[0]?.value),
     };
   }

client/packages/lowcoder/src/comps/queries/httpQuery/graphqlQuery.tsx

@@ -15,6 +15,7 @@ import {
   HttpParametersPropertyView,
   HttpPathPropertyView,
 } from "./httpQueryConstants";
+import { SimpleNameComp } from "@lowcoder-ee/comps/comps/simpleNameComp";
 
 interface VariablesControlParams {
   // variables: string[]; todo support parse variables

client/packages/lowcoder/src/comps/queries/queryComp.tsx

@@ -37,6 +37,7 @@ import {
   FetchCheckNode,
   FetchInfo,
   fromRecord,
+  fromValue,
   isCustomAction,
   MultiBaseComp,
   multiChangeAction,
@@ -655,6 +656,7 @@ QueryCompTmp = withMethodExposing(QueryCompTmp, [
   },
 ]);
 
+
 export const QueryComp = withExposingConfigs(QueryCompTmp, [
   new NameConfig("data", trans("query.dataExportDesc")),
   new NameConfig("code", trans("query.codeExportDesc")),
@@ -701,7 +703,22 @@ class QueryListComp extends QueryListTmpComp implements BottomResListComp {
     const result: NameAndExposingInfo = {};
     Object.values(this.children).forEach((comp) => {
       result[comp.children.name.getView()] = comp.exposingInfo();
+
+      const variables = comp.children.variables.children.variables.toJsonValue();
+      variables.forEach((variable: Record<string, any>) => {
+        result[variable.key] = {
+          property: fromRecord({
+            value: fromValue(variable.value),
+          }),
+          propertyValue: {
+            value: variable.value,
+          },
+          propertyDesc: {},
+          methods: {},
+        };
+      })
     });
+
     return result;
   }