[AAE-15814] Handle direct input mapping with JSON response for data table widget (#8860)

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table-adapter.widget.spec.ts

@@ -17,7 +17,7 @@
 
 import { WidgetDataTableAdapter } from './data-table-adapter.widget';
 import {
-    mockCountriesData,
+    mockEuropeCountriesData,
     mockCountriesIncorrectData,
     mockInvalidSchemaDefinition,
     mockSchemaDefinition,
@@ -29,11 +29,11 @@ describe('WidgetDataTableAdapter', () => {
     let widgetDataTableAdapter: WidgetDataTableAdapter;
 
     beforeEach(() => {
-        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesData, mockSchemaDefinition);
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
     });
 
     it('should set columns type to "text" during initialization', () => {
-        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesData, mockSchemaDefinitionWithDifferentTypes);
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinitionWithDifferentTypes);
 
         widgetDataTableAdapter.getColumns().forEach(column =>
             expect(column.type).toBe('text')
@@ -60,7 +60,7 @@ describe('WidgetDataTableAdapter', () => {
     });
 
     it('should return an empty array if columns have invalid structure', () => {
-        widgetDataTableAdapter = new WidgetDataTableAdapter(mockCountriesData, mockInvalidSchemaDefinition);
+        widgetDataTableAdapter = new WidgetDataTableAdapter(mockEuropeCountriesData, mockInvalidSchemaDefinition);
         const rows = widgetDataTableAdapter.getRows();
         const isDataSourceValid = widgetDataTableAdapter.isDataSourceValid();
 

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.spec.ts

@@ -24,12 +24,15 @@ import { TaskVariableCloud } from '../../../models/task-variable-cloud.model';
 import { FormCloudService } from '../../../services/form-cloud.service';
 import { WidgetDataTableAdapter } from './data-table-adapter.widget';
 import {
-    mockCountriesData,
+    mockEuropeCountriesData,
+    mockAmericaCountriesData,
     mockInvalidSchemaDefinition,
     mockJsonFormVariable,
     mockJsonFormVariableWithIncorrectData,
     mockJsonProcessVariables,
-    mockSchemaDefinition
+    mockSchemaDefinition,
+    mockJsonResponseEuropeCountriesData,
+    mockJsonResponseFormVariable
 } from '../../../mocks/data-table-widget.mock';
 
 describe('DataTableWidgetComponent', () => {
@@ -106,11 +109,54 @@ describe('DataTableWidgetComponent', () => {
         ));
     });
 
+    it('should properly initialize data source with priority on the field value if process and form variables are provided', () => {
+        widget.field = getDataVariable('json-form-variable', mockSchemaDefinition, mockJsonProcessVariables, mockJsonFormVariable);
+        widget.field.value = mockAmericaCountriesData;
+        fixture.detectChanges();
+
+        const expectedData = new WidgetDataTableAdapter(mockAmericaCountriesData, mockSchemaDefinition);
+        expectedData.getRows().forEach(row => row.cssClass = '');
+
+        expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
+    });
+
+    it('should properly initialize data source based on field value', () => {
+        widget.field = getDataVariable('json-form-variable', mockSchemaDefinition, [], []);
+        widget.field.value = mockAmericaCountriesData;
+        fixture.detectChanges();
+
+        const expectedData = new WidgetDataTableAdapter(mockAmericaCountriesData, mockSchemaDefinition);
+        expectedData.getRows().forEach(row => row.cssClass = '');
+
+        expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
+    });
+
+    it('should properly initialize json response data source based on field value', () => {
+        widget.field = getDataVariable('json-form-variable', mockSchemaDefinition, [], []);
+        widget.field.value = mockJsonResponseEuropeCountriesData;
+        fixture.detectChanges();
+
+        const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
+        expectedData.getRows().forEach(row => row.cssClass = '');
+
+        expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
+    });
+
+    it('should properly initialize json response data source based on variable', () => {
+        widget.field = getDataVariable('json-form-variable', mockSchemaDefinition, [], mockJsonResponseFormVariable);
+        fixture.detectChanges();
+
+        const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
+        expectedData.getRows().forEach(row => row.cssClass = '');
+
+        expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
+    });
+
     it('should properly initialize data source based on form variable', () => {
         widget.field = getDataVariable('json-form-variable', mockSchemaDefinition, [], mockJsonFormVariable);
         fixture.detectChanges();
 
-        const expectedData = new WidgetDataTableAdapter(mockCountriesData, mockSchemaDefinition);
+        const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
         expectedData.getRows().forEach(row => row.cssClass = '');
 
         expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
@@ -120,7 +166,7 @@ describe('DataTableWidgetComponent', () => {
         widget.field = getDataVariable('json-variable', mockSchemaDefinition, mockJsonProcessVariables);
         fixture.detectChanges();
 
-        const expectedData = new WidgetDataTableAdapter(mockCountriesData, mockSchemaDefinition);
+        const expectedData = new WidgetDataTableAdapter(mockEuropeCountriesData, mockSchemaDefinition);
         expectedData.getRows().forEach(row => row.cssClass = '');
 
         expect(widget.dataSource.getRows()).toEqual(expectedData.getRows());
@@ -172,15 +218,14 @@ describe('DataTableWidgetComponent', () => {
         expect(widget.dataSource.getRows()).toEqual([]);
     });
 
-    it('should be able to display and log error if variable is not found', () => {
+    it('should be able to display and log error if data source is not found', () => {
-        const notFoundVariable = 'not-found-json-variable';
+        widget.field = getDataVariable('not-found-data-source', mockSchemaDefinition, [], mockJsonFormVariableWithIncorrectData);
-        widget.field = getDataVariable(notFoundVariable, mockSchemaDefinition, [], mockJsonFormVariableWithIncorrectData);
         fixture.detectChanges();
 
         const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-data-table-widget-failed-message'));
 
         expect(failedErrorMsgElement.nativeElement.textContent.trim()).toBe(errorIcon.concat('FORM.FIELD.DATA_TABLE_LOAD_FAILED'));
-        expect(logServiceSpy).toHaveBeenCalledWith(`${notFoundVariable} not found`);
+        expect(logServiceSpy).toHaveBeenCalledWith('Data source not found');
         expect(widget.dataSource).toBeUndefined();
     });
 });

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.ts

@@ -66,6 +66,7 @@ export class DataTableWidgetComponent extends WidgetComponent implements OnInit
     private rowsData: DataRow[];
     private columnsSchema: DataColumn[];
     private variableName: string;
+    private defaultResponseProperty = 'data';
 
     constructor(
         public formService: FormService,
@@ -82,12 +83,10 @@ export class DataTableWidgetComponent extends WidgetComponent implements OnInit
     }
 
     private getTableData(): void {
-        const processVariables = this.field?.form?.processVariables;
-        const formVariables = this.field?.form?.variables;
-
         this.variableName = this.field?.variableConfig?.variableName;
         this.columnsSchema = this.field?.schemaDefinition;
-        this.rowsData = this.getDataFromVariable(processVariables, formVariables);
+
+        this.getRowsData();
     }
 
     private initDataTable(): void {
@@ -100,11 +99,23 @@ export class DataTableWidgetComponent extends WidgetComponent implements OnInit
                 this.handleError('Data source has corrupted model or structure');
             }
         } else {
-            this.handleError(`${this.variableName} not found`);
+            this.handleError('Data source not found');
         }
     }
 
-    private getDataFromVariable(processVariables: TaskVariableCloud[], formVariables: TaskVariableCloud[]): any {
+    private getRowsData(): void {
+        const fieldValue = this.field?.value;
+        const rowsData = fieldValue ? fieldValue : this.getDataFromVariable();
+
+        if (rowsData) {
+            this.rowsData = rowsData[this.defaultResponseProperty] || rowsData as DataRow[];
+        }
+    }
+
+    private getDataFromVariable(): any {
+        const processVariables = this.field?.form?.processVariables;
+        const formVariables = this.field?.form?.variables;
+
         const processVariableDropdownOptions = this.getVariableValueByName(processVariables, this.variableName);
         const formVariableDropdownOptions = this.getVariableValueByName(formVariables, this.variableName);
 

lib/process-services-cloud/src/lib/form/mocks/data-table-widget.mock.ts

@@ -69,7 +69,7 @@ export const mockInvalidSchemaDefinition: DataColumn[] = [
     }
 ];
 
-export const mockCountriesData = [
+export const mockEuropeCountriesData = [
     {
         id: 'PL',
         name: 'Poland'
@@ -84,6 +84,38 @@ export const mockCountriesData = [
     }
 ];
 
+export const mockJsonResponseEuropeCountriesData = {
+    data: [
+        {
+            id: 'PL',
+            name: 'Poland'
+        },
+        {
+            id: 'IT',
+            name: 'Italy'
+        },
+        {
+            id: 'UK',
+            name: 'United Kingdom'
+        }
+    ]
+};
+
+export const mockAmericaCountriesData = [
+    {
+        id: 'CA',
+        name: 'Canada'
+    },
+    {
+        id: 'US',
+        name: 'United States'
+    },
+    {
+        id: 'MX',
+        name: 'Mexico'
+    }
+];
+
 export const mockCountriesIncorrectData = [
     {
         id: 'PL'
@@ -98,10 +130,14 @@ export const mockJsonFormVariableWithIncorrectData = [
 ];
 
 export const mockJsonFormVariable = [
-    new TaskVariableCloud({ name: 'json-form-variable', value: mockCountriesData, type: 'json', id: 'fake-id-1' })
+    new TaskVariableCloud({ name: 'json-form-variable', value: mockEuropeCountriesData, type: 'json', id: 'fake-id-1' })
+];
+
+export const mockJsonResponseFormVariable = [
+    new TaskVariableCloud({ name: 'json-form-variable', value: mockJsonResponseEuropeCountriesData, type: 'json', id: 'fake-id-1' })
 ];
 
 export const mockJsonProcessVariables = [
-    new TaskVariableCloud({ name: 'variables.json-variable', value: mockCountriesData, type: 'json', id: 'fake-id-1' }),
+    new TaskVariableCloud({ name: 'variables.json-variable', value: mockEuropeCountriesData, type: 'json', id: 'fake-id-1' }),
     new TaskVariableCloud({ name: 'variables.different-variable', value: 'fake-value', type: 'json', id: 'fake-id-2' })
 ];