fix: frozen action column (#266)

* fix: frozen action column

* fix: make action column frozen

* fix: try to simulate permissions in help-editor tests

* fix: try to simulate permissions in help-editor tests

src/app/_hm-mixins.scss

@@ -399,7 +399,7 @@
 }
 @mixin table-zebra-rows {
   :host ::ng-deep {
-    .p-datatable .p-datatable-tbody > tr:nth-child(even) > td {
+    .p-datatable .p-datatable-tbody > tr:nth-child(even) > td:not(.p-frozen-column) {
       background-color: var(--table-body-row-even-bg);
     }
   }

src/app/help/help-search/help-search.component.html

@@ -5,32 +5,32 @@
     [products]="products"
     [actions]="(actions$ | async) ?? []"
   ></app-help-criteria>
-  <ocx-page-content styleClass="px-3 pb-2">
+  <ocx-page-content>
     <div *ngIf="exceptionKey" id="hm_search_criteria_error" class="card px-3 align-items-center">
       <p-message
         id="hm_search_criteria_error_message"
         severity="error"
-        styleClass="p-2"
+        styleClass="m-3 p-2"
         [text]="exceptionKey! | translate"
       ></p-message>
     </div>
     <p-table
       *ngIf="!exceptionKey"
       #table
       id="hm_search_table"
-      responsiveLayout="scroll"
+      styleClass="mx-3 mb-2"
       [value]="loadingResults ? [] : resultsForDisplay"
       [columns]="filteredColumns"
-      styleClass="p-datatable-striped"
       stateStorage="local"
       dataKey="id"
       [reorderableColumns]="false"
-      [rows]="rowsPerPage"
-      [autoLayout]="true"
+      [scrollable]="true"
+      scrollHeight="590px"
+      [rows]="10"
+      [rowsPerPageOptions]="[10, 30, 100]"
       [paginator]="true"
       [alwaysShowPaginator]="true"
       paginatorPosition="bottom"
-      [rowsPerPageOptions]="rowsPerPageOptions"
       [showCurrentPageReport]="true"
       currentPageReportTemplate="{first} - {last} {{ 'ACTIONS.SEARCH.OF' | translate }} {totalRecords}"
     >
@@ -54,8 +54,9 @@
       <ng-template pTemplate="header" let-columns>
         <tr id="hm_search_table_header">
           <th
+            pFrozenColumn
             id="hm_search_table_header_action"
-            class="text-center white-space-nowrap"
+            class="px-2 py-1 sm:py-2 border-right-1 text-center white-space-nowrap"
             [pTooltip]="'ACTIONS.SEARCH.ACTION.TOOLTIP' | translate"
             tooltipPosition="top"
             tooltipEvent="hover"
@@ -79,7 +80,8 @@
 
       <ng-template pTemplate="body" let-row="rowIndex" let-rowData let-columns="columns">
         <tr [id]="'hm_search_table_row_' + row">
-          <td class="px-2 text-center white-space-nowrap">
+          <!-- actions -->
+          <td pFrozenColumn class="px-2 border-right-1 text-center white-space-nowrap">
             <ng-container *ocxIfNotPermission="'HELP#EDIT'">
               <button
                 pbutton

src/app/help/help-search/help-search.component.scss

@@ -2,6 +2,7 @@
 
 @include danger-action;
 @include table-inline-buttons;
+@include table-zebra-rows;
 @include table-responsive-columns;
 @include dialog-footer-buttons;
 @include dialog-non-full-size-modal;
@@ -18,15 +19,19 @@
       white-space: nowrap;
       border-bottom-width: 2px;
     }
-    .p-datatable-thead > tr > th,
-    .p-datatable-tbody > tr > td {
-      padding: 0.5rem;
-    }
     .p-datatable-tbody > tr > td {
       min-width: 10rem;
       &:first-of-type {
         min-width: unset;
       }
     }
   }
