feat: WIP refactored default renderer

Author: kevinwang5658

codify.json

@@ -13,7 +13,8 @@
       "homebrew/services"
     ],
     "formulae": [
-      "asciinema"
+      "asciinema",
+      "abduco"
     ],
     "casks": [
       "firefox"

src/ui/components/default-component.tsx

@@ -97,7 +97,7 @@ export function DefaultComponent(props: {
   return <Box flexDirection="column">
     {
       ([RenderState.APPLY_COMPLETE, RenderState.APPLYING, RenderState.GENERATING_PLAN].includes(state)) && progressState && !hideProgress && (
-        <ProgressDisplay emitter={spinnerEmitter} eventType="data" progress={progressState}/>
+        <ProgressDisplay />
       )
     }
     {

src/ui/components/plan/plan.tsx

@@ -8,17 +8,17 @@ import { ResourceText } from './resource-text.js';
 export function PlanComponent(props: {
   plan: Plan,
 }) {
-  const filteredPlan = props.plan.filterNoopResources();
+  const { plan } = props;
 
   return <Box flexDirection="column">
     <Box borderColor="green" borderStyle="round">
       <Text>Codify Plan</Text>
     </Box>
-    <Text>Path: {props.plan.project.path}</Text>
+    <Text>Path: {plan.project.path}</Text>
     <Text>The following actions will be performed: </Text>
     <Text> </Text>
     <Box flexDirection="column" marginLeft={1}>{
-        filteredPlan.resources.map((p, idx) =>
+        plan.resources.map((p, idx) =>
           <Box flexDirection="column" key={idx} marginBottom={1}>
             <ResourceText plan={p}/>
             <Text>{prettyFormatResourcePlan(p)}</Text>

src/ui/components/progress/ProgressDisplay.tsx

@@ -0,0 +1,152 @@
+import { StatusMessage } from '@inkjs/ui';
+import { Box } from 'ink';
+import EventEmitter from 'node:events';
+import React, { useLayoutEffect, useState } from 'react';
+
+import Spinner from './spinner.js';
+import { ctx, Event, ProcessName, SubProcessName } from '../../../events/context.js';
+import chalk from 'chalk';
+import { createUseStore } from '../../hooks/store.js';
+
+const ProgressLabelMapping = {
+  [ProcessName.APPLY]: 'Codify apply',
+  [ProcessName.PLAN]: 'Codify plan',
+  [ProcessName.DESTROY]: 'Codify destroy',
+  [ProcessName.IMPORT]: 'Codify import',
+  [SubProcessName.APPLYING_RESOURCE]: 'Applying resource',
+  [SubProcessName.GENERATE_PLAN]: 'Refresh states and generating plan',
+  [SubProcessName.INITIALIZE_PLUGINS]: 'Initializing plugins',
+  [SubProcessName.PARSE]: 'Parsing configs',
+  [SubProcessName.VALIDATE]: 'Validating configs',
+  [SubProcessName.GET_REQUIRED_PARAMETERS]: 'Getting required parameters',
+  [SubProcessName.IMPORT_RESOURCE]: 'Importing resource'
+}
+
+export enum ProgressStatus {
+  IN_PROGRESS,
+  FINISHED,
+}
+
+export interface ProgressState {
+  name: string,
+  label: string;
+  status: ProgressStatus;
+  subProgresses: Array<{
+    name: string,
+    label: string;
+    status: ProgressStatus;
+  }> | null;
+}
+
+/**
+ * This component directly subscribes to the global event bus to listen for progress updates. That is why there are no
+ * props.
+ * Note: New process_start events will completely wipe out the old ones.
+ */
+export function ProgressDisplay() {
+  const [progressState, setProgressState] = useState({} as ProgressState | undefined);
+
+  useLayoutEffect(() => {
+    ctx.on(Event.PROCESS_START, (name) => onProcessStartEvent(name))
+    ctx.on(Event.PROCESS_FINISH, (name) => onProcessFinishEvent(name))
+    ctx.on(Event.SUB_PROCESS_START, (name, additionalName) => onSubprocessStartEvent(name, additionalName));
+    ctx.on(Event.SUB_PROCESS_FINISH, (name, additionalName) => onSubprocessFinishEvent(name, additionalName))
+  }, []);
+
+  const onProcessStartEvent = (name: ProcessName) => {
+    const label = ProgressLabelMapping[name];
+
+    log(`${label} started`)
+    setProgressState({
+      label: label + '...',
+      name,
+      status: ProgressStatus.IN_PROGRESS,
+      subProgresses: [],
+    });
+  }
+
+  const onProcessFinishEvent = (name: ProcessName) => {
+    const label = ProgressLabelMapping[name];
+
+    log(`${label} finished successfully`)
+    setProgressState((state) => {
+      state!.status = ProgressStatus.FINISHED;
+      return structuredClone(state);
+    })
+  }
+
+  const onSubprocessStartEvent = (name: SubProcessName, additionalName?: string) => {
+    const label = ProgressLabelMapping[name] + (additionalName
+        ? ' ' + additionalName
+        : ''
+    );
+
+    log(`${label} started`)
+
+    setProgressState((state) => {
+      state?.subProgresses?.push({
+        label,
+        name: name + additionalName,
+        status: ProgressStatus.IN_PROGRESS,
+      });
+
+      return structuredClone(state);
+    })
+  }
+
+  const onSubprocessFinishEvent = (name: SubProcessName, additionalName?: string) =>  {
+    const label = ProgressLabelMapping[name] + (additionalName
+        ? ' ' + additionalName
+        : ''
+    );
+
+    log(`${label} finished successfully`)
+    setProgressState((state) => {
+      const subProgress = state
+        ?.subProgresses
+        ?.find((p) => p.name === name + additionalName);
+
+      if (!subProgress) {
+        return state;
+      }
+
+      subProgress.status = ProgressStatus.FINISHED;
+
+      return structuredClone(state);
+    })
+  }
+
+  const log = (log: unknown) => {
+    console.log(chalk.cyan(log));
+  }
+
+  if (!progressState) {
+    return <Box></Box>
+  }
+
+  const { label, status, subProgresses } = progressState;
+  return <Box flexDirection="column">
+    {
+      status === ProgressStatus.IN_PROGRESS
+        ? <Spinner type="circleHalves" eventEmitter={ctx.emitter} eventType={Event.OUTPUT} label={label}/>
+        : <StatusMessage variant="success">{label}</StatusMessage>
+    }
+    <Box flexDirection="column" marginLeft={2}>
+      <SubProgressDisplay subProgresses={subProgresses} />
+    </Box>
+  </Box>
+}
+
+export function SubProgressDisplay(
+  props: { subProgresses: ProgressState['subProgresses'] }
+) {
+  const { subProgresses } = props;
+
+  return <>{
+    subProgresses && subProgresses.map((s, idx) =>
+      s.status === ProgressStatus.IN_PROGRESS
+        ? <Spinner eventEmitter={ctx.emitter} eventType={Event.OUTPUT} key={idx} label={s.label} type="circleHalves"/>
+        : <StatusMessage key={idx} variant="success">{s.label}</StatusMessage>
+    )
+  }</>
+}

src/ui/components/progress/spinner.tsx src/ui/components/progress/Spinner.tsxsrc/ui/components/progress/spinner.tsx renamed to src/ui/components/progress/Spinner.tsx

@@ -0,0 +1,12 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+
+export function CompletionSection() {
+  return (
+    <Box flexDirection="column">
+      <Text> </Text>
+      <Text>🎉 Finished applying 🎉</Text>
+      <Text>Open a new terminal or source '.zshrc' for the new changes to be reflected</Text>
+    </Box>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Box } from 'ink';
+import { RenderEvent } from '../../reporters/reporter.js';
+import React from 'react';
+import { PasswordInput } from '@inkjs/ui';
+
+export function SudoSection() {
+  return <Box flexDirection="column">
+    <Text>Password:</Text>
+    {/* Use sudoAttemptCount as a hack to reset password input between attempts */}
+    <PasswordInput key={sudoAttemptCount} onSubmit={(password) => {
+      emitter.emit(RenderEvent.PROMPT_SUDO_RESULT, password);
+    }}/>
+  </Box>
+
+}