From 86bad9ebd5fb4fc0f27b23b8a865e1bc783c69dd Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Thu, 9 Apr 2026 15:22:06 +0200
Subject: [PATCH 1/4] Fixed bugs and added outline appearance to inputs that
 was missed

---
 ...ile-provision-configuration.component.html | 74 +++++++++----------
 ...ofile-provision-configuration.component.ts |  6 +-
 .../lwm2m-attributes-key-list.component.html  |  7 +-
 ...m-object-add-instances-list.component.html |  2 +-
 .../entity-view/entity-view.component.html    | 12 +--
 .../entity/entity-keys-list.component.html    |  6 +-
 .../entity/entity-keys-list.component.ts      |  3 +
 .../import-dialog-csv.component.html          |  4 +-
 .../table-columns-assignment.component.html   |  2 +-
 9 files changed, 57 insertions(+), 59 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
index f73e7a30a1..14c6e53546 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html
@@ -21,7 +21,7 @@
     <mat-select formControlName="type" required>
       @for (type of deviceProvisionTypes; track type) {
         <mat-option [value]="type">
-          {{ getDeviceProvisionType(type) | translate }}
+          {{deviceProvisionTypeTranslateMap.get(type) | translate}}
         </mat-option>
       }
     </mat-select>
@@ -31,10 +31,10 @@
   </mat-form-field>
   @switch (provisionConfigurationFormGroup.get('type').value) {
     @case (deviceProvisionType.ALLOW_CREATE_NEW_DEVICES) {
-      <ng-container *ngTemplateOutlet="default"></ng-container>
+      <ng-container *ngTemplateOutlet="keySecretFields"></ng-container>
     }
     @case (deviceProvisionType.CHECK_PRE_PROVISIONED_DEVICES) {
-      <ng-container *ngTemplateOutlet="default"></ng-container>
+      <ng-container *ngTemplateOutlet="keySecretFields"></ng-container>
     }
     @case (deviceProvisionType.X509_CERTIFICATE_CHAIN) {
       <div class="tb-hint flex flex-1 items-center justify-start">
@@ -71,38 +71,38 @@
       </mat-form-field>
     }
   }
