feat: Added import prompt to help improve ux of imports and updated to the latest ink-form with improved import ux

Author: kevinwang5658

package-lock.json

@@ -4,7 +4,7 @@
     "codify": "./bin/run.js"
   },
   "dependencies": {
-    "@codifycli/ink-form": "0.0.5",
+    "@codifycli/ink-form": "0.0.10",
     "ink-select-input": "^6.0.0",
     "@homebridge/node-pty-prebuilt-multiarch": "^0.12.0-beta.5",
     "@inkjs/ui": "^2",

package.json

@@ -213,6 +213,10 @@ ${JSON.stringify(unsupportedTypeIds)}`);
       }
     })
 
+    if (askPrompt.length > 0) {
+      await reporter.displayImportWarning(askPrompt.map((r) => r.type), noPrompt.map((r) => r.type));
+    }
+
     const userSupplied = await reporter.promptUserForValues(askPrompt, PromptType.IMPORT);
 
     return [

src/orchestrators/import.ts

@@ -1,5 +1,5 @@
 import { Form, FormProps } from '@codifycli/ink-form';
-import { PasswordInput, Select } from '@inkjs/ui';
+import { PasswordInput } from '@inkjs/ui';
 import chalk from 'chalk';
 import { Box, Static, Text } from 'ink';
 import SelectInput from 'ink-select-input';
@@ -14,6 +14,7 @@ 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 { ImportWarning } from './import/import-warning.js';
 import { PlanComponent } from './plan/plan.js';
 import { ProgressDisplay } from './progress/progress-display.js';
 
@@ -119,5 +120,10 @@ export function DefaultComponent(props: {
         }</Static>
       )
     }
+    {
+      renderStatus === RenderStatus.IMPORT_PROMPT_WARNING && (
+        <ImportWarning emitter={emitter} renderData={renderData as any} />
+      )
+    }
   </Box>
 }

src/ui/components/default-component.tsx

@@ -0,0 +1,40 @@
+import { Box, Static, Text } from 'ink';
+import React from 'react';
+import { RenderEvent } from '../../reporters/reporter.js';
+import SelectInput from 'ink-select-input';
+import EventEmitter from 'node:events';
+
+
+export function ImportWarning({
+  renderData,
+  emitter,
+}: {
+  renderData: { noParametersRequired: string[], requiresParameters: string[] };
+  emitter: EventEmitter
+}) {
+  return <Box flexDirection="column">
+    <Static items={[renderData]}>{
+      (data, idx) => <Box flexDirection='column' key={idx}>
+        <Text> </Text>
+        <Text bold>Additional information is required to continue import</Text>
+        <Text>Some of the resources specified in the import support multiple instances. Additional information is required to identify the specific instance to import. If importing multiple instances is desired (for ex: multiple git clones) additional imports can be added in the prompt.</Text>
+        {
+          data.noParametersRequired.length > 0 && (<Box flexDirection='column'>
+            <Text> </Text>
+            <Text bold color='green'>Resources that can be imported automatically:</Text>
+            <Text color='green'>{data.noParametersRequired.join(', ')}</Text>
+          </Box>)
+        }
+        <Text> </Text>
+        <Text bold color='yellow'>Resources that require additional information:</Text>
+        <Text color='yellow'>{data.requiresParameters.join(', ')}</Text>
+      </Box>
+    }</Static>
+    <Box marginTop={1}>
+      <SelectInput items={[
+        { label: 'Continue to prompt', value: '' },
+      ]} onSelect={() => emitter.emit(RenderEvent.PROMPT_RESULT, true)}/>
+    </Box>
+  </Box>
+  
+}

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

@@ -48,6 +48,13 @@ export class DefaultReporter implements Reporter {
     ctx.on(Event.SUB_PROCESS_FINISH, (name, additionalName) => this.onSubprocessFinishEvent(name, additionalName));
   }
 
+  async displayImportWarning(requiresParameters: string[], noParametersRequired: string[]): Promise<void> {
+    await this.updateStateAndAwaitEvent<boolean>(
+      () => this.updateRenderState(RenderStatus.IMPORT_PROMPT_WARNING, { requiresParameters, noParametersRequired }),
+      RenderEvent.PROMPT_RESULT
+    )
+  }
+
   async promptUserForValues(resources: Array<ResourceInfo>, promptType: PromptType): Promise<ResourceConfig[]> {
     if (resources.length === 0) {
       return [];
@@ -58,8 +65,8 @@ export class DefaultReporter implements Reporter {
 
     const formProps: FormProps = {
       form: {
-        title: 'codify import',
-        description: 'specify the resource to import',
+        title: 'Identify which instance to import',
+        description: 'fill out the required information to submit',
         sections: resources.map((info) => ({
           title: info.type,
           description: info.description,
@@ -137,9 +144,16 @@ export class DefaultReporter implements Reporter {
       RenderEvent.PROMPT_RESULT
     )
 
+    this.log(result ? `${message} -> "Yes"` : `${message} -> "No"`)
+
+    // This was added because there was a very hard to debug memory bug with Yoga (ink.js layout engine). Could not
+    // identify the root cause of the problem but this alleviates it.
+    await sleep(50)
+    this.updateRenderState(RenderStatus.NOTHING, null);
+    await sleep(50);
+
     if (result) {
       this.updateRenderState(RenderStatus.PROGRESS)
-      this.log(`${message} -> "Yes"`)
     }
 
     return result;
@@ -155,6 +169,7 @@ export class DefaultReporter implements Reporter {
 
     // This was added because there was a very hard to debug memory bug with Yoga (ink.js layout engine). Could not
     // identify the root cause of the problem but this alleviates it.
+    await sleep(50)
     this.updateRenderState(RenderStatus.NOTHING, null);
     await sleep(50);
 

src/ui/reporters/default-reporter.tsx

@@ -57,6 +57,8 @@ export interface Reporter {
   displayFileModifications(diff: Array<{ file: string, modification: FileModificationResult }>): void
 
   displayMessage(message: string): void
+
+  displayImportWarning(requiresParameters: string[], noParametersRequired: string[]): Promise<void>
 }
 
 export enum ReporterType {

src/ui/reporters/reporter.ts

@@ -14,6 +14,7 @@ export enum RenderStatus {
   DISPLAY_IMPORT_RESULT,
   DISPLAY_FILE_MODIFICATION,
   IMPORT_PROMPT,
+  IMPORT_PROMPT_WARNING,
   PROMPT_CONFIRMATION,
   PROMPT_OPTIONS,
   SUDO_PROMPT,