RI-7399: Add "Create Free Cloud DB" button to db list (#5160)

KrumTy · web-flow · commit cbc5242873d4 · 2025-11-07T17:13:09.000+02:00
diff --git a/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx b/redisinsight/ui/src/pages/home/components/database-list-component/DatabasesListWrapper.tsx
@@ -55,8 +55,6 @@ import {
   CONNECTION_TYPE_DISPLAY,
   ConnectionType,
   Instance,
-  OAuthSocialAction,
-  OAuthSocialSource,
 } from 'uiSrc/slices/interfaces'
 import {
   getRedisInfoSummary,
@@ -72,11 +70,8 @@ import {
   replaceSpaces,
 } from 'uiSrc/utils'
 
-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, HELP_LINKS } from 'uiSrc/pages/home/constants'
+import { CREATE_CLOUD_DB_ID } from 'uiSrc/pages/home/constants'
 
 import { Tag } from 'uiSrc/slices/interfaces/tag'
 import { FeatureFlagComponent } from 'uiSrc/components'
@@ -86,6 +81,7 @@ import { Link } from 'uiSrc/components/base/link/Link'
 import { RIResizeObserver } from 'uiSrc/components/base/utils'
 import { Row } from 'uiSrc/components/base/layout/flex'
 
+import handleClickFreeDb from './methods/handleClickFreeCloudDb'
 import DbStatus from '../db-status'
 import { TagsCell } from '../tags-cell/TagsCell'
 import { TagsCellHeader } from '../tags-cell/TagsCellHeader'
@@ -122,10 +118,8 @@ const DatabasesListWrapper = (props: Props) => {
   const { theme } = useContext(ThemeContext)
 
   const { contextInstanceId } = useSelector(appContextSelector)
-  const {
-    [FeatureFlags.cloudSso]: cloudSsoFeature,
-    [FeatureFlags.databaseManagement]: databaseManagementFeature,
-  } = useSelector(appFeatureFlagsFeaturesSelector)
+  const { [FeatureFlags.databaseManagement]: databaseManagementFeature } =
+    useSelector(appFeatureFlagsFeaturesSelector)
   const { shownColumns } = useSelector(instancesSelector)
 
   const [width, setWidth] = useState(0)
@@ -312,35 +306,6 @@ const DatabasesListWrapper = (props: Props) => {
     })
   }
 
-  const handleClickFreeDb = () => {
-    if (cloudSsoFeature?.flag) {
-      dispatch(setSSOFlow(OAuthSocialAction.Create))
-      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')
-
-    link.click()
-    link.remove()
-  }
-
   const getRowProps = (instance: Instance) => ({
     className: cx({
       'euiTableRow-isSelected': instance?.id === editedInstance?.id,
diff --git a/redisinsight/ui/src/pages/home/components/database-list-component/methods/handleClickFreeCloudDb.ts b/redisinsight/ui/src/pages/home/components/database-list-component/methods/handleClickFreeCloudDb.ts
@@ -0,0 +1,48 @@
+import { FeatureFlags } from 'uiSrc/constants'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+
+import { OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+
+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 { HELP_LINKS } from 'uiSrc/pages/home/constants'
+
+import { dispatch, store } from 'uiSrc/slices/store'
+
+// Note: Extracted from DatabasesListWrapper.tsx
+const handleClickFreeCloudDb = () => {
+  const { [FeatureFlags.cloudSso]: cloudSsoFeature } =
+    appFeatureFlagsFeaturesSelector(store.getState())
+
+  if (cloudSsoFeature?.flag) {
+    dispatch(setSSOFlow(OAuthSocialAction.Create))
+    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')
+
+  link.click()
+  link.remove()
+}
+
+export default handleClickFreeCloudDb
diff --git a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.spec.tsx b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.spec.tsx
@@ -4,10 +4,13 @@ import { cloneDeep } from 'lodash'
 
 import { cleanup, fireEvent, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
-import { ConnectionType, Instance } from 'uiSrc/slices/interfaces'
+import { ConnectionType, Instance, OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import { DatabaseListColumn } from 'uiSrc/constants'
 import { instancesSelector, setShownColumns } from 'uiSrc/slices/instances/instances'
+import { setSSOFlow } from 'uiSrc/slices/instances/cloud'
+import { setSocialDialogState } from 'uiSrc/slices/oauth/cloud'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { CREATE_CLOUD_DB_ID } from 'uiSrc/pages/home/constants'
 
 import DatabaseListHeader, { Props } from './DatabaseListHeader'
 
@@ -216,4 +219,38 @@ describe('DatabaseListHeader', () => {
       },
     })
   })
+
+  it('should dispatch SSO actions when clicking Create Free Cloud DB header button', () => {
+    const featureMock = appFeatureFlagsFeaturesSelector as jest.Mock
+
+    // Ensure the header button is visible and SSO path is taken
+    featureMock.mockReturnValue({
+      enhancedCloudUI: { flag: true },
+      cloudAds: { flag: true },
+      cloudSso: { flag: true },
+      databaseManagement: { flag: true },
+    })
+
+    render(<DatabaseListHeader {...instance(mockedProps)} />)
+
+    const btn = screen.getByTestId(`${CREATE_CLOUD_DB_ID}-button`)
+    expect(btn).toBeInTheDocument()
+
+    fireEvent.click(btn)
+
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([
+        setSSOFlow(OAuthSocialAction.Create),
+        setSocialDialogState(OAuthSocialSource.DatabaseConnectionList),
+      ]),
+    )
+
+    // Restore default flags for other tests
+    featureMock.mockReturnValue({
+      enhancedCloudUI: { flag: false },
+      databaseManagement: { flag: true },
+      cloudAds: { flag: true },
+    })
+  })
+
 })
diff --git a/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx b/redisinsight/ui/src/pages/home/components/database-list-header/DatabaseListHeader.tsx
@@ -15,7 +15,7 @@ import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { RiPopover } from 'uiSrc/components/base'
 import { getPathToResource } from 'uiSrc/services/resourcesService'
 import { ContentCreateRedis } from 'uiSrc/slices/interfaces/content'
-import { HELP_LINKS } from 'uiSrc/pages/home/constants'
+import { CREATE_CLOUD_DB_ID, HELP_LINKS } from 'uiSrc/pages/home/constants'
 import { contentSelector } from 'uiSrc/slices/content/create-redis-buttons'
 import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 import { getContentByFeature } from 'uiSrc/utils/content'
@@ -33,6 +33,7 @@ import {
 } from 'uiSrc/components/base/forms/buttons'
 import { ColumnsIcon } from 'uiSrc/components/base/icons'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
+import handleClickFreeCloudDb from '../database-list-component/methods/handleClickFreeCloudDb'
 import SearchDatabasesList from '../search-databases-list'
 
 import styles from './styles.module.scss'
@@ -62,7 +63,7 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => {
     }
 
     if (data?.cloud && !isEmpty(data.cloud)) {
-      setPromoData(getContentByFeature(data.cloud, featureFlags))
+      setPromoData(getContentByFeature(data.cloud as any, featureFlags))
     }
   }, [loading, data, featureFlags])
 
@@ -122,14 +123,28 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => {
     })
   }
 
