INT-1898 Use custom notifs for auth flow (#826)

intuita-webview/src/codemodList/CodemodNodeRenderer/Codemod.tsx

@@ -231,10 +231,12 @@ const Codemod = ({
 			toast.update(progress.codemodHash, {
 				progress: value,
 				render: `Processed ${progress.processedFileNumber} / ${progress.totalFileNumber} files`,
+				containerId: 'codemodListToastContainer',
 			});
 		} else {
 			toast(`Processed 0 / ${progress.totalFileNumber} files`, {
 				toastId: progress.codemodHash,
+				containerId: 'codemodListToastContainer',
 				progress: 0,
 			});
 		}

intuita-webview/src/main/App.css

@@ -54,3 +54,9 @@
 .vscode-panel-view {
 	padding: 0px;
 }
+
+.toasterComponent {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}

intuita-webview/src/main/App.tsx

@@ -1,6 +1,8 @@
+import { toast } from 'react-toastify';
 import { useEffect, useRef, useState } from 'react';
 
 import {
+	VSCodeButton,
 	VSCodePanels,
 	VSCodePanelTab,
 	VSCodePanelView,
@@ -18,6 +20,17 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useTheme } from '../shared/Snippet/useTheme';
 
+const toastContainerProps = {
+	pauseOnHover: false,
+	pauseOnFocusLoss: false,
+	hideProgressBar: false,
+	closeOnClick: false,
+	closeButton: false,
+	draggable: false,
+	autoClose: false as const,
+	enableMultiContainer: true,
+};
+
 declare global {
 	interface Window {
 		mainWebviewViewProps: MainWebviewViewProps;
@@ -76,6 +89,41 @@ function App() {
 		};
 	}, []);
 
+	useEffect(() => {
+		if (mainWebviewViewProps.toaster === null) {
+			return;
+		}
+
+		const { content, ...toasterProps } = mainWebviewViewProps.toaster;
+		let componentToRender = null;
+
+		if (toasterProps.toastId === 'handleSignedInUser') {
+			componentToRender = (
+				<div className="toasterComponent">
+					<p>{content}</p>
+					<VSCodeButton
+						appearance="secondary"
+						onClick={() => {
+							toast.dismiss(toasterProps.toastId);
+							vscode.postMessage({
+								kind: 'webview.main.signOut',
+							});
+						}}
+					>
+						Sign out
+					</VSCodeButton>
+				</div>
+			);
+		}
+		toast(componentToRender ?? content, toasterProps);
+
+		// remove the current toaster props from Redux state
+		vscode.postMessage({
+			kind: 'webview.main.setToaster',
+			value: null,
+		});
+	}, [mainWebviewViewProps.toaster]);
+
 	const handlePanelTabClick = (id: ActiveTabId) => {
 		vscode.postMessage({
 			kind: 'webview.main.setActiveTabId',
@@ -126,16 +174,10 @@ function App() {
 						/>
 					) : null}
 					<ToastContainer
+						{...toastContainerProps}
 						containerId="codemodListToastContainer"
-						pauseOnHover={false}
-						pauseOnFocusLoss={false}
-						autoClose={false}
-						hideProgressBar={false}
 						position="bottom-right"
-						closeOnClick={false}
-						closeButton={false}
 						theme={theme === 'vs-light' ? 'light' : 'dark'}
-						draggable={false}
 					/>
 				</VSCodePanelView>
 				<VSCodePanelView
@@ -166,6 +208,12 @@ function App() {
 					) : null}
 				</VSCodePanelView>
 			</VSCodePanels>
+			<ToastContainer
+				{...toastContainerProps}
+				containerId="primarySidebarToastContainer"
+				theme={theme === 'vs-light' ? 'light' : 'dark'}
+				position="top-right"
+			/>
 		</main>
 	);
 }

src/components/webview/MainProvider.ts

@@ -328,6 +328,14 @@ export class MainViewProvider implements WebviewViewProvider {
 			);
 		}
 
