From ed44304eac4f779251912faf6a34349003f691f4 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 25 May 2022 16:26:39 +0300
Subject: [PATCH] UI: Branch select improvements. Entity versions table
 improvements.

---
 .../DefaultGitVersionControlQueueService.java |   9 ++
 common/cluster-api/src/main/proto/queue.proto |   2 +
 .../DefaultClusterVersionControlService.java  |  11 +-
 .../server/service/sync/vc/GitRepository.java |   2 +-
 ui-ngx/src/app/core/http/admin.service.ts     |  17 ++-
 .../http/entities-version-control.service.ts  |  45 +++++-
 .../vc/entity-versions-table.component.html   |  24 ++-
 .../vc/entity-versions-table.component.ts     |  33 ++++-
 .../vc/branch-autocomplete.component.html     |   8 +-
 .../vc/branch-autocomplete.component.ts       | 140 ++++++++++--------
 .../assets/locale/locale.constant-en_US.json  |   3 +-
 11 files changed, 210 insertions(+), 84 deletions(-)

diff --git a/application/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitVersionControlQueueService.java b/application/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitVersionControlQueueService.java
index f738582bb3..66e0442297 100644
--- a/application/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitVersionControlQueueService.java
+++ b/application/src/main/java/org/thingsboard/server/service/sync/vc/DefaultGitVersionControlQueueService.java
@@ -150,6 +150,9 @@ public class DefaultGitVersionControlQueueService implements GitVersionControlQu
                 .setBranchName(branch)
                 .setPageSize(pageLink.getPageSize())
                 .setPage(pageLink.getPage())
+                .setSortProperty(pageLink.getSortOrder() != null ? pageLink.getSortOrder().getProperty() : null)
+                .setSortDirection(pageLink.getSortOrder() != null &&  pageLink.getSortOrder().getDirection() != null
+                        ? pageLink.getSortOrder().getDirection().name() : null)
                 .build());
     }
 
@@ -159,6 +162,9 @@ public class DefaultGitVersionControlQueueService implements GitVersionControlQu
                 .setBranchName(branch).setEntityType(entityType.name())
                 .setPageSize(pageLink.getPageSize())
                 .setPage(pageLink.getPage())
+                .setSortProperty(pageLink.getSortOrder() != null ? pageLink.getSortOrder().getProperty() : null)
+                .setSortDirection(pageLink.getSortOrder() != null &&  pageLink.getSortOrder().getDirection() != null
+                        ? pageLink.getSortOrder().getDirection().name() : null)
                 .build());
     }
 
@@ -171,6 +177,9 @@ public class DefaultGitVersionControlQueueService implements GitVersionControlQu
                 .setEntityIdLSB(entityId.getId().getLeastSignificantBits())
                 .setPageSize(pageLink.getPageSize())
                 .setPage(pageLink.getPage())
+                .setSortProperty(pageLink.getSortOrder() != null ? pageLink.getSortOrder().getProperty() : null)
+                .setSortDirection(pageLink.getSortOrder() != null &&  pageLink.getSortOrder().getDirection() != null
+                        ? pageLink.getSortOrder().getDirection().name() : null)
                 .build());
     }
 
diff --git a/common/cluster-api/src/main/proto/queue.proto b/common/cluster-api/src/main/proto/queue.proto
index a1cbddf6e8..82070a5895 100644
--- a/common/cluster-api/src/main/proto/queue.proto
+++ b/common/cluster-api/src/main/proto/queue.proto
@@ -724,6 +724,8 @@ message ListVersionsRequestMsg {
   int64 entityIdLSB = 4;
   int32 pageSize = 5;
   int32 page = 6;
+  string sortProperty = 7;
+  string sortDirection = 8;
 }
 
 message EntityVersionProto {
diff --git a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultClusterVersionControlService.java b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultClusterVersionControlService.java
index 93cd812a6a..a27a4862bf 100644
--- a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultClusterVersionControlService.java
+++ b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/DefaultClusterVersionControlService.java
@@ -33,6 +33,7 @@ import org.thingsboard.server.common.data.EntityType;
 import org.thingsboard.server.common.data.StringUtils;
 import org.thingsboard.server.common.data.id.TenantId;
 import org.thingsboard.server.common.data.page.PageLink;
+import org.thingsboard.server.common.data.page.SortOrder;
 import org.thingsboard.server.common.data.sync.vc.EntitiesVersionControlSettings;
 import org.thingsboard.server.common.data.sync.vc.VersionCreationResult;
 import org.thingsboard.server.common.data.sync.vc.VersionedEntityInfo;
@@ -290,7 +291,15 @@ public class DefaultClusterVersionControlService extends TbApplicationEventListe
         } else {
             path = null;
         }
