From d7f0b0bed6ae3789f8a7fc281acef74731033ea9 Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Wed, 9 Jun 2021 17:00:12 +0200
Subject: [PATCH] chore: working through beginning API

Signed-off-by: blam <ben@blam.sh>
---
 .../app/src/components/catalog/EntityPage.tsx | 17 +++++++----
 packages/core-app-api/src/app/App.tsx         |  2 +-
 .../src/routing/FeatureFlagged.tsx            | 11 +++++--
 .../src/extensions/pennywise.ts               | 19 ++++++++++--
 plugins/scaffolder/src/components/Router.tsx  | 30 +++++++++++++------
 5 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index f646992c97..61d62136de 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -108,6 +108,7 @@ import {
   isTravisciAvailable,
 } from '@roadiehq/backstage-plugin-travis-ci';
 import { EntityCodeCoverageContent } from '@backstage/plugin-code-coverage';
+import { FeatureFlagged } from '@backstage/core-app-api';
 
 const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
   const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
@@ -282,9 +283,11 @@ const serviceEntityPage = (
       {overviewContent}
     </EntityLayout.Route>
 
-    <EntityLayout.Route path="/ci-cd" title="CI/CD">
-      {cicdContent}
-    </EntityLayout.Route>
+    <FeatureFlagged flag="show-graphiql-page">
+      <EntityLayout.Route path="/ci-cd" title="CI/CD">
+        {cicdContent}
+      </EntityLayout.Route>
+    </FeatureFlagged>
 
     <EntityLayout.Route path="/errors" title="Errors">
       {errorsContent}
@@ -303,9 +306,11 @@ const serviceEntityPage = (
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
-        <Grid item md={6}>
-          <EntityDependsOnComponentsCard variant="gridItem" />
-        </Grid>
+        <FeatureFlagged flag="show-graphiql-page">
+          <Grid item md={6}>
+            <EntityDependsOnComponentsCard variant="gridItem" />
+          </Grid>
+        </FeatureFlagged>
         <Grid item md={6}>
           <EntityDependsOnResourcesCard variant="gridItem" />
         </Grid>
diff --git a/packages/core-app-api/src/app/App.tsx b/packages/core-app-api/src/app/App.tsx
index 93b56bd965..1d77282635 100644
--- a/packages/core-app-api/src/app/App.tsx
+++ b/packages/core-app-api/src/app/App.tsx
@@ -244,7 +244,7 @@ export class PrivateAppImpl implements BackstageApp {
         // Register feature flags that have been discovered
         const featureFlagApi = apiHolder.get(featureFlagsApiRef)!;
         for (const name of result.featureFlags) {
-          featureFlagApi.registerFlag({ name, pluginId: '<app>' });
+          featureFlagApi.registerFlag({ name, pluginId: '' });
         }
 
         return result;
diff --git a/packages/core-app-api/src/routing/FeatureFlagged.tsx b/packages/core-app-api/src/routing/FeatureFlagged.tsx
index 0e28988f17..0adda78842 100644
--- a/packages/core-app-api/src/routing/FeatureFlagged.tsx
+++ b/packages/core-app-api/src/routing/FeatureFlagged.tsx
@@ -14,8 +14,11 @@
  * limitations under the License.
  */
 
-import React from 'react';
-import { featureFlagsApiRef, useApi } from '@backstage/core-plugin-api';
+import {
+  featureFlagsApiRef,
+  useApi,
+  attachComponentData,
+} from '@backstage/core-plugin-api';
 
 export type FeatureFlaggedProps = {
   flag: string;
@@ -25,5 +28,7 @@ export type FeatureFlaggedProps = {
 export const FeatureFlagged = ({ children, flag }: FeatureFlaggedProps) => {
   const featureFlagApi = useApi(featureFlagsApiRef);
   const isEnabled = featureFlagApi.isActive(flag);
-  return isEnabled ? children : <div>NAT ENABLED</div>;
+  return isEnabled ? children : null;
 };
+
+attachComponentData(FeatureFlagged, 'core.featureFlagged', true);
diff --git a/packages/core-plugin-api/src/extensions/pennywise.ts b/packages/core-plugin-api/src/extensions/pennywise.ts
index 4574bafb3b..ce365a5a0f 100644
--- a/packages/core-plugin-api/src/extensions/pennywise.ts
+++ b/packages/core-plugin-api/src/extensions/pennywise.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { getComponentData } from './componentData';
 
 /**
@@ -84,7 +84,7 @@ export const useCollectChildren = (
   return found;
 };
 
-/**
+/*
  *
  *
  * TODO:
@@ -94,4 +94,17 @@ export const useCollectChildren = (
  *    - FlatRoutes
  *    - Respecting feature flags
  */
-export function useElementCollection(children: ReactNode) {}
+
+class ElementCollection {
+  constructor(private readonly children: ReactNode) {}
+  findByComponentData(query: { key: string; withStrictError?: string }) {
+    const next = applyFilterStuff(this.children);
+    return new ElementCollection(next);
+  }
+  listComponentData<T>(query: { key: string }): T[] {}
+  // listElements
+}
+
+export function useElementCollection(children: ReactNode) {
+  return new ElementCollection(children);
+}
diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx
index 5ac663c7ea..ba062f62f7 100644
--- a/plugins/scaffolder/src/components/Router.tsx
+++ b/plugins/scaffolder/src/components/Router.tsx
@@ -32,16 +32,28 @@ import { collectComponentData, collectChildren } from '../extensions/helpers';
 export const Router = () => {
   const outlet = useOutlet();
 
-  const fieldExtensions = useMemo(() => {
-    const registeredExtensions = collectComponentData<FieldExtensionOptions>(
-      collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
-      FIELD_EXTENSION_KEY,
-    );
+  const foundExtensions = useElementCollection(outlet)
+    .findByComponentData({
+      key: FIELD_EXTENSION_WRAPPER_KEY,
+    })
+    .findByComponentData({
+      key: FIELD_EXTENSION_KEY,
+    })
+    .listComponentData<FieldExtensionOptions>();
 
-    return registeredExtensions.length
-      ? registeredExtensions
-      : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
-  }, [outlet]);
+  const fieldExtensions = foundExtensions.length
+    ? foundExtensions
+    : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
+  // const fieldExtensions = useMemo(() => {
+  //   const registeredExtensions = collectComponentData<FieldExtensionOptions>(
+  //     collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
+  //     FIELD_EXTENSION_KEY,
+  //   );
+
+  //   return registeredExtensions.length
+  //     ? registeredExtensions
+  //     : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
+  // }, [outlet]);
 
   return (
     <Routes>