UI: Improvement VC in mobile mode, fixed catch error message and add validation space in commit message

ui-ngx/src/app/core/http/entities-version-control.service.ts

@@ -38,11 +38,10 @@ import { EntityType, entityTypeTranslations } from '@shared/models/entity-type.m
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { selectIsUserLoaded } from '@core/auth/auth.selectors';
-import { catchError, finalize, map, switchMap, takeWhile, tap } from 'rxjs/operators';
+import { catchError, finalize, switchMap, takeWhile, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActionLoadFinish, ActionLoadStart } from '@core/interceptors/load.actions';
-import { NULL_UUID } from '@shared/models/id/has-uuid';
 
 @Injectable({
   providedIn: 'root'
@@ -184,6 +183,9 @@ export class EntitiesVersionControlService {
           (this.translate.instant(entityTypeTranslations.get(entityLoadError.target.entityType).type) as string).toLowerCase();
         messageArgs.targetEntityId = entityLoadError.target.id;
         break;
+      case EntityLoadErrorType.RUNTIME:
+        messageArgs.message = entityLoadError.message.toLowerCase();
+        break;
     }
     return this.sanitizer.bypassSecurityTrustHtml(this.translate.instant(messageId, messageArgs));
   }

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html

@@ -32,64 +32,63 @@
         <fieldset class="fields-group" [disabled]="isLoading$ | async">
           <legend class="group-title" translate>admin.auto-commit-entities</legend>
           <div fxLayout="column">
-            <div class="tb-control-list">
+            <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-              <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
+               let $index = index; last as isLast;"
-                 let $index = index; last as isLast;"
+                 fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-                   fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+              <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
-                <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+                <mat-expansion-panel-header>
-                  <mat-expansion-panel-header>
+                  <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-                    <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+                    <mat-panel-title>
-                      <mat-panel-title>
+                      <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-                        <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                        <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
-                          <div [innerHTML]="entityTypeText(entityTypeFormGroup)"></div>
+                      </div>
-                        </div>
+                    </mat-panel-title>
-                      </mat-panel-title>
+                    <span fxFlex></span>
-                      <span fxFlex></span>
+                    <button mat-icon-button style="min-width: 40px;"
-                      <button mat-icon-button style="min-width: 40px;"
+                            type="button"
-                              type="button"
+                            (click)="removeEntityType($index)"
-                              (click)="removeEntityType($index)"
+                            matTooltip="{{ 'action.remove' | translate }}"
-                              matTooltip="{{ 'action.remove' | translate }}"
+                            matTooltipPosition="above">
-                              matTooltipPosition="above">
+                      <mat-icon>delete</mat-icon>
-                        <mat-icon>delete</mat-icon>
+                    </button>
-                      </button>
+                  </div>
-                    </div>
+                </mat-expansion-panel-header>
-                  </mat-expansion-panel-header>
+                <ng-template matExpansionPanelContent>
-                  <ng-template matExpansionPanelContent>
+                  <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-                    <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+                    <mat-divider></mat-divider>
-                      <mat-divider></mat-divider>
+                    <div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
-                      <div fxLayout="column" fxLayout.gt-lg="row" fxLayoutGap.gt-lg="16px">
+                      <div fxLayout="row" fxLayoutGap="16px" fxLayout.xs="column" fxLayoutGap.xs="0px">
-                        <div fxLayout="row" fxLayoutGap="16px">
+                        <tb-entity-type-select
-                          <tb-entity-type-select
+                          showLabel
-                            showLabel
+                          formControlName="entityType"
-                            formControlName="entityType"
+                          required
-                            required
+                          [filterAllowedEntityTypes]="false"
-                            [filterAllowedEntityTypes]="false"
+                          [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-                            [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+                        </tb-entity-type-select>
-                          </tb-entity-type-select>
+                        <div formGroupName="config">
-                          <div formGroupName="config">
+                          <tb-branch-autocomplete
-                            <tb-branch-autocomplete
+                            emptyPlaceholder="{{ 'version-control.default' | translate }}"
-                              emptyPlaceholder="{{ 'version-control.default' | translate }}"
+                            [selectDefaultBranch]="false"
-                              [selectDefaultBranch]="false"
+                            formControlName="branch">
-                              formControlName="branch">
+                          </tb-branch-autocomplete>
-                            </tb-branch-autocomplete>
-                          </div>
-                        </div>
-                        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" formGroupName="config">
-                          <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
-                            {{ 'version-control.export-credentials' | translate }}
-                          </mat-checkbox>
-                          <mat-checkbox formControlName="saveAttributes">
-                            {{ 'version-control.export-attributes' | translate }}
-                          </mat-checkbox>
-                          <mat-checkbox formControlName="saveRelations">
-                            {{ 'version-control.export-relations' | translate }}
-                          </mat-checkbox>
                         </div>
                       </div>
+                      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"
+                           fxLayout.xs="column" fxLayoutAlign.xs="start start" fxLayoutGap.xs="0px"  formGroupName="config">
+                        <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
+                          {{ 'version-control.export-credentials' | translate }}
+                        </mat-checkbox>
+                        <mat-checkbox formControlName="saveAttributes">
+                          {{ 'version-control.export-attributes' | translate }}
+                        </mat-checkbox>
+                        <mat-checkbox formControlName="saveRelations">
+                          {{ 'version-control.export-relations' | translate }}
+                        </mat-checkbox>
+                      </div>
                     </div>
-                  </ng-template>
+                  </div>
-                </mat-expansion-panel>
+                </ng-template>
-              </div>
+              </mat-expansion-panel>
             </div>
             <div *ngIf="!entityTypesFormGroupArray().length">
               <span translate fxLayoutAlign="center center"

ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.scss

@@ -37,11 +37,6 @@
     }
   }
 
-  .tb-control-list {
-    overflow-y: auto;
-    max-height: 600px;
-  }
-
   .tb-prompt {
     margin: 30px 0;
   }

ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section style="min-width: 800px;">
+<section style="min-width: 600px;">
   <section *ngIf="!versionCreateResult$">
     <mat-toolbar>
       <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
@@ -35,7 +35,8 @@
           <mat-form-field class="mat-block" fxFlex>
             <mat-label translate>version-control.version-name</mat-label>
             <input required matInput formControlName="versionName">
-            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required')">
+            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                              createVersionFormGroup.get('versionName').hasError('pattern')">
               {{ 'version-control.version-name-required' | translate }}
             </mat-error>
           </mat-form-field>

ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.ts

@@ -20,7 +20,9 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {
   ComplexVersionCreateRequest,
   createDefaultEntityTypesVersionCreate,
-  SyncStrategy, syncStrategyHintMap, syncStrategyTranslationMap,
+  SyncStrategy,
+  syncStrategyHintMap,
+  syncStrategyTranslationMap,
   VersionCreateRequestType,
   VersionCreationResult
 } from '@shared/models/vc.models';
@@ -82,7 +84,7 @@ export class ComplexVersionCreateComponent extends PageComponent implements OnIn
   ngOnInit(): void {
     this.createVersionFormGroup = this.fb.group({
       branch: [this.branch, [Validators.required]],
-      versionName: [null, [Validators.required]],
+      versionName: [null, [Validators.required, Validators.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],
       syncStrategy: [SyncStrategy.MERGE, Validators.required],
       entityTypes: [createDefaultEntityTypesVersionCreate(), []],
     });

ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [ngStyle]="versionLoadResult$ ? {minWidth: '500px'} : {minWidth: '800px'}">
+<section [ngStyle]="versionLoadResult$ ? {minWidth: '500px'} : {minWidth: '600px'}">
   <section *ngIf="!versionLoadResult$">
     <mat-toolbar>
       <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>

ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html

@@ -19,81 +19,79 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>version-control.entities-to-export</legend>
     <div fxLayout="column">
-      <div class="tb-control-list">
+      <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-        <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
+               let $index = index; last as isLast;"
-                 let $index = index; last as isLast;"
+           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-             fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+        <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
-          <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+          <mat-expansion-panel-header>
-            <mat-expansion-panel-header>
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-              <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+              <mat-panel-title>
-                <mat-panel-title>
+                <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-                  <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                  <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
-                    <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
-                  </div>
-                </mat-panel-title>
-                <span fxFlex></span>
-                <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-                        type="button"
-                        (click)="removeEntityType($index)"
-                        matTooltip="{{ 'action.remove' | translate }}"
-                        matTooltipPosition="above">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </div>
-            </mat-expansion-panel-header>
-            <ng-template matExpansionPanelContent>
-              <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-                <mat-divider></mat-divider>
-                <div fxLayout="row" fxLayoutGap="16px">
-                  <tb-entity-type-select
-                    showLabel
-                    formControlName="entityType"
-                    required
-                    [filterAllowedEntityTypes]="false"
-                    [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-                  </tb-entity-type-select>
-                  <div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config">
-                    <mat-form-field fxFlex class="mat-block">
-                      <mat-label translate>version-control.sync-strategy</mat-label>
-                      <mat-select formControlName="syncStrategy">
-                        <mat-option [value]="'default'">
-                          {{ 'version-control.default' | translate }}
-                        </mat-option>
-                        <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
-                          {{syncStrategyTranslations.get(strategy) | translate}}
-                        </mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                    <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                      <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
-                        {{ 'version-control.export-credentials' | translate }}
-                      </mat-checkbox>
-                      <mat-checkbox formControlName="saveAttributes">
-                        {{ 'version-control.export-attributes' | translate }}
-                      </mat-checkbox>
-                      <mat-checkbox formControlName="saveRelations">
-                        {{ 'version-control.export-relations' | translate }}
-                      </mat-checkbox>
-                    </div>
-                  </div>
                 </div>
-                <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center"
+              </mat-panel-title>
-                     formGroupName="config" style="min-height: 76px;">
+              <span fxFlex></span>
-                  <mat-slide-toggle formControlName="allEntities">
+              <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
-                    {{ 'version-control.all-entities' | translate }}
+                      type="button"
-                  </mat-slide-toggle>
+                      (click)="removeEntityType($index)"
-                  <tb-entity-list
+                      matTooltip="{{ 'action.remove' | translate }}"
-                    fxFlex
+                      matTooltipPosition="above">
-                    [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
+                <mat-icon>delete</mat-icon>
-                    [entityType]="entityTypeFormGroup.get('entityType').value"
+              </button>
-                    required
+            </div>
-                    formControlName="entityIds">
+          </mat-expansion-panel-header>
-                  </tb-entity-list>
+          <ng-template matExpansionPanelContent>
+            <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+              <mat-divider></mat-divider>
+              <div fxLayout="row" fxLayoutGap="16px">
+                <tb-entity-type-select
+                  showLabel
+                  formControlName="entityType"
+                  required
+                  [filterAllowedEntityTypes]="false"
+                  [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+                </tb-entity-type-select>
+                <div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config">
+                  <mat-form-field fxFlex class="mat-block">
+                    <mat-label translate>version-control.sync-strategy</mat-label>
+                    <mat-select formControlName="syncStrategy">
+                      <mat-option [value]="'default'">
+                        {{ 'version-control.default' | translate }}
+                      </mat-option>
+                      <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
+                        {{syncStrategyTranslations.get(strategy) | translate}}
+                      </mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <div fxFlex fxLayout="column" fxLayoutGap="8px">
+                    <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="saveCredentials">
+                      {{ 'version-control.export-credentials' | translate }}
+                    </mat-checkbox>
+                    <mat-checkbox formControlName="saveAttributes">
+                      {{ 'version-control.export-attributes' | translate }}
+                    </mat-checkbox>
+                    <mat-checkbox formControlName="saveRelations">
+                      {{ 'version-control.export-relations' | translate }}
+                    </mat-checkbox>
+                  </div>
                 </div>
               </div>
-            </ng-template>
+              <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="start center"
-          </mat-expansion-panel>
+                   formGroupName="config" style="min-height: 76px;">
-        </div>
+                <mat-slide-toggle formControlName="allEntities">
+                  {{ 'version-control.all-entities' | translate }}
+                </mat-slide-toggle>
+                <tb-entity-list
+                  fxFlex
+                  [fxShow]="!entityTypeFormGroup.get('config').get('allEntities').value"
+                  [entityType]="entityTypeFormGroup.get('entityType').value"
+                  required
+                  formControlName="entityIds">
+                </tb-entity-list>
+              </div>
+            </div>
+          </ng-template>
+        </mat-expansion-panel>
       </div>
       <div *ngIf="!entityTypesFormGroupArray().length">
             <span translate fxLayoutAlign="center center"

ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss

@@ -32,11 +32,6 @@
       }
     }
 
-    .tb-control-list {
-      overflow-y: auto;
-      max-height: 600px;
-    }
-
     .tb-prompt {
       margin: 30px 0;
     }

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html

@@ -19,67 +19,65 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>version-control.entities-to-restore</legend>
     <div fxLayout="column">
-      <div class="tb-control-list">
+      <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-        <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
+               let $index = index; last as isLast;"
-                 let $index = index; last as isLast;"
+           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-             fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+        <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
-          <mat-expansion-panel class="entity-type-config" fxFlex [formGroup]="entityTypeFormGroup" [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)">
+          <mat-expansion-panel-header>
-            <mat-expansion-panel-header>
+            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-              <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+              <mat-panel-title>
-                <mat-panel-title>
+                <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-                  <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                  <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
-                    <div>{{ entityTypeText(entityTypeFormGroup) }}</div>
+                </div>
+              </mat-panel-title>
+              <span fxFlex></span>
+              <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
+                      type="button"
+                      (click)="removeEntityType($index)"
+                      matTooltip="{{ 'action.remove' | translate }}"
+                      matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </mat-expansion-panel-header>
+          <ng-template matExpansionPanelContent>
+            <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+              <mat-divider></mat-divider>
+              <div fxLayout="row" fxLayoutGap="32px">
+                <tb-entity-type-select
+                  showLabel
+                  formControlName="entityType"
+                  required
+                  [filterAllowedEntityTypes]="false"
+                  [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+                </tb-entity-type-select>
+                <div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config">
+                  <div fxFlex fxLayout="column" fxLayoutGap="8px">
+                    <mat-checkbox #removeOtherEntitiesCheckbox
+                                  formControlName="removeOtherEntities"
+                                  (click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)">
+                      {{ 'version-control.remove-other-entities' | translate }}
+                    </mat-checkbox>
+                    <mat-checkbox formControlName="findExistingEntityByName">
+                      {{ 'version-control.find-existing-entity-by-name' | translate }}
+                    </mat-checkbox>
                   </div>
-                </mat-panel-title>
+                  <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                <span fxFlex></span>
+                    <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
-                <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
+                      {{ 'version-control.load-credentials' | translate }}
-                        type="button"
+                    </mat-checkbox>
-                        (click)="removeEntityType($index)"
+                    <mat-checkbox formControlName="loadAttributes">
-                        matTooltip="{{ 'action.remove' | translate }}"
+                      {{ 'version-control.load-attributes' | translate }}
-                        matTooltipPosition="above">
+                    </mat-checkbox>
-                  <mat-icon>delete</mat-icon>
+                    <mat-checkbox formControlName="loadRelations">
-                </button>
+                      {{ 'version-control.load-relations' | translate }}
-              </div>
+                    </mat-checkbox>
-            </mat-expansion-panel-header>
-            <ng-template matExpansionPanelContent>
-              <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-                <mat-divider></mat-divider>
-                <div fxLayout="row" fxLayoutGap="32px">
-                  <tb-entity-type-select
-                    showLabel
-                    formControlName="entityType"
-                    required
-                    [filterAllowedEntityTypes]="false"
-                    [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-                  </tb-entity-type-select>
-                  <div fxFlex fxLayout="row" fxLayoutGap="16px" formGroupName="config">
-                    <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                      <mat-checkbox #removeOtherEntitiesCheckbox
-                                    formControlName="removeOtherEntities"
-                                    (click)="onRemoveOtherEntities(removeOtherEntitiesCheckbox, entityTypeFormGroup, $event)">
-                        {{ 'version-control.remove-other-entities' | translate }}
-                      </mat-checkbox>
-                      <mat-checkbox formControlName="findExistingEntityByName">
-                        {{ 'version-control.find-existing-entity-by-name' | translate }}
-                      </mat-checkbox>
-                    </div>
-                    <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                      <mat-checkbox *ngIf="entityTypeFormGroup.get('entityType').value === entityTypes.DEVICE" formControlName="loadCredentials">
-                        {{ 'version-control.load-credentials' | translate }}
-                      </mat-checkbox>
-                      <mat-checkbox formControlName="loadAttributes">
-                        {{ 'version-control.load-attributes' | translate }}
-                      </mat-checkbox>
-                      <mat-checkbox formControlName="loadRelations">
-                        {{ 'version-control.load-relations' | translate }}
-                      </mat-checkbox>
-                    </div>
                   </div>
                 </div>
               </div>
-            </ng-template>
+            </div>
-          </mat-expansion-panel>
+          </ng-template>
-        </div>
+        </mat-expansion-panel>
       </div>
       <div *ngIf="!entityTypesFormGroupArray().length">
             <span translate fxLayoutAlign="center center"

ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss

@@ -32,11 +32,6 @@
       }
     }
 
-    .tb-control-list {
-      overflow-y: auto;
-      max-height: 600px;
-    }
-
     .tb-prompt {
       margin: 30px 0;
     }

ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section style="min-width: 400px;">
+<section style="min-width: 300px;">
   <section *ngIf="!versionCreateResult$">
     <mat-toolbar>
       <h2>{{ 'version-control.create-entity-version' | translate }}</h2>
@@ -34,7 +34,8 @@
           <mat-form-field class="mat-block" fxFlex>
             <mat-label translate>version-control.version-name</mat-label>
             <input required matInput formControlName="versionName">
-            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required')">
+            <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                              createVersionFormGroup.get('versionName').hasError('pattern')">
               {{ 'version-control.version-name-required' | translate }}
             </mat-error>
           </mat-form-field>

ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.ts

@@ -80,7 +80,7 @@ export class EntityVersionCreateComponent extends PageComponent implements OnIni
     this.createVersionFormGroup = this.fb.group({
       branch: [this.branch, [Validators.required]],
       versionName: [this.translate.instant('version-control.default-create-entity-version-name',
-        {entityName: this.entityName}), [Validators.required]],
+        {entityName: this.entityName}), [Validators.required, Validators.pattern(/(?:.|\s)*\S(&:.|\s)*/)]],
       saveRelations: [false, []],
       saveAttributes: [true, []],
       saveCredentials: [true, []]

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.scss

@@ -19,6 +19,7 @@
 .entity-version-diff-view {
   position: relative;
   &:not(.tb-fullscreen) {
+    max-height: 95vh;
     &.content-ready {
       width: 600px;
       @media #{$mat-gt-sm} {

ui-ngx/src/app/modules/home/components/vc/entity-version-diff.component.ts

@@ -161,7 +161,7 @@ export class EntityVersionDiffComponent extends PageComponent implements OnInit,
           setTimeout(() => {
             this.diffCount = this.differ.getNumDiffs();
             this.updateHasNextAndPrevious();
-          });
+          }, 1);
         });
       });
     });

ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section [ngStyle]="entityDataInfo ? {minWidth: '400px'} : {}">
+<section [ngStyle]="entityDataInfo ? {minWidth: '300px'} : {}">
   <section *ngIf="!versionLoadResult$">
     <mat-toolbar *ngIf="entityDataInfo">
       <h2>{{ 'version-control.restore-entity-from-version' | translate: {versionName} }}</h2>

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html

