Merge pull request #13 from Zipstack/fix/ui-ux-improvements

wicky-zipstack · web-flow · commit d970e196c0fd · 2026-04-02T11:04:53.000+05:30
fix: UI/UX improvements — tooltips, nav label, connection save and refresh
diff --git a/backend/backend/application/context/connection.py b/backend/backend/application/context/connection.py
@@ -63,6 +63,16 @@ def _merge_with_stored(incoming: dict[str, Any], stored: dict[str, Any]) -> dict
     return merged
 
 
+def _has_credentials_changed(incoming: dict[str, Any], stored: dict[str, Any]) -> bool:
+    """Return True if any connection credential field differs from stored values."""
+    if not stored:
+        return True
+    for key, value in incoming.items():
+        if stored.get(key) != value:
+            return True
+    return False
+
+
 class ConnectionContext:
 
     def __init__(self):
@@ -143,12 +153,16 @@ def update_connection(self, connection_id: str, connection_details: dict) -> dic
 
         # Merge masked sentinels with stored real values
         stored_model = self.connection_session.get_connection_model(connection_id)
+        stored_details = {}
         if stored_model:
             stored_details = stored_model.decrypted_connection_details
             decrypted_connection_data = _merge_with_stored(decrypted_connection_data, stored_details)
 
-        # Test connection with decrypted data
-        test_connection_data(datasource=datasource, connection_data=decrypted_connection_data)
+        # Skip connection test only for metadata-only updates where credentials are unchanged
+        metadata_only = connection_details.pop("metadata_only", False)
+        credentials_changed = _has_credentials_changed(decrypted_connection_data, stored_details)
+        if not metadata_only or credentials_changed:
+            test_connection_data(datasource=datasource, connection_data=decrypted_connection_data)
         _conn_details = get_connection_data(datasource=datasource, connection_data=decrypted_connection_data)
         connection_details["connection_details"] = _conn_details
 
diff --git a/frontend/src/base/components/environment/CreateConnection.jsx b/frontend/src/base/components/environment/CreateConnection.jsx
@@ -137,6 +137,7 @@ const CreateConnection = ({
             connection_type: connType,
           }),
         },
+        ...(connectionId && hasDetailsChanged && { metadata_only: true }),
       };
 
       // Encrypt sensitive fields if encryption service is available
