docs: Add Backstage plugin integration documentation (#6755)

Author: talissoncosta

docs/docs/third-party-integrations/backstage.md

@@ -0,0 +1,119 @@
+---
+title: Backstage
+description: 'Integrate Flagsmith feature flags into your Backstage developer portal'
+---
+
+The [Flagsmith Backstage Plugin](https://github.com/Flagsmith/flagsmith-backstage-plugin) brings feature flag
+observability directly into your [Backstage](https://backstage.io/) developer portal. It provides three components:
+
+- **Feature Flags Tab** — A full-page table listing all flags, their tags, and environment states.
+- **Overview Card** — A quick summary of your feature flags for entity overview pages.
+- **Usage Card** — A chart showing flag usage metrics over time.
+
+![A canvas displaying all components of the Flagsmith Backstage plugin](/img/integrations/backstage/components-overview.png)
+
+## Integrate with Backstage
+
+### 1. Install the plugin
+
+Install the plugin from your Backstage app root:
+
+```bash
+yarn --cwd packages/app add @flagsmith/backstage-plugin
+```
+
+### 2. Configure the proxy
+
+Add the Flagsmith proxy configuration to your `app-config.yaml`:
+
+```yaml
+proxy:
+ endpoints:
+  '/flagsmith':
+   target: 'https://api.flagsmith.com/api/v1'
+   headers:
+    Authorization: Api-Key FLAGSMITH_API_TOKEN
+```
+
+- `FLAGSMITH_API_TOKEN`: obtain from Organisation Settings > API Keys in Flagsmith.
+- If you are self-hosting Flagsmith, replace the `target` URL with your own Flagsmith API address, e.g.
+  `https://flagsmith.example.com/api/v1`.
+
+:::note
+
+**Enterprise users:** when generating the Organisation API key, select permissions **View Project** and **View
+Environment**, so that Backstage can see your _Environments_ and _Features_ in Flagsmith.
+
+:::
+
+### 3. Set up entity annotation
+
+Annotate your entities in `catalog-info.yaml` so the plugin knows which Flagsmith project to display:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+ name: my-service
+ annotations:
+  flagsmith.com/project-id: 'PROJECT_ID'
+spec:
+ type: service
+ owner: my-team
+ lifecycle: production
+```
+
+- `PROJECT_ID`: obtain from the Flagsmith dashboard URL, e.g. `/project/<id>/...`.
+
+## Add Components to Backstage
+
+Edit your `packages/app/src/components/catalog/EntityPage.tsx` to add the Flagsmith components.
+
+### Feature Flags Tab
+
+Import and add the `FlagsTab` as a new tab on your entity page:
+
+```tsx
+import { FlagsTab } from '@flagsmith/backstage-plugin';
+
+// Inside your entity page layout, add a new tab:
+<EntityLayout.Route path="/feature-flags" title="Feature Flags">
+ <FlagsTab />
+</EntityLayout.Route>;
+```
+
+![A list of feature flags from Flagsmith along with their tags, and states per environment, displayed in Backstage](/img/integrations/backstage/flags-tab.png)
+
+Click a feature in the list to reveal its usage graphs and detailed information:
+
+![The expanded Flagsmith feature, showing the details and usage metrics](/img/integrations/backstage/flag-details-expanded.png)
+
+### Overview Card
+
+Add the `FlagsmithOverviewCard` to your entity overview page:
+
+```tsx
+import { FlagsmithOverviewCard } from '@flagsmith/backstage-plugin';
+
+// Inside your overview grid:
+<Grid item md={6}>
+ <FlagsmithOverviewCard />
+</Grid>;
+```
+
+![A compact list of features displaying their states per environment](/img/integrations/backstage/overview-card.png)
+
+### Usage Card
+
+Add the `FlagsmithUsageCard` to display flag usage metrics:
+
+```tsx
+import { FlagsmithUsageCard } from '@flagsmith/backstage-plugin';
+
+// Inside your overview grid:
+<Grid item md={6}>
+ <FlagsmithUsageCard />
+</Grid>;
+```
+
+![A bar chart displaying the usage metrics for the past 30 days](/img/integrations/backstage/usage-card.png)

docs/docs/third-party-integrations/index.mdx

@@ -6,7 +6,8 @@ description: Connect Flagsmith with analytics, observability, project management
 import Card from '../../src/components/Card';
 import Link from '@docusaurus/Link';
 
-Integrate Flagsmith with popular third-party tools to enhance your feature flag workflow with analytics tracking, monitoring, project management, and CI/CD automation across your entire stack.
+Integrate Flagsmith with popular third-party tools to enhance your feature flag workflow with analytics tracking,
+monitoring, project management, and CI/CD automation across your entire stack.
 
 ## Analytics & Data Platforms {#analytics--data-platforms}
 
@@ -15,33 +16,45 @@ Connect your feature flag data with analytics platforms to track feature usage a
 <div style={{display: 'grid', gap: '24px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', margin: '1rem 0'}}>
 
 <Card>
-  <h3><Link to="/third-party-integrations/analytics/amplitude">Amplitude Integration</Link></h3>
-  <p>Analytics and product insight platform</p>
+    <h3>
+        <Link to="/third-party-integrations/analytics/amplitude">Amplitude Integration</Link>
+    </h3>
+    <p>Analytics and product insight platform</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/analytics/mixpanel">Mixpanel Analytics Integration</Link></h3>
-  <p>User behaviour analytics and tracking</p>
+    <h3>
+        <Link to="/third-party-integrations/analytics/mixpanel">Mixpanel Analytics Integration</Link>
+    </h3>
+    <p>User behaviour analytics and tracking</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/analytics/segment">Segment Integration</Link></h3>
-  <p>Customer data platform for seamless data flow</p>
+    <h3>
+        <Link to="/third-party-integrations/analytics/segment">Segment Integration</Link>
+    </h3>
+    <p>Customer data platform for seamless data flow</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/analytics/heap">Heap Analytics Integration</Link></h3>
-  <p>Automatic user behaviour tracking</p>
+    <h3>
+        <Link to="/third-party-integrations/analytics/heap">Heap Analytics Integration</Link>
+    </h3>
+    <p>Automatic user behaviour tracking</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/analytics/adobe">Adobe Analytics Integration</Link></h3>
-  <p>Enterprise analytics and marketing automation</p>
+    <h3>
+        <Link to="/third-party-integrations/analytics/adobe">Adobe Analytics Integration</Link>
+    </h3>
+    <p>Enterprise analytics and marketing automation</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/analytics/rudderstack">RudderStack Integration</Link></h3>
-  <p>Customer data pipeline and privacy-focused analytics</p>
+    <h3>
+        <Link to="/third-party-integrations/analytics/rudderstack">RudderStack Integration</Link>
+    </h3>
+    <p>Customer data pipeline and privacy-focused analytics</p>
 </Card>
 
 </div>
@@ -53,33 +66,45 @@ Monitor flag performance and get alerts with APM tools to ensure proper operatio
 <div style={{display: 'grid', gap: '24px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', margin: '1rem 0'}}>
 
 <Card>
-  <h3><Link to="/third-party-integrations/observability-and-monitoring/datadog">Datadog Integration</Link></h3>
-  <p>Cloud monitoring and observability platform</p>
+    <h3>
+        <Link to="/third-party-integrations/observability-and-monitoring/datadog">Datadog Integration</Link>
+    </h3>
+    <p>Cloud monitoring and observability platform</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/observability-and-monitoring/new-relic">New Relic Integration</Link></h3>
-  <p>Application performance monitoring</p>
+    <h3>
+        <Link to="/third-party-integrations/observability-and-monitoring/new-relic">New Relic Integration</Link>
+    </h3>
+    <p>Application performance monitoring</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/observability-and-monitoring/grafana">Grafana & Prometheus Integration</Link></h3>
-  <p>Open-source monitoring and analytics</p>
+    <h3>
+        <Link to="/third-party-integrations/observability-and-monitoring/grafana">Grafana & Prometheus Integration</Link>
+    </h3>
+    <p>Open-source monitoring and analytics</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/observability-and-monitoring/appdynamics">AppDynamics Integration</Link></h3>
-  <p>Enterprise application performance monitoring</p>
+    <h3>
+        <Link to="/third-party-integrations/observability-and-monitoring/appdynamics">AppDynamics Integration</Link>
+    </h3>
+    <p>Enterprise application performance monitoring</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/observability-and-monitoring/dynatrace">Dynatrace Integration</Link></h3>
-  <p>Automatic observability and AIOps</p>
+    <h3>
+        <Link to="/third-party-integrations/observability-and-monitoring/dynatrace">Dynatrace Integration</Link>
+    </h3>
+    <p>Automatic observability and AIOps</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/observability-and-monitoring/sentry">Sentry Integration</Link></h3>
-  <p>Error monitoring and crash reporting</p>
+    <h3>
+        <Link to="/third-party-integrations/observability-and-monitoring/sentry">Sentry Integration</Link>
+    </h3>
+    <p>Error monitoring and crash reporting</p>
 </Card>
 
 </div>
@@ -91,41 +116,54 @@ Keep your teams in sync with project management tools for automatic notification
 <div style={{display: 'grid', gap: '24px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', margin: '1rem 0'}}>
 
 <Card>
-  <h3><Link to="/third-party-integrations/project-management/jira">Jira Integration</Link></h3>
-  <p>Issue tracking and project management</p>
+    <h3>
+        <Link to="/third-party-integrations/project-management/jira">Jira Integration</Link>
+    </h3>
+    <p>Issue tracking and project management</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/project-management/github">GitHub Integration</Link></h3>
-  <p>Version control and development collaboration</p>
+    <h3>
+        <Link to="/third-party-integrations/project-management/github">GitHub Integration</Link>
+    </h3>
+    <p>Version control and development collaboration</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/project-management/slack">Slack Integration</Link></h3>
-  <p>Team communication and notifications</p>
+    <h3>
+        <Link to="/third-party-integrations/project-management/slack">Slack Integration</Link>
+    </h3>
+    <p>Team communication and notifications</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/project-management/servicenow">ServiceNow Integration</Link></h3>
-  <p>IT service management and automation</p>
+    <h3>
+        <Link to="/third-party-integrations/project-management/servicenow">ServiceNow Integration</Link>
+    </h3>
+    <p>IT service management and automation</p>
 </Card>
 
 </div>
 
 ## CI/CD & Infrastructure
 
-Automate feature flag management in your development workflows with CI/CD platforms for infrastructure-as-code deployments.
+Automate feature flag management in your development workflows with CI/CD platforms for infrastructure-as-code
+deployments.
 
 <div style={{display: 'grid', gap: '24px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', margin: '1rem 0'}}>
 
 <Card>
-  <h3><Link to="/third-party-integrations/ci-cd/terraform">Terraform Provider</Link></h3>
-  <p>Infrastructure as code automation</p>
+    <h3>
+        <Link to="/third-party-integrations/ci-cd/terraform">Terraform Provider</Link>
+    </h3>
+    <p>Infrastructure as code automation</p>
 </Card>
 
 <Card>
-  <h3><Link to="/third-party-integrations/ci-cd">CI/CD Overview</Link></h3>
-  <p>Get started with continuous integration and deployment</p>
+    <h3>
+        <Link to="/third-party-integrations/ci-cd">CI/CD Overview</Link>
+    </h3>
+    <p>Get started with continuous integration and deployment</p>
 </Card>
 
 </div>
@@ -137,8 +175,17 @@ Extend Flagsmith functionality with webhooks and other integration methods.
 <div style={{display: 'grid', gap: '24px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', margin: '1rem 0'}}>
 
 <Card>
-  <h3><Link to="/third-party-integrations/webhook">Webhook Integration</Link></h3>
-  <p>Send HTTP notifications when flags change</p>
+    <h3>
+        <Link to="/third-party-integrations/backstage">Backstage Plugin</Link>
+    </h3>
+    <p>Feature flag observability in your Backstage developer portal</p>
 </Card>
 
-</div>
+<Card>
+    <h3>
+        <Link to="/third-party-integrations/webhook">Webhook Integration</Link>
+    </h3>
+    <p>Send HTTP notifications when flags change</p>
+</Card>
+
+</div>