From 8382850d1a0c056561e6b071477f5b273a9cdee8 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 1 Jun 2022 16:35:20 +0300
Subject: [PATCH] UI: Minor improvements

---
 .../vc/auto-commit-settings.component.html      |  6 +++---
 .../vc/auto-commit-settings.component.ts        |  4 ++--
 .../vc/complex-version-create.component.html    |  3 ++-
 .../vc/complex-version-create.component.ts      |  4 +++-
 .../entity-types-version-create.component.html  |  6 +++---
 .../vc/entity-types-version-create.component.ts |  4 ++--
 .../vc/entity-types-version-load.component.html |  6 +++---
 .../vc/entity-types-version-load.component.ts   |  6 +++---
 .../vc/entity-version-create.component.html     |  6 +++---
 .../vc/entity-version-create.component.ts       |  2 +-
 .../vc/entity-version-restore.component.html    |  6 +++---
 .../vc/entity-version-restore.component.ts      |  4 ++--
 .../app/shared/components/popover.component.ts  | 12 +++++++-----
 .../app/shared/components/popover.service.ts    |  8 ++------
 ui-ngx/src/app/shared/models/vc.models.ts       | 17 ++++++++++++-----
 .../assets/locale/locale.constant-en_US.json    |  4 +++-
 16 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
index a33d9ea374..e95cfc59fb 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.html
@@ -75,12 +75,12 @@
                           </div>
                         </div>
                         <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" formGroupName="config">
