From 765632fac76ef19dcaff6806a6914982660149b4 Mon Sep 17 00:00:00 2001 From: blam Date: Wed, 9 Jun 2021 12:05:04 +0200 Subject: [PATCH] feat: introduce collection of feature flags and make `FlatRoutes` treat feature flags as first class citizens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Johan Haals Co-authored-by: Patrik Oldsberg Co-authored-by: Fredrik Adelöw Signed-off-by: blam --- packages/app/package.json | 2 ++ packages/app/src/App.tsx | 11 ++++--- packages/core-app-api/src/app/App.tsx | 10 ++++++- .../src/routing/FeatureFlagged.tsx | 29 +++++++++++++++++++ .../core-app-api/src/routing/FlatRoutes.tsx | 26 ++++++++++++++--- .../core-app-api/src/routing/collectors.tsx | 11 +++++++ packages/core-app-api/src/routing/index.ts | 1 + 7 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 packages/core-app-api/src/routing/FeatureFlagged.tsx diff --git a/packages/app/package.json b/packages/app/package.json index 1b0b3aa22c..bfd2b458ae 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx index b14f9a3163..12cbe89f26 100644 --- a/packages/app/src/App.tsx +++ b/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={} /> - } /> + + } /> + } /> + } /> } /> } /> diff --git a/packages/core-app-api/src/app/App.tsx b/packages/core-app-api/src/app/App.tsx index a5ba5c4bca..93b56bd965 100644 --- a/packages/core-app-api/src/app/App.tsx +++ b/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: '' }); + } return result; }, [children]); diff --git a/packages/core-app-api/src/routing/FeatureFlagged.tsx b/packages/core-app-api/src/routing/FeatureFlagged.tsx new file mode 100644 index 0000000000..0e28988f17 --- /dev/null +++ b/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 :
NAT ENABLED
; +}; diff --git a/packages/core-app-api/src/routing/FlatRoutes.tsx b/packages/core-app-api/src/routing/FlatRoutes.tsx index 54ef092965..9e3a0a9956 100644 --- a/packages/core-app-api/src/routing/FlatRoutes.tsx +++ b/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 '/' diff --git a/packages/core-app-api/src/routing/collectors.tsx b/packages/core-app-api/src/routing/collectors.tsx index e940a2cada..31c1ab6361 100644 --- a/packages/core-app-api/src/routing/collectors.tsx +++ b/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(), + (acc, node) => { + if (node.type === FeatureFlagged) { + const { flag } = node.props as FeatureFlaggedProps; + acc.add(flag); + } + }, +); diff --git a/packages/core-app-api/src/routing/index.ts b/packages/core-app-api/src/routing/index.ts index 7982333f4b..7e82eeb25d 100644 --- a/packages/core-app-api/src/routing/index.ts +++ b/packages/core-app-api/src/routing/index.ts @@ -15,3 +15,4 @@ */ export { FlatRoutes } from './FlatRoutes'; +export { FeatureFlagged, FeatureFlaggedProps } from './FeatureFlagged';