@@ -31,32 +31,36 @@
           </tb-branch-autocomplete>
         </div>
         <span fxFlex></span>
-        <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
+        <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center end">
-                #createVersionButton
+          <button *ngIf="singleEntityMode" mat-stroked-button color="primary"
-                [disabled]="(isLoading$ | async)"
+                  #createVersionButton
-                (click)="toggleCreateVersion($event, createVersionButton)">
+                  [disabled]="(isLoading$ | async)"
-          <mat-icon>update</mat-icon>
+                  (click)="toggleCreateVersion($event, createVersionButton)">
-          {{'version-control.create-version' | translate }}
+            <mat-icon>update</mat-icon>
-        </button>
+            {{'version-control.create-version' | translate }}
-        <button *ngIf="!singleEntityMode" mat-stroked-button color="primary"
+          </button>
-                #complexCreateVersionButton
+          <button *ngIf="!singleEntityMode" mat-stroked-button color="primary"
-                [disabled]="(isLoading$ | async)"
+                  #complexCreateVersionButton
-                (click)="toggleComplexCreateVersion($event, complexCreateVersionButton)">
+                  [disabled]="(isLoading$ | async)"
-          <mat-icon>update</mat-icon>
+                  (click)="toggleComplexCreateVersion($event, complexCreateVersionButton)">
-          {{'version-control.create-entities-version' | translate }}
+            <mat-icon>update</mat-icon>
-        </button>
+            {{'version-control.create-entities-version' | translate }}
-        <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
+          </button>
-                matTooltip="{{ 'action.refresh' | translate }}"
+          <div fxLayout="row">
-                matTooltipPosition="above">
+            <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
-          <mat-icon>refresh</mat-icon>
+                    matTooltip="{{ 'action.refresh' | translate }}"
-        </button>
+                    matTooltipPosition="above">
-        <button mat-icon-button
+              <mat-icon>refresh</mat-icon>
-                [disabled]="isLoading$ | async"
+            </button>
-                (click)="enterFilterMode()"
+            <button mat-icon-button
-                matTooltip="{{ 'action.search' | translate }}"
+                    [disabled]="isLoading$ | async"
-                matTooltipPosition="above">
+                    (click)="enterFilterMode()"
-          <mat-icon>search</mat-icon>
+                    matTooltip="{{ 'action.search' | translate }}"
-        </button>
+                    matTooltipPosition="above">
+              <mat-icon>search</mat-icon>
+            </button>
+          </div>
+        </div>
       </div>
     </mat-toolbar>
     <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode">
