Feature/2949/label validation (#840)

* Add mat-error * Fix labels
dockstore · Nov 29, 2019 · b3f6c5d · b3f6c5d
1 parent 9d5a700
commit b3f6c5d
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 7 deletions.
diff --git a/cypress/integration/group2/mytools.ts b/cypress/integration/group2/mytools.ts
@@ -84,6 +84,19 @@ describe('Dockstore my tools', () => {
       cy.visit('/my-tools/quay.io/A2/b1');
       cy.contains('/Dockerfile');
     });
+    it('should be able to add labels', () => {
+      cy.contains('quay.io/A2/a:latest');
+      cy.get('button')
+        .contains('Manage labels')
+        .click();
+      cy.get('input').type('potato');
+      cy.get('button')
+        .contains('Save')
+        .click();
+      cy.get('button')
+        .contains('Save')
+        .should('not.exist');
+    });
     it('add and remove test parameter file', () => {
       cy.server();
       cy.route('api/containers/*?include=validations').as('getTool');

diff --git a/cypress/integration/group2/myworkflows.ts b/cypress/integration/group2/myworkflows.ts
@@ -66,6 +66,19 @@ describe('Dockstore my workflows', () => {
       cy.contains('Mode').trigger('mouseenter');
       cy.get('.mat-tooltip').contains('STUB: Basic metadata pulled from source control.');
     });
+    it('should be able to add labels', () => {
+      cy.contains('github.com/A/g');
+      cy.get('button')
+        .contains('Manage labels')
+        .click();
+      cy.get('input').type('potato');
+      cy.get('button')
+        .contains('Save')
+        .click();
+      cy.get('button')
+        .contains('Save')
+        .should('not.exist');
+    });
     it('add and remove test parameter file', () => {
       cy.visit('/my-workflows/github.com/A/l');
       cy.contains('Versions').click();

diff --git a/src/app/container/container.component.html b/src/app/container/container.component.html
@@ -107,17 +107,27 @@ <h3>
             </mat-chip>
             <input
               placeholder="New label..."
+              [formControl]="labelFormControl"
               [matChipInputFor]="chipList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="true"
               (matChipInputTokenEnd)="addToLabels($event)"
             />
+            <mat-error *ngIf="labelFormControl.hasError('pattern')"
+              >Only comma-separated labels with alphanumeric characters and internal dashes allowed</mat-error
+            >
           </mat-chip-list>
         </mat-form-field>
         <button type="button" (click)="cancelLabelChanges()" class="btn btn-link" *ngIf="labelsEditMode && !isToolPublic">
           <mat-icon>clear</mat-icon>Cancel
         </button>
-        <button type="button" (click)="submitContainerEdits()" class="btn btn-link" *ngIf="labelsEditMode && !isToolPublic">
+        <button
+          type="button"
+          (click)="submitContainerEdits()"
+          class="btn btn-link"
+          *ngIf="labelsEditMode && !isToolPublic"
+          [disabled]="labelFormControl.hasError('pattern')"
+        >
           <mat-icon>save</mat-icon>Save
         </button>
       </span>

diff --git a/src/app/container/container.component.ts b/src/app/container/container.component.ts
@@ -232,7 +232,6 @@ export class ContainerComponent extends Entry implements AfterViewInit {
   }
   setContainerLabels(): any {
     return this.containersService.updateLabels(this.tool.id, this.containerEditData.labels.join(', ')).subscribe(tool => {
-      this.tool.labels = tool.labels;
       this.updateContainer.setTool(tool);
       this.labelsEditMode = false;
     });

diff --git a/src/app/shared/entry.ts b/src/app/shared/entry.ts
@@ -15,7 +15,7 @@
  */
 import { Location } from '@angular/common';
 import { Injectable, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, Validators } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { ActivatedRoute, NavigationEnd, Params, Router, RouterEvent } from '@angular/router/';
@@ -63,6 +63,7 @@ export abstract class Entry implements OnInit, OnDestroy {
   public validationMessage = validationMessages;
   protected ngUnsubscribe: Subject<{}> = new Subject();
   protected selected = new FormControl(0);
+  labelFormControl = new FormControl('', [Validators.pattern('^[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*$')]);
   constructor(
     private trackLoginService: TrackLoginService,
     public providerService: ProviderService,

diff --git a/src/app/shared/entry/entry.module.ts b/src/app/shared/entry/entry.module.ts
@@ -16,7 +16,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgxJsonLdModule } from '@ngx-lite/json-ld';
 import { ShareButtonsModule } from '@ngx-share/buttons';
@@ -55,6 +55,7 @@ import { VersionProviderUrlPipe } from './versionProviderUrl.pipe';
     NgxJsonLdModule,
     ClipboardModule,
     RouterModule,
+    ReactiveFormsModule,
     RefreshAlertModule
   ],
   declarations: [
@@ -89,7 +90,8 @@ import { VersionProviderUrlPipe } from './versionProviderUrl.pipe';
     RefreshAlertModule,
     ShareButtonsModule,
     UrlDeconstructPipe,
-    RouterModule
+    RouterModule,
+    ReactiveFormsModule
   ],
   entryComponents: [RegisterCheckerWorkflowComponent],
   providers: [BioschemaService, EntryActionsService]

diff --git a/src/app/workflow/workflow.component.html b/src/app/workflow/workflow.component.html
@@ -113,17 +113,27 @@ <h3>
             </mat-chip>
             <input
               placeholder="New label..."
+              [formControl]="labelFormControl"
               [matChipInputFor]="chipList"
               [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
               [matChipInputAddOnBlur]="true"
               (matChipInputTokenEnd)="addToLabels($event)"
             />
+            <mat-error *ngIf="labelFormControl.hasError('pattern')"
+              >Only comma-separated labels with alphanumeric characters and internal dashes allowed</mat-error
+            >
           </mat-chip-list>
         </mat-form-field>
         <button type="button" (click)="cancelLabelChanges()" class="btn btn-link" *ngIf="labelsEditMode && !isWorkflowPublic">
           <mat-icon>cancel</mat-icon>Cancel
         </button>
-        <button type="button" (click)="submitWorkflowEdits()" class="btn btn-link" *ngIf="labelsEditMode && !isWorkflowPublic">
+        <button
+          type="button"
+          (click)="submitWorkflowEdits()"
+          class="btn btn-link"
+          *ngIf="labelsEditMode && !isWorkflowPublic"
+          [disabled]="labelFormControl.hasError('pattern')"
+        >
           <mat-icon>save</mat-icon> Save
         </button>
       </span>

diff --git a/src/app/workflow/workflow.component.ts b/src/app/workflow/workflow.component.ts
@@ -356,7 +356,6 @@ export class WorkflowComponent extends Entry implements AfterViewInit {
 
   setWorkflowLabels(): any {
     return this.workflowsService.updateLabels(this.workflow.id, this.workflowEditData.labels.join(', ')).subscribe(workflow => {
-      this.workflow.labels = workflow.labels;
       this.workflowService.setWorkflow(workflow);
       this.labelsEditMode = false;
     });