RI-6932: create btn open oauth modal (#262)

* when add database called from the database list - open the oauth social dialog - add new vscode actions
* close modal when successfully create db and X button on the toast notification is clicked

Author: dantovska

src/extension.ts

@@ -88,6 +88,9 @@ export async function activate(context: vscode.ExtensionContext) {
         viewId: ViewId.AddDatabase,
         handleMessage: (message) => handleMessage(message),
         message: args,
+      }).postMessage({
+        action: 'OpenOAuthSsoDialog',
+        data: { source: args?.source, ssoFlow: args?.ssoFlow },
       })
     }),
 

src/utils/handleMessage.ts

@@ -43,7 +43,7 @@ export const handleMessage = async (message: any = {}) => {
         await setUIStorageField('ssoFlow', message.data?.ssoFlow)
       }
 
-      vscode.commands.executeCommand('RedisForVSCode.addDatabase')
+      vscode.commands.executeCommand('RedisForVSCode.addDatabase', message.data)
       break
     case 'CloseAddDatabase':
       console.debug('RedisForVSCode.addDatabaseClose, ', message.data)

src/webviews/src/constants/vscode/vscode.ts

@@ -32,6 +32,7 @@ export enum VscodeMessageAction {
   OAuthCallback = 'OAuthCallback',
   RefreshDatabases = 'RefreshDatabases',
   OpenExternalUrl = 'OpenExternalUrl',
+  OpenOAuthSsoDialog = 'OpenOAuthSsoDialog',
 }
 
 export enum VscodeStateItem {

src/webviews/src/index.tsx

@@ -7,6 +7,7 @@ import {
   fetchEditedDatabase,
   fetchCerts,
   useDatabasesStore,
+  useOAuthStore,
 } from 'uiSrc/store'
 import { Config } from 'uiSrc/modules'
 import { AppRoutes } from 'uiSrc/Routes'
@@ -88,6 +89,14 @@ document.addEventListener('DOMContentLoaded', () => {
       case VscodeMessageAction.OAuthCallback:
         processOauthCallback(message.data as CloudAuthResponse)
         break
+      case VscodeMessageAction.OpenOAuthSsoDialog:
+        const { source, ssoFlow } = message.data ?? {}
+        if (ssoFlow && source) {
+          const state = useOAuthStore.getState()
+          state.setSSOFlow(ssoFlow)
+          state.setSocialDialogState(source)
+        }
+        break
       default:
         break
     }

src/webviews/src/interfaces/vscode/api.ts

@@ -1,4 +1,4 @@
-import { AllKeyTypes, KeyTypes, OAuthSocialAction, OAuthStrategy, SelectedKeyActionType, VscodeMessageAction } from 'uiSrc/constants'
+import { AllKeyTypes, KeyTypes, OAuthSocialAction, OAuthSocialSource, OAuthStrategy, SelectedKeyActionType, VscodeMessageAction } from 'uiSrc/constants'
 import { Database } from 'uiSrc/store'
 import { AppInfoStore, GetAppSettingsResponse } from 'uiSrc/store/hooks/use-app-info-store/interface'
 import { CloudAuthResponse } from 'uiSrc/modules/oauth/interfaces'
@@ -63,9 +63,11 @@ export interface DatabaseAction {
   action: VscodeMessageAction.RefreshDatabases
   | VscodeMessageAction.CloseAddDatabase
   | VscodeMessageAction.OpenAddDatabase
+  | VscodeMessageAction.OpenOAuthSsoDialog
   data?: {
     database?: Database
     ssoFlow?: OAuthSocialAction
+    source?: OAuthSocialSource
   }
 }
 export interface CliAction {

src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.spec.tsx

@@ -1,38 +1,93 @@
 import React from 'react'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/utils'
 import * as utils from 'uiSrc/utils'
-import { OAuthSocialSource } from 'uiSrc/constants'
+import { OAuthSocialAction, OAuthSocialSource, VscodeMessageAction } from 'uiSrc/constants'
 import { initialOAuthState, useOAuthStore } from 'uiSrc/store'
-import { cleanup, fireEvent, render } from 'testSrc/helpers'
+import { vscodeApi } from 'uiSrc/services'
+import { cleanup, fireEvent, render, screen } from 'testSrc/helpers'
 import OAuthCreateFreeDb from './OAuthCreateFreeDb'
+import OAuthSsoDialog from '../oauth-sso-dialog'
 
 vi.spyOn(utils, 'sendEventTelemetry')
+vi.spyOn(vscodeApi, 'postMessage')
 
 beforeEach(() => {
   useOAuthStore.setState({
     ...initialOAuthState,
-    source: 'source',
+    source: null,
+    ssoFlow: undefined,
   })
   cleanup()
   vi.resetAllMocks()
 })
 
-describe('OAuthConnectFreeDb', () => {
+describe('OAuthCreateFreeDb', () => {
   it('should render if there is a free cloud db', () => {
-    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.ListOfDatabases}/>)
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.AddDbForm}/>)
     expect(queryByTestId('create-free-db-btn')).toBeInTheDocument()
   })
 
   it('should send telemetry after click on connect btn', async () => {
-    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.ListOfDatabases} />)
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.DatabasesList} />)
 
     fireEvent.click(queryByTestId('create-free-db-btn') as HTMLButtonElement)
 
     expect(sendEventTelemetry).toBeCalledWith({
       event: TelemetryEvent.CLOUD_FREE_DATABASE_CLICKED,
       eventData: {
-        source: OAuthSocialSource.ListOfDatabases,
+        source: OAuthSocialSource.DatabasesList,
       },
     })
   })
