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) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const faunaPlugin: DataSourcePlugin<
4242
> = {
4343
id: "fauna",
4444
name: "Fauna",
45-
category: "api",
45+
category: "database",
4646
icon: "fauna.svg",
4747
dataSourceConfig,
4848
queryConfig: graphQLQueryConfig,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { runFirebasePlugin } from "./run";
66
const firebasePlugin: DataSourcePlugin<ActionDataType, DataSourceDataType> = {
77
id: "firebase",
88
icon: "firebase.svg",
9-
name: "Firebase",
10-
category: "api",
9+
name: "Google Firebase",
10+
category: "App Development",
1111
queryConfig,
1212
dataSourceConfig,
1313
run: function (actionData, dataSourceConfig): Promise<any> {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const frontPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
3232
id: "front",
3333
name: "Front",
3434
icon: "front.svg",
35-
category: "api",
35+
category: "CRM",
3636
dataSourceConfig,
3737
queryConfig: async () => {
3838
const { actions, categories } = await parseOpenApi(spec as OpenAPI.Document, parseOptions);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const gitHubPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
4343
id: "github",
4444
name: "GitHub",
4545
icon: "github.svg",
46-
category: "api",
46+
category: "App Development",
4747
dataSourceConfig,
4848
queryConfig: async () => {
4949
const { actions, categories } = await parseOpenApi(spec, parseOptions);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const gitlabPlugin: DataSourcePlugin<
3434
> = {
3535
id: "gitlab",
3636
name: "Gitlab",
37-
category: "api",
37+
category: "App Development",
3838
icon: "gitlab.svg",
3939
dataSourceConfig,
4040
queryConfig: graphQLQueryConfig,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const gcsPlugin = {
1111
id: "googleCloudStorage",
1212
name: "Google Cloud Storage",
1313
icon: "gcs.svg",
14-
category: "api",
14+
category: "Assets",
1515
dataSourceConfig,
1616
queryConfig: queryConfig,
1717

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const huggingFacePlugin: DataSourcePlugin<any, DataSourceConfigType> = {
4040
id: "huggingFaceEndpoint",
4141
name: "Hugging Face Endpoints",
4242
icon: "huggingFace.svg",
43-
category: "api",
43+
category: "AI",
4444
dataSourceConfig,
4545
queryConfig: async () => {
4646
const { actions, categories } = await parseOpenApi(

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const huggingFaceInferencePlugin: DataSourcePlugin<ActionConfigType, DataSourceC
5050
id: "huggingFaceInference",
5151
name: "Hugging Face Inference",
5252
icon: "huggingFace.svg",
53-
category: "api",
53+
category: "AI",
5454
dataSourceConfig,
5555
queryConfig,
5656
run: async (actionData, dataSourceConfig) => {

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

Lines changed: 50 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -39,44 +39,66 @@ import lowcoderPlugin from "./lowcoder";
3939
import supabaseApiPlugin from "./supabaseApi";
4040

4141
let plugins: (DataSourcePlugin | DataSourcePluginFactory)[] = [
42-
s3Plugin,
43-
openApiPlugin,
44-
n8nPlugin,
42+
43+
// Databases
4544
dynamoDBPlugin,
46-
firebasePlugin,
4745
couchdbPlugin,
48-
wooCommercePlugin,
49-
openAiPlugin,
50-
athenaPlugin,
5146
duckdbPlugin,
52-
lambdaPlugin,
53-
googleCloudStorage,
54-
stripePlugin,
55-
asanaPlugin,
56-
circleCiPlugin,
57-
frontPlugin,
58-
githubPlugin,
47+
faunaPlugin,
48+
tursoPlugin,
49+
50+
// Big Data
51+
athenaPlugin,
52+
bigQueryPlugin,
53+
54+
// AI
55+
openAiPlugin,
5956
huggingFacePlugin,
6057
huggingFaceInferencePlugin,
61-
jiraPlugin,
62-
oneSignalPlugin,
63-
sendGridPlugin,
64-
shopifyPlugin,
65-
slackPlugin,
66-
supabasePlugin,
67-
cloudinaryPlugin,
68-
notionPlugin,
69-
datadogPlugin,
70-
twilioPlugin,
71-
gitlabPlugin,
72-
faunaPlugin,
7358
didPlugin,
74-
bigQueryPlugin,
59+
60+
//DevOps
7561
appConfigPlugin,
76-
tursoPlugin,
62+
datadogPlugin,
63+
circleCiPlugin,
64+
65+
// App Development
66+
openApiPlugin,
7767
postmanEchoPlugin,
7868
lowcoderPlugin,
69+
githubPlugin,
70+
gitlabPlugin,
71+
lambdaPlugin,
72+
firebasePlugin,
7973
supabaseApiPlugin,
74+
75+
// Workflow
76+
n8nPlugin,
77+
78+
// Messaging
79+
twilioPlugin,
80+
sendGridPlugin,
81+
oneSignalPlugin,
82+
83+
// Assets
84+
s3Plugin,
85+
googleCloudStorage,
86+
supabasePlugin,
87+
cloudinaryPlugin,
88+
89+
// Project Management
90+
asanaPlugin,
91+
jiraPlugin,
92+
notionPlugin,
93+
slackPlugin,
94+
95+
// CRM
96+
frontPlugin,
97+
98+
// E-commerce
99+
stripePlugin,
100+
shopifyPlugin,
101+
wooCommercePlugin,
80102
];
81103

82104
try {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const jiraPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
5656
id: "jira",
5757
name: "Jira",
5858
icon: "jira.svg",
59-
category: "api",
59+
category: "Project Management",
6060
dataSourceConfig,
6161
queryConfig: async () => {
6262
if (!queryConfig) {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ function getClient(dataSourceConfig: DataSourceDataType) {
2424

2525
const lambdaPlugin: DataSourcePlugin<ActionDataType, DataSourceDataType> = {
2626
id: "lambda",
27-
name: "Lambda",
28-
category: "api",
27+
name: "AWS Lambda",
28+
category: "App Development",
2929
icon: "lambda.svg",
3030
dataSourceConfig,
3131
queryConfig,

0 commit comments

Comments
 (0)