diff --git a/docs/plugins/feature-flags.md b/docs/plugins/feature-flags.md index 7b7a6c1435..3afb8081d5 100644 --- a/docs/plugins/feature-flags.md +++ b/docs/plugins/feature-flags.md @@ -6,39 +6,39 @@ description: Details the process of defining setting and reading a feature flag. Backstage offers the ability to define feature flags inside a plugin or during application creation. This allows you to restrict parts of your plugin to those individual users who have toggled the feature flag to on. -This page describes the process of defining setting and reading a feature flag. If you are looking for using feature flags with software templates that can be found under [Writing Templates](https://backstage.io/docs/features/software-templates/writing-templates#remove-sections-or-fields-based-on-feature-flags). +This page describes the process of defining, setting and reading a feature flag. If you are looking for using feature flags specifically with software templates please see [Writing Templates](https://backstage.io/docs/features/software-templates/writing-templates#remove-sections-or-fields-based-on-feature-flags). ## Defining a Feature Flag ### In a plugin -Defining feature flag in a plugin is done by passing the name of the feature flag into the `featureFlags` array: +Defining a feature flag in a plugin is done by passing the name of the feature flag into the `featureFlags` array: -```ts -/* src/plugin.ts */ -import { createPlugin, createRouteRef } from '@backstage/core-plugin-api'; -import ExampleComponent from './components/ExampleComponent'; +```ts title="src/plugin.ts" +import { createPlugin } from '@backstage/core-plugin-api'; export const examplePlugin = createPlugin({ - id: 'example', - routes: { - root: rootRouteRef, - }, + // ... featureFlags: [{ name: 'show-example-feature' }], + // ... }); ``` ### In the application -Defining feature flag in the application is done by adding feature flags in`featureFlags` array in +Defining a feature flag in the application is done by adding feature flags in `featureFlags` array in the `createApp()` function call: -```ts +```ts title="packages/app/src/App.tsx" +import { createApp } from '@backstage/app-defaults'; + const app = createApp({ // ... featureFlags: [ { - pluginId: '', // pluginId is required for feature flags in plugins. It can be left blank for a feature flag leveraged in the application. + // pluginId is required for feature flags used in plugins. + // pluginId can be left blank for a feature flag used in the application and not in plugins. + pluginId: '', name: 'tech-radar', description: 'Enables the tech radar plugin', }, @@ -49,11 +49,9 @@ const app = createApp({ ## Enabling Feature Flags -Feature flags are defaulted to off and can be updated by individual users in the backstage interface. +Feature flags are defaulted to off and can be updated by individual users in the backstage interface. These are set by navigating to the page under `Settings` > `Feature Flags`. -These are set by navigating to the page under `Settings` > `Feature Flags`. - -The users selection is saved in the users browsers local storage. Once toggled it may be required for a user to refresh the page to see any new changes. +The user's selection is saved in the user's browser local storage. Once a feature flag is toggled it may be required for a user to refresh the page to see the change. ## FeatureFlagged Component @@ -75,7 +73,7 @@ import { FeatureFlagged } from '@backstage/core-app-api'; ## Evaluating Feature Flag State -It is also possible to test the feature flag state using the [FeatureFlags Api](https://backstage.io/docs/reference/core-plugin-api.featureflagsapi). +It is also possible to query a feature flag using the [FeatureFlags Api](https://backstage.io/docs/reference/core-plugin-api.featureflagsapi). ```ts import { useApi, featureFlagsApiRef } from '@backstage/core-plugin-api';