Merge branch 'dev' into deployment_updates

Author: ludomikula

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.6.6",
+  "version": "2.7.0",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder/src/components/ResCreatePanel.tsx

@@ -17,6 +17,7 @@ import { Datasource } from "constants/datasourceConstants";
 import {
   QUICK_GRAPHQL_ID,
   QUICK_REST_API_ID,
+  JS_CODE_ID,
 } from "../constants/datasourceConstants";
 import { ResourceType } from "constants/queryConstants";
 import { default as Upload } from "antd/es/upload";
@@ -25,7 +26,6 @@ import { getUser } from "../redux/selectors/usersSelectors";
 import DataSourceIcon from "./DataSourceIcon";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { isPublicApplication } from "@lowcoder-ee/redux/selectors/applicationSelector";
-import { JS_CODE_ID } from "constants/datasourceConstants";
 
 const Wrapper = styled.div<{ $placement: PageType }>`
   width: 100%;

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

@@ -134,6 +134,7 @@ const childrenMap = {
   style: ButtonStyleControl,
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLElement>,
+  tooltip: StringControl
 };
 
 type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
@@ -146,6 +147,7 @@ const ButtonPropertyView = React.memo((props: {
     <>
       <Section name={sectionNames.basic}>
         {props.children.text.propertyView({ label: trans("text") })}
+        {props.children.tooltip.propertyView({ label: trans("labelProp.tooltip")})}
       </Section>
 
       {(editorModeStatus === "logic" || editorModeStatus === "both") && (
@@ -204,7 +206,7 @@ const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
     <ButtonCompWrapper $disabled={props.disabled}>
       <EditorContext.Consumer>
         {(editorState) => (
-          <Tooltip title={props.text}>
+          <Tooltip title={props.tooltip}>
             <Button100
               ref={props.viewRef}
               $buttonStyle={props.style}

client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

@@ -66,6 +66,7 @@ const ToggleTmpComp = (function () {
     animationStyle: styleControl(AnimationStyle , 'animationStyle'),
     showBorder: withDefault(BoolControl, true),
     viewRef: RefControl<HTMLElement>,
+    tooltip: StringControl,
   };
   return new UICompBuilder(childrenMap, (props) => {
     const text = props.showText
@@ -79,7 +80,7 @@ const ToggleTmpComp = (function () {
         $showBorder={props.showBorder}
         $animationStyle={props.animationStyle}
       >
-        <Tooltip title={props.value.value ? props.trueText : props.falseText}>
+        <Tooltip title={props.tooltip}>
           <Button100
             ref={props.viewRef}
             $buttonStyle={props.style}
@@ -117,6 +118,7 @@ const ToggleTmpComp = (function () {
             </Section>
             <Section name={sectionNames.advanced}>
               {children.showText.propertyView({ label: trans("toggleButton.showText") })}
+              {children.tooltip.propertyView({label: trans("labelProp.tooltip")})}
               {children.showText.getView() && 
                 children.trueText.propertyView({ label: trans("toggleButton.trueLabel") })}
               {children.showText.getView() &&

client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

@@ -201,7 +201,8 @@ const childrenMap = {
   iconScoutAsset: IconscoutControl(AssetType.ICON),
   style: ButtonStyleControl,
   viewRef: RefControl<HTMLElement>,
-  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton')
+  restrictPaddingOnRotation:withDefault(StringControl, 'controlButton'),
+  tooltip: StringControl
 };
 
 let ButtonTmpComp = (function () {
@@ -259,7 +260,7 @@ let ButtonTmpComp = (function () {
                   : undefined
               }
             >
-              <Tooltip title={trans("meeting.meetingControlCompName")}>
+              <Tooltip title={props.tooltip}>
                 <Button100
                   ref={props.viewRef}
                   $buttonStyle={props.style}
@@ -323,6 +324,9 @@ let ButtonTmpComp = (function () {
           {children.sourceMode.getView() === 'asset-library' &&children.iconScoutAsset.propertyView({
             label: trans("button.icon"),
           })}
+          {children.tooltip.propertyView({ 
+            label: trans("labelProp.tooltip"), 
+          })}
         </Section>
 
         {(useContext(EditorContext).editorModeStatus === "logic" ||

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -231,11 +231,7 @@ let CheckboxBasicComp = (function () {
       return props.options
         .filter((option) => option.value !== undefined && !option.hidden)
         .map((option) => ({
-          label: (
-            <Tooltip title={option.label}>
-              <span>{option.label}</span>
-            </Tooltip>
-          ),
+          label: option.label,
           value: option.value,
           disabled: option.disabled,
         }));

client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx

@@ -134,11 +134,7 @@ const MemoizedRadio = memo(({
     return options
       .filter((option) => option.value !== undefined && !option.hidden)
       .map((option) => ({
-        label: (
-          <Tooltip title={option.label}>
-              <span>{option.label}</span>
-          </Tooltip>
-        ),
+        label: option.label,
         value: option.value,
         disabled: option.disabled,
       }));

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

@@ -2,6 +2,7 @@ import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
 import { default as Spin } from "antd/es/spin";
 import DataSourceIcon from "components/DataSourceIcon";
 import { ContextControlType, ContextJsonControl } from "comps/controls/contextCodeControl";
+import { FunctionControl } from "comps/controls/codeControl";
 import { trans } from "i18n";
 import {
   CompAction,
@@ -10,6 +11,7 @@ import {
   isMyCustomAction,
   MultiBaseComp,
   wrapChildAction,
+  evalFunc,
 } from "lowcoder-core";
 import {
   Dropdown,
@@ -34,6 +36,9 @@ import {
   ToInstanceType,
 } from "../generators/multi";
 import { toQueryView } from "./queryCompUtils";
+import { getGlobalSettings } from "comps/utils/globalSettings";
+import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "../../constants/queryConstants";
+import type { SandBoxOption } from "lowcoder-core/src/eval/utils/evalScript";
 
 const NoInputsWrapper = styled.div`
   color: ${GreyTextColor};
