Skip to content

Commit 6ef41f5

Browse files
author
FalkWolsky
committed
Preparation Enterprise Pages and better Data Query Panel
1 parent d6fde12 commit 6ef41f5

File tree

6 files changed

+224
-46
lines changed

6 files changed

+224
-46
lines changed

‎client/packages/lowcoder-design/src/icons/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export { ReactComponent as ImportAppIcon } from "./v1/icon-app-import.svg";
8787
export { ReactComponent as ImportIcon } from "./v1/icon-import.svg";
8888
export { ReactComponent as ImportIconV2 } from "./v1/icon-import-v2.svg";
8989
export { ReactComponent as DatasourceIcon } from "./v1/icon-datasource.svg";
90-
export { ReactComponent as QueryLibraryIcon } from "./v1/icon-query-library.svg";
90+
export { ReactComponent as QueryLibraryIcon } from "./remix/braces-line.svg";
9191
export { ReactComponent as TransformerIcon } from "./v1/icon-transformer.svg";
9292
export { ReactComponent as TempStateIcon } from "./v1/icon-temp-state.svg";
9393
export { ReactComponent as IconDep } from "./v1/icon-style-dep.svg";
@@ -145,6 +145,8 @@ export { ReactComponent as OracleIcon } from "./v1/icon-query-OracleDB.svg";
145145
export { ReactComponent as ClickHouseIcon } from "./v1/icon-query-ClickHouse.svg";
146146
export { ReactComponent as GoogleSheetsIcon } from "./v1/icon-query-GoogleSheets.svg";
147147
export { ReactComponent as GraphqlIcon } from "./v1/icon-query-Graphql.svg";
148+
export { ReactComponent as AlasqlIcon } from "./remix/database-2-line.svg";
149+
export { ReactComponent as StreamApiIcon } from "./remix/rfid-line.svg";
148150
export { ReactComponent as SnowflakeIcon } from "./v1/icon-query-snowflake.svg";
149151
export { ReactComponent as MariaDBIcon } from "./v1/icon-query-MariaDB.svg";
150152

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

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,11 @@ export function ResCreatePanel(props: ResCreateModalProps) {
265265
.map((id, idx) => (
266266
<ResButton key={idx} size={buttonSize} identifier={id} onSelect={onSelect} />
267267
))}
268+
<ResButton
269+
size={buttonSize}
270+
identifier={BottomResTypeEnum.Folder}
271+
onSelect={onSelect}
272+
/>
268273
</DataSourceListWrapper>
269274
</div>
270275

@@ -273,28 +278,8 @@ export function ResCreatePanel(props: ResCreateModalProps) {
273278
<div className="section-title">{trans("code")}</div>
274279
<div className="section">
275280
<DataSourceListWrapper $placement={placement}>
276-
<ResButton
277-
size={buttonSize}
278-
identifier={BottomResTypeEnum.TempState}
279-
onSelect={onSelect}
280-
/>
281-
<ResButton
282-
size={buttonSize}
283-
identifier={BottomResTypeEnum.Transformer}
284-
onSelect={onSelect}
285-
/>
286-
<ResButton
287-
size={buttonSize}
288-
identifier={BottomResTypeEnum.DateResponder}
289-
onSelect={onSelect}
290-
/>
291281
<ResButton size={buttonSize} identifier={"js"} onSelect={onSelect} />
292-
{!isPublicApp && <ResButton size={buttonSize} identifier={"libraryQuery"} onSelect={onSelect} /> }
293-
<ResButton
294-
size={buttonSize}
295-
identifier={BottomResTypeEnum.Folder}
296-
onSelect={onSelect}
297-
/>
282+
<ResButton size={buttonSize} identifier={BottomResTypeEnum.TempState} onSelect={onSelect} />
298283
</DataSourceListWrapper>
299284
</div>
300285
</>
@@ -334,13 +319,39 @@ export function ResCreatePanel(props: ResCreateModalProps) {
334319
</>
335320
)}
336321

