#RI-5227 - auto create free db

redisinsight/ui/src/components/oauth/oauth-select-account-dialog/OAuthSelectAccountDialog.tsx

@@ -15,6 +15,7 @@ import { useHistory } from 'react-router-dom'
 
 import {
   activateAccount,
+  createFreeDbJob,
   fetchPlans,
   oauthCloudPlanSelector,
   oauthCloudSelector,
@@ -26,8 +27,9 @@ import { Nullable } from 'uiSrc/utils'
 import { cloudSelector, fetchSubscriptionsRedisCloud } from 'uiSrc/slices/instances/cloud'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { Pages } from 'uiSrc/constants'
-import { removeInfiniteNotification } from 'uiSrc/slices/app/notifications'
-import { InfiniteMessagesIds } from 'uiSrc/components/notifications/components'
+import { addInfiniteNotification, removeInfiniteNotification } from 'uiSrc/slices/app/notifications'
+import { INFINITE_MESSAGES, InfiniteMessagesIds } from 'uiSrc/components/notifications/components'
+import { CloudJobName, CloudJobStep } from 'uiSrc/electron/constants'
 
 import styles from './styles.module.scss'
 
@@ -36,7 +38,7 @@ interface FormValues {
 }
 
 const OAuthSelectAccountDialog = () => {
-  const { isAutodiscoverySSO } = useSelector(cloudSelector)
+  const { isAutodiscoverySSO, isRecommendedSettings } = useSelector(cloudSelector)
   const { accounts = [], currentAccountId } = useSelector(oauthCloudUserDataSelector) ?? {}
   const { isOpenSelectAccountDialog } = useSelector(oauthCloudSelector)
   const { loading } = useSelector(oauthCloudUserSelector)
@@ -75,6 +77,20 @@ const OAuthSelectAccountDialog = () => {
         }
       ))
       dispatch(setSelectAccountDialogState(false))
+    } else if (isRecommendedSettings) {
+      dispatch(createFreeDbJob({
+        name: CloudJobName.CreateFreeSubscriptionAndDatabase,
+        resources: {
+          isRecommendedSettings
+        },
+        onSuccessAction: () => {
+          dispatch(setSelectAccountDialogState(false))
+          dispatch(addInfiniteNotification(INFINITE_MESSAGES.PENDING_CREATE_DB(CloudJobStep.Credentials)))
+        },
+        onFailAction: () => {
+          dispatch(removeInfiniteNotification(InfiniteMessagesIds.oAuthProgress))
+        }
+      }))
     } else {
       dispatch(fetchPlans())
     }
@@ -86,7 +102,7 @@ const OAuthSelectAccountDialog = () => {
         accountsCount: accounts.length
       },
     })
