UI: Inline tenant profile create/edit.

@@ -86,6 +86,7 @@ import { FilterUserInfoDialogComponent } from './filter/filter-user-info-dialog.
 import { FilterPredicateValueComponent } from './filter/filter-predicate-value.component';
 import { FilterPredicateValueComponent } from './filter/filter-predicate-value.component';
 import { TenantProfileAutocompleteComponent } from './profile/tenant-profile-autocomplete.component';
 import { TenantProfileAutocompleteComponent } from './profile/tenant-profile-autocomplete.component';
 import { TenantProfileComponent } from './profile/tenant-profile.component';
 import { TenantProfileComponent } from './profile/tenant-profile.component';
+import { TenantProfileDialogComponent } from './profile/tenant-profile-dialog.component';
 
 
 @NgModule({
 @NgModule({
   declarations:
   declarations:
@@ -154,7 +155,8 @@ import { TenantProfileComponent } from './profile/tenant-profile.component';
       FilterUserInfoDialogComponent,
       FilterUserInfoDialogComponent,
       FilterPredicateValueComponent,
       FilterPredicateValueComponent,
       TenantProfileAutocompleteComponent,
       TenantProfileAutocompleteComponent,
-      TenantProfileComponent
+      TenantProfileComponent,
+      TenantProfileDialogComponent
     ],
     ],
   imports: [
   imports: [
     CommonModule,
     CommonModule,
@@ -212,7 +214,8 @@ import { TenantProfileComponent } from './profile/tenant-profile.component';
     FiltersEditComponent,
     FiltersEditComponent,
     UserFilterDialogComponent,
     UserFilterDialogComponent,
     TenantProfileAutocompleteComponent,
     TenantProfileAutocompleteComponent,
-    TenantProfileComponent
+    TenantProfileComponent,
+    TenantProfileDialogComponent
   ],
   ],
   providers: [
   providers: [
     WidgetComponentService,
     WidgetComponentService,

@@ -20,6 +20,8 @@
          #tenantProfileInput
          #tenantProfileInput
          formControlName="tenantProfile"
          formControlName="tenantProfile"
          [required]="required"
          [required]="required"
+         (keydown)="tenantProfileEnter($event)"
+         (keypress)="tenantProfileEnter($event)"
          [matAutocomplete]="tenantProfileAutocomplete">
          [matAutocomplete]="tenantProfileAutocomplete">
   <button *ngIf="selectTenantProfileFormGroup.get('tenantProfile').value && !disabled"
   <button *ngIf="selectTenantProfileFormGroup.get('tenantProfile').value && !disabled"
           type="button"
           type="button"
@@ -27,6 +29,14 @@
           (click)="clear()">
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
     <mat-icon class="material-icons">close</mat-icon>
   </button>
   </button>
+  <button *ngIf="selectTenantProfileFormGroup.get('tenantProfile').value && !disabled"
+          type="button"
+          matSuffix mat-button mat-icon-button aria-label="Edit"
+          matTooltip="{{ 'tenant-profile.edit' | translate }}"
+          matTooltipPosition="above"
+          (click)="editTenantProfile($event)">
+    <mat-icon class="material-icons">edit</mat-icon>
+  </button>
   <mat-autocomplete
   <mat-autocomplete
     class="tb-autocomplete"
     class="tb-autocomplete"
     #tenantProfileAutocomplete="matAutocomplete"
     #tenantProfileAutocomplete="matAutocomplete"
@@ -34,10 +44,21 @@
     <mat-option *ngFor="let tenantProfile of filteredTenantProfiles | async" [value]="tenantProfile">
     <mat-option *ngFor="let tenantProfile of filteredTenantProfiles | async" [value]="tenantProfile">
       <span [innerHTML]="tenantProfile.name | highlight:searchText"></span>
       <span [innerHTML]="tenantProfile.name | highlight:searchText"></span>
     </mat-option>
     </mat-option>
-    <mat-option *ngIf="!(filteredTenantProfiles | async)?.length" [value]="null">
-      <span>
-          {{ translate.get('tenant-profile.no-tenant-profiles-matching', {entity: searchText}) | async }}
-      </span>
+    <mat-option *ngIf="!(filteredTenantProfiles | async)?.length" [value]="null" class="tb-not-found">
+      <div class="tb-not-found-content" (click)="$event.stopPropagation()">
+        <div *ngIf="!textIsNotEmpty(searchText); else searchNotEmpty">
+          <span translate>tenant-profile.no-tenant-profiles-found</span>
+        </div>
+        <ng-template #searchNotEmpty>
+          <span>
+              {{ translate.get('tenant-profile.no-tenant-profiles-matching',
+            {entity: truncate.transform(searchText, true, 6, &apos;...&apos;)}) | async }}
+          </span>
+        </ng-template>
+        <span>
+          <a translate (click)="createTenantProfile($event, searchText)">tenant-profile.create-new-tenant-profile</a>
+        </span>
+      </div>
     </mat-option>
     </mat-option>
   </mat-autocomplete>
   </mat-autocomplete>
   <mat-error *ngIf="selectTenantProfileFormGroup.get('tenantProfile').hasError('required')">
   <mat-error *ngIf="selectTenantProfileFormGroup.get('tenantProfile').hasError('required')">

@@ -14,7 +14,7 @@
 /// limitations under the License.
 /// limitations under the License.
 ///
 ///
 
 
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { Observable } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { PageLink } from '@shared/models/page/page-link';
@@ -27,7 +27,12 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { TenantProfileId } from '@shared/models/id/tenant-profile-id';
 import { TenantProfileId } from '@shared/models/id/tenant-profile-id';
 import { EntityInfoData } from '@shared/models/entity.models';
 import { EntityInfoData } from '@shared/models/entity.models';
 import { TenantProfileService } from '@core/http/tenant-profile.service';
 import { TenantProfileService } from '@core/http/tenant-profile.service';
-import { entityIdEquals } from '../../../../shared/models/id/entity-id';
+import { entityIdEquals } from '@shared/models/id/entity-id';
+import { TruncatePipe } from '@shared//pipe/truncate.pipe';
+import { ENTER } from '@angular/cdk/keycodes';
+import { TenantProfile } from '@shared/models/tenant.model';
+import { MatDialog } from '@angular/material/dialog';
+import { TenantProfileDialogComponent, TenantProfileDialogData } from './tenant-profile-dialog.component';
 
 
 @Component({
 @Component({
   selector: 'tb-tenant-profile-autocomplete',
   selector: 'tb-tenant-profile-autocomplete',
@@ -60,6 +65,9 @@ export class TenantProfileAutocompleteComponent implements ControlValueAccessor,
   @Input()
   @Input()
   disabled: boolean;
   disabled: boolean;
 
 
+  @Output()
+  tenantProfileUpdated = new EventEmitter<TenantProfileId>();
+
   @ViewChild('tenantProfileInput', {static: true}) tenantProfileInput: ElementRef;
   @ViewChild('tenantProfileInput', {static: true}) tenantProfileInput: ElementRef;
 
 
   filteredTenantProfiles: Observable<Array<EntityInfoData>>;
   filteredTenantProfiles: Observable<Array<EntityInfoData>>;
@@ -70,8 +78,10 @@ export class TenantProfileAutocompleteComponent implements ControlValueAccessor,
 
 
   constructor(private store: Store<AppState>,
   constructor(private store: Store<AppState>,
               public translate: TranslateService,
               public translate: TranslateService,
+              public truncate: TruncatePipe,
               private tenantProfileService: TenantProfileService,
               private tenantProfileService: TenantProfileService,
-              private fb: FormBuilder) {
+              private fb: FormBuilder,
+              private dialog: MatDialog) {
     this.selectTenantProfileFormGroup = this.fb.group({
     this.selectTenantProfileFormGroup = this.fb.group({
       tenantProfile: [null]
       tenantProfile: [null]
     });
     });
@@ -168,4 +178,67 @@ export class TenantProfileAutocompleteComponent implements ControlValueAccessor,
     }, 0);
     }, 0);
   }
   }
 
 
+  textIsNotEmpty(text: string): boolean {
+    return (text && text.length > 0);
+  }
+
+  tenantProfileEnter($event: KeyboardEvent) {
+    if ($event.keyCode === ENTER) {
+      $event.preventDefault();
+      if (!this.modelValue) {
+        this.createTenantProfile($event, this.searchText);
+      }
+    }
+  }
+
+  createTenantProfile($event: Event, profileName: string) {
+    $event.preventDefault();
+    const tenantProfile: TenantProfile = {
+      id: null,
+      name: profileName
+    };
+    this.openTenantProfileDialog(tenantProfile, true);
+  }
+
+  editTenantProfile($event: Event) {
+    $event.preventDefault();
+    this.tenantProfileService.getTenantProfile(this.modelValue.id).subscribe(
+      (tenantProfile) => {
+        this.openTenantProfileDialog(tenantProfile, false);
+      }
+    );
+  }
+
+  openTenantProfileDialog(tenantProfile: TenantProfile, isAdd: boolean) {
+    this.dialog.open<TenantProfileDialogComponent, TenantProfileDialogData,
+      TenantProfile>(TenantProfileDialogComponent, {
+      disableClose: true,
+      panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      data: {
+        isAdd,
+        tenantProfile
+      }
+    }).afterClosed().subscribe(
+      (savedTenantProfile) => {
+        if (!savedTenantProfile) {
+          setTimeout(() => {
+            this.tenantProfileInput.nativeElement.blur();
+            this.tenantProfileInput.nativeElement.focus();
+          }, 0);
+        } else {
+          this.tenantProfileService.getTenantProfileInfo(savedTenantProfile.id.id).subscribe(
+            (profile) => {
+              this.modelValue = new TenantProfileId(profile.id.id);
+              this.selectTenantProfileFormGroup.get('tenantProfile').patchValue(profile, {emitEvent: true});
+              if (isAdd) {
+                this.propagateChange(this.modelValue);
+              } else {
+                this.tenantProfileUpdated.next(savedTenantProfile.id);
+              }
+            }
+          );
+        }
+      }
+    );
+  }
 }
 }

+<!--
+
+    Copyright © 2016-2020 The Thingsboard Authors
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+        http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<form (ngSubmit)="save()" style="min-width: 600px;">
+  <mat-toolbar color="primary">
+    <h2>{{ (isAdd ? 'tenant-profile.add' : 'tenant-profile.edit' ) | translate }}</h2>
+    <span fxFlex></span>
+    <button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div mat-dialog-content>
+    <tb-tenant-profile
+      #tenantProfileComponent
+      [standalone]="true"
+      [entity]="tenantProfile"
+      [isEdit]="true">
+    </tb-tenant-profile>
+  </div>
+  <div mat-dialog-actions fxLayoutAlign="end center">
+    <button mat-raised-button color="primary"
+            type="submit"
+            [disabled]="(isLoading$ | async) || tenantProfileComponent.entityForm?.invalid || !tenantProfileComponent.entityForm?.dirty">
+      {{ (isAdd  ? 'action.add' : 'action.save') | translate }}
+    </button>
+    <button mat-button color="primary"
+            type="button"
+            cdkFocusInitial
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()">
+      {{ 'action.cancel' | translate }}
+    </button>
+  </div>
+</form>

+///
+/// Copyright © 2016-2020 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import {
+  AfterViewInit,
+  Component,
+  ComponentFactoryResolver,
+  Inject,
+  Injector,
+  SkipSelf,
+  ViewChild
+} from '@angular/core';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { DialogComponent } from '@shared/components/dialog.component';
+import { Router } from '@angular/router';
+import { TenantProfile } from '@shared/models/tenant.model';
+import { TenantProfileComponent } from './tenant-profile.component';
+import { TenantProfileService } from '@core/http/tenant-profile.service';
+
+export interface TenantProfileDialogData {
+  tenantProfile: TenantProfile;
+  isAdd: boolean;
+}
+
+@Component({
+  selector: 'tb-tenant-profile-dialog',
+  templateUrl: './tenant-profile-dialog.component.html',
+  providers: [{provide: ErrorStateMatcher, useExisting: TenantProfileDialogComponent}],
+  styleUrls: []
+})
+export class TenantProfileDialogComponent extends
+  DialogComponent<TenantProfileDialogComponent, TenantProfile> implements ErrorStateMatcher, AfterViewInit {
+
+  isAdd: boolean;
+  tenantProfile: TenantProfile;
+
+  submitted = false;
+
+  @ViewChild('tenantProfileComponent', {static: true}) tenantProfileComponent: TenantProfileComponent;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              @Inject(MAT_DIALOG_DATA) public data: TenantProfileDialogData,
+              public dialogRef: MatDialogRef<TenantProfileDialogComponent, TenantProfile>,
+              private componentFactoryResolver: ComponentFactoryResolver,
+              private injector: Injector,
+              @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
+              private tenantProfileService: TenantProfileService) {
+    super(store, router, dialogRef);
+    this.isAdd = this.data.isAdd;
+    this.tenantProfile = this.data.tenantProfile;
+  }
+
+  ngAfterViewInit(): void {
+    if (this.isAdd) {
+      setTimeout(() => {
+        this.tenantProfileComponent.entityForm.markAsDirty();
+      }, 0);
+    }
+  }
+
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
+    const customErrorState = !!(control && control.invalid && this.submitted);
+    return originalErrorState || customErrorState;
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+
+  save(): void {
+    this.submitted = true;
+    if (this.tenantProfileComponent.entityForm.valid) {
+      this.tenantProfile = {...this.tenantProfile, ...this.tenantProfileComponent.entityFormValue()};
+      this.tenantProfileService.saveTenantProfile(this.tenantProfile).subscribe(
+        (tenantProfile) => {
+          this.dialogRef.close(tenantProfile);
+        }
+      );
+    }
+  }
+
+}