-  const AddInstanceBtn = () => (
-    <PrimaryButton
-      onClick={handleOnAddDatabase}
-      className={styles.addInstanceBtn}
-      data-testid="add-redis-database-short"
+  const AddCloudInstanceButton = () => (
+    <FeatureFlagComponent
+      name={[FeatureFlags.enhancedCloudUI, FeatureFlags.cloudAds]}
     >
-      <span>+ Add Redis database</span>
-    </PrimaryButton>
+      <PrimaryButton
+        onClick={handleClickFreeCloudDb}
+        data-testid={`${CREATE_CLOUD_DB_ID}-button`}
+      >
+        + Create Free Cloud DB
+      </PrimaryButton>
+    </FeatureFlagComponent>
+  )
+
+  const AddLocalInstanceButton = () => (
+    <FeatureFlagComponent name={FeatureFlags.databaseManagement}>
+      <SecondaryButton
+        onClick={handleOnAddDatabase}
+        data-testid="add-redis-database-short"
+      >
+        + Connect Existing DB
+      </SecondaryButton>
+    </FeatureFlagComponent>
   )
 
   const CreateBtn = ({ content }: { content: ContentCreateRedis }) => {
@@ -191,10 +206,9 @@ const DatabaseListHeader = ({ onAddInstance }: Props) => {
         responsive={false}
         gap="s"
       >
-        <FlexItem>
-          <FeatureFlagComponent name={FeatureFlags.databaseManagement}>
-            <AddInstanceBtn />
-          </FeatureFlagComponent>
+        <FlexItem direction="row" $gap="m">
+          <AddCloudInstanceButton />
+          <AddLocalInstanceButton />
         </FlexItem>
         {!loading && !isEmpty(data) && (
           <FlexItem className={cx(styles.promo)}>
diff --git a/redisinsight/ui/src/utils/test-store.ts b/redisinsight/ui/src/utils/test-store.ts
@@ -22,7 +22,7 @@ const getState: ReduxStore['getState'] = () => {
   return storeRef.getState()
 }
 
-const dispatch: ReduxStore['dispatch'] = (action: any) => {
+export const dispatch: ReduxStore['dispatch'] = (action: any) => {
   if (!storeRef) {
     throw new Error(
       'Store not initialized. Make sure store-dynamic is imported after store creation.',

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const getState: ReduxStore['getState'] = () => {`
`22`	`22`	`return storeRef.getState()`
`23`	`23`	`}`
`24`	`24`
`25`		`-const dispatch: ReduxStore['dispatch'] = (action: any) => {`
	`25`	`+export const dispatch: ReduxStore['dispatch'] = (action: any) => {`
`26`	`26`	`if (!storeRef) {`
`27`	`27`	`throw new Error(`
`28`	`28`	`'Store not initialized. Make sure store-dynamic is imported after store creation.',`