@@ -70,7 +74,7 @@
           <mat-label>&nbsp;</mat-label>
           <input #searchInput matInput
                  [(ngModel)]="pageLink.textSearch"
-                 placeholder="{{ 'common.enter-search' | translate }}"/>
+                 placeholder="{{ 'version-control.search' | translate }}"/>
         </mat-form-field>
         <button mat-icon-button (click)="exitFilterMode()"
                 matTooltip="{{ 'action.close' | translate }}"

ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts

@@ -18,11 +18,15 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef, EventEmitter,
+  ElementRef,
+  EventEmitter,
   Input,
   OnDestroy,
-  OnInit, Output, Renderer2,
+  OnInit,
-  ViewChild, ViewContainerRef
+  Output,
+  Renderer2,
+  ViewChild,
+  ViewContainerRef
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
@@ -213,7 +217,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               }
             }
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       createVersionPopover.tbComponentRef.instance.popoverComponent = createVersionPopover;
     }
   }
@@ -240,7 +244,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               }
             }
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       complexCreateVersionPopover.tbComponentRef.instance.popoverComponent = complexCreateVersionPopover;
     }
   }
@@ -290,7 +294,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
               this.versionRestored.emit();
             }
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       restoreVersionPopover.tbComponentRef.instance.popoverComponent = restoreVersionPopover;
     }
   }