+  // hide unusable stuff
+  ocx-column-group-selection,
+  ocx-data-view-controls div div button {
+    display: none;
+  }
+  ocx-data-view-controls div {
+    justify-content: center !important;
+  }
 }

src/app/help/help-search/help-search.component.ts

@@ -62,42 +62,21 @@ export class HelpSearchComponent implements OnInit {
       header: 'APPLICATION_NAME',
       active: true,
       translationPrefix: 'HELP_ITEM',
-      css: 'hidden sm:table-cell px-2 py-1 sm:py-2 '
+      css: 'px-2 py-1 sm:py-2'
     },
     {
       field: 'itemId',
       header: 'HELP_ITEM_ID',
       active: true,
       translationPrefix: 'HELP_ITEM',
-      css: 'px-2 py-1 sm:py-2 '
+      css: 'px-2 py-1 sm:py-2'
     },
     {
       field: 'url',
       header: 'URL',
       active: true,
       translationPrefix: 'HELP_ITEM',
-      css: 'hidden md:table-cell px-2 py-1 sm:py-2 '
-    },
-    {
-      field: 'baseUrl',
-      header: 'BASE_URL',
-      active: false,
-      translationPrefix: 'HELP_ITEM',
-      css: 'hidden lg:table-cell px-2 py-1 sm:py-2 '
-    },
-    {
-      field: 'resourceUrl',
-      header: 'RESOURCE_URL',
-      active: false,
-      translationPrefix: 'HELP_ITEM',
-      css: 'hidden xl:table-cell px-2 py-1 sm:py-2 '
-    },
-    {
-      field: 'context',
-      header: 'CONTEXT',
-      active: false,
-      translationPrefix: 'HELP_ITEM',
-      css: 'hidden xl:table-cell px-2 py-1 sm:py-2 '
+      css: 'px-2 py-1 sm:py-2'
     }
   ]
 

src/app/remotes/help-item-editor/help-item-editor.component.spec.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core'
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'
 import { HttpErrorResponse, provideHttpClient } from '@angular/common/http'
 import { provideHttpClientTesting } from '@angular/common/http/testing'
-import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
 import { Router } from '@angular/router'
 import { ReplaySubject, of, throwError } from 'rxjs'
@@ -13,7 +13,11 @@ import { RippleModule } from 'primeng/ripple'
 import { PrimeIcons } from 'primeng/api'
 
 import { AppStateService } from '@onecx/angular-integration-interface'
-import { PortalDialogService, PortalMessageService } from '@onecx/portal-integration-angular'
+import {
+  PortalDialogService,
+  PortalMessageService,
+  providePortalDialogService
+} from '@onecx/portal-integration-angular'
 import { IfPermissionDirective } from '@onecx/angular-accelerator'
 import { BASE_URL, RemoteComponentConfig } from '@onecx/angular-remote-components'
 
