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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy