fix: move operator message, fix various things

src/app/theme/theme-detail/theme-detail.component.html

@@ -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"
@@ -25,9 +19,16 @@
         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">
-            <span class="p-float-label">
+        <p-message
+          *ngIf="theme?.operator && showOperatorMessage"
+          id="theme_designer_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="mt-01 p-float-label">
               <input
                 pInputText
                 type="text"
@@ -41,7 +42,6 @@
               />
               <label for="th_detail_item_display_name">{{ 'THEME.DISPLAY_NAME' | translate }}</label>
             </span>
-
             <span class="p-float-label">
               <textarea
                 pInputTextarea
@@ -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
@@ -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 class="font-bold">{{ this.themeDeleteMessage }}</div>
         <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
       </div>
     </div>
@@ -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"

src/app/theme/theme-detail/theme-detail.component.scss

@@ -1,13 +1,16 @@
-/* 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;
-    }
+  .mt-01 {
+    //margin-top: 0.25rem !important;
   }
-
-  .danger-action-text {
-    color: var(--danger-button-bg);
+  .max-w-11 {
+    max-width: 90%;
+  }
+  .animation-delay-3000 {
+    animation-delay: 3000ms !important;
   }
 }

src/app/theme/theme-detail/theme-detail.component.spec.ts

@@ -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'
@@ -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'),
@@ -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]
@@ -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(() => {
@@ -118,22 +122,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',
@@ -155,8 +152,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))
@@ -166,9 +161,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'
@@ -192,31 +187,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',
@@ -236,12 +225,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(
         () =>
@@ -257,11 +244,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(
         () =>
@@ -277,7 +264,7 @@ describe('ThemeDetailComponent', () => {
       summaryKey: 'THEME.LOAD_ERROR',
       detailKey: 'does not contain checked string'
     })
-    expect(component.close).toHaveBeenCalledTimes(1)
+    expect(component.onClose).toHaveBeenCalledTimes(1)
   })
 
   it('should return empty string if theme has no workspaces', () => {
@@ -288,12 +275,10 @@ describe('ThemeDetailComponent', () => {
   })
 
   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 () => {
@@ -331,7 +316,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))
@@ -351,7 +336,7 @@ describe('ThemeDetailComponent', () => {
     )
     component.themeDeleteVisible = true
 
-    component.confirmThemeDeletion()
+    component.onConfirmThemeDeletion()
 
     expect(component.themeDeleteVisible).toBe(false)
     expect(msgServiceSpy.error).toHaveBeenCalledOnceWith({
@@ -378,6 +363,7 @@ describe('ThemeDetailComponent', () => {
     component.theme = {
       modificationCount: 1,
       name: 'themeName',
+      displayName: 'Theme',
       logoUrl: 'url',
 
       creationDate: 'creationDate',