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 />} />