jwa(front): Auto update mount path

components/crud-web-apps/jupyter/frontend/cypress/integration/form-page.spec.ts

@@ -0,0 +1,50 @@
+describe('New notebook form', () => {
+  beforeEach(() => {});
+
+  it('should have a "New notebook" title', () => {
+    cy.visit('/new');
+    cy.get('[data-cy-toolbar-title]').contains('New notebook').should('exist');
+  });
+
+  it('should auto update mount value when name change', () => {
+    cy.get('[data-cy="add new volume"]').click();
+
+    cy.get('.last[data-cy="data volumes"]').click();
+
+    cy.get('.last[data-cy="data volumes"]')
+      .find('[data-cy="volume name input"]')
+      .type('new-volume-name')
+      .then($nameInput => {
+        const nameValue = $nameInput.val();
+        cy.get('.last[data-cy="data volumes"]')
+          .find('[data-cy="mount path"]')
+          .should($mountInput => {
+            const mountValue = $mountInput.val();
+            expect(mountValue).equal(`/home/jovyan/${nameValue}`);
+          });
+      });
+  });
+
+  it('should not auto update mount value when it is dirty', () => {
+    cy.get('[data-cy="add new volume"]').click();
+
+    cy.get('.last[data-cy="data volumes"]').click();
+
+    cy.get('.last[data-cy="data volumes"]')
+      .find('[data-cy="mount path"]')
+      .type('dirty');
+
+    cy.get('.last[data-cy="data volumes"]')
+      .find('[data-cy="volume name input"]')
+      .type('new-volume-name')
+      .then($nameInput => {
+        const nameValue = $nameInput.val();
+        cy.get('.last[data-cy="data volumes"]')
+          .find('[data-cy="mount path"]')
+          .should($mountInput => {
+            const mountValue = $mountInput.val();
+            expect(mountValue).not.equal(`/home/jovyan/${nameValue}`);
+          });
+      });
+  });
+});

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/form-data-volumes/form-data-volumes.component.html

@@ -7,9 +7,15 @@
   <mat-accordion>
     <mat-expansion-panel
       hideToggle
-      *ngFor="let volGroup of volsArray.controls; let i = index"
+      *ngFor="
+        let volGroup of volsArray.controls;
+        let i = index;
+        let last = last
+      "
       (opened)="openPanel.add(i)"
       (closed)="openPanel.clear()"
+      [class.last]="last"
+      data-cy="data volumes"
     >
       <mat-expansion-panel-header>
         <mat-panel-title>
@@ -92,6 +98,7 @@
       (click)="addNewVolume()"
       mat-stroked-button
       i18n
+      data-cy="add new volume"
     >
       + Add new volume
     </button>
@@ -103,6 +110,7 @@
       (click)="attachExistingVolume()"
       mat-stroked-button
       i18n
+      data-cy="attach existing volume"
     >
       + Attach existing volume
     </button>

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/form-data-volumes/form-data-volumes.component.ts

@@ -1,15 +1,13 @@
 import { Component, OnInit, Input } from '@angular/core';
-import { FormGroup, FormArray, Validators, FormBuilder } from '@angular/forms';
+import { FormArray } from '@angular/forms';
 import {
   createExistingVolumeFormGroup,
   createNewPvcVolumeFormGroup,
   getNewVolumeSize,
   getNewVolumeType,
-  getVolumeDesc,
   getVolumeName,
   getVolumeTitle,
 } from 'src/app/shared/utils/volumes';
-import { Volume } from 'src/app/types';
 
 @Component({
   selector: 'app-form-data-volumes',
@@ -45,15 +43,11 @@ export class FormDataVolumesComponent implements OnInit {
     );
 
     this.volsArray.push(volGroup);
-
-    volGroup.get('mount').setValue(`/home/jovyan/vol-${this.volsArray.length}`);
   }
 
   attachExistingVolume() {
     const volGroup = createExistingVolumeFormGroup();
 
     this.volsArray.push(volGroup);
-
-    volGroup.get('mount').setValue(`/home/jovyan/vol-${this.volsArray.length}`);
   }
 }

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/volume/mount/mount.component.html

