feat: Updated all flows to use the new atom system for the default renderer

Author: kevinwang5658

src/ui/components/default-component.tsx

@@ -20,101 +20,27 @@ export function DefaultComponent(props: {
   emitter: EventEmitter
 }) {
   const { emitter } = props;
-
-  const [state, setState] = useState(RenderState.GENERATING_PLAN);
-  // const [progressState, setProgressState] = useState(null as ProgressState | null);
-  const [hideProgress, setHideProgress] = useState(false);
-  const [plan, setPlan] = useState(null as Plan | null);
-  const [showSudoPrompt, setShowPromptSudo] = useState(false);
-  const [requiredParametersForImport, setRequiredParametersForImport] = useState<RequiredParameters | null>(null);
-  const [showImportParametersPrompt, setShowImportParametersPrompt] = useState(false);
-  const [importResult, setImportResult] = useState<ImportResult | null>(null);
-  const [sudoAttemptCount, setSudoAttemptCount] = useState(0);
-  const [confirmationMessage, setConfirmationMessage] = useState('');
   const [disableSudoPrompt, setDisableSudoPrompt] = useState(false);
 
   const [{ status: renderStatus, data: renderData }] = useAtom(store.renderState);
-  const [progressState] = useAtom(store.progressState);
+  // const [progressState] = useAtom(store.progressState);
 
   // Use layoutEffect runs before the first render, whereas useEffect runs after
   useLayoutEffect(() => {
-    emitter.on(RenderEvent.STATE_TRANSITION, (obj) => {
-      switch (obj.nextState) {
-        case RenderState.DISPLAY_PLAN: {
-          // setProgressState(null);
-          setPlan(obj.plan);
-          break;
-        }
-
-        case RenderState.DISPLAY_IMPORT_RESULT: {
-          // setProgressState(null);
-          setImportResult(obj.importResult);
-          break;
-        }
-
-        case RenderState.PROMPT_CONFIRMATION: {
-          setConfirmationMessage(obj.message)
-          break;
-        }
-      }
-
-      setState(obj.nextState);
-    })
-
     emitter.on(RenderEvent.LOG, (log: string) => {
       console.log(chalk.cyan(log));
       spinnerEmitter.emit('data');
     });
-
-    emitter.on(RenderEvent.PROGRESS_UPDATE, (state: ProgressState) => {
-      // setProgressState(structuredClone(state));
-    });
-
-    emitter.on(RenderEvent.PROMPT_SUDO, (attemptCount) => {
-      setShowPromptSudo(true);
-      setHideProgress(true)
-      setSudoAttemptCount(attemptCount ?? 0);
-    });
-
-    emitter.on(RenderEvent.PROMPT_SUDO_GRANTED, () => {
-      setShowPromptSudo(false);
-      setHideProgress(false)
-      setSudoAttemptCount(0);
-    });
-
-    emitter.on(RenderEvent.PROMPT_SUDO_ERROR, () => {
-      setShowPromptSudo(false);
-      setSudoAttemptCount(0);
-    });
-
-    emitter.on(RenderEvent.PROMPT_IMPORT_PARAMETERS, (requiredParameters) => {
-      setHideProgress(true);
-      setRequiredParametersForImport(requiredParameters);
-      setShowImportParametersPrompt(true);
-    })
-
-    emitter.on(RenderEvent.PROMPT_IMPORT_PARAMETERS_RESULT, () => {
-      setHideProgress(false);
-      setRequiredParametersForImport(null);
-      setShowImportParametersPrompt(false);
-    })
 
     emitter.on(RenderEvent.DISABLE_SUDO_PROMPT, (isDisabled) => {
       setDisableSudoPrompt(isDisabled);
     })
   }, []);
 
-  console.log(renderStatus);
-  // console.log(renderData);
-  //
-  // console.log(renderStatus);
-  // console.log(progressState);
-  // console.log(renderData);
-
   return <Box flexDirection="column">
     {
-      renderStatus === RenderStatus.PROGRESS && progressState && !hideProgress && (
-        <ProgressDisplay emitter={spinnerEmitter} eventType="data" progress={progressState}/>
+      renderStatus === RenderStatus.PROGRESS && (
+        <ProgressDisplay emitter={spinnerEmitter} eventType="data"/>
       )
     }
     {
@@ -154,15 +80,15 @@ export function DefaultComponent(props: {
       )
     }
     {
-      showImportParametersPrompt && requiredParametersForImport && (
+      renderStatus === RenderStatus.IMPORT_PROMPT && (
         <ImportParametersForm onSubmit={(result) => {
           emitter.emit(RenderEvent.PROMPT_IMPORT_PARAMETERS_RESULT, result)
-        }} requiredParameters={requiredParametersForImport}/>
+        }} requiredParameters={renderData as RequiredParameters}/>
       )
     }
     {
-      state === RenderState.DISPLAY_IMPORT_RESULT && importResult && (
-        <Static items={[importResult]}>{
+      renderStatus === RenderStatus.DISPLAY_IMPORT_RESULT && (
+        <Static items={[renderData as ImportResult]}>{
           (importResult, idx) => <ImportResultComponent importResult={importResult} key={idx} />
         }</Static>
       )

src/ui/components/progress/progress-display.tsx

@@ -4,6 +4,8 @@ import EventEmitter from 'node:events';
 import React from 'react';
 
 import Spinner from './spinner.js';
+import { store } from '../../store/index.js';
+import { useAtom } from 'jotai';
 
 export enum ProgressStatus {
   IN_PROGRESS,
@@ -23,12 +25,17 @@ export interface ProgressState {
 
 export function ProgressDisplay(
   props: {
-    progress: ProgressState,
+    // progress: ProgressState,
     emitter: EventEmitter,
     eventType: string,
   }
 ) {
-  const { label, status, subProgresses } = props.progress;
+  const [progress] = useAtom(store.progressState);
+  if (!progress) {
+    return;
+  }
+
+  const { label, status, subProgresses } = progress;
 
   return <Box flexDirection="column">
     {

src/ui/reporters/default-reporter.tsx

@@ -49,21 +49,16 @@ export class DefaultReporter implements Reporter {
       return new Map();
     }
 
-    this.renderEmitter.emit(RenderEvent.PROMPT_IMPORT_PARAMETERS, requiredParameters);
+    const userInput = await this.updateStateAndAwaitEvent<object>(() => {
+      this.updateRenderState(RenderStatus.IMPORT_PROMPT, requiredParameters);
+    }, RenderEvent.PROMPT_IMPORT_PARAMETERS_RESULT);
 
-    return new Promise((resolve) => {
-      this.renderEmitter.once(RenderEvent.PROMPT_IMPORT_PARAMETERS_RESULT, (result: object) => {
-        const userSuppliedParameters = this.extractUserSuppliedParametersFromResult(result);
-        resolve(userSuppliedParameters);
-      });
-    })
+    this.updateRenderState(RenderStatus.PROGRESS);
+    return this.extractUserSuppliedParametersFromResult(userInput);
   }
 
   displayImportResult(importResult: ImportResult): void {
-    this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-      nextState: RenderState.DISPLAY_IMPORT_RESULT,
-      importResult,
-    })
+    this.updateRenderState(RenderStatus.DISPLAY_IMPORT_RESULT, importResult);
   }
 
   async promptSudo(pluginName: string, data: SudoRequestData, secureMode: boolean): Promise<SudoRequestResponseData> {
@@ -92,10 +87,6 @@ export class DefaultReporter implements Reporter {
     )
 
     if (continueApply) {
-      // this.renderEmitter.emit(RenderEvent.STATE_TRANSITION, {
-      //   nextState: RenderState.APPLYING,
-      // });
-
       this.updateRenderState(RenderStatus.PROGRESS)
       this.log(`${message} -> "Yes"`)
     }
@@ -132,7 +123,6 @@ export class DefaultReporter implements Reporter {
 
     this.progressState!.status = ProgressStatus.FINISHED;
     store.set(store.progressState, structuredClone(this.progressState));
-    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private onSubprocessStartEvent(name: SubProcessName, additionalName?: string): void {
@@ -145,7 +135,6 @@ export class DefaultReporter implements Reporter {
       status: ProgressStatus.IN_PROGRESS,
     });
     store.set(store.progressState, structuredClone(this.progressState));
-    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private onSubprocessFinishEvent(name: SubProcessName, additionalName?: string): void {
@@ -163,7 +152,6 @@ export class DefaultReporter implements Reporter {
 
     this.log(`${label} finished successfully`)
     store.set(store.progressState, structuredClone(this.progressState));
-    // this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
   }
 
   private async getUserPassword(): Promise<string> {