Device profile -> Device provisioning -> X509 feature:

- change tb-hints Info and Regex examples as tb-help-popup
- fix locales for hint-

ui-ngx/src/app/modules/home/components/profile/device-profile-provision-configuration.component.html

@@ -35,14 +35,18 @@
       <ng-container *ngTemplateOutlet="default"></ng-container>
     </ng-template>
     <ng-template [ngSwitchCase]="deviceProvisionType.X509_CERTIFICATE_CHAIN">
-      <div class="tb-hint" style="max-width: 800px">
-        <span [innerHTML]="readMore ? ('device-profile.provision-strategy-x509.hint-certificate-chain' | translate) : ('device-profile.provision-strategy-x509.hint-certificate-chain' | translate | truncate:true:355:&apos;...&apos;)"></span>
-        <a (click)="readMore=!readMore">{{ readMore ? ('&nbsp;' + ('action.less' | translate)) : ('action.more' | translate) }}</a>
+      <div fxFlex fxLayoutAlign="start center" class="tb-hint">
+        <span [innerHTML]="'device-profile.provision-strategy-x509.certificate-chain-hint' | translate"></span>
+        <div tb-help-popup="device-profile/x509-chain-hint"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px; font-size: 12px"
+             [tb-help-popup-style]="{maxWidth: '820px'}"
+             trigger-text="{{ 'action.more' | translate }}"></div>
       </div>
       <mat-slide-toggle formControlName="allowCreateNewDevicesByX509Certificate">
         {{ 'device-profile.provision-strategy-x509.allow-create-new-devices' | translate }}
       </mat-slide-toggle>
-      <div class="tb-hint" style="padding:0 40px 16px" [innerHTML]="'device-profile.provision-strategy-x509.hint-allow-create-new-devices' | translate"></div>
+      <div class="tb-hint" style="padding:0 40px 16px" [innerHTML]="'device-profile.provision-strategy-x509.allow-create-new-devices-hint' | translate"></div>
       <mat-form-field class="mat-block">
         <mat-label translate>device-profile.provision-strategy-x509.certificate-value</mat-label>
         <textarea matInput formControlName="certificateValue" cols="15" rows="5" required></textarea>
@@ -53,14 +57,16 @@
       <mat-form-field class="mat-block">
         <mat-label translate>device-profile.provision-strategy-x509.cn-regex-variable</mat-label>
         <input matInput type="text" formControlName="certificateRegExPattern" required>
+        <div matSuffix
+             tb-help-popup="device-profile/x509-chain-regex-examples"
+             tb-help-popup-placement="bottom"
+             trigger-style="letter-spacing:0.25px"
+             [tb-help-popup-style]="{maxWidth: '820px'}"></div>
         <mat-error *ngIf="provisionConfigurationFormGroup.get('certificateRegExPattern').hasError('required')">
           {{ 'device-profile.provision-strategy-x509.cn-regex-variable-required' | translate }}
         </mat-error>
-        <mat-hint translate>device-profile.provision-strategy-x509.hint-cn-regex-variable</mat-hint>
+        <mat-hint translate>device-profile.provision-strategy-x509.cn-regex-variable-hint</mat-hint>
       </mat-form-field>
-      <div class="tb-hint" style="max-width: 800px; margin-top: 16px"
-           [innerHTML]="'device-profile.provision-strategy-x509.regex-examples' | translate">
-      </div>
     </ng-template>
     <ng-template #default>
       <section fxLayoutGap.gt-xs="8px" fxLayout="row" fxLayout.xs="column">

ui-ngx/src/assets/help/en_US/device-profile/x509-chain-hint.md

@@ -0,0 +1,18 @@
+##### X509 Certificate Chain info
+
+X.509 certificates strategy is used to provision devices by client certificates in two-way TLS communication.
+
+<b>This strategy can:</b>
+* check for pre-provisioned devices
+* update X.509 device credentials
+* create new devices
+
+<b>The user uploads</b> X.509 certificate to the device profile and sets a regular expression to fetch the device name from *Common Name (CN)*.
+
+<b>Client certificates must</b> be signed by X.509 certificate, pre-uploaded for this device profile to provision devices by the strategy. 
+
+<b>The client must</b> establish a TLS connection using the entire chain of certificates (this chain must include device profile X.509 certificate on the last level).
+
+If a device already exists with outdated X.509 credentials, this strategy automatically updates it with the device certificate's credentials from the chain.
+
+<b>Important:</b> Uploaded certificates should be neither root nor intermediate certificates that are provided by a well-known *Certificate Authority (CA)*.

