From caf0562007d17a1b3f2de6a03faa5e9d3a36cecb Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Thu, 16 Nov 2023 12:34:42 +0200
Subject: [PATCH] UI: Add links to entities autocomplete

---
 .../asset-profile-autocomplete.component.html |  5 ++--
 .../asset-profile-autocomplete.component.ts   | 18 +++++++++++---
 ...device-profile-autocomplete.component.html |  5 ++--
 .../device-profile-autocomplete.component.ts  | 18 +++++++++++---
 .../rule-chain-autocomplete.component.html    |  6 ++++-
 .../rule-chain-autocomplete.component.ts      |  8 ++++++-
 .../dashboard-autocomplete.component.html     |  6 ++++-
 .../dashboard-autocomplete.component.ts       | 24 +++++++++++++++----
 .../entity/entity-autocomplete.component.html |  6 ++++-
 .../entity/entity-autocomplete.component.ts   |  5 +++-
 .../ota-package-autocomplete.component.html   |  5 ++--
 .../ota-package-autocomplete.component.ts     | 24 +++++++++++++------
 12 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
index 89e1e1ddc4..78368d4174 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html
@@ -25,8 +25,9 @@
          (keydown)="assetProfileEnter($event)"
          (keypress)="assetProfileEnter($event)"
          [matAutocomplete]="assetProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value">
-  <a *ngIf="showDetailsPageLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled" aria-label="Open asset profile" [routerLink]=assetProfileURL>
+         [fxShow]="!showDetailsPageLink || !useAssetProfileLink || !disabled || !selectAssetProfileFormGroup.get('assetProfile').value">
+  <a *ngIf="showDetailsPageLink && useAssetProfileLink && selectAssetProfileFormGroup.get('assetProfile').value && disabled"
+     aria-label="Open asset profile" [routerLink]=assetProfileURL>
     {{ displayAssetProfileFn(selectAssetProfileFormGroup.get('assetProfile').value) }}
   </a>
   <button *ngIf="selectAssetProfileFormGroup.get('assetProfile').value && !disabled"
diff --git a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts
index 8a56915574..8dc1801ddf 100644
--- a/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts
@@ -25,7 +25,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -33,7 +33,6 @@ import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap,
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { TranslateService } from '@ngx-translate/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { entityIdEquals } from '@shared/models/id/entity-id';
 import { TruncatePipe } from '@shared//pipe/truncate.pipe';
 import { ENTER } from '@angular/cdk/keycodes';
