add the sso dialog to the route components so it could be opened as a panel; create an action to modify the state to open the dialog;

Author: dantovska

src/constants.ts

@@ -6,6 +6,7 @@ export enum ViewId {
   EditDatabase = 'ri-edit-database',
   Welcome = 'ri-welcome',
   Eula = 'ri-eula',
+  OAuthSsoDialog = 'ri-oauth-sso-dialog',
 }
 
 export const MAX_TITLE_KEY_LENGTH = 30

src/extension.ts

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-mutable-exports */
 import * as vscode from 'vscode'
 import * as dotenv from 'dotenv'
+import { WebviewOptions } from 'vscode'
 import * as path from 'path'
 import { WebviewPanel } from './Webview'
 import { startBackend, getBackendGracefulShutdown } from './server/bootstrapBackend'
@@ -214,8 +215,13 @@ export async function activate(context: vscode.ExtensionContext) {
       sidebarProvider.view?.webview.postMessage({ action: 'RefreshTree' })
     }),
 
-    vscode.commands.registerCommand('RedisForVSCode.OpenOAuthSsoDialog', (args) => {
-      vscode.window.showInformationMessage('This is a modal', { modal: true })
+    vscode.commands.registerCommand('RedisForVSCode.openOAuthSsoDialog', (args) => {
+      WebviewPanel.getInstance({
+        context,
+        route: 'main/oauth_sso_dialog',
+        title: 'Redis Cloud account',
+        viewId: ViewId.OAuthSsoDialog,
+      }).postMessage({ action: 'OpenOAuthSsoDialog', data: args })
     }),
   )
 

src/utils/handleMessage.ts

@@ -85,7 +85,7 @@ export const handleMessage = async (message: any = {}) => {
       break
 
     case 'OpenOAuthSsoDialog':
-      vscode.commands.executeCommand('RedisForVSCode.OpenOAuthSsoDialog', message.data)
+      vscode.commands.executeCommand('RedisForVSCode.openOAuthSsoDialog', message.data)
       break
 
     default:

src/webviews/src/Routes.tsx

@@ -19,6 +19,8 @@ import {
   WelcomePage,
 } from 'uiSrc/pages'
 
+import { OAuthSsoDialog } from './modules/oauth'
+
 const rootEl = document.getElementById('root')
 
 export const AppRoutes = () => {
@@ -39,6 +41,7 @@ export const AppRoutes = () => {
         <Route path="settings" element={<SettingsPage />} />
         <Route path="eula" element={<EulaPage />} />
         <Route path="welcome" element={<WelcomePage />} />
+        <Route path="oauth_sso_dialog" element={<OAuthSsoDialog />} />
       </Route>
       <Route path="*" element={<NotFoundPage />} />
     </Routes>

src/webviews/src/index.tsx

@@ -7,11 +7,12 @@ import {
   fetchEditedDatabase,
   fetchCerts,
   useDatabasesStore,
+  useOAuthStore,
 } from 'uiSrc/store'
 import { Config } from 'uiSrc/modules'
 import { AppRoutes } from 'uiSrc/Routes'
 import { PostMessage, SelectKeyAction, SetDatabaseAction } from 'uiSrc/interfaces'
-import { VscodeMessageAction } from 'uiSrc/constants'
+import { OAuthSocialSource, VscodeMessageAction } from 'uiSrc/constants'
 import { migrateLocalStorageData } from 'uiSrc/services'
 import { useAppInfoStore } from './store/hooks/use-app-info-store/useAppInfoStore'
 import {
@@ -88,6 +89,10 @@ document.addEventListener('DOMContentLoaded', () => {
       case VscodeMessageAction.OAuthCallback:
         processOauthCallback(message.data as CloudAuthResponse)
         break
+      case VscodeMessageAction.OpenOAuthSsoDialog:
+        useOAuthStore.getState().setSSOFlow(message.data?.ssoFlow)
+        useOAuthStore.getState().setSocialDialogState(message.data?.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'
@@ -135,7 +135,8 @@ export interface CloseEulaAction {
 export interface OpenOAuthSsoDialogAction {
   action: VscodeMessageAction.OpenOAuthSsoDialog
   data: {
-    ssoFlow: OAuthSocialAction
+    ssoFlow: OAuthSocialAction,
+    source: OAuthSocialSource,
   }
 }
 

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

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

src/webviews/src/modules/oauth/oauth-sso-dialog/OAuthSsoDialog.tsx

@@ -32,6 +32,9 @@ const OAuthSsoDialog = () => {
       },
     })
     setSocialDialogState(null)
+
+    // TODO [DA]: dispose the dummy panel if the dialog was opened from it,
+    // and not from add db page panel
   }, [ssoFlow])
 
   if (!isOpenSocialDialog || !ssoFlow) {