only render when ui when feature is enabled (#29101)

fixes: #29057

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

js/apps/admin-ui/src/PageNav.tsx

@@ -19,6 +19,7 @@ import { AddRealmRoute } from "./realm/routes/AddRealm";
 import { routes } from "./routes";
 
 import "./page-nav.css";
+import useIsFeatureEnabled, { Feature } from "./utils/useIsFeatureEnabled";
 
 type LeftNavProps = { title: string; path: string; id?: string };
 
@@ -61,9 +62,9 @@ export const PageNav = () => {
   const { t } = useTranslation();
   const { hasSomeAccess } = useAccess();
   const { componentTypes } = useServerInfo();
+  const isFeatureEnabled = useIsFeatureEnabled();
   const pages =
     componentTypes?.["org.keycloak.services.ui.extend.UiPageProvider"];
-
   const navigate = useNavigate();
 
   type SelectedItem = {
@@ -122,14 +123,15 @@ export const PageNav = () => {
               <LeftNav title="authentication" path="/authentication" />
               <LeftNav title="identityProviders" path="/identity-providers" />
               <LeftNav title="userFederation" path="/user-federation" />
-              {pages?.map((p) => (
-                <LeftNav
-                  key={p.id}
-                  title={p.id}
-                  path={toPage({ providerId: p.id }).pathname!}
-                  id="/page-section"
-                />
-              ))}
+              {isFeatureEnabled(Feature.DeclarativeUI) &&
+                pages?.map((p) => (
+                  <LeftNav
+                    key={p.id}
+                    title={p.id}
+                    path={toPage({ providerId: p.id }).pathname!}
+                    id="/page-section"
+                  />
+                ))}
             </NavGroup>
           )}
         </Nav>

js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx

@@ -23,6 +23,7 @@ import {
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
 import { PageHandler } from "../../page/PageHandler";
 import { TAB_PROVIDER } from "../../page/PageList";
+import useIsFeatureEnabled, { Feature } from "../../utils/useIsFeatureEnabled";
 
 // TODO: Remove the custom 'children' props and type once the following issue has been resolved:
 // https://github.com/patternfly/patternfly-react/issues/6766
@@ -47,6 +48,7 @@ export const RoutableTabs = ({
   const params = useParams();
   const { componentTypes } = useServerInfo();
   const tabs = componentTypes?.[TAB_PROVIDER] || [];
+  const isFeatureEnabled = useIsFeatureEnabled();
 
   const matchedTabs = tabs
     .filter((tab) => matchPath({ path: tab.metadata.path }, pathname))
@@ -92,11 +94,12 @@ export const RoutableTabs = ({
       {...otherProps}
     >
       {children as any}
-      {matchedTabs.map<any>((t) => (
-        <DynamicTab key={t.id} eventKey={t.pathname} title={t.id}>
-          <PageHandler page={t} providerType={TAB_PROVIDER} />
-        </DynamicTab>
-      ))}
+      {isFeatureEnabled(Feature.DeclarativeUI) &&
+        matchedTabs.map<any>((t) => (
+          <DynamicTab key={t.id} eventKey={t.pathname} title={t.id}>
+            <PageHandler page={t} providerType={TAB_PROVIDER} />
+          </DynamicTab>
+        ))}
     </Tabs>
   );
 };

js/apps/admin-ui/src/utils/useIsFeatureEnabled.ts

@@ -9,6 +9,7 @@ export enum Feature {
   DeviceFlow = "DEVICE_FLOW",
   TransientUsers = "TRANSIENT_USERS",
   ClientTypes = "CLIENT_TYPES",
+  DeclarativeUI = "DECLARATIVE_UI",
 }
 
 export default function useIsFeatureEnabled() {