Skip to content

Commit 1c3716c

Browse files
author
FalkWolsky
committed
Cleaning up Data Sources Display
1 parent dfd71b5 commit 1c3716c

File tree

41 files changed

+175
-113
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+175
-113
lines changed

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -744,7 +744,19 @@ export const en = {
744744
"jsQueryDocLink": "About JavaScript Query",
745745
"dynamicDataSourceConfigLoadingText": "Loading extra datasource configuration...",
746746
"dynamicDataSourceConfigErrText": "Failed to load extra datasource configuration.",
747-
"retry": "Retry"
747+
"retry": "Retry",
748+
"categoryDatabase" : "Database",
749+
"categoryBigdata" : "Big Data",
750+
"categoryAi" : "AI",
751+
"categoryDevops" : "DevOps",
752+
"categoryAppdevelopment" : "App Development",
753+
"categoryWorkflow" : "Workflow",
754+
"categoryMessaging" : "Messaging",
755+
"categoryAssets" : "Assets & Storage",
756+
"categoryProjectManagement" : "Project Management",
757+
"categoryCrm" : "CRM",
758+
"categoryEcommerce" : "E-commerce",
759+
"categoryApis" : "Others",
748760
},
749761

750762

‎client/packages/lowcoder/src/pages/datasource/pluginPanel.tsx

Lines changed: 59 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -103,12 +103,59 @@ export const localeContains = (str: string, sub: string): boolean => {
103103
return ascii(str).includes(ascii(sub));
104104
}
105105

106+
// Define interfaces
107+
interface Category {
108+
label: string;
109+
filter: (t: DataSourceTypeInfo) => boolean;
110+
}
111+
112+
interface SectionProps {
113+
label: string;
114+
filter: (t: DataSourceTypeInfo) => boolean;
115+
datasourceTypes: DataSourceTypeInfo[];
116+
searchValue: string;
117+
onSelect: (t: DataSourceTypeInfo) => void;
118+
}
119+
120+
const categories: Category[] = [
121+
{ label: trans("query.database"), filter: (t) => databasePlugins.includes(t.id) || t.id == "googleSheets" || t.definition?.category === "database" },
122+
{ label: trans("query.categoryBigdata"), filter: (t) => t.definition?.category === "Big Data" },
123+
{ label: trans("query.categoryAi"), filter: (t) => t.definition?.category === "AI" },
124+
{ label: trans("query.categoryDevops"), filter: (t) => t.definition?.category === "DevOps" },
125+
{ label: trans("query.categoryAppdevelopment"), filter: (t) => t.id == "restApi" || t.id == "graphql" || t.definition?.category === "App Development" },
126+
{ label: trans("query.categoryWorkflow"), filter: (t) => t.definition?.category === "Workflow" },
127+
{ label: trans("query.categoryMessaging"), filter: (t) => t.id == "smtp" || t.definition?.category === "Messaging" },
128+
{ label: trans("query.categoryAssets"), filter: (t) => t.definition?.category === "Assets" },
129+
{ label: trans("query.categoryProjectManagement"), filter: (t) => t.definition?.category === "Project Management" },
130+
{ label: trans("query.categoryCrm"), filter: (t) => t.definition?.category === "CRM" },
131+
{ label: trans("query.categoryEcommerce"), filter: (t) => t.definition?.category === "eCommerce" },
132+
{ label: trans("query.categoryApis"), filter: (t) => t.definition?.category === "api" },
133+
];
134+
135+
// Section component
136+
const Section: React.FC<SectionProps> = ({ label, filter, datasourceTypes, searchValue, onSelect }) => (
137+
<SectionWrapper>
138+
<SectionLabel>{label}</SectionLabel>
139+
<SectionBody>
140+
{datasourceTypes
141+
.filter(filter)
142+
.filter((t) => localeContains(t.name, searchValue))
143+
.map((t) => (
144+
<DataSourceButton key={t.id} onClick={() => onSelect(t)}>
145+
{t.id && getBottomResIcon(t.id, "large", t.definition?.icon)}
146+
{t.name}
147+
</DataSourceButton>
148+
))}
149+
</SectionBody>
150+
</SectionWrapper>
151+
);
152+
106153
export const PluginPanel = (props: { onSelect: (t: DataSourceTypeInfo) => void }) => {
107154
const datasourceTypes = useSelector(getDataSourceTypes);
108155
const currentPage = useCurrentPage();
109156
const [searchValue, setSearchValue] = useState("");
110157
const apiList = currentPage === "queryLibrary" ? apiPluginsForQueryLibrary : apiPlugins;
111-
158+
112159
return (
113160
<PanelWrapper>
114161
<OperationRightWrapper>
@@ -119,36 +166,16 @@ export const PluginPanel = (props: { onSelect: (t: DataSourceTypeInfo) => void }
119166
style={{ width: "192px", height: "32px", margin: "0" }}
120167
/>
121168
</OperationRightWrapper>
122-
<SectionWrapper>
123-
<SectionLabel>{trans("query.database")}</SectionLabel>
124-
<SectionBody>
125-
{datasourceTypes
126-
.filter((t) => databasePlugins.includes(t.id) || t.definition?.category === "database")
127-
.filter((t) => localeContains(t.name, searchValue))
128-
.map((t) => {
129-
return (
130-
<DataSourceButton key={t.id} onClick={() => props.onSelect(t)}>
131-
{t.id && getBottomResIcon(t.id, "large", t.definition?.icon)}
132-
{t.name}
133-
</DataSourceButton>
134-
);
135-
})}
136-
</SectionBody>
137-
</SectionWrapper>
138-
<SectionWrapper>
139-
<SectionLabel>APIs</SectionLabel>
140-
<SectionBody>
141-
{datasourceTypes
142-
.filter((t) => apiList.includes(t.id) || t.definition?.category === "api")
143-
.filter((t) => localeContains(t.name, searchValue))
144-
.map((t) => (
145-
<DataSourceButton key={t.id} onClick={() => props.onSelect(t)}>
146-
{t.id && getBottomResIcon(t.id, "large", t.definition?.icon)}
147-
{t.name}
148-
</DataSourceButton>
149-
))}
150-
</SectionBody>
151-
</SectionWrapper>
169+
{categories.map(({ label, filter }) => (
170+
<Section
171+
key={label}
172+
label={label}
173+
filter={filter}
174+
datasourceTypes={datasourceTypes}
175+
searchValue={searchValue}
176+
onSelect={props.onSelect}
177+
/>
178+
))}
152179
</PanelWrapper>
153180
);
154-
};
181+
};