@@ -312,7 +316,7 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
           onClose: (result: VersionLoadResult | null) => {
             restoreEntitiesVersionPopover.hide();
           }
-        }, {}, {}, {}, false);
+        }, {maxHeight: '100vh', height: '100%', padding: '10px'}, {}, {}, false);
       restoreEntitiesVersionPopover.tbComponentRef.instance.popoverComponent = restoreEntitiesVersionPopover;
     }
   }

ui-ngx/src/app/modules/home/components/vc/repository-settings.component.scss

@@ -34,3 +34,8 @@
     }
   }
 }
+:host ::ng-deep {
+  .mat-checkbox-layout {
+    white-space: normal !important;
+  }
+}

ui-ngx/src/app/shared/models/vc.models.ts

@@ -178,13 +178,15 @@ export interface EntityTypeLoadResult {
 
 export enum EntityLoadErrorType {
   DEVICE_CREDENTIALS_CONFLICT = 'DEVICE_CREDENTIALS_CONFLICT',
-  MISSING_REFERENCED_ENTITY = 'MISSING_REFERENCED_ENTITY'
+  MISSING_REFERENCED_ENTITY = 'MISSING_REFERENCED_ENTITY',
+  RUNTIME = 'RUNTIME'
 }
 
 export const entityLoadErrorTranslationMap = new Map<EntityLoadErrorType, string>(
   [
     [EntityLoadErrorType.DEVICE_CREDENTIALS_CONFLICT, 'version-control.device-credentials-conflict'],
-    [EntityLoadErrorType.MISSING_REFERENCED_ENTITY, 'version-control.missing-referenced-entity']
+    [EntityLoadErrorType.MISSING_REFERENCED_ENTITY, 'version-control.missing-referenced-entity'],
+    [EntityLoadErrorType.RUNTIME, 'version-control.runtime-failed']
   ]
 );
 
@@ -192,6 +194,7 @@ export interface EntityLoadError {
   type: EntityLoadErrorType;
   source: EntityId;
   target: EntityId;
+  message?: string;
 }
 
 export interface VersionLoadResult {

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3318,6 +3318,7 @@
     "version-control": {
         "version-control": "Version control",
         "management": "Version control management",
+        "search": "Search versions",
         "branch": "Branch",
         "default": "Default",
         "select-branch": "Select branch",
@@ -3378,7 +3379,8 @@
         "sync-strategy-merge-hint": "Creates or updates selected entities in the repository. All other repository entities are <b>not modified</b>.",
         "sync-strategy-overwrite-hint": "Creates or updates selected entities in the repository. All other repository entities are <b>deleted</b>.",
         "device-credentials-conflict": "Failed to load the device with external id <b>{{entityId}}</b><br/>due to the same credentials are already present in the database for another device.<br/>Please consider disabling the <b>load credentials</b> setting in the restore form.",
-        "missing-referenced-entity": "Failed to load the <b>{{sourceEntityTypeName}}</b> with external id <b>{{sourceEntityId}}</b><br/>because it references missing <b>{{targetEntityTypeName}}</b> with id <b>{{targetEntityId}}</b>."
+        "missing-referenced-entity": "Failed to load the <b>{{sourceEntityTypeName}}</b> with external id <b>{{sourceEntityId}}</b><br/>because it references missing <b>{{targetEntityTypeName}}</b> with id <b>{{targetEntityId}}</b>.",
+        "runtime-failed": "<b>Failed:</b> {{message}}"
     },
     "widget": {
         "widget-library": "Widgets Library",