feat: implement environment RBAC, move selector to sidebar, and improve dialog interactions

Author: PraneethKulukuri26

README.md

@@ -1,42 +1,62 @@
 <div align="center">
-  <img src="resources/icon.jpg" alt="API Documenter Logo" width="150" />
+  <img src="resources/icon.jpg" alt="API Documenter Logo" width="128" />
 
-  <h1>API Documenter</h1>
+  # API Documenter
 
-  <p>
-    <strong>A powerful, self-hosted, offline-first alternative to Postman and Insomnia.</strong>
-  </p>
+  **The ultimate self-hosted, offline-first API testing and documentation platform.**
 
-  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
+  [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+  [![Version](https://img.shields.io/badge/version-1.0.15-emerald.svg)](package.json)
+  [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)
+  [![Platform](https://img.shields.io/badge/platform-Windows%20%7C%20macOS-lightgrey.svg)](#)
 </div>
 
 ---
 
-**API Documenter** is designed for developers who need a robust API testing environment that works locally by default but scales into a team-oriented platform with secure database synchronization and granular access control.
+## 🌟 Overview
 
-## ✨ Key Features
+**API Documenter** is a robust alternative to Postman and Insomnia, designed specifically for developers who value privacy, speed, and ownership. It starts as a high-performance local desktop app but scales instantly into a team-oriented platform with secure database synchronization and granular role-based access control.
 
-- **Offline-First Desktop Environment**: Local performance with no cloud dependency for personal projects.
-- **Secure Team Workspaces**: Connect to **PostgreSQL** or **MySQL** for team synchronization via a secure Vercel-hosted proxy.
-- **Granular RBAC**: Manage Admins, Editors, and Viewers with folder-level permissions.
-- **Advanced Request Engine**: Full support for all HTTP methods, headers, parameters, and bodies.
-- **Premium Responsive UI**: A dark-themed, premium design with a custom font-scaling engine for perfect readability on any screen.
-- **Automated Updates**: Integrated GitHub update system for seamless version management.
+## 🚀 Key Features
 
-## 🛠️ Built With
+### 1. Offline-First Excellence
+- **Local Storage**: Your sensitive API data stays on your machine by default using high-speed IndexedDB (Dexie).
+- **Zero Latency**: No "cloud sync" lag while you're prototyping or testing locally.
+- **Privacy by Design**: No mandatory accounts or telemetry.
 
-- **Core**: Electron, React, TypeScript, Vite
-- **Database**: mysql2, pg, Dexie (IndexedDB)
-- **Styling**: Vanilla CSS (Custom Variable-based Scaling)
-- **Deployment**: Vercel & GitHub Actions
+### 2. Secure Team Synchronization
+- **Multi-DB Support**: Connect your workspace to a remote **PostgreSQL** or **MySQL** server.
+- **Vercel Proxy Deployment**: Deploy a production-ready server to Vercel in one click. This ensures your DB credentials are never exposed to the client side and all team traffic is securely authorized.
+- **Real-time Sync**: Collaborative editing with bi-directional synchronization between local and remote states.
 
-## 🚀 Getting Started
+### 3. Folder-Level RBAC
+- **Admin**: Full control over project infrastructure, sync settings, and team management.
+- **Editor**: Full read/write access to folders, requests, and documentation.
+- **Viewer**: Read-only access for team members who need to consume documentation without modification.
 
-### Prerequisites
+### 4. Advanced Request Engine
+- **Full HTTP Support**: GET, POST, PUT, DELETE, PATCH, OPTIONS, and more.
+- **Rich Payloads**: Seamlessly handle Headers, Query Params, and JSON/Text bodies.
+- **Smart Response Viewer**: Real-time status codes, response headers, body size, and execution benchmarks.
+
+### 5. Enterprise-Grade Scaling
+- **Premium UI**: Sleek, glassmorphic dark-themed design.
+- **Custom Font Scaling**: Perfectly tailored readability for any screen size, from laptop screens to 4K monitors.
+- **GitHub Auto-Updates**: Silent background updates that keep you on the latest version without disruption.
+
+## 🛠️ Tech Stack
 
-Ensure you have the following installed on your local machine:
-- [Node.js](https://nodejs.org/) (v18 or higher)
+- **Frontend**: React 18, TypeScript, Vite
+- **Desktop Layer**: Electron (Standard IPC Integration)
+- **State Management**: Zustand & React Query
+- **Local Database**: Dexie (IndexedDB)
+- **Remote Bridge**: mysql2, pg (via Secure Proxy)
+- **CI/CD**: GitHub Actions & Electron-Builder
+
+## � Getting Started
+
+### Prerequisites
+- [Node.js](https://nodejs.org/) (v18.x or v20.x recommended)
 - [npm](https://www.npmjs.com/)
 
 ### Installation & Setup
@@ -45,15 +65,43 @@ Ensure you have the following installed on your local machine:
    ```bash
    git clone https://github.com/PraneethKulukuri26/API-Documenter.git
    cd API-Documenter
+   ```
+
 2. **Install dependencies:**
    ```bash
    npm install
-3. **Run the application:**
+   ```
+
+3. **Start Development Server:**
    ```bash
    npm run dev
-4. **Build for production:**
-   ```bash
-   npm run build
-5. **Deploy to Vercel:**
+   ```
+
+4. **Build Production Application:**
    ```bash
-   npm run deploy
+   # Build for Windows
+   npm run build:win
+
+   # Build for macOS
+   npm run build:mac
+   ```
+
+## 🛡️ Security
+
+API Documenter uses a unique **Security Proxy Architecture**. When you connect a database, the app deploys a serverless function to Vercel. This function acts as the sole gatekeeper for your database, ensuring that raw SQL credentials are never stored in the desktop application but remain securely in your Vercel environment variables.
+
+For more details, see [SECURITY.md](SECURITY.md).
+
+## 🤝 Contributing
+
+We love contributions! Please read our [CONTRIBUTING.md](CONTRIBUTING.md) to get started.
+
+## 📄 License
+
+Distributed under the MIT License. See [LICENSE](LICENSE) for more information.
+
+---
+
+<!-- <div align="center">
+  Built with ❤️ by <a href="https://github.com/PraneethKulukuri26">Praneeth Kulukuri</a>
+</div> -->

electron.vite.config.ts

@@ -17,8 +17,8 @@ export default defineConfig({
       }
     },
     plugins: [react(), tailwindcss()],
-    // server: {
-    //   port: 4174
-    // }
+    server: {
+      port: 4174
+    }
   }
 })

server/api/apis/[id].ts

@@ -24,7 +24,6 @@ export default async function handler(req: any, res: any) {
     const id = url.pathname.split('/').pop();
 
     if (!id) {
-        await db.close();
         return res.status(400).json({ error: 'API ID is required' });
     }
 
@@ -73,7 +72,5 @@ export default async function handler(req: any, res: any) {
         return res.status(405).json({ error: 'Method not allowed' });
     } catch (err: any) {
         return res.status(500).json({ error: err.message });
-    } finally {
-        await db.close();
     }
 }

server/api/apis/index.ts

@@ -67,7 +67,7 @@ export default async function handler(req: any, res: any) {
                 url_params, headers, body_type, request_body, response_examples
             } = req.body;
 
-            if (!id || !folder_id || !name || !method || !path) {
+            if (!id || !folder_id || !name || !method) {
                 return res.status(400).json({ error: 'Missing required fields' });
             }
 
@@ -93,7 +93,5 @@ export default async function handler(req: any, res: any) {
         return res.status(405).json({ error: 'Method not allowed' });
     } catch (err: any) {
         return res.status(500).json({ error: err.message });
-    } finally {
-        await db.close();
     }
 }

server/api/environments/[id].ts

@@ -0,0 +1,63 @@
+import { authenticate } from '../../src/middleware/auth.js';
+import { rateLimit } from '../../src/middleware/rateLimit.js';
+import { checkEnvironmentAccess } from '../../src/middleware/rbac.js';
+
+export default async function handler(req: any, res: any) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+    if (req.method === 'OPTIONS') {
+        return res.status(200).end();
+    }
+
+    const { id } = req.query;
+    if (!id) return res.status(400).json({ error: 'Environment ID is required' });
+
+    let context;
+    try {
+        context = await authenticate(req);
+        const token = req.headers.authorization?.replace('Bearer ', '') || new URL(req.url, `http://${req.headers.host}`).searchParams.get('token');
+        if (token) rateLimit(token);
+    } catch (err: any) {
+        return res.status(401).json({ error: err.message });
+    }
+
+    const { db, user } = context;
+
+    try {
+        if (req.method === 'PUT') {
+            const { name, baseUrl, isGlobal, folderId, variables } = req.body;
+
+            // Check if environment belongs to this project
+            const existing = await db.query('SELECT * FROM environments WHERE id = ? AND project_id = ?', [id, user.projectId]) as any[];
+            if (!existing.length) return res.status(404).json({ error: 'Environment not found' });
+
+            // Enforce RBAC
+            await checkEnvironmentAccess(context, id, 'write', Number(existing[0].is_global) === 1);
+
+            await db.execute(
+                'UPDATE environments SET name = ?, base_url = ?, is_global = ?, folder_id = ?, variables = ? WHERE id = ? AND project_id = ?',
+                [name, baseUrl || '', isGlobal ? 1 : 0, folderId || null, variables, id, user.projectId]
+            );
+
+            return res.status(200).json({ success: true });
+        }
+
+        if (req.method === 'DELETE') {
+            const existing = await db.query('SELECT * FROM environments WHERE id = ? AND project_id = ?', [id, user.projectId]) as any[];
+            if (!existing.length) return res.status(404).json({ error: 'Environment not found' });
+
+            // Enforce RBAC
+            await checkEnvironmentAccess(context, id, 'delete', Number(existing[0].is_global) === 1);
+
+            await db.execute('DELETE FROM environments WHERE id = ? AND project_id = ?', [id, user.projectId]);
+
+            return res.status(200).json({ success: true });
+        }
+
+        return res.status(405).json({ error: 'Method not allowed' });
+    } catch (err: any) {
+        return res.status(500).json({ error: err.message });
+    }
+}

server/api/environments/index.ts

@@ -0,0 +1,114 @@
+import { authenticate } from '../../src/middleware/auth.js';
+import { checkFolderAccess } from '../../src/middleware/rbac.js';
+import { rateLimit } from '../../src/middleware/rateLimit.js';
+
+export default async function handler(req: any, res: any) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,DELETE,OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+    if (req.method === 'OPTIONS') {
+        return res.status(200).end();
+    }
+    let context;
+    try {
+        context = await authenticate(req);
+        const token = req.headers.authorization?.replace('Bearer ', '') || new URL(req.url, `http://${req.headers.host}`).searchParams.get('token');
+        if (token) rateLimit(token);
+    } catch (err: any) {
+        return res.status(401).json({ error: err.message });
+    }
+
+    const { db, user } = context;
+
+    try {
+        if (req.method === 'GET') {
+            const results = await db.query('SELECT * FROM environments WHERE project_id = ?', [user.projectId]);
+
+            // Ensure a Global environment exists at the database level if not present
+            let foundGlobal = results.find((e: any) => Number(e.is_global) === 1);
+            if (!foundGlobal) {
+                const globalId = `global-${user.projectId}`;
+                try {
+                    await db.execute(
+                        'INSERT INTO environments (id, project_id, name, is_global, variables) VALUES (?, ?, ?, ?, ?)',
+                        [globalId, user.projectId, 'Global', 1, '{}']
+                    );
+                    // Add it to the results list manually so the current response is complete
+                    results.push({
+                        id: globalId,
+                        project_id: user.projectId,
+                        name: 'Global',
+                        is_global: 1,
+                        variables: '{}',
+                        created_at: Date.now()
+                    });
+                } catch (e) {
+                    // Might already exist but wasn't in original SELECT results (race condition or ID format)
+                    // We'll re-fetch just to be safe if insert fails
+                    const refetch = await db.query('SELECT * FROM environments WHERE id = ?', [globalId]);
+                    if (refetch.length > 0) results.push(refetch[0]);
+                }
+            }
+
+            // Map to frontend camelCase
+            const mapped = results.map((env: any) => ({
+                id: env.id,
+                projectId: env.project_id,
+                folderId: env.folder_id,
+                name: env.name,
+                baseUrl: env.base_url,
+                isGlobal: Number(env.is_global) === 1,
+                variables: env.variables,
+                createdAt: env.created_at
+            }));
+
+            // Deduplicate by ID just in case
+            const unique = Array.from(new Map(mapped.map(item => [item.id, item])).values());
+
+            // RBAC Filter and Role Injection
+            const filtered = unique.filter((env: any) => {
+                if (user.role === 'admin') return true;
+                if (env.isGlobal) return true;
+                const allowedEnvs = user.allowedEnvironments || [];
+                return allowedEnvs.some((p: any) => {
+                    const idOrName = typeof p === 'string' ? p : p.envId;
+                    return idOrName === '*' || idOrName === env.id || idOrName === env.name;
+                });
+            }).map((env: any) => {
+                let effectiveRole = user.role;
+                if (user.role !== 'admin') {
+                    const allowedEnvs = user.allowedEnvironments || [];
+                    const perm = allowedEnvs.find((p: any) => {
+                        const idOrName = typeof p === 'string' ? p : p.envId;
+                        return idOrName === env.id || idOrName === env.name || (env.isGlobal && (idOrName === 'global' || idOrName === 'Global'));
+                    });
+                    if (perm && typeof perm === 'object' && perm.role) {
+                        effectiveRole = perm.role;
+                    }
+                }
+                return { ...env, role: effectiveRole };
+            });
+
+            return res.status(200).json(filtered);
+        }
+
+        if (req.method === 'POST') {
+            if (user.role === 'viewer') return res.status(403).json({ error: 'Viewer role cannot manage environments' });
+
+            const { id, name, baseUrl, isGlobal, folderId, variables } = req.body;
+            if (!id || !name) return res.status(400).json({ error: 'ID and Name are required' });
+
+            await db.execute(
+                'INSERT INTO environments (id, project_id, folder_id, name, base_url, is_global, variables) VALUES (?, ?, ?, ?, ?, ?, ?)',
+                [id, user.projectId, folderId || null, name, baseUrl || '', isGlobal ? 1 : 0, variables || '{}']
+            );
+
+            return res.status(201).json({ success: true });
+        }
+
+        return res.status(405).json({ error: 'Method not allowed' });
+    } catch (err: any) {
+        return res.status(500).json({ error: err.message });
+    }
+}

server/api/folders/[id].ts

@@ -24,7 +24,6 @@ export default async function handler(req: any, res: any) {
     const id = url.pathname.split('/').pop();
 
     if (!id) {
-        await db.close();
         return res.status(400).json({ error: 'Folder ID is required' });
     }
 
@@ -76,7 +75,5 @@ export default async function handler(req: any, res: any) {
         return res.status(405).json({ error: 'Method not allowed' });
     } catch (err: any) {
         return res.status(500).json({ error: err.message });
-    } finally {
-        await db.close();
     }
 }