improvement: migrate app connections UI to v3 components

[scott-ray-wilson]

Context

This PR migrates app connections UI to v3 components and updates the UI to match secret sync re-vamp styling

Screenshots

Steps to verify the change

• check every from to validate no regressions
• check table and dropdown actions
• check one oauth flow end to end

Type

• Fix
• Feature
• Improvement
• Breaking
• Docs
• Chore

Checklist

• Title follows the conventional commit format: type(scope): short description (scope is optional, e.g., fix: prevent crash on sync or fix(api): handle null response).
• Tested locally
• Updated docs (if needed)
• Updated CLAUDE.md files (if needed)
• Read the contributing guide

[infisical-review-police]

💬 Discussion in Slack: #pr-review-infisical-6937-improvement-migrate-app-connections-ui-to-v3-components

Posted by Review Police — reviews, comments, new commits, and CI failures will stream into this channel.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 121f935924

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[greptile-apps]

Greptile Summary

This PR migrates the App Connections UI from v2 to v3 component primitives, replacing Modals with Sheets, v2 FormControl/Tabs/Tooltip with their v3 counterparts, and FontAwesome icons with lucide-react. It also redesigns the app-selection screen into a card grid with category labels, popular-connections section, and search, using new category/description metadata added to every entry in APP_CONNECTION_MAP.

• New shared abstractions: AppConnectionFormContext propagates onCancel to all ~130 connection form render sites without prop drilling; AppConnectionFormFooter provides a sticky, scope-aware Submit/Cancel footer with allowPristineSubmit support for OAuth reconnect flows.
• Sheet-based modals with discard guard: AddAppConnectionModal now uses a Sheet + AlertDialog confirmation that fires when the user tries to dismiss mid-form via the sheet's X button or Escape key.
• Pure UI change: No backend or API logic was modified; all form validation schemas and mutation hooks remain unchanged.

Confidence Score: 4/5

Safe to merge — the change is entirely frontend UI and carries no risk of data loss or auth bypass.

The migration is large (91 files) but highly mechanical: v2 → v3 component swaps with no backend changes. The new AppConnectionFormContext / AppConnectionFormFooter abstractions are used consistently across all form sites. The one behavioral nuance worth a second look is the asymmetry between the in-form Cancel button (closes immediately) and the sheet's X/Escape (shows the discard confirmation dialog); depending on UX intent this may or may not need aligning.

AddAppConnectionModal.tsx (discard-confirmation asymmetry) and GenericAppConnectionFields.tsx (conditional hint text) are the only files worth a quick manual check.

Important Files Changed

Filename	Overview
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AddAppConnectionModal.tsx	Migrated from Modal to Sheet with a discard-confirmation AlertDialog; new selectedApp state drives the connection-select vs form step; onBack replaced by onCancel threaded through context.
frontend/src/helpers/appConnections.ts	Added required category and description fields to every entry in APP_CONNECTION_MAP; added POPULAR_APP_CONNECTIONS constant; no logic changes.
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionFormContext.tsx	New context that propagates the sheet's onCancel callback to all connection form footers without prop drilling through ~130 form render sites.
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/AppConnectionFormFooter.tsx	New shared footer with sticky positioning, scope-variant Submit, and Cancel wired through AppConnectionFormContext; allowPristineSubmit flag supports OAuth reconnect forms.
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionsTable.tsx	Migrated all v2 components to v3; adds Organization/All tab view toggle with localStorage persistence; presetApp state wires GitHub OAuth callback back into the Sheet.
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionList.tsx	New card-grid provider selector replaces flat list; uses category/description from APP_CONNECTION_MAP; Popular section added using new POPULAR_APP_CONNECTIONS constant.
frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/GenericAppConnectionFields.tsx	Replaced v2 FormControl with v3 Field/FieldLabel/FieldError; name helper text is now conditionally hidden when a validation error is present.

_{Reviews (1): Last reviewed commit: "improvement: migrate app connection ui t..." | Re-trigger Greptile}

[adilsitos]

Looks good! I have just left some minor comments.

ALso, the ones that I said that don't show up they are exclusive for orgs. Not sure if this is intended, but on the docs we don't say anything about it (we don't need to fix it right now, but maybe it would be good to have this on docs)