Refactor API key dialog components and styles.

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

@@ -25,7 +25,7 @@ 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';
-import { ApiKeysTableDialogData } from '@home/components/api-key/components/dialog/api-keys-table-dialog.component';
+import { ApiKeysTableDialogData } from '@home/components/api-key/api-keys-table-dialog.component';
 import { DAY } from '@shared/models/time/time.models';
 
 @Component({

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

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../src/scss/constants';
+
 :host{
   display: grid;
   width: 500px;
@@ -34,8 +36,10 @@
         pre[class*=language-] {
           margin: 0;
           background: #F3F6FA;
-          border-color: #305680;
+          border-color: $tb-primary-color;
           padding-right: 38px;
+          overflow: hidden;
+          overflow-x: auto;
           padding-bottom: 4px;
           min-height: 42px;
           scrollbar-width: thin;
@@ -49,7 +53,7 @@
       button.clipboard-btn {
         right: -2px;
         p {
-          color: #305680;
+          color: $tb-primary-color;
         }
         p, div {
           background-color: #F3F6FA;
@@ -64,7 +68,7 @@
             display: block;
             width: 18px;
             height: 18px;
-            background: #305680;
+            background: $tb-primary-color;
             mask-image: url(/assets/copy-code-icon.svg);
             -webkit-mask-image: url(/assets/copy-code-icon.svg);
             mask-repeat: no-repeat;

ui-ngx/src/app/modules/home/components/api-key/api-keys-table-config.ts

@@ -17,7 +17,8 @@
 import {
   DateEntityTableColumn,
   EntityTableColumn,
-  EntityTableConfig
+  EntityTableConfig,
+  CellActionDescriptor
 } from '@home/models/entity/entities-table-config.models';
 import { EntityType, EntityTypeResource, entityTypeTranslations } from '@shared/models/entity-type.models';
 import { Direction } from '@shared/models/page/sort-order';
@@ -32,14 +33,13 @@ import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { map } from 'rxjs/operators';
 import { UserId } from '@shared/models/id/user-id';
-import { AddApiKeyDialogComponent } from '@home/components/api-key/components/dialog/add-api-key-dialog.component';
+import { AddApiKeyDialogComponent } from '@home/components/api-key/add-api-key-dialog.component';
+import { EditApiKeyDescriptionPanelComponent } from '@home/components/api-key/edit-api-key-description-panel.component';
+import { ApiKeysTableDialogData } from '@home/components/api-key/api-keys-table-dialog.component';
 import {
-  EditApiKeyDescriptionPanelComponent
-} from '@home/components/api-key/components/dialog/edit-api-key-description-panel.component';
-import { ApiKeysTableDialogData } from '@home/components/api-key/components/dialog/api-keys-table-dialog.component';
-import {
-  ApiKeyGeneratedDialogComponent, ApiKeyGeneratedDialogData
-} from '@home/components/api-key/components/dialog/api-key-generated-dialog.component';
+  ApiKeyGeneratedDialogComponent,
+  ApiKeyGeneratedDialogData
+} from '@home/components/api-key/api-key-generated-dialog.component';
 
 @Injectable()
 export class ApiKeysTableConfig extends EntityTableConfig<ApiKeyInfo> {
@@ -65,6 +65,7 @@ export class ApiKeysTableConfig extends EntityTableConfig<ApiKeyInfo> {
     this.entityTranslations = entityTypeTranslations.get(EntityType.API_KEY);
     this.entityResources = {} as EntityTypeResource<ApiKeyInfo>;
     this.tableTitle = this.translate.instant('api-key.api-keys');
+    this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
 
     this.entitiesFetchFunction = pageLink => this.apiKeyService.getUserApiKeys(this.userId.id, pageLink);
     this.addEntity = () => this.addApiKey();
@@ -75,18 +76,7 @@ export class ApiKeysTableConfig extends EntityTableConfig<ApiKeyInfo> {
     this.deleteEntitiesContent = () => this.translate.instant('api-key.delete-api-keys-text');
     this.deleteEntity = id => this.apiKeyService.deleteApiKey(id.id);
 
-    this.cellActionDescriptors = [{
-      name: '',
-      nameFunction: (entity) =>
-        this.translate.instant(entity.enabled ? 'api-key.disable' : 'api-key.enable'),
-      icon: 'mdi:toggle-switch',
-      isEnabled: (entity) => !entity.expired,
-      iconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline',
-      onAction: ($event, entity) => this.toggleEnableMode($event, entity)
-    }];
-
-    this.defaultSortOrder = {property: 'createdTime', direction: Direction.DESC};
-
+    this.cellActionDescriptors = this.configureCellActions();
     this.columns.push(
       new DateEntityTableColumn<ApiKeyInfo>('createdTime', 'common.created-time', this.datePipe, '170px'),
       new EntityTableColumn<ApiKeyInfo>('description', 'api-key.description', '100%',
@@ -108,6 +98,21 @@ export class ApiKeysTableConfig extends EntityTableConfig<ApiKeyInfo> {
     );
   }
 
+  private configureCellActions(): Array<CellActionDescriptor<ApiKeyInfo>> {
+    const actions: Array<CellActionDescriptor<ApiKeyInfo>> = [];
+    actions.push(
+      {
+        name: '',
+        nameFunction: (entity) => this.translate.instant(entity.enabled ? 'api-key.disable' : 'api-key.enable'),
+        icon: 'mdi:toggle-switch',
+        isEnabled: (entity) => !entity.expired,
+        iconFunction: (entity) => entity.enabled ? 'mdi:toggle-switch' : 'mdi:toggle-switch-off-outline',
+        onAction: ($event, entity) => this.toggleEnableMode($event, entity)
+      }
+    )
+    return actions;
+  }
+
   private addApiKey(): Observable<ApiKey> {
     return this.dialog.open<AddApiKeyDialogComponent, ApiKeysTableDialogData, ApiKey>(AddApiKeyDialogComponent, {
       disableClose: true,
@@ -137,7 +142,6 @@ export class ApiKeysTableConfig extends EntityTableConfig<ApiKeyInfo> {
       });
   }
 
-
   private toggleEnableMode($event: Event, entity: ApiKeyInfo): void {
     if ($event) {
       $event.stopPropagation();

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

@@ -198,16 +198,10 @@ import { CalculatedFieldsModule } from '@home/components/calculated-fields/calcu
 import { AlarmRuleModule } from "@home/components/alarm-rules/alarm-rule.module";
 import { AlarmRulesTableComponent } from "@home/components/alarm-rules/alarm-rules-table.component";
 import { ApiKeysTableComponent } from '@home/components/api-key/api-keys-table.component';
-import { AddApiKeyDialogComponent } from '@home/components/api-key/components/dialog/add-api-key-dialog.component';
-import {
-  EditApiKeyDescriptionPanelComponent
-} from '@home/components/api-key/components/dialog/edit-api-key-description-panel.component';
-import {
-  ApiKeyGeneratedDialogComponent
-} from '@home/components/api-key/components/dialog/api-key-generated-dialog.component';
-import {
-  ApiKeysTableDialogComponent
-} from '@home/components/api-key/components/dialog/api-keys-table-dialog.component';
+import { AddApiKeyDialogComponent } from '@home/components/api-key/add-api-key-dialog.component';
+import { EditApiKeyDescriptionPanelComponent } from '@home/components/api-key/edit-api-key-description-panel.component';
+import { ApiKeyGeneratedDialogComponent } from '@home/components/api-key/api-key-generated-dialog.component';
+import { ApiKeysTableDialogComponent } from '@home/components/api-key/api-keys-table-dialog.component';
 
 @NgModule({
   declarations:

ui-ngx/src/app/modules/home/pages/security/security.component.ts

@@ -53,8 +53,9 @@ import { AuthService } from '@core/auth/auth.service';
 import { UserPasswordPolicy } from '@shared/models/settings.models';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import {
-  ApiKeysTableDialogComponent, ApiKeysTableDialogData
-} from '@home/components/api-key/components/dialog/api-keys-table-dialog.component';
+  ApiKeysTableDialogComponent,
+  ApiKeysTableDialogData
+} from '@home/components/api-key/api-keys-table-dialog.component';
 
 @Component({
   selector: 'tb-security',