INT-1345 INT-1889 replace codemod progress bar with a notif + show # …

…of processed / total files in codemod runs tab (#819)

cspell.json

@@ -71,6 +71,8 @@
 		"tiptap",
 		"lowlight",
 		"lowlights",
-		"unsanitize"
+		"unsanitize",
+		"toastify",
+		"Toastify"
 	]
 }

intuita-webview/package.json

@@ -21,6 +21,7 @@
 		"react-dom": "^18.2.0",
 		"react-markdown": "^8.0.7",
 		"react-resizable-panels": "^0.0.51",
+		"react-toastify": "^9.1.3",
 		"tippy.js": "^6.3.7",
 		"typescript": "^4.9.5"
 	},

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

@@ -1,15 +1,16 @@
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import styles from './style.module.css';
 import cn from 'classnames';
 import IntuitaPopover from '../../shared/IntuitaPopover';
 import { vscode } from '../../shared/utilities/vscode';
 import areEqual from 'fast-deep-equal';
 import { CodemodNode } from '../../../../src/selectors/selectCodemodTree';
 import { CodemodHash } from '../../shared/types';
-import { InfiniteProgress } from '../TreeView/InfiniteProgress';
-import { ProgressBar } from '../TreeView/ProgressBar';
 import ActionButton from '../TreeView/ActionButton';
 import { Progress } from '../useProgressBar';
+import { useTheme } from '../../shared/Snippet/useTheme';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 type CodemodItemNode = CodemodNode & { kind: 'CODEMOD' };
 
@@ -23,18 +24,6 @@ type Props = Omit<CodemodItemNode, 'name' | 'kind'> &
 		argumentsExpanded: boolean;
 	}>;
 
