Merge pull request #3608 from RedisInsight/CR-109-breadcrumbs-4

CR-109: Use env variable in feature flag component to selectively dis…

Author: nelsonwellsredis

redisinsight/api/config/features-config.json

@@ -89,26 +89,6 @@
       "data": {
         "strategy": "ioredis"
       }
-    },
-    "appSettings": {
-      "flag": true,
-      "perc": [[0,100]]
-    },
-    "profiler": {
-      "flag": true,
-      "perc": [[0,100]]
-    },
-    "dbAnalysis": {
-      "flag": true,
-      "perc": [[0,100]]
-    },
-    "appNotifications": {
-      "flag": true,
-      "perc": [[0,100]]
-    },
-    "triggersAndFunctions": {
-      "flag": true,
-      "perc": [[0,100]]
     }
   }
 }

redisinsight/api/src/modules/feature/constants/index.ts

@@ -25,11 +25,6 @@ export enum KnownFeatures {
   CloudSsoRecommendedSettings = 'cloudSsoRecommendedSettings',
   RedisModuleFilter = 'redisModuleFilter',
   RedisClient = 'redisClient',
-  appSettings = 'appSettings',
-  profiler = 'profiler',
-  dbAnalysis = 'dbAnalysis',
-  appNotifications = 'appNotifications',
-  triggersAndFunctions = 'triggersAndFunctions',
   DocumentationChat = 'documentationChat',
   DatabaseChat = 'databaseChat',
 }

redisinsight/api/src/modules/feature/constants/known-features.ts

@@ -23,26 +23,6 @@ export const knownFeatures: Record<KnownFeatures, IFeatureFlag> = {
     name: KnownFeatures.RedisClient,
     storage: FeatureStorage.Database,
   },
-  [KnownFeatures.appSettings]: {
-    name: KnownFeatures.appSettings,
-    storage: FeatureStorage.Database,
-  },
-  [KnownFeatures.profiler]: {
-    name: KnownFeatures.profiler,
-    storage: FeatureStorage.Database,
-  },
-  [KnownFeatures.dbAnalysis]: {
-    name: KnownFeatures.dbAnalysis,
-    storage: FeatureStorage.Database,
-  },
-  [KnownFeatures.appNotifications]: {
-    name: KnownFeatures.appNotifications,
-    storage: FeatureStorage.Database,
-  },
-  [KnownFeatures.triggersAndFunctions]: {
-    name: KnownFeatures.triggersAndFunctions,
-    storage: FeatureStorage.Database,
-  },
   [KnownFeatures.DocumentationChat]: {
     name: KnownFeatures.DocumentationChat,
     storage: FeatureStorage.Database,

redisinsight/api/src/modules/feature/providers/feature-flag/feature-flag.provider.ts

@@ -52,26 +52,6 @@ export class FeatureFlagProvider {
       this.featuresConfigService,
       this.settingsService,
     ));