‎server/node-service/src/plugins/appconfig/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ function getAppConfigDataClient(dataSourceConfig: DataSourceDataType) {
5656

5757
const appConfigPlugin: DataSourcePlugin<ActionDataType, DataSourceDataType> = {
5858
id: "appconfig",
59-
name: "AppConfig",
60-
category: "api",
59+
name: "AWS AppConfig",
60+
category: "DevOps",
6161
icon: "appconfig.svg",
6262
dataSourceConfig,
6363
queryConfig,

‎server/node-service/src/plugins/asana/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const asanaPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
3939
id: "asana",
4040
name: "Asana",
4141
icon: "asana.svg",
42-
category: "api",
42+
category: "Project Management",
4343
dataSourceConfig,
4444
queryConfig: async () => {
4545
const { actions, categories } = await parseOpenApi(spec as OpenAPI.Document, parseOptions);

‎server/node-service/src/plugins/athena/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ const timeout = 1000 * 60; // 60s
4040

4141
const athenaPlugin: DataSourcePlugin<ActionDataType, DataSourceDataType> = {
4242
id: "athena",
43-
name: "Athena",
44-
category: "api",
43+
name: "AWS Athena",
44+
category: "Big Data",
4545
icon: "athena.svg",
4646
dataSourceConfig,
4747
queryConfig,

‎server/node-service/src/plugins/bigQuery/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import run, { validateDataSourceConfig } from "./run";
55

66
const bigQueryPlugin = {
77
id: "bigQuery",
8-
name: "Big Query",
8+
name: "Google Big Query",
99
icon: "bigQuery.svg",
10-
category: "database",
10+
category: "Big Data",
1111
dataSourceConfig,
1212
queryConfig: queryConfig,
1313

‎server/node-service/src/plugins/circleCi/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const circleCiPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
3131
id: "circleCi",
3232
name: "CircleCI",
3333
icon: "circleCI.svg",
34-
category: "api",
34+
category: "DevOps",
3535
dataSourceConfig,
3636
queryConfig: async () => {
3737
const { actions, categories } = await parseOpenApi(

‎server/node-service/src/plugins/cloudinary/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const cloudinaryPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
5252
id: "cloudinary",
5353
name: "Cloudinary",
5454
icon: "cloudinary.svg",
55-
category: "api",
55+
category: "Assets",
5656
dataSourceConfig,
5757
queryConfig: async () => {
5858
if (!queryConfig) {

‎server/node-service/src/plugins/datadog/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const datadogPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
4545
id: "datadog",
4646
name: "Datadog",
4747
icon: "datadog.svg",
48-
category: "api",
48+
category: "DevOps",
4949
dataSourceConfig,
5050
queryConfig: async () => {
5151
const { actions, categories } = await parseOpenApi(spec, parseOptions);

‎server/node-service/src/plugins/did/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const didPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
6161
id: "did",
6262
name: "D-ID",
6363
icon: "did.svg",
64-
category: "api",
64+
category: "AI",
6565
dataSourceConfig,
6666
queryConfig: async () => {
6767
if (!queryConfig) {

0 commit comments

Comments
 (0)