feat: Plausible Integration

[johnnyhuy]

User description

• chore: Update Plausible service commands and URLs in Makefile
• chore: Revise environment variables and configurations across project files
• chore: Refactor Docker Compose configurations
• docs: Update service configurations for Backstage and Traefik
• Update configuration settings for plausible tracking.
• docs: Update documentation with plugin and tracking instructions
• chore: Configure Plausible service with new database services and lint target
• Add Plausible plugin with analytics integration.
• chore: Update ESLint configurations and add custom rule.

---

PR Type

Enhancement, Documentation, Tests

---

Description

• Integrated Plausible Analytics into the application.
• Added Plausible plugin with necessary components and configurations.
• Updated Docker Compose files to include Plausible and Traefik services.
• Added environment variables and configuration settings for Plausible.
• Updated ESLint configurations and added custom rules.
• Added tests for PlausibleAnalytics component.
• Updated documentation with instructions for plugin creation, validation, and tracking.

---

Changes walkthrough 📝

	Relevant files
Enhancement	21 files App.tsx Integrate PlausibleAnalytics component in App root.            packages/app/src/App.tsx Added PlausibleAnalytics component to the app root. +2/-0      Root.tsx Clean up imports and add ESLint directive.                              packages/app/src/components/Root/Root.tsx Removed unused useState import. Added ESLint directive for LocalStorageKeys. +2/-2      HomePage.tsx Remove unused imports and functions.                                          packages/app/src/components/home/HomePage.tsx Removed unused useRef import and related scroll functions. +1/-21    config.d.ts Define Plausible configuration interface.                                plugins/plausible/config.d.ts Added configuration interface for Plausible settings. +13/-0    index.tsx Add development entry point for Plausible plugin.                plugins/plausible/dev/index.tsx Created development entry point for Plausible plugin. +5/-0      PlausibleAnalytics.tsx Implement PlausibleAnalytics component.                                    plugins/plausible/src/components/PlausibleAnalytics.tsx Implemented PlausibleAnalytics component to inject Plausible script. +20/-0    index.ts Export PlausibleAnalytics component and plugin.                    plugins/plausible/src/index.ts Exported PlausibleAnalytics component and plausiblePlugin. +2/-0      plugin.ts Define Plausible plugin.                                                                  plugins/plausible/src/plugin.ts Created Plausible plugin definition. +10/-0    routes.ts Define route reference for Plausible plugin.                          plugins/plausible/src/routes.ts Defined route reference for Plausible plugin. +5/-0      .eslintrc.js Update ESLint configuration with custom rule.                        packages/app/.eslintrc.js Updated ESLint configuration to include custom rule for unused variables. +5/-1      .eslintrc.js Update ESLint configuration with custom rule.                        packages/backend/.eslintrc.js Updated ESLint configuration to include custom rule for unused variables. +5/-1      .eslintrc.js Add ESLint configuration for Plausible plugin.                      plugins/plausible/.eslintrc.js Added ESLint configuration for Plausible plugin. +1/-0      .env.example Update environment variables for Plausible.                            .env.example Updated environment variables for Plausible integration. +7/-3      Makefile Update Makefile with Plausible commands and lint target.  Makefile Added commands for starting and stopping Plausible service. Updated lint target to include TypeScript check. +13/-2    app-config.example.yaml Add example configuration for Plausible.                                  app-config.example.yaml Added example configuration for Plausible. +3/-0      app-config.production.yaml Add production configuration for Plausible.                            app-config.production.yaml Added production configuration for Plausible. +3/-0      app-config.yaml Add main configuration for Plausible.                                        app-config.yaml Added main configuration for Plausible. +4/-0      compose.plausible.yaml Add Docker Compose configuration for Plausible.                    compose.plausible.yaml Added Docker Compose configuration for Plausible and related services. +65/-0    compose.yaml Update Docker Compose configuration with Traefik.                compose.yaml Updated Docker Compose configuration to include Traefik and environment file. +24/-2    package.json Add Plausible plugin dependency.                                                  packages/app/package.json Added dependency for Plausible plugin. +1/-0      package.json Create package.json for Plausible plugin.                                plugins/plausible/package.json Created package.json for Plausible plugin. +54/-0
Tests	2 files plugin.test.tsx Add tests for PlausibleAnalytics component.                            plugins/plausible/src/plugin.test.tsx Added tests for PlausibleAnalytics component. +56/-0    setupTests.ts Add Jest DOM setup for testing.                                                    plugins/plausible/src/setupTests.ts Added Jest DOM setup for testing. +1/-0
Documentation	3 files development.md Update development documentation.                                                docs/development.md Updated development documentation with plugin creation and validation instructions. +24/-0    tracking.md Add tracking documentation for Plausible.                                docs/tracking.md Added documentation for tracking with Plausible. +25/-0    README.md Add README for Plausible plugin.                                                  plugins/plausible/README.md Added README for Plausible plugin. +13/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[echohello-codium-ai-pr-agent]

PR Review 🔍

⏱️ Estimated effort to review [1-5]	3, because the PR involves multiple changes across various files including backend and frontend integrations, configuration updates, and documentation. The complexity is moderate with changes in configuration and integration of a new plugin, requiring a thorough review to ensure compatibility and correctness.
🧪 Relevant tests	Yes
⚡ Possible issues	Possible Bug: The removal of useRef and scroll functionality in HomePage.tsx without a replacement might affect existing functionalities that depend on these features.
	Configuration Error: The use of environment variables in app-config.production.yaml and app-config.yaml needs verification to ensure they are correctly set up in the deployment environment to avoid runtime errors.
🔒 Security concerns	No

[echohello-codium-ai-pr-agent]

PR Code Suggestions ✨

Category	Suggestion	Score
Possible issue	Add a test case to handle the scenario where the domain is provided but the feature is disabled Consider adding a test case to verify the behavior when the domain is provided but enabled is set to false. This will ensure that the component behaves correctly in all configurations. plugins/plausible/src/plugin.test.tsx [25-33] -it('renders nothing when domain is not provided', () => { - const config = mockConfigApi({ plausible: { enabled: true } }); +it('renders nothing when domain is provided but disabled', () => { + const config = mockConfigApi({ plausible: { enabled: false, domain: 'example.com' } }); const { container } = render( <TestApiProvider apis={[[configApiRef, config]]}> <PlausibleAnalytics /> </TestApiProvider>, ); expect(container.firstChild).toBeNull(); }); Suggestion importance[1-10]: 9 Why: The suggestion is valid and adds a useful test case to cover an edge scenario, ensuring the component behaves correctly in all configurations. This improves the robustness of the test suite.	9