-    this.strategies.set(KnownFeatures.appSettings, new CommonFlagStrategy(
-      this.featuresConfigService,
-      this.settingsService,
-    ));
-    this.strategies.set(KnownFeatures.profiler, new CommonFlagStrategy(
-      this.featuresConfigService,
-      this.settingsService,
-    ));
-    this.strategies.set(KnownFeatures.dbAnalysis, new CommonFlagStrategy(
-      this.featuresConfigService,
-      this.settingsService,
-    ));
-    this.strategies.set(KnownFeatures.appNotifications, new CommonFlagStrategy(
-      this.featuresConfigService,
-      this.settingsService,
-    ));
-    this.strategies.set(KnownFeatures.triggersAndFunctions, new CommonFlagStrategy(
-      this.featuresConfigService,
-      this.settingsService,
-    ));
   }
 
   getStrategy(name: string): FeatureFlagStrategy {

redisinsight/ui/src/components/bottom-group-components/components/bottom-group-minimized/BottomGroupMinimized.tsx

@@ -111,7 +111,7 @@ const BottomGroupMinimized = () => {
             <span>Command Helper</span>
           </EuiBadge>
         </EuiFlexItem>
-        <FeatureFlagComponent name={FeatureFlags.profiler}>
+        <FeatureFlagComponent name={FeatureFlags.disabledByEnv} enabledByDefault>
           <EuiFlexItem
             className={styles.componentBadgeItem}
             grow={false}

redisinsight/ui/src/components/feature-flag-component/FeatureFlagComponent.tsx

@@ -8,12 +8,14 @@ export interface Props {
   name: FeatureFlags
   children: JSX.Element | JSX.Element[]
   otherwise?: React.ReactElement
+  enabledByDefault?: boolean
 }
 
 const FeatureFlagComponent = (props: Props) => {
-  const { children, name, otherwise } = props
+  const { children, name, otherwise, enabledByDefault } = props
   const { [name]: feature } = useSelector(appFeatureFlagsFeaturesSelector)
-  const { flag, variant } = feature ?? { flag: false }
+  const { flag, variant } = feature ?? { flag: enabledByDefault }
+
   if (!flag) {
     return otherwise ?? null
   }

redisinsight/ui/src/components/instance-header/InstanceHeader.tsx

@@ -101,27 +101,31 @@ const InstanceHeader = ({ onChangeDbIndex }: Props) => {
         <EuiFlexItem style={{ overflow: 'hidden' }}>
           <div className={styles.breadcrumbsContainer} data-testid="breadcrumbs-container">
             <div>
-              <EuiToolTip
-                position="bottom"
-                content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
-              >
-                <EuiText
-                  className={styles.breadCrumbLink}
-                  aria-label={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
-                  data-testid="my-redis-db-btn"
-                  onClick={goHome}
-                  onKeyDown={goHome}
+              <FeatureFlagComponent name={FeatureFlags.disabledByEnv} enabledByDefault>
+                <EuiToolTip
+                  position="bottom"
+                  content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
                 >
-                  Databases
-                </EuiText>
-              </EuiToolTip>
+                  <EuiText
+                    className={styles.breadCrumbLink}
+                    aria-label={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
+                    data-testid="my-redis-db-btn"
+                    onClick={goHome}
+                    onKeyDown={goHome}
+                  >
+                    Databases
+                  </EuiText>
+                </EuiToolTip>
+              </FeatureFlagComponent>
             </div>
             <div style={{ flex: 1, overflow: 'hidden' }}>
               <div style={{ maxWidth: '100%' }}>
                 <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
-                  <EuiFlexItem grow={false}>
-                    <EuiText className={styles.divider}>&#62;</EuiText>
-                  </EuiFlexItem>
+                  <FeatureFlagComponent name={FeatureFlags.disabledByEnv} enabledByDefault>
+                    <EuiFlexItem grow={false}>
+                      <EuiText className={styles.divider}>&#62;</EuiText>
+                    </EuiFlexItem>
+                  </FeatureFlagComponent>
                   <EuiFlexItem style={{ overflow: 'hidden' }}>
                     <b className={styles.dbName}>{name}</b>
                   </EuiFlexItem>

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -17,13 +17,8 @@ import { ANALYTICS_ROUTES, TRIGGERED_FUNCTIONS_ROUTES } from 'uiSrc/components/m
 
 import { FeatureFlags, PageNames, Pages } from 'uiSrc/constants'
 import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
-import { getRouterLinkProps } from 'uiSrc/services'
 import { appFeaturePagesHighlightingSelector, removeFeatureFromHighlighting } from 'uiSrc/slices/app/features'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import {
-  appInfoSelector,
-} from 'uiSrc/slices/app/info'
-import LogoSVG from 'uiSrc/assets/img/logo_small.svg?react'
 import SettingsSVG from 'uiSrc/assets/img/sidebar/settings.svg'
 import SettingsActiveSVG from 'uiSrc/assets/img/sidebar/settings_active.svg'
 import BrowserSVG from 'uiSrc/assets/img/sidebar/browser.svg'
@@ -38,7 +33,6 @@ import TriggeredFunctionsSVG from 'uiSrc/assets/img/sidebar/gears.svg'
 import TriggeredFunctionsActiveSVG from 'uiSrc/assets/img/sidebar/gears_active.svg'
 import GithubSVG from 'uiSrc/assets/img/sidebar/github.svg'
 import Divider from 'uiSrc/components/divider/Divider'
-import { BuildType } from 'uiSrc/constants/env'
 import { renderOnboardingTourWithChild } from 'uiSrc/utils/onboarding'
 import { ONBOARDING_FEATURES } from 'uiSrc/components/onboarding-features'
 import { BUILD_FEATURES } from 'uiSrc/constants/featuresHighlighting'
@@ -47,6 +41,7 @@ import { FeatureFlagComponent } from 'uiSrc/components'
 import HelpMenu from './components/help-menu/HelpMenu'
 import NotificationMenu from './components/notifications-center'
 
+import { RedisLogo } from './components/redis-logo/RedisLogo'
 import styles from './styles.module.scss'
 
 const workbenchPath = `/${PageNames.workbench}`
@@ -66,6 +61,7 @@ interface INavigations {
   getIconType: () => string
   onboard?: any
   featureFlag?: FeatureFlags
+  enabledByDefault?: boolean
 }
 
 const NavigationMenu = () => {
@@ -76,7 +72,6 @@ const NavigationMenu = () => {
   const [activePage, setActivePage] = useState(Pages.home)
 
   const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
-  const { server } = useSelector(appInfoSelector)
   const highlightedPages = useSelector(appFeaturePagesHighlightingSelector)
 
   useEffect(() => {
@@ -146,7 +141,8 @@ const NavigationMenu = () => {
       dataTestId: 'analytics-page-btn',
       connectedInstanceId,
       isActivePage: isAnalyticsPath(activePage),
-      featureFlag: FeatureFlags.dbAnalysis,
+      featureFlag: FeatureFlags.disabledByEnv,
+      enabledByDefault: true,
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
@@ -179,7 +175,8 @@ const NavigationMenu = () => {
       connectedInstanceId,
       isActivePage: isTriggeredFunctionsPath(activePage),
       isBeta: true,
-      featureFlag: FeatureFlags.triggersAndFunctions,
+      featureFlag: FeatureFlags.disabledByEnv,
+      enabledByDefault: true,
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
@@ -198,7 +195,8 @@ const NavigationMenu = () => {
       onClick: () => handleGoPage(Pages.settings),
       dataTestId: 'settings-page-btn',
       isActivePage: activePage === Pages.settings,
-      featureFlag: FeatureFlags.appSettings,
+      featureFlag: FeatureFlags.disabledByEnv,
+      enabledByDefault: true,
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
@@ -260,35 +258,30 @@ const NavigationMenu = () => {
   return (
     <EuiPageSideBar aria-label="Main navigation" className={cx(styles.navigation, 'eui-yScroll')}>
       <div className={styles.container}>
-        <EuiToolTip
-          content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
-          position="right"
-        >
-          <span className={cx(styles.iconNavItem, styles.homeIcon)}>
-            <EuiLink {...getRouterLinkProps(Pages.home)} className={styles.logo} data-test-subj="home-page-btn">
-              <EuiIcon aria-label="redisinsight home page" type={LogoSVG} />
-            </EuiLink>
-          </span>
-        </EuiToolTip>
+        <RedisLogo />
 
         {connectedInstanceId && (
           privateRoutes.map((nav) => (
             nav.featureFlag ? (
-              <FeatureFlagComponent name={nav.featureFlag} key={nav.tooltipText}>
+              <FeatureFlagComponent
+                name={nav.featureFlag}
+                key={nav.tooltipText}
+                enabledByDefault={nav.enabledByDefault}
+              >
                 {renderPrivateRouteButton(nav)}
               </FeatureFlagComponent>
             ) : renderPrivateRouteButton(nav)
           ))
         )}
       </div>
       <div className={styles.bottomContainer}>
-        <FeatureFlagComponent name={FeatureFlags.appNotifications}>
+        <FeatureFlagComponent name={FeatureFlags.disabledByEnv} enabledByDefault>
           <NotificationMenu />
         </FeatureFlagComponent>
         <HelpMenu />
         {publicRoutes.map((nav) => (
           nav.featureFlag ? (
-            <FeatureFlagComponent name={nav.featureFlag} key={nav.tooltipText}>
+            <FeatureFlagComponent name={nav.featureFlag} key={nav.tooltipText} enabledByDefault={nav.enabledByDefault}>
               {renderPublicRouteButton(nav)}
             </FeatureFlagComponent>
           ) : renderPublicRouteButton(nav)

redisinsight/ui/src/components/navigation-menu/components/redis-logo/RedisLogo.tsx

@@ -0,0 +1,37 @@
+import { EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui'
+import cx from 'classnames'
+import React from 'react'
+import { useSelector } from 'react-redux'
+import { Pages } from 'uiSrc/constants'
+import { BuildType } from 'uiSrc/constants/env'
+import { getRouterLinkProps } from 'uiSrc/services'
+import { appInfoSelector } from 'uiSrc/slices/app/info'
+import LogoSVG from 'uiSrc/assets/img/logo_small.svg?react'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import styles from '../../styles.module.scss'
+
+export const RedisLogo = () => {
+  const { disabledByEnv } = useSelector(appFeatureFlagsFeaturesSelector)
+  const { server } = useSelector(appInfoSelector)
+
+  if (disabledByEnv) {
+    return (
+      <span className={cx(styles.iconNavItem, styles.homeIcon)}>
+        <EuiIcon aria-label="redisinsight home page" type={LogoSVG} />
+      </span>
+    )
+  }
+
+  return (
+    <EuiToolTip
+      content={server?.buildType === BuildType.RedisStack ? 'Edit database' : 'My Redis databases'}
+      position="right"
+    >
+      <span className={cx(styles.iconNavItem, styles.homeIcon)}>
+        <EuiLink {...getRouterLinkProps(Pages.home)} className={styles.logo} data-test-subj="home-page-btn">
+          <EuiIcon aria-label="redisinsight home page" type={LogoSVG} />
+        </EuiLink>
+      </span>
+    </EuiToolTip>
+  )
+}

redisinsight/ui/src/constants/featureFlags.ts

@@ -4,9 +4,5 @@ export enum FeatureFlags {
   cloudSsoRecommendedSettings = 'cloudSsoRecommendedSettings',
   databaseChat = 'databaseChat',
   documentationChat = 'documentationChat',
-  appSettings = 'appSettings',
-  profiler = 'profiler',
-  dbAnalysis = 'dbAnalysis',
-  appNotifications = 'appNotifications',
-  triggersAndFunctions = 'triggersAndFunctions',
+  disabledByEnv = 'disabledByEnv',
 }