feat: introduce collection of feature flags and make FlatRoutes treat feature flags as first class citizens

Co-authored-by: Johan Haals <johan.haals@gmail.com>
Co-authored-by: Patrik Oldsberg <poldsberg@gmail.com>
Co-authored-by: Fredrik Adelöw <freben@users.noreply.github.com>

Signed-off-by: blam <ben@blam.sh>

packages/app/package.json

@@ -8,6 +8,8 @@
     "@backstage/cli": "^0.7.0",
     "@backstage/core": "^0.7.12",
     "@backstage/integration-react": "^0.1.3",
+    "@backstage/core-app-api": "^0.1.1",
+    "@backstage/core-components": "^0.1.1",
     "@backstage/plugin-api-docs": "^0.4.15",
     "@backstage/plugin-badges": "^0.2.2",
     "@backstage/plugin-catalog": "^0.6.2",

packages/app/src/App.tsx

@@ -14,13 +14,12 @@
  * limitations under the License.
  */
 
+import { createApp, FlatRoutes, FeatureFlagged } from '@backstage/core-app-api';
 import {
   AlertDisplay,
-  createApp,
-  FlatRoutes,
   OAuthRequestDialog,
   SignInPage,
-} from '@backstage/core';
+} from '@backstage/core-components';
 import { apiDocsPlugin, ApiExplorerPage } from '@backstage/plugin-api-docs';
 import {
   CatalogEntityPage,
@@ -65,6 +64,7 @@ const app = createApp({
     // Custom icon example
     alert: AlarmIcon,
   },
+
   components: {
     SignInPage: props => {
       return (
@@ -114,8 +114,11 @@ const routes = (
       path="/tech-radar"
       element={<TechRadarPage width={1500} height={800} />}
     />
-    <Route path="/graphiql" element={<GraphiQLPage />} />
+    <FeatureFlagged flag="show-graphiql-page">
+      <Route path="/graphiql" element={<GraphiQLPage />} />
+    </FeatureFlagged>
     <Route path="/lighthouse" element={<LighthousePage />} />
+
     <Route path="/api-docs" element={<ApiExplorerPage />} />
     <Route path="/gcp-projects" element={<GcpProjectsPage />} />
     <Route path="/newrelic" element={<NewRelicPage />} />

packages/core-app-api/src/app/App.tsx

@@ -57,6 +57,7 @@ import {
 } from '../extensions/traversal';
 import { pluginCollector } from '../plugins/collectors';
 import {
+  featureFlagCollector,
   routeObjectCollector,
   routeParentCollector,
   routePathCollector,
@@ -224,6 +225,7 @@ export class PrivateAppImpl implements BackstageApp {
             routeParents: routeParentCollector,
             routeObjects: routeObjectCollector,
             collectedPlugins: pluginCollector,
+            featureFlags: featureFlagCollector,
           },
         });
 
@@ -237,7 +239,13 @@ export class PrivateAppImpl implements BackstageApp {
         this.verifyPlugins(this.plugins);
 
         // Initialize APIs once all plugins are available
-        this.getApiHolder();
+        const apiHolder = this.getApiHolder();
+
+        // Register feature flags that have been discovered
+        const featureFlagApi = apiHolder.get(featureFlagsApiRef)!;
+        for (const name of result.featureFlags) {
+          featureFlagApi.registerFlag({ name, pluginId: '<app>' });
+        }
 
         return result;
       }, [children]);

packages/core-app-api/src/routing/FeatureFlagged.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2021 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { featureFlagsApiRef, useApi } from '@backstage/core-plugin-api';
+
+export type FeatureFlaggedProps = {
+  flag: string;
+  children: JSX.Element | null;
+};
+
+export const FeatureFlagged = ({ children, flag }: FeatureFlaggedProps) => {
+  const featureFlagApi = useApi(featureFlagsApiRef);
+  const isEnabled = featureFlagApi.isActive(flag);
+  return isEnabled ? children : <div>NAT ENABLED</div>;
+};

packages/core-app-api/src/routing/FlatRoutes.tsx

@@ -16,7 +16,13 @@
 
 import React, { ReactNode, Children, isValidElement, Fragment } from 'react';
 import { useRoutes } from 'react-router-dom';
-import { useApp } from '@backstage/core-plugin-api';
+import {
+  useApi,
+  useApp,
+  featureFlagsApiRef,
+  FeatureFlagsApi,
+} from '@backstage/core-plugin-api';
+import { FeatureFlagged, FeatureFlaggedProps } from './FeatureFlagged';
 
 type RouteObject = {
   path: string;
@@ -26,7 +32,10 @@ type RouteObject = {
 
 // Similar to the same function from react-router, this collects routes from the
 // children, but only the first level of routes
-function createRoutesFromChildren(childrenNode: ReactNode): RouteObject[] {
+function createRoutesFromChildren(
+  childrenNode: ReactNode,
+  featureFlagsApi: FeatureFlagsApi,
+): RouteObject[] {
   return Children.toArray(childrenNode).flatMap(child => {
     if (!isValidElement(child)) {
       return [];
@@ -35,7 +44,15 @@ function createRoutesFromChildren(childrenNode: ReactNode): RouteObject[] {
     const { children } = child.props;
 
     if (child.type === Fragment) {
-      return createRoutesFromChildren(children);
+      return createRoutesFromChildren(children, featureFlagsApi);
+    }
+
+    if (child.type === FeatureFlagged) {
+      const { flag } = child.props as FeatureFlaggedProps;
+      if (featureFlagsApi.isActive(flag)) {
+        return createRoutesFromChildren(children, featureFlagsApi);
+      }
+      return [];
     }
 
     let path = child.props.path as string | undefined;
@@ -67,8 +84,9 @@ type FlatRoutesProps = {
 
 export const FlatRoutes = (props: FlatRoutesProps): JSX.Element | null => {
   const app = useApp();
+  const featureFlagsApi = useApi(featureFlagsApiRef);
   const { NotFoundErrorPage } = app.getComponents();
-  const routes = createRoutesFromChildren(props.children)
+  const routes = createRoutesFromChildren(props.children, featureFlagsApi)
     // Routes are sorted to work around a bug where prefixes are unexpectedly matched
     .sort((a, b) => b.path.localeCompare(a.path))
     // We make sure all routes have '/*' appended, except '/'

packages/core-app-api/src/routing/collectors.tsx

@@ -19,6 +19,7 @@ import { RouteRef } from '@backstage/core-plugin-api';
 import { BackstageRouteObject } from './types';
 import { getComponentData } from '../extensions';
 import { createCollector } from '../extensions/traversal';
+import { FeatureFlagged, FeatureFlaggedProps } from './FeatureFlagged';
 
 function getMountPoint(node: ReactElement): RouteRef | undefined {
   const element: ReactNode = node.props?.element;
@@ -171,3 +172,13 @@ export const routeObjectCollector = createCollector(
     return parentObj;
   },
 );
+
+export const featureFlagCollector = createCollector(
+  () => new Set<string>(),
+  (acc, node) => {
+    if (node.type === FeatureFlagged) {
+      const { flag } = node.props as FeatureFlaggedProps;
+      acc.add(flag);
+    }
+  },
+);

packages/core-app-api/src/routing/index.ts

@@ -15,3 +15,4 @@
  */
 
 export { FlatRoutes } from './FlatRoutes';
+export { FeatureFlagged, FeatureFlaggedProps } from './FeatureFlagged';