Merge pull request #12319 from vvlladd28/bug/help-button/link-and-show

Enhance help links and improve help button display

ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-table-header.component.html

@@ -15,4 +15,7 @@
     limitations under the License.
 
 -->
-<div tb-help="oauth2Settings" style="margin-left: -20px"></div>
+<section class="flex items-center">
+  <div tbTruncateWithTooltip translate>admin.oauth2.clients</div>
+  <div [tb-help]="entitiesTableConfig.entityResources.helpLinkId"></div>
+</section>

ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-table-header.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -28,6 +28,8 @@ import { PageLink } from '@shared/models/page/page-link';
 })
 export class ClientTableHeaderComponent extends EntityTableHeaderComponent<OAuth2Client, PageLink, OAuth2ClientInfo> {
 
+  @HostBinding('style.width') width = '100%';
+
   constructor(protected store: Store<AppState>) {
     super(store);
   }

ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/clients-table-config.resolver.ts

@@ -15,7 +15,6 @@
 ///
 
 import { Injectable } from '@angular/core';
-
 import {
   DateEntityTableColumn,
   EntityTableColumn,
@@ -45,7 +44,6 @@ export class ClientsTableConfigResolver  {
   constructor(private translate: TranslateService,
               private datePipe: DatePipe,
               private oauth2Service: OAuth2Service) {
-    this.config.tableTitle = this.translate.instant('admin.oauth2.clients');
     this.config.selectionEnabled = false;
     this.config.entityType = EntityType.OAUTH2_CLIENT;
     this.config.rowPointer = true;

ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-config.resolver.ts

@@ -24,7 +24,6 @@ import {
   EntityTableConfig
 } from '@home/models/entity/entities-table-config.models';
 import { DomainInfo } from '@shared/models/oauth2.models';
-import { UtilsService } from '@core/services/utils.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DatePipe } from '@angular/common';
 import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared/models/entity-type.models';
@@ -33,7 +32,7 @@ import { DomainComponent } from '@home/pages/admin/oauth2/domains/domain.compone
 import { isEqual } from '@core/utils';
 import { DomainTableHeaderComponent } from '@home/pages/admin/oauth2/domains/domain-table-header.component';
 import { Direction } from '@app/shared/models/page/sort-order';
-import { map, Observable, of, mergeMap } from 'rxjs';
+import { map, mergeMap, Observable, of } from 'rxjs';
 
 @Injectable()
 export class DomainTableConfigResolver  {
@@ -42,9 +41,7 @@ export class DomainTableConfigResolver  {
 
   constructor(private translate: TranslateService,
               private datePipe: DatePipe,
-              private utilsService: UtilsService,
               private domainService: DomainService) {
-    this.config.tableTitle = this.translate.instant('admin.oauth2.domains');
     this.config.selectionEnabled = false;
     this.config.entityType = EntityType.DOMAIN;
     this.config.rowPointer = true;
@@ -106,7 +103,7 @@ export class DomainTableConfigResolver  {
     this.config.deleteEntity = id => this.domainService.deleteDomain(id.id);
   }
 
-  resolve(route: ActivatedRouteSnapshot): EntityTableConfig<DomainInfo> {
+  resolve(_route: ActivatedRouteSnapshot): EntityTableConfig<DomainInfo> {
     return this.config;
   }
 

ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-header.component.html

@@ -15,4 +15,7 @@
     limitations under the License.
 
 -->
-<div tb-help="oauth2Settings" style="margin-left: -20px"></div>
+<section class="flex items-center">
+  <div tbTruncateWithTooltip translate>admin.oauth2.domains</div>
+  <div [tb-help]="entitiesTableConfig.entityResources.helpLinkId"></div>
+</section>

ui-ngx/src/app/modules/home/pages/admin/oauth2/domains/domain-table-header.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { EntityTableHeaderComponent } from '@home/components/entity/entity-table-header.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -27,6 +27,8 @@ import { DomainInfo } from '@shared/models/oauth2.models';
 })
 export class DomainTableHeaderComponent extends EntityTableHeaderComponent<DomainInfo> {
 
+  @HostBinding('style.width') width = '100%';
+
   constructor(protected store: Store<AppState>) {
     super(store);
   }

ui-ngx/src/app/shared/models/constants.ts

@@ -192,9 +192,10 @@ export const HelpLinks = {
     scada: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/scada`,
     scadaSymbolDev: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/`,
     scadaSymbolDevAnimation: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/scada/scada-symbols-dev-guide/#scadasymbolanimation`,
-    mobileApplication: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/mobile-qr-code/`,
+    domains: `${helpBaseUrl}/docs${docPlatformPrefix}/domains`,
+    mobileApplication: `${helpBaseUrl}/docs${docPlatformPrefix}/mobile-center/applications/`,
     mobileBundle: `${helpBaseUrl}/docs${docPlatformPrefix}/mobile-center/mobile-center/`,
-    mobileQrCode: `${helpBaseUrl}/docs${docPlatformPrefix}/mobile-center/applications/`,
+    mobileQrCode: `${helpBaseUrl}/docs${docPlatformPrefix}/user-guide/ui/mobile-qr-code/`,
   }
 };
 /* eslint-enable max-len */

ui-ngx/src/app/shared/models/entity-type.models.ts

@@ -594,7 +594,7 @@ export const entityTypeResources = new Map<EntityType, EntityTypeResource<BaseDa
     [
       EntityType.DOMAIN,
       {
-        helpLinkId: 'oauth2Settings'
+        helpLinkId: 'domains'
       }
     ],
     [