From a4bb25d12696ac2dcea8ddd8640ea401eb58ded0 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Fri, 26 Apr 2024 09:13:29 +0200
Subject: [PATCH] only render when ui when feature is enabled

fixes: #29057

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
---
 js/apps/admin-ui/src/PageNav.tsx              | 20 ++++++++++---------
 .../components/routable-tabs/RoutableTabs.tsx | 13 +++++++-----
 .../admin-ui/src/utils/useIsFeatureEnabled.ts |  1 +
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/js/apps/admin-ui/src/PageNav.tsx b/js/apps/admin-ui/src/PageNav.tsx
index 0baba946c7e0..4c271c5c4539 100644
--- a/js/apps/admin-ui/src/PageNav.tsx
+++ b/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>
diff --git a/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx b/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx
index bd5535be2499..1a2d7f42c13a 100644
--- a/js/apps/admin-ui/src/components/routable-tabs/RoutableTabs.tsx
+++ b/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>
   );
 };
diff --git a/js/apps/admin-ui/src/utils/useIsFeatureEnabled.ts b/js/apps/admin-ui/src/utils/useIsFeatureEnabled.ts
index 3b59a421bd2e..af5419912082 100644
--- a/js/apps/admin-ui/src/utils/useIsFeatureEnabled.ts
+++ b/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() {