From 186fae874a752f734b87c45d35a9c4c5c0e79bc2 Mon Sep 17 00:00:00 2001 From: Bastian Jakobi <55296998+bastianjakobi@users.noreply.github.com> Date: Tue, 27 Feb 2024 11:58:05 +0100 Subject: [PATCH] refactor: migrate icons in TS to PrimeIcons (#151) * refactor: migrate all custom icons in ts to PrimeIcons * fix: fix remaining types --- .../button-dialog.component.spec.ts | 17 +++++++++-------- .../data-layout-selection.component.ts | 11 ++++++----- .../data-list-grid/data-list-grid.component.ts | 8 ++++---- .../data-view-controls.component.ts | 11 ++++++----- .../components/diagram/diagram.component.ts | 2 +- .../page-header.component.stories.ts | 4 ++-- .../page-header/page-header.component.ts | 4 ++-- .../portal-header/header.component.html | 2 +- .../portal-header/header.component.ts | 13 +++++++------ .../src/lib/model/button-dialog.ts | 3 ++- .../lib/services/portal-dialog.service.spec.ts | 17 +++++++++-------- .../src/lib/services/portal-dialog.service.ts | 3 ++- .../testing/data-layout-selection.harness.ts | 9 +++++---- 13 files changed, 56 insertions(+), 48 deletions(-) diff --git a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.spec.ts index 58894c26..47995ce2 100644 --- a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.spec.ts +++ b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.spec.ts @@ -9,6 +9,7 @@ import { ButtonDialogComponent } from './button-dialog.component' import { MockAuthModule } from '../../../mock-auth/mock-auth.module' import { ButtonDialogHarness, DivHarness } from '../../../../../testing' import { ButtonDialogConfig } from '../../../model/button-dialog' +import { PrimeIcons } from 'primeng/api' @Component({ template: ` @@ -20,12 +21,12 @@ class TestBaseHostComponent {} const config: ButtonDialogConfig = { primaryButtonDetails: { key: 'inlineMain', - icon: 'pi pi-plus', + icon: PrimeIcons.PLUS, }, secondaryButtonIncluded: true, secondaryButtonDetails: { key: 'inlineSide', - icon: 'pi pi-times', + icon: PrimeIcons.TIMES, }, } @@ -121,12 +122,12 @@ describe('ButtonDialogComponent', () => { component.dialogData.config = { primaryButtonDetails: { key: 'CustomMain', - icon: 'pi pi-check', + icon: PrimeIcons.CHECK, }, secondaryButtonIncluded: true, secondaryButtonDetails: { key: 'CustomSide', - icon: 'pi pi-times', + icon: PrimeIcons.TIMES, }, } @@ -134,8 +135,8 @@ describe('ButtonDialogComponent', () => { expect(await buttonDialogHarness.getPrimaryButtonLabel()).toBe('CustomMain') expect(await buttonDialogHarness.getSecondaryButtonLabel()).toBe('CustomSide') // expect correct icon - expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe('pi pi-check') - expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe('pi pi-times') + expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe(PrimeIcons.CHECK) + expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe(PrimeIcons.TIMES) }) it('should translate button keys', async () => { @@ -317,9 +318,9 @@ describe('ButtonDialogComponent', () => { buttonDialogHarness = await harnessLoader.getHarness(ButtonDialogHarness) expect(await buttonDialogHarness.getPrimaryButtonLabel()).toBe('inlineMain') - expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe('pi pi-plus') + expect(await buttonDialogHarness.getPrimaryButtonIcon()).toBe(PrimeIcons.PLUS) expect(await buttonDialogHarness.getSecondaryButtonLabel()).toBe('inlineSide') - expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe('pi pi-times') + expect(await buttonDialogHarness.getSecondaryButtonIcon()).toBe(PrimeIcons.TIMES) }) it('should use default emitter inline', async () => { diff --git a/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts index 4580be60..1c2cf7e7 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-layout-selection/data-layout-selection.component.ts @@ -1,16 +1,17 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { PrimeIcons } from 'primeng/api' interface ViewingLayouts { - icon: string + icon: PrimeIcons layout: 'grid' | 'list' | 'table' title?: string titleKey: string } const ALL_VIEW_LAYOUTS: ViewingLayouts[] = [ - { icon: 'pi pi-list', layout: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' }, - { icon: 'pi pi-th-large', layout: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' }, - { icon: 'pi pi-table', layout: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' }, + { icon: PrimeIcons.LIST, layout: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' }, + { icon: PrimeIcons.TH_LARGE, layout: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' }, + { icon: PrimeIcons.TABLE, layout: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' }, ] @Component({ @@ -38,7 +39,7 @@ export class DataLayoutSelectionComponent implements OnInit { this.layout = 'table' } - onDataViewLayoutChange(event: { icon: string; layout: 'grid' | 'list' | 'table' }): void { + onDataViewLayoutChange(event: { icon: PrimeIcons; layout: 'grid' | 'list' | 'table' }): void { this.dataViewLayoutChange.emit(event.layout) } } diff --git a/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts index bef9b8c6..c2c162b7 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts @@ -13,7 +13,7 @@ import { } from '@angular/core' import { Router } from '@angular/router' import { TranslateService } from '@ngx-translate/core' -import { MenuItem } from 'primeng/api' +import { MenuItem, PrimeIcons } from 'primeng/api' import { BehaviorSubject, Observable, combineLatest, map, mergeMap } from 'rxjs' import { DataAction } from '../../../model/data-action' import { DataSortDirection } from '../../../model/data-sort-direction' @@ -259,21 +259,21 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe if (this.viewItem.observed && this.userService.hasPermission(this.viewPermission || '')) { menuItems.push({ label: translations[this.viewMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.VIEW'], - icon: 'pi pi-eye', + icon: PrimeIcons.EYE, command: () => this.viewItem.emit(this.selectedItem), }) } if (this.editItem.observed && this.userService.hasPermission(this.editPermission || '')) { menuItems.push({ label: translations[this.editMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.EDIT'], - icon: 'pi pi-pencil', + icon: PrimeIcons.PENCIL, command: () => this.editItem.emit(this.selectedItem), }) } if (this.deleteItem.observed && this.userService.hasPermission(this.deletePermission || '')) { menuItems.push({ label: translations[this.deleteMenuItemKey || 'OCX_DATA_LIST_GRID.MENU.DELETE'], - icon: 'pi pi-trash', + icon: PrimeIcons.TRASH, command: () => this.deleteItem.emit(this.selectedItem), }) } diff --git a/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts index 4fa3ff11..c9f6e7ca 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-view-controls/data-view-controls.component.ts @@ -5,18 +5,19 @@ import { Column } from '../../../model/column' import { ColumnViewTemplate } from '../../../model/column-view-template' import { ColumnTogglerComponent } from './column-toggler-component/column-toggler.component' import { ViewTemplatePickerComponent } from './view-template-picker/view-template-picker.component' +import { PrimeIcons } from 'primeng/api' interface ViewingModes { - icon: string + icon: PrimeIcons mode: string title?: string titleKey?: string } const ALL_VIEW_MODES = [ - { icon: 'pi pi-list', mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' }, - { icon: 'pi pi-th-large', mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' }, - { icon: 'pi pi-table', mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' }, + { icon: PrimeIcons.LIST, mode: 'list', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.LIST' }, + { icon: PrimeIcons.TH_LARGE, mode: 'grid', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.GRID' }, + { icon: PrimeIcons.TABLE, mode: 'table', titleKey: 'OCX_DATA_LAYOUT_SELECTION.LAYOUT.TABLE' }, ] interface DefaultColumnDefinition { @@ -248,7 +249,7 @@ export class DataViewControlsComponent implements OnInit, OnChanges { }) } - viewModeChange(event: { icon: string; mode: string }): void { + viewModeChange(event: { icon: PrimeIcons; mode: string }): void { this.dataViewChange.emit(event.mode) this.enableToggleColumnButton(event.mode) } diff --git a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts index 55577114..4d8c873f 100644 --- a/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/diagram/diagram.component.ts @@ -8,7 +8,7 @@ import { DiagramType } from '../../../model/diagram-type' import { ColorUtils } from '../../utils/colorutils' export interface DiagramLayouts { - icon: string + icon: PrimeIcons layout: DiagramType title?: string titleKey: string diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.stories.ts b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.stories.ts index 0db7d61c..d5a91c90 100644 --- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.stories.ts +++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.stories.ts @@ -65,7 +65,7 @@ const demoActions: Action[] = [ }, title: 'Tooltip for Reload', show: 'always', - icon: 'pi pi-refresh', + icon: PrimeIcons.REFRESH, }, { label: 'Delete', @@ -75,7 +75,7 @@ const demoActions: Action[] = [ }, title: 'Tooltip for Delete', show: 'always', - icon: 'pi pi-trash', + icon: PrimeIcons.TRASH, }, { label: 'Some action', diff --git a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts index 490c8404..59e480f9 100644 --- a/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/page-header/page-header.component.ts @@ -124,8 +124,8 @@ export class PageHeaderComponent implements OnInit, OnChanges { ) { this.breadcrumbs = breadcrumbs this.home$ = concat( - of({ icon: 'pi pi-home', routerLink: '/' }), - this.appStateService.currentPortal$.pipe(map((portal) => ({ icon: 'pi pi-home', routerLink: portal.baseUrl }))) + of({ icon: PrimeIcons.HOME, routerLink: '/' }), + this.appStateService.currentPortal$.pipe(map((portal) => ({ icon: PrimeIcons.HOME, routerLink: portal.baseUrl }))) ) } ngOnChanges(changes: SimpleChanges): void { diff --git a/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.html b/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.html index 585bb609..6f839c5a 100644 --- a/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.html @@ -62,7 +62,7 @@ [pTooltip]="item.label || ''" tooltipPosition="bottom" > - + diff --git a/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.ts b/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.ts index 94a764fd..4fff49b1 100644 --- a/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/portal-header/header.component.ts @@ -14,6 +14,7 @@ import { ThemeService } from '../../../services/theme.service' import { ImageLogoUrlUtils } from '../../utils/image-logo-url.utils' import { UserService } from '../../../services/user.service' import { AppStateService } from '../../../services/app-state.service' +import { PrimeIcons } from 'primeng/api' type MenuItemPerm = MenuItem & { permission: string } @Component({ @@ -137,42 +138,42 @@ export class HeaderComponent implements OnInit { this.moreMenuItems = [ { command: (e) => this.onOpenFeedback(e), - icon: 'comment', + icon: PrimeIcons.COMMENT, label: 'Feedback', disabled: this.feedbackDisabled, permission: 'PORTAL_HEADER_GIVE_FEEDBACK#VIEW', }, { command: (e) => this.onAddToFavourites(e), - icon: 'star', + icon: PrimeIcons.STAR, label: 'Add to Favorites', disabled: this.favoritesDisabled, permission: 'PORTAL_HEADER_ADD_TO_MY_FAVORITES#VIEW', }, { command: (e) => this.onOpenSupportTicket(e), - icon: 'ticket', + icon: PrimeIcons.TICKET, label: 'Create Support Ticket', disabled: this.supportTicketDisabled, permission: 'PORTAL_HEADER_CREATE_SUPPORT_TICKET#VIEW', }, { command: (e) => this.onTopbarItemClick(e, 'search'), - icon: 'search', + icon: PrimeIcons.SEARCH, label: 'Search', disabled: this.searchDisabled, permission: 'PORTAL_HEADER_ENTERPRISE_SEARCH#VIEW', }, { command: (e) => this.onOpenHelpPage(e), - icon: 'question-circle', + icon: PrimeIcons.QUESTION_CIRCLE, label: 'Show Help for this article', disabled: this.helpDisabled, permission: 'PORTAL_HEADER_HELP#VIEW', }, { command: (e) => this.onOpenHelpPageEditor(e), - icon: 'pencil', + icon: PrimeIcons.PENCIL, label: 'Edit Help for this article', disabled: this.helpEditorDisabled, permission: 'PORTAL_HEADER_HELP_ITEM_EDITOR#VIEW', diff --git a/libs/portal-integration-angular/src/lib/model/button-dialog.ts b/libs/portal-integration-angular/src/lib/model/button-dialog.ts index 9abb4994..ee383173 100644 --- a/libs/portal-integration-angular/src/lib/model/button-dialog.ts +++ b/libs/portal-integration-angular/src/lib/model/button-dialog.ts @@ -1,4 +1,5 @@ import { Type } from '@angular/core' +import { PrimeIcons } from 'primeng/api' /** * Object describing details for button rendering containing key for translation, optional icon and optional parameters for translation @@ -21,7 +22,7 @@ import { Type } from '@angular/core' */ export interface ButtonDialogButtonDetails { key: string - icon?: string + icon?: PrimeIcons parameters?: Record } diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts index bdc9ca67..6b73a77d 100644 --- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts +++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts @@ -20,6 +20,7 @@ import { PortalDialogService, } from './portal-dialog.service' import { DivHarness, InputHarness, ButtonDialogHarness } from '../../../testing/index' +import { PrimeIcons } from 'primeng/api' @Component({ template: `

BaseTestComponent

`, @@ -336,33 +337,33 @@ describe('PortalDialogService', () => { fixture.componentInstance.show( 'title', 'message', - { key: 'BUTTON', icon: 'pi pi-times' }, - { key: 'BUTTON', icon: 'pi pi-trash' } + { key: 'BUTTON', icon: PrimeIcons.TIMES }, + { key: 'BUTTON', icon: PrimeIcons.TRASH } ) const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness) const primaryButtonLabel = await dialogHarness.getPrimaryButtonLabel() const primaryButtonIcon = await dialogHarness.getPrimaryButtonIcon() expect(primaryButtonLabel).toBe(translations['BUTTON']) - expect(primaryButtonIcon).toBe('pi pi-times') + expect(primaryButtonIcon).toBe(PrimeIcons.TIMES) const secondaryButtonLabel = await dialogHarness.getSecondaryButtonLabel() const secondaryButtonIcon = await dialogHarness.getSecondaryButtonIcon() expect(secondaryButtonLabel).toBe(translations['BUTTON']) - expect(secondaryButtonIcon).toBe('pi pi-trash') + expect(secondaryButtonIcon).toBe(PrimeIcons.TRASH) }) it('should display dialog with message and icon if DialogMessage provided as string and icon', async () => { jest.spyOn(pDialogService, 'open') - fixture.componentInstance.show('title', { message: 'MESSAGE', icon: 'pi pi-times' }, 'button1', 'button2') + fixture.componentInstance.show('title', { message: 'MESSAGE', icon: PrimeIcons.TIMES }, 'button1', 'button2') const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness) const dialogMessageContentHarness = await dialogHarness.getDialogMessageContent() const message = await dialogMessageContentHarness?.getMessageContent() expect(message).toEqual(translations['MESSAGE']) const icon = await dialogMessageContentHarness?.getIconValue() - expect(icon).toContain('pi pi-times') + expect(icon).toContain(PrimeIcons.TIMES) }) it('should display dialog with message and icon if DialogMessage provided as TranslationKey and icon', async () => { @@ -370,7 +371,7 @@ describe('PortalDialogService', () => { fixture.componentInstance.show( 'title', - { message: { key: 'MESSAGE_PARAM', parameters: { val: 'dialogMessageParam' } }, icon: 'pi pi-times' }, + { message: { key: 'MESSAGE_PARAM', parameters: { val: 'dialogMessageParam' } }, icon: PrimeIcons.TIMES }, 'button1', 'button2' ) @@ -380,7 +381,7 @@ describe('PortalDialogService', () => { const message = await dialogMessageContentHarness?.getMessageContent() expect(message).toEqual('myMessage dialogMessageParam') const icon = await dialogMessageContentHarness?.getIconValue() - expect(icon).toContain('pi pi-times') + expect(icon).toContain(PrimeIcons.TIMES) }) it('should display dialog with custom component if provided', async () => { diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts index 78fd25f1..d072dcdb 100644 --- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts +++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts @@ -6,6 +6,7 @@ import { DialogService, DynamicDialogConfig, DynamicDialogRef } from 'primeng/dy import { ButtonDialogComponent } from '../core/components/button-dialog/button-dialog.component' import { ButtonDialogButtonDetails, ButtonDialogData } from '../model/button-dialog' import { DialogMessageContentComponent } from '../core/components/button-dialog/dialog-message-content/dialog-message-content.component' +import { PrimeIcons } from 'primeng/api' /** * Object containing key for translation with parameters object for translation @@ -61,7 +62,7 @@ type TranslationKey = string | TranslationKeyWithParameters * } * ``` */ -type DialogMessage = { message: TranslationKey; icon: string } +type DialogMessage = { message: TranslationKey; icon: PrimeIcons } /** * Implement via component class to be displayed by {@link PortalDialogService.openDialog} diff --git a/libs/portal-integration-angular/testing/data-layout-selection.harness.ts b/libs/portal-integration-angular/testing/data-layout-selection.harness.ts index 64833aa9..dd179eb7 100644 --- a/libs/portal-integration-angular/testing/data-layout-selection.harness.ts +++ b/libs/portal-integration-angular/testing/data-layout-selection.harness.ts @@ -1,5 +1,6 @@ import { ContentContainerComponentHarness, TestElement } from '@angular/cdk/testing' import { PSelectButtonHarness } from './primeng/p-selectButton.harness' +import { PrimeIcons } from 'primeng/api' export class DataLayoutSelectionHarness extends ContentContainerComponentHarness { static hostSelector = 'ocx-data-layout-selection' @@ -9,15 +10,15 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness } async getListLayoutSelectionButton() { - return await this.isDesiredButton(await this.getAllSelectionButtons(), 'pi pi-list') + return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.LIST) } async getGridLayoutSelectionButton() { - return await this.isDesiredButton(await this.getAllSelectionButtons(), 'pi pi-th-large') + return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.TH_LARGE) } async getTableLayoutSelectionButton() { - return await this.isDesiredButton(await this.getAllSelectionButtons(), 'pi pi-table') + return await this.isDesiredButton(await this.getAllSelectionButtons(), PrimeIcons.TABLE) } async getCurrentLayout() { @@ -28,7 +29,7 @@ export class DataLayoutSelectionHarness extends ContentContainerComponentHarness await (await this.getListLayoutSelectionButton())?.click() } - private async isDesiredButton(value: TestElement[], icon: string) { + private async isDesiredButton(value: TestElement[], icon: PrimeIcons) { for (let index = 0; index < value.length; index++) { if ((await value[index].getAttribute('aria-labelledby')) === icon) { return value[index]