Added validation check to input boxes of variables

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

@@ -0,0 +1,65 @@
+import { ControlParams } from "comps/controls/controlParams";
+import { CompAction, SimpleComp } from "lowcoder-core";
+import { ControlPropertyViewWrapper, PopupCard, Input } from "lowcoder-design";
+import { useEffect, useState } from "react";
+import { trans } from "i18n";
+import { checkName } from "../utils/rename";
+const SimpleVariableHeaderPropertyView = ({params, comp, isCheck}: any) => {
+  const [error, setError] = useState<string | undefined>();
+  const [value, setValue] = useState(comp.value);
+  useEffect(() => {
+    setValue(comp.value);
+    isCheck && setError(undefined);
+  }, [comp]);
+  return (
+    <ControlPropertyViewWrapper {...params}>
+      <Input
+        value={value}
+        placeholder={params.placeholder}
+        onChange={(e) => {
+          const error = isCheck && checkName(e.target.value);
+          isCheck && setError(error || undefined);
+          setValue(e.target.value);
+        }}
+        onBlur={(e) => {
+          if(!isCheck || !error) comp.dispatchChangeValueAction(value);
+          else {
+            setValue(comp.value);
+            setError(undefined);
+          }
+        }}
+      />
+      {isCheck && <PopupCard
+        editorFocus={!!error}
+        title={error ? trans("error") : ""}
+        content={error}
+        hasError={!!error}
+      />}
+    </ControlPropertyViewWrapper>
+  );
+}
+export const SimpleVariableHeaderComp = (isCheck: boolean = false) => {
+    return class SimpleVariableHeaderComp extends SimpleComp<string> {
+    override reduce(action: CompAction): this {
+      // if (isBroadcastAction<RenameAction>(action, CompActionTypes.RENAME)) {
+      //   if (this.getView() === action.action.oldName) {
+      //     return super.reduce(this.changeValueAction(action.action.name));
+      //   }
+      // }
+      return super.reduce(action);
+    }
+
+    readonly IGNORABLE_DEFAULT_VALUE = "";
+    protected getDefaultValue(): string {
+      return "";
+    }
+
+    getPropertyView() {
+      return this.propertyView({});
+    }
+
+    propertyView(params: ControlParams) {
+      return <SimpleVariableHeaderPropertyView params={params} comp={this} isCheck={isCheck}></SimpleVariableHeaderPropertyView>
+    }
+  }
+}

client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx

@@ -99,7 +99,7 @@ const ExecuteQueryPropertyView = ({
 const ExecuteQueryTmpAction = (function () {
   const childrenMap = {
     queryName: SimpleNameComp,
-    queryVariables: withDefault(keyValueListControl(false, [], "string"), [])
+    queryVariables: withDefault(keyValueListControl(false, [], "variable"), [])
   };
   return new MultiCompBuilder(childrenMap, () => {
     return () => Promise.resolve(undefined as unknown);

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

@@ -6,6 +6,7 @@ import { StringControl } from "./codeControl";
 import { ControlParams } from "./controlParams";
 import { dropdownControl } from "./dropdownControl";
 import { ParamsStringControl } from "./paramsControl";
+import { SimpleVariableHeaderComp } from "../comps/simpleVariableHeaderComp";
 
 const KeyValueWrapper = styled.div`
   display: flex;
@@ -58,13 +59,20 @@ export type KeyValueControlParams = ControlParams & {
 export function keyValueControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T,
-  controlType: "params" | "string" = "params"
+  controlType: "params" | "string" | "variable" = "params"
 ) {
-  const childrenMap = {
+  let childrenMap = {
     key: controlType === "params" ? ParamsStringControl : StringControl,
     value: controlType === "params" ? ParamsStringControl : StringControl,
     type: dropdownControl(types, types[0]?.value),
   };
+  if(controlType === "variable") {
+    childrenMap = {
+      key: SimpleVariableHeaderComp(true) as any,
+      value: SimpleVariableHeaderComp() as any,
+      type: dropdownControl(types, types[0]?.value),
+    };
+  }
   return class extends new MultiCompBuilder(childrenMap, (props) => {
     return hasType
       ? {

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

@@ -14,7 +14,7 @@ import { keyValueControl, KeyValueControlParams } from "./keyValueControl"
 export function keyValueListControl<T extends OptionsType>(
   hasType: boolean = false,
   types: T | OptionsType = [],
-  controlType: "params" | "string" = "params"
+  controlType: "params" | "string" | "variable" = "params"
 ) {
   return class extends list(keyValueControl(hasType, types, controlType)) {
     getQueryParams() {

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

@@ -3,7 +3,7 @@ import { keyValueListControl } from "../../controls/keyValueListControl";
 
 export const VariablesComp = new MultiCompBuilder(
   {
-    variables: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }]),
+    variables: withDefault(keyValueListControl(false, [], "variable"), [{ key: "", value: "" }]),
   },
   (props) => props //props.variables
   )