feat(posthog): PostHog Analytics Contentful App #10443
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add emotion dependency and create ConfigScreen.styles.ts with styles for: - Body container with max-width and spacing - Form fields and sections - Host selector (US/EU/custom) - Connection status indicators (success/error) - Content type mapping rows
Add Sidebar.styles.ts with comprehensive styles for the PostHog sidebar component including metrics display, tab navigation, loading/error/empty states, and list items for recordings and feature flags. Also adds a basic index.css reset for consistent rendering. Closes T033
- Create vitest.config.mts for test configuration - Add comprehensive types in src/types.ts (T011) - Create test mocks for SDK and CMA (T016, T017) - Add AnalyticsDisplay.spec.tsx with 14 tests covering: - Loading state - Error state - Empty state - Success state with metrics display - Date range selection - Edge cases (zero values, large numbers) Closes T027, T011, T016, T017
Create hook to extract page URL from entry based on content type configuration. The hook reads installation parameters, maps content type to slug field config, and constructs the full page URL for analytics queries. Includes comprehensive test coverage for all edge cases.
Create AnalyticsDisplay component that shows page analytics metrics with loading, error, and empty states. Integrates DateRangeSelector for date filtering. Displays page views, unique visitors, and average session duration with proper formatting. - Add formatDuration helper for human-readable time - Use Sidebar.styles for consistent styling - Update tests to use actual component with 14 passing tests Task: T032
Simplify Sidebar component to use the new architecture: - Use AnalyticsDisplay component for metrics display - Use useSidebarSlug hook for URL extraction - Use Sidebar.styles.ts for consistent styling - Add Tabs structure ready for recordings/flags tabs (US2/US3) - Remove inline styles and legacy PostHog client integration The component now follows the modular structure from the implementation plan and is ready for the usePostHogApi hook integration (T030). Closes T034
- Add AppInstallationParameters and UrlMapping types to support ConfigScreen parameter storage - Update ConfigScreen to import and use shared styles from ConfigScreen.styles.ts for consistent styling
- Enhanced ConfigScreen tests with validation and credential input scenarios (25 tests) - Rewrote Sidebar tests to match current implementation (12 tests) - Updated mockSdk with navigator and additional mock variants - Added test setup file with jest-dom matchers
… (T023) - Create validateConnection App Function to test PostHog credentials - Add contentful-app-manifest.json with validateConnection action - Add Test Connection button to ConfigScreen - Display connection status (success/error) with visual feedback - Add 7 new tests for connection testing functionality - Reset connection status when credentials change Closes T023
Add usePostHogApi hook that provides: - queryAnalytics: Fetch page view metrics from PostHog - listRecordings: List session recordings for a URL - listFeatureFlags: List all feature flags in project - toggleFeatureFlag: Enable/disable a feature flag Uses Contentful CMA to invoke App Actions and returns typed responses.
Add generic ApiResponse<T> interface for App Action responses. Used by usePostHogApi hook and other components. Closes T030
- Integrate usePostHogApi hook for fetching analytics data - Add 10-second auto-refresh interval per spec requirements - Display last updated timestamp with relative time formatting - Only refresh when on analytics tab and not already loading - Proper cleanup of intervals on unmount - Add SidebarTab type to shared types Closes T036
Add RecordingsList component that displays session recordings from PostHog with links to view them in the PostHog dashboard. Includes: - Loading, error, and empty states - Relative time formatting for recording timestamps - Duration display for each recording - Lazy loading when switching to recordings tab Updates Sidebar to include the recordings tab with full integration. Tasks: T039, T040, T041, T043
- Create FeatureFlagsList component with toggle switches (T047) - Add 19 tests for FeatureFlagsList component (T044) - Add Flags tab to Sidebar component (T048) - Add success/error notifications on flag toggle (T050) - Add read-only mode support for users without permissions (T051) - Update mockCma with smart response handling for all actions Closes T044, T047, T048, T049, T050, T051
Test fixes: - Add useCMA mock to Sidebar.spec.tsx for usePostHogApi hook - Update location placeholder tests to use correct app ID - Fix getDailyStats test to use dynamic dates - Update Sidebar tests to match new auto-refresh behavior Build fixes: - Add null check for cached value in usePostHogApi - Exclude test files from tsconfig compilation All 138 tests now pass and build succeeds.
- Add Sidebar integration for feature flags tab with toggle functionality - Add App Functions: queryAnalytics, listRecordings, listFeatureFlags, toggleFeatureFlag, validateConnection - Add common.ts with shared utilities for App Functions - Add ErrorBoundary and TabNavigation components - Add RecordingsList component tests - Fix ConfigScreen Note component marginBottom prop - Update imports in location spec files
Wiz Scan Summary
To detect these findings earlier in the dev lifecycle, try using Wiz Code VS Code Extension. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR introduces a new PostHog Analytics app for Contentful that provides:
Key Features
validateConnection- Test PostHog credentialsqueryAnalytics- Fetch page metrics via HogQLlistRecordings- Get session recordings for a pagelistFeatureFlags- List project feature flagstoggleFeatureFlag- Enable/disable feature flagsTechnical Details
Test plan