feat: filesystem navigator (#93)

Co-authored-by: tomzo42 <tom.zohar@hibob.io>
Co-authored-by: Tom Zohar <60091317+Tcodrz@users.noreply.github.com>

Author: tomzohar

apps/cli-gui/src/assets/angular.svg

@@ -1,5 +1,5 @@
 export interface Directory {
   name: string;
-  isNG?: boolean;
+  isNG: boolean;
   isFavorite?: boolean;
 }

libs/shared/data/src/lib/directory.interface.ts

@@ -0,0 +1,49 @@
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { WorkspaceManagerApiService } from './workspace-manager-api.service';
+
+describe('WorkspaceManagerApiService', () => {
+  let service: WorkspaceManagerApiService;
+  let http: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    });
+
+    http = TestBed.inject(HttpTestingController);
+    service = TestBed.inject(WorkspaceManagerApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('getHomeDir', () => {
+    it('should call the get homedir api', () => {
+      service.getHomeDir().subscribe();
+      const request = http.expectOne('/api/workspace-manager/homedir');
+      expect(request.request.method).toEqual('GET');
+    });
+  });
+
+  describe('getDirectoriesInPath', () => {
+    it('should call get directories in path api with path as params', () => {
+      service.getDirectoriesInPath('/mock/path').subscribe();
+      const req = http.expectOne('/api/workspace-manager/dir?path=/mock/path');
+      expect(req.request.method).toEqual('GET');
+    });
+  });
+
+  describe('getPathSeparator', () => {
+    it('should call the get path separator api', () => {
+      service.getPathSeparator().subscribe();
+      const req = http.expectOne('/api/workspace-manager/path-sep');
+      expect(req.request.method).toEqual('GET');
+    });
+  });
+});

libs/workspace-manager/src/lib/data-access/workspace-manager-api.service.spec.ts

@@ -0,0 +1,28 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Directory } from '@angular-cli-gui/shared/data';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class WorkspaceManagerApiService {
+  private readonly http = inject(HttpClient);
+  private readonly API_URL = '/api/workspace-manager';
+
+  getHomeDir(): Observable<string> {
+    return this.http.get(`${this.API_URL}/homedir`, {
+      responseType: 'text',
+    });
+  }
+
+  getDirectoriesInPath(path: string): Observable<Directory[]> {
+    return this.http.get<Directory[]>(`${this.API_URL}/dir`, {
+      params: { path },
+    });
+  }
+
+  getPathSeparator(): Observable<string> {
+    return this.http.get(`${this.API_URL}/path-sep`, { responseType: 'text' });
+  }
+}

libs/workspace-manager/src/lib/data-access/workspace-manager-api.service.ts

@@ -0,0 +1,13 @@
+<div class="path">
+  <div *ngFor="let part of pathParts" class="path-part">
+    <button
+      *ngIf="part"
+      mat-button
+      class="path-part-button"
+      (click)="onPartClicked(part)"
+    >
+      {{ part }}
+    </button>
+    <div>{{ separator }}</div>
+  </div>
+</div>

libs/workspace-manager/src/lib/ui/filesystem-navigator/filesystem-navigator-toolbar/filesystem-navigator-toolbar.component.html

@@ -0,0 +1,12 @@
+.path {
+  display: flex;
+}
+
+.path-part {
+  display: flex;
+  align-items: center;
+}
+
+.path-part-button {
+  margin-left: 2px;
+}

libs/workspace-manager/src/lib/ui/filesystem-navigator/filesystem-navigator-toolbar/filesystem-navigator-toolbar.component.scss

@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilesystemNavigatorToolbarComponent } from './filesystem-navigator-toolbar.component';
+
+describe('FilesystemNavigatorToolbarComponent', () => {
+  let component: FilesystemNavigatorToolbarComponent;
+  let fixture: ComponentFixture<FilesystemNavigatorToolbarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FilesystemNavigatorToolbarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FilesystemNavigatorToolbarComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('path', '/mock/path');
+    fixture.componentRef.setInput('separator', '/');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('ngOnChanges', () => {
+    it('should split the path input and save the parts', () => {
+      expect(component.pathParts).toEqual(['mock', 'path']);
+    });
+  });
+
+  describe('onPathClicked', () => {
+    it('should emit path changed event with the new path', () => {
+      const pathChangeEventSpy = jest.spyOn(component.pathChange, 'emit');
+      component.onPartClicked('mock');
+      expect(pathChangeEventSpy).toHaveBeenCalledWith('/mock');
+    });
+  });
+});

libs/workspace-manager/src/lib/ui/filesystem-navigator/filesystem-navigator-toolbar/filesystem-navigator-toolbar.component.spec.ts

@@ -0,0 +1,40 @@
+import { NgForOf, NgIf } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'cli-filesystem-navigator-toolbar',
+  standalone: true,
+  imports: [NgForOf, NgIf, MatButtonModule],
+  templateUrl: './filesystem-navigator-toolbar.component.html',
+  styleUrls: ['./filesystem-navigator-toolbar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FilesystemNavigatorToolbarComponent implements OnChanges {
+  @Input() path: string | null = null;
+  @Input() separator: string | null = '';
+  @Output() pathChange = new EventEmitter<string>();
+
+  pathParts: string[] = [];
+
+  ngOnChanges(): void {
+    this.pathParts = (this.path as string)
+      .split(this.separator as string)
+      .filter((v) => !!v);
+  }
+
+  onPartClicked(pathPart: string): void {
+    const index = this.pathParts.indexOf(pathPart);
+    const newPath = this.pathParts
+      .slice(0, index + 1)
+      .join(this.separator as string);
+    this.pathChange.emit(`${this.separator}${newPath}`);
+  }
+}

libs/workspace-manager/src/lib/ui/filesystem-navigator/filesystem-navigator-toolbar/filesystem-navigator-toolbar.component.ts

@@ -0,0 +1,33 @@
+<cli-filesystem-navigator-toolbar
+  [path]="path"
+  [separator]="separator"
+  (pathChange)="onPathChanged($event)"
+></cli-filesystem-navigator-toolbar>
+
+<div class="list-wrapper">
+  <mat-list>
+    <ng-container *ngFor="let dir of directories">
+      <mat-list-item (click)="onDirClicked(dir)">
+        <div matListItemIcon>
+          <ng-container
+            [ngTemplateOutlet]="dir.isNG ? angularIcon : folderIcon"
+          ></ng-container>
+        </div>
+
+        <div matListItemTitle>
+          {{ dir.name }}
+        </div>
+      </mat-list-item>
+
+      <mat-divider></mat-divider>
+    </ng-container>
+  </mat-list>
+</div>
+
+<ng-template #folderIcon>
+  <mat-icon>folder</mat-icon>
+</ng-template>
+
+<ng-template #angularIcon>
+  <img class="angular-logo" src="/assets/angular.svg" />
+</ng-template>

libs/workspace-manager/src/lib/ui/filesystem-navigator/filesystem-navigator.component.html

@@ -0,0 +1,17 @@
+:host {
+  .list-wrapper {
+    overflow: auto;
+    margin-top: 16px;
+    height: inherit;
+    max-height: 100%;
+  }
+
+  mat-list-item:hover {
+    cursor: pointer;
+  }
+
+  .angular-logo {
+    width: 25px;
+    height: 25px;
+  }
+}