@@ -14,7 +14,7 @@
 /// limitations under the License.
 /// limitations under the License.
 ///
 ///
 
 
-import { Component, Inject, Input } from '@angular/core';
+import { Component, Inject, Input, Optional } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -36,8 +36,8 @@ export class TenantProfileComponent extends EntityComponent<TenantProfile> {
 
 
   constructor(protected store: Store<AppState>,
   constructor(protected store: Store<AppState>,
               protected translate: TranslateService,
               protected translate: TranslateService,
-              @Inject('entity') protected entityValue: TenantProfile,
-              @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<TenantProfile>,
+              @Optional() @Inject('entity') protected entityValue: TenantProfile,
+              @Optional() @Inject('entitiesTableConfig') protected entitiesTableConfigValue: EntityTableConfig<TenantProfile>,
               protected fb: FormBuilder) {
               protected fb: FormBuilder) {
     super(store, fb, entityValue, entitiesTableConfigValue);
     super(store, fb, entityValue, entitiesTableConfigValue);
   }
   }

@@ -52,7 +52,8 @@
       <tb-tenant-profile-autocomplete
       <tb-tenant-profile-autocomplete
         [selectDefaultProfile]="isAdd"
         [selectDefaultProfile]="isAdd"
         required
         required
-        formControlName="tenantProfileId">
+        formControlName="tenantProfileId"
+        (tenantProfileUpdated)="onTenantProfileUpdated()">
       </tb-tenant-profile-autocomplete>
       </tb-tenant-profile-autocomplete>
       <div formGroupName="additionalInfo" fxLayout="column">
       <div formGroupName="additionalInfo" fxLayout="column">
         <mat-form-field class="mat-block">
         <mat-form-field class="mat-block">

@@ -88,4 +88,7 @@ export class TenantComponent extends ContactBasedComponent<TenantInfo> {
       }));
       }));
   }
   }
 
 
