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}
-
- {cicdContent}
-
+
+
+ {cicdContent}
+
+
{errorsContent}
@@ -303,9 +306,11 @@ const serviceEntityPage = (
-
-
-
+
+
+
+
+
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: '' });
+ 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 : NAT ENABLED
;
+ 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(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(
- 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();
- return registeredExtensions.length
- ? registeredExtensions
- : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
- }, [outlet]);
+ const fieldExtensions = foundExtensions.length
+ ? foundExtensions
+ : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
+ // const fieldExtensions = useMemo(() => {
+ // const registeredExtensions = collectComponentData(
+ // collectChildren(outlet, FIELD_EXTENSION_WRAPPER_KEY).flat(),
+ // FIELD_EXTENSION_KEY,
+ // );
+
+ // return registeredExtensions.length
+ // ? registeredExtensions
+ // : DEFAULT_SCAFFOLDER_FIELD_EXTENSIONS;
+ // }, [outlet]);
return (