-        var data = vcService.listVersions(ctx.getTenantId(), request.getBranchName(), path, new PageLink(request.getPageSize(), request.getPage()));
+        SortOrder sortOrder = null;
+        if (StringUtils.isNotEmpty(request.getSortProperty())) {
+            var direction = SortOrder.Direction.DESC;
+            if (StringUtils.isNotEmpty(request.getSortDirection())) {
+                direction = SortOrder.Direction.valueOf(request.getSortDirection());
+            }
+            sortOrder = new SortOrder(request.getSortProperty(), direction);
+        }
+        var data = vcService.listVersions(ctx.getTenantId(), request.getBranchName(), path, new PageLink(request.getPageSize(), request.getPage(), null, sortOrder));
         reply(ctx, Optional.empty(), builder ->
                 builder.setListVersionsResponse(ListVersionsResponseMsg.newBuilder()
                         .setTotalPages(data.getTotalPages())
diff --git a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java
index 20ed03795d..a1a46d5b25 100644
--- a/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java
+++ b/common/version-control/src/main/java/org/thingsboard/server/service/sync/vc/GitRepository.java
@@ -281,7 +281,7 @@ public class GitRepository {
 //    }
 
     private Commit toCommit(RevCommit revCommit) {
-        return new Commit(revCommit.getCommitTime() * 1000, revCommit.getName(), revCommit.getFullMessage(), revCommit.getAuthorIdent().getName());
+        return new Commit(revCommit.getCommitTime() * 1000l, revCommit.getName(), revCommit.getFullMessage(), revCommit.getAuthorIdent().getName());
     }
 
     private RevCommit resolveCommit(String id) throws IOException {
diff --git a/ui-ngx/src/app/core/http/admin.service.ts b/ui-ngx/src/app/core/http/admin.service.ts
index 79bb6580b8..7c12bd3a5d 100644
--- a/ui-ngx/src/app/core/http/admin.service.ts
+++ b/ui-ngx/src/app/core/http/admin.service.ts
@@ -26,6 +26,8 @@ import {
   TestSmsRequest,
   UpdateMessage
 } from '@shared/models/settings.models';
+import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
+import { tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -33,7 +35,8 @@ import {
 export class AdminService {
 
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
+    private entitiesVersionControlService: EntitiesVersionControlService
   ) { }
 
   public getAdminSettings<T>(key: string, config?: RequestConfig): Observable<AdminSettings<T>> {
@@ -72,11 +75,19 @@ export class AdminService {
   public saveEntitiesVersionControlSettings(versionControlSettings: EntitiesVersionControlSettings,
                                             config?: RequestConfig): Observable<EntitiesVersionControlSettings> {
     return this.http.post<EntitiesVersionControlSettings>('/api/admin/vcSettings', versionControlSettings,
-      defaultHttpOptionsFromConfig(config));
+      defaultHttpOptionsFromConfig(config)).pipe(
+      tap(() => {
+        this.entitiesVersionControlService.clearBranchList();
+      })
+    );
   }
 
   public deleteEntitiesVersionControlSettings(config?: RequestConfig) {
-    return this.http.delete('/api/admin/vcSettings', defaultHttpOptionsFromConfig(config));
+    return this.http.delete('/api/admin/vcSettings', defaultHttpOptionsFromConfig(config)).pipe(
+      tap(() => {
+        this.entitiesVersionControlService.clearBranchList();
+      })
+    );
   }
 
   public checkVersionControlAccess(versionControlSettings: EntitiesVersionControlSettings,
diff --git a/ui-ngx/src/app/core/http/entities-version-control.service.ts b/ui-ngx/src/app/core/http/entities-version-control.service.ts
index f8668f2ecf..eba229de67 100644
--- a/ui-ngx/src/app/core/http/entities-version-control.service.ts
+++ b/ui-ngx/src/app/core/http/entities-version-control.service.ts
@@ -17,30 +17,63 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { defaultHttpOptionsFromConfig, RequestConfig } from '@core/http/http-utils';
-import { Observable } from 'rxjs';
+import { combineLatest, Observable, of } from 'rxjs';
 import { BranchInfo, EntityVersion, VersionCreateRequest, VersionCreationResult } from '@shared/models/vc.models';
 import { PageLink } from '@shared/models/page/page-link';
 import { PageData } from '@shared/models/page/page-data';
-import { DeviceInfo } from '@shared/models/device.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntityType } from '@shared/models/entity-type.models';
+import { createSelector, select, Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { selectHasVersionControl, selectIsAuthenticated, selectIsUserLoaded } from '@core/auth/auth.selectors';
+import { catchError, combineAll, tap } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class EntitiesVersionControlService {
 
+  branchList: Array<BranchInfo> = null;
+
   constructor(
-    private http: HttpClient
+    private http: HttpClient,
+    private store: Store<AppState>
   ) {
+
+    this.store.pipe(select(selectIsUserLoaded)).subscribe(
+      () => {
+        this.branchList = null;
+      }
+    );
+  }
+
+  public clearBranchList(): void {
+    this.branchList = null;
   }
 
-  public listBranches(config?: RequestConfig): Observable<Array<BranchInfo>> {
-    return this.http.get<Array<BranchInfo>>('/api/entities/vc/branches', defaultHttpOptionsFromConfig(config));
+  public listBranches(): Observable<Array<BranchInfo>> {
+    if (!this.branchList) {
+      return this.http.get<Array<BranchInfo>>('/api/entities/vc/branches',
+        defaultHttpOptionsFromConfig({ignoreErrors: true, ignoreLoading: false})).pipe(
+        catchError(() => of([] as Array<BranchInfo>)),
+        tap((list) => {
+          this.branchList = list;
+        })
+      );
+    } else {
+      return of(this.branchList);
+    }
   }
 
   public saveEntitiesVersion(request: VersionCreateRequest, config?: RequestConfig): Observable<VersionCreationResult> {
-    return this.http.post<VersionCreationResult>('/api/entities/vc/version', request, defaultHttpOptionsFromConfig(config));
+    return this.http.post<VersionCreationResult>('/api/entities/vc/version', request, defaultHttpOptionsFromConfig(config)).pipe(
+      tap(() => {
+        const branch = request.branch;
+        if (this.branchList && !this.branchList.find(b => b.name === branch)) {
+          this.branchList = null;
+        }
+      })
+    );
   }
 
   public listEntityVersions(pageLink: PageLink, branch: string,
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
index b47c2fcc79..f5aa4a04d2 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.html
@@ -48,27 +48,41 @@
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="id">
-          <mat-header-cell *matHeaderCellDef style="width: 40%"> {{ 'version-control.version-id' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="min-width: 100px; max-width: 100px; width: 100px;"> {{ 'version-control.version-id' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
-            {{ entityVersion.id }}
+            <span style="display: inline-block; width: 54px;" [innerHTML]="versionIdContent(entityVersion)"></span>
+            <tb-copy-button
+              [disabled]="isLoading$ | async"
+              [copyText]="entityVersion.id"
+              tooltipText="{{ 'version-control.copy-full-version-id' | translate }}"
+              tooltipPosition="above"
+              icon="content_paste"
+              [style]="{
+                 'font-size': '16px',
+                 color: 'rgba(0,0,0,.87)'
+              }">
+            </tb-copy-button>
           </mat-cell>
         </ng-container>
         <ng-container matColumnDef="name">
-          <mat-header-cell *matHeaderCellDef style="width: 60%"> {{ 'version-control.version-name' | translate }} </mat-header-cell>
+          <mat-header-cell *matHeaderCellDef style="width: 100%"> {{ 'version-control.version-name' | translate }} </mat-header-cell>
           <mat-cell *matCellDef="let entityVersion">
             {{ entityVersion.name }}
           </mat-cell>
         </ng-container>
         <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
+        <mat-row [fxShow]="!dataSource.dataLoading" *matRowDef="let entityVersion; columns: displayedColumns;"></mat-row>
       </table>
-      <span [fxShow]="dataSource.isEmpty() | async"
+      <span [fxShow]="!(isLoading$ | async) && (dataSource.isEmpty() | async) && !dataSource.dataLoading"
             fxLayoutAlign="center center"
             class="no-data-found" translate>{{
         singleEntityMode
           ? 'version-control.no-entity-versions-text'
           : 'version-control.no-versions-text'
         }}</span>
+      <span [fxShow]="dataSource.dataLoading"
+            fxLayoutAlign="center center"
+            class="no-data-found">{{ 'common.loading' | translate }}</span>
     </div>
     <mat-divider></mat-divider>
     <mat-paginator [length]="dataSource.total() | async"
diff --git a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
index 4fc33beafb..884bab417b 100644
--- a/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
+++ b/ui-ngx/src/app/modules/home/components/vc/entity-versions-table.component.ts
@@ -41,6 +41,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
 import { hidePageSizePixelValue } from '@shared/models/constants';
 import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { BranchAutocompleteComponent } from '@shared/components/vc/branch-autocomplete.component';
+import { isNotEmptyStr } from '@core/utils';
 
 @Component({
   selector: 'tb-entity-versions-table',
@@ -125,10 +126,12 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
   }
 
   branchChanged(newBranch: string) {
-    this.branch = newBranch;
-    this.paginator.pageIndex = 0;
-    if (this.activeValue) {
-      this.updateData();
+    if (isNotEmptyStr(newBranch) && this.branch !== newBranch) {
+      this.branch = newBranch;
+      this.paginator.pageIndex = 0;
+      if (this.activeValue) {
+        this.updateData();
+      }
     }
   }
 
@@ -151,8 +154,23 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
     }
   }
 
+  versionIdContent(entityVersion: EntityVersion): string {
+    let versionId = entityVersion.id;
+    if (versionId.length > 7) {
+      versionId = versionId.slice(0, 7);
+    }
+    return versionId;
+  }
+
   private initFromDefaultBranch() {
-    this.branchAutocompleteComponent.selectDefaultBranchIfNeeded(false, true);
+    if (this.branchAutocompleteComponent.isDefaultBranchSelected()) {
+      this.paginator.pageIndex = 0;
+      if (this.activeValue) {
+        this.updateData();
+      }
+    } else {
+      this.branchAutocompleteComponent.selectDefaultBranchIfNeeded(true);
+    }
   }
 
   private updateData() {
@@ -164,7 +182,6 @@ export class EntityVersionsTableComponent extends PageComponent implements OnIni
   }
 
   private resetSortAndFilter(update: boolean) {
-    this.branch = null;
     this.pageLink.textSearch = null;
     if (this.viewsInited) {
       this.paginator.pageIndex = 0;
@@ -185,6 +202,8 @@ class EntityVersionsDatasource implements DataSource<EntityVersion> {
 
   public pageData$ = this.pageDataSubject.asObservable();
 
+  public dataLoading = true;
+
   constructor(private entitiesVersionControlService: EntitiesVersionControlService) {}
 
   connect(collectionViewer: CollectionViewer): Observable<EntityVersion[] | ReadonlyArray<EntityVersion>> {
@@ -199,6 +218,7 @@ class EntityVersionsDatasource implements DataSource<EntityVersion> {
   loadEntityVersions(singleEntityMode: boolean,
                      branch: string, externalEntityId: EntityId,
                      pageLink: PageLink): Observable<PageData<EntityVersion>> {
+    this.dataLoading = true;
     const result = new ReplaySubject<PageData<EntityVersion>>();
     this.fetchEntityVersions(singleEntityMode, branch, externalEntityId, pageLink).pipe(
       catchError(() => of(emptyPageData<EntityVersion>())),
@@ -207,6 +227,7 @@ class EntityVersionsDatasource implements DataSource<EntityVersion> {
         this.entityVersionsSubject.next(pageData.data);
         this.pageDataSubject.next(pageData);
         result.next(pageData);
+        this.dataLoading = false;
       }
     );
     return result;
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
index b189d70199..74672b1772 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.html
@@ -17,12 +17,14 @@
 -->
 <mat-form-field [formGroup]="branchFormGroup" class="mat-block" [floatLabel]="selectionMode ? 'always' : 'auto'">
   <mat-label>{{ 'version-control.branch' | translate }}</mat-label>
-  <input matInput type="text" placeholder="{{ 'version-control.select-branch' | translate }}"
+  <input matInput type="text" placeholder="{{(loading ? 'common.loading' : 'version-control.select-branch') | translate}}"
          #branchInput
          formControlName="branch"
+         (keydown.enter)="branchInput.blur(); autoCompleteTrigger.closePanel();"
          (focusin)="onFocus()"
+         (blur)="onBlur()"
          [required]="required"
-         [matAutocomplete]="subTypeAutocomplete">
+         [matAutocomplete]="branchAutocomplete">
   <button *ngIf="branchFormGroup.get('branch').value && !disabled"
           type="button"
           matSuffix mat-button mat-icon-button aria-label="Clear"
@@ -32,7 +34,7 @@
   <mat-autocomplete
     class="tb-autocomplete"
     (closed)="onPanelClosed()"
-    #subTypeAutocomplete="matAutocomplete"
+    #branchAutocomplete="matAutocomplete"
     [displayWith]="displayBranchFn">
     <mat-option *ngFor="let branch of filteredBranches | async" [value]="branch">
       <span [innerHTML]="branch.name | highlight:searchText"></span>
diff --git a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
index e72235d89e..45f4504bd2 100644
--- a/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/vc/branch-autocomplete.component.ts
@@ -14,36 +14,17 @@
 /// limitations under the License.
 ///
 
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  forwardRef,
-  Input,
-  NgZone,
-  OnInit,
-  ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, forwardRef, Input, NgZone, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Observable, of } from 'rxjs';
-import {
-  catchError,
-  debounceTime,
-  distinctUntilChanged,
-  map,
-  publishReplay,
-  refCount,
-  share,
-  switchMap,
-  tap
-} from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { BranchInfo } from '@shared/models/vc.models';
 import { EntitiesVersionControlService } from '@core/http/entities-version-control.service';
 import { isNotEmptyStr } from '@core/utils';
+import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 @Component({
   selector: 'tb-branch-autocomplete',
@@ -94,19 +75,21 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   selectionMode = false;
 
+  @ViewChild('branchAutocomplete') matAutocomplete: MatAutocomplete;
+  @ViewChild('branchInput', { read: MatAutocompleteTrigger, static: true }) autoCompleteTrigger: MatAutocompleteTrigger;
   @ViewChild('branchInput', {static: true}) branchInput: ElementRef;
 
   filteredBranches: Observable<Array<BranchInfo>>;
 
-  branches: Observable<Array<BranchInfo>> = null;
-
   defaultBranch: BranchInfo = null;
 
   searchText = '';
 
+  loading = false;
+
   private dirty = false;
 
-  private ignoreClosedPanel = false;
+  private clearButtonClicked = false;
 
   private propagateChange = (v: any) => { };
 
@@ -140,7 +123,9 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
           } else {
             modelValue = value;
           }
-          this.updateView(modelValue);
+          if (!this.selectionMode || modelValue) {
+            this.updateView(modelValue);
+          }
         }),
         map(value => {
           if (value) {
@@ -167,17 +152,33 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
     this.disabled = isDisabled;
   }
 
-  selectDefaultBranchIfNeeded(ignoreLoading = true, force = false): void {
+  isDefaultBranchSelected(): boolean {
+    return this.defaultBranch && this.defaultBranch.name === this.modelValue;
+  }
+
+  selectDefaultBranchIfNeeded(force = false): void {
     if ((this.selectDefaultBranch && !this.modelValue) || force) {
-      this.getBranches(ignoreLoading).subscribe(
-        (data) => {
-          if (this.defaultBranch || force) {
-            this.branchFormGroup.get('branch').patchValue(this.defaultBranch, {emitEvent: false});
-            this.modelValue = this.defaultBranch?.name;
-            this.propagateChange(this.modelValue);
-          }
+      setTimeout(() => {
+        if (this.defaultBranch) {
+          this.branchFormGroup.get('branch').patchValue(this.defaultBranch, {emitEvent: false});
+          this.modelValue = this.defaultBranch?.name;
+          this.propagateChange(this.modelValue);
+        } else {
+          this.loading = true;
+          this.getBranches().subscribe(
+            () => {
+              if (this.defaultBranch || force) {
+                this.branchFormGroup.get('branch').patchValue(this.defaultBranch, {emitEvent: false});
+                this.modelValue = this.defaultBranch?.name;
+                this.propagateChange(this.modelValue);
+                this.loading = false;
+              } else {
+                this.loading = false;
+              }
+            }
+          );
         }
-      );
+      });
     }
   }
 
@@ -200,14 +201,44 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
     }
   }
 
+  onBlur() {
+    if (this.clearButtonClicked) {
+      this.clearButtonClicked = false;
+    } else if (!this.matAutocomplete.isOpen) {
+      this.selectAvailableValue();
+    }
+  }
+
   onPanelClosed() {
-    if (this.ignoreClosedPanel) {
-      this.ignoreClosedPanel = false;
-    } else {
-      if (this.selectionMode && !this.branchFormGroup.get('branch').value && this.defaultBranch) {
-        this.zone.run(() => {
-          this.branchFormGroup.get('branch').patchValue(this.defaultBranch, {emitEvent: true});
-        }, 0);
+    this.selectAvailableValue();
+  }
+
+  selectAvailableValue() {
+    if (this.selectionMode) {
+      const branch = this.branchFormGroup.get('branch').value;
+      let branchInfo: Observable<BranchInfo> = null;
+      if (isNotEmptyStr(branch)) {
+        branchInfo = this.getBranches().pipe(
+          map(branches => {
+            let foundBranch = branches.find(b => b.name === branch);
+            if (!foundBranch && isNotEmptyStr(this.modelValue)) {
+              foundBranch = branches.find(b => b.name === this.modelValue);
+            }
+            return foundBranch;
+          })
+        );
+      } else if (!branch) {
+        branchInfo = of(null);
+      }
+      if (branchInfo) {
+        branchInfo.subscribe((val) => {
+          if (!val && this.defaultBranch) {
+            val = this.defaultBranch;
+          }
+          this.zone.run(() => {
+            this.branchFormGroup.get('branch').patchValue(val, {emitEvent: true});
+          }, 0);
+        });
       }
     }
   }
@@ -223,7 +254,7 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
     return branch ? branch.name : undefined;
   }
 
-  fetchBranches(searchText?: string): Observable<Array<BranchInfo>> {
+  private fetchBranches(searchText?: string): Observable<Array<BranchInfo>> {
     this.searchText = searchText;
     return this.getBranches().pipe(
       map(branches => {
@@ -239,25 +270,18 @@ export class BranchAutocompleteComponent implements ControlValueAccessor, OnInit
     );
   }
 
-  getBranches(ignoreLoading = true): Observable<Array<BranchInfo>> {
-    if (!this.branches) {
-      const branchesObservable = this.entitiesVersionControlService.listBranches({ignoreLoading, ignoreErrors: true});
-      this.branches = branchesObservable.pipe(
-        catchError(() => of([] as Array<BranchInfo>)),
-        tap((data) => {
-          this.defaultBranch = data.find(branch => branch.default);
-        }),
-        publishReplay(1),
-        refCount()
-      );
-    }
-    return this.branches;
+  private getBranches(): Observable<Array<BranchInfo>> {
+    return this.entitiesVersionControlService.listBranches().pipe(
+      tap((data) => {
+        this.defaultBranch = data.find(branch => branch.default);
+      })
+    );
   }
 
   clear() {
-    this.ignoreClosedPanel = true;
-    this.branchFormGroup.get('branch').patchValue(null, {emitEvent: true});
+    this.clearButtonClicked = true;
     setTimeout(() => {
+      this.branchFormGroup.get('branch').patchValue(null, {emitEvent: true});
       this.branchInput.nativeElement.blur();
       this.branchInput.nativeElement.focus();
     }, 0);
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 d5bac68d48..106f941f4e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -3126,7 +3126,8 @@
         "created-time": "Created time",
         "version-id": "Version ID",
         "no-entity-versions-text": "No entity versions found",
-        "no-versions-text": "No versions found"
+        "no-versions-text": "No versions found",
+        "copy-full-version-id": "Copy full version id"
     },
     "widget": {
         "widget-library": "Widgets Library",