@@ -133,13 +138,70 @@ export const LibraryQuery = class extends LibraryQueryBase {
   readonly isReady: boolean = false;
 
   private value: DataType | undefined;
+  private queryInfo: any = null;
 
   constructor(params: CompParams<DataType>) {
     super(params);
     this.value = params.value;
   }
 
   override getView() {
+    // Check if this is a JS query
+    if (this.queryInfo?.query?.compType === "js") {
+      return async (props: any) => {
+        try {
+          const { orgCommonSettings } = getGlobalSettings();
+          const runInHost = !!orgCommonSettings?.runJavaScriptInHost;
+          const timer = performance.now();
+          const script = this.queryInfo.query.comp.script || "";
+          const options: SandBoxOption = { disableLimit: runInHost };
+
+          // Get input values from the inputs component and resolve any variables
+          const inputValues = Object.entries(this.children.inputs.children).reduce((acc, [name, input]) => {
+            // Get the raw value from the input component's text property
+            let value = input.children.text.getView();
+            
+            // Resolve any variables in the value
+            if (typeof value === 'string') {
+              value = value.replace(/\{\{([^}]+)\}\}/g, (match, path) => {
+                const parts = path.split('.');
+                let current = props.args || {};
+                for (const part of parts) {
+                  if (current && typeof current === 'object') {
+                    current = current[part];
+                  } else {
+                    return match; // Return original if path not found
+                  }
+                }
+                return current?.value ?? match;
+              });
+            }
+            
+            acc[name] = value;
+            return acc;
+          }, {} as Record<string, any>);
+
+          console.log("script: " + script);
+          console.log("inputValues: ", inputValues);
+
+          const data = await evalFunc(script, inputValues, undefined, options);
+          return {
+            data: data,
+            code: QUERY_EXECUTION_OK,
+            success: true,
+            runTime: Number((performance.now() - timer).toFixed()),
+          };
+        } catch (e) {
+          return {
+            success: false,
+            data: "",
+            code: QUERY_EXECUTION_ERROR,
+            message: (e as any).message || "",
+          };
+        }
+      };
+    }
+
     return toQueryView(
       Object.entries(this.children.inputs.children).map(([name, input]) => ({
         key: name,
@@ -161,6 +223,7 @@ export const LibraryQuery = class extends LibraryQueryBase {
 
   override reduce(action: CompAction): this {
     if (isMyCustomAction<QueryLibraryUpdateAction>(action, "queryLibraryUpdate")) {
+      this.queryInfo = action.value?.dsl;
       const inputs = this.children.inputs.setInputs(action.value?.dsl?.["inputs"] ?? []);
       return setFieldsNoTypeCheck(this, {
         children: { ...this.children, inputs: inputs },
@@ -258,7 +321,7 @@ const PropertyView = (props: { comp: InstanceType<typeof LibraryQuery> }) => {
         <QueryTutorialButton
           label={trans("queryLibrary.viewQuery")}
           url={`/query-library?forwardQueryId=${queryId}`}
-          styleName={"dropdownRight"}
+          styleName="dropdownRight"
         />
       </QueryConfigWrapper>
 
@@ -284,4 +347,4 @@ const PropertyView = (props: { comp: InstanceType<typeof LibraryQuery> }) => {
 const QueryLabelWrapper = styled.div`
   display: flex;
   align-items: center;
-`;
+`;

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

@@ -487,7 +487,7 @@ QueryCompTmp = class extends QueryCompTmp {
           args: action.args,
           variables: action.args,
           timeout: this.children.timeout,
-          callback: (result) => this.processResult(result, action, startTime)
+          callback: (result: QueryResult) => this.processResult(result, action, startTime)
         });
       }, getTriggerType(this) === "manual")
       .then(

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

@@ -7,6 +7,9 @@ import { Fragment } from "react";
 import { ParamsControlType, ValueFunction } from "../controls/paramsControl";
 import { getGlobalSettings } from "comps/utils/globalSettings";
 import { ResourceType } from "@lowcoder-ee/constants/queryConstants";
+import { evalFunc } from "lowcoder-core";
+import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "../../constants/queryConstants";
+import type { SandBoxOption } from "lowcoder-core/src/eval/utils/evalScript";
 
 export type FunctionProperty = {
   key: string;
@@ -30,6 +33,32 @@ export function toQueryView(params: FunctionProperty[]) {
   }): Promise<QueryResult> => {
     const { applicationId, isViewMode } = getGlobalSettings();
 
+    // Check if this is a JS query
+    const isJsQuery = props.queryId?.startsWith("js:");
+    if (isJsQuery) {
+      try {
+        const { orgCommonSettings } = getGlobalSettings();
+        const runInHost = !!orgCommonSettings?.runJavaScriptInHost;
+        const timer = performance.now();
+        const script = props.args?.script || "";
+        const options: SandBoxOption = { disableLimit: runInHost };
+        const data = await evalFunc(`return (${script}\n);`, props.args || {}, undefined, options);
+        return {
+          data: data,
+          code: QUERY_EXECUTION_OK,
+          success: true,
+          runTime: Number((performance.now() - timer).toFixed()),
+        };
+      } catch (e) {
+        return {
+          success: false,
+          data: "",
+          code: QUERY_EXECUTION_ERROR,
+          message: (e as any).message || "",
+        };
+      }
+    }
+
     let mappedVariables: Array<{key: string, value: string}> = [];
     Object.keys(props.variables)
       .filter(k => k !== "$queryName")