Homepage Search Animation fix and DS Connection Typo Fix (#10347)

* test connection typo

* search UI

* folder re-render fix

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]);
 

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`}

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>
         ))}

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}