+		if (message.kind === 'webview.main.setToaster') {
+			this.__store.dispatch(actions.setToaster(message.value));
+		}
+
+		if (message.kind === 'webview.main.signOut') {
+			commands.executeCommand('intuita.signOut');
+		}
+
 		if (message.kind === 'webview.global.flipSelectedExplorerNode') {
 			this.__store.dispatch(
 				actions.flipSelectedExplorerNode([

src/components/webview/webviewEvents.ts

@@ -128,6 +128,18 @@ export type WebviewResponse =
 			kind: 'webview.main.setActiveTabId';
 			activeTabId: ActiveTabId;
 	  }>
+	| Readonly<{
+			kind: 'webview.main.setToaster';
+			value: {
+				containerId: string;
+				toastId: string;
+				content: string;
+				autoClose: number;
+			} | null;
+	  }>
+	| Readonly<{
+			kind: 'webview.main.signOut';
+	  }>
 	| Readonly<{
 			kind:
 				| 'webview.main.setCodemodRunsPanelGroupSettings'

src/data/slice.ts

@@ -90,6 +90,7 @@ export const getInitialState = (): RootState => {
 		collapsedExplorerNodes: {},
 		reviewedExplorerNodes: {},
 		focusedExplorerNodes: {},
+		toaster: null,
 	};
 };
 
@@ -664,6 +665,9 @@ const rootSlice = createSlice({
 		) {
 			state.sourceControl = action.payload;
 		},
+		setToaster(state, action: PayloadAction<RootState['toaster']>) {
+			state.toaster = action.payload;
+		},
 		collapseResultsPanel(state, action: PayloadAction<boolean>) {
 			state.codemodRunsTab.resultsCollapsed = action.payload;
 		},

src/extension.ts

@@ -217,25 +217,35 @@ export async function activate(context: vscode.ExtensionContext) {
 	);
 
 	context.subscriptions.push(
-		vscode.commands.registerCommand(
-			'intuita.handleSignedInUser',
-			async () => {
-				const decision = await vscode.window.showInformationMessage(
-					'You are already signed-in.',
-					'Do you want to sign out?',
-				);
+		vscode.commands.registerCommand('intuita.signOut', () => {
+			userService.unlinkUserIntuitaAccount();
+			vscode.commands.executeCommand(
+				'setContext',
+				'intuita.signedIn',
+				false,
+			);
+			store.dispatch(
+				actions.setToaster({
+					toastId: 'signOut',
+					containerId: 'primarySidebarToastContainer',
+					content: 'Signed out',
+					autoClose: 3000,
+				}),
+			);
+		}),
+	);
 
-				if (decision === 'Do you want to sign out?') {
-					userService.unlinkUserIntuitaAccount();
-					vscode.commands.executeCommand(
-						'setContext',
-						'intuita.signedIn',
-						false,
-					);
-					vscode.window.showInformationMessage('You are signed out.');
-				}
-			},
-		),
+	context.subscriptions.push(
+		vscode.commands.registerCommand('intuita.handleSignedInUser', () => {
+			store.dispatch(
+				actions.setToaster({
+					toastId: 'handleSignedInUser',
+					containerId: 'primarySidebarToastContainer',
+					content: 'Already signed-in',
+					autoClose: 5000,
+				}),
+			);
+		}),
 	);
 
 	context.subscriptions.push(
@@ -1140,8 +1150,13 @@ export async function activate(context: vscode.ExtensionContext) {
 							'intuita.signedIn',
 							true,
 						);
-						vscode.window.showInformationMessage(
-							'You are successfully signed in.',
+						store.dispatch(
+							actions.setToaster({
+								toastId: 'signIn',
+								containerId: 'primarySidebarToastContainer',
+								content: 'Successfully signed in',
+								autoClose: 3000,
+							}),
 						);
 					} else {
 						await routeUserToStudioToAuthenticate();

src/persistedState/codecs.ts

@@ -147,6 +147,18 @@ export const persistedStateCodecNew = buildTypeCodec({
 			kind: 'IDLENESS',
 		},
 	),
+	toaster: withFallback(
+		t.union([
+			buildTypeCodec({
+				containerId: t.string,
+				toastId: t.string,
+				content: t.string,
+				autoClose: t.number,
+			}),
+			t.null,
+		]),
+		null,
+	),
 	caseHashJobHashes: withFallback(t.readonlyArray(t.string), []),
 	caseHashInProgress: withFallback(t.union([caseHashCodec, t.null]), null),
 	applySelectedInProgress: withFallback(t.boolean, false),

src/selectors/selectMainWebviewViewProps.ts

@@ -15,6 +15,7 @@ export const selectMainWebviewViewProps = (
 	if (state.activeTabId === 'codemods') {
 		return {
 			activeTabId: state.activeTabId,
+			toaster: state.toaster,
 			searchPhrase: state.codemodDiscoveryView.searchPhrase,
 			autocompleteItems,
 			codemodTree: selectCodemodTree(
@@ -39,6 +40,7 @@ export const selectMainWebviewViewProps = (
 	if (state.activeTabId === 'codemodRuns') {
 		return {
 			activeTabId: state.activeTabId,
+			toaster: state.toaster,
 			applySelectedInProgress: state.applySelectedInProgress,
 			codemodRunsTree:
 				rootUri !== null
@@ -61,6 +63,7 @@ export const selectMainWebviewViewProps = (
 
 		return {
 			activeTabId: state.activeTabId,
+			toaster: state.toaster,
 			title: sourceControlTabProps?.title ?? '',
 			body: sourceControlTabProps?.body ?? '',
 			loading: sourceControlTabProps?.loading ?? false,
@@ -69,6 +72,7 @@ export const selectMainWebviewViewProps = (
 
 	return {
 		activeTabId: state.activeTabId,
+		toaster: state.toaster,
 	};
 };