feat: 🎸 Temporary workspace connection screen (#57)

Author: OmerGronich

apps/cli-gui/src/app/app.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="core.coreState$ | async as coreState">
-  <header class="main-header">
+  <header class="main-header" *ngIf="coreState.projectNames?.length">
     <div class="project-selector">
       <mat-select name="project-selector" id="project-selector">
         <mat-option

apps/cli-gui/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { AsyncPipe, NgFor, NgIf } from '@angular/common';
+import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 import { MatSelectModule } from '@angular/material/select';
 import { RouterOutlet } from '@angular/router';
@@ -7,7 +7,7 @@ import { CoreService } from './core/core.service';
 
 @Component({
   standalone: true,
-  imports: [NgFor, NgIf, AsyncPipe, RouterOutlet, MatSelectModule],
+  imports: [NgIf, AsyncPipe, RouterOutlet, MatSelectModule, NgForOf],
   selector: 'cli-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],

apps/cli-gui/src/app/app.routes.ts

@@ -1,12 +1,23 @@
 import { Routes } from '@angular/router';
 
+import { currentWorkspaceGuard } from './guards/current-workspace.guard';
+
 export const APP_ROUTES: Routes = [
   {
     path: '',
+    canActivate: [currentWorkspaceGuard],
     children: [
+      {
+        path: '',
+        redirectTo: 'generators',
+        pathMatch: 'full',
+      },
       {
         path: 'generators',
-        loadChildren: () => import('./generators/generators.routes'),
+        loadComponent: () =>
+          import('@angular-cli-gui/generators').then(
+            (m) => m.GeneratorsComponent
+          ),
       },
       {
         path: 'configuration',
@@ -22,10 +33,6 @@ export const APP_ROUTES: Routes = [
             (m) => m.ExecutorsComponent
           ),
       },
-      {
-        path: '**',
-        redirectTo: 'generators',
-      },
     ],
   },
   {

apps/cli-gui/src/app/guards/current-workspace.guard.ts

@@ -0,0 +1,51 @@
+import { HttpClient } from '@angular/common/http';
+import { inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { CURRENT_WORKSPACE_PATH } from '@angular-cli-gui/shared/data';
+import { ConnectWorkspaceService } from '@angular-cli-gui/workspace-manager';
+import { catchError, map, Observable, of, retry, Subject, tap } from 'rxjs';
+
+import { CoreService } from '../core/core.service';
+
+export const currentWorkspaceGuard = (): Observable<boolean> => {
+  const router = inject(Router);
+  const http = inject(HttpClient);
+  const connectWorkspaceService = inject(ConnectWorkspaceService);
+  const core = inject(CoreService);
+  const retrySubject = new Subject<void>();
+  const projectNames$ = http.get<string[]>('/api/workspace');
+  const currentWorkspacePath = sessionStorage.getItem(CURRENT_WORKSPACE_PATH);
+
+  return projectNames$.pipe(
+    // Save projects to state
+    tap((projectNames) => {
+      core.update({
+        projectNames,
+        currentProjectName: projectNames?.[0],
+      });
+    }),
+    // Map to true to allow navigation
+    map(() => true),
+    catchError(() => {
+      if (!currentWorkspacePath) {
+        router.navigate(['workspace-manager', 'connect-workspace']);
+        return of(false);
+      }
+
+      // if path saved in local storage is invalid somehow (maybe deleted workspace)
+      // remove it from local storage so on 2nd retry cycle user will be navigated to workspace connection screen
+      sessionStorage.removeItem(CURRENT_WORKSPACE_PATH);
+
+      // Connect to workspace using local storage path and retry to get projectNames
+      return connectWorkspaceService
+        .connectWorkspace(currentWorkspacePath)
+        .pipe(
+          map(() => {
+            retrySubject.next();
+            return false;
+          })
+        );
+    }),
+    retry({ delay: () => retrySubject })
+  );
+};

apps/cli-gui/src/main.ts

@@ -1,35 +1,18 @@
-import { HttpClient, provideHttpClient } from '@angular/common/http';
-import { APP_INITIALIZER } from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import {
   provideRouter,
   withEnabledBlockingInitialNavigation,
 } from '@angular/router';
-import { map } from 'rxjs';
 
 import { AppComponent } from './app/app.component';
 import { APP_ROUTES } from './app/app.routes';
-import { CoreService } from './app/core/core.service';
 
 bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(APP_ROUTES, withEnabledBlockingInitialNavigation()),
     provideHttpClient(),
     provideAnimations(),
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (http: HttpClient, core: CoreService) => () =>
-        http.get<string[]>(`/api/workspace`).pipe(
-          map((projectNames) =>
-            core.update({
-              projectNames,
-              currentProjectName: projectNames?.[0],
-            })
-          )
-        ),
-      deps: [HttpClient, CoreService],
-      multi: true,
-    },
   ],
 }).catch((err) => console.error(err));

libs/shared/data/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/exec-result.interface';
 export * from './lib/generate-component-args.interface';
 export * from './lib/directory.interface';
+export * from './lib/local-storage-keys.consts';

libs/shared/data/src/lib/local-storage-keys.consts.ts

@@ -0,0 +1 @@
+export const CURRENT_WORKSPACE_PATH = 'currentWorkspacePath';

libs/workspace-manager/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/workspace-manager/workspace-manager.component';
 export * from './lib/workspace-manager/workspace-manager.routes';
+export * from './lib/workspace-manager/data-access/connect-workspace.service';

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

@@ -0,0 +1,20 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { CURRENT_WORKSPACE_PATH } from '@angular-cli-gui/shared/data';
+import { Observable, tap } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ConnectWorkspaceService {
+  http = inject(HttpClient);
+  router = inject(Router);
+
+  connectWorkspace(path: string): Observable<void> {
+    return this.http.post<void>('/api/workspace/connect', { path }).pipe(
+      tap(() => {
+        sessionStorage.setItem(CURRENT_WORKSPACE_PATH, path);
+        this.router.navigate(['']);
+      })
+    );
+  }
+}

libs/workspace-manager/src/lib/workspace-manager/features/connect-workspace/connect-workspace.component.html

@@ -1 +1,12 @@
-<p>connect-workspace works!</p>
+<form
+  [formGroup]="form"
+  class="connect-workspace-form"
+  (ngSubmit)="connectWorkspace()"
+>
+  <h2 class="mat-title">Connect your Angular workspace</h2>
+  <mat-form-field class="workspace-path-field" appearance="outline">
+    <mat-label>The absolute path to your workspace</mat-label>
+    <input formControlName="path" matInput type="text" />
+  </mat-form-field>
+  <button mat-raised-button color="primary" type="submit">Connect</button>
+</form>