Merge pull request #4086 from RedisInsight/be/feature/RI-6320-add-feature-flag

#RI-6320 - add feature flag for cloud db in the list of dbs

Author: rsergeenko

redisinsight/api/config/features-config.json

@@ -1,5 +1,5 @@
 {
-  "version": 2.56,
+  "version": 2.57,
   "features": {
     "redisDataIntegration": {
       "flag": true,
@@ -111,6 +111,10 @@
       "data": {
         "strategy": "ioredis"
       }
+    },
+    "enhancedCloudUI": {
+      "flag": true,
+      "perc": [[0, 50]]
     }
   }
 }

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

@@ -29,6 +29,7 @@ export enum KnownFeatures {
   DatabaseChat = 'databaseChat',
   Rdi = 'redisDataIntegration',
   HashFieldExpiration = 'hashFieldExpiration',
+  EnhancedCloudUI = 'enhancedCloudUI',
 }
 
 export interface IFeatureFlag {

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

@@ -39,4 +39,8 @@ export const knownFeatures: Record<KnownFeatures, IFeatureFlag> = {
     name: KnownFeatures.Rdi,
     storage: FeatureStorage.Database,
   },
+  [KnownFeatures.EnhancedCloudUI]: {
+    name: KnownFeatures.EnhancedCloudUI,
+    storage: FeatureStorage.Database,
+  },
 };

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

@@ -60,6 +60,10 @@ export class FeatureFlagProvider {
       this.featuresConfigService,
       this.settingsService,
     ));
