Repo Name - No Special Chars (#1424)

* Repo Name - No Special Chars

* disable special characters in repo names

* remove log

cmd/ui/assets/src/app/features/app-store/apps-add/apps-add.component.html

@@ -3,17 +3,24 @@ <h2 mat-dialog-title>Add New Helm Repository</h2>
   <form [formGroup]="addRepositoryForm">
     <mat-form-field>
       <input matInput
+             (change)="updateValidity()"
              type="text"
              formControlName="name"
              placeholder="Name or Alias">
+      <mat-hint align="end">Can only contain a-z, A-Z, 0-9, (-) and (_)</mat-hint>
     </mat-form-field>
     <mat-form-field>
       <input matInput
+             (change)="updateValidity()"
              type="text"
              formControlName="url"
              placeholder="Helm Repository Url">
     </mat-form-field>
   </form>
+
+  <div *ngIf="name.errors?.pattern">
+    <p class="warning">Please make sure repo name contains only a-z, A-Z, 0-9, dashes (-), and underscores (_)</p>
+  </div>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button class="btn-secondary"
@@ -22,7 +29,7 @@ <h2 mat-dialog-title>Add New Helm Repository</h2>
   </button>
   <button mat-button
           color="primary"
-          [disabled]="isProcessing"
+          [disabled]="disableSubmit"
           (click)="addRepository()">
 
     <span [hidden]="isProcessing">CONFIRM</span>

cmd/ui/assets/src/app/features/app-store/apps-add/apps-add.component.scss

@@ -3,6 +3,12 @@ form {
   flex-direction: column;
 }
 
+.warning {
+  color: #f44336;
+  width: 300px;
+  font-size: 14px;
+}
+
 button {
   outline: none;
 
@@ -22,3 +28,12 @@ button {
     }
   }
 }
+
+// TODO: remove when we get rid of global styles in _base.scss
+.mat-dialog-actions {
+  justify-content: space-around;
+
+  button {
+    margin-left: 0;
+  }
+}

cmd/ui/assets/src/app/features/app-store/apps-add/apps-add.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit }      from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { HttpClient }             from '@angular/common/http';
 import { Router } from '@angular/router';
 import { catchError }             from 'rxjs/operators';
@@ -14,7 +14,8 @@ import { Notifications }          from '../../../shared/notifications/notificati
 })
 export class AppsAddComponent implements OnInit {
   addRepositoryForm: FormGroup;
-  isProcessing: boolean;
+  isProcessing: boolean = false;
+  disableSubmit: boolean ;
 
   constructor(
     private formBuilder: FormBuilder,
@@ -26,10 +27,21 @@ export class AppsAddComponent implements OnInit {
   }
 
   ngOnInit() {
+    const pattern = new RegExp('^[a-zA-Z0-9-_]+$');
     this.addRepositoryForm = this.formBuilder.group({
-      name: [ '' ],
-      url: [ '' ],
+      name: [ '', [Validators.required, Validators.pattern(pattern)] ],
+      url: [ '', Validators.required ],
     });
+    this.updateValidity();
+  }
+
+  get name() {
+    return this.addRepositoryForm.get("name");
+  }
+
+  updateValidity() {
+    this.addRepositoryForm.updateValueAndValidity();
+    this.disableSubmit = (this.isProcessing || this.addRepositoryForm.invalid);
   }
 
   addRepository() {

cmd/ui/assets/src/app/features/app-store/apps-list/apps-list.component.ts

@@ -123,7 +123,7 @@ export class AppsListComponent implements OnInit {
   }
 
   addRepo() {
-    this.dialog.open(AppsAddComponent);
+    this.dialog.open(AppsAddComponent, { width: "350px" });
   }
 
 }