@@ -1,4 +1,9 @@
 <mat-form-field appearance="outline" class="wide">
   <mat-label i18n>Mount path</mat-label>
-  <input autocomplete="off" matInput [formControl]="volGroup.get('mount')" />
+  <input
+    autocomplete="off"
+    matInput
+    [formControl]="volGroup.get('mount')"
+    data-cy="mount path"
+  />
 </mat-form-field>

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/volume/mount/mount.component.ts

@@ -1,15 +1,72 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { Component, Input, OnDestroy } from '@angular/core';
+import { AbstractControl, FormArray, FormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-volume-mount',
   templateUrl: './mount.component.html',
   styleUrls: ['./mount.component.scss'],
 })
-export class VolumeMountComponent implements OnInit {
-  @Input() volGroup: FormGroup;
+export class VolumeMountComponent implements OnDestroy {
+  private prvVolGroup: FormGroup;
+  @Input()
+  get volGroup(): FormGroup {
+    return this.prvVolGroup;
+  }
+
+  set volGroup(volGroup: FormGroup) {
+    this.prvVolGroup = volGroup;
+    this.valueChangeSubscription.unsubscribe();
+    this.updateMountOnNameChange(volGroup);
+  }
+
+  private valueChangeSubscription: Subscription = new Subscription();
 
   constructor() {}
 
-  ngOnInit(): void {}
+  ngOnDestroy() {
+    this.valueChangeSubscription.unsubscribe();
+  }
+
+  updateMountOnNameChange(volGroup: FormGroup) {
+    // If volGroup's parent is a FormArray it means that this component is used
+    // in Data volumes else we disable this feature.
+    if (!(volGroup.parent instanceof FormArray)) {
+      return;
+    }
+
+    if (volGroup.contains('newPvc')) {
+      this.updateMountPath(volGroup, this.getNewVolumeNameCtrl(volGroup));
+    }
+
+    if (volGroup.contains('existingSource')) {
+      this.updateMountPath(
+        volGroup,
+        volGroup.get('existingSource.persistentVolumeClaim.claimName'),
+      );
+    }
+  }
+
+  updateMountPath(volGroup: FormGroup, nameCtrl: AbstractControl) {
+    const mountPathCtrl = volGroup.get('mount');
+    this.valueChangeSubscription = nameCtrl.valueChanges.subscribe(v => {
+      const mount = v;
+      if (mountPathCtrl.dirty) {
+        this.valueChangeSubscription.unsubscribe();
+        return;
+      }
+      volGroup.get('mount').setValue(`/home/jovyan/${mount}`);
+    });
+  }
+
+  getNewVolumeNameCtrl(volGroup: FormGroup): AbstractControl {
+    const metadata = volGroup.get('newPvc.metadata') as FormGroup;
+    if (metadata.contains('name')) {
+      return metadata.get('name');
+    }
+
+    if (metadata.contains('generateName')) {
+      return metadata.get('generateName');
+    }
+  }
 }

components/crud-web-apps/jupyter/frontend/src/app/pages/form/form-new/volume/new/name/name.component.html

@@ -11,6 +11,7 @@
     autocomplete="off"
     matInput
     [formControl]="metadataGroup.get('name')"
+    data-cy="volume name input"
   />
 </mat-form-field>
 
@@ -24,6 +25,7 @@
     autocomplete="off"
     matInput
     [formControl]="metadataGroup.get('generateName')"
+    data-cy="volume generateName input"
   />
   <mat-icon
     matSuffix

components/crud-web-apps/jupyter/frontend/src/app/shared/utils/volumes/forms.ts

@@ -128,6 +128,13 @@ export function createMetadataFormGroupFromPvc(
     );
   }
 
+  if (metadata.generateName) {
+    group.addControl(
+      'generateName',
+      new FormControl(metadata.generateName, Validators.required),
+    );
+  }
+
   if (metadata.annotations) {
     group.addControl('annotations', new FormGroup({}));