diff --git a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx index ee7e942ce1..2e6a672f03 100644 --- a/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx +++ b/redisinsight/ui/src/components/navigation-menu/app-navigation/AppNavigation.tsx @@ -7,6 +7,8 @@ import { StyledAppNavTab, } from './AppNavigation.styles' import { useNavigation } from '../hooks/useNavigation' +import FeatureFlagComponent from 'uiSrc/components/feature-flag-component/FeatureFlagComponent' +import { FeatureFlags } from 'uiSrc/constants' type AppNavigationContainerProps = { children?: ReactNode @@ -45,16 +47,23 @@ export type AppNavigationProps = { const AppNavigation = ({ actions, onChange }: AppNavigationProps) => { const { privateRoutes } = useNavigation() const activeTab = privateRoutes.find((route) => route.isActivePage) - const navTabs: TabInfo[] = privateRoutes.map((route) => ({ - label: route.tooltipText, - content: '', - value: route.pageName, - })) + const navTabs: (TabInfo & { featureFlag?: FeatureFlags })[] = + privateRoutes.map((route) => ({ + label: route.tooltipText, + content: '', + value: route.pageName, + featureFlag: route.featureFlag, + })) return ( - + { @@ -68,8 +77,22 @@ const AppNavigation = ({ actions, onChange }: AppNavigationProps) => { }} > - {navTabs.map(({ value, label, disabled }, index) => { + {navTabs.map(({ value, label, disabled, featureFlag }, index) => { const key = `${value}-${index}` + if (featureFlag) { + return ( + + + {label ?? value} + + + + ) + } return (