style: simplify database settings UI and refine rbac success field layout

Author: PraneethKulukuri26

package.json

@@ -1,6 +1,6 @@
 {
   "name": "api-documenter",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Self-hosted Postman alternative with folder-level RBAC and offline-first documentation",
   "main": "./out/main/index.js",
   "author": "Praneeth Kulukuri",

src/main/index.ts

@@ -137,7 +137,7 @@ ipcMain.handle('send-http-request', async (_event, opts: {
 ipcMain.handle('test-db-connection', async (_event, url: string) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             await conn.ping()
             await conn.end()
             return { success: true }
@@ -146,7 +146,7 @@ ipcMain.handle('test-db-connection', async (_event, url: string) => {
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             await client.end()
             return { success: true }
@@ -173,7 +173,7 @@ ipcMain.handle('create-remote-tables', async (_event, url: string) => {
 
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection({ uri: url, multipleStatements: true })
+            const conn = await mysql.createConnection({ uri: url, multipleStatements: true, connectTimeout: 10000 })
             for (const s of statements) await conn.execute(s)
             // Run migrations (ignoring errors if columns exist but ADD COLUMN IF NOT EXISTS isn't supported)
             for (const m of migrations) {
@@ -188,7 +188,7 @@ ipcMain.handle('create-remote-tables', async (_event, url: string) => {
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             for (const s of statements) await client.query(s)
             // Run migrations
@@ -209,7 +209,7 @@ ipcMain.handle('create-remote-tables', async (_event, url: string) => {
 ipcMain.handle('create-rbac-user', async (_event, url: string, user: { id: string, email: string, token: string, allowedFolders: string[], projectId: string, role: string }) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             await conn.execute(
                 'INSERT INTO rbac_users (id, email, token, allowed_folders, project_id, role) VALUES (?, ?, ?, ?, ?, ?)',
                 [user.id, user.email, user.token, JSON.stringify(user.allowedFolders), user.projectId, user.role]
@@ -221,7 +221,7 @@ ipcMain.handle('create-rbac-user', async (_event, url: string, user: { id: strin
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             await client.query(
                 'INSERT INTO rbac_users (id, email, token, allowed_folders, project_id, role) VALUES ($1, $2, $3, $4, $5, $6)',
@@ -239,7 +239,7 @@ ipcMain.handle('create-rbac-user', async (_event, url: string, user: { id: strin
 ipcMain.handle('get-rbac-users', async (_event, url: string, projectId: string) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             const [rows]: any = await conn.execute('SELECT * FROM rbac_users WHERE project_id = ?', [projectId])
             await conn.end()
             return { success: true, users: rows }
@@ -248,7 +248,7 @@ ipcMain.handle('get-rbac-users', async (_event, url: string, projectId: string)
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             const res = await client.query('SELECT * FROM rbac_users WHERE project_id = $1', [projectId])
             await client.end()
@@ -263,7 +263,7 @@ ipcMain.handle('get-rbac-users', async (_event, url: string, projectId: string)
 ipcMain.handle('update-rbac-user', async (_event, url: string, user: { id: string, email: string, allowedFolders: any, role: string }) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             await conn.execute(
                 'UPDATE rbac_users SET email = ?, allowed_folders = ?, role = ? WHERE id = ?',
                 [user.email, JSON.stringify(user.allowedFolders), user.role, user.id]
@@ -275,7 +275,7 @@ ipcMain.handle('update-rbac-user', async (_event, url: string, user: { id: strin
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             await client.query(
                 'UPDATE rbac_users SET email = $1, allowed_folders = $2, role = $3 WHERE id = $4',
@@ -293,7 +293,7 @@ ipcMain.handle('update-rbac-user', async (_event, url: string, user: { id: strin
 ipcMain.handle('delete-rbac-user', async (_event, url: string, userId: string) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             await conn.execute('DELETE FROM rbac_users WHERE id = ?', [userId])
             await conn.end()
             return { success: true }
@@ -302,7 +302,7 @@ ipcMain.handle('delete-rbac-user', async (_event, url: string, userId: string) =
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             await client.query('DELETE FROM rbac_users WHERE id = $1', [userId])
             await client.end()
@@ -319,7 +319,7 @@ ipcMain.handle('sync-direct', async (_event, url: string, entries: any[]) => {
 
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection({ uri: url, multipleStatements: true })
+            const conn = await mysql.createConnection({ uri: url, multipleStatements: true, connectTimeout: 10000 })
             for (const entry of entries) {
                 const { tableName, operation, data } = entry
                 const payload = typeof data === 'string' ? JSON.parse(data) : data
@@ -381,7 +381,7 @@ ipcMain.handle('sync-direct', async (_event, url: string, entries: any[]) => {
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             for (const entry of entries) {
                 const { tableName, operation, data } = entry
@@ -441,7 +441,7 @@ ipcMain.handle('sync-direct', async (_event, url: string, entries: any[]) => {
 ipcMain.handle('fetch-remote-data', async (_event, url: string, projectId: string) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             const [folders]: any = await conn.execute('SELECT * FROM folders WHERE project_id = ?', [projectId])
             const [apis]: any = await conn.execute('SELECT * FROM api_collections WHERE project_id = ?', [projectId])
             await conn.end()
@@ -451,7 +451,7 @@ ipcMain.handle('fetch-remote-data', async (_event, url: string, projectId: strin
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             const foldersRes = await client.query('SELECT * FROM folders WHERE project_id = $1', [projectId])
             const apisRes = await client.query('SELECT * FROM api_collections WHERE project_id = $1', [projectId])
@@ -467,7 +467,7 @@ ipcMain.handle('fetch-remote-data', async (_event, url: string, projectId: strin
 ipcMain.handle('get-remote-projects', async (_event, url: string) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             const [rows]: any = await conn.execute('SELECT id, name, created_at FROM projects ORDER BY created_at DESC')
             await conn.end()
             return { success: true, projects: rows }
@@ -476,7 +476,7 @@ ipcMain.handle('get-remote-projects', async (_event, url: string) => {
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             const res = await client.query('SELECT id, name, created_at FROM projects ORDER BY created_at DESC')
             await client.end()
@@ -491,7 +491,7 @@ ipcMain.handle('get-remote-projects', async (_event, url: string) => {
 ipcMain.handle('delete-remote-project', async (_event, url: string, projectId: string) => {
     if (url.startsWith('mysql://')) {
         try {
-            const conn = await mysql.createConnection(url)
+            const conn = await mysql.createConnection({ uri: url, connectTimeout: 10000 })
             await conn.execute('DELETE FROM api_collections WHERE project_id = ?', [projectId])
             await conn.execute('DELETE FROM folders WHERE project_id = ?', [projectId])
             await conn.execute('DELETE FROM rbac_users WHERE project_id = ?', [projectId])
@@ -503,7 +503,7 @@ ipcMain.handle('delete-remote-project', async (_event, url: string, projectId: s
         }
     } else if (url.startsWith('postgres://') || url.startsWith('postgresql://')) {
         try {
-            const client = new pg.Client({ connectionString: url, ssl: { rejectUnauthorized: false } })
+            const client = new pg.Client({ connectionString: url, connectionTimeoutMillis: 10000, ssl: { rejectUnauthorized: false } })
             await client.connect()
             await client.query('DELETE FROM api_collections WHERE project_id = $1', [projectId])
             await client.query('DELETE FROM folders WHERE project_id = $1', [projectId])

src/renderer/src/components/DatabaseSettingsDialog.tsx

@@ -91,54 +91,31 @@ export function DatabaseSettingsDialog() {
                         </p>
                     </div>
 
-                    {/* Action Buttons Grid */}
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
+                    {/* Action Buttons Group */}
+                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
                         <button
                             onClick={handleTest}
                             disabled={testing || !dbUrl}
-                            className="bg-white text-black text-[14px] font-bold rounded-xl hover:bg-neutral-100 disabled:opacity-20 transition-all shadow-lg active:scale-[0.98]"
+                            className={`bg-white text-black text-[14px] font-bold rounded-xl transition-all shadow-lg active:scale-[0.98] ${testing || !dbUrl ? 'opacity-20' : 'hover:bg-neutral-100'}`}
                             style={{ padding: '16px' }}
                         >
                             {testing ? 'Verifying...' : 'Test Connection'}
                         </button>
-                        <button
-                            onClick={handleCreateTables}
-                            disabled={testing || !dbUrl}
-                            className="border border-white/10 text-white text-[14px] font-bold rounded-xl hover:bg-white/5 disabled:opacity-20 transition-all active:scale-[0.98]"
-                            style={{ padding: '16px' }}
-                        >
-                            Initialize Schema
-                        </button>
-                    </div>
 
-                    {/* Conditional Sync Button */}
-                    {project?.databaseUrl && project.databaseUrl.trim() !== '' && (
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <button
-                                onClick={async () => {
-                                    if (!project) return
-                                    await triggerFullProjectSync(qc, project)
-                                    alert('Sync completed successfully!')
-                                }}
-                                className="bg-blue-600/10 border border-blue-600/20 text-blue-400 text-[14px] font-bold rounded-xl hover:bg-blue-600/20 transition-all active:scale-[0.98]"
-                                style={{ width: '100%', padding: '16px' }}
-                            >
-                                Trigger Full Data Sync
-                            </button>
-                        </div>
-                    )}
-
-                    {/* Commit Button */}
-                    <div style={{ marginTop: '-8px' }}>
                         <button
-                            onClick={() => {
-                                updateProject.mutate({ id: currentProjectId!, databaseUrl: dbUrl.trim() })
+                            onClick={async () => {
+                                if (dbUrl !== project?.databaseUrl) {
+                                    // If URL changed but not tested/saved yet
+                                    await handleTest()
+                                }
+                                await handleCreateTables()
                                 setShowDatabaseSettings(false)
                             }}
-                            className="bg-emerald-600/10 border border-emerald-600/20 text-emerald-400 text-[15px] font-bold rounded-xl hover:bg-emerald-600/20 transition-all shadow-lg active:scale-[0.98]"
-                            style={{ width: '100%', padding: '16px' }}
+                            disabled={testing || !dbUrl}
+                            className={`bg-blue-600/10 border border-blue-600/20 text-blue-400 text-[14px] font-bold rounded-xl transition-all active:scale-[0.98] ${testing || !dbUrl ? 'opacity-20' : 'hover:bg-blue-600/20'}`}
+                            style={{ padding: '16px' }}
                         >
-                            Commit Changes & Close
+                            {project?.databaseUrl === dbUrl && dbUrl ? 'Sync Now' : 'Connect & Sync'}
                         </button>
                     </div>
 

src/renderer/src/components/GeneralSettingsDialog.tsx

@@ -37,7 +37,8 @@ export function GeneralSettingsDialog() {
                         <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                             <div className="rounded-lg bg-white/10 flex items-center justify-center border border-white/5 shrink-0" style={{ width: '32px', height: '32px' }}>
                                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                                    <circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z" />
+                                    <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+                                    <circle cx="12" cy="12" r="3" />
                                 </svg>
                             </div>
                             <h2 className="text-xl font-semibold text-white tracking-tight" style={{ margin: 0 }}>Project Settings</h2>

src/renderer/src/components/RbacSettingsDialog.tsx

@@ -520,7 +520,7 @@ export function RbacSettingsDialog() {
                                 </div>
                             </div>
 
-                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+                            <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '16px' }}>
                                 <SuccessField label="User ID" value={successData.id} />
                                 <SuccessField label="Email" value={successData.email} />
                             </div>