Cleaning up Data Sources Display

Author: FalkWolsky

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

@@ -744,7 +744,19 @@ export const en = {
     "jsQueryDocLink": "About JavaScript Query",
     "dynamicDataSourceConfigLoadingText": "Loading extra datasource configuration...",
     "dynamicDataSourceConfigErrText": "Failed to load extra datasource configuration.",
-    "retry": "Retry"
+    "retry": "Retry",
+    "categoryDatabase" : "Database",
+    "categoryBigdata" : "Big Data",
+    "categoryAi" : "AI",
+    "categoryDevops" : "DevOps",
+    "categoryAppdevelopment" : "App Development",
+    "categoryWorkflow" : "Workflow",
+    "categoryMessaging" : "Messaging",
+    "categoryAssets" : "Assets & Storage",
+    "categoryProjectManagement" : "Project Management",
+    "categoryCrm" : "CRM",
+    "categoryEcommerce" : "E-commerce",
+    "categoryApis" : "Others",
   },
 
 

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

@@ -103,12 +103,59 @@ export const localeContains = (str: string, sub: string): boolean => {
   return ascii(str).includes(ascii(sub));
 }
 
+// Define interfaces
+interface Category {
+  label: string;
+  filter: (t: DataSourceTypeInfo) => boolean;
+}
+
+interface SectionProps {
+  label: string;
+  filter: (t: DataSourceTypeInfo) => boolean;
+  datasourceTypes: DataSourceTypeInfo[];
+  searchValue: string;
+  onSelect: (t: DataSourceTypeInfo) => void;
+}
+
+const categories: Category[] = [
+  { label: trans("query.database"), filter: (t) => databasePlugins.includes(t.id) || t.id == "googleSheets" || t.definition?.category === "database" },
+  { label: trans("query.categoryBigdata"), filter: (t) => t.definition?.category === "Big Data" },
+  { label: trans("query.categoryAi"), filter: (t) => t.definition?.category === "AI" },
+  { label: trans("query.categoryDevops"), filter: (t) => t.definition?.category === "DevOps" },
+  { label: trans("query.categoryAppdevelopment"), filter: (t) => t.id == "restApi" || t.id == "graphql" || t.definition?.category === "App Development" },
+  { label: trans("query.categoryWorkflow"), filter: (t) => t.definition?.category === "Workflow" },
+  { label: trans("query.categoryMessaging"), filter: (t) => t.id == "smtp" || t.definition?.category === "Messaging" },
+  { label: trans("query.categoryAssets"), filter: (t) => t.definition?.category === "Assets" },
+  { label: trans("query.categoryProjectManagement"), filter: (t) => t.definition?.category === "Project Management" },
+  { label: trans("query.categoryCrm"), filter: (t) => t.definition?.category === "CRM" },
+  { label: trans("query.categoryEcommerce"), filter: (t) => t.definition?.category === "eCommerce" },
+  { label: trans("query.categoryApis"), filter: (t) => t.definition?.category === "api" },
+];
+
+// Section component
+const Section: React.FC<SectionProps> = ({ label, filter, datasourceTypes, searchValue, onSelect }) => (
+  <SectionWrapper>
+    <SectionLabel>{label}</SectionLabel>
+    <SectionBody>
+      {datasourceTypes
+        .filter(filter)
+        .filter((t) => localeContains(t.name, searchValue))
+        .map((t) => (
+          <DataSourceButton key={t.id} onClick={() => onSelect(t)}>
+            {t.id && getBottomResIcon(t.id, "large", t.definition?.icon)}
+            {t.name}
+          </DataSourceButton>
+        ))}
+    </SectionBody>
+  </SectionWrapper>
+);
+
 export const PluginPanel = (props: { onSelect: (t: DataSourceTypeInfo) => void }) => {
   const datasourceTypes = useSelector(getDataSourceTypes);
   const currentPage = useCurrentPage();
   const [searchValue, setSearchValue] = useState("");
   const apiList = currentPage === "queryLibrary" ? apiPluginsForQueryLibrary : apiPlugins;
-  
+
   return (
     <PanelWrapper>
       <OperationRightWrapper>
@@ -119,36 +166,16 @@ export const PluginPanel = (props: { onSelect: (t: DataSourceTypeInfo) => void }
           style={{ width: "192px", height: "32px", margin: "0" }}
         />
       </OperationRightWrapper>
-      <SectionWrapper>
-        <SectionLabel>{trans("query.database")}</SectionLabel>
-        <SectionBody>
-          {datasourceTypes
-            .filter((t) => databasePlugins.includes(t.id) || t.definition?.category === "database")
-            .filter((t) => localeContains(t.name, searchValue))
-            .map((t) => {
-              return (
-                <DataSourceButton key={t.id} onClick={() => props.onSelect(t)}>
-                  {t.id && getBottomResIcon(t.id, "large", t.definition?.icon)}
-                  {t.name}
-                </DataSourceButton>
-              );
-            })}
-        </SectionBody>
-      </SectionWrapper>
-      <SectionWrapper>
-        <SectionLabel>APIs</SectionLabel>
-        <SectionBody>
-          {datasourceTypes
-            .filter((t) => apiList.includes(t.id) || t.definition?.category === "api")
-            .filter((t) => localeContains(t.name, searchValue))
-            .map((t) => (
-              <DataSourceButton key={t.id} onClick={() => props.onSelect(t)}>
-                {t.id && getBottomResIcon(t.id, "large", t.definition?.icon)}
-                {t.name}
-              </DataSourceButton>
-            ))}
-        </SectionBody>
-      </SectionWrapper>
+      {categories.map(({ label, filter }) => (
+        <Section
+          key={label}
+          label={label}
+          filter={filter}
+          datasourceTypes={datasourceTypes}
+          searchValue={searchValue}
+          onSelect={props.onSelect}
+        />
+      ))}
     </PanelWrapper>
   );
-};
+};

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