ui-ngx/src/assets/help/en_US/device-profile/x509-chain-regex-examples.md

@@ -0,0 +1,15 @@
+#### Examples of RegEx usage
+
+* **Pattern:** <code>.*</code> - matches any character (until line terminators)
+  <br>**CN sample:** <code>DeviceName\nAdditionalInfo</code>
+  <br>**Pattern matches:** <code>DeviceName</code>
+
+* **Pattern:** <code>^([^@]+)</code> - matches any string that starts with one or more characters that are not the <code>@</code> symbol (<code>@</code> could be replaced by any other symbol)
+  <br>**CN sample:** <code>DeviceName@AdditionalInfo</code>
+  <br>**Pattern matches:** <code>DeviceName</code>
+
+* **Pattern:** <code>[\w]*$</code> (equivalent to <code>[a-zA-Z0-9_]\*$</code>) - matches zero or more occurences of any word character  (letter, digit or underscore) at the end of the string
+  <br>**CN sample:** <code>AdditionalInfo2110#DeviceName_01</code>
+  <br>**Pattern matches:** <code>DeviceName_01</code>
+
+**Note:** Client will get error response in case regex is failed to match.

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -1505,15 +1505,14 @@
         "provision-secret-copied-message": "Provision secret has been copied to clipboard",
         "provision-strategy-x509": {
             "certificate-chain": "X509 Certificates Chain",
-            "hint-certificate-chain": "X.509 certificates strategy is used to provision devices by client certificates in two-way TLS communication. This strategy can check for pre-provisioned devices, update X.509 device credentials, or create new devices. The user uploads X.509 certificate to the device profile and sets a regular expression to fetch the device name from Common Name (CN).<br><br>Client certificates must be signed by X.509 certificate, pre-uploaded for this device profile to provision devices by the strategy. The client must establish a TLS connection using the entire chain of certificates (this chain must include device profile X.509 certificate on the last level). If a device already exists with outdated X.509 credentials, this strategy automatically updates it with the device certificate's credentials from the chain. <br><br><b>Important:</b> Uploaded certificates should be neither root nor intermediate certificates that are provided by a well-known Certificate Authority (CA).",
+            "certificate-chain-hint": "X.509 certificates strategy is used to provision devices by client certificates in two-way TLS communication.",
             "allow-create-new-devices": "Create new devices",
-            "hint-allow-create-new-devices": "Hint: if selected new devices will be created and client certificate will be used as device credentials.",
+            "allow-create-new-devices-hint": "Hint: if selected new devices will be created and client certificate will be used as device credentials.",
             "certificate-value": "Certificate in PEM format",
             "certificate-value-required": "Certificate in PEM format is required",
             "cn-regex-variable": "CN Regular Expression variable",
             "cn-regex-variable-required": "CN Regular Expression variable is required",
-            "hint-cn-regex-variable": "Required to fetch device name from device's X509 certificate's common name.",
-            "regex-examples": "<b>Examples of RegEx usage:</b><ol><li><b>Pattern:</b> <code>.*</code> - matches any character (until line terminators)<br><b>CN sample:</b> <code>DeviceName\\nAdditionalInfo</code><br><b>Pattern matches:</b> <code>DeviceName</code><br><br></li><li><b>Pattern:</b> <code>^([^@]+)</code> - matches any string that starts with one or more characters that are not the <code>@</code> symbol (<code>@</code> could be replaced by any other symbol)<br><b>CN sample:</b> <code>DeviceName@AdditionalInfo</code><br><b>Pattern matches:</b> <code>DeviceName</code><br><br></li><li><b>Pattern:</b> <code>[\\w]*$</code> (equivalent to <code>[a-zA-Z0-9_]*$</code>) - matches zero or more occurences of any word character  (letter, digit or underscore) at the end of the string<br><b>CN sample:</b> <code>AdditionalInfo2110#DeviceName_01</code><br><b>Pattern matches:</b> <code>DeviceName_01</code></li></ol><b>Note:</b> Client will get error response in case regex is failed to match."
+            "cn-regex-variable-hint": "Required to fetch device name from device's X509 certificate's common name."
         },
         "condition": "Condition",
         "condition-type": "Condition type",