feat: global connections per organization (#1433)

# Global Connections Management System

## Summary

Introduces organization-level global connections that can be shared
across all projects within an organization. This feature allows users to
create, edit, and delete connections at the organization level, making
them available for use in triggers across any project.

**Key highlights:**
- New dedicated `/connections` page for managing global connections
- Side-drawer for quick access to global connections from anywhere in
the app
- Integration with triggers via grouped select showing both project and
global connections
- Feature flag controlled (`VITE_DISPLAY_GLOBAL_CONNECTIONS`)

---

## Changes

### New Features

**Global Connections Management**
- New `/connections` route with full CRUD operations for
organization-level connections
- Resizable split-panel UI with connections list and edit form
- Connection status display with error handling
- Delete confirmation modal with safety warnings

**Global Connections Drawer**
- Side-drawer accessible from sidebar for quick connection management
- Supports add/edit modes without leaving current context
- Keyboard navigation (Escape key support)

**Grouped Select Component**
- New `GroupedSelect` molecule for categorized dropdown options
- Used in trigger forms to show connections grouped by scope (Project vs
Organization)
- Visual indicators ("Global" badge) for organization-level connections

**Connection Status Button**
- New `ConnectionStatusButton` atom for displaying connection health
- Shows error messages and provides quick access to configuration

---

### Modified Components

**Trigger Form (`nameAndConnection.tsx`)**
- Integrated global connections alongside project connections
- Grouped dropdown showing:
  - Base trigger types (Schedule, Webhook)
  - Project connections
  - Organization (global) connections with "Global" label

**Connection Add/Edit Forms**
- Added `isGlobalConnection` and `isDrawerMode` props
- Conditional behavior based on connection scope
- Support for both page and drawer contexts

**Sidebar & Topbar**
- Added "Connections" menu item in sidebar (feature-flagged)
- Event-based drawer toggle integration

---

### Bug Fixes

- Fixed Google JSON key connection setup issues
- Fixed Google connections authentication flow
- Renamed `jsonKey.tsx` to `json.tsx` for consistency in Google auth
methods

---

## Feature Flag

Enable with environment variable:

```bash
VITE_DISPLAY_GLOBAL_CONNECTIONS=true
```

## Screenshots/Demo



## What type of PR is this? (check all applicable)

- [x] 💡 (feat) - A new feature (non-breaking change which adds
functionality)
- [ ] 🔄 (refactor) - Code Refactoring - A code change that neither fixes
a bug nor adds a feature
- [ ] 🐞 (fix) - Bug Fix (non-breaking change which fixes an issue)
- [ ] 🏎 (perf) - Optimization
- [ ] 📄 (docs) - Documentation - Documentation only changes
- [ ] 📄 (test) - Tests - Adding missing tests or correcting existing
tests
- [ ] ⚙️ (ci) - Continuous Integrations - Changes to our CI
configuration files and scripts (example scopes: Travis, Circle,
BrowserStack, SauceLabs)
- [ ] ☑️ (chore) - Chores - Other changes that don't modify src or test
files
- [ ] ↩️ (revert) - Reverts - Reverts a previous commit(s).

<!--
     For a timely review/response, please avoid force-pushing additional
     commits if your PR already received reviews or comments.
Before submitting a Pull Request, please ensure you've done the
following:
     - 👷‍♀️ Create small PRs. In most cases this will be possible.
     - ✅ Provide tests for your changes.
     - 📝 Use descriptive commit messages (as described below).
- 📗 Update any related documentation and include any relevant
screenshots.
     Commit Message Structure (all lower-case):
     <type>(optional ticket number): <description>
     [optional body]
-->

Author: RonenMars

.github/workflows/build_test_and_release.yml

@@ -136,6 +136,9 @@ jobs:
           browser: ${{ matrix.browser }}
           autokitteh-image: ${{ vars.AUTOKITTEH_IMAGE }}
 
+      - name: Generate connection test data
+        run: npm run generate:connection-test-data
+
       - name: Run Playwright tests
         env:
           TESTS_JWT_AUTH_TOKEN: ${{ secrets.TESTS_JWT_AUTH_TOKEN }}
@@ -149,6 +152,72 @@ jobs:
           browser: ${{ matrix.browser }}
           run-id: ${{ github.run_id }}
 
+  visual-regression:
+    name: 🎨 Visual Regression Tests
+    needs: setup
+    runs-on: ubuntu-latest
+    if: github.ref != 'refs/heads/main'
+    timeout-minutes: 30
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{ secrets.PAT_TOKEN }}
+          submodules: true
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+
+      - name: Restore cached node_modules
+        uses: actions/cache/restore@v4
+        with:
+          path: node_modules
+          key: node-modules-${{ hashFiles('package-lock.json') }}
+
+      - name: Restore Playwright browsers
+        uses: actions/cache/restore@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ hashFiles('package-lock.json') }}
+
+      - name: Cache Docker images
+        id: cache-docker
+        uses: ./.github/actions/cache-docker-images
+        with:
+          cache-key: "test-env-images-v1"
+          images: "${{ vars.AUTOKITTEH_IMAGE }}"
+          restore-only: "false"
+          check-updates: false
+
+      - name: Setup test environment
+        uses: ./.github/actions/setup-test-env
+        with:
+          descope-project-id: ${{ secrets.VITE_DESCOPE_PROJECT_ID }}
+          browser: Chrome
+          autokitteh-image: ${{ vars.AUTOKITTEH_IMAGE }}
+
+      - name: Generate connection test data
+        run: npm run generate:connection-test-data
+
+      - name: Run visual regression tests
+        env:
+          TESTS_JWT_AUTH_TOKEN: ${{ secrets.TESTS_JWT_AUTH_TOKEN }}
+          VITE_DISPLAY_CHATBOT: true
+        run: npx playwright test project/connections/buttonPresence.visual.spec.ts --project="Visual Regression" --workers=1
+
+      - name: Upload visual regression artifacts
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: visual-regression-results
+          path: |
+            test-results/
+            playwright-report/
+          retention-days: 7
+
   build:
     needs: setup
     runs-on: ubuntu-latest
