Api keys fixes after review.

ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.html

@@ -46,9 +46,11 @@
       <section class="flex gap-3">
         <mat-form-field appearance="outline" subscriptSizing="dynamic" class="flex-1">
           <mat-select formControlName="expirationTime" aria-label="Expiration date selector" (selectionChange)="onExpirationDateChange()">
-            <mat-option [value]="value" *ngFor="let value of expirationDates">
-              {{ value | dateExpiration }}
-            </mat-option>
+            @for (value of expirationTimeOptions; track value) {
+              <mat-option [value]="value">
+                {{ value | dateExpiration }}
+              </mat-option>
+            }
             <mat-option value="never">{{'api-key.expiration-time-never' | translate}}</mat-option>
             <mat-option value="custom">{{'api-key.expiration-time-custom' | translate}}</mat-option>
           </mat-select>

ui-ngx/src/app/modules/home/components/api-key/components/dialog/add-api-key-dialog.component.ts

@@ -15,13 +15,13 @@
 ///
 
 
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { FormBuilder, Validators, UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { deepTrim } from '@core/utils';
 import { ApiKeyService } from '@core/http/api-key.service';
 import { ApiKeyInfo } from '@shared/models/api-key.models';
@@ -33,14 +33,16 @@ import { DAY } from '@shared/models/time/time.models';
   templateUrl: './add-api-key-dialog.component.html',
   styleUrls: ['./add-api-key-dialog.component.scss']
 })