@@ -56,8 +56,8 @@ function getAppConfigDataClient(dataSourceConfig: DataSourceDataType) {
 
 const appConfigPlugin: DataSourcePlugin<ActionDataType, DataSourceDataType> = {
   id: "appconfig",
-  name: "AppConfig",
-  category: "api",
+  name: "AWS AppConfig",
+  category: "DevOps",
   icon: "appconfig.svg",
   dataSourceConfig,
   queryConfig,

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

@@ -39,7 +39,7 @@ const asanaPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
   id: "asana",
   name: "Asana",
   icon: "asana.svg",
-  category: "api",
+  category: "Project Management",
   dataSourceConfig,
   queryConfig: async () => {
     const { actions, categories } = await parseOpenApi(spec as OpenAPI.Document, parseOptions);

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

@@ -40,8 +40,8 @@ const timeout = 1000 * 60; // 60s
 
 const athenaPlugin: DataSourcePlugin<ActionDataType, DataSourceDataType> = {
   id: "athena",
-  name: "Athena",
-  category: "api",
+  name: "AWS Athena",
+  category: "Big Data",
   icon: "athena.svg",
   dataSourceConfig,
   queryConfig,

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

@@ -5,9 +5,9 @@ import run, { validateDataSourceConfig } from "./run";
 
 const bigQueryPlugin = {
   id: "bigQuery",
-  name: "Big Query",
+  name: "Google Big Query",
   icon: "bigQuery.svg",
-  category: "database",
+  category: "Big Data",
   dataSourceConfig,
   queryConfig: queryConfig,
 

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

@@ -31,7 +31,7 @@ const circleCiPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
   id: "circleCi",
   name: "CircleCI",
   icon: "circleCI.svg",
-  category: "api",
+  category: "DevOps",
   dataSourceConfig,
   queryConfig: async () => {
     const { actions, categories } = await parseOpenApi(

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

@@ -52,7 +52,7 @@ const cloudinaryPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
   id: "cloudinary",
   name: "Cloudinary",
   icon: "cloudinary.svg",
-  category: "api",
+  category: "Assets",
   dataSourceConfig,
   queryConfig: async () => {
     if (!queryConfig) {

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

@@ -45,7 +45,7 @@ const datadogPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
   id: "datadog",
   name: "Datadog",
   icon: "datadog.svg",
-  category: "api",
+  category: "DevOps",
   dataSourceConfig,
   queryConfig: async () => {
     const { actions, categories } = await parseOpenApi(spec, parseOptions);

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

@@ -61,7 +61,7 @@ const didPlugin: DataSourcePlugin<any, DataSourceConfigType> = {
   id: "did",
   name: "D-ID",
   icon: "did.svg",
-  category: "api",
+  category: "AI",
   dataSourceConfig,
   queryConfig: async () => {
     if (!queryConfig) {