INT-1898 Use custom notifs for auth flow

intuita-webview/src/codemodList/App.tsx

@@ -116,13 +116,7 @@ export const App = memo(
 						<PanelResizeHandle className="resize-handle" />
 						<SectionHeader
 							title="Private Registry"
-							commands={[
-								{
-									icon: 'clear-all',
-									title: 'Clear all',
-									command: 'intuita.clearPrivateCodemods',
-								},
-							]}
+							commands={[]}
 							collapsed={props.privateRegistryCollapsed}
 							onClick={(event) => {
 								event.preventDefault();

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

@@ -80,6 +80,13 @@ const renderActionButtons = (
 			});
 		};
 
+		const handleRemovePrivateCodemod = () => {
+			vscode.postMessage({
+				kind: 'webview.main.removePrivateCodemod',
+				hashDigest,
+			});
+		};
+
 		return (
 			<>
 				<ActionButton
@@ -108,6 +115,15 @@ const renderActionButtons = (
 				>
 					<span className={cn('codicon', 'codicon-link')} />
 				</ActionButton>
+				{isPrivate && (
+					<ActionButton
+						id={`${hashDigest}-deleteButton`}
+						content={'Remove from Private Registry'}
+						onClick={handleRemovePrivateCodemod}
+					>
+						<span className={cn('codicon', 'codicon-trash')} />
+					</ActionButton>
+				)}
 			</>
 		);
 	}
@@ -231,10 +247,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,21 @@ 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.main.removePrivateCodemod') {
+			commands.executeCommand(
+				'intuita.removePrivateCodemod',
+				message.hashDigest,
+			);
+		}
+
 		if (message.kind === 'webview.global.flipSelectedExplorerNode') {
 			this.__store.dispatch(
 				actions.flipSelectedExplorerNode([

src/components/webview/webviewEvents.ts

@@ -128,6 +128,22 @@ 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.removePrivateCodemod';
+			hashDigest: CodemodNodeHashDigest;
+	  }>
+	| 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(
@@ -850,27 +860,48 @@ export async function activate(context: vscode.ExtensionContext) {
 	);
 
 	context.subscriptions.push(
-		vscode.commands.registerCommand('intuita.clearPrivateCodemods', () => {
-			const state = store.getState();
-			const hashDigests = state.privateCodemods.ids as CodemodHash[];
-			hashDigests.forEach((hashDigest) => {
-				const codemodPath = join(homedir(), '.intuita', hashDigest);
-				if (existsSync(codemodPath)) {
-					rmSync(codemodPath, { recursive: true, force: true });
-				}
-			});
+		vscode.commands.registerCommand(
+			'intuita.removePrivateCodemod',
+			(arg0: unknown) => {
+				try {
+					const hashDigest: string | null =
+						typeof arg0 === 'string' ? arg0 : null;
 
-			const codemodNamesPath = join(
-				homedir(),
-				'.intuita',
-				'privateCodemodNames.json',
-			);
-			if (existsSync(codemodNamesPath)) {
-				rmSync(codemodNamesPath);
-			}
+					if (hashDigest === null) {
+						throw new Error(
+							'Did not pass the hashDigest into the command.',
+						);
+					}
+					const codemodPath = join(homedir(), '.intuita', hashDigest);
+					if (existsSync(codemodPath)) {
+						rmSync(codemodPath, { recursive: true, force: true });
+					}
 
-			store.dispatch(actions.removePrivateCodemods(hashDigests));
-		}),
+					const codemodNamesPath = join(
+						homedir(),
+						'.intuita',
+						'privateCodemodNames.json',
+					);
+					if (existsSync(codemodNamesPath)) {
+						rmSync(codemodNamesPath);
+					}
+
+					store.dispatch(
+						actions.removePrivateCodemods([
+							hashDigest as CodemodHash,
+						]),
+					);
+				} catch (e) {
+					const message = e instanceof Error ? e.message : String(e);
+					vscode.window.showErrorMessage(message);
+
+					vscodeTelemetry.sendError({
+						kind: 'failedToExecuteCommand',
+						commandName: 'intuita.removePrivateCodemod',
+					});
+				}
+			},
+		),
 	);
 
 	context.subscriptions.push(
@@ -1140,8 +1171,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),