From f526f9bec8180593f6e1463cb809ea9dc27d3d72 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Tue, 19 Sep 2023 15:06:04 +0100 Subject: [PATCH] INT-1345 INT-1889 replace codemod progress bar with a notif + show # of processed / total files in codemod runs tab (#819) --- cspell.json | 4 +- intuita-webview/package.json | 1 + intuita-webview/pnpm-lock.yaml | 19 +++++++ .../CodemodNodeRenderer/Codemod.tsx | 56 +++++++++++++------ .../src/codemodList/TreeView/ProgressBar.tsx | 18 ------ .../src/codemodList/useProgressBar.tsx | 6 +- intuita-webview/src/fileExplorer/App.tsx | 11 +++- intuita-webview/src/main/App.tsx | 16 ++++++ src/components/engineService.ts | 15 ++--- src/components/messageBus.ts | 3 +- src/components/webview/MainProvider.ts | 3 +- src/components/webview/webviewEvents.ts | 3 +- 12 files changed, 101 insertions(+), 54 deletions(-) delete mode 100644 intuita-webview/src/codemodList/TreeView/ProgressBar.tsx diff --git a/cspell.json b/cspell.json index 7b590d206..21cde3c30 100644 --- a/cspell.json +++ b/cspell.json @@ -71,6 +71,8 @@ "tiptap", "lowlight", "lowlights", - "unsanitize" + "unsanitize", + "toastify", + "Toastify" ] } diff --git a/intuita-webview/package.json b/intuita-webview/package.json index f7849a64a..2c44f0585 100644 --- a/intuita-webview/package.json +++ b/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" }, diff --git a/intuita-webview/pnpm-lock.yaml b/intuita-webview/pnpm-lock.yaml index aed608e92..38151238f 100644 --- a/intuita-webview/pnpm-lock.yaml +++ b/intuita-webview/pnpm-lock.yaml @@ -59,6 +59,9 @@ dependencies: react-resizable-panels: specifier: ^0.0.51 version: 0.0.51(react-dom@18.2.0)(react@18.2.0) + react-toastify: + specifier: ^9.1.3 + version: 9.1.3(react-dom@18.2.0)(react@18.2.0) tippy.js: specifier: ^6.3.7 version: 6.3.7 @@ -4515,6 +4518,11 @@ packages: wrap-ansi: 7.0.0 dev: true + /clsx@1.2.1: + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} + engines: {node: '>=6'} + dev: false + /co@4.6.0: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} @@ -10030,6 +10038,17 @@ packages: - webpack-plugin-serve dev: true + /react-toastify@9.1.3(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + clsx: 1.2.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} diff --git a/intuita-webview/src/codemodList/CodemodNodeRenderer/Codemod.tsx b/intuita-webview/src/codemodList/CodemodNodeRenderer/Codemod.tsx index fb7e9bf9c..037f8e07e 100644 --- a/intuita-webview/src/codemodList/CodemodNodeRenderer/Codemod.tsx +++ b/intuita-webview/src/codemodList/CodemodNodeRenderer/Codemod.tsx @@ -1,4 +1,4 @@ -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'; @@ -6,10 +6,11 @@ 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 & argumentsExpanded: boolean; }>; -const renderProgressBar = (progress: Progress | null) => { - if (progress === null) { - return null; - } - - if (progress.progressKind === 'infinite') { - return ; - } - - return ; -}; - 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 ( <>
- {renderProgressBar(progress)} ); }; diff --git a/intuita-webview/src/codemodList/TreeView/ProgressBar.tsx b/intuita-webview/src/codemodList/TreeView/ProgressBar.tsx deleted file mode 100644 index 794b22009..000000000 --- a/intuita-webview/src/codemodList/TreeView/ProgressBar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Line } from 'rc-progress'; - -export const ProgressBar = ( - props: Readonly<{ - percent: number; - }>, -) => ( -
- -
-); diff --git a/intuita-webview/src/codemodList/useProgressBar.tsx b/intuita-webview/src/codemodList/useProgressBar.tsx index b7f58da22..cf595ebc1 100644 --- a/intuita-webview/src/codemodList/useProgressBar.tsx +++ b/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, }); } diff --git a/intuita-webview/src/fileExplorer/App.tsx b/intuita-webview/src/fileExplorer/App.tsx index 8964231ed..bc68edcb3 100644 --- a/intuita-webview/src/fileExplorer/App.tsx +++ b/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 ? ( - + ) : (

Choose a Codemod from Codemod Runs to explore its changes! diff --git a/intuita-webview/src/main/App.tsx b/intuita-webview/src/main/App.tsx index 79cba907d..3fdd80bfc 100644 --- a/intuita-webview/src/main/App.tsx +++ b/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(null); const [mainWebviewViewProps, setMainWebviewViewProps] = useState( window.mainWebviewViewProps, @@ -121,6 +125,18 @@ function App() { {...mainWebviewViewProps} /> ) : null} + 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; diff --git a/src/components/messageBus.ts b/src/components/messageBus.ts index 3a9661c17..721693ef8 100644 --- a/src/components/messageBus.ts +++ b/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; diff --git a/src/components/webview/MainProvider.ts b/src/components/webview/MainProvider.ts index 3eff1bf32..d5750ee26 100644 --- a/src/components/webview/MainProvider.ts +++ b/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, }); }); diff --git a/src/components/webview/webviewEvents.ts b/src/components/webview/webviewEvents.ts index cef16a7d7..7e7f50b61 100644 --- a/src/components/webview/webviewEvents.ts +++ b/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';