feat: Added rendering for imports and added custom diff implementation to display the file changes

Author: kevinwang5658

src/entities/project.ts

@@ -16,14 +16,19 @@ export class Project {
   resourceConfigs: ResourceConfig[];
   stateConfigs: ResourceConfig[] | null = null;
   evaluationOrder: null | string[] = null;
-  path: string;
+
+  codifyFiles: string[];
 
   sourceMaps?: SourceMapCache;
   planRequestsCache?: Map<string, PlanRequestData>
 
   isDestroyProject = false;
 
-  static create(configs: ConfigBlock[], path: string, sourceMaps?: SourceMapCache): Project {
+  static empty(): Project {
+    return Project.create([], []);
+  }
+
+  static create(configs: ConfigBlock[], codifyFiles: string[], sourceMaps?: SourceMapCache): Project {
     const projectConfigs = configs.filter((u) => u.configClass === ConfigType.PROJECT);
     if (projectConfigs.length > 1) {
       throw new Error(`Only one project config can be specified. Found ${projectConfigs.length}. \n\n
@@ -33,16 +38,16 @@ ${JSON.stringify(projectConfigs, null, 2)}`);
     return new Project(
       (projectConfigs[0] as ProjectConfig) ?? null,
       configs.filter((u) => u.configClass !== ConfigType.PROJECT) as ResourceConfig[],
-      path,
+      codifyFiles,
       sourceMaps,
     );
   }
 
-  constructor(projectConfig: ProjectConfig | null, resourceConfigs: ResourceConfig[], path: string, sourceMaps?: SourceMapCache) {
+  constructor(projectConfig: ProjectConfig | null, resourceConfigs: ResourceConfig[], codifyFiles: string[], sourceMaps?: SourceMapCache) {
     this.projectConfig = projectConfig;
     this.resourceConfigs = resourceConfigs;
     this.sourceMaps = sourceMaps;
-    this.path = path;
+    this.codifyFiles = codifyFiles;
 
     this.addUniqueNamesForDuplicateResources()
   }
@@ -107,7 +112,7 @@ ${JSON.stringify(projectConfigs, null, 2)}`);
     const uninstallProject = new Project(
       this.projectConfig,
       this.resourceConfigs,
-      this.path,
+      this.codifyFiles,
       this.sourceMaps,
     )
 

src/orchestrators/import.ts

@@ -8,6 +8,7 @@ import { CodifyParser } from '../parser/index.js';
 import { DependencyMap, PluginManager } from '../plugins/plugin-manager.js';
 import { PromptType, Reporter } from '../ui/reporters/reporter.js';
 import { FileUtils } from '../utils/file.js';
+import { FileModificationCalculator, ModificationType } from '../utils/file-modification-calculator.js';
 import { InitializeOrchestrator } from './initialize.js';
 
 export type RequiredParameters = Map<string, RequiredParameter[]>;
@@ -73,8 +74,10 @@ export class ImportOrchestrator {
     ctx.processFinished(ProcessName.IMPORT)
     reporter.displayImportResult(importResult);
 
-    ImportOrchestrator.attachResourceInfo(importResult, resourceInfoList);
-    await ImportOrchestrator.saveResults(reporter, importResult, project)
+    const additionalResourceInfo = await pluginManager.getMultipleResourceInfo(project.resourceConfigs.map((r) => r.type));
+    resourceInfoList.push(...additionalResourceInfo);
+
+    await ImportOrchestrator.saveResults(reporter, importResult, project, resourceInfoList)
   }
 
   static async getImportedConfigs(
@@ -133,7 +136,7 @@ ${JSON.stringify(unsupportedTypeIds)}`);
     ctx.subprocessFinished(SubProcessName.VALIDATE)
   }
 
-  private static async saveResults(reporter: Reporter, importResult: ImportResult, project: Project): Promise<void> {
+  private static async saveResults(reporter: Reporter, importResult: ImportResult, project: Project, resourceInfoList: ResourceInfo[]): Promise<void> {
     const projectExists = !project.isEmpty();
     const multipleCodifyFiles = project.codifyFiles.length > 1;
 
@@ -147,25 +150,40 @@ ${JSON.stringify(unsupportedTypeIds)}`);
         '\nWhich file would you like to update?',
         project.codifyFiles,
       )
-      await ImportOrchestrator.saveToFile(file, importResult);
+      await ImportOrchestrator.updateExistingFile(reporter, file, importResult, resourceInfoList);
 
     } else if (promptResult.startsWith('Update existing file')) {
-      await ImportOrchestrator.saveToFile(project.codifyFiles[0], importResult);
+      await ImportOrchestrator.updateExistingFile(reporter, project.codifyFiles[0], importResult, resourceInfoList);
 
     } else if (promptResult === 'In a new file') {
       const newFileName = await ImportOrchestrator.generateNewImportFileName();
-      await ImportOrchestrator.saveToFile(newFileName, importResult);
+      await ImportOrchestrator.saveNewFile(newFileName, importResult);
     }
   }
 
-  private static async saveToFile(filePath: string, importResult: ImportResult): Promise<void> {
+  private static async updateExistingFile(reporter: Reporter, filePath: string, importResult: ImportResult, resourceInfoList: ResourceInfo[]): Promise<void> {
     const existing = await CodifyParser.parse(filePath);
-
-    for (const resource of importResult.result) {
-      existing.addOrReplace(resource);
+    ImportOrchestrator.attachResourceInfo(importResult.result, resourceInfoList);
+    ImportOrchestrator.attachResourceInfo(existing.resourceConfigs, resourceInfoList);
+
+    const modificationCalculator = new FileModificationCalculator(existing);
+    const result = modificationCalculator.calculate(importResult.result.map((resource) => ({
+      modification: ModificationType.INSERT_OR_UPDATE,
+      resource
+    })));
+
+    reporter.displayFileModification(result.diff);
+    const shouldSave = await reporter.promptConfirmation(`Save to file (${filePath})?`);
+    if (!shouldSave) {
+      process.exit(0);
     }
 
-    console.log(JSON.stringify(existing.resourceConfigs.map((r) => r.raw), null, 2))
+    await FileUtils.writeFile(filePath, result.newFile);
+  }
+
+  private static async saveNewFile(filePath: string, importResult: ImportResult): Promise<void> {
+    const newFile = JSON.stringify(importResult, null, 2);
+    await FileUtils.writeFile(filePath, newFile);
   }
 
   private static async generateNewImportFileName(): Promise<string> {
@@ -185,9 +203,13 @@ ${JSON.stringify(unsupportedTypeIds)}`);
   }
 
   // We have to attach additional info to the imported configs to make saving easier
-  private static attachResourceInfo(importResult: ImportResult, resourceInfoList: ResourceInfo[]): void {
-    importResult.result.forEach((resource) => {
+  private static attachResourceInfo(resources: ResourceConfig[], resourceInfoList: ResourceInfo[]): void {
+    resources.forEach((resource) => {
       const matchedInfo = resourceInfoList.find((info) => info.type === resource.type)!;
+      if (!matchedInfo) {
+        throw new Error(`Could not find type ${resource.type} in the resource info`);
+      }
+
       resource.attachResourceInfo(matchedInfo);
     })
   }

src/ui/components/default-component.tsx

@@ -10,6 +10,7 @@ import { Plan } from '../../entities/plan.js';
 import { ImportResult } from '../../orchestrators/import.js';
 import { RenderEvent } from '../reporters/reporter.js';
 import { RenderStatus, store } from '../store/index.js';
+import { FileModificationDisplay } from './file-modification/FileModification.js';
 import { ImportResultComponent } from './import/import-result.js';
 import { PlanComponent } from './plan/plan.js';
 import { ProgressDisplay } from './progress/progress-display.js';
@@ -103,5 +104,12 @@ export function DefaultComponent(props: {
         }</Static>
       )
     }
+    {
+      renderStatus === RenderStatus.DISPLAY_FILE_MODIFICATION && (
+        <Static items={[renderData as string]}>{
+          (diff, idx) => <FileModificationDisplay diff={diff} key={idx}/>
+        }</Static>
+      )
+    }
   </Box>
 }

src/ui/components/file-modification/FileModification.tsx

@@ -0,0 +1,15 @@
+import { Box, Text } from 'ink';
+import React from 'react';
+
+export function FileModificationDisplay(props: {
+  diff: string,
+}) {
+  return <Box flexDirection="column">
+    <Box borderColor="green" borderStyle="round">
+      <Text>File Modification</Text>
+    </Box>
+    <Text>The following changes will be made</Text>
+    <Text> </Text>
+    <Text>{props.diff}</Text>
+  </Box>
+}

src/ui/components/import/import-result.tsx

@@ -17,11 +17,11 @@ export function ImportResultComponent(props: {
     <Text>{ JSON.stringify(result.map((r) => r.raw), null, 2)}</Text>
     {
       errors.length > 0 && (<Box flexDirection="column">
-        <Text bold={true} color={'red'}>The following configs failed to import:</Text>
+        <Text bold={true} color={'yellow'}>The following configs failed to import:</Text>
         <OrderedList>
           {
             errors.map((e, idx) => <OrderedList.Item key={idx}>
-              <Text color={'red'}>{e}</Text>
+              <Text color={'yellow'}>{e}</Text>
             </OrderedList.Item>)
           }
         </OrderedList>

src/ui/reporters/default-reporter.tsx

@@ -152,6 +152,10 @@ export class DefaultReporter implements Reporter {
     await sleep(100); // This gives the renderer enough time to complete before the prompt exits
   }
 
+  displayFileModification(diff: string) {
+    this.updateRenderState(RenderStatus.DISPLAY_FILE_MODIFICATION, diff);
+  }
+
   private log(args: string): void {
     this.renderEmitter.emit(RenderEvent.LOG, args);
   }

src/ui/reporters/reporter.ts

@@ -54,6 +54,8 @@ export interface Reporter {
   promptUserForValues(resources: Array<ResourceInfo>, promptType: PromptType): Promise<ResourceConfig[]>;
 
   displayImportResult(importResult: ImportResult): void;
+
+  displayFileModification(diff: string): void
 }
 
 export enum ReporterType {

src/ui/store/index.ts

@@ -11,6 +11,7 @@ export enum RenderStatus {
   PROGRESS,
   DISPLAY_PLAN,
   DISPLAY_IMPORT_RESULT,
+  DISPLAY_FILE_MODIFICATION,
   IMPORT_PROMPT,
   PROMPT_CONFIRMATION,
   PROMPT_OPTIONS,

src/utils/file-modification-calculator.ts

@@ -42,7 +42,7 @@ export class FileModificationCalculator {
     this.indentString = fileIndents.indent;
   }
 
-  async calculate(modifications: ModifiedResource[]): Promise<FileModificationResult> {
+  calculate(modifications: ModifiedResource[]): FileModificationResult {
     this.validate(modifications);
 
     let newFile = this.existingFile!.contents.trimEnd();
@@ -120,16 +120,65 @@ export class FileModificationCalculator {
   }
 
   diff(a: string, b: string): string {
-    const diff = Diff.diffLines(a, b);
+    const diff = Diff.diffChars(a, b);
 
-    let result = '';
+    const diffedLines = Diff.diffLines(a, b)
+      .flatMap((change) => change.value.split(/\n/).map(l => ({ added: change.added, removed: change.removed})))
+
+    let diffGroups = [];
+    let pointerStart = -1;
+
+    for (let counter = 0; counter < diffedLines.length; counter++) {
+      const changeAhead = diffedLines.slice(counter, counter + 5).some((change) => change.added || change.removed);
+      const changeBehind = diffedLines.slice(counter - 5, counter).some((change) => change.added || change.removed);
+
+      if (pointerStart === -1 && changeAhead) {
+        pointerStart = counter;
+        continue;
+      }
+
+      if (pointerStart !== -1 && !changeAhead && !changeBehind) {
+        diffGroups.push({ start: pointerStart, end: counter })
+        pointerStart = -1;
+        continue;
+      }
+
+      if (pointerStart !== -1 && counter === diffedLines.length - 1) {
+        diffGroups.push({ start: pointerStart, end: counter })
+      }
+    }
+
+    let diffString = '';
     diff.forEach((part) => {
-      result += part.added ? chalk.green(part.value) :
+      diffString += part.added ? chalk.green(part.value) :
         part.removed ? chalk.red(part.value) :
           part.value;
     });
 
-    return result;
+    const diffLines = diffString.split(/\n/);
+    const result = [];
+
+    for (const group of diffGroups) {
+      const maxLineNumberWidth = group.end.toString().length;
+
+      result.push(`${chalk.bold(`Lines ${group.start} to line ${group.end}:`)}
+${diffLines.slice(group.start, group.end).map((l, idx) => {
+          const change = diffedLines[group.start + idx];
+          
+          if (change.added && change.removed) {
+            return `${chalk.gray((group.start + idx).toString().padEnd(maxLineNumberWidth, ' '))} ${chalk.yellow('~')}${l}`
+          } else if (change.added) {
+            return `${chalk.gray((group.start + idx).toString().padEnd(maxLineNumberWidth, ' '))} ${chalk.green('+')}${l}`
+          } else if (change.removed) {
+            return `${chalk.gray((group.start + idx.toString()).padEnd(maxLineNumberWidth, ' '))} ${chalk.red('-')}${l}`
+          } else {
+            return `${chalk.gray((group.start + idx).toString().padEnd(maxLineNumberWidth, ' '))}  ${l}`
+          }
+}).join('\n')}`
+      );
+    }
+
+    return result.join('\n\n');
   }
 
   // Insert always works at the end

src/utils/file.ts

@@ -31,4 +31,9 @@ export class FileUtils {
     const resolvedPath = path.resolve(filePath);
     return fs.readFile(resolvedPath, 'utf8')
   }
+
+  static async writeFile(filePath: string, contents: string): Promise<void> {
+    const resolvedPath = path.resolve(filePath);
+    await fs.writeFile(resolvedPath, contents, 'utf8')
+  }
 }