feat(results-ui): add ability to open folders (#167)

* feat(results-ui): add ability to open folders

Added the ability to open the current folder (or the target directory we're looking at
Used a package to not reinvent the wheel and keep it cross-platform

* test(controller): add openFolder$ mock

* refactor(controller): update openFolder event in ResultsUi

Refactor openFolder$ event in ResultsUi to emit the parent path
when opening a folder in the controller.

* docs: document 'openFolder' feat

---------

Co-authored-by: juanT <imzaldih@gmail.com>

README.es.md

@@ -80,6 +80,8 @@ Muévete por los distintos directorios listados con <kbd>↓</kbd> <kbd>↑</kbd
 
 También puedes usar <kbd>j</kbd> y <kbd>k</kbd> para moverte por los resultados.
 
+Puedes abrir el directorio donde se aloja el resultado seleccionado pulsando <kbd>o</kbd>.
+
 Para salir de Npkill, utiliza <kbd>Q</kbd>, o si te sientes valiente, <kbd>Ctrl</kbd> + <kbd>c</kbd>.
 
 **¡Importante!** Algunas aplicaciones que están instaladas en el sistema necesitan su directorio node_modules para funcionar, y borrarlo puede romperlas. NPKILL te mostrará un :warning: para que sepas que tienes que tener cuidado.

README.md

@@ -83,7 +83,9 @@ $ npx npkill
 By default, npkill will scan for node_modules starting at the path where `npkill` command is executed.
 
 Move between the listed folders with <kbd>↓</kbd> <kbd>↑</kbd>, and use <kbd>Space</kbd> or <kbd>Del</kbd> to delete the selected folder.
-You can also use <kbd>j</kbd> and <kbd>k</kbd> to move between the results
+You can also use <kbd>j</kbd> and <kbd>k</kbd> to move between the results.
+
+You can open the directory where the selected result is placed by pressing <kbd>o</kbd>.
 
 To exit, <kbd>Q</kbd> or <kbd>Ctrl</kbd> + <kbd>c</kbd> if you're brave.
 

__tests__/controller.test.ts

@@ -26,6 +26,7 @@ jest.unstable_mockModule('../src/ui/components/results.ui.js', () => ({
   ResultsUi: jest.fn(() => ({
     delete$: { subscribe: jest.fn() },
     showErrors$: { subscribe: jest.fn() },
+    openFolder$: { subscribe: jest.fn() },
   })),
 }));
 jest.unstable_mockModule('../src/ui/components/logs.ui.js', () => ({

package.json

@@ -51,6 +51,7 @@
     "colors": "1.4.0",
     "get-folder-size": "^2.0.0",
     "node-emoji": "^1.10.0",
+    "open-file-explorer": "^1.0.2",
     "rxjs": "^7.5.7"
   },
   "devDependencies": {

src/constants/cli.constants.ts

@@ -84,6 +84,7 @@ export const HELP_HEADER = `This tool allows you to list any node_modules direct
  🭲 h, d, Ctrl+d, PgUp:    move one page down
  🭲 l, u, Ctrl+u, PgDown:  move one page up
  🭲 home, end:             move to the first and last result
+ 🭲 o:                     open the parent directory of the selected result
  🭲 e:                     show errors popup, next page`;
 
 export const HELP_PROGRESSBAR = ` ------- PROGRESS BAR --------------------

src/controller.ts

@@ -47,6 +47,7 @@ import _dirname from './dirname.js';
 import colors from 'colors';
 import { homedir } from 'os';
 import path from 'path';
+import openExplorer from 'open-file-explorer';
 
 export class Controller {
   private folderRoot = '';
@@ -118,6 +119,7 @@ export class Controller {
     this.uiResults.delete$.subscribe((folder) => this.deleteFolder(folder));
     this.uiResults.showErrors$.subscribe(() => this.showErrorPopup(true));
     this.uiLogs.close$.subscribe(() => this.showErrorPopup(false));
+    this.uiResults.openFolder$.subscribe((path) => openExplorer(path));
 
     // Activate the main interactive component
     this.activeComponent = this.uiResults;

src/ui/components/results.ui.ts

@@ -17,6 +17,7 @@ import { INFO_MSGS } from '../../constants/messages.constants.js';
 import { ResultsService } from '../../services/results.service.js';
 import { Subject } from 'rxjs';
 import colors from 'colors';
+import { resolve } from 'node:path';
 
 export class ResultsUi extends HeavyUi implements InteractiveUi {
   resultIndex = 0;
@@ -26,6 +27,7 @@ export class ResultsUi extends HeavyUi implements InteractiveUi {
 
   readonly delete$ = new Subject<IFolder>();
   readonly showErrors$ = new Subject<null>();
+  readonly openFolder$ = new Subject<string>();
 
   private readonly config: IConfig = DEFAULT_CONFIG;
   private readonly KEYS = {
@@ -44,6 +46,7 @@ export class ResultsUi extends HeavyUi implements InteractiveUi {
     home: () => this.cursorFirstResult(),
     end: () => this.cursorLastResult(),
     e: () => this.showErrorsPopup(),
+    o: () => this.openFolder(),
   };
 
   constructor(
@@ -54,6 +57,12 @@ export class ResultsUi extends HeavyUi implements InteractiveUi {
     super();
   }
 
+  private openFolder(): void {
+    const folder = this.resultsService.results[this.resultIndex];
+    const parentPath = resolve(folder.path, '..');
+    this.openFolder$.next(parentPath);
+  }
+
   onKeyInput({ name }: IKeyPress): void {
     const action: (() => void) | undefined = this.KEYS[name];
     if (action === undefined) {