From 15813c4ed6a171beb93487064aa9750fc47c17ac Mon Sep 17 00:00:00 2001
From: Rudhra Deep Biswas <98055396+rudeUltra@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:01:31 +0530
Subject: [PATCH] Homepage Search Animation fix and DS Connection Typo Fix
 (#10347)

* test connection typo

* search UI

* folder re-render fix
---
 .../DataSourceManager/TestConnection.jsx      |  4 +--
 frontend/src/HomePage/FolderMenu.jsx          | 10 +++----
 frontend/src/HomePage/Folders.jsx             | 26 ++++++++++++-------
 frontend/src/HomePage/HomePage.jsx            |  2 +-
 4 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Editor/DataSourceManager/TestConnection.jsx b/frontend/src/Editor/DataSourceManager/TestConnection.jsx
index e9d4361fe5..a30c291748 100644
--- a/frontend/src/Editor/DataSourceManager/TestConnection.jsx
+++ b/frontend/src/Editor/DataSourceManager/TestConnection.jsx
@@ -7,7 +7,7 @@ import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 export const TestConnection = ({ kind, options, pluginId, onConnectionTestFailed, environmentId }) => {
   const [isTesting, setTestingStatus] = useState(false);
   const [connectionStatus, setConnectionStatus] = useState('unknown');
-  const [buttonText, setButtonText] = useState('Test Connection');
+  const [buttonText, setButtonText] = useState('Test connection');
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -16,7 +16,7 @@ export const TestConnection = ({ kind, options, pluginId, onConnectionTestFailed
     } else if (connectionStatus === 'success') {
       setButtonText('Connection verified');
     } else {
-      setButtonText('Test Connection');
+      setButtonText('Test connection');
     }
   }, [isTesting, connectionStatus]);
 
diff --git a/frontend/src/HomePage/FolderMenu.jsx b/frontend/src/HomePage/FolderMenu.jsx
index 820652c11b..f1dda5024e 100644
--- a/frontend/src/HomePage/FolderMenu.jsx
+++ b/frontend/src/HomePage/FolderMenu.jsx
@@ -19,16 +19,16 @@ export const FolderMenu = function FolderMenu({
   const Field = ({ text, onClick, customClass }) => {
     return (
       <div
+        role="button"
+        onClick={() => {
+          closeMenu();
+          onClick();
+        }}
         className={cx('field mb-3', {
           [customClass]: customClass,
         })}
       >
         <span
-          role="button"
-          onClick={() => {
-            closeMenu();
-            onClick();
-          }}
           data-cy={`${String(dataCy + '-' + text)
             .toLowerCase()
             .replace(/\s+/g, '-')}-option`}
diff --git a/frontend/src/HomePage/Folders.jsx b/frontend/src/HomePage/Folders.jsx
index 2f21c0293f..06c25244cf 100644
--- a/frontend/src/HomePage/Folders.jsx
+++ b/frontend/src/HomePage/Folders.jsx
@@ -302,7 +302,9 @@ export const Folders = function Folders({
                 'bg-dark-indigo': activeFolder.id === folder.id && darkMode,
               }
             )}
-            onClick={() => handleFolderChange(folder)}
+            onClick={() => {
+              handleFolderChange(folder);
+            }}
             data-cy={`${folder.name.toLowerCase().replace(/\s+/g, '-')}-list-card`}
           >
             <ToolTip message={folder.name}>
@@ -314,14 +316,20 @@ export const Folders = function Folders({
               </div>
             </ToolTip>
             {(canDeleteFolder || canUpdateFolder) && (
-              <FolderMenu
-                canDeleteFolder={canDeleteFolder}
-                canUpdateFolder={canUpdateFolder}
-                deleteFolder={() => deleteFolder(folder)}
-                editFolder={() => updateFolder(folder)}
-                darkMode={darkMode}
-                dataCy={folder.name}
-              />
+              <div
+                onClick={(e) => {
+                  e.stopPropagation(); // Stop the click event from bubbling up to the <a> tag
+                }}
+              >
+                <FolderMenu
+                  canDeleteFolder={canDeleteFolder}
+                  canUpdateFolder={canUpdateFolder}
+                  deleteFolder={() => deleteFolder(folder)}
+                  editFolder={() => updateFolder(folder)}
+                  darkMode={darkMode}
+                  dataCy={folder.name}
+                />
+              </div>
             )}
           </a>
         ))}
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 945987efd8..1740d593f1 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/frontend/src/HomePage/HomePage.jsx
@@ -849,7 +849,7 @@ class HomePageComponent extends React.Component {
               data-cy="home-page-content"
             >
               <div className="w-100 mb-5 container home-page-content-container">
-                {isLoading && (
+                {isLoading && !appSearchKey && (
                   <Skeleton
                     count={1}
                     height={20}