-  }, [isAutodiscoverySSO, accounts])
+  }, [isAutodiscoverySSO, isRecommendedSettings, accounts])
 
   const onActivateAccountFail = useCallback((error: string) => {
     sendEventTelemetry({

redisinsight/ui/src/components/oauth/oauth-social/OAuthSocial.spec.tsx

@@ -4,8 +4,10 @@ import { cleanup, fireEvent, mockedStore, render, waitForEuiToolTipVisible, act
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { CloudAuthSocial, IpcInvokeEvent } from 'uiSrc/electron/constants'
 import { setOAuthCloudSource, signIn, oauthCloudPAgreementSelector } from 'uiSrc/slices/oauth/cloud'
-import { setIsAutodiscoverySSO } from 'uiSrc/slices/instances/cloud'
+import { setIsAutodiscoverySSO, setIsRecommendedSettingsSSO } from 'uiSrc/slices/instances/cloud'
 import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
+import { FeatureFlags } from 'uiSrc/constants'
 import OAuthSocial, { OAuthSocialType } from './OAuthSocial'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -21,6 +23,12 @@ jest.mock('uiSrc/slices/oauth/cloud', () => ({
   oauthCloudPAgreementSelector: jest.fn().mockReturnValue(true),
 }))
 
+jest.mock('uiSrc/slices/app/features', () => ({
+  ...jest.requireActual('uiSrc/slices/app/features'),
+  appFeatureFlagsFeaturesSelector: jest.fn().mockReturnValue({
+  }),
+}))
+
 let store: typeof mockedStore
 const invokeMock = jest.fn()
 beforeEach(() => {
@@ -50,13 +58,14 @@ describe('OAuthSocial', () => {
       eventData: {
         accountOption: 'Google',
         action: 'create',
+        recommendedSettings: null
       }
     })
 
     expect(invokeMock).toBeCalledTimes(1)
     expect(invokeMock).toBeCalledWith(IpcInvokeEvent.cloudOauth, { action: 'create', strategy: CloudAuthSocial.Google })
 
-    const expectedActions = [signIn(), setIsAutodiscoverySSO(false)]
+    const expectedActions = [signIn(), setIsAutodiscoverySSO(false), setIsRecommendedSettingsSSO(undefined)]
     expect(store.getActions()).toEqual(expectedActions)
 
     invokeMock.mockRestore();
@@ -76,20 +85,85 @@ describe('OAuthSocial', () => {
       eventData: {
         accountOption: 'GitHub',
         action: 'create',
+        recommendedSettings: null
       }
     })
 
     expect(invokeMock).toBeCalledTimes(1)
     expect(invokeMock).toBeCalledWith(IpcInvokeEvent.cloudOauth, { action: 'create', strategy: CloudAuthSocial.Github })
     invokeMock.mockRestore()
 
-    const expectedActions = [signIn(), setIsAutodiscoverySSO(false)]
+    const expectedActions = [signIn(), setIsAutodiscoverySSO(false), setIsRecommendedSettingsSSO(undefined)]
     expect(store.getActions()).toEqual(expectedActions)
 
     invokeMock.mockRestore();
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
 
+  describe('Recommended Settings Enabled', () => {
+    beforeEach(() => {
+      (appFeatureFlagsFeaturesSelector as jest.Mock).mockReturnValue({
+        [FeatureFlags.cloudSsoRecommendedSettings]: {
+          flag: true
+        }
+      })
+    })
+    it('should send telemetry after click on google btn', async () => {
+      const sendEventTelemetryMock = jest.fn();
+      (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+      const { queryByTestId } = render(<OAuthSocial />)
+
+      fireEvent.click(queryByTestId('google-oauth') as HTMLButtonElement)
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.CLOUD_SIGN_IN_SOCIAL_ACCOUNT_SELECTED,
+        eventData: {
+          accountOption: 'Google',
+          action: 'create',
+          recommendedSettings: 'enabled'
+        }
+      })
+
+      expect(invokeMock).toBeCalledTimes(1)
+      expect(invokeMock).toBeCalledWith(IpcInvokeEvent.cloudOauth, { action: 'create', strategy: CloudAuthSocial.Google })
+
+      const expectedActions = [signIn(), setIsAutodiscoverySSO(false), setIsRecommendedSettingsSSO(true)]
+      expect(store.getActions()).toEqual(expectedActions)
+
+      invokeMock.mockRestore();
+      (sendEventTelemetry as jest.Mock).mockRestore()
+    })
+
+    it('should send telemetry after click on github btn', async () => {
+      const sendEventTelemetryMock = jest.fn();
+      (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+
+      const { queryByTestId } = render(<OAuthSocial />)
+
+      fireEvent.click(queryByTestId('github-oauth') as HTMLButtonElement)
+
+      expect(sendEventTelemetry).toBeCalledWith({
+        event: TelemetryEvent.CLOUD_SIGN_IN_SOCIAL_ACCOUNT_SELECTED,
+        eventData: {
+          accountOption: 'GitHub',
+          action: 'create',
+          recommendedSettings: 'enabled'
+        }
+      })
+
+      expect(invokeMock).toBeCalledTimes(1)
+      expect(invokeMock).toBeCalledWith(IpcInvokeEvent.cloudOauth, { action: 'create', strategy: CloudAuthSocial.Github })
+      invokeMock.mockRestore()
+
+      const expectedActions = [signIn(), setIsAutodiscoverySSO(false), setIsRecommendedSettingsSSO(true)]
+      expect(store.getActions()).toEqual(expectedActions)
+
+      invokeMock.mockRestore();
+      (sendEventTelemetry as jest.Mock).mockRestore()
+    })
+  })
+
   describe('Autodiscovery', () => {
     it('should send telemetry after click on google btn', async () => {
       const sendEventTelemetryMock = jest.fn();

redisinsight/ui/src/components/oauth/oauth-social/OAuthSocial.tsx

@@ -1,20 +1,22 @@
-import React from 'react'
-import { EuiButtonIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui'
+import React, { useState } from 'react'
+import { EuiButtonIcon, EuiCheckbox, EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { ipcAuthGithub, ipcAuthGoogle } from 'uiSrc/electron/utils'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
 import { setOAuthCloudSource, signIn, oauthCloudPAgreementSelector } from 'uiSrc/slices/oauth/cloud'
-import { OAuthAgreement } from 'uiSrc/components'
+import { FeatureFlagComponent, OAuthAgreement } from 'uiSrc/components'
+import { setIsRecommendedSettingsSSO, setIsAutodiscoverySSO } from 'uiSrc/slices/instances/cloud'
+import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
+import { FeatureFlags } from 'uiSrc/constants'
+import { appFeatureFlagsFeaturesSelector } from 'uiSrc/slices/app/features'
 
 import { ReactComponent as GoogleIcon } from 'uiSrc/assets/img/oauth/google.svg'
 import { ReactComponent as GithubIcon } from 'uiSrc/assets/img/oauth/github.svg'
 import { ReactComponent as GoogleSmallIcon } from 'uiSrc/assets/img/oauth/google_small.svg'
 import { ReactComponent as GithubSmallIcon } from 'uiSrc/assets/img/oauth/github_small.svg'
 
-import { setIsAutodiscoverySSO } from 'uiSrc/slices/instances/cloud'
-import { OAuthSocialSource } from 'uiSrc/slices/interfaces'
 import styles from './styles.module.scss'
 
 export enum OAuthSocialType {
@@ -29,6 +31,10 @@ interface Props {
 
 const OAuthSocial = ({ type = OAuthSocialType.Modal, hideTitle = false }: Props) => {
   const agreement = useSelector(oauthCloudPAgreementSelector)
+  const {
+    [FeatureFlags.cloudSsoRecommendedSettings]: isRecommendedFeatureEnabled
+  } = useSelector(appFeatureFlagsFeaturesSelector)
+  const [isRecommended, setIsRecommended] = useState(isRecommendedFeatureEnabled?.flag ? true : undefined)
 
   const dispatch = useDispatch()
   const isAutodiscovery = type === OAuthSocialType.Autodiscovery
@@ -39,9 +45,23 @@ const OAuthSocial = ({ type = OAuthSocialType.Modal, hideTitle = false }: Props)
     eventData: {
       accountOption,
       action: getAction(),
+      recommendedSettings: isAutodiscovery
+        ? undefined
+        : (!isRecommendedFeatureEnabled?.flag
+          ? null
+          : (isRecommended ? 'enabled' : 'disabled'))
     }
   })
 
+  const handleClickSso = () => {
+    dispatch(signIn())
+    dispatch(setIsAutodiscoverySSO(isAutodiscovery))
+    isAutodiscovery && dispatch(setOAuthCloudSource(OAuthSocialSource.Autodiscovery))
+    if (!isAutodiscovery) {
+      dispatch(setIsRecommendedSettingsSSO(isRecommended))
+    }
+  }
+
   const socialLinks = [
     {
       className: styles.googleButton,
@@ -76,9 +96,7 @@ const OAuthSocial = ({ type = OAuthSocialType.Modal, hideTitle = false }: Props)
         disabled={!agreement}
         className={cx(styles.button, className)}
         onClick={() => {
-          dispatch(signIn())
-          dispatch(setIsAutodiscoverySSO(isAutodiscovery))
-          isAutodiscovery && dispatch(setOAuthCloudSource(OAuthSocialSource.Autodiscovery))
+          handleClickSso()
           onButtonClick()
         }}
         data-testid={label}
@@ -87,11 +105,40 @@ const OAuthSocial = ({ type = OAuthSocialType.Modal, hideTitle = false }: Props)
     </EuiToolTip>
   ))
 
+  const RecommendedSettingsCheckBox = () => (
+    <FeatureFlagComponent name={FeatureFlags.cloudSsoRecommendedSettings}>
+      <div className={styles.recommendedSettings}>
+        <EuiCheckbox
+          id="ouath-recommended-settings"
+          name="recommended-settings"
+          label="Use recommended settings"
+          checked={isRecommended}
+          onChange={(e) => setIsRecommended(e.target.checked)}
+          data-testid="oauth-recommended-settings-checkbox"
+        />
+        <EuiToolTip
+          content={(
+            <>
+              The database will be automatically created using a pre-selected provider and region.
+              <br />
+              You can change it by signing in to Redis Cloud.
+            </>
+          )}
+          position="top"
+          anchorClassName={styles.recommendedSettingsToolTip}
+        >
+          <EuiIcon type="iInCircle" size="s" />
+        </EuiToolTip>
+      </div>
+    </FeatureFlagComponent>
+  )
+
   if (!isAutodiscovery) {
     return (
       <div className={cx(styles.container)}>
         {buttons}
         <div className={styles.containerAgreement}>
+          <RecommendedSettingsCheckBox />
           <OAuthAgreement />
         </div>
       </div>

redisinsight/ui/src/components/oauth/oauth-social/styles.module.scss

@@ -76,3 +76,38 @@
   margin-top: 16px;
   text-align: left;
 }
+
+.recommendedSettings {
+  display: flex;
+  align-items: center;
+
+  .recommendedSettingsToolTip {
+    display: inline-flex;
+    margin-left: 4px;
+    margin-bottom: 4px;
+
+    :global {
+      svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  :global(.euiCheckbox) {
+    margin-bottom: 6px;
+
+    :global(.euiCheckbox__label) {
+      font: normal normal normal 10px/15px Graphik, sans-serif !important;
+      color: var(--htmlColor) !important;
+      padding-left: 16px !important;
+    }
+
+    :global(.euiCheckbox__square) {
+      width: 12px;
+      height: 12px;
+      padding: 0 !important;
+      border-width: 1px !important;
+    }
+  }
+}

redisinsight/ui/src/constants/featureFlags.ts

@@ -1,4 +1,5 @@
 export enum FeatureFlags {
   insightsRecommendations = 'insightsRecommendations',
   cloudSso = 'cloudSso',
+  cloudSsoRecommendedSettings = 'cloudSsoRecommendedSettings',
 }