-export class AddApiKeyDialogComponent extends DialogComponent<AddApiKeyDialogComponent, ApiKeyInfo | string> implements OnInit{
-
-  apiKeyForm: UntypedFormGroup;
+export class AddApiKeyDialogComponent extends DialogComponent<AddApiKeyDialogComponent, ApiKeyInfo | string> {
 
   readonly startDate = new Date();
-  readonly expirationDates = [7, 30, 60, 90].map(days => days * DAY);
-
-  private defaultExpirationDate = this.expirationDates[1];
+  readonly expirationTimeOptions: Array<number> = [7, 30, 60, 90].map(days => days * DAY);
+  readonly apiKeyForm = this.fb.group({
+    description: [{value: null, disabled: false}, [Validators.required]],
+    enabled: [{value: true, disabled: false}, []],
+    expirationTime: [{value: this.expirationTimeOptions[1] as string | number, disabled: false}, [Validators.required]],
+    customExpirationTime: [{value: null, disabled: true}, []],
+  });
 
   constructor(
     protected store: Store<AppState>,
@@ -53,15 +55,6 @@ export class AddApiKeyDialogComponent extends DialogComponent<AddApiKeyDialogCom
     super(store, router, dialogRef);
   }
 
-  ngOnInit() {
-    this.apiKeyForm = this.fb.group({
-      description: [{value: null, disabled: false}, [Validators.required]],
-      enabled: [{value: true, disabled: false}, []],
-      expirationTime: [{value: this.defaultExpirationDate, disabled: false}, [Validators.required]],
-      customExpirationTime: [{value: null, disabled: true}, []],
-    });
-  }
-
   close(): void {
     this.dialogRef.close(null);
   }
@@ -89,11 +82,10 @@ export class AddApiKeyDialogComponent extends DialogComponent<AddApiKeyDialogCom
   onExpirationDateChange() {
     const customExpirationTimeControl = this.apiKeyForm.get('customExpirationTime');
     if (this.isCustomExpirationTime()) {
-      customExpirationTimeControl.enable();
+      customExpirationTimeControl.enable({emitEvent: false});
     } else {
-      customExpirationTimeControl.disable();
+      customExpirationTimeControl.disable({emitEvent: false});
     }
-    customExpirationTimeControl.updateValueAndValidity();
   }
 
   private calcExpirationTime(): number {
@@ -104,7 +96,7 @@ export class AddApiKeyDialogComponent extends DialogComponent<AddApiKeyDialogCom
     } else if (expirationTimeValue === 'never') {
       value = 0;
     } else {
-      value = expirationTimeValue + Date.now();
+      value = expirationTimeValue as number + Date.now();
     }
     return value;
   }

ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <mat-toolbar color="primary">
-  <h2>{{ 'api-key.generated-title' | translate }}</h2>
+  <h2>{{ 'api-key.generated-api-key-title' | translate }}</h2>
   <span class="flex-1"></span>
   <button mat-icon-button
           (click)="close()"
@@ -25,14 +25,62 @@
   </button>
 </mat-toolbar>
 <div mat-dialog-content>
-  <span translate>api-key.generated-text</span>
-  <div class="tb-form-panel no-padding no-border tb-tab-body">
-    <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                 [data]='createMarkDownCommand(data.apiKey.value)'></tb-markdown>
-    <div class="tb-form-panel stroked">
-      <div class="tb-form-panel-title" translate>api-key.generated-command-title</div>
+  <div class="tb-form-panel no-padding no-border">
+    <div class="tb-no-data-text font-normal" translate>api-key.generated-api-key-copy</div>
+    <div class="tb-form-panel no-padding no-border">
       <tb-markdown usePlainMarkdown containerClass="tb-command-code"
-                   [data]='createMarkDownCommand(apiKeyCommand)'></tb-markdown>
+                   [data]='createMarkDownCommand(data.apiKey.value)'></tb-markdown>
+    </div>
+    <div class="tb-form-panel no-padding no-border tb-tab-body">
+      <div class="tb-no-data-text font-normal" translate>api-key.generated-api-key-command</div>
+      <mat-tab-group [selectedIndex]="selectedTab">
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon class="tabs-icon" svgIcon="windows"></mat-icon>
+            Windows
+          </ng-template>
+          <ng-template matTabContent>
+            <div class="tb-form-panel no-padding no-border tb-tab-body">
+              <div class="tb-form-panel stroked">
+                <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                <div class="tb-install-instruction-text" translate>device.connectivity.install-curl-windows</div>
+              </div>
+              <ng-container *ngTemplateOutlet="executeCommand"></ng-container>
+            </div>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon class="tabs-icon" svgIcon="macos"></mat-icon>
+            MacOS
+          </ng-template>
+          <ng-template matTabContent>
+            <div class="tb-form-panel no-padding no-border tb-tab-body">
+              <div class="tb-form-panel stroked">
+                <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                <div class="tb-install-instruction-text" translate>device.connectivity.install-curl-macos</div>
+              </div>
+              <ng-container *ngTemplateOutlet="executeCommand"></ng-container>
+            </div>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon class="tabs-icon" svgIcon="linux"></mat-icon>
+            Linux
+          </ng-template>
+          <ng-template matTabContent>
+            <div class="tb-form-panel no-padding no-border tb-tab-body">
+              <div class="tb-form-panel stroked">
+                <div class="tb-form-panel-title" translate>device.connectivity.install-necessary-client-tools</div>
+                <tb-markdown usePlainMarkdown containerClass="tb-command-code"
+                             [data]='createMarkDownCommand("sudo apt-get install curl")'></tb-markdown>
+              </div>
+              <ng-container *ngTemplateOutlet="executeCommand"></ng-container>
+            </div>
+          </ng-template>
+        </mat-tab>
+      </mat-tab-group>
     </div>
   </div>
 </div>
@@ -44,3 +92,10 @@
     {{ 'action.close' | translate }}
   </button>
 </div>
+
+<ng-template #executeCommand>
+  <div class="tb-form-panel stroked">
+    <div class="tb-form-panel-title" translate>device.connectivity.execute-following-command</div>
+    <tb-markdown usePlainMarkdown containerClass="tb-command-code" [data]='createMarkDownCommand(apiKeyCommand)'></tb-markdown>
+  </div>
+</ng-template>

ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.scss

@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 :host{
-  display: block;
-  width: 600px;
+  display: grid;
+  width: 500px;
+  height: 100%;
   max-width: 100%;
-  color: rgba(0, 0, 0, 0.76);
+  max-height: 100vh;
+  grid-template-rows: min-content minmax(auto, 1fr) min-content;
+
+  .tb-install-instruction-text {
+    min-height: 42px;
+  }
 }
 
 :host ::ng-deep {

ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-key-generated-dialog.component.ts

@@ -21,6 +21,7 @@ import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { userInfoCommand, ApiKey } from '@shared/models/api-key.models';
+import { getOS } from '@core/utils';
 
 export interface ApiKeyGeneratedDialogData {
   apiKey: ApiKey;
@@ -34,12 +35,14 @@ export interface ApiKeyGeneratedDialogData {
 export class ApiKeyGeneratedDialogComponent extends DialogComponent<ApiKeyGeneratedDialogComponent, void> {
 
   apiKeyCommand = userInfoCommand(this.data.apiKey.value);
+  selectedTab: number;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
               protected dialogRef: MatDialogRef<ApiKeyGeneratedDialogComponent, void>,
               @Inject(MAT_DIALOG_DATA) public data: ApiKeyGeneratedDialogData) {
     super(store, router, dialogRef);
+    this.selectTabIndexForUserOS();
   }
 
   close(): void {
@@ -52,4 +55,23 @@ export class ApiKeyGeneratedDialogComponent extends DialogComponent<ApiKeyGenera
       '{:copy-code}\n' +
       '```';
   }
+
+  private selectTabIndexForUserOS() {
+    const currentOS = getOS();
+    switch (currentOS) {
+      case 'linux':
+      case 'android':
+        this.selectedTab = 2;
+        break;
+      case 'macos':
+      case 'ios':
+        this.selectedTab = 1;
+        break;
+      case 'windows':
+        this.selectedTab = 0;
+        break;
+      default:
+        this.selectedTab = 2;
+    }
+  }
 }

ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.html

@@ -15,21 +15,25 @@
     limitations under the License.
 
 -->
-<mat-toolbar color="primary">
-  <h2>{{ 'api-key.manage-api-keys' | translate }}</h2>
-  <span class="flex-1"></span>
-  <div tb-help="apiKeys"></div>
-  <button mat-icon-button
-          (click)="close()"
-          type="button">
-    <mat-icon class="material-icons">close</mat-icon>
-  </button>
-</mat-toolbar>
-<tb-api-keys-table [active]="true" [userId]="data.userId"/>
-<div mat-dialog-actions class="justify-end">
-  <button mat-raised-button color="primary"
-          type="button"
-          (click)="close()">
-    {{ 'action.close' | translate }}
-  </button>
+<div class="api-keys-dialog-container flex flex-col xs:h-full">
+  <mat-toolbar color="primary">
+    <h2>{{ 'api-key.manage-api-keys' | translate }}</h2>
+    <span class="flex-1"></span>
+    <div tb-help="apiKeys"></div>
+    <button mat-icon-button
+            (click)="close()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <div mat-dialog-content class="tb-form-panel stroked api-keys-dialog-content xs:flex-1">
+    <tb-api-keys-table [active]="true" [userId]="data.userId"/>
+  </div>
+  <div mat-dialog-actions class="justify-end">
+    <button mat-raised-button color="primary"
+            type="button"
+            (click)="close()">
+      {{ 'action.close' | translate }}
+    </button>
+  </div>
 </div>

ui-ngx/src/app/modules/home/components/api-key/components/dialog/api-keys-table-dialog.component.scss

@@ -14,23 +14,14 @@
  * limitations under the License.
  */
 
-:host ::ng-deep {
-  tb-api-keys-table {
-    tb-entities-table {
-      .tb-absolute-fill {
-        position: relative;
-      }
-      .table-container {
-        width: 1000px;
-        min-height: 625px;
-        max-height: 625px;
-      }
-      .no-data-found {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
+:host {
+  .api-keys-dialog-container {
+    width: 1080px;
+    max-width: 100%;
+
+    .api-keys-dialog-content {
+      height: 65vh;
+      border-radius: 0;
     }
   }
 }

ui-ngx/src/app/modules/home/components/home-components.module.ts

@@ -512,9 +512,6 @@ import {
     ResourcesLibraryComponent,
     ApiKeysTableComponent,
     ApiKeysTableDialogComponent,
-    AddApiKeyDialogComponent,
-    EditApiKeyDescriptionPanelComponent,
-    ApiKeyGeneratedDialogComponent,
   ],
   providers: [
     WidgetComponentService,

ui-ngx/src/app/modules/home/pages/user/user-tabs.component.html

@@ -40,7 +40,7 @@
          label="{{ 'audit-log.audit-logs' | translate }}" #auditLogsTab="matTab">
   <tb-audit-log-table [active]="auditLogsTab.isActive" [auditLogMode]="auditLogModes.USER" [userId]="entity.id" detailsMode="true"></tb-audit-log-table>
 </mat-tab>
-<mat-tab *ngIf="entity && authUser.authority === authorities.TENANT_ADMIN"
+<mat-tab *ngIf="entity"
          label="{{ 'api-key.api-keys' | translate }}" #apiKeysTab="matTab">
   <tb-api-keys-table [active]="apiKeysTab.isActive" [userId]="entity.id"></tb-api-keys-table>
 </mat-tab>

ui-ngx/src/app/shared/models/id/public-api.ts

@@ -45,3 +45,4 @@ export * from './widgets-bundle-id';
 export * from './edge-id';
 export * from './asset-id';
 export * from './ai-model-id';
+export * from './api-key-id';

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

@@ -998,9 +998,9 @@
         "generate": "Generate",
         "generate-title": "Generate API key",
         "generate-text": "Note: The API key's permissions will inherit the rights of the user account that generates it.",
-        "generated-title": "API key successfully generated",
-        "generated-text": "Make sure to copy and save your API key now as you will not be able to see it again.",
-        "generated-command-title": "Execute following command to display information about current user:",
+        "generated-api-key-title": "API key generated. Let’s check connectivity!",
+        "generated-api-key-copy": "Make sure to copy and save your API key now as you will not be able to see it again.",
+        "generated-api-key-command": "Use the following instructions to check connectivity. As a result, you should receive the current user information:",
         "list": "{ count, plural, =1 {One API key} other {List of # API keys} }",
         "manage": "Manage",
         "manage-api-keys": "Manage API keys",