Description
Integration Connections Settings is the user-facing account layer for external services. It lists available connection providers, starts the provider-specific authorization flow, shows existing connections and their health, refreshes stale state, and disconnects accounts no longer needed. A provider picker separates discovery from active connections, keeping the main settings page focused on accounts the user actually uses.
The surface reads a typed connection catalog and current connection records from app-local clients. Connection status is normalized into clear ready, attention, and failure treatments, and every asynchronous branch has a deliberate loading, empty, and retry path. A workspace-level Composio credential can also be managed where that gateway is part of the deployment.
Selling Points
- Centralizes external account management, so users do not have to rediscover authorization controls inside each importer or workflow.
- Makes connection health visible before a sync or contextual action fails later.
- Supports adding multiple providers through a consistent picker while preserving provider-specific identity and branding.
- Gives users direct refresh and disconnect controls, reducing dependence on administrators for routine account maintenance.
- Presents read and mutation failures honestly, keeping a broken connection distinguishable from an empty account.
User Story
A user wants Google Drive material available to their workspace. They open Integrations, choose the provider, complete the authorization flow, and return to a connection row showing the linked account and current status. Weeks later, they use Refresh when the credential needs attention and disconnect it when the project ends.
Extension Surface
This web capability is configurable: users choose from the providers exposed by the backend catalog and manage connection instances. apps/web/src/modules/shell/settings/tabs/integrations/ProviderPickerModal.tsx renders the live provider choices, while apps/web/src/modules/shell/settings/tabs/integrations/integrations-client.ts defines the available connection operations. Provider implementation is owned by data-side packages in another campaign lane, so this UI candidate does not claim an external plugin seam.
Capabilities & Limits
- Discovers available integration providers and initiates account connection flows.
- Lists connection identity, provider, status, refresh, and disconnect actions.
- Supports gateway credential configuration where the deployment exposes it.
- Limit: the settings surface manages account references; source selection, binding, and sync execution belong to importer and sync features outside this lane.
Implementation Map
apps/web/src/modules/shell/settings/tabs/integrations/IntegrationsTab.tsxapps/web/src/modules/shell/settings/tabs/integrations/ProviderPickerModal.tsxapps/web/src/modules/shell/settings/tabs/integrations/ConnectionList.tsxapps/web/src/modules/shell/settings/tabs/integrations/integrations-client.ts