@@ -183,7 +252,7 @@ jobs:
         run: |
           git submodule update --remote
           npm run type-check
-          npm run type-check
+          npm run generate:connection-test-data
           npm run lint:ci
           npm run build
           echo '!dist' >> .gitignore

.husky/pre-commit

@@ -8,6 +8,30 @@ if [ -z "$all_staged_files" ]; then
     exit 0
 fi
 
+# ===========================================
+# Connection Test Data Check
+# ===========================================
+CONNECTIONS_FILE="e2e/fixtures/connectionsTestCases.json"
+
+echo "🔄 Running generate:connection-test-data..."
+npm run generate:connection-test-data
+
+# Check if connectionsTestCases.json has unstaged changes
+if git diff --name-only | grep -q "^${CONNECTIONS_FILE}$"; then
+    echo ""
+    echo "❌ ERROR: ${CONNECTIONS_FILE} has changed after running generate:connection-test-data!"
+    echo "   The connections data is out of sync."
+    echo ""
+    echo "   Please stage the file and commit again:"
+    echo "   git add ${CONNECTIONS_FILE}"
+    echo ""
+    exit 1
+fi
+
+# ===========================================
+# Lint-staged Check
+# ===========================================
+
 # Run lint-staged and check if it fails
 if ! npx lint-staged; then
     echo "⚠️  lint-staged failed, running lint --fix on staged files..."

CLAUDE.md

@@ -863,3 +863,7 @@ This helps Claude understand purpose + intention beyond syntax.
 ---
 
 *This document should be referenced before making any changes to ensure consistency with project standards and conventions.*
+
+## Task Master AI Instructions
+**Import Task Master's development workflow commands and guidelines, treat as if import is in the main CLAUDE.md file.**
+@./.taskmaster/CLAUDE.md

e2e/constants/globalConnections.constants.ts

@@ -0,0 +1,2 @@
+export const testConnectionName = "twilioTest";
+export const testIntegrationName = "Twilio";

e2e/fixtures.ts

@@ -1,16 +1,30 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { expect, test as base } from "@playwright/test";
+import { expect, test as base, type Page } from "@playwright/test";
 
-import { DashboardPage, ProjectPage } from "./pages";
+import { ConnectionsConfig, DashboardPage, GlobalConnectionsPage, ProjectPage } from "./pages";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const RATE_LIMIT_DELAY = process.env.E2E_RATE_LIMIT_DELAY ? parseInt(process.env.E2E_RATE_LIMIT_DELAY, 10) : 0;
 
-const test = base.extend<{ dashboardPage: DashboardPage; projectPage: ProjectPage }>({
-	dashboardPage: async ({ page }, use) => {
+type PageFixtureArgs = { page: Page };
+type UseFixture<T> = (fixture: T) => Promise<void>;
+
+const test = base.extend<{
+	connectionsConfig: ConnectionsConfig;
+	dashboardPage: DashboardPage;
+	globalConnectionsPage: GlobalConnectionsPage;
+	projectPage: ProjectPage;
+}>({
+	connectionsConfig: async ({ page }: PageFixtureArgs, use: UseFixture<ConnectionsConfig>) => {
+		await use(new ConnectionsConfig(page));
+	},
+	dashboardPage: async ({ page }: PageFixtureArgs, use: UseFixture<DashboardPage>) => {
 		await use(new DashboardPage(page));
 	},
-	projectPage: async ({ page }, use) => {
+	globalConnectionsPage: async ({ page }: PageFixtureArgs, use: UseFixture<GlobalConnectionsPage>) => {
+		await use(new GlobalConnectionsPage(page));
+	},
+	projectPage: async ({ page }: PageFixtureArgs, use: UseFixture<ProjectPage>) => {
 		await use(new ProjectPage(page));
 	},
 });

e2e/fixtures/connectionsTestCases.d.ts

@@ -0,0 +1,13 @@
+declare module "./connectionsTestCases.json" {
+	interface ConnectionTestCase {
+		authLabel?: string | null;
+		authType?: string | null;
+		category: "single-type" | "multi-type";
+		integration: string;
+		label: string;
+		testName: string;
+	}
+
+	const value: ConnectionTestCase[];
+	export default value;
+}