Integrations Overview
Relevant source files
The following files were used as context for generating this wiki page:
- apps/portal/pages/media/integrations.tsx
- apps/extensions/src/content/panel/screens/IntegrationsScreen/IntegrationsScreen.tsx
- apps/portal/app/services/api/messages.ts
- apps/extensions/src/app/services/api/messages.ts
- apps/portal/app/services/general.ts
- apps/extensions/src/app/services/general.ts
- apps/portal/components/pagesComponents/integrations/Trello.tsx
- apps/extensions/src/content/panel/screens/imagesScreen/pages/integrations/JiraPage.tsx
- apps/api/package.json
- apps/portal/i18n/locales/en.json
The Ever Rec platform provides robust integration capabilities with several popular third-party services, including Jira, Trello, Slack, Dropbox, and Google Drive. These integrations are designed to streamline user workflows by allowing seamless sharing and saving of screen captures and recordings directly to these external platforms.
This functionality is consistently implemented across both the main web application (portal) and the browser extensions, offering a unified user experience. The system relies on a backend API to handle OAuth 2.0 authentication flows and subsequent API interactions with the external services, while the frontend applications manage the user interface, state, and API communication.
Architecture
The integration architecture follows a classic client-server model where the frontend applications (Web Portal and Browser Extension) communicate with the Ever Rec backend API. The backend, in turn, acts as a proxy and orchestrator for all interactions with the third-party services.
This diagram illustrates the high-level data flow between the components.
Frontend Implementation
Both the portal and extensions applications feature a dedicated integrations page where users can manage their connections to external services.
- Portal:
apps/portal/pages/media/integrations.tsx - Extension:
apps/extensions/src/content/panel/screens/IntegrationsScreen/IntegrationsScreen.tsx
These pages render individual components for each service (Drive, Dropbox, Jira, Slack, Trello), which handle the logic for connecting and disconnecting accounts.
The frontend state, such as whether a user is connected to a service and their associated email, is managed via Redux. Service functions in apps/portal/app/services/general.ts and apps/extensions/src/app/services/general.ts wrap API calls and dispatch Redux actions to update the user's authentication state. For example, after a successful disconnection from Trello, the disconnectTrelloUser function dispatches AuthAC.removeTrelloUser to update the store.
Sources: apps/portal/pages/media/integrations.tsx:23-29, apps/extensions/src/content/panel/screens/IntegrationsScreen/IntegrationsScreen.tsx:19-25, apps/portal/app/services/general.ts:63-74
Backend API Services
The backend API exposes a set of RESTful endpoints to facilitate these integrations. The frontend communicates with these endpoints via API service modules. The primary files defining these client-side API calls are:
apps/portal/app/services/api/messages.tsapps/extensions/src/app/services/api/messages.ts
The backend's package.json confirms the use of specific libraries to interact with these services, such as googleapis, dropbox-v2-api, @slack/bolt, and @slack/web-api.
Sources: apps/api/package.json:34-70, apps/portal/app/services/api/messages.ts
Atlassian (Jira & Trello)
Integrations with Jira and Trello are handled under the common API prefix api/v1/atlassian. The authentication process uses an OAuth flow orchestrated by the backend.
Trello Authentication Flow
The following sequence diagram shows the process for a user connecting their Trello account.
API Endpoints
| Method | Endpoint | Description |
|---|---|---|
GET | /api/v1/atlassian/jira/sign-in | Gets the OAuth URL to initiate Jira connection. |
DELETE | /api/v1/atlassian/jira/sign-out | Disconnects the user's Jira account. |
GET | /api/v1/atlassian/jira/project/data | Fetches Jira project data for the authenticated user. |
POST | /api/v1/atlassian/jira/create/issue | Creates a new Jira issue with an attachment. |
GET | /api/v1/atlassian/trello/sign-in | Gets the OAuth URL to initiate Trello connection. |
POST | /api/v1/atlassian/trello/complete-oauth | Completes the Trello OAuth flow by saving the token. |
DELETE | /api/v1/atlassian/trello/sign-out | Disconnects the user's Trello account. |
GET | /api/v1/atlassian/trello/project/data | Fetches Trello boards and other data for the user. |
POST | /api/v1/atlassian/trello/create/issue | Creates a new Trello card with an attachment. |
Sources: apps/extensions/src/app/services/api/messages.ts:71-109
Data Structures
When creating an issue in Jira or a card in Trello, the frontend sends a payload conforming to the IAtlassianSaveItem interface.
Sources: apps/extensions/src/app/services/api/messages.ts:101-103, 107-109
Dropbox
The Dropbox integration allows users to save screenshots and other media directly to their Dropbox account.
API Endpoints
| Method | Endpoint | Description |
|---|---|---|
GET | /api/v1/dropbox/sign-in | Gets the URL to initiate the Dropbox connection. |
DELETE | /api/v1/dropbox/sign-out | Disconnects the user's Dropbox account. |
POST | /api/v1/dropbox/upload/file | Uploads a file (as FormData) to the user's Dropbox. |
DELETE | /api/v1/dropbox/file | Deletes a specific item from the user's Dropbox that was saved via Rec. |
Sources: apps/portal/app/services/api/messages.ts:33-68
Slack & Google Drive
The UI components for Slack and Google Drive integrations are present in both the portal and extension, indicating functionality for connecting and disconnecting these services. The API calls for Slack are initiated from the frontend, and the backend uses the @slack/bolt library to handle interactions. Similarly, googleapis is used for Google Drive.
The user-facing text in the application confirms the purpose of these integrations:
- Slack: "Install the Slack app in your workspace. Once the Rec app is installed, you can send screenshots and videos to any Slack channel or user."
- Google Drive: "You can connect your Google Drive account to save screenshots and videos captured by Rec."
Sources: apps/portal/pages/media/integrations.tsx:27-28, apps/extensions/src/content/panel/screens/imagesScreen/pages/integrations/SlackPage.tsx:25-31, apps/api/package.json:43, 60, apps/portal/i18n/locales/en.json:454, 462
Summary
The integration system in Ever Rec is a core feature that bridges the gap between screen capturing and project management/collaboration tools. By leveraging a centralized backend API to manage authentication and data exchange, it provides a consistent and powerful experience for users across both the web portal and browser extension, ultimately making it easier to share and organize captured media within their existing workflows.