Fe/feature/ri 4617 sign in users

redisinsight/desktop/splash.ejs

@@ -82,7 +82,7 @@
 <script>
   const bootstrap = async () => {
 
-    const appVersion = await window.app.ipc.invoke('getAppVersion') || ''
+    const appVersion = await window.app.ipc.invoke('app:get:version') || ''
     const copyrightEl = document.getElementById('copyright') || null
 
     if (copyrightEl) {

redisinsight/ui/src/components/analytics-tabs/AnalyticsTabs.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import reactRouterDom from 'react-router-dom'
 import { AnalyticsViewTab } from 'uiSrc/slices/interfaces/analytics'
-import store, { RootState } from 'uiSrc/slices/store'
+import { RootState, store } from 'uiSrc/slices/store'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { act, fireEvent, render, screen } from 'uiSrc/utils/test-utils'
 import AnalyticsTabs from './AnalyticsTabs'

redisinsight/ui/src/components/database-overview/components/MoreInfoPopover/MoreInfoPopover.spec.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+import MoreInfoPopover from './MoreInfoPopover'
+
+describe('MoreInfoPopover', () => {
+  it('should render', () => {
+    expect(render(<MoreInfoPopover metrics={[]} modules={[]} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/database-overview/components/MoreInfoPopover/MoreInfoPopover.tsx

@@ -4,24 +4,23 @@ import cx from 'classnames'
 
 import { DATABASE_LIST_MODULES_TEXT, SignInDialogSource } from 'uiSrc/slices/interfaces'
 import { getModule, truncateText } from 'uiSrc/utils'
-import { handleFreeDatabaseClick } from 'uiSrc/utils/oauth/handleFreeDatabaseClick'
+import { OAuthSsoHandlerDialog } from 'uiSrc/components'
 import { AdditionalRedisModule } from 'apiSrc/modules/database/models/additional.redis.module'
 
 import { IMetric } from '../OverviewMetrics'
 
 import './styles.scss'
 import styles from './styles.module.scss'
 
-interface IProps {
+export interface IProps {
   metrics: Array<IMetric>,
   modules: Array<AdditionalRedisModule>
 }
 
 const MoreInfoPopover = ({ metrics, modules }: IProps) => {
   const [isShowMoreInfoPopover, setIsShowMoreInfoPopover] = useState(false)
 
-  const onFreeDatabaseClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    handleFreeDatabaseClick(e, SignInDialogSource.BrowserContentMenu)
+  const onFreeDatabaseClick = () => {
     setIsShowMoreInfoPopover(false)
   }
 
@@ -120,16 +119,23 @@ const MoreInfoPopover = ({ metrics, modules }: IProps) => {
             <a className="link-underline" href="https://redis.io/modules" target="_blank" rel="noreferrer">here</a>.
             <br />
             {'Create a '}
-            <EuiLink
-              color="text"
-              onClick={onFreeDatabaseClick}
-              external={false}
-              target="_blank"
-              href="https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight"
-              data-testid="free-database-link"
-            >
-              free Redis database
-            </EuiLink>
+            <OAuthSsoHandlerDialog>
+              {(ssoCloudHandlerClick) => (
+                <EuiLink
+                  color="text"
+                  onClick={(e) => {
+                    ssoCloudHandlerClick(e, SignInDialogSource.BrowserContentMenu)
+                    onFreeDatabaseClick()
+                  }}
+                  external={false}
+                  target="_blank"
+                  href="https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight"
+                  data-testid="free-database-link"
+                >
+                  free Redis database
+                </EuiLink>
+              )}
+            </OAuthSsoHandlerDialog>
             {' with modules support on Redis Cloud.'}
           </p>
         </div>

redisinsight/ui/src/components/index.ts

@@ -29,6 +29,7 @@ import FeatureFlagComponent from './feature-flag-component'
 import { ModuleNotLoaded, FilterNotAvailable } from './messages'
 import OAuthSignInDialog from './oauth-sign-in-dialog'
 import OAuthSocial from './oauth-social'
+import OAuthSsoHandlerDialog from './oauth-sso-handler-dialog/OAuthSsoHandlerDialog'
 
 export {
   NavigationMenu,
@@ -66,4 +67,5 @@ export {
   FilterNotAvailable,
   OAuthSignInDialog,
   OAuthSocial,
+  OAuthSsoHandlerDialog,
 }

redisinsight/ui/src/components/live-time-recommendations/components/recommendation/Recommendation.tsx

@@ -16,7 +16,8 @@ import {
 import { isUndefined } from 'lodash'
 import cx from 'classnames'
 
-import { Nullable, findMarkdownPathByPath, Maybe, renderRecommendationContent } from 'uiSrc/utils'
+import { Nullable, findMarkdownPathByPath, Maybe } from 'uiSrc/utils'
+import { renderRecommendationContent } from 'uiSrc/utils/recommendation/utils'
 import { EAManifestFirstKey, Pages, Theme } from 'uiSrc/constants'
 import { RecommendationVoting, RecommendationCopyComponent } from 'uiSrc/components'
 import { Vote } from 'uiSrc/constants/recommendations'

redisinsight/ui/src/components/messages/filter-not-available/FilterNotAvailable.tsx

@@ -3,17 +3,16 @@ import React from 'react'
 import { EuiIcon, EuiText, EuiTitle, EuiSpacer, EuiLink, EuiButton } from '@elastic/eui'
 import RedisDbBlueIcon from 'uiSrc/assets/img/icons/redis_db_blue.svg'
 
-import { handleFreeDatabaseClick } from 'uiSrc/utils/oauth/handleFreeDatabaseClick'
 import { SignInDialogSource } from 'uiSrc/slices/interfaces'
+import { OAuthSsoHandlerDialog } from 'uiSrc/components'
 import styles from './styles.module.scss'
 
 const GET_STARTED_LINK = 'https://redis.com/try-free/?utm_source=redisinsight&utm_medium=main&utm_campaign=browser_filter'
 const LEARN_MORE_LINK = 'https://redis.io/docs/stack/about/?utm_source=redisinsight&utm_medium=main&utm_campaign=browser_filter'
 
-const FilterNotAvailable = ({ onClose } : { onClose: () => void }) => {
-  const onFreeDatabaseClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    handleFreeDatabaseClick(e, SignInDialogSource.BrowserFiltering)
-    onClose()
+const FilterNotAvailable = ({ onClose } : { onClose?: () => void }) => {
+  const onFreeDatabaseClick = () => {
+    onClose?.()
   }
   return (
     <div className={styles.container}>
@@ -26,17 +25,24 @@ const FilterNotAvailable = ({ onClose } : { onClose: () => void }) => {
       <EuiText color="subdued">Create a free Redis Stack database that supports filtering and extends the core capabilities of open-source Redis.</EuiText>
       <EuiSpacer size="l" />
       <div className={styles.linksWrapper}>
-        <EuiButton
-          fill
-          color="secondary"
-          target="_blank"
-          href={GET_STARTED_LINK}
-          onClick={onFreeDatabaseClick}
-          data-testid="get-started-link"
-          size="s"
-        >
-          Get Started For Free
-        </EuiButton>
+        <OAuthSsoHandlerDialog>
+          {(ssoCloudHandlerClick) => (
+            <EuiButton
+              fill
+              color="secondary"
+              target="_blank"
+              href={GET_STARTED_LINK}
+              onClick={(e) => {
+                ssoCloudHandlerClick(e, SignInDialogSource.BrowserFiltering)
+                onFreeDatabaseClick()
+              }}
+              data-testid="get-started-link"
+              size="s"
+            >
+              Get Started For Free
+            </EuiButton>
+          )}
+        </OAuthSsoHandlerDialog>
         <EuiSpacer size="m" />
         <EuiLink
           className={styles.link}

redisinsight/ui/src/components/messages/module-not-loaded/ModuleNotLoaded.tsx

@@ -13,7 +13,7 @@ import { ReactComponent as DesktopIcon } from 'uiSrc/assets/img/icons/module_not
 import { ReactComponent as CheerIcon } from 'uiSrc/assets/img/icons/cheer.svg'
 import { MODULE_NOT_LOADED_CONTENT as CONTENT, MODULE_TEXT_VIEW } from 'uiSrc/constants'
 import { RedisDefaultModules, SignInDialogSource } from 'uiSrc/slices/interfaces'
-import { handleFreeDatabaseClick } from 'uiSrc/utils/oauth/handleFreeDatabaseClick'
+import { OAuthSsoHandlerDialog } from 'uiSrc/components'
 
 import styles from './styles.module.scss'
 
@@ -76,10 +76,7 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
     }
   }
 
-  const onFreeDatabaseClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    const source = type === 'browser' ? SignInDialogSource.BrowserSearch : SignInDialogSource[module]
-
-    handleFreeDatabaseClick(e, source)
+  const onFreeDatabaseClick = () => {
     onClose?.()
   }
 
@@ -127,23 +124,33 @@ const ModuleNotLoaded = ({ moduleName, id, type = 'workbench', onClose }: IProps
         >
           Learn More
         </EuiLink>
-        <EuiLink
-          className={styles.link}
-          external={false}
-          target="_blank"
-          href={getStartedLink('https://redis.com/try-free')}
-          onClick={onFreeDatabaseClick}
-          data-testid="get-started-link"
-        >
-          <EuiButton
-            fill
-            size="s"
-            color="secondary"
-            className={styles.btnLink}
-          >
-            Get Started For Free
-          </EuiButton>
-        </EuiLink>
+        <OAuthSsoHandlerDialog>
+          {(ssoCloudHandlerClick) => (
+            <EuiLink
+              className={styles.link}
+              external={false}
+              target="_blank"
+              href={getStartedLink('https://redis.com/try-free')}
+              onClick={(e) => {
+                ssoCloudHandlerClick(
+                  e,
+                  type === 'browser' ? SignInDialogSource.BrowserSearch : SignInDialogSource[module]
+                )
+                onFreeDatabaseClick()
+              }}
+              data-testid="get-started-link"
+            >
+              <EuiButton
+                fill
+                size="s"
+                color="secondary"
+                className={styles.btnLink}
+              >
+                Get Started For Free
+              </EuiButton>
+            </EuiLink>
+          )}
+        </OAuthSsoHandlerDialog>
       </div>
     </div>
   )

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

@@ -1,7 +1,9 @@
 import React from 'react'
-import { fireEvent, render } from 'uiSrc/utils/test-utils'
+import { cloneDeep } from 'lodash'
+import { cleanup, fireEvent, mockedStore, render } from 'uiSrc/utils/test-utils'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
-import { IpcInvokeEvent } from 'uiSrc/electron/constants'
+import { CloudAuthSocial, IpcInvokeEvent } from 'uiSrc/electron/constants'
+import { signIn } from 'uiSrc/slices/oauth/cloud'
 import OAuthSocial from './OAuthSocial'
 
 jest.mock('uiSrc/telemetry', () => ({
@@ -16,8 +18,12 @@ jest.mock('uiSrc/slices/oauth/cloud', () => ({
   }),
 }))
 
+let store: typeof mockedStore
 const invokeMock = jest.fn()
 beforeEach(() => {
+  cleanup()
+  store = cloneDeep(mockedStore)
+  store.clearActions()
   window.app = {
     ipc: { invoke: invokeMock }
   }
@@ -45,7 +51,11 @@ describe('OAuthSocial', () => {
     })
 
     expect(invokeMock).toBeCalledTimes(1)
-    expect(invokeMock).toBeCalledWith(IpcInvokeEvent.getAppVersion)
+    expect(invokeMock).toBeCalledWith(IpcInvokeEvent.cloudOauth, CloudAuthSocial.Google)
+
+    const expectedActions = [signIn()]
+    expect(store.getActions()).toEqual(expectedActions)
+
     invokeMock.mockRestore();
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
@@ -67,9 +77,13 @@ describe('OAuthSocial', () => {
     })
 
     expect(invokeMock).toBeCalledTimes(1)
-    expect(invokeMock).toBeCalledWith(IpcInvokeEvent.getAppVersion)
-    invokeMock.mockRestore();
+    expect(invokeMock).toBeCalledWith(IpcInvokeEvent.cloudOauth, CloudAuthSocial.Github)
+    invokeMock.mockRestore()
 
+    const expectedActions = [signIn()]
+    expect(store.getActions()).toEqual(expectedActions)
+
+    invokeMock.mockRestore();
     (sendEventTelemetry as jest.Mock).mockRestore()
   })
 })

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

@@ -1,11 +1,11 @@
 import React from 'react'
 import { EuiButtonIcon } from '@elastic/eui'
 import cx from 'classnames'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { ipcAuthGithub, ipcAuthGoogle } from 'uiSrc/electron/utils'
 import { TelemetryEvent, sendEventTelemetry } from 'uiSrc/telemetry'
-import { oauthCloudSignInDialogSelector } from 'uiSrc/slices/oauth/cloud'
+import { oauthCloudSignInDialogSelector, signIn } from 'uiSrc/slices/oauth/cloud'
 
 import { ReactComponent as GoogleIcon } from 'uiSrc/assets/img/oauth/google.svg'
 import { ReactComponent as GithubIcon } from 'uiSrc/assets/img/oauth/github.svg'
@@ -14,6 +14,7 @@ import styles from './styles.module.scss'
 
 const OAuthSocial = () => {
   const { source = '' } = useSelector(oauthCloudSignInDialogSelector)
+  const dispatch = useDispatch()
 
   const sendTelemetry = (accountOption: string) => sendEventTelemetry({
     event: TelemetryEvent.CLOUD_SIGN_IN_SOCIAL_ACCOUNT_SELECTED,
@@ -31,6 +32,7 @@ const OAuthSocial = () => {
       onClick: () => {
         sendTelemetry('Google')
         ipcAuthGoogle()
+        dispatch(signIn())
       },
     },
     {
@@ -40,6 +42,7 @@ const OAuthSocial = () => {
       onClick: () => {
         sendTelemetry('GitHub')
         ipcAuthGithub()
+        dispatch(signIn())
       },
     }
   ]