core: add a FeatureFlagged component

Giving this a new home since https://github.com/backstage/backstage/issues/5394 is closed 😁

Feature Suggestion

Looking for feedback on the idea to add 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 😉

Possible Implementation

TBD, looking at the idea first x)

Context

https://github.com/backstage/backstage/issues/5394

[sbrnunes]

I was trying that approach, to hide the tabs that we still do not support, but this fails with Child of EntityLayout must be an EntityLayout.Route:

<EntityLayout>
   ...
   <FeatureToggled name="toggle">
      <EntityLayout.Route path="/ci-cd" title="CI/CD">
          {cicdContent}
      </EntityLayout.Route>
   </FeatureToggled>
   ...
</EntityLayout>

Any idea how to get around this?

[Rugvip]

A possible approach would be to standardize the child element collection functions added in https://github.com/backstage/backstage/pull/5677. If the collection function(s) end up being provided by the core library, we can have it stop depth traversal if it encounters a FeatureFlagged element with a flag that isn’t set. It’s a pretty deep integration but could potentially be worth it