fix: 12248, 12249, 12252 - issues of reconnect datasource modal (#12287)

* fixed issue of test button function on reconnect modal

* fixed issue of scrolling hiden in authenticated api  on reconnect modal

* fixed issue of scrolling rest api datasource form

app/client/src/pages/Editor/gitSync/ReconnectDatasourceModal.tsx

@@ -33,6 +33,7 @@ import {
 import Button, { Category, Size } from "components/ads/Button";
 import {
   getDatasourceDrafts,
+  getIsDatasourceTesting,
   getIsListing,
   getIsReconnectingDatasourcesModalOpen,
   getPluginImages,
@@ -221,9 +222,11 @@ const TooltipWrapper = styled.div`
 const DBFormWrapper = styled.div`
   padding: 10px;
   width: calc(100% - 206px);
+  overflow: auto;
 
   div[class^="RestAPIDatasourceForm__RestApiForm-"] {
     padding-top: 0px;
+    height: 100%;
   }
 
   .t--delete-datasource {
@@ -272,6 +275,7 @@ function ReconnectDatasourceModal() {
   const pluginNames = useSelector(getPluginNames);
   const datasourceDrafts = useSelector(getDatasourceDrafts);
   const isLoading = useSelector(getIsListing);
+  const isDatasourceTesting = useSelector(getIsDatasourceTesting);
 
   // getting query from redirection url
   const userOrgs = useSelector(getUserApplicationsOrgsList);
@@ -289,6 +293,7 @@ function ReconnectDatasourceModal() {
   const [appURL, setAppURL] = useState("");
   const [datasouce, setDatasource] = useState<Datasource | null>(null);
   const [isImport, setIsImport] = useState(queryIsImport);
+  const [isTesting, setIsTesting] = useState(false);
 
   // when redirecting from oauth, processing the status
   if (isImport) {
@@ -356,6 +361,12 @@ function ReconnectDatasourceModal() {
     }
   }, [organizationId, isModalOpen]);
 
+  useEffect(() => {
+    if (isModalOpen && isDatasourceTesting) {
+      setIsTesting(true);
+    }
+  }, [isModalOpen, isDatasourceTesting]);
+
   const handleClose = useCallback(() => {
     dispatch(setIsReconnectingDatasourcesModalOpen({ isOpen: false }));
     dispatch(setOrgIdForImport(""));
@@ -364,6 +375,7 @@ function ReconnectDatasourceModal() {
   }, [dispatch, setIsReconnectingDatasourcesModalOpen, isModalOpen]);
 
   const onSelectDatasource = useCallback((ds: Datasource) => {
+    setIsTesting(false);
     setSelectedDatasourceId(ds.id);
     setDatasource(ds);
     AnalyticsUtil.logEvent("RECONNECTING_DATASOURCE_ITEM_CLICK", {
@@ -426,7 +438,7 @@ function ReconnectDatasourceModal() {
       setAppURL(
         builderURL({
           applicationVersion:
-            importedApplication.applicationVersion ??
+            importedApplication?.applicationVersion ??
             ApplicationVersion.SLUG_URL,
           applicationSlug: importedApplication.slug,
           applicationId: appId,
@@ -438,7 +450,7 @@ function ReconnectDatasourceModal() {
 
   // checking of full configured
   useEffect(() => {
-    if (isModalOpen) {
+    if (isModalOpen && !isTesting) {
       const id = selectedDatasourceId;
       const pending = datasources.filter((ds: Datasource) => !ds.isConfigured);
       if (pending.length > 0) {
@@ -456,7 +468,7 @@ function ReconnectDatasourceModal() {
         window.open(appURL, "_self");
       }
     }
-  }, [datasources, appURL, isModalOpen]);
+  }, [datasources, appURL, isModalOpen, isTesting]);
 
   const mappedDataSources = datasources.map((ds: Datasource) => {
     return (

app/client/src/pages/Editor/gitSync/components/DatasourceListItem.tsx

@@ -62,7 +62,7 @@ function ListItemWrapper(props: {
           style={{ marginBottom: 2, display: "flex" }}
           type={TextType.H4}
         >
-          {plugin.name}
+          {ds.name}
           <Icon
             fillColor={ds.isConfigured ? Colors.GREEN : Colors.ERROR_RED}
             name={ds.isConfigured ? "oval-check" : "info"}
@@ -74,7 +74,7 @@ function ListItemWrapper(props: {
           color={Colors.GRAY_700}
           type={TextType.H5}
         >
-          {ds.name}
+          {plugin.name}
         </Text>
       </ListLabels>
     </ListItem>

app/client/src/selectors/entitiesSelector.ts

@@ -158,6 +158,10 @@ export const getIsExecutingDatasourceQuery = (state: AppState): boolean => {
   return state.entities.datasources.executingDatasourceQuery;
 };
 
+export const getIsDatasourceTesting = (state: AppState): boolean => {
+  return state.entities.datasources.isTesting;
+};
+
 export const getEditorConfig = (state: AppState, pluginId: string): any[] => {
   return state.entities.plugins.editorConfigs[pluginId];
 };