Kevin/0.6.0

codify.json

@@ -5,6 +5,7 @@
       "default": "../codify-homebrew-plugin/src/index.ts"
     }
   },
+  { "type":  "terraform" },
   {
     "type": "homebrew",
     "taps": [

src/ui/components/default-component.tsx

@@ -10,7 +10,7 @@
 import { ImportResultComponent } from './import/import-result.js';
 import { ImportParametersForm } from './import/index.js';
 import { PlanComponent } from './plan/plan.js';
 import { ProgressDisplay, ProgressState } from './progress/progress-display.js';
 
 const spinnerEmitter = new EventEmitter();
 
@@ -97,7 +97,7 @@
   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/progress-display.tsx → src/ui/components/progress/ProgressDisplay.tsx

@@ -3,7 +3,7 @@ import { Box } from 'ink';
 import EventEmitter from 'node:events';
 import React from 'react';
 
-import Spinner from './spinner.js';
+import Spinner from './Spinner.js';
 
 export enum ProgressStatus {
   IN_PROGRESS,

src/ui/components/progress/progress-subscriber.ts

@@ -0,0 +1,113 @@
+// Subscribes to the global ctx event bus and translates
+import { ctx, Event, ProcessName, SubProcessName } from '../../../events/context.js';
+import { ProgressStatus } from './ProgressDisplay.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'
+}
+
+enum ProgressStatus {
+  IN_PROGRESS,
+  FINISHED,
+}
+
+export interface ProgressState {
+  name: string,
+  label: string;
+  status: ProgressStatus;
+  subProgresses: Array<{
+    name: string,
+    label: string;
+    status: ProgressStatus;
+  }> | null;
+}
+
+export class DefaultReporterProgressSubscriber {
+  private listeners: Array<(newState: ProgressState | null, eventType: Event) => void> = [];
+  private state: ProgressState | null = null;
+
+  constructor() {
+    ctx.on(Event.PROCESS_START, (name) => this.onProcessStartEvent(name))
+    ctx.on(Event.PROCESS_FINISH, (name) => this.onProcessFinishEvent(name))
+    ctx.on(Event.SUB_PROCESS_START, (name, additionalName) => this.onSubprocessStartEvent(name, additionalName));
+    ctx.on(Event.SUB_PROCESS_FINISH, (name, additionalName) => this.onSubprocessFinishEvent(name, additionalName))
+  }
+
+  onUpdate(fn: (newState: ProgressState | null, eventType: Event) => void) {
+    this.listeners.push(fn);
+  }
+
+  private flushUpdate(eventType: Event) {
+    this.state = structuredClone(this.state);
+    this.listeners.forEach((listener) => listener(this.state, eventType));
+  }
+
+  private onProcessStartEvent(name: ProcessName): void {
+    const label = ProgressLabelMapping[name];
+
+    // log(`${label} started`)
+    this.state = {
+      label: label + '...',
+        name,
+        status: ProgressStatus.IN_PROGRESS,
+      subProgresses: [],
+    }
+    this.flushUpdate(Event.PROCESS_START);
+  }
+
+  private onProcessFinishEvent(name: ProcessName): void {
+    const label = ProgressLabelMapping[name];
+
+    // log(`${label} finished successfully`)
+    this.state!.status = ProgressStatus.FINISHED;
+    this.flushUpdate(Event.PROCESS_FINISH)
+  }
+
+  private onSubprocessStartEvent(name: SubProcessName, additionalName?: string): void {
+    const label = ProgressLabelMapping[name] + (additionalName
+        ? ' ' + additionalName
+        : ''
+    );
+
+    // log(`${label} started`)
+
+    this.state?.subProgresses?.push({
+      label,
+      name: name + additionalName,
+      status: ProgressStatus.IN_PROGRESS,
+    })
+
+    this.flushUpdate(Event.SUB_PROCESS_START);
+  }
+
+  private onSubprocessFinishEvent(name: SubProcessName, additionalName?: string): void {
+    const label = ProgressLabelMapping[name] + (additionalName
+        ? ' ' + additionalName
+        : ''
+    );
+
+    const subProgress = this.state
+      ?.subProgresses
+      ?.find((p) => p.name === name + additionalName);
+
+    if (!subProgress) {
+      return;
+    }
+
+    subProgress.status = ProgressStatus.FINISHED;
+
+    this.flushUpdate(Event.SUB_PROCESS_FINISH);
+
+    // log(`${label} finished successfully`)
+  }
+}

src/ui/components/sections/CompletionSection.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/sections/SudoSection.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>
+
+}

src/ui/reporters/default-reporter.tsx

@@ -9,7 +9,7 @@
 import { ImportResult, RequiredParameters, UserSuppliedParameters } from '../../orchestrators/import.js';
 import { SudoUtils } from '../../utils/sudo.js';
 import { DefaultComponent } from '../components/default-component.js';
 import { ProgressState, ProgressStatus } from '../components/progress/progress-display.js';
 import { DisplayPlanStateTransition, RenderEvent, RenderState, Reporter } from './reporter.js';
 
 const ProgressLabelMapping = {
@@ -144,7 +144,6 @@
 
     this.log(`${label} finished successfully`)
     this.renderEmitter.emit(RenderEvent.PROGRESS_UPDATE, this.progressState);
-
   }
 
   private onSubprocessStartEvent(name: SubProcessName, additionalName?: string): void {
@@ -171,7 +170,7 @@
 
     const subProgress = this.progressState
       ?.subProgresses
       ?.find((p) => p.name === name + additionalName);
 
     if (!subProgress) {
       return;