[terra-data-grid] Flowsheet Data Grid - No Result Cell

packages/terra-data-grid/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 * Added
   * Added base FlowsheetDataGrid component.
+  * Added "No result" cells to FlowsheetDataGrid.
 
 ## 0.7.0 - (October 3, 2023)
 

packages/terra-data-grid/src/FlowsheetDataGrid.jsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
 import classNames from 'classnames/bind';
 
+import VisuallyHiddenText from 'terra-visually-hidden-text';
+
 import DataGrid from './DataGrid';
 import rowShape from './proptypes/rowShape';
 import { columnShape } from './proptypes/columnShape';
@@ -64,6 +67,12 @@ const propTypes = {
    * Callback function that is called when all selected cells need to be unselected. Parameters: none.
    */
   onClearSelectedCells: PropTypes.func,
+
+  /**
+   * @private
+   * The intl object containing translations. This is retrieved from the context automatically by injectIntl.
+   */
+  intl: PropTypes.shape({ formatMessage: PropTypes.func }).isRequired,
 };
 
 const defaultProps = {
@@ -86,19 +95,42 @@ function FlowsheetDataGrid(props) {
     rowHeight,
     onCellSelect,
     onClearSelectedCells,
+    intl,
   } = props;
 
+  // Replace each non-header cell that contains no content with a dash indicating "No results".
+  const parsedRows = rows.map(
+    (row) => ({
+      ...row,
+      cells: row.cells.map(
+        (cell, index) => ((!cell.content && index !== 0) ? {
+          ...cell,
+          content: (
+            <>
+              <span aria-hidden>{intl.formatMessage({ id: 'Terra.flowsheetDataGrid.no-result-display' })}</span>
+              <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.flowsheetDataGrid.no-result' })} />
+            </>
+          ),
+        } : cell),
+      ),
+    }),
+  );
+
+  // Make all columns not resizable.
+  const nonResizablePinnedColumns = columns.length ? [{ ...columns[0], isResizable: false }] : [];
+  const nonResizableOverflowColumns = columns.length > 1 ? columns.slice(1).map(column => ({ ...column, isResizable: false })) : [];
+
   return (
     <div className={cx('flowsheet-data-grid-container')}>
       <DataGrid
         id={id}
         ariaLabel={ariaLabel}
         ariaLabelledBy={ariaLabelledBy}
-        rows={rows}
+        rows={parsedRows}
         rowHeight={rowHeight}
         rowHeaderIndex={0}
-        pinnedColumns={columns.length ? [{ ...columns[0], isResizable: false }] : []}
-        overflowColumns={columns.length > 1 ? columns.slice(1).map(column => ({ ...column, isResizable: false })) : []}
+        pinnedColumns={nonResizablePinnedColumns}
+        overflowColumns={nonResizableOverflowColumns}
         defaultColumnWidth={defaultColumnWidth}
         columnHeaderHeight={columnHeaderHeight}
         onCellSelect={onCellSelect}
@@ -111,4 +143,4 @@ function FlowsheetDataGrid(props) {
 FlowsheetDataGrid.propTypes = propTypes;
 FlowsheetDataGrid.defaultProps = defaultProps;
 
-export default FlowsheetDataGrid;
+export default injectIntl(FlowsheetDataGrid);

packages/terra-data-grid/tests/jest/FlowsheetDataGrid.test.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import { shallowWithIntl } from 'terra-enzyme-intl';
+import VisuallyHiddenText from 'terra-visually-hidden-text';
 import FlowsheetDataGrid from '../../src/FlowsheetDataGrid';
 
 // Source data for tests
@@ -13,7 +16,7 @@ const dataFile = {
       id: '1',
       cells: [
         { content: 'Heart Rate Monitored (bpm)' },
-        { content: '' },
+        { content: '65' },
         { content: '66' },
       ],
     },
@@ -46,51 +49,207 @@ const dataFile = {
 
 describe('FlowsheetDataGrid', () => {
   it('renders the row header column as pinned and remaining columns as overflow and all columns as not resizable', () => {
-    const wrapper = shallow(
+    const wrapper = shallowWithIntl(
       <FlowsheetDataGrid
         id="test-terra-flowsheet-data-grid"
         columns={dataFile.cols}
         rows={dataFile.rows}
         ariaLabel="Test Flowsheet Data Grid"
       />,
-    );
+    ).shallow();
 
-    const dataGrid = wrapper.find('InjectIntl(DataGrid)');
-    const pinnedColumns = dataGrid.prop('pinnedColumns');
-    expect(pinnedColumns).toEqual(
-      [
-        {
-          displayName: 'Vitals',
-          id: 'Column-0',
-          isResizable: false,
-        },
-      ],
-    );
+    const expectedPinnedColumns = [
+      {
+        displayName: 'Vitals',
+        id: 'Column-0',
+        isResizable: false,
+      },
+    ];
 
-    const overflowColumns = dataGrid.prop('overflowColumns');
-    expect(overflowColumns).toEqual(
-      [
-        {
-          displayName: 'March 16',
-          id: 'Column-1',
-          isResizable: false,
-        },
-        {
-          displayName: 'March 17',
-          id: 'Column-2',
-          isResizable: false,
-        },
-      ],
-    );
+    const expectedOverflowColumns = [
+      {
+        displayName: 'March 16',
+        id: 'Column-1',
+        isResizable: false,
+      },
+      {
+        displayName: 'March 17',
+        id: 'Column-2',
+        isResizable: false,
+      },
+    ];
+
+    const expectedRows = [
+      {
+        id: '1',
+        cells: [
+          { content: 'Heart Rate Monitored (bpm)' },
+          { content: '65' },
+          { content: '66' },
+        ],
+      },
+      {
+        id: '2',
+        cells: [
+          { content: 'Temperature Oral (degC)' },
+          { content: '36.7' },
+          { content: '36.9' },
+        ],
+      },
+      {
+        id: '3',
+        cells: [
+          { content: 'Cardiac Index (L/min/m2)' },
+          { content: '2.25' },
+          { content: '2.28' },
+        ],
+      },
+      {
+        id: '4',
+        cells: [
+          { content: 'Oxygen Flow Rate (L/min)' },
+          { content: '63' },
+          { content: '47' },
+        ],
+      },
+    ];
 
+    const dataGrid = wrapper.find('InjectIntl(DataGrid)');
     expect(dataGrid.prop('id')).toEqual('test-terra-flowsheet-data-grid');
     expect(dataGrid.prop('ariaLabel')).toEqual('Test Flowsheet Data Grid');
     expect(dataGrid.prop('ariaLabelledBy')).toBeUndefined();
+    expect(dataGrid.prop('rows')).toEqual(expectedRows);
     expect(dataGrid.prop('rowHeaderIndex')).toEqual(0);
+    expect(dataGrid.prop('pinnedColumns')).toEqual(expectedPinnedColumns);
+    expect(dataGrid.prop('overflowColumns')).toEqual(expectedOverflowColumns);
     expect(dataGrid.prop('defaultColumnWidth')).toEqual(200);
     expect(dataGrid.prop('columnHeaderHeight')).toEqual('2.5rem');
     expect(dataGrid.prop('rowHeight')).toEqual('2.5rem');
 
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('replaces non-header blank, null, or undefined cell contents with a "No results" visual indicator and hidden text', () => {
+    const updatedDataFile = {
+      ...dataFile,
+      rows: [
+        {
+          id: '1',
+          cells: [
+            { content: 'Heart Rate Monitored (bpm)' },
+            { content: '' },
+            { content: '66' },
+          ],
+        },
+        {
+          id: '2',
+          cells: [
+            { content: 'Temperature Oral (degC)' },
+            { content: '36.7' },
+            { content: null },
+          ],
+        },
+        {
+          id: '3',
+          cells: [
+            { content: 'Cardiac Index (L/min/m2)' },
+            { content: undefined },
+            { content: '2.28' },
+          ],
+        },
+        {
+          id: '4',
+          cells: [
+            { content: '' },
+            { content: null },
+            { content: undefined },
+          ],
+        },
+      ],
+    };
+
+    const expectedRows = [
+      {
+        id: '1',
+        cells: [
+          { content: 'Heart Rate Monitored (bpm)' },
+          {
+            content: (
+              <>
+                <span aria-hidden>Terra.flowsheetDataGrid.no-result-display</span>
+                <VisuallyHiddenText text="Terra.flowsheetDataGrid.no-result" />
+              </>
+            ),
+          },
+          { content: '66' },
+        ],
+      },
+      {
+        id: '2',
+        cells: [
+          { content: 'Temperature Oral (degC)' },
+          { content: '36.7' },
+          {
+            content: (
+              <>
+                <span aria-hidden>Terra.flowsheetDataGrid.no-result-display</span>
+                <VisuallyHiddenText text="Terra.flowsheetDataGrid.no-result" />
+              </>
+            ),
+          },
+        ],
+      },
+      {
+        id: '3',
+        cells: [
+          { content: 'Cardiac Index (L/min/m2)' },
+          {
+            content: (
+              <>
+                <span aria-hidden>Terra.flowsheetDataGrid.no-result-display</span>
+                <VisuallyHiddenText text="Terra.flowsheetDataGrid.no-result" />
+              </>
+            ),
+          },
+          { content: '2.28' },
+        ],
+      },
+      {
+        id: '4',
+        cells: [
+          { content: '' },
+          {
+            content: (
+              <>
+                <span aria-hidden>Terra.flowsheetDataGrid.no-result-display</span>
+                <VisuallyHiddenText text="Terra.flowsheetDataGrid.no-result" />
+              </>
+            ),
+          },
+          {
+            content: (
+              <>
+                <span aria-hidden>Terra.flowsheetDataGrid.no-result-display</span>
+                <VisuallyHiddenText text="Terra.flowsheetDataGrid.no-result" />
+              </>
+            ),
+          },
+        ],
+      },
+    ];
+
+    const wrapper = shallowWithIntl(
+      <FlowsheetDataGrid
+        id="test-terra-flowsheet-data-grid"
+        columns={updatedDataFile.cols}
+        rows={updatedDataFile.rows}
+        ariaLabel="Test Flowsheet Data Grid"
+      />,
+    ).shallow();
+
+    const dataGrid = wrapper.find('InjectIntl(DataGrid)');
+    expect(dataGrid.prop('rows')).toEqual(expectedRows);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });