Skip to content

Commit 38b391c

Browse files
author
FalkWolsky
committed
Enabling tutorials from Supademo
1 parent 0b99e61 commit 38b391c

File tree

10 files changed

+222
-38
lines changed

10 files changed

+222
-38
lines changed

‎client/packages/lowcoder-comps/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -197,10 +197,10 @@
197197
}
198198
},
199199
"scripts": {
200-
"start": "NODE_OPTIONS=--max_old_space_size=12288 vite",
201-
"build": "yarn test && lowcoder-cli build",
202-
"build_only": "lowcoder-cli build",
203-
"build_publish": "lowcoder-cli build --publish",
200+
"start": "NODE_OPTIONS=--max_old_space_size=6442 vite",
201+
"build": "NODE_OPTIONS=--max_old_space_size=6442 yarn test && lowcoder-cli build",
202+
"build_only": "NODE_OPTIONS=--max_old_space_size=6442 lowcoder-cli build",
203+
"build_publish": "NODE_OPTIONS=--max_old_space_size=6442 lowcoder-cli build --publish",
204204
"test": "jest"
205205
},
206206
"devDependencies": {

‎client/packages/lowcoder-sdk/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
}
2929
},
3030
"scripts": {
31-
"build": "vite build",
32-
"start": "vite"
31+
"build": "NODE_OPTIONS=--max_old_space_size=6442 vite build",
32+
"start": "NODE_OPTIONS=--max_old_space_size=2048 vite"
3333
},
3434
"devDependencies": {
3535
"@rollup/plugin-commonjs": "^22.0.2",

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

+10-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bot
2121
import { setFieldsNoTypeCheck } from "util/objectUtils";
2222
import { QueryTutorials } from "util/tutorialUtils";
2323
import { SimpleNameComp } from "./simpleNameComp";
24+
import SupaDemoDisplay from "comps/utils/supademoDisplay";
2425

2526
const dataChangeEvent: EventConfigType = {
2627
label: "onDataChange",
@@ -71,7 +72,15 @@ const DataResponderItemCompBase = new MultiCompBuilder(
7172
</QuerySectionWrapper>
7273
</QueryPropertyViewWrapper><><TacoMarkDown>{trans("dataResponder.documentationText")}</TacoMarkDown><DocLink style={{ marginTop: 8 }} href={QueryTutorials.dataResponder} title={trans("dataResponder.documentationText")}>
7374
{trans("dataResponder.docLink")}
74-
</DocLink></></>
75+
</DocLink><br/><br/>
76+
77+
<SupaDemoDisplay
78+
url={trans("supademos.dataresponder")}
79+
modalWidth="80%"
80+
modalTop="20px"
81+
/>
82+
83+
</></>
7584

7685
),
7786
},

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

+1
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import { blurMethod, focusMethod } from "comps/utils/methodUtils";
5959
import { useContext } from "react";
6060
import { EditorContext } from "comps/editorState";
6161
import { styleControl } from "comps/controls/styleControl";
62+
import SupaDemoDisplay from "comps/utils/supademoDisplay";
6263

6364
export const getStyle = (
6465
style:

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

+47-25
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ import { trans } from "i18n";
88
import _ from "lodash";
99
import { DocLink } from "lowcoder-design";
1010
import { BottomTabs } from "pages/editor/bottom/BottomTabs";
11-
import { ReactNode } from "react";
11+
import { ReactNode, useState } from "react";
1212
import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bottomRes";
1313
import { JSONObject } from "util/jsonTypes";
1414
import { QueryTutorials } from "util/tutorialUtils";
1515
import { SimpleNameComp } from "./simpleNameComp";
1616
import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
17-
import { evalAndReduce } from "../utils";
17+
import SupaDemoDisplay from "comps/utils/supademoDisplay";
1818

1919
const TemporaryStateItemCompBase = new MultiCompBuilder(
2020
{
@@ -24,29 +24,51 @@ const TemporaryStateItemCompBase = new MultiCompBuilder(
2424
() => null
2525
)
2626
.setPropertyViewFn((children) => {
27-
return (
28-
<BottomTabs
29-
type={BottomResTypeEnum.TempState}
30-
tabsConfig={[
31-
{
32-
key: "general",
33-
title: trans("query.generalTab"),
34-
children: children.value.propertyView({
35-
label: trans("temporaryState.value"),
36-
tooltip: trans("temporaryState.valueTooltip"),
37-
placement: "bottom",
38-
extraChildren: QueryTutorials.tempState && (
39-
<><br/><TacoMarkDown>{trans("temporaryState.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={QueryTutorials.tempState} title={trans("temporaryState.documentationText")}>
40-
{trans("temporaryState.docLink")}
41-
</DocLink></>
42-
),
43-
}),
44-
},
45-
]}
46-
tabTitle={children.name.getView()}
47-
status=""
48-
/>
49-
);
27+
const PropertyViewWithModal = () => {
28+
const [isOpen, setIsOpen] = useState(false);
29+
30+
const handleOpen = () => {
31+
setIsOpen(true);
32+
};
33+
34+
const handleClose = () => {
35+
setIsOpen(false);
36+
};
37+
38+
return (
39+
<BottomTabs
40+
type={BottomResTypeEnum.TempState}
41+
tabsConfig={[
42+
{
43+
key: "general",
44+
title: trans("query.generalTab"),
45+
children: children.value.propertyView({
46+
label: trans("temporaryState.value"),
47+
tooltip: trans("temporaryState.valueTooltip"),
48+
placement: "bottom",
49+
extraChildren: QueryTutorials.tempState && (
50+
<><br/><TacoMarkDown>{trans("temporaryState.documentationText")}</TacoMarkDown><br/><DocLink style={{ marginTop: 8 }} href={QueryTutorials.tempState} title={trans("temporaryState.documentationText")}>
51+
{trans("temporaryState.docLink")}
52+
</DocLink><br/><br/>
53+
54+
<SupaDemoDisplay
55+
url={trans("supademos.temporarystate")}
56+
modalWidth="80%"
57+
modalTop="20px"
58+
/>
59+
60+
</>
61+
),
62+
}),
63+
},
64+
]}
65+
tabTitle={children.name.getView()}
66+
status=""
67+
/>
68+
);
69+
};
70+
71+
return <PropertyViewWithModal />;
5072
})
5173
.build();
5274

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

+10-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { BottomResComp, BottomResCompResult, BottomResTypeEnum } from "types/bot
1313
import { QueryTutorials } from "util/tutorialUtils";
1414
import { SimpleNameComp } from "./simpleNameComp";
1515
import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
16+
import SupaDemoDisplay from "comps/utils/supademoDisplay";
1617

1718
const TransformerItemCompBase = new MultiCompBuilder(
1819
{
@@ -44,7 +45,15 @@ const TransformerItemCompBase = new MultiCompBuilder(
4445
<><br/><TacoMarkDown>{trans("transformer.documentationText")}</TacoMarkDown>
4546
<DocLink style={{ marginTop: 8 }} href={QueryTutorials.transformer} title={trans("transformer.documentationText")}>
4647
{trans("transformer.docLink")}
47-
</DocLink></>
48+
</DocLink><br/><br/>
49+
50+
<SupaDemoDisplay
51+
url={trans("supademos.transformer")}
52+
modalWidth="80%"
53+
modalTop="20px"
54+
/>
55+
56+
</>
4857
)}
4958
</div>
5059
),

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

+67
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import { QueryComp } from "../queryComp";
3131
import { ResourceDropdown } from "../resourceDropdown";
3232
import { NOT_SUPPORT_GUI_SQL_QUERY, SQLQuery } from "../sqlQuery/SQLQuery";
3333
import { StreamQuery } from "../httpQuery/streamQuery";
34+
import SupaDemoDisplay from "../../utils/supademoDisplay";
3435

3536
export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp> }) {
3637
const { comp } = props;
@@ -362,6 +363,72 @@ export const QueryGeneralPropertyView = (props: {
362363
</QueryConfigLabel>
363364
{children.onEvent.getPropertyView()}
364365
</QueryConfigWrapper>
366+
367+
<br/>
368+
369+
{["postgres", "mysql", "mssql", "oracle", "mariadb"].includes(datasourceType) && (
370+
<SupaDemoDisplay
371+
url={trans("supademos.dataquery2table")}
372+
modalWidth="80%"
373+
modalTop="20px"
374+
/>
375+
)}
376+
{datasourceType === "restApi" && (
377+
<SupaDemoDisplay
378+
url={trans("supademos.restApiQuery")}
379+
modalWidth="80%"
380+
modalTop="20px"
381+
/>
382+
)}
383+
{/* {datasourceType === "js" && (
384+
<SupaDemoDisplay
385+
url={trans("supademos.jsQuery")}
386+
modalWidth="80%"
387+
modalTop="20px"
388+
/>
389+
)}
390+
{datasourceType === "streamApi" && (
391+
<SupaDemoDisplay
392+
url={trans("supademos.streamApiQuery")}
393+
modalWidth="80%"
394+
modalTop="20px"
395+
/>
396+
)}
397+
{datasourceType === "mongodb" && (
398+
<SupaDemoDisplay
399+
url={trans("supademos.mongodbQuery")}
400+
modalWidth="80%"
401+
modalTop="20px"
402+
/>
403+
)}
404+
{datasourceType === "libraryQuery" && (
405+
<SupaDemoDisplay
406+
url={trans("supademos.libraryQuery")}
407+
modalWidth="80%"
408+
modalTop="20px"
409+
/>
410+
)}
411+
{datasourceType === "googleSheets" && (
412+
<SupaDemoDisplay
413+
url={trans("supademos.googleSheets")}
414+
modalWidth="80%"
415+
modalTop="20px"
416+
/>
417+
)}
418+
{datasourceType === "graphql" && (
419+
<SupaDemoDisplay
420+
url={trans("supademos.graphqlQuery")}
421+
modalWidth="80%"
422+
modalTop="20px"
423+
/>
424+
)}
425+
{datasourceType === "snowflake" && (
426+
<SupaDemoDisplay
427+
url={trans("supademos.snowflakeQuery")}
428+
modalWidth="80%"
429+
modalTop="20px"
430+
/>
431+
)} */}
365432
</QuerySectionWrapper>
366433
)}
367434
</QueryPropertyViewWrapper>

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { trans } from "i18n";
2222
import { ColumnNameDropdown } from "./columnNameDropdown";
2323
import React, { useContext } from "react";
2424
import { QueryContext } from "util/context/QueryContext";
25+
import SupaDemoDisplay from "comps/utils/supademoDisplay";
2526

2627
const AllowMultiModifyComp = withPropertyViewFn(BoolPureControl, (comp) =>
2728
comp.propertyView({
@@ -140,6 +141,7 @@ const CommandMap = {
140141
label={trans("sqlQuery.primaryKeyColumn")}
141142
/>
142143
{children.records.getPropertyView()}
144+
143145
</>
144146
))
145147
.build(),
@@ -176,7 +178,7 @@ const SQLQueryPropertyView = (props: { comp: InstanceType<typeof SQLQuery> }) =>
176178
{children.mode.getView() === "SQL" ? (
177179
children.sql.propertyView({
178180
placement: "bottom",
179-
placeholder: "SELECT * FROM users;",
181+
placeholder: "SELECT * FROM users WHERE user_id = {{userId}}::uuid",
180182
styleName: "medium",
181183
language: "sql",
182184
enableMetaCompletion: true,
@@ -212,10 +214,12 @@ const SQLQueryPropertyView = (props: { comp: InstanceType<typeof SQLQuery> }) =>
212214
});
213215
}}
214216
/>
217+
215218
{children.command.getPropertyView()}
216219
</>
217220
)}
218221
</>
222+
219223
);
220224
};
221225

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { useState } from 'react';
2+
import { Modal, Button, Tooltip } from 'antd';
3+
import { InfoCircleOutlined } from '@ant-design/icons';
4+
import { trans } from 'i18n'; // Adjust this import according to your project's structure
5+
6+
interface SupaDemoDisplayProps {
7+
url: string;
8+
modalWidth?: string;
9+
modalTop?: string;
10+
showText?: boolean;
11+
}
12+
13+
const SupaDemoDisplay = ({ url, modalWidth = '75%', modalTop = '6%', showText = true }: SupaDemoDisplayProps) => {
14+
const [isOpen, setIsOpen] = useState(false);
15+
16+
const handleOpen = () => {
17+
setIsOpen(true);
18+
};
19+
20+
const handleClose = () => {
21+
setIsOpen(false);
22+
};
23+
24+
return (
25+
<div>
26+
<Tooltip title={trans("editorTutorials.interactiveDemoToolTip")}>
27+
<Button type="primary" shape="circle" icon={<InfoCircleOutlined />} style={{ paddingTop: "5px" }} onClick={handleOpen} />
28+
{ showText && <span style={{ marginLeft: 8 }} onClick={handleOpen}>{trans("editorTutorials.interactiveDemo")}</span> }
29+
</Tooltip>
30+
<Modal
31+
title={trans("editorTutorials.interactiveDemo")}
32+
open={isOpen}
33+
onCancel={handleClose}
34+
width={modalWidth}
35+
style={{ top: modalTop }}
36+
okButtonProps={{ style: { display: 'none' } }}
37+
cancelButtonProps={{ style: { display: 'none' } }}
38+
bodyStyle={{ padding: 0 }}
39+
>
40+
<div style={{ position: 'relative', boxSizing: 'content-box', maxHeight: '80vh', width: '100%', aspectRatio: '1.7712177121771218', padding: '40px 0' }}>
41+
<iframe
42+
src={url}
43+
loading="lazy"
44+
title="Temporary State Usage"
45+
allow="clipboard-write"
46+
frameBorder="0"
47+
allowFullScreen
48+
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
49+
></iframe>
50+
</div>
51+
</Modal>
52+
</div>
53+
);
54+
};
55+
56+
export default SupaDemoDisplay;

0 commit comments

Comments
 (0)