@@ -161,10 +162,10 @@ const CreateConnection = ({
           connectionData
         );
         if (res.status === 200) {
-          const { id, datasource_name } = res.data?.data || {};
-          setConnectionId({ id });
-          setConnectionDbType(datasource_name);
-          getAllConnection();
+          const newConnection = res.data?.data || {};
+          setConnectionId({ id: newConnection.id });
+          setConnectionDbType(newConnection.datasource_name);
+          getAllConnection(newConnection);
           setIsModalOpen(false);
           notify({
             type: "success",
@@ -186,8 +187,8 @@ const CreateConnection = ({
             message: "Success",
             description: "Connection updated successfully.",
           });
+          getAllConnection(res.data?.data);
           setIsModalOpen(false);
-          getAllConnection();
         }
       }
     } catch (error) {
diff --git a/frontend/src/base/components/environment/NewEnv.jsx b/frontend/src/base/components/environment/NewEnv.jsx
@@ -249,18 +249,34 @@ const NewEnv = ({
     [connectionDataSource, selectedOrgId, csrfToken, connType, connection]
   );
 
-  const getAllConnections = useCallback(async () => {
-    setLoading(true);
-    try {
-      const data = await fetchAllConnections(axiosRef, selectedOrgId);
-      setConnectionList(data?.filter((el) => !el?.is_sample_project));
-    } catch (error) {
-      console.error(error);
-      notify({ error });
-    } finally {
-      setLoading(false);
-    }
-  }, [selectedOrgId]);
+  const getAllConnections = useCallback(
+    async (updatedConnection) => {
+      if (updatedConnection?.id) {
+        setConnectionList((prev) => {
+          const list = prev || [];
+          const exists = list.some((c) => c?.id === updatedConnection.id);
+          if (exists) {
+            return list.map((c) =>
+              c?.id === updatedConnection.id ? updatedConnection : c
+            );
+          }
+          return [...list, updatedConnection];
+        });
+        return;
+      }
+      setLoading(true);
+      try {
+        const data = await fetchAllConnections(axiosRef, selectedOrgId);
+        setConnectionList(data?.filter((el) => !el?.is_sample_project) || []);
+      } catch (error) {
+        console.error(error);
+        notify({ error });
+      } finally {
+        setLoading(false);
+      }
+    },
+    [selectedOrgId]
+  );
 
   const getProjectDependency = useCallback(async () => {
     try {
diff --git a/frontend/src/base/components/topbar/NavigationTabs.jsx b/frontend/src/base/components/topbar/NavigationTabs.jsx
@@ -34,7 +34,7 @@ const NavigationTabs = memo(({ activeTab }) => {
   return (
     <div className="flex-space-between">
       <Space size={5}>
-        {/* Dashboard */}
+        {/* Projects */}
         <Typography
           className={
             activeTab === "project"
@@ -45,7 +45,7 @@ const NavigationTabs = memo(({ activeTab }) => {
         >
           <AppstoreOutlined className="clr-white" />
           <Typography className="menu_label cursor-pointer">
-            Dashboard
+            Projects
           </Typography>
         </Typography>
 
diff --git a/frontend/src/base/new-project/NewProject.jsx b/frontend/src/base/new-project/NewProject.jsx
@@ -66,15 +66,31 @@ function NewProject({ open, setOpen, getAllProject, id }) {
     setOpen(false);
   }, [form, setOpen]);
 
-  const getAllConnections = useCallback(async () => {
-    try {
-      const data = await getAllConnectionsApi(axiosPrivate, selectedOrgId);
-      setConnectionList(data);
-    } catch (error) {
-      console.error(error);
-      notify({ error });
-    }
-  }, [selectedOrgId]);
+  const getAllConnections = useCallback(
+    async (updatedConnection) => {
+      if (updatedConnection?.id) {
+        setConnectionList((prev) => {
+          const list = prev || [];
+          const exists = list.some((c) => c?.id === updatedConnection.id);
+          if (exists) {
+            return list.map((c) =>
+              c?.id === updatedConnection.id ? updatedConnection : c
+            );
+          }
+          return [...list, updatedConnection];
+        });
+        return;
+      }
+      try {
+        const data = await getAllConnectionsApi(axiosPrivate, selectedOrgId);
+        setConnectionList(data || []);
+      } catch (error) {
+        console.error(error);
+        notify({ error });
+      }
+    },
+    [selectedOrgId]
+  );
 
   const getAllEnvironments = useCallback(async () => {
     try {
diff --git a/frontend/src/ide/chat-ai/Header.jsx b/frontend/src/ide/chat-ai/Header.jsx
@@ -1,9 +1,8 @@
 import { memo, useState } from "react";
 import PropTypes from "prop-types";
-import { Button, Space, Typography } from "antd";
+import { Button, Space, Tooltip, Typography } from "antd";
 import {
   FileDoneOutlined,
-  HistoryOutlined,
   CloseOutlined,
   MinusOutlined,
   PlusOutlined,
@@ -61,59 +60,60 @@ const Header = memo(function Header({
         </div>
         <div>
           <Space>
-            <Button
-              type="text"
-              size="small"
-              icon={<PlusOutlined />}
-              disabled={isPromptRunning}
-              onClick={resetSelectedChatId}
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<FileDoneOutlined />}
-              disabled={isPromptRunning}
-              onClick={handleSettingsClick}
-              title="Context & Rules Manager"
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<HistoryOutlined />}
-              disabled={isPromptRunning}
-              onClick={resetSelectedChatId}
-            />
-            {isOnboardingCompleted && (
+            <Tooltip title="New Chat">
+              <Button
+                type="text"
+                size="small"
+                icon={<PlusOutlined />}
+                disabled={isPromptRunning}
+                onClick={resetSelectedChatId}
+              />
+            </Tooltip>
+            <Tooltip title="Context & Rules Manager">
               <Button
                 type="text"
                 size="small"
-                icon={<RocketOutlined />}
+                icon={<FileDoneOutlined />}
                 disabled={isPromptRunning}
-                onClick={onResetOnboarding}
-                title="Reset Onboarding"
-                style={{ color: "#1890ff" }}
+                onClick={handleSettingsClick}
               />
+            </Tooltip>
+            {isOnboardingCompleted && (
+              <Tooltip title="Reset Onboarding">
+                <Button
+                  type="text"
+                  size="small"
+                  icon={<RocketOutlined />}
+                  disabled={isPromptRunning}
+                  onClick={onResetOnboarding}
+                  style={{ color: "#1890ff" }}
+                />
+              </Tooltip>
             )}
-            <Button
-              type="text"
-              size="small"
-              icon={isFullWidth ? <CompressOutlined /> : <ExpandOutlined />}
-              onClick={toggleFullWidth}
-              title={isFullWidth ? "Restore" : "Full Width"}
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<MinusOutlined />}
-              onClick={collapseDrawer}
-              title="Collapse"
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<CloseOutlined />}
-              onClick={closeChatDrawer}
-            />
+            <Tooltip title={isFullWidth ? "Restore" : "Full Width"}>
+              <Button
+                type="text"
+                size="small"
+                icon={isFullWidth ? <CompressOutlined /> : <ExpandOutlined />}
+                onClick={toggleFullWidth}
+              />
+            </Tooltip>
+            <Tooltip title="Collapse">
+              <Button
+                type="text"
+                size="small"
+                icon={<MinusOutlined />}
+                onClick={collapseDrawer}
+              />
+            </Tooltip>
+            <Tooltip title="Close">
+              <Button
+                type="text"
+                size="small"
+                icon={<CloseOutlined />}
+                onClick={closeChatDrawer}
+              />
+            </Tooltip>
           </Space>
         </div>
       </div>
diff --git a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.css
@@ -7,27 +7,52 @@
 
 .no-code-toolbar-content {
   flex: 1;
-  overflow-x: hidden;
+  overflow: hidden;
   scroll-behavior: smooth;
-  padding: 8px 0px;
+  padding: 12px 0px 8px;
+  display: flex;
+  align-items: center;
 }
 
 /* Hidden toolbar items (overflow) */
 .toolbar-item-hidden {
   display: none !important;
 }
 
-/* Ellipsis button */
-.toolbar-ellipsis-button {
-  display: flex;
+/* More button — align with toolbar items that have seq_badge_wrapper above */
+.toolbar-more-item {
+  margin-top: -11px;
+}
+
+.no-code-toolbar-wrapper .toolbar-ellipsis-button {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  gap: 4px;
+  height: 32px;
+  padding: 0 12px;
   border-radius: 4px;
   flex-shrink: 0;
   transition: background-color 0.2s;
   color: var(--icons-color);
+  font-size: 13px;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.toolbar-more-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background-color: var(--primary, #1890ff);
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .toolbar-ellipsis-button:hover {
diff --git a/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx b/frontend/src/ide/editor/no-code-toolbar/no-code-toolbar.jsx
diff --git a/frontend/src/ide/ide-layout.css b/frontend/src/ide/ide-layout.css
