Merge pull request #3596 from RedisInsight/revert-3595-CR-109-breadcrumbs

Revert "CR-109-breadcrumbs"

Author: nelsonwellsredis

redisinsight/api/config/features-config.json

@@ -90,7 +90,23 @@
         "strategy": "ioredis"
       }
     },
-    "isDesktop": {
+    "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,7 +25,11 @@ export enum KnownFeatures {
   CloudSsoRecommendedSettings = 'cloudSsoRecommendedSettings',
   RedisModuleFilter = 'redisModuleFilter',
   RedisClient = 'redisClient',
-  isDesktop = 'isDesktop',
+  appSettings = 'appSettings',
+  profiler = 'profiler',
+  dbAnalysis = 'dbAnalysis',
+  appNotifications = 'appNotifications',
+  triggersAndFunctions = 'triggersAndFunctions',
   DocumentationChat = 'documentationChat',
   DatabaseChat = 'databaseChat',
 }

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

@@ -23,8 +23,24 @@ export const knownFeatures: Record<KnownFeatures, IFeatureFlag> = {
     name: KnownFeatures.RedisClient,
     storage: FeatureStorage.Database,
   },
-  [KnownFeatures.isDesktop]: {
-    name: KnownFeatures.isDesktop,
+  [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]: {

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

@@ -52,7 +52,23 @@ export class FeatureFlagProvider {
       this.featuresConfigService,
       this.settingsService,
     ));
-    this.strategies.set(KnownFeatures.isDesktop, new CommonFlagStrategy(
+    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,
     ));

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.isDesktop}>
+        <FeatureFlagComponent name={FeatureFlags.profiler}>
           <EuiFlexItem
             className={styles.componentBadgeItem}
             grow={false}

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

@@ -11,7 +11,6 @@ import {
 import { appContextDbIndex } from 'uiSrc/slices/app/context'
 
 import InstanceHeader, { Props } from './InstanceHeader'
-import { isRediStack } from 'uiSrc/utils'
 
 const mockedProps = mock<Props>()
 
@@ -49,15 +48,6 @@ jest.mock('uiSrc/slices/app/context', () => ({
   })
 }))
 
-jest.mock('uiSrc/slices/app/features', () => ({
-  ...jest.requireActual('uiSrc/slices/app/features'),
-  appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
-    isDesktop: {
-      flag: true,
-    },
-  }),
-}))
-
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useHistory: () => ({

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

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

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

@@ -26,7 +26,7 @@ jest.mock('uiSrc/slices/app/info', () => ({
 jest.mock('uiSrc/slices/app/features', () => ({
   ...jest.requireActual('uiSrc/slices/app/features'),
   appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
-    isDesktop: {
+    appSettings: {
       flag: true,
     },
   }),

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

@@ -17,8 +17,13 @@ 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'
@@ -33,14 +38,14 @@ 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'
 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'
 
@@ -71,6 +76,7 @@ const NavigationMenu = () => {
   const [activePage, setActivePage] = useState(Pages.home)
 
   const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
+  const { server } = useSelector(appInfoSelector)
   const highlightedPages = useSelector(appFeaturePagesHighlightingSelector)
 
   useEffect(() => {
@@ -140,7 +146,7 @@ const NavigationMenu = () => {
       dataTestId: 'analytics-page-btn',
       connectedInstanceId,
       isActivePage: isAnalyticsPath(activePage),
-      featureFlag: FeatureFlags.isDesktop,
+      featureFlag: FeatureFlags.dbAnalysis,
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
@@ -173,7 +179,7 @@ const NavigationMenu = () => {
       connectedInstanceId,
       isActivePage: isTriggeredFunctionsPath(activePage),
       isBeta: true,
-      featureFlag: FeatureFlags.isDesktop,
+      featureFlag: FeatureFlags.triggersAndFunctions,
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
@@ -192,7 +198,7 @@ const NavigationMenu = () => {
       onClick: () => handleGoPage(Pages.settings),
       dataTestId: 'settings-page-btn',
       isActivePage: activePage === Pages.settings,
-      featureFlag: FeatureFlags.isDesktop,
+      featureFlag: FeatureFlags.appSettings,
       getClassName() {
         return cx(styles.navigationButton, { [styles.active]: this.isActivePage })
       },
@@ -254,7 +260,16 @@ const NavigationMenu = () => {
   return (
     <EuiPageSideBar aria-label="Main navigation" className={cx(styles.navigation, 'eui-yScroll')}>
       <div className={styles.container}>
-        <RedisLogo />
+        <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>
 
         {connectedInstanceId && (
           privateRoutes.map((nav) => (
@@ -267,7 +282,7 @@ const NavigationMenu = () => {
         )}
       </div>
       <div className={styles.bottomContainer}>
-        <FeatureFlagComponent name={FeatureFlags.isDesktop}>
+        <FeatureFlagComponent name={FeatureFlags.appNotifications}>
           <NotificationMenu />
         </FeatureFlagComponent>
         <HelpMenu />