[AAE-9200] - Be able to customise task/process list and header date f… (#7711)

* [AAE-9200] - Be able to customise task/process list and header date formats

* Update json schema

* Revert schema changes

* Update task and process name translation values

* move task/process header date formats inside header config

* Add documentation

* Update documentation

* Use a fixed timezone for unit tests of core and cloud

* Fix e2e due to column rename

* More e2e fixes due to column rename, remove test covered by unit test

lib/core/datatable/components/date-cell/date-cell.component.spec.ts

@@ -0,0 +1,73 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UserPreferencesService } from '../../../services';
+import { AppConfigService } from '../../../app-config';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CoreTestingModule } from '../../../testing';
+import { DateCellComponent } from './date-cell.component';
+
+describe('DateCellComponent', () => {
+    let appConfigService: AppConfigService;
+    let userPreferencesService: UserPreferencesService;
+    let fixture: ComponentFixture<DateCellComponent>;
+    let component: DateCellComponent;
+    let getLocaleSpy: jasmine.Spy;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CoreTestingModule
+            ],
+            declarations: [DateCellComponent]
+        });
+        appConfigService = TestBed.inject(AppConfigService);
+        userPreferencesService = TestBed.inject(UserPreferencesService);
+
+        getLocaleSpy = spyOn(userPreferencesService, 'select').and.callThrough();
+        appConfigService.config = {
+            dateValues: {
+                defaultDateFormat: 'mediumDate',
+                defaultTooltipDateFormat: 'medium'
+            }
+        };
+        fixture = TestBed.createComponent(DateCellComponent);
+        component = fixture.componentInstance;
+    });
+
+    it('should read locale from user preferences service', () => {
+        expect(getLocaleSpy).toHaveBeenCalledWith('locale');
+        expect(component.currentLocale).toEqual('en');
+    });
+
+    it('should read date format values from app config service', () => {
+        expect(component.format).toEqual('mediumDate');
+        expect(component.tooltipDateFormat).toEqual('medium');
+    });
+
+    it('should date values be formatted based on the formats defined in the app config', () => {
+        component.value$.next('2022-07-14T11:50:45.973+0000');
+        component.tooltip = '2022-07-14T11:50:45.973+0000';
+        fixture.detectChanges();
+        const dateCellValue = fixture.nativeElement.querySelector('.adf-datatable-cell-value');
+        const tooltipValue = dateCellValue.attributes['title'].value;
+
+        expect(dateCellValue.textContent.trim()).toEqual('Jul 14, 2022');
+        expect(dateCellValue.attributes['aria-label'].value).toEqual('Jul 14, 2022');
+        expect(tooltipValue).toEqual('Jul 14, 2022, 11:50:45 AM');
+    });
+});

lib/core/datatable/components/date-cell/date-cell.component.ts

@@ -41,8 +41,7 @@ import { takeUntil } from 'rxjs/operators';
         <ng-template #standard_date>
             <span
                 class="adf-datatable-cell-value"
-                title="{{ tooltip | adfLocalizedDate: format }}"
-                class="adf-datatable-cell-value"
+                title="{{ tooltip | adfLocalizedDate: tooltipDateFormat }}"
                 [attr.aria-label]="value$ | async | adfLocalizedDate: format">
                 {{ value$ | async | adfLocalizedDate: format }}
             </span>
@@ -57,6 +56,7 @@ export class DateCellComponent extends DataTableCellComponent {
 
     currentLocale: string;
     dateFormat: string;
+    tooltipDateFormat: string;
 
     get format(): string {
         if (this.column) {
@@ -73,6 +73,7 @@ export class DateCellComponent extends DataTableCellComponent {
         super(alfrescoApiService);
 
         this.dateFormat = appConfig.get('dateValues.defaultDateFormat', DateCellComponent.DATE_FORMAT);
+        this.tooltipDateFormat = appConfig.get('dateValues.defaultTooltipDateFormat', DateCellComponent.DATE_FORMAT);
         if (userPreferenceService) {
             userPreferenceService
                 .select(UserPreferenceValues.Locale)

lib/core/karma.conf.js

@@ -102,4 +102,5 @@ module.exports = function (config) {
         browsers: ['Chrome'],
         singleRun: false
     });
+    process.env.TZ = 'UTC';
 };