From 156fa3f0d22e1518e27303e3c71c795288b2e827 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Tue, 19 Jul 2022 11:04:49 +0300
Subject: [PATCH] UI: Improve complex version control popups layout.

---
 .../vc/complex-version-create.component.html  |  62 +++---
 .../vc/complex-version-load.component.html    |  16 +-
 ...entity-types-version-create.component.html | 188 +++++++++---------
 .../entity-types-version-create.component.ts  |   2 +-
 .../entity-types-version-load.component.html  | 162 ++++++++-------
 .../entity-types-version-load.component.scss  |  63 ------
 .../vc/entity-types-version-load.component.ts |   2 +-
 ...ss => entity-types-version.component.scss} |  60 +++---
 8 files changed, 244 insertions(+), 311 deletions(-)
 delete mode 100644 ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
 rename ui-ngx/src/app/modules/home/components/vc/{entity-types-version-create.component.scss => entity-types-version.component.scss} (55%)

diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
index ef4226c393..317d6e9cb6 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.html
@@ -16,7 +16,7 @@
 
 -->
 
-<section *ngIf="!versionCreateResult$">
+<section *ngIf="!versionCreateResult$" fxLayout="column" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.create-entities-version' | translate }}</h2>
     <span fxFlex></span>
@@ -24,38 +24,36 @@
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="createVersionFormGroup" style="padding-top: 16px;">
-    <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <tb-branch-autocomplete
-          fxFlex
-          required
-          formControlName="branch">
-        </tb-branch-autocomplete>
-        <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') ||
-                            createVersionFormGroup.get('versionName').hasError('pattern')">
-            {{ 'version-control.version-name-required' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field fxFlex class="mat-block" style="margin-bottom: 24px;">
-          <mat-label translate>version-control.default-sync-strategy</mat-label>
-          <mat-select required formControlName="syncStrategy">
-            <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
-              {{syncStrategyTranslations.get(strategy) | translate}}
-            </mat-option>
-          </mat-select>
-          <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
-        </mat-form-field>
-        <tb-entity-types-version-create
-          formControlName="entityTypes">
-        </tb-entity-types-version-create>
-      </div>
-    </fieldset>
+  <form [formGroup]="createVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
+    <div fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
+      <tb-branch-autocomplete
+        fxFlex
+        required
+        formControlName="branch">
+      </tb-branch-autocomplete>
+      <mat-form-field fxFlex class="mat-block">
+        <mat-label translate>version-control.version-name</mat-label>
+        <input required matInput formControlName="versionName">
+        <mat-error *ngIf="createVersionFormGroup.get('versionName').hasError('required') ||
+                        createVersionFormGroup.get('versionName').hasError('pattern')">
+          {{ 'version-control.version-name-required' | translate }}
+        </mat-error>
+      </mat-form-field>
+    </div>
+    <mat-form-field class="mat-block" style="margin-bottom: 24px;">
+      <mat-label translate>version-control.default-sync-strategy</mat-label>
+      <mat-select required formControlName="syncStrategy">
+        <mat-option *ngFor="let strategy of syncStrategies" [value]="strategy">
+          {{syncStrategyTranslations.get(strategy) | translate}}
+        </mat-option>
+      </mat-select>
+      <mat-hint [innerHTML]="(syncStrategyHints.get(createVersionFormGroup.get('syncStrategy').value) | translate) | safe:'html'"></mat-hint>
+    </mat-form-field>
+    <tb-entity-types-version-create
+      formControlName="entityTypes">
+    </tb-entity-types-version-create>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
index 4fd54b8b11..86e756b7f1 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-load.component.html
@@ -16,7 +16,7 @@
 
 -->
 
-<section *ngIf="!versionLoadResult$">
+<section *ngIf="!versionLoadResult$" fxLayout="column" style="height: 100%;">
   <mat-toolbar>
     <h2>{{ 'version-control.restore-entities-from-version' | translate: {versionName} }}</h2>
     <span fxFlex></span>
@@ -24,16 +24,12 @@
   <mat-progress-bar color="warn" style="z-index: 10; width: 100%; margin-bottom: -4px;" mode="indeterminate"
                     *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <form [formGroup]="loadVersionFormGroup" style="padding-top: 16px;">
-    <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <tb-entity-types-version-load
-          formControlName="entityTypes">
-        </tb-entity-types-version-load>
-      </div>
-    </fieldset>
+  <form [formGroup]="loadVersionFormGroup" fxLayout="column" style="flex: 1; padding-top: 16px; overflow: auto;">
+    <tb-entity-types-version-load
+      formControlName="entityTypes">
+    </tb-entity-types-version-load>
   </form>
-  <div fxLayoutAlign="end center" fxLayoutGap="8px">
+  <div fxLayoutAlign="end center" fxLayoutGap="8px" style="padding-top: 16px;">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
index bc2131c5a1..14c98613fc 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.html
@@ -15,102 +15,100 @@
     limitations under the License.
 
 -->
-<section class="entity-types-version-create" [formGroup]="entityTypesVersionCreateFormGroup" fxLayout="column">
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>version-control.entities-to-export</legend>
-    <div fxLayout="column">
-      <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-               let $index = index; last as isLast;"
-           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-        <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
-                             [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
-          <mat-expansion-panel-header>
-            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-              <mat-panel-title>
-                <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-                  <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>
-          <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-            <mat-divider></mat-divider>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
-              <tb-entity-type-select
-                showLabel
-                formControlName="entityType"
-                required
-                [filterAllowedEntityTypes]="false"
-                [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-              </tb-entity-type-select>
-              <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="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>
+<fieldset [formGroup]="entityTypesVersionCreateFormGroup" class="fields-group" fxLayout="column">
+  <legend class="group-title" translate>version-control.entities-to-export</legend>
+  <div fxLayout="column" style="flex: 1; overflow: auto;">
+    <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
+             let $index = index; last as isLast;"
+         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+                           [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
+        <mat-expansion-panel-header>
+          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <mat-panel-title>
+              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                <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>
+        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+          <mat-divider></mat-divider>
+          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px">
+            <tb-entity-type-select
+              showLabel
+              formControlName="entityType"
+              required
+              [filterAllowedEntityTypes]="false"
+              [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+            </tb-entity-type-select>
+            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="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 fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
-                 formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
-              <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>
-        </mat-expansion-panel>
-      </div>
-      <div *ngIf="!entityTypesFormGroupArray().length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">version-control.no-entities-to-export-prompt</span>
-      </div>
-      <div style="padding-top: 16px;" fxLayout="row">
-        <button mat-raised-button color="primary"
-                type="button"
-                [disabled]="!addEnabled()"
-                (click)="addEntityType()">
-          <span translate>version-control.add-entity-type</span>
-        </button>
-        <span fxFlex></span>
-        <button mat-raised-button color="primary"
-                type="button"
-                [disabled]="!entityTypesFormGroupArray().length"
-                (click)="removeAll()">
-          <span translate>version-control.remove-all</span>
-        </button>
-      </div>
+          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutAlign.gt-xs="start center"
+               formGroupName="config" ngStyle.gt-xs="min-height: 76px;">
+            <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>
+      </mat-expansion-panel>
+    </div>
+    <div *ngIf="!entityTypesFormGroupArray().length">
+          <span translate fxLayoutAlign="center center"
+                class="tb-prompt">version-control.no-entities-to-export-prompt</span>
     </div>
-  </fieldset>
-</section>
+  </div>
+  <div style="padding-top: 16px;" fxLayout="row">
+    <button mat-raised-button color="primary"
+            type="button"
+            [disabled]="!addEnabled()"
+            (click)="addEntityType()">
+      <span translate>version-control.add-entity-type</span>
+    </button>
+    <span fxFlex></span>
+    <button mat-raised-button color="primary"
+            type="button"
+            [disabled]="!entityTypesFormGroupArray().length"
+            (click)="removeAll()">
+      <span translate>version-control.remove-all</span>
+    </button>
+  </div>
+</fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
index f7e8541d07..789ac72922 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.ts
@@ -43,7 +43,7 @@ import { isDefinedAndNotNull } from '@core/utils';
 @Component({
   selector: 'tb-entity-types-version-create',
   templateUrl: './entity-types-version-create.component.html',
-  styleUrls: ['./entity-types-version-create.component.scss'],
+  styleUrls: ['./entity-types-version.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
index 824759bec0..6910fa56af 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.html
@@ -15,89 +15,87 @@
     limitations under the License.
 
 -->
-<section class="entity-types-version-load" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column">
-  <fieldset class="fields-group">
-    <legend class="group-title" translate>version-control.entities-to-restore</legend>
-    <div fxLayout="column">
-      <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
-               let $index = index; last as isLast;"
-           fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
-        <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
-                             [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
-          <mat-expansion-panel-header>
-            <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-              <mat-panel-title>
-                <div fxLayout="row" fxFlex fxLayoutAlign="start center">
-                  <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>
-          <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
-            <mat-divider></mat-divider>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
-              <tb-entity-type-select
-                fxFlex
-                showLabel
-                formControlName="entityType"
-                required
-                [filterAllowedEntityTypes]="false"
-                [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
-              </tb-entity-type-select>
-              <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" 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>
+<fieldset class="fields-group" [formGroup]="entityTypesVersionLoadFormGroup" fxLayout="column">
+  <legend class="group-title" translate>version-control.entities-to-restore</legend>
+  <div fxLayout="column" style="flex: 1; overflow: auto;">
+    <div *ngFor="let entityTypeFormGroup of entityTypesFormGroupArray(); trackBy: trackByEntityType;
+             let $index = index; last as isLast;"
+         fxLayout="row" fxLayoutAlign="start center" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}">
+      <mat-expansion-panel class="entity-type-config" [ngClass]="{'load': loading}" fxFlex [formGroup]="entityTypeFormGroup"
+                           [expanded]="entityTypesFormGroupExpanded(entityTypeFormGroup)" (opened)="loading = false">
+        <mat-expansion-panel-header>
+          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
+            <mat-panel-title>
+              <div fxLayout="row" fxFlex fxLayoutAlign="start center">
+                <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>
+        <div class="entity-type-config-content" fxLayout="column" fxLayoutGap="0.5em">
+          <mat-divider></mat-divider>
+          <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="32px">
+            <tb-entity-type-select
+              fxFlex
+              showLabel
+              formControlName="entityType"
+              required
+              [filterAllowedEntityTypes]="false"
+              [allowedEntityTypes]="allowedEntityTypes(entityTypeFormGroup)">
+            </tb-entity-type-select>
+            <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="16px" fxLayoutGap.xs="8px" 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>
-        </mat-expansion-panel>
-      </div>
-      <div *ngIf="!entityTypesFormGroupArray().length">
-            <span translate fxLayoutAlign="center center"
-                  class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
-      </div>
-      <div style="padding-top: 16px;" fxLayout="row">
-        <button mat-raised-button color="primary"
-                type="button"
-                [disabled]="!addEnabled()"
-                (click)="addEntityType()">
-          <span translate>version-control.add-entity-type</span>
-        </button>
-        <span fxFlex></span>
-        <button mat-raised-button color="primary"
-                type="button"
-                [disabled]="!entityTypesFormGroupArray().length"
-                (click)="removeAll()">
-          <span translate>version-control.remove-all</span>
-        </button>
-      </div>
+        </div>
+      </mat-expansion-panel>
+    </div>
+    <div *ngIf="!entityTypesFormGroupArray().length">
+          <span translate fxLayoutAlign="center center"
+                class="tb-prompt">version-control.no-entities-to-restore-prompt</span>
     </div>
-  </fieldset>
-</section>
+  </div>
+  <div style="padding-top: 16px;" fxLayout="row">
+    <button mat-raised-button color="primary"
+            type="button"
+            [disabled]="!addEnabled()"
+            (click)="addEntityType()">
+      <span translate>version-control.add-entity-type</span>
+    </button>
+    <span fxFlex></span>
+    <button mat-raised-button color="primary"
+            type="button"
+            [disabled]="!entityTypesFormGroupArray().length"
+            (click)="removeAll()">
+      <span translate>version-control.remove-all</span>
+    </button>
+  </div>
+</fieldset>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
deleted file mode 100644
index 6f1f26c640..0000000000
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright © 2016-2022 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.
- */
-:host {
-  .entity-types-version-load {
-    .fields-group {
-      padding: 0 16px 8px;
-      margin-bottom: 10px;
-      border: 1px groove rgba(0, 0, 0, .25);
-      border-radius: 4px;
-
-      legend {
-        color: rgba(0, 0, 0, .7);
-        width: fit-content;
-      }
-
-      legend + * {
-        display: block;
-        margin-top: 16px;
-      }
-    }
-
-    .tb-prompt {
-      margin: 30px 0;
-    }
-
-    mat-expansion-panel.entity-type-config {
-      box-shadow: none;
-      border: 1px groove rgba(0, 0, 0, .25);
-      .mat-expansion-panel-header {
-        padding: 0 24px 0 8px;
-        height: 48px;
-      }
-      .entity-type-config-content {
-        padding: 0 8px 8px;
-      }
-    }
-  }
-}
-
-:host ::ng-deep {
-  .mat-expansion-panel.entity-type-config {
-    .mat-expansion-panel-body {
-      padding: 0;
-    }
-    &.load .mat-expansion-panel-content {
-      height: 0;
-      visibility: hidden;
-    }
-  }
-}
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
index 0a02c95cff..6d1e542fa3 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version-load.component.ts
@@ -41,7 +41,7 @@ import { RemoveOtherEntitiesConfirmComponent } from '@home/components/vc/remove-
 @Component({
   selector: 'tb-entity-types-version-load',
   templateUrl: './entity-types-version-load.component.html',
-  styleUrls: ['./entity-types-version-load.component.scss'],
+  styleUrls: ['./entity-types-version.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss b/ui-ngx/src/app/modules/home/components/vc/entity-types-version.component.scss
similarity index 55%
rename from ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
rename to ui-ngx/src/app/modules/home/components/vc/entity-types-version.component.scss
index 47b5de00b8..4a7e1eca65 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-types-version-create.component.scss
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-types-version.component.scss
@@ -13,39 +13,45 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  .entity-types-version-create {
-    .fields-group {
-      padding: 0 16px 8px;
-      margin-bottom: 10px;
-      border: 1px groove rgba(0, 0, 0, .25);
-      border-radius: 4px;
 
-      legend {
-        color: rgba(0, 0, 0, .7);
-        width: fit-content;
-      }
+@import '../../../../../scss/constants';
+
+:host {
+  min-height: 200px;
+  min-width: 300px;
+  @media #{$mat-gt-xs} {
+    min-width: 550px;
+  }
+  .fields-group {
+    height: 100%;
+    padding: 0 16px 8px;
+    border: 1px groove rgba(0, 0, 0, .25);
+    border-radius: 4px;
 
-      legend + * {
-        display: block;
-        margin-top: 16px;
-      }
+    legend {
+      color: rgba(0, 0, 0, .7);
+      width: fit-content;
     }
 
-    .tb-prompt {
-      margin: 30px 0;
+    legend + * {
+      display: block;
+      margin-top: 16px;
     }
+  }
+
+  .tb-prompt {
+    margin: 30px 0;
+  }
 
-    mat-expansion-panel.entity-type-config {
-      box-shadow: none;
-      border: 1px groove rgba(0, 0, 0, .25);
-      .mat-expansion-panel-header {
-        padding: 0 24px 0 8px;
-        height: 48px;
-      }
-      .entity-type-config-content {
-        padding: 0 8px 8px;
-      }
+  mat-expansion-panel.entity-type-config {
+    box-shadow: none;
+    border: 1px groove rgba(0, 0, 0, .25);
+    .mat-expansion-panel-header {
+      padding: 0 24px 0 8px;
+      height: 48px;
+    }
+    .entity-type-config-content {
+      padding: 0 8px 8px;
     }
   }
 }