show all existing PVCs as dropdown under volumes for a new notebook s…

…erver (kubeflow#5086)

* show all existing PVCs as dropdown under volumes while creating a notebook server

* show all existing PVCs as dropdown under volumes while creating a notebook server

* Removing the stale pre submit tests

components/jupyter-web-app/frontend/src/app/resource-form/volume/volume.component.html

@@ -1,42 +1,49 @@
 <div *ngIf="volume" [formGroup]="volume" class="volume-wrapper">
-  <mat-form-field appearance="outline" id="type">
-    <mat-label>Type</mat-label>
-    <mat-select formControlName="type">
-      <mat-option
+
+  <!-- Volume Type Input -->
+    <mat-form-field appearance="outline" id="type">
+      <mat-label>Type</mat-label>
+      <mat-select  (selectionChange)="selectType($event)" formControlName="type">
+        <mat-option *ngFor="let i of types"
         [disabled]="newTypeIsDisabled()"
         [matTooltip]="newTypeTooltip()"
-        value="New"
-        >New</mat-option
-      >
-      <mat-option value="Existing">Existing</mat-option>
-    </mat-select>
-  </mat-form-field>
+        value="{{i}}">{{i}}</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <!-- Volume Name Input -->
+    <mat-form-field *ngIf="typeSelected === 'New'" class="wide" appearance="outline" id="name">
+      <mat-label>Name</mat-label>
+      <input matInput formControlName="name"/>
+    </mat-form-field>
+
+    <mat-form-field *ngIf="typeSelected === 'Existing'" class="wide" appearance="outline" id="name">
+      <mat-label>Name</mat-label>
+      <mat-select formControlName="name">
+        <mat-option *ngFor="let i of existingPVCs"
+          value="{{i}}">{{i}}</mat-option>
+      </mat-select>
+    </mat-form-field>
 
-  <!-- Volume Name Input -->
-  <mat-form-field appearance="outline" id="name">
-    <mat-label>Name</mat-label>
-    <input matInput formControlName="name" />
-  </mat-form-field>
-
-  <!-- Size Input -->
-  <mat-form-field appearance="outline" id="size">
-    <mat-label>Size</mat-label>
-    <input matInput formControlName="size" />
-  </mat-form-field>
-
-  <!-- Mode Input -->
-  <mat-form-field appearance="outline" id="mode">
-    <mat-label>Mode</mat-label>
-    <mat-select formControlName="mode">
-      <mat-option value="ReadWriteOnce">ReadWriteOnce</mat-option>
-      <mat-option value="ReadOnlyMany">ReadOnlyMany</mat-option>
-      <mat-option value="ReadWriteMany">ReadWriteMany</mat-option>
-    </mat-select>
-  </mat-form-field>
-
-  <!-- Mount Input -->
-  <mat-form-field appearance="outline" id="path">
-    <mat-label>Mount Point</mat-label>
-    <input matInput formControlName="path" />
-  </mat-form-field>
-</div>
+    <!-- Size Input -->
+    <mat-form-field *ngIf="typeSelected === 'New'" class="wide" appearance="outline" id="size">
+      <mat-label>Size</mat-label>
+      <input matInput formControlName="size" />
+    </mat-form-field>
+
+    <!-- Mode Input -->
+    <mat-form-field *ngIf="typeSelected === 'New'" class="wide" appearance="outline" id="mode">
+      <mat-label>Mode</mat-label>
+      <mat-select formControlName="mode">
+        <mat-option value="ReadWriteOnce">ReadWriteOnce</mat-option>
+        <mat-option value="ReadOnlyMany">ReadOnlyMany</mat-option>
+        <mat-option value="ReadWriteMany">ReadWriteMany</mat-option>
+      </mat-select>
+    </mat-form-field>
+
+    <!-- Mount Input -->
+    <mat-form-field class="wide" appearance="outline" id="path">
+      <mat-label>Mount Point</mat-label>
+      <input matInput formControlName="path" />
+    </mat-form-field>
+  </div>

components/jupyter-web-app/frontend/src/app/resource-form/volume/volume.component.ts

@@ -3,6 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { Volume } from 'src/app/utils/types';
 import { Subscription } from 'rxjs';
 
+
 @Component({
   selector: 'app-volume',
   templateUrl: './volume.component.html',
@@ -15,6 +16,10 @@ export class VolumeComponent implements OnInit, OnDestroy {
   currentPVC: Volume;
   existingPVCs: Set<string> = new Set();
 
+  //New - Existing dropdown
+  types: string[] = ['New', 'Existing'];
+  typeSelected = 'New';
+
   subscriptions = new Subscription();
 
   // ----- @Input Parameters -----
@@ -58,6 +63,14 @@ export class VolumeComponent implements OnInit, OnDestroy {
     }
   }
 
+// ----- onChange of the New / Existing Volume -----
+  selectType(event): void {
+    this.typeSelected = event.value;
+    if (this.typeSelected != 'New') return;
+    this.volume.controls.name.setValue(this.currentVolName);
+
+  }
+
   // ----- Get macros -----
   get selectedVolIsExistingType(): boolean {
     if (this.existingPVCs.has(this.volume.value.name)) {