+  onTenantProfileUpdated() {
+    this.entitiesTableConfig.table.updateData(false);
+  }
 }
 }

@@ -25,11 +25,11 @@ export interface TenantProfileData {
 
 
 export interface TenantProfile extends BaseData<TenantProfileId> {
 export interface TenantProfile extends BaseData<TenantProfileId> {
   name: string;
   name: string;
-  description: string;
-  default: boolean;
-  isolatedTbCore: boolean;
-  isolatedTbRuleEngine: boolean;
-  profileData: TenantProfileData;
+  description?: string;
+  default?: boolean;
+  isolatedTbCore?: boolean;
+  isolatedTbRuleEngine?: boolean;
+  profileData?: TenantProfileData;
 }
 }
 
 
 export interface Tenant extends ContactBased<TenantId> {
 export interface Tenant extends ContactBased<TenantId> {

@@ -1680,6 +1680,7 @@
         "tenant-profile": "Tenant profile",
         "tenant-profile": "Tenant profile",
         "tenant-profiles": "Tenant profiles",
         "tenant-profiles": "Tenant profiles",
         "add": "Add tenant profile",
         "add": "Add tenant profile",
+        "edit": "Edit tenant profile",
         "tenant-profile-details": "Tenant profile details",
         "tenant-profile-details": "Tenant profile details",
         "no-tenant-profiles-text": "No tenant profiles found",
         "no-tenant-profiles-text": "No tenant profiles found",
         "search": "Search tenant profiles",
         "search": "Search tenant profiles",
@@ -1699,7 +1700,9 @@
         "delete-tenant-profiles-title": "Are you sure you want to delete { count, plural, 1 {1 tenant profile} other {# tenant profiles} }?",
         "delete-tenant-profiles-title": "Are you sure you want to delete { count, plural, 1 {1 tenant profile} other {# tenant profiles} }?",
         "delete-tenant-profiles-text": "Be careful, after the confirmation all selected tenant profiles will be removed and all related data will become unrecoverable.",
         "delete-tenant-profiles-text": "Be careful, after the confirmation all selected tenant profiles will be removed and all related data will become unrecoverable.",
         "set-default-tenant-profile-title": "Are you sure you want to make the tenant profile '{{tenantProfileName}}' root?",
         "set-default-tenant-profile-title": "Are you sure you want to make the tenant profile '{{tenantProfileName}}' root?",
-        "set-default-tenant-profile-text": "After the confirmation the tenant profile will be marked as default and will be used for new tenants with no profile specified."
+        "set-default-tenant-profile-text": "After the confirmation the tenant profile will be marked as default and will be used for new tenants with no profile specified.",
+        "no-tenant-profiles-found": "No tenant profiles found.",
+        "create-new-tenant-profile": "Create a new one!"
     },
     },
     "timeinterval": {
     "timeinterval": {
         "seconds-interval": "{ seconds, plural, 1 {1 second} other {# seconds} }",
         "seconds-interval": "{ seconds, plural, 1 {1 second} other {# seconds} }",