feature: Added improvements to multi-select and completed the init flow

Author: kevinwang5658

src/orchestrators/initialize.ts

@@ -1,5 +1,11 @@
-import { ProcessName, ctx } from '../events/context.js';
+import chalk from 'chalk';
+import path from 'node:path';
+
+import { ResourceConfig } from '../entities/resource-config.js';
+import { ProcessName, SubProcessName, ctx } from '../events/context.js';
 import { Reporter } from '../ui/reporters/reporter.js';
+import { FileUtils } from '../utils/file.js';
+import { resolvePathWithVariables, untildify } from '../utils/index.js';
 import { PluginInitOrchestrator } from './initialize-plugins.js';
 
 export const InitializeOrchestrator = {
@@ -13,6 +19,7 @@ export const InitializeOrchestrator = {
 
     const { pluginManager, typeIdsToDependenciesMap } = await PluginInitOrchestrator.run({}, reporter);
 
+    ctx.subprocessStarted(SubProcessName.IMPORT_RESOURCE)
     const importResults = await Promise.all([...typeIdsToDependenciesMap.keys()].map(async (typeId) => {
       try {
         return await pluginManager.importResource({
@@ -23,15 +30,62 @@ export const InitializeOrchestrator = {
         return null;
       }
     }))
+    ctx.subprocessFinished(SubProcessName.IMPORT_RESOURCE)
 
     const flattenedResults = importResults.filter(Boolean).flatMap(p => p?.result).filter(Boolean)
 
     const userSelectedTypes = await reporter.promptInitResultSelection([...new Set(flattenedResults.map((r) => r!.core.type))])
+    ctx.log('Resource types were chosen to be imported.')
 
-    ctx.processFinished(ProcessName.INIT);
+    const locationToSave = await this.promptSaveLocation(reporter);
+    ctx.log(`Save results to ${locationToSave}`)
+    await reporter.hide();
+
+    const resourcesRaw = flattenedResults.filter((r) => userSelectedTypes.includes(r.core.type))
+      .map((r) => ResourceConfig.fromJson(r!))
+      .map((r) => r.raw);
+
+    await FileUtils.writeFile(locationToSave, JSON.stringify(resourcesRaw, null, 2));
+    ctx.log('File successfully saved');
 
-    console.log(JSON.stringify(flattenedResults, null, 2));
+    await reporter.displayMessage(`
+🎉🎉 Codify successfully initialized. 🎉🎉   
+The imported configs were written to: ${locationToSave}
+
+Use ${chalk.bgMagenta.bold(' codify plan ')} to compute changes and ${chalk.bgMagenta.bold(' codify apply ')} to apply them.
+For more information visit: https://docs.codifycli.com.
+
+Enjoy!
+    `)
+
+    ctx.processFinished(ProcessName.INIT);
   },
 
+  async promptSaveLocation(reporter: Reporter): Promise<string> {
+    let locationToSave = '';
+    let input = '';
+    let isValidSaveLocation = false;
+    let error = false;
+
+    while (!isValidSaveLocation) {
+      input = (await reporter.promptInput(
+        `Where to save the new Codify configs? ${chalk.grey.dim('(leave blank for ~/codify.json)')}`,
+        error ? `Invalid location: ${input} already exists` : undefined)
+      )
+      input = input ? input : '~/codify.json';
+
+      locationToSave = path.resolve(untildify(resolvePathWithVariables(input)));
+
+      try {
+        isValidSaveLocation = !(await FileUtils.fileExists(locationToSave));
+        error = !isValidSaveLocation;
+      } catch {
+        isValidSaveLocation = false;
+        error = true;
+      }
+    }
+
+    return locationToSave;
+  }
 
 };

src/ui/components/default-component.test.tsx

@@ -1,24 +1,26 @@
+import chalk from 'chalk';
 import { cleanup, render } from 'ink-testing-library';
 import { EventEmitter } from 'node:events';
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { DefaultReporter } from '../reporters/default-reporter.js';
 import { RenderStatus, store } from '../store/index.js';
 import { DefaultComponent } from './default-component.js';
 
 // Mock dependent components
-vi.mock('./progress/progress-display', () => ({
-  ProgressDisplay: () => <div>Mock Progress Display</div>
-}));
-vi.mock('./import/index', () => ({
-  ImportParametersForm: () => <div>Mock Import Parameters Form</div>
-}));
-vi.mock('./plan/plan', () => ({
-  PlanComponent: () => <div>Mock Plan Component</div>
-}));
-vi.mock('./import/import-result', () => ({
-  ImportResultComponent: () => <div>Mock Import Result Component</div>
-}));
+// vi.mock('./progress/progress-display', () => ({
+//   ProgressDisplay: () => <div>Mock Progress Display</div>
+// }));
+// vi.mock('./import/index', () => ({
+//   ImportParametersForm: () => <div>Mock Import Parameters Form</div>
+// }));
+// vi.mock('./plan/plan', () => ({
+//   PlanComponent: () => <div>Mock Plan Component</div>
+// }));
+// vi.mock('./import/import-result', () => ({
+//   ImportResultComponent: () => <div>Mock Import Result Component</div>
+// }));
 
 describe('DefaultComponent', () => {
   let emitter: EventEmitter;
@@ -33,6 +35,19 @@ describe('DefaultComponent', () => {
     emitter.removeAllListeners();
   });
 
+  it('Renders the init completed message', () => {
+    const reporter = new DefaultReporter();
+    const locationToSave = '~/codify.json'
+
+    reporter.displayMessage(`
+🎉🎉 Codify successfully initialized. 🎉🎉   
+The imported configs were written to: ${locationToSave}
+
+Use ${chalk.bgHex('#F0EAD6').bold(' codify plan ')} to futures compute changes and ${chalk.bgHex('#F0EAD6').bold(' codify apply ')} to apply them.
+Visit the documentation for more info: https://docs.codifycli.com.
+    `)
+  })
+
   it('renders progress display when renderStatus is PROGRESS', () => {
     // TODO: Doesn't work on github actions for some reason. Will investigate later 02-13-2025
     // store.set(store.renderState, { status: RenderStatus.PROGRESS });

src/ui/components/default-component.tsx

@@ -1,5 +1,5 @@
 import { Form, FormProps } from '@codifycli/ink-form';
-import { PasswordInput } from '@inkjs/ui';
+import { PasswordInput, TextInput } from '@inkjs/ui';
 import chalk from 'chalk';
 import { Box, Static, Text } from 'ink';
 import SelectInput from 'ink-select-input';
@@ -142,15 +142,24 @@ export function DefaultComponent(props: {
         <Box flexDirection='column'>
           <Text>Codify found the following supported resorces on your system.</Text>
           <Text> </Text>
-          <Text bold> Select which ones to import:</Text>
+          <Text bold> Select the resources to import:</Text>
           <MultiSelect
-            limit={9}
-            items={(renderData as string[]).map((o) => ({ label: o, value: o })).sort((a, b) => a.label.localeCompare(b.label))}
-            onSubmit={(result: unknown[]) => emitter.emit(RenderEvent.PROMPT_RESULT, result)}
             defaultSelected={(renderData as string[]).map((o) => ({ label: o, value: o }))}
+            items={(renderData as string[]).map((o) => ({ label: o, value: o })).sort((a, b) => a.label.localeCompare(b.label))}
+            limit={9}
+            onSubmit={(result: unknown[]) => emitter.emit(RenderEvent.PROMPT_RESULT, result.map((r: any) => r?.label))}
           />
         </Box>
       )
     }
+    {
+      renderStatus === RenderStatus.PROMPT_INPUT && (
+        <Box flexDirection='column'>
+          <Text bold>{renderData.prompt}</Text>
+          { renderData.error && (<Text color='red'>{renderData.error}</Text>) }
+          <TextInput placeholder='~/codify.json' onSubmit={(result) => emitter.emit(RenderEvent.PROMPT_RESULT, result)} />
+        </Box>
+      )
+    }
   </Box>
 }

src/ui/components/multi-select/MultiSelect.test.tsx

@@ -0,0 +1,21 @@
+import { render } from 'ink';
+import React from 'react';
+import { describe } from 'vitest';
+
+import { MultiSelect } from './MultiSelect.js';
+
+render(<MultiSelect defaultSelected={['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']} items={[
+  { label: 'Item 1', value: 'Item 1' },
+  { label: 'Item 2', value: 'Item 2' },
+  { label: 'Item 3', value: 'Item 3' },
+  { label: 'Item 4', value: 'Item 4' },
+  { label: 'Item 5', value: 'Item 5' },
+  { label: 'Item 6', value: 'Item 6' },
+  { label: 'Item 7', value: 'Item 7' },
+  { label: 'Item 8', value: 'Item 8' },
+  { label: 'Item 9', value: 'Item 9' },
+  { label: 'Item 10', value: 'Item 10' },
+  { label: 'Item 11', value: 'Item 11' },
+  { label: 'Item 12', value: 'Item 12' },
+  { label: 'Item 13', value: 'Item 13' },
+]} /> )

src/ui/components/multi-select/MultiSelect.tsx

@@ -1,4 +1,4 @@
-import { Box, useInput, useStdin } from 'ink';
+import { Box, Text, useInput, useStdin } from 'ink';
 import React, { useLayoutEffect, useState } from 'react';
 
 import Checkbox from './Checkbox.js';
@@ -14,12 +14,12 @@ interface Item {
 
 interface Props {
 	items: Array<Item>;
-	selected: Array<Item>;
-	defaultSelected: Array<string>;
-	defaultHighlightedIndex: number;
-	focus: boolean;
-	initialIndex: number;
-	limit: number
+	selected?: Array<Item>;
+	defaultSelected?: Array<Item>;
+	defaultHighlightedIndex?: number;
+	focus?: boolean;
+	initialIndex?: number;
+	limit?: number
 	onSelect?: (item: Item) => void;
 	onUnselect?: (item: Item) => void;
 	onSubmit?: (result: Item[]) => void;
@@ -88,18 +88,26 @@ export function MultiSelect(props: Props) {
 		if (key.return) {
 			onSubmit?.(newlySelected);
 		}
+
+		if (input === 'a') {
+			setSelected(items);
+		}
+
+		if (input === 'd') {
+			setSelected([]);
+		}
 	})
 
 	const hasLimit = () => {
 		const { limit, items } = props;
-		return items.length > limit;
+		return items.length > (limit ?? items.length);
 	}
 
 	const limit = () => {
 		const { limit, items } = props;
 
 		if (hasLimit()) {
-			return Math.min(limit, items.length);
+			return Math.min(limit ?? items.length, items.length);
 		}
 
 		return items.length;
@@ -122,19 +130,24 @@ export function MultiSelect(props: Props) {
 	const slicedItems = hasLimit() ? arrRotate(props.items, rotateIndex).slice(0, limit()) : props.items;
 
 	return (
-		<Box flexDirection="column">
-			{slicedItems.map((item, index) => {
-				const key = item.key ?? item.value;
-				const isHighlighted = index === highlightedIndex;
-
-				return (
-					<Box key={key}>
-						<Indicator isHighlighted={isHighlighted} />
-						<Checkbox isSelected={isSelected(item.value)} />
-						<Item {...item} isHighlighted={isHighlighted} />
-					</Box>
-				);
-			})}
+		<Box flexDirection='column'>
+			<Box flexDirection="column">
+				{slicedItems.map((item, index) => {
+					const key = item.key ?? item.value;
+					const isHighlighted = index === highlightedIndex;
+
+					return (
+						<Box key={key}>
+							<Indicator isHighlighted={isHighlighted} />
+							<Checkbox isSelected={isSelected(item.value)} />
+							<Item {...item} isHighlighted={isHighlighted} />
+						</Box>
+					);
+				})}
+			</Box>
+			<Text color='gray' dimColor>{'Use <space> to select and <return> to submit.'}</Text>
+			<Text color='gray' dimColor>{'Use <a> to select all items and <d> to de-select all items.'}</Text>
 		</Box>
+
 	);
 }

src/ui/reporters/default-reporter.tsx

@@ -56,11 +56,18 @@ export class DefaultReporter implements Reporter {
     )
   }
 
+  async promptInput(prompt: string, error?: string, validation?: () => Promise<boolean>, autoComplete?: (input: string) => string[]): Promise<string> {
+    return this.updateStateAndAwaitEvent<string>(
+      () => this.updateRenderState(RenderStatus.PROMPT_INPUT, { prompt, error }),
+      RenderEvent.PROMPT_RESULT,
+    )
+  }
+
   async displayProgress(): Promise<void> {
     this.updateRenderState(RenderStatus.PROGRESS);
   }
 
-  async hideProgress(): Promise<void> {
+  async hide(): Promise<void> {
     this.updateRenderState(RenderStatus.NOTHING);
   }
 

src/ui/reporters/reporter.ts

@@ -48,10 +48,12 @@ export interface Reporter {
 
   displayProgress(): Promise<void>;
 
-  hideProgress(): Promise<void>;
+  hide(): Promise<void>;
 
   promptInitResultSelection(availableTypes: string[]): Promise<string[]>;
 
+  promptInput(prompt: string, error?: string, validation?: () => Promise<boolean>, autoComplete?: (input: string) => string[]): Promise<string>;
+
   promptConfirmation(message: string): Promise<boolean>
 
   promptOptions(message: string, options: string[]): Promise<number>;

src/ui/store/index.ts

@@ -19,6 +19,7 @@ export enum RenderStatus {
   IMPORT_PROMPT_WARNING,
   PROMPT_CONFIRMATION,
   PROMPT_OPTIONS,
+  PROMPT_INPUT,
   SUDO_PROMPT,
   DISPLAY_MESSAGE,
 }

src/utils/index.ts

@@ -1,3 +1,5 @@
+import os from 'node:os';
+
 export function groupBy<T>(arr: T[], grouper: (item: T) => string): Record<string, T[]> {
   // eslint-disable-next-line unicorn/no-array-reduce
   return arr.reduce((result, curr) => {
@@ -59,3 +61,13 @@ export function deepEqual(obj1: unknown, obj2: unknown): boolean {
   // If all checks pass, the objects are deep equal.
   return true;
 }
+
+export function resolvePathWithVariables(pathWithVariables: string) {
+  // @ts-expect-error Ignore this for now
+  return pathWithVariables.replace(/\$([A-Z_]+[A-Z0-9_]*)|\${([A-Z0-9_]*)}/ig, (_, a, b) => process.env[a || b])
+}
+
+export function untildify(pathWithTilde: string) {
+  const homeDirectory = os.homedir();
+  return homeDirectory ? pathWithTilde.replace(/^~(?=$|\/|\\)/, homeDirectory) : pathWithTilde;
+}