Plugin Feature Flag Feature Not Working as Documented

Expected Behavior

The following should enable a Feature Flag and it currently doesn’t:

import {
    createPlugin,
    createRoutableExtension,
    createRouteRef,
  } from '@backstage/core';
  import WelcomePageComponent from '../pages/WelcomePage';
  
  export const rootRouteRef = createRouteRef({
    title: 'Welcome',
  });
  
  export const welcomePlugin = createPlugin({
    id: 'welcome',
    register({ router, featureFlags }) {
      router.addRoute(rootRouteRef, WelcomePageComponent);
      featureFlags.register('enable-welcome-box');
    },
  });

When going to /settings/feature-flags i still see No Feature Flags

[Rugvip]

Yeah feature flag API is a bit behind the composability work, iirc it’s currently only possible to check if a flag is active via the API itself, meaning that you’ll need to manually check the state of the flag and then not render the rest of the react tree within your own component. We definitely want to provide some more utilities to make feature flags easier to work with.

One idea is to just have a single FeatureFlagged component for use in the app, that’ll both take care of acting as a switch but also register the feature flag. It would be implemented to work with the composability API, and simply act as a switch for whether its children should be renderer. Basically this:

const routes = (
  <FlatRoutes>
...
    <FeatureFlagged flag="show-welcome-page">
      <Route path="/welcome" element={<WelcomePage />} />
    <FeatureFlagged>
...
  <FlatRoutes>
)

Where the Route works as expected, is discovered in the app etc, and the "show-welcome-page" flag is both automatically registered as well as used to toggle whether the welcome page should be renderer. I’m not sure if that exact implementation is possible, but something of that sort x)

This’d lift the feature flag registration from plugins to the app, which we can ofc debate a bit 😉

[augustomeireles05]

Hy there, Rugvip. If it’s possible, I would like to take some doubt with you: I need to know how to disable this option from the screen. I saw on core-plugin-api folder into node modules that exist a FeatureFlagState Enum where we can declare an attribute none 0. How to put in a component SidebarSettings to disable this element?