Allow to set a label when creating a transport with the UI

static/skywire-manager-src/src/app/components/layout/labeled-element-text/labeled-element-text.component.ts

@@ -1,13 +1,13 @@
 import { Component, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { TranslateService } from '@ngx-translate/core';
 
 import { SelectOptionComponent, SelectableOption } from '../select-option/select-option.component';
 import { StorageService, LabelInfo, LabeledElementTypes } from 'src/app/services/storage.service';
 import { ClipboardService } from 'src/app/services/clipboard.service';
 import { SnackbarService } from 'src/app/services/snackbar.service';
 import { EditLabelComponent } from '../edit-label/edit-label.component';
 import GeneralUtils from 'src/app/utils/generalUtils';
-import { TranslateService } from '@ngx-translate/core';
 
 /**
  * Represents the parts of a label.

static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.html

@@ -19,6 +19,15 @@
       </ng-template>
     </mat-form-field>
 
+    <mat-form-field>
+      <input
+        formControlName="label"
+        maxlength="66"
+        [placeholder]="'transports.dialog.label' | translate"
+        matInput
+      >
+    </mat-form-field>
+
     <mat-form-field>
       <mat-select
         formControlName="type"

static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts

@@ -11,6 +11,7 @@ import { SnackbarService } from '../../../../../../services/snackbar.service';
 import { AppConfig } from 'src/app/app.config';
 import { processServiceError } from 'src/app/utils/errors';
 import { OperationError } from 'src/app/utils/operation-error';
+import { LabeledElementTypes, StorageService } from 'src/app/services/storage.service';
 
 /**
  * Modal window used for creating trnasports. It creates the transport and shows a
@@ -47,6 +48,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
     private formBuilder: FormBuilder,
     private dialogRef: MatDialogRef<CreateTransportComponent>,
     private snackbarService: SnackbarService,
+    private storageService: StorageService,
   ) { }
 
   ngOnInit() {
@@ -57,6 +59,7 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
         Validators.maxLength(66),
         Validators.pattern('^[0-9a-fA-F]+$')])
       ],
+      'label': [''],
       'type': ['', Validators.required],
     });
 
@@ -92,10 +95,26 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
     });
   }
 
-  private onSuccess() {
+  private onSuccess(response: any) {
+    // Save the label.
+    const label = this.form.get('label').value;
+    let errorSavingLabel = false;
+    if (label) {
+      if (response && response.id) {
+        this.storageService.saveLabel(response.id, label, LabeledElementTypes.Transport);
+      } else {
+        errorSavingLabel = true;
+      }
+    }
+
     NodeComponent.refreshCurrentDisplayedData();
-    this.snackbarService.showDone('transports.dialog.success');
     this.dialogRef.close();
+
+    if (!errorSavingLabel) {
+      this.snackbarService.showDone('transports.dialog.success');
+    } else {
+      this.snackbarService.showWarning('transports.dialog.success-without-label');
+    }
   }
 
   private onError(err: OperationError) {

static/skywire-manager-src/src/assets/i18n/en.json

@@ -471,8 +471,10 @@
     },
     "dialog": {
       "remote-key": "Remote public key",
+      "label": "Identification name (optional)",
       "transport-type": "Transport type",
       "success": "Transport created.",
+      "success-without-label": "The transport was created, but it was not possible to save the label.",
       "errors": {
         "remote-key-length-error": "The remote public key must be 66 characters long.",
         "remote-key-chars-error": "The remote public key must only contain hexadecimal characters.",

static/skywire-manager-src/src/assets/i18n/es.json

@@ -468,8 +468,10 @@
     },
     "dialog": {
       "remote-key": "Llave pública remota",
+      "label": "Nombre del transporte (opcional)",
       "transport-type": "Tipo de transporte",
       "success": "Transporte creado.",
+      "success-without-label": "El transporte fue creado, pero no fue posible guardar la etiqueta.",
       "errors": {
         "remote-key-length-error": "La llave pública remota debe tener 66 caracteres.",
         "remote-key-chars-error": "La llave pública remota sólo debe contener caracteres hexadecimales.",

static/skywire-manager-src/src/assets/i18n/es_base.json

@@ -468,8 +468,10 @@
     },
     "dialog": {
       "remote-key": "Remote public key",
+      "label": "Identification name (optional)",
       "transport-type": "Transport type",
       "success": "Transport created.",
+      "success-without-label": "The transport was created, but it was not possible to save the label.",
       "errors": {
         "remote-key-length-error": "The remote public key must be 66 characters long.",
         "remote-key-chars-error": "The remote public key must only contain hexadecimal characters.",