+    this.strategies.set(KnownFeatures.EnhancedCloudUI, new WithDataFlagStrategy(
+      this.featuresConfigService,
+      this.settingsService,
+    ));
   }
 
   getStrategy(name: string): FeatureFlagStrategy {

redisinsight/ui/src/constants/featureFlags.ts

@@ -7,4 +7,5 @@ export enum FeatureFlags {
   disabledByEnv = 'disabledByEnv',
   rdi = 'redisDataIntegration',
   hashFieldExpiration = 'hashFieldExpiration',
+  enhancedCloudUI = 'enhancedCloudUI',
 }

redisinsight/ui/src/pages/home/HomePage.spec.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render, screen } from 'uiSrc/utils/test-utils'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import HomePage from './HomePage'
 
 jest.mock('uiSrc/slices/panels/sidePanels', () => ({
@@ -9,6 +10,24 @@ jest.mock('uiSrc/slices/panels/sidePanels', () => ({
   }),
 }))
 
+jest.mock('uiSrc/slices/content/create-redis-buttons', () => ({
+  ...jest.requireActual('uiSrc/slices/content/create-redis-buttons'),
+  contentSelector: jest.fn().mockReturnValue({
+    data: {
+      cloud_list_of_databases: {}
+    }
+  }),
+}))
+
+jest.mock('uiSrc/slices/app/features', () => ({
+  ...jest.requireActual('uiSrc/slices/app/features'),
+  appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
+    enhancedCloudUI: {
+      flag: false
+    }
+  }),
+}))
+
 /**
  * HomePage tests
  *
@@ -30,4 +49,26 @@ describe('HomePage', () => {
 
     expect(screen.getByTestId('side-panels-insights')).toBeInTheDocument()
   })
+
+  it('should not render free cloud db with feature flag disabled', async () => {
+    (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({
+      enhancedCloudUI: {
+        flag: false
+      }
+    })
+    await render(<HomePage />)
+
+    expect(screen.queryByTestId('db-row_create-free-cloud-db')).not.toBeInTheDocument()
+  })
+
+  it('should render free cloud db with feature flag enabled', async () => {
+    (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({
+      enhancedCloudUI: {
+        flag: true
+      }
+    })
+    await render(<HomePage />)
+
+    expect(screen.getByTestId('db-row_create-free-cloud-db')).toBeInTheDocument()
+  })
 })

redisinsight/ui/src/pages/home/HomePage.tsx

@@ -8,7 +8,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { clusterSelector, resetDataRedisCluster, resetInstancesRedisCluster, } from 'uiSrc/slices/instances/cluster'
 import { Nullable, setTitle } from 'uiSrc/utils'
 import { HomePageTemplate } from 'uiSrc/templates'
-import { BrowserStorageItem } from 'uiSrc/constants'
+import { BrowserStorageItem, FeatureFlags } from 'uiSrc/constants'
 import { resetKeys } from 'uiSrc/slices/browser/keys'
 import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
 import { resetRedisearchKeysData } from 'uiSrc/slices/browser/redisearch'
@@ -41,6 +41,7 @@ import DatabasePanelDialog from './components/database-panel-dialog'
 
 import './styles.scss'
 import styles from './styles.module.scss'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 
 enum OpenDialogName {
   AddDatabase = 'add',
@@ -58,6 +59,7 @@ const HomePage = () => {
   const { instance: sentinelInstance } = useSelector(sentinelSelector)
   const { action, dbConnection } = useSelector(appRedirectionSelector)
   const { data: createDbContent } = useSelector(contentSelector)
+  const { [FeatureFlags.enhancedCloudUI]: enhancedCloudUIFeature } = useSelector(appFeatureFlagsFeaturesSelector)
 
   const {
     loading,
@@ -73,7 +75,7 @@ const HomePage = () => {
 
   const { contextInstanceId } = useSelector(appContextSelector)
 
-  const predefinedInstances = createDbContent?.cloud_list_of_databases ? [
+  const predefinedInstances = enhancedCloudUIFeature?.flag && createDbContent?.cloud_list_of_databases ? [
     { id: CREATE_CLOUD_DB_ID, ...createDbContent.cloud_list_of_databases } as Instance
   ] : []
   const isInstanceExists = instances.length > 0 || predefinedInstances.length > 0

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.test.tsx

@@ -120,7 +120,7 @@ describe('DatabasesListWrapper', () => {
 
     expect(store.getActions()).toEqual([
       setSSOFlow(OAuthSocialAction.Create),
-      setSocialDialogState(OAuthSocialSource.ListOfDatabases)
+      setSocialDialogState(OAuthSocialSource.DatabaseConnectionList)
     ])
   })
 

redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx

@@ -2,7 +2,8 @@ import {
   Criteria,
   EuiButtonIcon,
   EuiIcon,
-  EuiLink, EuiResizeObserver,
+  EuiLink,
+  EuiResizeObserver,
   EuiTableFieldDataColumnType,
   EuiText,
   EuiTextColor,
@@ -53,7 +54,7 @@ import { setSSOFlow } from 'uiSrc/slices/instances/cloud'
 import { setSocialDialogState } from 'uiSrc/slices/oauth/cloud'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { getUtmExternalLink } from 'uiSrc/utils/links'
-import { CREATE_CLOUD_DB_ID } from 'uiSrc/pages/home/constants'
+import { CREATE_CLOUD_DB_ID, HELP_LINKS } from 'uiSrc/pages/home/constants'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -243,10 +244,19 @@ const DatabasesListWrapper = (props: Props) => {
   const handleClickFreeDb = () => {
     if (cloudSsoFeature?.flag) {
       dispatch(setSSOFlow(OAuthSocialAction.Create))
-      dispatch(setSocialDialogState(OAuthSocialSource.ListOfDatabases))
+      dispatch(setSocialDialogState(OAuthSocialSource.DatabaseConnectionList))
+      sendEventTelemetry({
+        event: TelemetryEvent.CLOUD_FREE_DATABASE_CLICKED,
+        eventData: { source: OAuthSocialSource.DatabaseConnectionList },
+      })
       return
     }
 
+    sendEventTelemetry({
+      event: HELP_LINKS.cloud.event,
+      eventData: { source: HELP_LINKS.cloud.sources.databaseConnectionList },
+    })
+
     const link = document.createElement('a')
     link.setAttribute('href', getUtmExternalLink(EXTERNAL_LINKS.tryFree, { campaign: 'list_of_databases' }))
     link.setAttribute('target', '_blank')

redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.spec.tsx

@@ -1,10 +1,38 @@
 import React from 'react'
 import { instance, mock } from 'ts-mockito'
-import { render } from 'uiSrc/utils/test-utils'
+import { render, screen } from 'uiSrc/utils/test-utils'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import DatabaseListHeader, { Props } from './DatabaseListHeader'
 
 const mockedProps = mock<Props>()
 
+jest.mock('uiSrc/slices/app/features', () => ({
+  ...jest.requireActual('uiSrc/slices/app/features'),
+  appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
+    enhancedCloudUI: {
+      flag: false
+    }
+  }),
+}))
+
+jest.mock('uiSrc/slices/content/create-redis-buttons', () => ({
+  ...jest.requireActual('uiSrc/slices/content/create-redis-buttons'),
+  contentSelector: jest.fn().mockReturnValue({
+    data: {
+      cloud: {
+        title: 'Try Redis Cloud: your ultimate Redis starting point',
+        description: 'Includes native support for JSON, Search and Query, and more',
+        links: {
+          main: {
+            altText: 'Try Redis Cloud.',
+            url: 'https://redis.io/try-free/?utm_source=redisinsight&utm_medium=main&utm_campaign=main'
+          }
+        },
+      }
+    }
+  }),
+}))
+
 jest.mock('uiSrc/telemetry', () => ({
   ...jest.requireActual('uiSrc/telemetry'),
   sendEventTelemetry: jest.fn(),
@@ -14,4 +42,28 @@ describe('DatabaseListHeader', () => {
   it('should render', () => {
     expect(render(<DatabaseListHeader {...instance(mockedProps)} />)).toBeTruthy()
   })
+
+  it('should not show promo cloud button with disabled feature flag', () => {
+    (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({
+      enhancedCloudUI: {
+        flag: true
+      }
+    })
+
+    render(<DatabaseListHeader {...instance(mockedProps)} />)
+
+    expect(screen.queryByTestId('promo-btn')).not.toBeInTheDocument()
+  })
+
+  it('should show promo cloud button with enabled feature flag', () => {
+    (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({
+      enhancedCloudUI: {
+        flag: false
+      }
+    })
+
+    render(<DatabaseListHeader {...instance(mockedProps)} />)
+
+    expect(screen.getByTestId('promo-btn')).toBeInTheDocument()
+  })
 })