Update feature-flags.md

Some minor updates to punctuation, code examples, and language

Signed-off-by: Joshua Jung <joshua.p.jung@gmail.com>
This commit is contained in:
Joshua Jung
2024-05-06 13:59:28 +02:00
committed by Joshua Jung
parent 58f8d33f3b
commit a5ad56226e
+16 -18
View File
@@ -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';