Enabling tutorials from Supademo

client/packages/lowcoder-comps/package.json

@@ -197,10 +197,10 @@
     }
   },
   "scripts": {
-    "start": "NODE_OPTIONS=--max_old_space_size=12288 vite",
-    "build": "yarn test && lowcoder-cli build",
-    "build_only": "lowcoder-cli build",
-    "build_publish": "lowcoder-cli build --publish",
+    "start": "NODE_OPTIONS=--max_old_space_size=6442 vite",
+    "build": "NODE_OPTIONS=--max_old_space_size=6442 yarn test && lowcoder-cli build",
+    "build_only": "NODE_OPTIONS=--max_old_space_size=6442 lowcoder-cli build",
+    "build_publish": "NODE_OPTIONS=--max_old_space_size=6442 lowcoder-cli build --publish",
     "test": "jest"
   },
   "devDependencies": {

client/packages/lowcoder-sdk/package.json

@@ -28,8 +28,8 @@
     }
   },
   "scripts": {
-    "build": "vite build",
-    "start": "vite"
+    "build": "NODE_OPTIONS=--max_old_space_size=6442 vite build",
+    "start": "NODE_OPTIONS=--max_old_space_size=2048 vite"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.2",

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

@@ -21,6 +21,7 @@ import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bot
 import { setFieldsNoTypeCheck } from "util/objectUtils";
 import { QueryTutorials } from "util/tutorialUtils";
 import { SimpleNameComp } from "./simpleNameComp";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const dataChangeEvent: EventConfigType = {
   label: "onDataChange",
@@ -71,7 +72,15 @@ const DataResponderItemCompBase = new MultiCompBuilder(
                 </QuerySectionWrapper>
               </QueryPropertyViewWrapper><><TacoMarkDown>{trans("dataResponder.documentationText")}</TacoMarkDown><DocLink style={{ marginTop: 8 }} href={QueryTutorials.dataResponder} title={trans("dataResponder.documentationText")}>
                 {trans("dataResponder.docLink")}
-              </DocLink></></>
+              </DocLink><br/><br/>
+
+              <SupaDemoDisplay
+                url={trans("supademos.dataresponder")}
+                modalWidth="80%"
+                modalTop="20px"
+              />
+
+              </></>
 
             ),
           },

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

@@ -59,6 +59,7 @@ import { blurMethod, focusMethod } from "comps/utils/methodUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { styleControl } from "comps/controls/styleControl";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 export const getStyle = (
   style:

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

@@ -8,13 +8,13 @@ import { trans } from "i18n";
 import _ from "lodash";
 import { DocLink } from "lowcoder-design";
 import { BottomTabs } from "pages/editor/bottom/BottomTabs";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bottomRes";
 import { JSONObject } from "util/jsonTypes";
 import { QueryTutorials } from "util/tutorialUtils";
 import { SimpleNameComp } from "./simpleNameComp";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
-import { evalAndReduce } from "../utils";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const TemporaryStateItemCompBase = new MultiCompBuilder(
     {
@@ -24,29 +24,51 @@ const TemporaryStateItemCompBase = new MultiCompBuilder(
     () => null
   )
   .setPropertyViewFn((children) => {
-    return (
-      <BottomTabs
-        type={BottomResTypeEnum.TempState}
-        tabsConfig={[
-          {
-            key: "general",
-            title: trans("query.generalTab"),
-            children: children.value.propertyView({
-              label: trans("temporaryState.value"),
-              tooltip: trans("temporaryState.valueTooltip"),
-              placement: "bottom",
-              extraChildren: QueryTutorials.tempState && (
-                <><br/><TacoMarkDown>{trans("temporaryState.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={QueryTutorials.tempState} title={trans("temporaryState.documentationText")}>
-                  {trans("temporaryState.docLink")}
-                </DocLink></>
-              ),
-            }),
-          },
-        ]}
-        tabTitle={children.name.getView()}
-        status=""
-      />
-    );
+    const PropertyViewWithModal = () => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      const handleOpen = () => {
+        setIsOpen(true);
+      };
+
+      const handleClose = () => {
+        setIsOpen(false);
+      };
+
+      return (
+        <BottomTabs
+          type={BottomResTypeEnum.TempState}
+          tabsConfig={[
+            {
+              key: "general",
+              title: trans("query.generalTab"),
+              children: children.value.propertyView({
+                label: trans("temporaryState.value"),
+                tooltip: trans("temporaryState.valueTooltip"),
+                placement: "bottom",
+                extraChildren: QueryTutorials.tempState && (
+                  <><br/><TacoMarkDown>{trans("temporaryState.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={QueryTutorials.tempState} title={trans("temporaryState.documentationText")}>
+                    {trans("temporaryState.docLink")}
+                  </DocLink><br/><br/>
+
+                  <SupaDemoDisplay
+                    url={trans("supademos.temporarystate")}
+                    modalWidth="80%"
+                    modalTop="20px"
+                  />
+
+                  </>
+                ),
+              }),
+            },
+          ]}
+          tabTitle={children.name.getView()}
+          status=""
+        />
+      );
+    };
+
+    return <PropertyViewWithModal />;
   })
   .build();
 

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

@@ -13,6 +13,7 @@ import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bot
 import { QueryTutorials } from "util/tutorialUtils";
 import { SimpleNameComp } from "./simpleNameComp";
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const TransformerItemCompBase = new MultiCompBuilder(
   {
@@ -44,7 +45,15 @@ const TransformerItemCompBase = new MultiCompBuilder(
                         <><br/><TacoMarkDown>{trans("transformer.documentationText")}</TacoMarkDown>
                         <DocLink style={{ marginTop: 8 }} href={QueryTutorials.transformer} title={trans("transformer.documentationText")}>
                           {trans("transformer.docLink")}
-                        </DocLink></>
+                        </DocLink><br/><br/>
+
+                        <SupaDemoDisplay
+                          url={trans("supademos.transformer")}
+                          modalWidth="80%"
+                          modalTop="20px"
+                        />
+
+                        </>
                       )}
                     </div>
                   ),

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

@@ -31,6 +31,7 @@ import { QueryComp } from "../queryComp";
 import { ResourceDropdown } from "../resourceDropdown";
 import { NOT_SUPPORT_GUI_SQL_QUERY, SQLQuery } from "../sqlQuery/SQLQuery";
 import { StreamQuery } from "../httpQuery/streamQuery";
+import SupaDemoDisplay from "../../utils/supademoDisplay";
 
 export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp> }) {
   const { comp } = props;
@@ -362,6 +363,72 @@ export const QueryGeneralPropertyView = (props: {
             </QueryConfigLabel>
             {children.onEvent.getPropertyView()}
           </QueryConfigWrapper>
+
+          <br/>    
+
+          {["postgres", "mysql", "mssql", "oracle", "mariadb"].includes(datasourceType) && (
+            <SupaDemoDisplay
+              url={trans("supademos.dataquery2table")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "restApi" && (
+            <SupaDemoDisplay
+              url={trans("supademos.restApiQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {/* {datasourceType === "js" && (
+            <SupaDemoDisplay
+              url={trans("supademos.jsQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "streamApi" && (
+            <SupaDemoDisplay
+            url={trans("supademos.streamApiQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "mongodb" && (
+            <SupaDemoDisplay
+              url={trans("supademos.mongodbQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "libraryQuery" && (
+            <SupaDemoDisplay
+              url={trans("supademos.libraryQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "googleSheets" && (
+            <SupaDemoDisplay
+              url={trans("supademos.googleSheets")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "graphql" && (
+            <SupaDemoDisplay
+              url={trans("supademos.graphqlQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )}
+          {datasourceType === "snowflake" && (
+            <SupaDemoDisplay
+              url={trans("supademos.snowflakeQuery")}
+              modalWidth="80%"
+              modalTop="20px"
+            />
+          )} */}
         </QuerySectionWrapper>
       )}
     </QueryPropertyViewWrapper>

client/packages/lowcoder/src/comps/queries/sqlQuery/SQLQuery.tsx

@@ -22,6 +22,7 @@ import { trans } from "i18n";
 import { ColumnNameDropdown } from "./columnNameDropdown";
 import React, { useContext } from "react";
 import { QueryContext } from "util/context/QueryContext";
+import SupaDemoDisplay from "comps/utils/supademoDisplay";
 
 const AllowMultiModifyComp = withPropertyViewFn(BoolPureControl, (comp) =>
   comp.propertyView({
@@ -140,6 +141,7 @@ const CommandMap = {
           label={trans("sqlQuery.primaryKeyColumn")}
         />
         {children.records.getPropertyView()}
+
       </>
     ))
     .build(),
@@ -176,7 +178,7 @@ const SQLQueryPropertyView = (props: { comp: InstanceType<typeof SQLQuery> }) =>
       {children.mode.getView() === "SQL" ? (
         children.sql.propertyView({
           placement: "bottom",
-          placeholder: "SELECT * FROM users;",
+          placeholder: "SELECT * FROM users WHERE user_id = {{userId}}::uuid", 
           styleName: "medium",
           language: "sql",
           enableMetaCompletion: true,
@@ -212,10 +214,12 @@ const SQLQueryPropertyView = (props: { comp: InstanceType<typeof SQLQuery> }) =>
               });
             }}
           />
+
           {children.command.getPropertyView()}
         </>
       )}
     </>
+
   );
 };
 

client/packages/lowcoder/src/comps/utils/supademoDisplay.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Modal, Button, Tooltip } from 'antd';
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { trans } from 'i18n'; // Adjust this import according to your project's structure
+
+interface SupaDemoDisplayProps {
+  url: string;
+  modalWidth?: string;
+  modalTop?: string;
+  showText?: boolean;
+}
+
+const SupaDemoDisplay = ({ url, modalWidth = '75%', modalTop = '6%', showText = true }: SupaDemoDisplayProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <Tooltip title={trans("editorTutorials.interactiveDemoToolTip")}>
+        <Button type="primary" shape="circle" icon={<InfoCircleOutlined />} style={{ paddingTop: "5px" }} onClick={handleOpen} />
+        { showText && <span style={{ marginLeft: 8 }} onClick={handleOpen}>{trans("editorTutorials.interactiveDemo")}</span> }
+      </Tooltip>
+      <Modal
+        title={trans("editorTutorials.interactiveDemo")}
+        open={isOpen}
+        onCancel={handleClose}
+        width={modalWidth}
+        style={{ top: modalTop }}
+        okButtonProps={{ style: { display: 'none' } }}
+        cancelButtonProps={{ style: { display: 'none' } }}
+        bodyStyle={{ padding: 0 }}
+      >
+        <div style={{ position: 'relative', boxSizing: 'content-box', maxHeight: '80vh', width: '100%', aspectRatio: '1.7712177121771218', padding: '40px 0' }}>
+          <iframe
+            src={url}
+            loading="lazy"
+            title="Temporary State Usage"
+            allow="clipboard-write"
+            frameBorder="0"
+            allowFullScreen
+            style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+          ></iframe>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default SupaDemoDisplay;