feat: add uid to ui for workspace and workflow templates

src/app/fields/form/form.component.html

@@ -1,17 +1,18 @@
 <form [formGroup]="form">
- <ng-container *ngFor="let fieldDataum of fieldData">
+ <ng-container *ngFor="let fieldDataum of fieldData; let last = last">
  <ng-container *ngIf="!(fieldDataum.visibility == 'private')" [ngSwitch]="fieldDataum.type">
- <app-textarea class="form-item fix-mat-overflow" *ngSwitchCase="'textarea.textarea'" [data]="fieldDataum" [form]="form"></app-textarea>
- <app-select class="form-item fix-mat-overflow" *ngSwitchCase="'select.select'" [data]="fieldDataum" [form]="form" [disabled]="disabled"></app-select>
- <app-radio class="form-item fix-mat-overflow" *ngSwitchCase="'input.radio'" [data]="fieldDataum" [form]="form"></app-radio>
+ <app-textarea class="form-item fix-mat-overflow" *ngSwitchCase="'textarea.textarea'" [data]="fieldDataum" [form]="form" [class.extraBottomSpace]="!last && !!fieldDataum.hint"></app-textarea>
+ <app-select class="form-item fix-mat-overflow" *ngSwitchCase="'select.select'" [data]="fieldDataum" [form]="form" [disabled]="disabled" [class.extraBottomSpace]="!last && !!fieldDataum.hint"></app-select>
+ <app-radio class="form-item fix-mat-overflow" *ngSwitchCase="'input.radio'" [data]="fieldDataum" [form]="form" [class.extraBottomSpace]="!last && !!fieldDataum.hint"></app-radio>
  <ng-container *ngSwitchDefault>
  <app-input
  *ngIf="isFieldInput(fieldDataum)"
  class="form-item fix-mat-overflow"
  [data]="fieldDataum"
  [inputType]="getInputType(fieldDataum.type)"
  [form]="form"
- [errors]="errors">
+ [errors]="errors"
+ [class.extraBottomSpace]="!last && !!fieldDataum.hint">
  </app-input>
  </ng-container>
  </ng-container>

src/app/fields/form/form.component.scss

@@ -18,3 +18,7 @@
  margin-top: 0;
  }
 }
+
+.extraBottomSpace {
+ margin-bottom: 15px;
+}

src/app/fields/input/input.component.html

@@ -9,6 +9,7 @@
  </mat-label>
  <input #inputElement matInput [type]="inputType" [(ngModel)]="data.value" [formControl]="inputControl"/>
  <mat-hint *ngIf="data.hint" [innerHtml]="data.hint"></mat-hint>
+ <mat-hint *ngIf="!data.hint"></mat-hint>
  <mat-error *ngIf="!this.inputControl.hasError('conflict')">
  Must not be blank
  <span *ngIf="inputType === 'number'">

src/app/workflow-template/workflow-template-edit/workflow-template-edit.component.html

@@ -18,6 +18,7 @@
  <mat-form-field appearance="outline" class="wp-400 fix-mat-overflow">
  <mat-label>Template name</mat-label>
  <input matInput disabled value="{{workflowTemplate?.name}}"/>
+ <mat-hint>uid: {{workflowTemplate?.uid}}</mat-hint>
  </mat-form-field>
  <mat-form-field appearance="outline" class="wp-400 ml-5 fix-mat-overflow">
  <mat-label>Version</mat-label>
@@ -29,7 +30,7 @@
  </mat-form-field>
  </div>
  </div>
- <div class="d-flex">
+ <div class="d-flex mt-3">
  <app-manifest-dag-editor
  class="flex-grow-1"
  [manifestText]="manifestText"

src/app/workflow-template/workflow-template-view/workflow-template-view.component.html

@@ -27,7 +27,14 @@
  </div>
  <div *ngIf="workflowTemplate">
  <div class="header">
- <div class="title">{{workflowTemplate.name}}</div>
+ <div class="title">
+ <div>
+ {{workflowTemplate.name}}
+ </div>
+ <div class="font-size-small color-medium-gray">
+ uid: {{workflowTemplate.uid}}
+ </div>
+ </div>
  <div class="actions font-roboto">
  <button mat-button color="primary" class="link-button font-size-regular" (click)="editSelectedWorkflowTemplateVersion()">
  <mat-icon [fontSet]="'fas'" [fontIcon]="'fa-pencil-alt'"></mat-icon>

src/app/workspace/workspace-template/workspace-template-edit/workspace-template-edit.component.html

@@ -4,6 +4,7 @@
  <mat-form-field appearance="outline" class="wp-400">
  <mat-label>Template name</mat-label>
  <input matInput disabled value="{{workspaceTemplate?.name}}"/>
+ <mat-hint>uid: {{workspaceTemplate?.uid}}</mat-hint>
  </mat-form-field>
  <mat-form-field appearance="outline" class="wp-400 ml-5 fix-mat-overflow">
  <mat-label>Version</mat-label>
@@ -12,9 +13,10 @@
  <app-date [dateTime]="version.createdAt"></app-date>
  </mat-option>
  </mat-select>
+ <mat-hint></mat-hint>
  </mat-form-field>
  </div>
- <mat-form-field appearance="outline" class="template-description fix-mat-overflow">
+ <mat-form-field appearance="outline" class="template-description fix-mat-overflow mt-3">
  <mat-label>Template description</mat-label>
  <textarea matInput value="{{workspaceTemplate?.description}}" formControlName="templateDescriptionInput"></textarea>
  </mat-form-field>

src/app/workspace/workspace.component.html

@@ -23,7 +23,12 @@
  <ng-container cdkColumnDef="name">
  <cdk-header-cell *cdkHeaderCellDef>Name</cdk-header-cell>
  <cdk-cell *cdkCellDef="let workspace">
- <a class="name-link font-roboto-bold font-weight-bold" target="_blank" [routerLink]="['/', this.namespace, 'workspaces', workspace.uid]">{{workspace.name}}</a>
+ <div>
+ <div>
+ <a class="name-link font-roboto-bold font-weight-bold" target="_blank" [routerLink]="['/', this.namespace, 'workspaces', workspace.uid]">{{workspace.name}}</a>
+ </div>
+ <span class="color-medium-gray font-size-small">uid: {{workspace.uid}}</span>
+ </div>
  </cdk-cell>
  </ng-container>