- setIsProfileOpen(false)}
- panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
- button={(
-
-
- )
+ return null
}
export default UserProfile
diff --git a/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx
new file mode 100644
index 0000000000..591847dc30
--- /dev/null
+++ b/redisinsight/ui/src/components/instance-header/components/user-profile/UserProfileBadge.spec.tsx
@@ -0,0 +1,230 @@
+import React from 'react'
+import { CloudUser } from 'src/modules/cloud/user/models'
+import {
+ act,
+ fireEvent,
+ render,
+ screen,
+ waitForEuiPopoverVisible,
+ within,
+} from 'uiSrc/utils/test-utils'
+import * as appFeaturesSlice from 'uiSrc/slices/app/features'
+import UserProfileBadge, { UserProfileBadgeProps } from './UserProfileBadge'
+
+const mockUser: CloudUser = {
+ id: 123,
+ name: 'John Smith',
+ currentAccountId: 45,
+ accounts: [
+ {
+ id: 45,
+ name: 'Account 1',
+ },
+ {
+ id: 46,
+ name: 'Account 2',
+ },
+ ],
+ data: {},
+}
+
+const TEST_IDS = {
+ badge: 'test-user-profile-badge',
+ profileTitle: 'profile-title',
+ accountsList: 'user-profile-popover-accounts',
+ selectedAccountCheckmark: (accountId: number) =>
+ `user-profile-selected-account-${accountId}`,
+ selectingAccountSpinner: (accountId: number) =>
+ `user-profile-selecting-account-${accountId}`,
+ cloudAdminConsoleLink: 'cloud-admin-console-link',
+ importCloudDatabases: 'profile-import-cloud-databases',
+ logoutButton: 'profile-logout',
+ accountFullName: 'account-full-name',
+ cloudConsoleLink: 'cloud-console-link',
+}
+
+jest.mock('uiSrc/config', () => ({
+ getConfig: jest.fn(() => {
+ const { getConfig: actualGetConfig } = jest.requireActual('uiSrc/config')
+ const actualConfig = actualGetConfig()
+ return {
+ ...actualConfig,
+ app: {
+ ...actualConfig.app,
+ smConsoleRedirect: 'https://foo.bar',
+ },
+ }
+ }),
+}))
+
+const mockFeatureFlags = (envDependent = true) => {
+ jest
+ .spyOn(appFeaturesSlice, 'appFeatureFlagsFeaturesSelector')
+ .mockReturnValue({
+ envDependent: {
+ flag: envDependent,
+ },
+ })
+}
+
+describe('UserProfileBadge', () => {
+ let handleClickSelectAccount: jest.Mock
+ let handleClickCloudAccount: jest.Mock
+ const selectingAccountId = undefined
+ let renderUserProfileBadge: (
+ props?: Partial
- {getTruncatedName(name) || 'R'}
-
- )}
- >
-
-
- Back to Redis Cloud Admin console
-
-
-
-
-
- Account}
- >
- Redis Cloud account
-
-
-
- {accounts?.map(({ name, id }) => (
-
- 1,
- [styles.isDisabled]: selectingAccountId,
- }
- )}
- onClick={() => handleClickSelectAccount?.(id)}
- data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`}
- >
-
- {name} #{id}
-
- {id === currentAccountId && (
- ))}
-
- Import Cloud databases
- {isImportLoading ? (
-
-
- Cloud Console
-
- {name}
-
-
-
- Logout
-
-
+ setIsProfileOpen(false)}
+ panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
+ button={(
+
+
+ )
+}
+
+export default UserProfileBadge
diff --git a/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx b/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx
index d004cc0b84..9419788be2 100644
--- a/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx
+++ b/redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx
@@ -5,10 +5,11 @@ import { useSelector } from 'react-redux'
import RedisDbBlueIcon from 'uiSrc/assets/img/icons/redis_db_blue.svg'
import { CloudSsoUtmCampaign, OAuthSocialAction, OAuthSocialSource } from 'uiSrc/slices/interfaces'
-import { OAuthConnectFreeDb, OAuthSsoHandlerDialog } from 'uiSrc/components'
+import { FeatureFlagComponent, OAuthConnectFreeDb, OAuthSsoHandlerDialog } from 'uiSrc/components'
import { freeInstancesSelector } from 'uiSrc/slices/instances/instances'
import { getUtmExternalLink } from 'uiSrc/utils/links'
import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
+import { FeatureFlags } from 'uiSrc/constants'
import styles from './styles.module.scss'
@@ -44,7 +45,7 @@ const FilterNotAvailable = ({ onClose } : { onClose?: () => void }) => {
)}
{!freeInstances.length && (
- <>
+
+ {getTruncatedName(name) || 'R'}
+
+ )}
+ >
+
+
+ Back to Redis Cloud Admin console
+
+
+
+
+
+ Account}
+ >
+ Redis Cloud account
+
+
+
+ {accounts?.map(({ name, id }) => (
+
+ 1,
+ [styles.isDisabled]: selectingAccountId,
+ }
+ )}
+ onClick={() => handleClickSelectAccount?.(id)}
+ data-testid={`profile-account-${id}${id === currentAccountId ? '-selected' : ''}`}
+ >
+
+ {name} #{id}
+
+ {id === currentAccountId && (
+ ))}
+
+ Import Cloud databases
+ {isImportLoading ? (
+
+
+ Cloud Console
+
+ {name}
+
+
+
+ Logout
+
+ {moduleText?.title}
- {`${moduleName} ${[MODULE_TEXT_VIEW.redisgears, MODULE_TEXT_VIEW.bf].includes(moduleName) ? 'are' : 'is'} not available `}
+ {`${moduleName?.substring(0, 1).toUpperCase()}${moduleName?.substring(1)} ${[MODULE_TEXT_VIEW.redisgears, MODULE_TEXT_VIEW.bf].includes(moduleName) ? 'are' : 'is'} not available `}
{width > MAX_ELEMENT_WIDTH &&
}
for this database
@@ -57,11 +61,16 @@ const ListItem = ({ item }: { item: string }) => (
const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps) => {
const [width, setWidth] = useState(0)
const freeInstances = useSelector(freeInstancesSelector) || []
+ const {
+ [FeatureFlags.cloudAds]: cloudAdsFeature,
+ } = useSelector(appFeatureFlagsFeaturesSelector)
const module = MODULE_OAUTH_SOURCE_MAP[moduleName]
const freeDbWithModule = getDbWithModuleLoaded(freeInstances, moduleName)
- const source = type === 'browser' ? OAuthSocialSource.BrowserSearch : OAuthSocialSource[module]
+ const source = type === 'browser'
+ ? OAuthSocialSource.BrowserSearch
+ : OAuthSocialSource[module as keyof typeof OAuthSocialSource]
useCapability(source)
@@ -72,23 +81,25 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
}
})
- const renderText = useCallback((moduleName?: string) => (!freeDbWithModule ? (
-
+
-
{renderTitle(width, MODULE_TEXT_VIEW[moduleName])}
{CONTENT[moduleName]?.text.map((item: string) => (
@@ -133,57 +144,19 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
{renderText(MODULE_TEXT_VIEW[moduleName])}
- {!!freeDbWithModule && (
+
diff --git a/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx b/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx
new file mode 100644
index 0000000000..96bde6a3c3
--- /dev/null
+++ b/redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoadedButton.tsx
@@ -0,0 +1,124 @@
+import React from 'react'
+import { useSelector } from 'react-redux'
+import cx from 'classnames'
+import {
+ EuiButton,
+ EuiLink,
+} from '@elastic/eui'
+import { useHistory } from 'react-router-dom'
+import {
+ FeatureFlags,
+ MODULE_NOT_LOADED_CONTENT as CONTENT,
+ Pages,
+} from 'uiSrc/constants'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import styles from 'uiSrc/components/messages/module-not-loaded/styles.module.scss'
+import { FeatureFlagComponent, OAuthSsoHandlerDialog } from 'uiSrc/components'
+import { getUtmExternalLink } from 'uiSrc/utils/links'
+import { EXTERNAL_LINKS, UTM_CAMPAINGS } from 'uiSrc/constants/links'
+import {
+ OAuthSocialAction,
+ OAuthSocialSource,
+ RedisDefaultModules,
+} from 'uiSrc/slices/interfaces'
+
+export interface IProps {
+ moduleName: RedisDefaultModules
+ module?: String;
+ onClose?: () => void
+ type?: 'workbench' | 'browser'
+}
+
+const ModuleNotLoadedButton = ({ moduleName, type, onClose, module }: IProps) => {
+ const history = useHistory()
+ const {
+ [FeatureFlags.envDependent]: envDependentFeature,
+ } = useSelector(appFeatureFlagsFeaturesSelector)
+
+ const utmCampaign =
+ type === 'browser'
+ ? UTM_CAMPAINGS[OAuthSocialSource.BrowserSearch]
+ : UTM_CAMPAINGS[OAuthSocialSource.Workbench]
+
+ if (!envDependentFeature?.flag) {
+ return null
+ }
+
+ return (
+ <>
+
+ {freeDbWithModule ? (
- <>
-
- Learn More
-
-
- {(ssoCloudHandlerClick) => (
- {
- ssoCloudHandlerClick(
- e,
- {
- source: type === 'browser' ? OAuthSocialSource.BrowserSearch : OAuthSocialSource[module],
- action: OAuthSocialAction.Create
- }
- )
- onFreeDatabaseClick()
- }}
- data-testid="get-started-link"
- >
-
- Get Started For Free
-
-
- )}
-
-
-
+ ) : (
+
- {(!isInstanceExists && !loading && !loadingChanging ? (
+ {!isInstanceExists && !loading && !loadingChanging ? (
@@ -239,7 +271,7 @@ const HomePage = () => {
onEditInstance={handleEditInstance}
onDeleteInstances={handleDeleteInstances}
/>
- ))}
+ )}
diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.spec.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.spec.tsx
index 576ab5f631..dfe34a9590 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.spec.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/components/connectivity-options/ConnectivityOptions.spec.tsx
@@ -76,4 +76,20 @@ describe('ConnectivityOptions', () => {
])
expect(onClose).toBeCalled()
})
+
+ it('should not should create free db button if cloud ads feature flag is disabled', () => {
+ (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValueOnce({
+ cloudSso: {
+ flag: true
+ },
+ cloudAds: {
+ flag: false,
+ }
+ })
+
+ const onClose = jest.fn()
+ render(