RI-6932: create btn open oauth modal

src/extension.ts

@@ -81,14 +81,21 @@ export async function activate(context: vscode.ExtensionContext) {
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.addDatabase', (args) => {
-      WebviewPanel.getInstance({
+      const panel = WebviewPanel.getInstance({
         context,
         route: 'main/add_database',
         title: vscode.l10n.t('Redis for VS Code - Add Database connection'),
         viewId: ViewId.AddDatabase,
         handleMessage: (message) => handleMessage(message),
         message: args,
       })
+
+      if (args?.ssoFlow && args?.source) {
+        panel.postMessage({
+          action: 'OpenOAuthSsoDialog',
+          data: { source: args?.source, ssoFlow: args?.ssoFlow },
+        })
+      }
     }),
 
     vscode.commands.registerCommand('RedisForVSCode.openSettings', (args) => {

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,12 +1,14 @@
 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 { vscodeApi } from 'uiSrc/services'
 import { cleanup, fireEvent, render } from 'testSrc/helpers'
 import OAuthCreateFreeDb from './OAuthCreateFreeDb'
 
 vi.spyOn(utils, 'sendEventTelemetry')
+vi.spyOn(vscodeApi, 'postMessage')
 
 beforeEach(() => {
   useOAuthStore.setState({
@@ -35,4 +37,21 @@ describe('OAuthConnectFreeDb', () => {
       },
     })
   })
+
+  it('should open page and oauth sso modal compressed button is clicked', () => {
+    const { queryByTestId } = render(<OAuthCreateFreeDb source={OAuthSocialSource.DatabasesList} compressed={true}/>)
+
+    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,
+      },
+    })
+  })
 })

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: '',