-const renderProgressBar = (progress: Progress | null) => {
-	if (progress === null) {
-		return null;
-	}
-
-	if (progress.progressKind === 'infinite') {
-		return <InfiniteProgress />;
-	}
-
-	return <ProgressBar percent={progress.value} />;
-};
-
 const renderActionButtons = (
 	hashDigest: CodemodItemNode['hashDigest'],
 	isPrivate: CodemodItemNode['isPrivate'],
@@ -207,7 +196,7 @@ const Codemod = ({
 	argumentsExpanded,
 }: Props) => {
 	const [hovering, setHovering] = useState(false);
-
+	const theme = useTheme();
 	const areButtonsVisible = focused || hovering;
 
 	const popoverText =
@@ -217,6 +206,40 @@ const Codemod = ({
 			? 'Codemod maintained by Intuita'
 			: 'Codemod maintained by the community';
 
+	useEffect(() => {
+		if (progress === null) {
+			return;
+		}
+
+		if (
+			progress.totalFileNumber > 0 &&
+			progress.processedFileNumber === progress.totalFileNumber
+		) {
+			toast.done(progress.codemodHash);
+		}
+
+		if (progress.progressKind === 'infinite') {
+			return;
+		}
+
+		const value =
+			progress.totalFileNumber > 0
+				? progress.processedFileNumber / progress.totalFileNumber
+				: 0;
+
+		if (toast.isActive(progress.codemodHash)) {
+			toast.update(progress.codemodHash, {
+				progress: value,
+				render: `Processed ${progress.processedFileNumber} / ${progress.totalFileNumber} files`,
+			});
+		} else {
+			toast(`Processed 0 / ${progress.totalFileNumber} files`, {
+				toastId: progress.codemodHash,
+				progress: 0,
+			});
+		}
+	}, [progress, theme]);
+
 	return (
 		<>
 			<div
@@ -271,7 +294,6 @@ const Codemod = ({
 					</div>
 				</span>
 			</div>
-			{renderProgressBar(progress)}
 		</>
 	);
 };

intuita-webview/src/codemodList/useProgressBar.tsx

@@ -4,7 +4,8 @@ import { CodemodHash, WebviewMessage } from '../shared/types';
 export type Progress = Readonly<{
 	codemodHash: CodemodHash;
 	progressKind: 'finite' | 'infinite';
-	value: number;
+	totalFileNumber: number;
+	processedFileNumber: number;
 }>;
 
 export const useProgressBar = (): Progress | null => {
@@ -19,7 +20,8 @@ export const useProgressBar = (): Progress | null => {
 				setCodemodExecutionProgress({
 					codemodHash: message.codemodHash,
 					progressKind: message.progressKind,
-					value: message.value,
+					totalFileNumber: message.totalFileNumber,
+					processedFileNumber: message.processedFileNumber,
 				});
 			}
 

intuita-webview/src/fileExplorer/App.tsx

@@ -14,6 +14,7 @@ import {
 import { CaseHash } from '../../../src/cases/types';
 import { MainWebviewViewProps } from '../../../src/selectors/selectMainWebviewViewProps';
 import LoadingProgress from '../jobDiffView/Components/LoadingProgress';
+import { useProgressBar } from '../codemodList/useProgressBar';
 
 const setSearchPhrase = (caseHashDigest: CaseHash, searchPhrase: string) => {
 	vscode.postMessage({
@@ -53,7 +54,7 @@ export const App = (
 		},
 ) => {
 	const { changeExplorerTree, codemodExecutionInProgress } = props;
-
+	const progress = useProgressBar();
 	const caseHash = changeExplorerTree?.caseHash ?? null;
 
 	const handleFocus = useCallback(
@@ -81,7 +82,13 @@ export const App = (
 
 	if ((props.changeExplorerTree?.caseHash ?? null) === null) {
 		return codemodExecutionInProgress ? (
-			<LoadingProgress description="Preparing a tree view..." />
+			<LoadingProgress
+				description={
+					progress === null
+						? 'Processing files...'
+						: `Processed ${progress.processedFileNumber} / ${progress.totalFileNumber}`
+				}
+			/>
 		) : (
 			<p className={styles.welcomeMessage}>
 				Choose a Codemod from Codemod Runs to explore its changes!

intuita-webview/src/main/App.tsx

@@ -14,6 +14,9 @@ import { vscode } from '../shared/utilities/vscode';
 import { ActiveTabId } from '../../../src/persistedState/codecs';
 import type { MainWebviewViewProps } from '../../../src/selectors/selectMainWebviewViewProps';
 import CreateIssue from '../CreateIssue';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { useTheme } from '../shared/Snippet/useTheme';
 
 declare global {
 	interface Window {
@@ -23,6 +26,7 @@ declare global {
 
 function App() {
 	const ref = useRef(null);
+	const theme = useTheme();
 	const [screenWidth, setScreenWidth] = useState<number | null>(null);
 	const [mainWebviewViewProps, setMainWebviewViewProps] = useState(
 		window.mainWebviewViewProps,
@@ -121,6 +125,18 @@ function App() {
 							{...mainWebviewViewProps}
 						/>
 					) : null}
+					<ToastContainer
+						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
 					className="vscode-panel-view h-full w-full"

src/components/engineService.ts

@@ -551,7 +551,8 @@ export class EngineService {
 			kind: MessageKind.showProgress,
 			codemodHash,
 			progressKind: 'infinite',
-			value: 0,
+			totalFileNumber: 0,
+			processedFileNumber: 0,
 		});
 
 		const storageUri = Uri.joinPath(
@@ -667,20 +668,12 @@ export class EngineService {
 			}
 
 			if (message.kind === 'progress') {
-				const value =
-					message.totalFileNumber > 0
-						? Math.round(
-								(message.processedFileNumber /
-									message.totalFileNumber) *
-									100,
-						  )
-						: 0;
-
 				this.#messageBus.publish({
 					kind: MessageKind.showProgress,
 					codemodHash: this.#execution.codemodHash ?? null,
 					progressKind: 'finite',
-					value,
+					totalFileNumber: message.totalFileNumber,
+					processedFileNumber: message.processedFileNumber,
 				});
 				this.#execution.totalFileCount = message.totalFileNumber;
 				return;

src/components/messageBus.ts

@@ -152,7 +152,8 @@ export type Message =
 			kind: MessageKind.showProgress;
 			codemodHash: CodemodHash | null;
 			progressKind: 'finite' | 'infinite';
-			value: number;
+			totalFileNumber: number;
+			processedFileNumber: number;
 	  }>
 	| Readonly<{
 			kind: MessageKind.mainWebviewViewVisibilityChange;

src/components/webview/MainProvider.ts

@@ -178,7 +178,8 @@ export class MainViewProvider implements WebviewViewProvider {
 				kind: 'webview.global.setCodemodExecutionProgress',
 				codemodHash: message.codemodHash,
 				progressKind: message.progressKind,
-				value: message.value,
+				totalFileNumber: message.totalFileNumber,
+				processedFileNumber: message.processedFileNumber,
 			});
 		});
 

src/components/webview/webviewEvents.ts

@@ -43,7 +43,8 @@ export type WebviewMessage =
 			kind: 'webview.global.setCodemodExecutionProgress';
 			codemodHash: CodemodHash;
 			progressKind: 'finite' | 'infinite';
-			value: number;
+			totalFileNumber: number;
+			processedFileNumber: number;
 	  }>
 	| Readonly<{
 			kind: 'webview.global.codemodExecutionHalted';