fix edit DS page and add loading states

Author: iamfaran

client/packages/lowcoder/src/api/datasourceApi.ts

@@ -187,6 +187,10 @@ export class DatasourceApi extends Api {
     return Api.get(DatasourceApi.url + `/listByOrg?orgId=${orgId}`, {...res});
   }
 
+  static getDatasourceById(id: string): AxiosPromise<GenericApiResponse<Datasource>> {
+    return Api.get(`${DatasourceApi.url}/${id}`);
+  }
+
   static createDatasource(
     datasourceConfig: Partial<Datasource>
   ): AxiosPromise<GenericApiResponse<Datasource>> {

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

@@ -1,20 +1,25 @@
 import styled from "styled-components";
 import history from "../../util/history";
 import { default as Button } from "antd/es/button";
-import { useCallback, useMemo, useState } from "react";
+import { Spin } from "antd";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { CopyTextButton, DocIcon, PackUpIcon, TacoButton } from "lowcoder-design";
 import { useDatasourceForm } from "./form/useDatasourceForm";
 import { useParams } from "react-router-dom";
 import { DATASOURCE_URL } from "../../constants/routesURL";
 import { useSelector } from "react-redux";
-import { getDataSource, getDataSourceTypes } from "../../redux/selectors/datasourceSelectors";
+import { getDataSourceTypes } from "../../redux/selectors/datasourceSelectors";
 import { trans } from "i18n";
 import { DatasourceType } from "@lowcoder-ee/constants/queryConstants";
 import { getDatasourceTutorial } from "@lowcoder-ee/util/tutorialUtils";
 import { getDataSourceFormManifest } from "./getDataSourceFormManifest";
 import DataSourceIcon from "components/DataSourceIcon";
 import { Helmet } from "react-helmet";
-
+import { DatasourceApi } from "@lowcoder-ee/api/datasourceApi";
+import { DatasourceInfo } from "@lowcoder-ee/api/datasourceApi";
+import { GenericApiResponse } from "../../api/apiResponses";
+import { Datasource } from "@lowcoder-ee/constants/datasourceConstants";
+import { AxiosResponse } from "axios";
 const Wrapper = styled.div`
   display: flex;
   justify-content: center;
@@ -154,16 +159,44 @@ type DatasourcePathParams = {
 
 export const DatasourceEditPage = () => {
   const { datasourceId, datasourceType } = useParams<DatasourcePathParams>();
-  const datasourceList = useSelector(getDataSource);
   const datasourceTypes = useSelector(getDataSourceTypes);
   const [isReady, setIsReady] = useState(true);
 
-  const datasourceInfo = useMemo(() => {
+
+  const [datasourceInfo, setDatasourceInfo] = useState<DatasourceInfo | undefined>();
+  const [loading, setLoading] = useState(false);
+
+  // Fetch individual datasource when editing
+  useEffect(() => {
     if (!datasourceId) {
-      return undefined;
+      setDatasourceInfo(undefined);
+      return;
     }
-    return datasourceList.find((info) => info.datasource.id === datasourceId);
-  }, [datasourceId, datasourceList]);
+    
+    const fetchDatasource = async () => {
+      setLoading(true);
+      try {
+        const response: AxiosResponse<GenericApiResponse<Datasource>> = await DatasourceApi.getDatasourceById(datasourceId);
+        if (response.data.success) {
+          // Transform to DatasourceInfo format
+          setDatasourceInfo({
+            datasource: response.data.data,
+            edit: true, // Assume editable since user reached edit page
+          });
+        } else {
+          console.error('API returned error:', response.data);
+          setDatasourceInfo(undefined);
+        }
+      } catch (error: any) {
+        console.error('Failed to fetch datasource:', error);
+        setDatasourceInfo(undefined);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDatasource();
+  }, [datasourceId]);
 
   const dataSourceTypeInfo = useMemo(() => {
     if (datasourceId) {
@@ -181,6 +214,26 @@ export const DatasourceEditPage = () => {
     setIsReady(isReady);
   }, []);
 
+  // Show loading state while fetching datasource
+  if (loading) {
+    return (
+      <Wrapper>
+        <ContentWrapper>
+          <div style={{ 
+            display: 'flex', 
+            justifyContent: 'center', 
+            alignItems: 'center', 
+            height: '400px',
+            flexDirection: 'column',
+            gap: '16px'
+          }}>
+            <Spin size="large" />
+          </div>
+        </ContentWrapper>
+      </Wrapper>
+    );
+  }
+
   if (!finalDataSourceType) {
     return null;
   }

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

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { EditPopover, PointIcon, Search, TacoButton } from "lowcoder-design";
-import React, {useEffect, useState} from "react";
+import {useEffect, useState} from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { getDataSource, getDataSourceLoading, getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
+import { getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
 import { deleteDatasource } from "../../redux/reduxActions/datasourceActions";
 import { isEmpty } from "lodash";
 import history from "../../util/history";
@@ -113,7 +113,6 @@ export const DatasourceList = () => {
   const [modify, setModify] = useState(false);
   const currentUser = useSelector(getUser);
   const orgId = currentUser.currentOrgId;
-  const datasourceLoading = useSelector(getDataSourceLoading);
   const plugins = useSelector(getDataSourceTypesMap);
   interface ElementsState {
     elements: DatasourceInfo[];
@@ -123,6 +122,7 @@ export const DatasourceList = () => {
   const [elements, setElements] = useState<ElementsState>({ elements: [], total: 0 });
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
+  const [paginationLoading, setPaginationLoading] = useState(false);
 
   useEffect(()=> {
     const timer = setTimeout(() => {
@@ -133,6 +133,7 @@ export const DatasourceList = () => {
   }, [searchValue])
 
   useEffect( () => {
+    setPaginationLoading(true);
     fetchDatasourcePagination(
       {
         orgId: orgId,
@@ -146,6 +147,8 @@ export const DatasourceList = () => {
       }
       else
         console.error("ERROR: fetchFolderElements", result.error)
+    }).finally(() => {
+      setPaginationLoading(false);
     })
   }, [currentPage, pageSize, searchValues, modify]
   )
@@ -195,7 +198,7 @@ export const DatasourceList = () => {
         <BodyWrapper>
           <StyledTable
             loading={{
-              spinning: datasourceLoading,
+              spinning: paginationLoading,
               indicator: <LoadingOutlined spin style={{ fontSize: 30 }} />
             }}
             rowClassName={(record: any) => (!record.edit ? "datasource-can-not-edit" : "")}

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

@@ -8,10 +8,10 @@ import {
 } from "../../constants/routesURL";
 import React, { useEffect } from "react";
 import { isEmpty } from "lodash";
-import { fetchDatasource, fetchDataSourceTypes } from "../../redux/reduxActions/datasourceActions";
+import { fetchDataSourceTypes } from "../../redux/reduxActions/datasourceActions";
 import { useDispatch, useSelector } from "react-redux";
 import { getUser } from "../../redux/selectors/usersSelectors";
-import { getDataSource, getDataSourceTypes } from "../../redux/selectors/datasourceSelectors";
+import { getDataSourceTypes } from "../../redux/selectors/datasourceSelectors";
 
 export const DatasourceHome = () => {
   const dispatch = useDispatch();