-                          <mat-checkbox formControlName="saveRelations">
-                            {{ 'version-control.export-relations' | 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>
diff --git a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.ts b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.ts
index 8ac301338e..dc009d49cd 100644
--- a/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/auto-commit-settings.component.ts
@@ -97,8 +97,8 @@ export class AutoCommitSettingsComponent extends PageComponent implements OnInit
     const entityTypesArray = this.autoCommitSettingsForm.get('entityTypes') as FormArray;
     const config: AutoVersionCreateConfig = {
       branch: null,
-      saveRelations: false,
-      saveAttributes: false
+      saveAttributes: true,
+      saveRelations: false
     };
     const allowed = this.allowedEntityTypes();
     let entityType: EntityType = null;
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 2c2f5bf274..4ace5e8849 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
@@ -39,13 +39,14 @@
               {{ 'version-control.version-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field fxFlex class="mat-block" style="margin-bottom: 16px;">
             <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">
diff --git a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.ts b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.ts
index c152e6b447..c5c4124627 100644
--- a/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/complex-version-create.component.ts
@@ -20,7 +20,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {
   ComplexVersionCreateRequest,
   createDefaultEntityTypesVersionCreate,
-  SyncStrategy, syncStrategyTranslationMap,
+  SyncStrategy, syncStrategyHintMap, syncStrategyTranslationMap,
   VersionCreateRequestType,
   VersionCreationResult
 } from '@shared/models/vc.models';
@@ -51,6 +51,8 @@ export class ComplexVersionCreateComponent extends PageComponent implements OnIn
 
   syncStrategyTranslations = syncStrategyTranslationMap;
 
+  syncStrategyHints = syncStrategyHintMap;
+
   resultMessage: string;
 
   versionCreateResult: VersionCreationResult = null;
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 0ab5eca4e0..90712727e4 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
@@ -65,12 +65,12 @@
                       </mat-select>
                     </mat-form-field>
                     <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                      <mat-checkbox formControlName="saveRelations">
-                        {{ 'version-control.export-relations' | 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>
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 44cb11dfa1..0d80b71adb 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
@@ -183,8 +183,8 @@ export class EntityTypesVersionCreateComponent extends PageComponent implements
     const entityTypesArray = this.entityTypesVersionCreateFormGroup.get('entityTypes') as FormArray;
     const config: EntityTypeVersionCreateConfig = {
       syncStrategy: null,
-      saveRelations: false,
-      saveAttributes: false,
+      saveAttributes: true,
+      saveRelations: true,
       allEntities: true,
       entityIds: []
     };
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 c07fa138be..4c1cd26f84 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
@@ -64,12 +64,12 @@
                       </mat-checkbox>
                     </div>
                     <div fxFlex fxLayout="column" fxLayoutGap="8px">
-                      <mat-checkbox formControlName="loadRelations">
-                        {{ 'version-control.load-relations' | 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>
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 14586a5ee6..d983920cec 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
@@ -164,10 +164,10 @@ export class EntityTypesVersionLoadComponent extends PageComponent implements On
   public addEntityType() {
     const entityTypesArray = this.entityTypesVersionLoadFormGroup.get('entityTypes') as FormArray;
     const config: EntityTypeVersionLoadConfig = {
-      loadRelations: false,
-      loadAttributes: false,
+      loadAttributes: true,
+      loadRelations: true,
       removeOtherEntities: false,
-      findExistingEntityByName: false
+      findExistingEntityByName: true
     };
     const allowed = this.allowedEntityTypes();
     let entityType: EntityType = null;
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
index 72dc6e7d48..90f338ad0e 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.html
@@ -38,12 +38,12 @@
               {{ 'version-control.version-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-checkbox formControlName="saveRelations" style="margin-bottom: 16px;">
-            {{ 'version-control.export-relations' | translate }}
-          </mat-checkbox>
           <mat-checkbox formControlName="saveAttributes" style="margin-bottom: 16px;">
             {{ 'version-control.export-attributes' | translate }}
           </mat-checkbox>
+          <mat-checkbox formControlName="saveRelations" style="margin-bottom: 16px;">
+            {{ 'version-control.export-relations' | translate }}
+          </mat-checkbox>
         </div>
       </fieldset>
     </form>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.ts
index cc5ddcb568..c2c6fa48b5 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-create.component.ts
@@ -67,7 +67,7 @@ export class EntityVersionCreateComponent extends PageComponent implements OnIni
       versionName: [this.translate.instant('version-control.default-create-entity-version-name',
         {entityName: this.entityName}), [Validators.required]],
       saveRelations: [false, []],
-      saveAttributes: [false, []]
+      saveAttributes: [true, []]
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
index 6a39e272e3..8dc81e38e4 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.html
@@ -27,12 +27,12 @@
   <form *ngIf="entityDataInfo" [formGroup]="restoreFormGroup" style="padding-top: 16px;">
     <fieldset [disabled]="isLoading$ | async">
       <div fxFlex fxLayout="column">
-        <mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations" style="margin-bottom: 16px;">
-          {{ 'version-control.load-relations' | translate }}
-        </mat-checkbox>
         <mat-checkbox *ngIf="entityDataInfo.hasAttributes" formControlName="loadAttributes" style="margin-bottom: 16px;">
           {{ 'version-control.load-attributes' | translate }}
         </mat-checkbox>
+        <mat-checkbox *ngIf="entityDataInfo.hasRelations" formControlName="loadRelations" style="margin-bottom: 16px;">
+          {{ 'version-control.load-relations' | translate }}
+        </mat-checkbox>
       </div>
     </fieldset>
   </form>
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.ts
index 5e3a63243d..146a8570c2 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-version-restore.component.ts
@@ -70,8 +70,8 @@ export class EntityVersionRestoreComponent extends PageComponent implements OnIn
 
   ngOnInit(): void {
     this.restoreFormGroup = this.fb.group({
-      loadRelations: [true, []],
-      loadAttributes: [true, []]
+      loadAttributes: [true, []],
+      loadRelations: [true, []]
     });
     this.entitiesVersionControlService.getEntityDataInfo(this.externalEntityId, this.versionId).subscribe((data) => {
       this.entityDataInfo = data;
diff --git a/ui-ngx/src/app/shared/components/popover.component.ts b/ui-ngx/src/app/shared/components/popover.component.ts
index c7e498a236..99321974af 100644
--- a/ui-ngx/src/app/shared/components/popover.component.ts
+++ b/ui-ngx/src/app/shared/components/popover.component.ts
@@ -55,7 +55,7 @@ import {
   POSITION_MAP,
   PropertyMapping
 } from '@shared/components/popover.models';
-import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, take, takeUntil } from 'rxjs/operators';
 import { isNotEmptyStr, onParentScrollOrWindowResize } from '@core/utils';
 
 export type TbPopoverTrigger = 'click' | 'focus' | 'hover' | null;
@@ -372,7 +372,7 @@ export class TbPopoverComponent implements OnDestroy, OnInit {
   }
 
   get tbVisible(): boolean {
-    return this.visible;
+    return this.visible && this.tbAnimationState === 'active';
   }
 
   visible = false;
@@ -514,10 +514,12 @@ export class TbPopoverComponent implements OnDestroy, OnInit {
       const el = this.origin.elementRef.nativeElement;
       this.intersectionObserver.unobserve(el);
     }
-
-    this.tbVisible = false;
-    this.tbVisibleChange.next(false);
+    this.tbAnimationState = 'void';
     this.cdr.detectChanges();
+    this.tbAnimationDone.pipe(take(1)).subscribe(() => {
+      this.tbVisible = false;
+      this.cdr.detectChanges();
+    });
   }
 
   updateByDirective(): void {
diff --git a/ui-ngx/src/app/shared/components/popover.service.ts b/ui-ngx/src/app/shared/components/popover.service.ts
index 2b64ee8009..713e8d337b 100644
--- a/ui-ngx/src/app/shared/components/popover.service.ts
+++ b/ui-ngx/src/app/shared/components/popover.service.ts
@@ -80,9 +80,7 @@ export class TbPopoverService {
     component.tbShowCloseButton = showCloseButton;
     component.tbVisibleChange.subscribe((visible: boolean) => {
       if (!visible) {
-        component.tbAnimationDone.subscribe(() => {
-          componentRef.destroy();
-        });
+        componentRef.destroy();
       }
     });
     component.tbDestroy.subscribe(() => {
@@ -132,9 +130,7 @@ export class TbPopoverService {
       component.tbVisibleChange.subscribe((visible: boolean) => {
         if (!visible) {
           visibleFn(false);
-          component.tbAnimationDone.subscribe(() => {
-            componentRef.destroy();
-          });
+          componentRef.destroy();
         }
       });
       component.tbDestroy.subscribe(() => {
diff --git a/ui-ngx/src/app/shared/models/vc.models.ts b/ui-ngx/src/app/shared/models/vc.models.ts
index e3a7be5c54..ee718c3aec 100644
--- a/ui-ngx/src/app/shared/models/vc.models.ts
+++ b/ui-ngx/src/app/shared/models/vc.models.ts
@@ -64,6 +64,13 @@ export const syncStrategyTranslationMap = new Map<SyncStrategy, string>(
   ]
 );
 
+export const syncStrategyHintMap = new Map<SyncStrategy, string>(
+  [
+    [SyncStrategy.MERGE, 'version-control.sync-strategy-merge-hint'],
+    [SyncStrategy.OVERWRITE, 'version-control.sync-strategy-overwrite-hint']
+  ]
+);
+
 export interface EntityTypeVersionCreateConfig extends VersionCreateConfig {
   syncStrategy: SyncStrategy;
   entityIds: string[];
@@ -81,8 +88,8 @@ export function createDefaultEntityTypesVersionCreate(): {[entityType: string]:
   for (const entityType of exportableEntityTypes) {
     res[entityType] = {
       syncStrategy: null,
-      saveRelations: false,
-      saveAttributes: false,
+      saveAttributes: true,
+      saveRelations: true,
       allEntities: true,
       entityIds: []
     };
@@ -126,10 +133,10 @@ export function createDefaultEntityTypesVersionLoad(): {[entityType: string]: En
   const res: {[entityType: string]: EntityTypeVersionLoadConfig} = {};
   for (const entityType of exportableEntityTypes) {
     res[entityType] = {
-      loadRelations: false,
-      loadAttributes: false,
+      loadAttributes: true,
+      loadRelations: true,
       removeOtherEntities: false,
-      findExistingEntityByName: false
+      findExistingEntityByName: true
     };
   }
   return res;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 2bc8d6fdbe..ad9ba856ab 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3168,7 +3168,9 @@
         "deleted": "{{deleted}} deleted",
         "remove-other-entities-confirm-text": "Be careful! This will permanently <b>delete</b> <b>all</b> current entities<br/>not present in the version you want to restore.<br/><br/>Please type <b>remove other entities</b> to confirm.",
         "auto-commit-to-branch": "auto-commit to <b>{{ branch }}</b> branch",
-        "default-create-entity-version-name": "{{entityName}} update"
+        "default-create-entity-version-name": "{{entityName}} update",
+        "sync-strategy-merge-hint": "Sync strategy <b>merge</b> hint",
+        "sync-strategy-overwrite-hint": "Sync strategy <b>overwrite</b> hint"
     },
     "widget": {
         "widget-library": "Widgets Library",