Added common data sources

frontend/src/Editor/DataSourceManager/SourceComponents/index.js

@@ -7,6 +7,30 @@ import RunpySchema from './Runpy.schema.json';
 // eslint-disable-next-line import/no-unresolved
 import { allManifests } from '@tooljet/plugins/client';
 
+//Commonly Used DS
+
+export const CommonlyUsedDataSources = Object.keys(allManifests)
+  .reduce((accumulator, currentValue) => {
+    const sourceName = allManifests[currentValue]?.source?.name;
+    if (
+      sourceName === 'Rest API' ||
+      sourceName === 'MongoDB' ||
+      sourceName === 'Airtable' ||
+      sourceName === 'Google Sheets' ||
+      sourceName === 'PostgreSQL'
+    ) {
+      const _source = allManifests[currentValue].source;
+      const def = allManifests[currentValue]?.defaults ?? {};
+      accumulator.push({ ..._source, defaults: def });
+    }
+
+    return accumulator;
+  }, [])
+  .sort((a, b) => {
+    const order = ['Rest API', 'PostgreSQL', 'Google Sheets', 'Airtable', 'MongoDB'];
+    return order.indexOf(a.name) - order.indexOf(b.name);
+  });
+
 export const DataBaseSources = Object.keys(allManifests).reduce((accumulator, currentValue) => {
   if (allManifests[currentValue].type === 'database') {
     const _source = allManifests[currentValue].source;
@@ -39,7 +63,13 @@ export const CloudStorageSources = Object.keys(allManifests).reduce((accumulator
 }, []);
 
 export const OtherSources = [RunjsSchema.source, RunpySchema.source, TooljetDbSchema.source];
-export const DataSourceTypes = [...DataBaseSources, ...ApiSources, ...CloudStorageSources, ...OtherSources];
+export const DataSourceTypes = [
+  ...DataBaseSources,
+  ...ApiSources,
+  ...CloudStorageSources,
+  ...OtherSources,
+  ...CommonlyUsedDataSources,
+];
 
 export const SourceComponents = Object.keys(allManifests).reduce((accumulator, currentValue) => {
   accumulator[currentValue] = (props) => <DynamicForm schema={allManifests[currentValue]} isGDS={true} {...props} />;

frontend/src/GlobalDatasources/GlobalDataSourcesPage/index.jsx

@@ -7,7 +7,12 @@ import { isEmpty } from 'lodash';
 import { Sidebar } from '../Sidebar';
 import { GlobalDataSourcesContext } from '..';
 import { DataSourceManager } from '@/Editor/DataSourceManager';
-import { DataBaseSources, ApiSources, CloudStorageSources } from '@/Editor/DataSourceManager/SourceComponents';
+import {
+  DataBaseSources,
+  ApiSources,
+  CloudStorageSources,
+  CommonlyUsedDataSources,
+} from '@/Editor/DataSourceManager/SourceComponents';
 import { pluginsService, globalDatasourceService, authenticationService } from '@/_services';
 import { Card } from '@/_ui/Card';
 import { SegregatedList } from '../SegregatedList';
@@ -332,13 +337,21 @@ export const GlobalDataSourcesPage = ({ darkMode = false, updateSelectedDatasour
 
   const datasourcesGroups = () => {
     const allDataSourcesList = {
+      common: CommonlyUsedDataSources,
       databases: DataBaseSources,
       apis: ApiSources,
       cloudStorages: CloudStorageSources,
       plugins: plugins,
       filteredDatasources: filteredDataSources,
     };
     const dataSourceList = [
+      {
+        type: 'Commonly used',
+        key: '#commonlyused',
+        list: allDataSourcesList.common,
+        renderDatasources: () => renderCardGroup(allDataSourcesList.common, 'Commonly used'),
+      },
+
       {
         type: 'Databases',
         key: '#databases',

frontend/src/GlobalDatasources/SegregatedList/index.js

@@ -8,7 +8,7 @@ export const SegregatedList = ({ dataSources, activeDatasourceList, handleOnSele
   return (
     <>
       <div className="datasources-info tj-text-xsm datasource-list-header" data-cy="datasource-list-header">
-        All data sources {totalDataSources > 0 && `(${totalDataSources})`}
+        All data sources {totalDataSources > 0 && `(${totalDataSources - 5})`}
       </div>
       {dataSources
         .filter((ds) => ds.list.length > 0 || ds.type === 'Plugins')

frontend/src/GlobalDatasources/index.jsx

@@ -22,7 +22,7 @@ export const GlobalDatasources = (props) => {
   const [isLoading, setLoading] = useState(true);
   const [environments, setEnvironments] = useState([]);
   const [currentEnvironment, setCurrentEnvironment] = useState(null);
-  const [activeDatasourceList, setActiveDatasourceList] = useState('#databases');
+  const [activeDatasourceList, setActiveDatasourceList] = useState('#commonlyused');
   const navigate = useNavigate();
   const { updateSidebarNAV } = useContext(BreadCrumbContext);
 
@@ -31,13 +31,13 @@ export const GlobalDatasources = (props) => {
   }
 
   useEffect(() => {
-    if (dataSources?.length == 0) updateSidebarNAV('Databases');
+    if (dataSources?.length == 0) updateSidebarNAV('Commonly used');
   }, []);
 
   useEffect(() => {
     selectedDataSource
       ? updateSidebarNAV(selectedDataSource.name)
-      : !activeDatasourceList && updateSidebarNAV('Databases');
+      : !activeDatasourceList && updateSidebarNAV('Commonly used');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(dataSources), JSON.stringify(selectedDataSource)]);
 
@@ -82,10 +82,10 @@ export const GlobalDatasources = (props) => {
           toggleDataSourceManagerModal(true);
         }
         if (orderedDataSources.length && resetSelection) {
-          setActiveDatasourceList('#databases');
+          setActiveDatasourceList('#commonlyused');
         }
         if (!orderedDataSources.length) {
-          setActiveDatasourceList('#databases');
+          setActiveDatasourceList('#commonlyused');
         }
         setLoading(false);
       })