diff --git a/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx b/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx
index c6dd89ebe9..cdb7bc5fe9 100644
--- a/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx
+++ b/redisinsight/ui/src/pages/settings/SettingsPage.spec.tsx
@@ -1,6 +1,7 @@
import React from 'react'
import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
import SettingsPage from './SettingsPage'
jest.mock('uiSrc/telemetry', () => ({
@@ -8,6 +9,15 @@ jest.mock('uiSrc/telemetry', () => ({
sendEventTelemetry: jest.fn(),
}))
+jest.mock('uiSrc/slices/app/features', () => ({
+ ...jest.requireActual('uiSrc/slices/app/features'),
+ appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
+ cloudSso: {
+ flag: false
+ }
+ }),
+}))
+
/**
* SettingsPage tests
*
@@ -51,6 +61,29 @@ describe('SettingsPage', () => {
).toBeInTheDocument()
expect(render()).toBeTruthy()
})
+
+ it('should not render cloud accordion without feature flag', () => {
+ const { container } = render()
+
+ expect(
+ container.querySelector('[data-test-subj="accordion-cloud-settings"]')
+ ).not.toBeInTheDocument()
+ expect(render()).toBeTruthy()
+ })
+
+ it('should render cloud accordion with feature flag', () => {
+ (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValue({
+ cloudSso: {
+ flag: true
+ }
+ })
+ const { container } = render()
+
+ expect(
+ container.querySelector('[data-test-subj="accordion-cloud-settings"]')
+ ).toBeInTheDocument()
+ expect(render()).toBeTruthy()
+ })
})
describe('Telemetry', () => {
diff --git a/redisinsight/ui/src/pages/settings/SettingsPage.tsx b/redisinsight/ui/src/pages/settings/SettingsPage.tsx
index 2d9af00b67..23766ed849 100644
--- a/redisinsight/ui/src/pages/settings/SettingsPage.tsx
+++ b/redisinsight/ui/src/pages/settings/SettingsPage.tsx
@@ -18,9 +18,9 @@ import {
import { useDispatch, useSelector } from 'react-redux'
import { setTitle } from 'uiSrc/utils'
-import { THEMES } from 'uiSrc/constants'
+import { FeatureFlags, THEMES } from 'uiSrc/constants'
import { useDebouncedEffect } from 'uiSrc/services'
-import { ConsentsNotifications, ConsentsPrivacy } from 'uiSrc/components'
+import { ConsentsNotifications, ConsentsPrivacy, FeatureFlagComponent } from 'uiSrc/components'
import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry'
import { appAnalyticsInfoSelector } from 'uiSrc/slices/app/info'
import { ThemeContext } from 'uiSrc/contexts/themeContext'
@@ -30,19 +30,23 @@ import {
userSettingsSelector,
} from 'uiSrc/slices/user/user-settings'
-import { AdvancedSettings, WorkbenchSettings } from './components'
+import { AdvancedSettings, WorkbenchSettings, CloudSettings } from './components'
import styles from './styles.module.scss'
const SettingsPage = () => {
- const options = THEMES
- const themeContext = useContext(ThemeContext)
-
const [loading, setLoading] = useState(false)
const { loading: settingsLoading } = useSelector(userSettingsSelector)
const { identified: analyticsIdentified } = useSelector(appAnalyticsInfoSelector)
+ const initialOpenSection = globalThis.location.hash || ''
+
const dispatch = useDispatch()
+
+ const options = THEMES
+ const themeContext = useContext(ThemeContext)
+ const { theme, changeTheme } = themeContext
+
useEffect(() => {
// componentDidMount
// fetch config settings, after that take spec
@@ -61,8 +65,8 @@ const SettingsPage = () => {
setTitle('Settings')
const onChange = (value: string) => {
- const previousValue = themeContext.theme
- themeContext.changeTheme(value)
+ const previousValue = theme
+ changeTheme(value)
sendEventTelemetry({
event: TelemetryEvent.SETTINGS_COLOR_THEME_CHANGED,
eventData: {
@@ -82,7 +86,7 @@ const SettingsPage = () => {
{
)
+ const CloudSettingsGroup = () => (
+
+ {loading && (
+
+
+
+ )}
+
+
+ )
+
const AdvancedSettingsGroup = () => (
{loading && (
@@ -145,7 +160,7 @@ const SettingsPage = () => {
isCollapsible
className={styles.accordion}
title="General"
- initialIsOpen={false}
+ initialIsOpen={initialOpenSection === '#general'}
data-test-subj="accordion-appearance"
>
{Appearance()}
@@ -154,7 +169,7 @@ const SettingsPage = () => {
isCollapsible
className={styles.accordion}
title="Privacy"
- initialIsOpen={false}
+ initialIsOpen={initialOpenSection === '#privacy'}
data-test-subj="accordion-privacy-settings"
>
{PrivacySettings()}
@@ -163,16 +178,27 @@ const SettingsPage = () => {
isCollapsible
className={styles.accordion}
title="Workbench"
- initialIsOpen={false}
+ initialIsOpen={initialOpenSection === '#workbench'}
data-test-subj="accordion-workbench-settings"
>
{WorkbenchSettingsGroup()}
+
+
+ {CloudSettingsGroup()}
+
+
{AdvancedSettingsGroup()}
diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx
new file mode 100644
index 0000000000..697f95291d
--- /dev/null
+++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.spec.tsx
@@ -0,0 +1,109 @@
+import React from 'react'
+import { cloneDeep } from 'lodash'
+import { act, cleanup, fireEvent, mockedStore, render, screen, waitForEuiPopoverVisible } from 'uiSrc/utils/test-utils'
+
+import { getCapiKeys, oauthCapiKeysSelector, removeAllCapiKeys } from 'uiSrc/slices/oauth/cloud'
+import { apiService } from 'uiSrc/services'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+
+import CloudSettings from './CloudSettings'
+
+jest.mock('uiSrc/slices/oauth/cloud', () => ({
+ ...jest.requireActual('uiSrc/slices/oauth/cloud'),
+ oauthCapiKeysSelector: jest.fn().mockReturnValue({
+ data: null,
+ loading: false
+ }),
+}))
+
+let store: typeof mockedStore
+beforeEach(() => {
+ cleanup()
+ store = cloneDeep(mockedStore)
+ store.clearActions()
+})
+
+jest.mock('uiSrc/telemetry', () => ({
+ ...jest.requireActual('uiSrc/telemetry'),
+ sendEventTelemetry: jest.fn(),
+}))
+
+describe('CloudSettings', () => {
+ it('should render', () => {
+ expect(render()).toBeTruthy()
+ })
+
+ it('should get api keys after render', () => {
+ render()
+
+ expect(store.getActions()).toEqual([getCapiKeys()])
+ })
+
+ it('should be disabled delete all button', () => {
+ render()
+
+ expect(screen.getByTestId('delete-key-btn')).toBeDisabled()
+ })
+
+ it('should show delete popover and call proper action on delete', async () => {
+ (oauthCapiKeysSelector as jest.Mock).mockReturnValue({
+ data: [
+ {
+ id: '1',
+ name: 'RedisInsight-f4868252-a128-4a02-af75-bd3c99898267-2020-11-01T-123',
+ createdAt: '2023-08-02T09:07:41.680Z',
+ lastUsed: '2023-08-02T09:07:41.680Z',
+ valid: true,
+ }
+ ],
+ loading: false
+ })
+ render()
+
+ fireEvent.click(screen.getByTestId('delete-key-btn'))
+ await waitForEuiPopoverVisible()
+
+ fireEvent.click(screen.getByTestId('delete-key-confirm-btn'))
+
+ expect(store.getActions()).toEqual([getCapiKeys(), removeAllCapiKeys()])
+ })
+
+ it('should call proper telemetry events', async () => {
+ apiService.delete = jest.fn().mockResolvedValueOnce({ status: 200 })
+ const sendEventTelemetryMock = jest.fn()
+ sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock);
+
+ (oauthCapiKeysSelector as jest.Mock).mockReturnValue({
+ data: [
+ {
+ id: '1',
+ name: 'RedisInsight-f4868252-a128-4a02-af75-bd3c99898267-2020-11-01T-123',
+ createdAt: '2023-08-02T09:07:41.680Z',
+ lastUsed: '2023-08-02T09:07:41.680Z',
+ valid: true,
+ }
+ ],
+ loading: false
+ })
+ render()
+
+ fireEvent.click(screen.getByTestId('delete-key-btn'))
+ await waitForEuiPopoverVisible()
+
+ expect(sendEventTelemetry).toBeCalledWith({
+ event: TelemetryEvent.SETTINGS_CLOUD_API_KEYS_REMOVE_CLICKED,
+ })
+
+ sendEventTelemetry.mockRestore()
+
+ await act(() => {
+ fireEvent.click(screen.getByTestId('delete-key-confirm-btn'))
+ })
+
+ expect(sendEventTelemetry).toBeCalledWith({
+ event: TelemetryEvent.SETTINGS_CLOUD_API_KEYS_REMOVED,
+ })
+
+ sendEventTelemetry.mockRestore()
+ })
+})
diff --git a/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx
new file mode 100644
index 0000000000..9e34b4a5d2
--- /dev/null
+++ b/redisinsight/ui/src/pages/settings/components/cloud-settings/CloudSettings.tsx
@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react'
+
+import {
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiLink,
+ EuiSpacer,
+ EuiText,
+ EuiTitle,
+ EuiButton,
+ EuiPopover,
+} from '@elastic/eui'
+
+import { useDispatch, useSelector } from 'react-redux'
+import { getCapiKeysAction, oauthCapiKeysSelector, removeAllCapiKeysAction } from 'uiSrc/slices/oauth/cloud'
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import UserApiKeysTable from './components/user-api-keys-table'
+
+import styles from './styles.module.scss'
+
+const CloudSettings = () => {
+ const { loading, data } = useSelector(oauthCapiKeysSelector)
+ const [isDeleteOpen, setIsDeleteOpen] = useState(false)
+
+ const dispatch = useDispatch()
+
+ useEffect(() => {
+ dispatch(getCapiKeysAction())
+ }, [])
+
+ const handleClickDelete = () => {
+ setIsDeleteOpen(true)
+ sendEventTelemetry({
+ event: TelemetryEvent.SETTINGS_CLOUD_API_KEYS_REMOVE_CLICKED,
+ })
+ }
+
+ const handleDeleteAllKeys = () => {
+ setIsDeleteOpen(false)
+ dispatch(removeAllCapiKeysAction(() => {
+ sendEventTelemetry({
+ event: TelemetryEvent.SETTINGS_CLOUD_API_KEYS_REMOVED,
+ })
+ }))
+ }
+
+ return (
+
+
+ API user keys
+
+
+
+
+
+ The list of API user keys that are stored locally in RedisInsight.
+ API user keys grant programmatic access to Redis Enterprise Cloud.
+ {'To delete API keys from Redis Enterprise Cloud, sign in to '}
+
+ Redis Enterprise Cloud
+
+ {' and delete them manually.'}
+
+
+
+ setIsDeleteOpen(false)}
+ panelPaddingSize="l"
+ panelClassName={styles.deletePopover}
+ button={(
+
+ Remove all API keys
+
+ )}
+ >
+
+
+
+ All API user keys
will be removed from RedisInsight.
+
+ {'To delete API keys from Redis Enterprise Cloud, '}
+
+ sign in to Redis Enterprise Cloud
+
+ {' and delete them manually.'}
+
+
+
+
+ Remove All keys
+
+
+
+
+
+
+ {!valid && (
+
+
+
+ )}
+
+ <>{value}
+
+
+ )
+ }
+ },
+ {
+ name: 'Created',
+ field: 'createdAt',
+ sortable: true,
+ truncateText: true,
+ width: '120x',
+ render: (value: number) => (
+
+ <>{format(new Date(value), 'd MMM yyyy')}
+
+ )
+ },
+ {
+ name: 'Last used',
+ field: 'lastUsed',
+ sortable: true,
+ width: '120x',
+ render: (value: number) => (
+ <>
+ {value && (
+
+ <>{format(new Date(value), 'd MMM yyyy')}
+
+ )}
+ {!value && 'Never'}
+
+ )
+ },
+ {
+ name: '',
+ field: 'actions',
+ align: 'right',
+ width: '80px',
+ render: (_value, { id, name }) => (
+
+
+ handleCopy(name || '')}
+ style={{ marginRight: 4 }}
+ data-testid={`copy-api-key-${name}`}
+ />
+
+
+ {'To delete this API key from Redis Enterprise Cloud, '}
+
+ sign in to Redis Enterprise Cloud
+
+ {' and delete it manually.'}
+
+ )}
+ item={id}
+ suffix=""
+ deleting={deleting}
+ closePopover={() => setDeleting('')}
+ updateLoading={loading}
+ showPopover={showPopover}
+ testid={`remove-key-button-${name}`}
+ handleDeleteItem={() => handleDeleteApiKey(id, name)}
+ handleButtonClick={handleClickDeleteApiKey}
+ />
+
+
+ <>
+
+ The ultimate Redis starting point
+
+
+
+
+ Cloud API keys will be created and stored when you connect to Redis Enterprise Cloud to create
+ a free Cloud database or autodiscover your Cloud database.
+
+
+
+
+ {(socialCloudHandlerClick) => (
+ socialCloudHandlerClick(e, OAuthSocialSource.SettingsPage)}
+ data-testid="autodiscover-btn"
+ >
+ Autodiscover
+
+ )}
+
+
+ {(ssoCloudHandlerClick) => (
+ ssoCloudHandlerClick(e, OAuthSocialSource.SettingsPage)}
+ data-testid="create-cloud-db-btn"
+ >
+ Create Redis Cloud database
+
+ )}
+
+
+