337-
<div className="section-title">{trans("query.datasource")}</div>
322+
<div className="section-title">{trans("query.preparedDataQueries")}</div>
323+
<div className="section">
324+
{!isPublicApp && <ResButton size={buttonSize} identifier={"libraryQuery"} onSelect={onSelect} /> }
325+
</div>
326+
327+
<div className="section-title">{trans("query.adHocDataQueries")}</div>
338328
<div className="section">
339329
<DataSourceListWrapper $placement={placement}>
340330
<ResButton size={buttonSize} identifier={"restApi"} onSelect={onSelect} />
341331
<ResButton size={buttonSize} identifier={"streamApi"} onSelect={onSelect} />
342332
<ResButton size={buttonSize} identifier={"alasql"} onSelect={onSelect} />
343333
<ResButton size={buttonSize} identifier={"graphql"} onSelect={onSelect} />
334+
</DataSourceListWrapper>
335+
</div>
336+
337+
<div className="section-title">{trans("query.queryResultTransformer")}</div>
338+
<div className="section">
339+
<DataSourceListWrapper $placement={placement}>
340+
<ResButton size={buttonSize} identifier={BottomResTypeEnum.Transformer} onSelect={onSelect} />
341+
</DataSourceListWrapper>
342+
</div>
343+
344+
<div className="section-title">{trans("query.queryResultReactor")}</div>
345+
<div className="section">
346+
<DataSourceListWrapper $placement={placement}>
347+
<ResButton size={buttonSize} identifier={BottomResTypeEnum.DateResponder} onSelect={onSelect} />
348+
</DataSourceListWrapper>
349+
</div>
350+
351+
<div className="section-title">{trans("query.datasource")}</div>
352+
<div className="section">
353+
<DataSourceListWrapper $placement={placement}>
354+
344355
{datasource.map((i) => (
345356
<ResButton size={buttonSize} key={i.id} identifier={i} onSelect={onSelect} />
346357
))}

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -742,7 +742,11 @@ export const en = {
742742
"chooseDatabase": "Choose Database",
743743
"lowcoderAPI": "Lowcoder API",
744744
"executeJSCode": "Run JavaScript Code",
745-
"importFromQueryLibrary": "Import from Query Library",
745+
"importFromQueryLibrary": "Prepared Data Query",
746+
"preparedDataQueries" : "Your prepared Data Queries",
747+
"adHocDataQueries" : "Qick Data Queries (without prepared Query or Data Source)",
748+
"queryResultTransformer" : "Manipulate a Query Response to transform Data before binding",
749+
"queryResultReactor" : "React to any change of a dynamic Data value",
746750
"importFromFile": "Import from File",
747751
"triggerType": "Triggered when...",
748752
"triggerTypeAuto": "When Inputs Change or after Application (Page) loads",
@@ -3323,7 +3327,7 @@ export const en = {
33233327
"trash": "Trash",
33243328
"marketplace": "Marketplace",
33253329
"allCategories": "All Categories",
3326-
"queryLibrary": "Query Library",
3330+
"queryLibrary": "Data Queries",
33273331
"datasource": "Data Sources",
33283332
"selectDatasourceType": "Select Data Source Type",
33293333
"home": "Home",

‎client/packages/lowcoder/src/pages/ApplicationV2/index.tsx‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -220,14 +220,6 @@ export default function ApplicationHome() {
220220
{
221221
items: [
222222

223-
{
224-
text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
225-
routePath: QUERY_LIBRARY_URL,
226-
routeComp: QueryLibraryEditor,
227-
icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
228-
visible: ({ user }) => user.orgDev,
229-
mobileVisible: false,
230-
},
231223
{
232224
text: <TabLabel>{trans("home.datasource")}</TabLabel>,
233225
routePath: DATASOURCE_URL,
@@ -238,22 +230,18 @@ export default function ApplicationHome() {
238230
onSelected: (_, currentPath) => currentPath.split("/")[1] === "datasource",
239231
mobileVisible: false,
240232
},
241-
],
242-
},
243-
isEE() ? {
244-
items: [
245233
{
246-
text: <TabLabel>{trans("settings.AppUsage")}</TabLabel>,
247-
routePath: "/ee/6600ae8724a23f365ba2ed4c/admin",
248-
routePathExact: false,
249-
routeComp: AppEditor,
250-
icon: ({ selected, ...otherProps }) => selected ? ( <EnterpriseIcon {...otherProps} width={"24px"}/> ) : ( <EnterpriseIcon {...otherProps} width={"24px"}/> ),
234+
text: <TabLabel>{trans("home.queryLibrary")}</TabLabel>,
235+
routePath: QUERY_LIBRARY_URL,
236+
routeComp: QueryLibraryEditor,
237+
icon: ({ selected, ...otherProps }) => selected ? <HomeQueryLibraryIcon {...otherProps} width={"24px"}/> : <HomeQueryLibraryIcon {...otherProps} width={"24px"}/>,
251238
visible: ({ user }) => user.orgDev,
252239
mobileVisible: false,
253-
},
240+
}
254241
],
255-
} : { items: [] },
256-
242+
},
243+
244+
// Show Subscription if not yet subscribed
257245
!supportSubscription && user.orgDev ? {
258246
items: [
259247
{
@@ -267,6 +255,7 @@ export default function ApplicationHome() {
267255
],
268256
} : { items: [] },
269257

258+
// show Support Section when an active Subscription exist
270259
supportSubscription && user.orgDev ? {
271260
items: [
272261
{

‎client/packages/lowcoder/src/pages/setting/audit/index.tsx‎

Lines changed: 167 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,169 @@
1+
import { HelpText } from "components/HelpText";
2+
import { GreyTextColor } from "constants/style";
3+
import { lazy, useEffect, useState, useRef } from "react";
4+
import { useDispatch, useSelector } from "react-redux";
5+
import { fetchCommonSettings } from "redux/reduxActions/commonSettingsActions";
6+
import { getCommonSettings } from "redux/selectors/commonSettingSelectors";
7+
import { fetchAPIUsageAction, fetchLastMonthAPIUsageAction } from "redux/reduxActions/orgActions";
8+
import { getUser } from "redux/selectors/usersSelectors";
9+
import { getOrgApiUsage, getOrgLastMonthApiUsage } from "redux/selectors/orgSelectors";
10+
import styled from "styled-components";
11+
import { useShallowEqualSelector } from "util/hooks";
12+
import { Level1SettingPageContent, Level1SettingPageTitle } from "../styled";
13+
import { fetchAllApplications } from "redux/reduxActions/applicationActions";
14+
import { trans } from "i18n";
15+
import { Location } from "history";
16+
import Divider from "antd/es/divider";
17+
import { CustomSelect, TacoButton } from "lowcoder-design";
18+
import { getDeploymentId } from "@lowcoder-ee/redux/selectors/configSelectors";
19+
20+
const AdvancedSettingContent = styled.div`
21+
max-width: 840px;
22+
23+
.section-title {
24+
font-size: 14px;
25+
font-weight: 500;
26+
margin-bottom: 8px;
27+
}
28+
29+
.section-content {
30+
margin-bottom: 28px;
31+
}
32+
33+
.section-option {
34+
color: ${GreyTextColor};
35+
margin-bottom: 14px;
36+
font-size: 13px;
37+
}
38+
39+
.code-editor {
40+
margin-bottom: 12px;
41+
}
42+
`;
43+
44+
const SaveButton = styled(TacoButton)`
45+
padding: 4px 8px;
46+
min-width: 84px;
47+
height: 32px;
48+
`;
49+
50+
const CustomSelectStyle = styled(CustomSelect)`
51+
.ant-select .ant-select-selector .ant-select-selection-item {
52+
max-width: 230px;
53+
display: block;
54+
}
55+
`;
56+
57+
const HubspotFormContainer = styled.div`
58+
max-width: 100%;
59+
width: 100%;
60+
.hs-form {
61+
max-width: 100% !important;
62+
}
63+
`;
64+
65+
let locationInfo: Location | Location<unknown> | null = null;
66+
67+
declare global {
68+
interface Window {
69+
hbspt: {
70+
forms: {
71+
create: (options: {
72+
region: string;
73+
portalId: string;
74+
formId: string;
75+
target: string | HTMLElement | null;
76+
}) => void;
77+
};
78+
};
79+
}
80+
}
81+
182
export default function Audit() {
2-
return null;
83+
const dispatch = useDispatch();
84+
const currentUser = useSelector(getUser);
85+
const commonSettings = useShallowEqualSelector(getCommonSettings);
86+
const [settings, setSettings] = useState(commonSettings);
87+
const deploymentId = useSelector(getDeploymentId);
88+
89+
90+
const apiUsage = useSelector(getOrgApiUsage);
91+
useEffect(() => {
92+
dispatch(fetchAPIUsageAction(currentUser.currentOrgId));
93+
}, [currentUser.currentOrgId])
94+
95+
const lastMonthApiUsage = useSelector(getOrgLastMonthApiUsage);
96+
useEffect(() => {
97+
dispatch(fetchLastMonthAPIUsageAction(currentUser.currentOrgId));
98+
}, [currentUser.currentOrgId])
99+
100+
useEffect(() => {
101+
dispatch(fetchCommonSettings({ orgId: currentUser.currentOrgId }));
102+
dispatch(fetchAllApplications({}));
103+
}, [currentUser.currentOrgId, dispatch]);
104+
105+
useEffect(() => {
106+
setSettings(commonSettings);
107+
}, [commonSettings]);
108+
109+
useEffect(() => {
110+
dispatch(fetchCommonSettings({ orgId: currentUser.currentOrgId }));
111+
}, [currentUser.currentOrgId, dispatch]);
112+
113+
const formRef = useRef<HTMLDivElement>(null);
114+
115+
useEffect(() => {
116+
const scriptId = "hubspot-script";
117+
118+
// Prevent re-adding the script
119+
const existingScript = document.getElementById(scriptId) as HTMLScriptElement;
120+
121+
const createForm = () => {
122+
// Wait a tick to ensure #hubspot-form is in the DOM
123+
setTimeout(() => {
124+
if (window.hbspt && document.querySelector("#hubspot-form")) {
125+
window.hbspt.forms.create({
126+
region: "eu1",
127+
portalId: "144574215",
128+
formId: "f03697ad-62cf-4161-a3de-228a2db1180b",
129+
target: "#hubspot-form"
130+
});
131+
}
132+
}, 0);
133+
};
134+
135+
if (!existingScript) {
136+
const script = document.createElement("script");
137+
script.src = "https://js-eu1.hsforms.net/forms/embed/v2.js";
138+
script.async = true;
139+
script.defer = true;
140+
script.id = scriptId;
141+
script.onload = createForm;
142+
document.body.appendChild(script);
143+
} else {
144+
if (window.hbspt) {
145+
createForm();
146+
} else {
147+
existingScript.addEventListener("load", createForm);
148+
}
149+
}
150+
}, []);
151+
152+
153+
154+
return (
155+
<Level1SettingPageContent>
156+
<Level1SettingPageTitle>{trans("advanced.title")}</Level1SettingPageTitle>
157+
<AdvancedSettingContent>
158+
<div className="section-title">{trans("advanced.defaultHomeTitle")}</div>
159+
<HelpText style={{ marginBottom: 12 }}>{trans("advanced.defaultHomeHelp")}</HelpText>
160+
<div className="section-content">
161+
<Divider />
162+
<HubspotFormContainer>
163+
<div id="hubspot-form" />
164+
</HubspotFormContainer>
165+
</div>
166+
</AdvancedSettingContent>
167+
</Level1SettingPageContent>
168+
);
3169
}

‎client/packages/lowcoder/src/util/bottomResUtils.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import {
2424
QueryLibraryIcon,
2525
RedisIcon,
2626
RestApiIcon,
27+
AlasqlIcon,
28+
StreamApiIcon,
2729
SMTPIcon,
2830
SnowflakeIcon,
2931
TempStateIcon,
@@ -106,6 +108,10 @@ export const getBottomResIcon = (
106108
return <MysqlIcon />;
107109
case "mongodb":
108110
return <MongoIcon />;
111+
case "streamApi":
112+
return <StreamApiIcon />;
113+
case "alasql":
114+
return <AlasqlIcon />;
109115
case "restApi":
110116
return httpMethod ? HttpMethodIcon[httpMethod] : <RestApiIcon />;
111117
case "postgres":

0 commit comments

Comments
 (0)