+
+  it('should set the propper state variables when action is triggered with with valid ssoFlow and source', () => {
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.DatabasesList} compressed={true}/>)
+    render(<OAuthSsoDialog />)
+
+    const compressedCreateBtn = queryByTestId('create-free-db-btn')
+    expect(compressedCreateBtn).toBeInTheDocument()
+
+    fireEvent.click(compressedCreateBtn as HTMLButtonElement)
+
+    expect(vscodeApi.postMessage).toBeCalledWith({
+      action: VscodeMessageAction.OpenAddDatabase,
+      data: {
+        ssoFlow: OAuthSocialAction.Create,
+        source: OAuthSocialSource.DatabasesList,
+      },
+    })
+  })
+
+  it('should set the propper state variables when action is triggered with source null', () => {
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={null} compressed={true}/>)
+    render(<OAuthSsoDialog />)
+
+    const compressedCreateBtn = queryByTestId('create-free-db-btn')
+    expect(compressedCreateBtn).toBeInTheDocument()
+
+    fireEvent.click(compressedCreateBtn as HTMLButtonElement)
+
+    expect(vscodeApi.postMessage).toBeCalledWith({
+      action: VscodeMessageAction.OpenAddDatabase,
+      data: {
+        ssoFlow: OAuthSocialAction.Create,
+        source: null,
+      },
+    })
+  })
+
+  it('should open auth sso dialog when non compressed button is clicked', () => {
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.DatabasesList} compressed={false}/>)
+
+    // component is initialized in the document, but the state is not updated yet to show the dialog
+    render(<OAuthSsoDialog />)
+    expect(screen.queryByTestId('social-oauth-dialog')).not.toBeInTheDocument()
+
+    const regularCreateBtn = queryByTestId('create-free-db-btn')
+    expect(regularCreateBtn).toBeInTheDocument()
+
+    fireEvent.click(regularCreateBtn as HTMLButtonElement)
+
+    expect(screen.queryByTestId('social-oauth-dialog')).toBeInTheDocument()
+  })
 })

src/webviews/src/modules/oauth/oauth-create-free-db/OAuthCreateFreeDb.tsx

@@ -32,6 +32,7 @@ const OAuthCreateFreeDb = ({ source, compressed }: Props) => {
         action: VscodeMessageAction.OpenAddDatabase,
         data: {
           ssoFlow: OAuthSocialAction.Create,
+          source,
         },
       })
 

src/webviews/src/modules/oauth/oauth-jobs/OAuthJobs.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { get } from 'lodash'
 import { useShallow } from 'zustand/react/shallow'
 
-import { CloudJobStatus, CloudJobName, ApiStatusCode, StorageItem, CustomErrorCodes, CloudJobStep, VscodeMessageAction } from 'uiSrc/constants'
+import { CloudJobStatus, CloudJobName, ApiStatusCode, StorageItem, CustomErrorCodes, CloudJobStep, VscodeMessageAction, OAuthSocialSource } from 'uiSrc/constants'
 import { parseCustomError, TelemetryEvent, sendEventTelemetry, getApiErrorMessage } from 'uiSrc/utils'
 import { showInfinityToast, removeInfinityToast, showErrorInfinityToast } from 'uiSrc/utils/notifications/toasts'
 import { localStorageService, vscodeApi } from 'uiSrc/services'
@@ -21,6 +21,7 @@ const OAuthJobs = () => {
     setSSOFlow,
     setJob,
     setSocialDialogState,
+    source,
   } = useOAuthStore(useShallow((state) => ({
     status: state.job?.status,
     jobName: state.job?.name,
@@ -31,6 +32,7 @@ const OAuthJobs = () => {
     setSSOFlow: state.setSSOFlow,
     setJob: state.setJob,
     setSocialDialogState: state.setSocialDialogState,
+    source: state.source,
   })))
 
   const onConnect = () => {
@@ -39,6 +41,14 @@ const OAuthJobs = () => {
     })
   }
 
+  const closeAddDatabasePanel = () => {
+    if (source === OAuthSocialSource.DatabasesList) {
+      vscodeApi.postMessage({
+        action: VscodeMessageAction.CloseAddDatabase,
+      })
+    }
+  }
+
   useEffect(() => {
     switch (status) {
       case CloudJobStatus.Running:
@@ -49,7 +59,10 @@ const OAuthJobs = () => {
 
       case CloudJobStatus.Finished:
 
-        showInfinityToast(INFINITE_MESSAGES.SUCCESS_CREATE_DB(jobName, onConnect)?.Inner)
+        showInfinityToast(INFINITE_MESSAGES.SUCCESS_CREATE_DB(
+          jobName, onConnect)?.Inner,
+        { onClose: closeAddDatabasePanel },
+        )
 
         setJob({
           id: '',