Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move operator message, fix various things #273

Merged
merged 4 commits into from
Oct 4, 2024
Merged

Move operator message, fix various things #273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
db94224
fix: move operator message, fix various things
HenryT-CG Oct 4, 2024
dd5d45b
fix: code cleanup
HenryT-CG Oct 4, 2024
bf279f5
fix: code cleanup
HenryT-CG Oct 4, 2024
56d48e2
fix: tests
HenryT-CG Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions src/app/theme/theme-detail/theme-detail.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading