chore: removing the test usages in the app, and fixing the typings

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

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

packages/app/src/App.tsx

@@ -114,9 +114,7 @@ const routes = (
       path="/tech-radar"
       element={<TechRadarPage width={1500} height={800} />}
     />
-    <FeatureFlagged with="show-graphiql-page">
-      <Route path="/graphiql" element={<GraphiQLPage />} />
-    </FeatureFlagged>
+    <Route path="/graphiql" element={<GraphiQLPage />} />
     <Route path="/lighthouse" element={<LighthousePage />} />
 
     <Route path="/api-docs" element={<ApiExplorerPage />} />

packages/app/src/components/catalog/EntityPage.tsx

@@ -306,11 +306,9 @@ const serviceEntityPage = (
 
     <EntityLayout.Route path="/dependencies" title="Dependencies">
       <Grid container spacing={3} alignItems="stretch">
-        <FeatureFlagged with="show-graphiql-page">
-          <Grid item md={6}>
-            <EntityDependsOnComponentsCard variant="gridItem" />
-          </Grid>
-        </FeatureFlagged>
+        <Grid item md={6}>
+          <EntityDependsOnComponentsCard variant="gridItem" />
+        </Grid>
         <Grid item md={6}>
           <EntityDependsOnResourcesCard variant="gridItem" />
         </Grid>

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

@@ -19,11 +19,13 @@ import {
   useApi,
   attachComponentData,
 } from '@backstage/core-plugin-api';
+import React, { ReactNode } from 'react';
 
-export type FeatureFlaggedProps = { children: JSX.Element | null } & (
+export type FeatureFlaggedProps = { children: ReactNode } & (
   | { with: string }
   | { without: string }
 );
+
 export const FeatureFlagged = (props: FeatureFlaggedProps) => {
   const { children } = props;
   const featureFlagApi = useApi(featureFlagsApiRef);
@@ -31,7 +33,7 @@ export const FeatureFlagged = (props: FeatureFlaggedProps) => {
     'with' in props
       ? featureFlagApi.isActive(props.with)
       : !featureFlagApi.isActive(props.without);
-  return isEnabled ? children : null;
+  return <>{isEnabled ? children : null}</>;
 };
 
 attachComponentData(FeatureFlagged, 'core.featureFlagged', true);