@@ -47,6 +46,9 @@ import { AssetProfileService } from '@core/http/asset-profile.service';
 import { AssetProfileDialogComponent, AssetProfileDialogData } from './asset-profile-dialog.component';
 import { SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { AuthUser } from '@shared/models/user.model';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Authority } from '@shared/models/authority.enum';
 
 @Component({
   selector: 'tb-asset-profile-autocomplete',
@@ -110,6 +112,10 @@ export class AssetProfileAutocompleteComponent implements ControlValueAccessor,
   searchText = '';
   assetProfileURL: string;
 
+  useAssetProfileLink = true;
+
+  private authUser: AuthUser;
+
   private dirty = false;
 
   private ignoreClosedPanel = false;
@@ -128,6 +134,10 @@ export class AssetProfileAutocompleteComponent implements ControlValueAccessor,
               private fb: UntypedFormBuilder,
               private zone: NgZone,
               private dialog: MatDialog) {
+    this.authUser = getCurrentAuthUser(this.store);
+    if (this.authUser.authority === Authority.CUSTOMER_USER) {
+      this.useAssetProfileLink = false;
+    }
     this.selectAssetProfileFormGroup = this.fb.group({
       assetProfile: [null]
     });
@@ -226,7 +236,9 @@ export class AssetProfileAutocompleteComponent implements ControlValueAccessor,
       this.assetProfileService.getAssetProfileInfo(value.id).subscribe(
         (profile) => {
           this.modelValue = new AssetProfileId(profile.id.id);
-          this.assetProfileURL = getEntityDetailsPageURL(this.modelValue.id, this.modelValue.entityType);
+          if (this.useAssetProfileLink) {
+            this.assetProfileURL = getEntityDetailsPageURL(this.modelValue.id, this.modelValue.entityType);
+          }
           this.selectAssetProfileFormGroup.get('assetProfile').patchValue(profile, {emitEvent: false});
           this.assetProfileChanged.emit(profile);
         }
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
index e58bbd5ac8..574fa350d0 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html
@@ -25,8 +25,9 @@
          (keydown)="deviceProfileEnter($event)"
          (keypress)="deviceProfileEnter($event)"
          [matAutocomplete]="deviceProfileAutocomplete"
-         [fxShow]="!showDetailsPageLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value">
-  <a *ngIf="showDetailsPageLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled" aria-label="Open device profile" [routerLink]=deviceProfileURL>
+         [fxShow]="!showDetailsPageLink || !useDeviceProfileLink || !disabled || !selectDeviceProfileFormGroup.get('deviceProfile').value">
+  <a *ngIf="showDetailsPageLink && useDeviceProfileLink && selectDeviceProfileFormGroup.get('deviceProfile').value && disabled"
+     aria-label="Open device profile" [routerLink]=deviceProfileURL>
     {{ displayDeviceProfileFn(selectDeviceProfileFormGroup.get('deviceProfile').value) }}
   </a>
   <button *ngIf="selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts
index 68deb6e5e3..115356d223 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts
@@ -27,7 +27,7 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -35,7 +35,6 @@ import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap,
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { TranslateService } from '@ngx-translate/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { entityIdEquals } from '@shared/models/id/entity-id';
 import { TruncatePipe } from '@shared//pipe/truncate.pipe';
 import { ENTER } from '@angular/cdk/keycodes';
@@ -50,6 +49,9 @@ import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';
 import { SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
+import { AuthUser } from '@shared/models/user.model';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Authority } from '@shared/models/authority.enum';
 
 @Component({
   selector: 'tb-device-profile-autocomplete',
@@ -119,6 +121,10 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
   searchText = '';
   deviceProfileURL: string;
 
+  useDeviceProfileLink = true;
+
+  private authUser: AuthUser;
+
   private dirty = false;
 
   private ignoreClosedPanel = false;
@@ -139,6 +145,10 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
               private fb: UntypedFormBuilder,
               private zone: NgZone,
               private dialog: MatDialog) {
+    this.authUser = getCurrentAuthUser(this.store);
+    if (this.authUser.authority === Authority.CUSTOMER_USER) {
+      this.useDeviceProfileLink = false;
+    }
     this.selectDeviceProfileFormGroup = this.fb.group({
       deviceProfile: [null]
     });
@@ -248,7 +258,9 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
       this.deviceProfileService.getDeviceProfileInfo(value.id).subscribe(
         (profile) => {
           this.modelValue = new DeviceProfileId(profile.id.id);
-          this.deviceProfileURL = getEntityDetailsPageURL(this.modelValue.id, this.modelValue.entityType);
+          if (this.useDeviceProfileLink) {
+            this.deviceProfileURL = getEntityDetailsPageURL(this.modelValue.id, this.modelValue.entityType);
+          }
           this.selectDeviceProfileFormGroup.get('deviceProfile').patchValue(profile, {emitEvent: false});
           this.deviceProfileChanged.emit(profile);
         }
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
index 99926fb673..a22a0635cd 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.html
@@ -22,7 +22,11 @@
          formControlName="ruleChainId"
          (focusin)="onFocus()"
          [required]="required"
-         [matAutocomplete]="ruleChainAutocomplete">
+         [matAutocomplete]="ruleChainAutocomplete"
+         [fxShow]="!disabled || !selectRuleChainFormGroup.get('ruleChainId').value">
+  <a *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && disabled" aria-label="Open device profile" [routerLink]=ruleChainURL>
+    {{ displayRuleChainFn(selectRuleChainFormGroup.get('ruleChainId').value) }}
+  </a>
   <button *ngIf="selectRuleChainFormGroup.get('ruleChainId').value && !disabled"
           type="button"
           matSuffix mat-icon-button aria-label="Clear"
diff --git a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
index f371f4201f..8c2260f22a 100644
--- a/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/rule-chain/rule-chain-autocomplete.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
@@ -30,6 +30,7 @@ import { TruncatePipe } from '@shared/pipe/truncate.pipe';
 import { RuleChainService } from '@core/http/rule-chain.service';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { RuleChainType } from '@app/shared/models/rule-chain.models';
+import { getEntityDetailsPageURL } from '@core/utils';
 
 @Component({
   selector: 'tb-rule-chain-autocomplete',
@@ -74,6 +75,7 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
   filteredRuleChains: Observable<Array<BaseData<EntityId>>>;
 
   searchText = '';
+  ruleChainURL: string;
 
   private dirty = false;
 
@@ -151,6 +153,10 @@ export class RuleChainAutocompleteComponent implements ControlValueAccessor, OnI
       this.entityService.getEntity(targetEntityType, value, {ignoreLoading: true, ignoreErrors: true}).subscribe(
         (entity) => {
           this.modelValue = entity.id.id;
+          this.ruleChainURL = getEntityDetailsPageURL(this.modelValue,EntityType.RULE_CHAIN);
+          if (this.ruleChainType === RuleChainType.EDGE) {
+            this.ruleChainURL = '/edgeManagement' + this.ruleChainURL;
+          }
           this.selectRuleChainFormGroup.get('ruleChainId').patchValue(entity, {emitEvent: false});
         },
         () => {
diff --git a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
index b8783470db..c9991d6ff7 100644
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.html
@@ -24,7 +24,11 @@
          formControlName="dashboard"
          (focusin)="onFocus()"
          [required]="required"
-         [matAutocomplete]="dashboardAutocomplete">
+         [matAutocomplete]="dashboardAutocomplete"
+         [fxShow]="!useDashboardLink || !disabled || !selectDashboardFormGroup.get('dashboard').value">
+  <a *ngIf="useDashboardLink && selectDashboardFormGroup.get('dashboard').value && disabled" aria-label="Open device profile" [routerLink]=dashboardURL>
+    {{ displayDashboardFn(selectDashboardFormGroup.get('dashboard').value) }}
+  </a>
   <button *ngIf="selectDashboardFormGroup.get('dashboard').value && !disabled"
           type="button"
           matSuffix mat-icon-button aria-label="Clear"
diff --git a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts
index b1ff5be055..0e31bf2670 100644
--- a/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/dashboard-autocomplete.component.ts
@@ -15,7 +15,7 @@
 ///
 
 import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
@@ -30,6 +30,9 @@ import { Authority } from '@shared/models/authority.enum';
 import { TranslateService } from '@ngx-translate/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { getEntityDetailsPageURL } from '@core/utils';
+import { EntityType } from '@shared/models/entity-type.models';
+import { AuthUser } from '@shared/models/user.model';
 
 @Component({
   selector: 'tb-dashboard-autocomplete',
@@ -97,12 +100,23 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
 
   searchText = '';
 
+  dashboardURL: string;
+
+  useDashboardLink = true;
+
+  private authUser: AuthUser;
+
   private propagateChange = (v: any) => { };
 
   constructor(private store: Store<AppState>,
               public translate: TranslateService,
               private dashboardService: DashboardService,
               private fb: UntypedFormBuilder) {
+    this.authUser = getCurrentAuthUser(this.store);
+    if (this.authUser.authority === Authority.SYS_ADMIN) {
+      this.useDashboardLink = false;
+    }
+
     this.selectDashboardFormGroup = this.fb.group({
       dashboard: [null]
     });
@@ -173,6 +187,9 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
         this.dashboardService.getDashboardInfo(value).subscribe(
           (dashboard) => {
             this.modelValue = this.useIdValue ? dashboard.id.id : dashboard;
+            if (this.useDashboardLink) {
+              this.dashboardURL = getEntityDetailsPageURL(this.modelValue as string, EntityType.DASHBOARD);
+            }
             this.selectDashboardFormGroup.get('dashboard').patchValue(dashboard, {emitEvent: false});
           }
         );
@@ -215,8 +232,7 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
 
   getDashboards(pageLink: PageLink): Observable<PageData<DashboardInfo>> {
     let dashboardsObservable: Observable<PageData<DashboardInfo>>;
-    const authUser = getCurrentAuthUser(this.store);
-    if (this.dashboardsScope === 'customer' || authUser.authority === Authority.CUSTOMER_USER) {
+    if (this.dashboardsScope === 'customer' || this.authUser.authority === Authority.CUSTOMER_USER) {
       if (this.customerId) {
         dashboardsObservable = this.dashboardService.getCustomerDashboards(this.customerId, pageLink,
           {ignoreLoading: true});
@@ -224,7 +240,7 @@ export class DashboardAutocompleteComponent implements ControlValueAccessor, OnI
         dashboardsObservable = of(emptyPageData());
       }
     } else {
-      if (authUser.authority === Authority.SYS_ADMIN) {
+      if (this.authUser.authority === Authority.SYS_ADMIN) {
         if (this.tenantId) {
           dashboardsObservable = this.dashboardService.getTenantDashboardsByTenantId(this.tenantId, pageLink,
             {ignoreLoading: true});
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
index fdf6b2aeac..680d8c268f 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
@@ -22,7 +22,11 @@
          formControlName="entity"
          (focusin)="onFocus()"
          [required]="required"
-         [matAutocomplete]="entityAutocomplete">
+         [matAutocomplete]="entityAutocomplete"
+         [fxShow]="!disabled || !selectEntityFormGroup.get('entity').value">
+  <a *ngIf="selectEntityFormGroup.get('entity').value && disabled" aria-label="Open device profile" [routerLink]=entityURL>
+    {{ displayEntityFn(selectEntityFormGroup.get('entity').value) }}
+  </a>
   <button *ngIf="selectEntityFormGroup.get('entity').value && !disabled"
           type="button"
           matSuffix mat-icon-button aria-label="Clear"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
index ea89a064a3..5f885c744c 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
@@ -38,7 +38,7 @@ import { EntityId } from '@shared/models/id/entity-id';
 import { EntityService } from '@core/http/entity.service';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { Authority } from '@shared/models/authority.enum';
-import { isDefinedAndNotNull, isEqual } from '@core/utils';
+import { getEntityDetailsPageURL, isDefinedAndNotNull, isEqual } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
@@ -71,6 +71,8 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
 
   searchText = '';
 
+  entityURL: string;
+
   private dirty = false;
 
   private refresh$ = new Subject<Array<BaseData<EntityId>>>();
@@ -312,6 +314,7 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
         this.propagateChange(null);
       }
       this.modelValue = entity !== null ? (this.useFullEntityId ? entity.id : entity.id.id) : null;
+      this.entityURL = getEntityDetailsPageURL(this.modelValue as string, targetEntityType);
       this.selectEntityFormGroup.get('entity').patchValue(entity !== null ? entity : '', {emitEvent: false});
       this.entityChanged.emit(entity);
     } else {
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
index fb5c33d785..374f81bfdb 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
@@ -24,8 +24,9 @@
          [required]="required"
          [matAutocomplete]="packageAutocomplete"
          [matAutocompleteDisabled]="disabled"
-         [fxShow]="!showDetailsPageLink || !disabled || !otaPackageFormGroup.get('packageId').value">
-  <a *ngIf="showDetailsPageLink && otaPackageFormGroup.get('packageId').value && disabled" aria-label="Open ota package" [routerLink]=packageURL>
+         [fxShow]="!showDetailsPageLink || !usePackageLink || !disabled || !otaPackageFormGroup.get('packageId').value">
+  <a *ngIf="showDetailsPageLink && usePackageLink && otaPackageFormGroup.get('packageId').value && disabled"
+     aria-label="Open ota package" [routerLink]=packageURL>
     {{ displayPackageFn(otaPackageFormGroup.get('packageId').value) }}
   </a>
   <button *ngIf="otaPackageFormGroup.get('packageId').value && !disabled"
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts
index 826f9889cd..6a19db3911 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts
@@ -14,8 +14,8 @@
 /// limitations under the License.
 ///
 
-import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { merge, Observable, of, Subject } from 'rxjs';
 import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
@@ -32,6 +32,9 @@ import { PageLink } from '@shared/models/page/page-link';
 import { Direction } from '@shared/models/page/sort-order';
 import { emptyPageData } from '@shared/models/page/page-data';
 import { getEntityDetailsPageURL } from '@core/utils';
+import { AuthUser } from '@shared/models/user.model';
+import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { Authority } from '@shared/models/authority.enum';
 
 @Component({
   selector: 'tb-ota-package-autocomplete',
@@ -43,7 +46,7 @@ import { getEntityDetailsPageURL } from '@core/utils';
     multi: true
   }]
 })
-export class OtaPackageAutocompleteComponent implements ControlValueAccessor, OnInit {
+export class OtaPackageAutocompleteComponent implements ControlValueAccessor, OnInit, OnDestroy {
 
   otaPackageFormGroup: UntypedFormGroup;
 
@@ -106,6 +109,10 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On
   searchText = '';
   packageURL: string;
 
+  usePackageLink = true;
+
+  private authUser: AuthUser;
+
   private dirty = false;
   private cleanFilteredPackages: Subject<Array<OtaPackageInfo>> = new Subject();
 
@@ -117,6 +124,10 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On
               private entityService: EntityService,
               private otaPackageService: OtaPackageService,
               private fb: UntypedFormBuilder) {
+    this.authUser = getCurrentAuthUser(this.store);
+    if (this.authUser.authority === Authority.CUSTOMER_USER) {
+      this.usePackageLink = false;
+    }
     this.otaPackageFormGroup = this.fb.group({
       packageId: [null]
     });
@@ -153,9 +164,6 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On
     this.filteredPackages = merge(this.cleanFilteredPackages, getPackages);
   }
 
-  ngAfterViewInit(): void {
-  }
-
   ngOnDestroy() {
     this.cleanFilteredPackages.complete();
     this.cleanFilteredPackages = null;
@@ -195,7 +203,9 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On
       if (packageId !== '') {
         this.entityService.getEntity(EntityType.OTA_PACKAGE, packageId, {ignoreLoading: true, ignoreErrors: true}).subscribe(
           (entity) => {
-            this.packageURL = getEntityDetailsPageURL(entity.id.id, EntityType.OTA_PACKAGE);
+            if (this.usePackageLink) {
+              this.packageURL = getEntityDetailsPageURL(entity.id.id, EntityType.OTA_PACKAGE);
+            }
             this.modelValue = this.useFullEntityId ? entity.id : entity.id.id;
             this.otaPackageFormGroup.get('packageId').patchValue(entity, {emitEvent: false});
           },