Skip to content

Commit

Permalink
Move operator message, fix various things (onecx#273)
Browse files Browse the repository at this point in the history 
* fix: move operator message, fix various things

* fix: code cleanup

* fix: code cleanup

* fix: tests
  • Loading branch information
@HenryT-CG
HenryT-CG authored Oct 4, 2024
1 parent d272e83 commit 989f8c1
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 137 deletions.
37 changes: 19 additions & 18 deletions src/app/theme/theme-detail/theme-detail.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,10 @@
[figureImage]="headerImageUrl"
[figureBackground]="!theme?.logoUrl"
>
<p-message
*ngIf="theme?.operator"
id="theme_designer_operator_message"
severity="warn"
[text]="'INTERNAL.OPERATOR_MESSAGE' | translate"
></p-message>
</ocx-page-header>

<ocx-page-content>
<p-tabView>
<p-tabView (onChange)="onTabChange($event)">
<p-tabPanel
id="th_detail_panel_props"
[header]="'THEME.TABS.PROPERTIES' | translate"
Expand All @@ -25,31 +19,37 @@
tooltipPosition="top"
tooltipEvent="hover"
>
<div class="grid grid-nogutter m-3">
<div class="col-12 md:col-10 lg:col-10 xl:col-6 flex flex-column row-gap-4">
<p-message
*ngIf="theme?.operator && showOperatorMessage"
id="th_detail_operator_message"
styleClass="absolute z-1 max-w-11 fadeout animation-duration-1000 animation-delay-3000 animation-iteration-1 animation-fill-forwards"
severity="warn"
[text]="'INTERNAL.OPERATOR_MESSAGE' | translate"
></p-message>
<div class="surface-section mb-1 mt-2 mx-3">
<div class="flex flex-wrap flex-column row-gap-4 w-12 md:w-10 lg:w-8 xl:w-6">
<span class="p-float-label">
<input
pInputText
type="text"
readonly
class="w-full"
id="th_detail_item_display_name"
id="th_detail_props_item_display_name"
[value]="theme?.displayName"
[pTooltip]="'THEME.TOOLTIPS.DISPLAY_NAME' | translate"
tooltipPosition="top"
tooltipEvent="hover"
/>
<label for="th_detail_item_display_name">{{ 'THEME.DISPLAY_NAME' | translate }}</label>
</span>

<span class="p-float-label">
<textarea
pInputTextarea
readonly
class="w-full"
autoresize="true"
rows="3"
id="th_detail_item_description"
id="th_detail_props_item_description"
[ngModel]="theme?.description"
[pTooltip]="'THEME.DESCRIPTION' | translate"
tooltipPosition="top"
Expand All @@ -64,7 +64,7 @@
{{ 'LOGO.LABEL' | translate }}</label
>
<app-image-container
id="th_detail_item_logo"
id="th_detail_props_item_logo"
[imageUrl]="getImageUrl(theme, RefType.Logo)"
[small]="true"
></app-image-container>
Expand All @@ -74,7 +74,7 @@
{{ 'FAVICON.LABEL' | translate }}</label
>
<app-image-container
id="th_detail_item_favicon"
id="th_detail_props_item_favicon"
[imageUrl]="getImageUrl(theme, RefType.Favicon)"
[small]="true"
></app-image-container>
Expand All @@ -91,7 +91,7 @@
tooltipPosition="top"
tooltipEvent="hover"
>
<app-theme-intern [theme]="theme" [dateFormat]="dateFormat" [workspaceList]="workspaceList"></app-theme-intern>
<app-theme-intern [theme]="theme" [dateFormat]="dateFormat"></app-theme-intern>
</p-tabPanel>

<p-tabPanel
Expand Down Expand Up @@ -125,14 +125,15 @@
[(visible)]="themeDeleteVisible"
[header]="('ACTIONS.DELETE.TOOLTIP' | translate).replace('{{TYPE}}', 'Theme')"
[modal]="true"
[resizable]="false"
[resizable]="true"
[dragable]="true"
[dismissableMask]="true"
[style]="{ 'max-width': '425px' }"
>
<div class="flex column-gap-3 row-gap-1 justify-content-start align-items-center">
<div class="pi pi-question-circle text-3xl danger-action-text"></div>
<div>
<div>{{ this.themeDeleteMessage }}</div>
<div id="th_delete_message_text" class="font-bold">{{ this.themeDeleteMessage }}</div>
<div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
</div>
</div>
Expand All @@ -152,7 +153,7 @@
icon="pi pi-check"
styleClass="m-0"
id="th_delete_action_yes"
(onClick)="confirmThemeDeletion()"
(onClick)="onConfirmThemeDeletion()"
[label]="'ACTIONS.CONFIRMATION.YES' | translate"
[pTooltip]="'ACTIONS.CONFIRMATION.YES.TOOLTIP' | translate"
tooltipPosition="top"
Expand Down
18 changes: 9 additions & 9 deletions src/app/theme/theme-detail/theme-detail.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
/* limit deletion dialog */
@import 'src/app/_th-mixins.scss';

@include dialog-non-full-size-modal;
@include danger-action;

:host ::ng-deep {
@media (max-width: 991px) {
.p-dialog.p-dialog {
max-height: unset !important;
height: unset !important;
}
.max-w-11 {
max-width: 90%;
}

.danger-action-text {
color: var(--danger-button-bg);
.animation-delay-3000 {
animation-delay: 3000ms !important;
}
}
80 changes: 34 additions & 46 deletions src/app/theme/theme-detail/theme-detail.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { NO_ERRORS_SCHEMA } from '@angular/core'
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
import { Location } from '@angular/common'
import { HttpErrorResponse } from '@angular/common/http'
import { HttpClientTestingModule } from '@angular/common/http/testing'
import { ActivatedRoute, Router } from '@angular/router'
Expand All @@ -26,6 +27,7 @@ describe('ThemeDetailComponent', () => {
}
}
const msgServiceSpy = jasmine.createSpyObj<PortalMessageService>('PortalMessageService', ['success', 'error'])
const locationSpy = jasmine.createSpyObj<Location>('Location', ['back'])

const configServiceSpy = {
getProperty: jasmine.createSpy('getProperty').and.returnValue('123'),
Expand Down Expand Up @@ -53,6 +55,7 @@ describe('ThemeDetailComponent', () => {
{ provide: UserService, useValue: mockUserService },
{ provide: PortalMessageService, useValue: msgServiceSpy },
{ provide: ConfigurationService, useValue: configServiceSpy },
{ provide: Location, useValue: locationSpy },
{ provide: ThemesAPIService, useValue: themesApiSpy }
],
schemas: [NO_ERRORS_SCHEMA]
Expand All @@ -63,6 +66,7 @@ describe('ThemeDetailComponent', () => {
themesApiSpy.getThemeByName.calls.reset()
themesApiSpy.exportThemes.and.returnValue(of({}) as any)
themesApiSpy.exportThemes.calls.reset()
locationSpy.back.calls.reset()
}))

beforeEach(() => {
Expand Down Expand Up @@ -103,6 +107,15 @@ describe('ThemeDetailComponent', () => {
expect(component.loading).toBe(false)
})

it('should set showOperatorMessage to false', async () => {
const event = { index: 1 }

await component.ngOnInit()
component.onTabChange(event)

expect(component.showOperatorMessage).toBeFalsy()
})

it('should create with default dateFormat', async () => {
// recreate component to test constructor
initializeComponent()
Expand All @@ -118,22 +131,15 @@ describe('ThemeDetailComponent', () => {

it('should load theme and action translations on successful call', async () => {
const themeResponse = {
resource: {
name: 'themeName'
},
workspaces: [
{
name: 'workspace',
description: 'workspaceDesc'
}
]
resource: { name: 'themeName', displayName: 'Theme' },
workspaces: [{ name: 'workspace', description: 'workspaceDesc' }]
}
themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)

const translateService = TestBed.inject(TranslateService)
const actionsTranslations = {
'ACTIONS.NAVIGATION.CLOSE': 'actionNavigationClose',
'ACTIONS.NAVIGATION.CLOSE.TOOLTIP': 'actionNavigationCloseTooltip',
'ACTIONS.NAVIGATION.BACK': 'actionNavigationClose',
'ACTIONS.NAVIGATION.BACK.TOOLTIP': 'actionNavigationCloseTooltip',
'ACTIONS.EDIT.LABEL': 'actionEditLabel',
'ACTIONS.EDIT.TOOLTIP': 'actionEditTooltip',
'ACTIONS.EXPORT.LABEL': 'actionExportLabel',
Expand All @@ -155,8 +161,6 @@ describe('ThemeDetailComponent', () => {
await component.ngOnInit()

expect(component.theme).toEqual(themeResponse['resource'])
//expect(component.workspaceList).toEqual('workspaces')
//this.prepareWorkspaceList(data.workspaces)

let actions: any = []
component.actions$!.subscribe((act) => (actions = act))
Expand All @@ -166,9 +170,9 @@ describe('ThemeDetailComponent', () => {
(a: { label: string; title: string }) =>
a.label === 'actionNavigationClose' && a.title === 'actionNavigationCloseTooltip'
)[0]
spyOn(component, 'close')
spyOn(component, 'onClose')
closeAction.actionCallback()
expect(component.close).toHaveBeenCalledTimes(1)
expect(component.onClose).toHaveBeenCalledTimes(1)

const editAction = actions.filter(
(a: { label: string; title: string }) => a.label === 'actionEditLabel' && a.title === 'actionEditTooltip'
Expand All @@ -192,31 +196,25 @@ describe('ThemeDetailComponent', () => {
expect(component.themeDeleteMessage).toBe('')
deleteAction.actionCallback()
expect(component.themeDeleteVisible).toBe(true)
expect(component.themeDeleteMessage).toBe('themeName actionDeleteThemeMessage')
expect(component.themeDeleteMessage).toBe('Theme actionDeleteThemeMessage')
})

it('should load prepare object details on successfull call', async () => {
const themeResponse = {
resource: {
name: 'themeName',
displayName: 'Theme',
creationDate: 'myCreDate',
modificationDate: 'myModDate'
},
workspaces: [
{
name: 'workspace1'
},
{
name: 'workspace2'
}
]
workspaces: [{ name: 'workspace1' }, { name: 'workspace2' }]
}
themesApiSpy.getThemeByName.and.returnValue(of(themeResponse) as any)

const translateService = TestBed.inject(TranslateService)
const actionsTranslations = {
'ACTIONS.NAVIGATION.CLOSE': 'actionNavigationClose',
'ACTIONS.NAVIGATION.CLOSE.TOOLTIP': 'actionNavigationCloseTooltip',
'ACTIONS.NAVIGATION.BACK': 'actionNavigationClose',
'ACTIONS.NAVIGATION.BACK.TOOLTIP': 'actionNavigationCloseTooltip',
'ACTIONS.EDIT.LABEL': 'actionEditLabel',
'ACTIONS.EDIT.TOOLTIP': 'actionEditTooltip',
'ACTIONS.EXPORT.LABEL': 'actionExportLabel',
Expand All @@ -236,12 +234,10 @@ describe('ThemeDetailComponent', () => {
spyOn(translateService, 'get').and.returnValues(of(actionsTranslations), of(generalTranslations))

await component.ngOnInit()

expect(component.workspaceList).toBe('workspace1, workspace2')
})

it('should display not found error and close page on theme fetch failure', () => {
spyOn(component, 'close')
spyOn(component, 'onClose')
themesApiSpy.getThemeByName.and.returnValue(
throwError(
() =>
Expand All @@ -257,11 +253,11 @@ describe('ThemeDetailComponent', () => {
summaryKey: 'THEME.LOAD_ERROR',
detailKey: 'THEME.NOT_FOUND'
})
expect(component.close).toHaveBeenCalledTimes(1)
expect(component.onClose).toHaveBeenCalledTimes(1)
})

it('should display catched error and close page on theme fetch failure', () => {
spyOn(component, 'close')
spyOn(component, 'onClose')
themesApiSpy.getThemeByName.and.returnValue(
throwError(
() =>
Expand All @@ -277,23 +273,14 @@ describe('ThemeDetailComponent', () => {
summaryKey: 'THEME.LOAD_ERROR',
detailKey: 'does not contain checked string'
})
expect(component.close).toHaveBeenCalledTimes(1)
})

it('should return empty string if theme has no workspaces', () => {
component.theme = undefined

const result = component.prepareWorkspaceList()
expect(result).toBe('')
expect(component.onClose).toHaveBeenCalledTimes(1)
})

it('should navigate back on close', () => {
const router = TestBed.inject(Router)
spyOn(router, 'navigate')

component.close()
component.ngOnInit()
component.onClose()

expect(router.navigate).toHaveBeenCalledOnceWith(['./..'], jasmine.any(Object))
expect(locationSpy.back).toHaveBeenCalled()
})

it('should set header image url with prefix when theme logo doesnt have http/https', async () => {
Expand Down Expand Up @@ -331,7 +318,7 @@ describe('ThemeDetailComponent', () => {
themesApiSpy.deleteTheme.and.returnValue(of({}) as any)
component.themeDeleteVisible = true

component.confirmThemeDeletion()
component.onConfirmThemeDeletion()

expect(component.themeDeleteVisible).toBe(false)
expect(router.navigate).toHaveBeenCalledOnceWith(['..'], jasmine.any(Object))
Expand All @@ -351,7 +338,7 @@ describe('ThemeDetailComponent', () => {
)
component.themeDeleteVisible = true

component.confirmThemeDeletion()
component.onConfirmThemeDeletion()

expect(component.themeDeleteVisible).toBe(false)
expect(msgServiceSpy.error).toHaveBeenCalledOnceWith({
Expand All @@ -378,6 +365,7 @@ describe('ThemeDetailComponent', () => {
component.theme = {
modificationCount: 1,
name: 'themeName',
displayName: 'Theme',
logoUrl: 'url',

creationDate: 'creationDate',
Expand Down
Loading

0 comments on commit 989f8c1

Please sign in to comment.