+  <ng-template #keySecretFields>
+    <section class="flex flex-row xs:flex-col gt-xs:gap-2">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
+        <mat-label translate>device-profile.provision-device-key</mat-label>
+        <input matInput formControlName="provisionDeviceKey" required/>
+        <button matSuffix mat-icon-button
+                ngxClipboard
+                [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
+                (cbOnSuccess)="onProvisionCopied(true)"
+                matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
+        </button>
+        @if (provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')) {
+          <mat-error>{{ 'device-profile.provision-device-key-required' | translate }}</mat-error>
+        }
+      </mat-form-field>
+      <mat-form-field class="mat-block flex-1" appearance="outline">
+        <mat-label translate>device-profile.provision-device-secret</mat-label>
+        <input matInput formControlName="provisionDeviceSecret" required/>
+        <button matSuffix mat-icon-button
+                ngxClipboard
+                [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
+                (cbOnSuccess)="onProvisionCopied(false)"
+                matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
+                matTooltipPosition="above">
+          <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
+        </button>
+        @if (provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')) {
+          <mat-error>{{ 'device-profile.provision-device-secret-required' | translate }}</mat-error>
+        }
+      </mat-form-field>
+    </section>
+  </ng-template>
 </div>
-<ng-template #default>
-  <section class="flex flex-row xs:flex-col gt-xs:gap-2">
-    <mat-form-field class="mat-block flex-1" appearance="outline">
-      <mat-label translate>device-profile.provision-device-key</mat-label>
-      <input matInput formControlName="provisionDeviceKey" required/>
-      <button matSuffix mat-icon-button
-              ngxClipboard
-              [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceKey').value"
-              (cbOnSuccess)="onProvisionCopied(true)"
-              matTooltip="{{ 'device-profile.copy-provision-key' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
-      </button>
-      @if (provisionConfigurationFormGroup.get('provisionDeviceKey').hasError('required')) {
-        <mat-error>{{ 'device-profile.provision-device-key-required' | translate }}</mat-error>
-      }
-    </mat-form-field>
-    <mat-form-field class="mat-block flex-1" appearance="outline">
-      <mat-label translate>device-profile.provision-device-secret</mat-label>
-      <input matInput formControlName="provisionDeviceSecret" required/>
-      <button matSuffix mat-icon-button
-              ngxClipboard
-              [cbContent]="provisionConfigurationFormGroup.get('provisionDeviceSecret').value"
-              (cbOnSuccess)="onProvisionCopied(false)"
-              matTooltip="{{ 'device-profile.copy-provision-secret' | translate }}"
-              matTooltipPosition="above">
-        <mat-icon svgIcon="mdi:clipboard-arrow-left" style="font-size: 20px;"></mat-icon>
-      </button>
-      @if (provisionConfigurationFormGroup.get('provisionDeviceSecret').hasError('required')) {
-        <mat-error>{{ 'device-profile.provision-device-secret-required' | translate }}</mat-error>
-      }
-    </mat-form-field>
-  </section>
-</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
index 4065dc602d..05aef4cfbb 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.ts
@@ -62,7 +62,7 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
   provisionConfigurationFormGroup: UntypedFormGroup;
 
   deviceProvisionType = DeviceProvisionType;
-  deviceProvisionTypes = Object.keys(DeviceProvisionType);
+  deviceProvisionTypes = Object.values(DeviceProvisionType);
   deviceProvisionTypeTranslateMap = deviceProvisionTypeTranslationMap;
 
   private requiredValue: boolean;
@@ -213,8 +213,4 @@ export class DeviceProfileProvisionConfigurationComponent implements ControlValu
       this.provisionConfigurationFormGroup.get('provisionDeviceKey').reset({value: null, disabled: true}, {emitEvent: false});
     }
   }
-
-  getDeviceProvisionType(type: string): string {
-    return this.deviceProvisionTypeTranslateMap.get(type as DeviceProvisionType);
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
index e2ac4da12b..1ad031c3a9 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-attributes-key-list.component.html
@@ -25,7 +25,7 @@
     <div class="map-list flex flex-col"
          [formGroup]="nameValueControl">
       <div class="flex flex-row items-center justify-start gap-2">
-        <mat-form-field class="max-w-40% flex-full">
+        <mat-form-field class="max-w-40% flex-full" appearance="outline">
           <mat-select formControlName="name" required>
             @for (attributeName of attributeNames; track attributeName) {
               <mat-option [value]="attributeName"
@@ -40,7 +40,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="max-w-60% flex-full">
+        <mat-form-field class="max-w-60% flex-full" appearance="outline">
           <input formControlName="value" matInput required type="number"
                  placeholder="{{ 'key-val.value' | translate }}">
           @if (nameValueControl.get('value').hasError('required')) {
@@ -68,8 +68,7 @@
       </div>
     </div>
   }
-  <div [class.!hidden]="attributesValueFormArray().length"
-  class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
+  <div [class.!hidden]="attributesValueFormArray().length" class="map-list flex items-center justify-center" translate>device-profile.lwm2m.no-attributes-set</div>
   @if (!disabled && isAddEnabled) {
     <div style="margin-top: 9px;">
       <button mat-stroked-button color="primary"
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
index 0b5741b177..a222c748cd 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-object-add-instances-list.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="instancesListFormGroup" class="lwm2m-instances-list">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" appearance="outline">
     <mat-label>{{ 'device-profile.lwm2m.instances-list' | translate }}</mat-label>
     <mat-chip-grid #chipList formControlName="instanceList" [required]="required" (focus)="onFocus()">
       @for (instanceId of instancesId; track instanceId) {
diff --git a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
index 170ae4d6bf..06c1470ff6 100644
--- a/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
+++ b/ui-ngx/src/app/modules/home/pages/entity-view/entity-view.component.html
@@ -110,27 +110,24 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <div translate class="tb-hint">entity-view.attributes-propagation-hint</div>
-            <label translate class="tb-title no-padding">entity-view.client-attributes</label>
             <tb-entity-keys-list
               [entityId]="selectedEntityId | async"
               formControlName="cs"
-              keysText="entity-view.client-attributes-placeholder"
+              label="entity-view.client-attributes"
               [dataKeyType]="dataKeyType.attribute"
               appearance="outline">
             </tb-entity-keys-list>
-            <label translate class="tb-title no-padding">entity-view.shared-attributes</label>
             <tb-entity-keys-list
               [entityId]="selectedEntityId | async"
               formControlName="sh"
-              keysText="entity-view.shared-attributes-placeholder"
+              label="entity-view.shared-attributes"
               [dataKeyType]="dataKeyType.attribute"
               appearance="outline">
             </tb-entity-keys-list>
-            <label translate class="tb-title no-padding">entity-view.server-attributes</label>
             <tb-entity-keys-list
               [entityId]="selectedEntityId | async"
               formControlName="ss"
-              keysText="entity-view.server-attributes-placeholder"
+              label="entity-view.server-attributes"
               [dataKeyType]="dataKeyType.attribute"
               appearance="outline">
             </tb-entity-keys-list>
@@ -142,11 +139,10 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <div translate class="tb-hint">entity-view.timeseries-data-hint</div>
-            <label translate class="tb-title no-padding">entity-view.timeseries</label>
             <tb-entity-keys-list
               [entityId]="selectedEntityId | async"
               formControlName="timeseries"
-              keysText="entity-view.timeseries-placeholder"
+              label="entity-view.timeseries"
               [dataKeyType]="dataKeyType.timeseries"
               appearance="outline">
             </tb-entity-keys-list>
diff --git a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
index 53c26e0bff..8ecebe7d0d 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.html
@@ -16,7 +16,10 @@
 
 -->
 <mat-form-field [formGroup]="keysListFormGroup" class="mat-block tb-chip-list" [appearance]="appearance">
-  <mat-chip-grid #chipList>
+  @if (label) {
+  <mat-label>{{ label | translate }}</mat-label>
+}
+  <mat-chip-grid #chipList [disabled]="disabled">
     @for (key of modelValue; track key) {
       <mat-chip-row
         [removable]="!disabled"
@@ -39,6 +42,7 @@
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            matChipInputAddOnBlur
+           [disabled]="disabled"
            (matChipInputTokenEnd)="add($event)">
   </mat-chip-grid>
   <mat-autocomplete #keyAutocomplete="matAutocomplete"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
index 17629da30e..5aa5cf3eb5 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-keys-list.component.ts
@@ -63,6 +63,9 @@ export class EntityKeysListComponent implements ControlValueAccessor, OnInit, Af
   @Input()
   keysText: string;
 
+  @Input()
+  label: string;
+
   @Input()
   dataKeyType: DataKeyType;
 
diff --git a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
index d2cd853e02..bf0f0401c8 100644
--- a/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
+++ b/ui-ngx/src/app/shared/import-export/import-dialog-csv.component.html
@@ -57,10 +57,10 @@
         </div>
       </mat-step>
       <mat-step [stepControl]="importParametersFormGroup">
-        <form [formGroup]="importParametersFormGroup">
+        <form [formGroup]="importParametersFormGroup" class="pt-1">
           <ng-template matStepLabel>{{ 'import.stepper-text.configuration' | translate }}</ng-template>
           <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label translate>import.csv-delimiter</mat-label>
               <mat-select required formControlName="delim">
                 @for (delimiter of delimiters; track delimiter) {
diff --git a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
index 10fa39c547..f010606fe9 100644
--- a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
@@ -53,7 +53,7 @@
     <mat-header-cell *matHeaderCellDef class="mat-column-key"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       @if (isColumnTypeDiffers(column.type)) {
-        <mat-form-field>
+        <mat-form-field appearance="outline">
           <input matInput [required]="isColumnTypeDiffers(column.type)"
                  [(ngModel)]="column.key" (ngModelChange)="columnsUpdated()"
                  placeholder="{{ 'import.column-value' | translate }}"/>

From a90277b14f37d2d6eae3de3ac86e0e5cf180401c Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Fri, 10 Apr 2026 12:03:07 +0200
Subject: [PATCH 2/4] Fixed table column assign view

---
 .../import-export/table-columns-assignment.component.html   | 2 +-
 .../import-export/table-columns-assignment.component.scss   | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
index f010606fe9..7f51f98303 100644
--- a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
+++ b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.html
@@ -53,7 +53,7 @@
     <mat-header-cell *matHeaderCellDef class="mat-column-key"> {{ 'import.column-key' | translate }} </mat-header-cell>
     <mat-cell *matCellDef="let column">
       @if (isColumnTypeDiffers(column.type)) {
-        <mat-form-field appearance="outline">
+        <mat-form-field appearance="outline" subscriptSizing="dynamic">
           <input matInput [required]="isColumnTypeDiffers(column.type)"
                  [(ngModel)]="column.key" (ngModelChange)="columnsUpdated()"
                  placeholder="{{ 'import.column-value' | translate }}"/>
diff --git a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss
index 778d3c4486..f8d56f1c49 100644
--- a/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss
+++ b/ui-ngx/src/app/shared/import-export/table-columns-assignment.component.scss
@@ -32,4 +32,10 @@
     flex: 0 0 120px;
     min-width: 120px;
   }
+  mat-row {
+    mat-cell {
+      padding-top: 4px;
+      padding-bottom: 4px;
+    }
+  }
 }

From 98380e86e88ea18619fb83297d7b5d9171fb66ac Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Fri, 10 Apr 2026 12:11:17 +0200
Subject: [PATCH 3/4] Added missing appearance

---
 .../lib/settings/common/key/data-key-config.component.html    | 4 ++--
 .../home-page/doc-links-widget-settings.component.html        | 2 +-
 .../manage-dashboard-customers-dialog.component.html          | 1 +
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
index d5aa8967c7..c8bec5a971 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/key/data-key-config.component.html
@@ -22,7 +22,7 @@
       <div class="tb-form-panel">
         <div class="tb-form-panel-title" translate>datakey.general</div>
         @if (modelValue.type !== dataKeyTypes.function && !hideDataKeyName) {
-          <mat-form-field subscriptSizing="dynamic">
+          <mat-form-field subscriptSizing="dynamic" appearance="outline">
             <mat-label>{{ 'entity.key' | translate }}</mat-label>
             <input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}"
                    #keyInput
@@ -49,7 +49,7 @@
           </mat-form-field>
         }
         @if (!hideDataKeyLabel) {
-          <mat-form-field subscriptSizing="dynamic">
+          <mat-form-field subscriptSizing="dynamic" appearance="outline">
             <mat-label translate>datakey.label</mat-label>
             <input matInput formControlName="label" required>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
index 72ea764244..cf66e4bebd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/doc-links-widget-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="docLinksWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>widgets.documentation.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
index f53a8b37ca..691a5250cd 100644
--- a/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/dashboard/manage-dashboard-customers-dialog.component.html
@@ -36,6 +36,7 @@
     <fieldset [disabled]="isLoading$ | async">
       <span>{{ labelText | translate }}</span>
       <tb-entity-list
+        appearance="outline"
         formControlName="assignedCustomerIds"
         [required]="data.actionType !== 'manage'"
         [entityType]="entityType.CUSTOMER">

From 65aef719f23c2ccfe312cd08276e229f3dbcd9ed Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Thu, 16 Apr 2026 13:05:52 +0200
Subject: [PATCH 4/4] Fixed rule chain select appearance

---
 .../components/rule-chain/rule-chain-select.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
index d34974f799..2abf018ecc 100644
--- a/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
+++ b/ui-ngx/src/app/shared/components/rule-chain/rule-chain-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field class="tb-rule-select" subscriptSizing="dynamic" appearance="outline"
+<mat-form-field class="tb-rule-select" subscriptSizing="dynamic" appearance="fill"
                 [class.cursor-pointer]="!disabled"
                 (click)="openRuleChainSelectPanel($event)">
   <mat-icon matPrefix>settings_ethernet</mat-icon>