@@ -35,6 +39,10 @@ describe('OneCXHelpItemEditorComponent', () => {
   let fixture: ComponentFixture<OneCXHelpItemEditorComponent>
   let oneCXHelpItemEditorHarness: OneCXHelpItemEditorHarness
 
+  const mockUserService = jasmine.createSpyObj('UserService', ['hasPermission'])
+  mockUserService.hasPermission.and.callFake((permission: string) => {
+    return ['HELP#EDIT', 'HELP#VIEW'].includes(permission)
+  })
   const helpApiServiceSpy = jasmine.createSpyObj<HelpsInternalAPIService>('HelpsInternalAPIService', [
     'searchHelps',
     'createNewHelp',
@@ -43,9 +51,9 @@ describe('OneCXHelpItemEditorComponent', () => {
   ])
   const messageServiceSpy = jasmine.createSpyObj<PortalMessageService>('PortalMessageService', ['error', 'info'])
   const portalDialogServiceSpy = jasmine.createSpyObj<PortalDialogService>('PortalDialogService', ['openDialog'])
-
   let baseUrlSubject: ReplaySubject<any>
-  beforeEach(() => {
+
+  beforeEach(waitForAsync(() => {
     baseUrlSubject = new ReplaySubject<any>(1)
     TestBed.configureTestingModule({
       declarations: [],
@@ -57,16 +65,15 @@ describe('OneCXHelpItemEditorComponent', () => {
       providers: [
         provideHttpClient(),
         provideHttpClientTesting(),
-        {
-          provide: BASE_URL,
-          useValue: baseUrlSubject
-        }
+        providePortalDialogService(),
+        { provide: BASE_URL, useValue: baseUrlSubject }
       ]
     })
       .overrideComponent(OneCXHelpItemEditorComponent, {
         set: {
           imports: [PortalDependencyModule, TranslateTestingModule, TooltipModule, RippleModule, DynamicDialogModule],
           providers: [
+            //  { provide: UserService, useValue: mockUserService },
             { provide: HelpsInternalAPIService, useValue: helpApiServiceSpy },
             { provide: PortalDialogService, useValue: portalDialogServiceSpy },
             { provide: PortalMessageService, useValue: messageServiceSpy }
@@ -81,12 +88,14 @@ describe('OneCXHelpItemEditorComponent', () => {
     helpApiServiceSpy.createNewHelp.calls.reset()
     helpApiServiceSpy.updateHelp.calls.reset()
     helpApiServiceSpy.searchProductsByCriteria.calls.reset()
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.calls.reset()
     messageServiceSpy.error.calls.reset()
     messageServiceSpy.info.calls.reset()
+    mockUserService.hasPermission.and.returnValue(true)
 
     helpApiServiceSpy.searchProductsByCriteria.and.returnValue(of({} as any))
-  })
+  }))
 
   it('should create', () => {
     fixture = TestBed.createComponent(OneCXHelpItemEditorComponent)
@@ -100,7 +109,7 @@ describe('OneCXHelpItemEditorComponent', () => {
     const mockConfig: RemoteComponentConfig = {
       appId: 'appId',
       productName: 'prodName',
-      permissions: ['permission'],
+      permissions: ['HELP#VIEW'],
       baseUrl: 'base'
     }
     spyOn(component, 'ocxInitRemoteComponent')
@@ -395,6 +404,7 @@ describe('OneCXHelpItemEditorComponent', () => {
     oneCXHelpItemEditorHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, OneCXHelpItemEditorHarness)
     await oneCXHelpItemEditorHarness.clickHelpEditorButton()
 
+    // eslint-disable-next-line deprecation/deprecation
     expect(portalDialogServiceSpy.openDialog<Help>).toHaveBeenCalledOnceWith(
       'HELP_ITEM_EDITOR.HEADER',
       {
@@ -410,7 +420,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       { key: 'HELP_ITEM_EDITOR.SAVE', icon: PrimeIcons.CHECK },
       { key: 'HELP_ITEM_EDITOR.CANCEL', icon: PrimeIcons.TIMES },
       false
-      //dialogStyle
+      //{ showXButton: true, draggable: true, resizable: true, width: '550px' }
     )
   })
 
@@ -532,26 +542,18 @@ describe('OneCXHelpItemEditorComponent', () => {
 
     oneCXHelpItemEditorHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, OneCXHelpItemEditorHarness)
     await oneCXHelpItemEditorHarness.clickHelpEditorButton()
+    // eslint-disable-next-line deprecation/deprecation
     expect(portalDialogServiceSpy.openDialog<Help>).toHaveBeenCalledOnceWith(
       'HELP_ITEM_EDITOR.HEADER',
       {
         type: HelpItemEditorFormComponent,
         inputs: {
-          helpItem: {
-            productName: 'mfe_product_name',
-            itemId: 'article_id'
-          },
+          helpItem: { productName: 'mfe_product_name', itemId: 'article_id' },
           productDisplayName: 'mfe_display_product_name'
         }
       },
-      {
-        key: 'HELP_ITEM_EDITOR.SAVE',
-        icon: PrimeIcons.CHECK
-      },
-      {
-        key: 'HELP_ITEM_EDITOR.CANCEL',
-        icon: PrimeIcons.TIMES
-      },
+      { key: 'HELP_ITEM_EDITOR.SAVE', icon: PrimeIcons.CHECK },
+      { key: 'HELP_ITEM_EDITOR.CANCEL', icon: PrimeIcons.TIMES },
       false
       //dialogStyle
     )
@@ -604,23 +606,15 @@ describe('OneCXHelpItemEditorComponent', () => {
 
     oneCXHelpItemEditorHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, OneCXHelpItemEditorHarness)
     await oneCXHelpItemEditorHarness.clickHelpEditorButton()
+    // eslint-disable-next-line deprecation/deprecation
     expect(portalDialogServiceSpy.openDialog<Help>).toHaveBeenCalledOnceWith(
       'HELP_ITEM_EDITOR.HEADER',
       {
         type: HelpItemEditorFormComponent,
-        inputs: {
-          helpItem: helpItem,
-          productDisplayName: 'product_name_1_display'
-        }
-      },
-      {
-        key: 'HELP_ITEM_EDITOR.SAVE',
-        icon: PrimeIcons.CHECK
-      },
-      {
-        key: 'HELP_ITEM_EDITOR.CANCEL',
-        icon: PrimeIcons.TIMES
+        inputs: { helpItem: helpItem, productDisplayName: 'product_name_1_display' }
       },
+      { key: 'HELP_ITEM_EDITOR.SAVE', icon: PrimeIcons.CHECK },
+      { key: 'HELP_ITEM_EDITOR.CANCEL', icon: PrimeIcons.TIMES },
       false
       //dialogStyle
     )
@@ -645,6 +639,7 @@ describe('OneCXHelpItemEditorComponent', () => {
         stream: []
       } as any)
     )
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'secondary'
@@ -691,6 +686,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       itemId: 'result_item_id',
       resourceUrl: 'result_resource_url'
     }
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'primary',
@@ -743,6 +739,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       resourceUrl: 'result_resource_url',
       modificationCount: 1
     }
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'primary',
@@ -802,6 +799,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       resourceUrl: 'result_resource_url',
       modificationCount: 1
     }
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'primary',
@@ -866,6 +864,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       resourceUrl: 'result_resource_url',
       modificationCount: 1
     }
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'primary',
@@ -935,6 +934,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       resourceUrl: 'result_resource_url',
       modificationCount: 1
     }
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'primary',
@@ -996,6 +996,7 @@ describe('OneCXHelpItemEditorComponent', () => {
       resourceUrl: 'result_resource_url',
       modificationCount: 1
     }
+    // eslint-disable-next-line deprecation/deprecation
     portalDialogServiceSpy.openDialog.and.returnValue(
       of({
         button: 'primary',

src/app/remotes/help-item-editor/help-item-editor.component.ts

@@ -1,7 +1,6 @@
 import { Component, Inject, Input } from '@angular/core'
 import { CommonModule, Location } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { provideHttpClientTesting } from '@angular/common/http/testing'
 import { Router } from '@angular/router'
 import { TranslateLoader, TranslateService } from '@ngx-translate/core'
 import { Observable, ReplaySubject, catchError, combineLatest, first, map, mergeMap, of } from 'rxjs'
@@ -40,7 +39,6 @@ import { HelpItemEditorFormComponent } from './help-item-editor-form/help-item-e
   providers: [
     HelpsInternalAPIService,
     PortalMessageService,
-    provideHttpClientTesting(),
     providePortalDialogService(),
     { provide: BASE_URL, useValue: new ReplaySubject<string>(1) },
     provideTranslateServiceForRoot({