Merge branch 'master' into Add-track-columnst-prop

CHANGELOG.md

@@ -47,3 +47,4 @@
 * [UIPQB-55](https://issues.folio.org/browse/UIPQB-55) Regular expressions are incorrect for contains and starts_with operators
 * [UIPQB-70](https://issues.folio.org/browse/UIPQB-70) Array fields support verification
 * [UIPQB-71](https://issues.folio.org/browse/UIPQB-71) Allow dropdown menus for array types
+* [UIPQB-75](https://issues.folio.org/browse/UIPQB-75) Display grouped fields within a list row

src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.css

@@ -0,0 +1,14 @@
+.DynamicTable {
+    width: calc(100% + calc(2 * var(--gutter-static-two-thirds)));
+    margin: calc(-1 * var(--gutter-static-one-third)) calc(-1 * var(--gutter-static-two-thirds));
+    border-collapse: collapse;
+}
+
+.DynamicTable td {
+    vertical-align: top;
+}
+
+
+.DynamicTable th, .DynamicTable td {
+    padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds);
+}

src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import css from './DynamicTable.css';
+
+export const DynamicTable = ({ properties, values }) => {
+  const tableBodyRows = JSON.parse(values);
+
+  if (!tableBodyRows.length) return null;
+
+  return (
+    <table className={css.DynamicTable}>
+      <thead>
+        <tr>{properties?.map((cell) => (
+          <th key={cell.property} style={{ width: `${100 / properties.length}%` }}>{cell.labelAlias}</th>
+        ))}
+        </tr>
+      </thead>
+      <tbody>
+        {tableBodyRows.map((row, index) => (
+          <tr key={index}>
+            {properties?.map((cell) => (
+              <td key={cell.property}>
+                {row[cell.property]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+DynamicTable.propTypes = {
+  properties: PropTypes.arrayOf(PropTypes.object),
+  values: PropTypes.string,
+};

src/QueryBuilder/ResultViewer/DynamicTable/DynamicTable.test.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DynamicTable } from './DynamicTable';
+
+describe('DynamicTable component', () => {
+  const properties = [
+    {
+      'name': 'code',
+      'dataType': {
+        'dataType': 'stringType',
+      },
+      'labelAlias': 'Code',
+      'property': 'code',
+    },
+    {
+      'name': 'distribution_type',
+      'dataType': {
+        'dataType': 'stringType',
+      },
+      'labelAlias': 'Distribution type',
+      'property': 'distributionType',
+    },
+    {
+      'name': 'encumbrance',
+      'dataType': {
+        'dataType': 'rangedUUIDType',
+      },
+      'labelAlias': 'Encumbrance',
+      'property': 'encumbrance',
+    },
+    {
+      'name': 'fund_id',
+      'dataType': {
+        'dataType': 'rangedUUIDType',
+      },
+      'labelAlias': 'Fund ID',
+      'property': 'fundId',
+    },
+    {
+      'name': 'value',
+      'dataType': {
+        'dataType': 'numberType',
+      },
+      'labelAlias': 'Value',
+      'property': 'value',
+    },
+  ];
+
+  const values = '[{"code": "STATE-MONOSER", "value": 100.0, "fundId": "bbd4a5e1-c9f3-44b9-bfdf-d184e04f0ba0", "encumbrance": "eb506834-6c70-4239-8d1a-6414a5b08010", "distributionType": "percentage"}]';
+
+  it('render null value if there are no rows', () => {
+    const { container } = render(<DynamicTable properties={properties} values="[]" />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('renders table with correct properties and values', () => {
+    const { getByText } = render(<DynamicTable properties={properties} values={values} />);
+
+    properties.forEach(property => {
+      const label = getByText(property.labelAlias);
+
+      expect(label).toBeInTheDocument();
+    });
+
+    const codeValue = getByText('STATE-MONOSER');
+
+    expect(codeValue).toBeInTheDocument();
+
+    const encumbranceValue = getByText('eb506834-6c70-4239-8d1a-6414a5b08010');
+
+    expect(encumbranceValue).toBeInTheDocument();
+
+    const fundIdValue = getByText('bbd4a5e1-c9f3-44b9-bfdf-d184e04f0ba0');
+
+    expect(fundIdValue).toBeInTheDocument();
+
+    const numberValue = getByText('100');
+
+    expect(numberValue).toBeInTheDocument();
+  });
+});

src/QueryBuilder/ResultViewer/helpers.js

@@ -1,5 +1,6 @@
 import { FormattedDate } from 'react-intl';
 import { DATA_TYPES } from '../../constants/dataTypes';
+import { DynamicTable } from './DynamicTable/DynamicTable';
 
 export const getTableMetadata = (entityType) => {
   const defaultColumns = entityType?.columns?.map((cell) => ({
@@ -9,6 +10,7 @@ export const getTableMetadata = (entityType) => {
     readOnly: false,
     selected: cell.visibleByDefault,
     dataType: cell.dataType.dataType,
+    properties: cell.dataType.itemDataType?.properties,
   })) || [];
 
   const columnMapping = defaultColumns?.reduce((acc, { value, label }) => {
@@ -19,10 +21,12 @@ export const getTableMetadata = (entityType) => {
 
   const defaultVisibleColumns = defaultColumns?.filter(col => col.selected).map(col => col.value) || [];
   const formatter = defaultColumns.reduce((formatted, column) => {
-    const { value, dataType } = column;
+    const { value, dataType, properties } = column;
 
     formatted[value] = (item) => {
-      if (dataType === DATA_TYPES.DateType) {
+      if (properties?.length) {
+        return <DynamicTable properties={properties} values={item[value]} />;
+      } else if (dataType === DATA_TYPES.DateType) {
         return item[value] ? <FormattedDate value={item[value]} /> : '';
       } else if (dataType === DATA_TYPES.ArrayType) {
         return item[value]?.join(' | ');