[terra-data-grid] Flowsheet Data Grid - No Result Cell (#1830)

packages/terra-data-grid/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added "No Result" cells to FlowsheetDataGrid.
+
 ## 0.8.1 - (October 17, 2023)
 
 * Fixed

packages/terra-data-grid/README.md

@@ -10,13 +10,12 @@
 
 ---
 
-The terra-data-grid package contains the following components:
-
-**Worklist Data Grid** is a container that enables users to navigate the grid information using directional navigation keys.
+The terra-data-grid package contains the **Worklist Data Grid** and **Flowsheet Data Grid** components that allow users to navigate grid information using directional navigation keys.
 
 - [Getting Started](#getting-started)
 - Documentation
   - [Worklist Data Grid](https://engineering.cerner.com/terra-framework/components/cerner-terra-framework-docs/data-grid/worklist-data-grid/about)
+  - [Flowsheet Data Grid](https://engineering.cerner.com/terra-framework/components/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/about)
 - [LICENSE](#license)
 
 ## Getting Started

packages/terra-data-grid/package.json

@@ -2,7 +2,7 @@
   "name": "terra-data-grid",
   "main": "lib/index.js",
   "version": "0.8.1",
-  "description": "Package containing Terra WorklistDataGrid: A container that enables users to navigate the grid information using directional navigation keys.",
+  "description": "Package containing data grid container components that enable users to navigate the grid information using directional navigation keys.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cerner/terra-framework.git",

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

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useMemo } 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,50 @@ function FlowsheetDataGrid(props) {
     rowHeight,
     onCellSelect,
     onClearSelectedCells,
+    intl,
   } = props;
 
+  const flowsheetColumns = useMemo(() => columns.map(column => ({ ...column, isResizable: false })), [columns]);
+  const pinnedColumns = flowsheetColumns.length ? [flowsheetColumns[0]] : [];
+  const overflowColumns = flowsheetColumns.length > 1 ? flowsheetColumns.slice(1) : [];
+
+  const contentHasNoResult = (content) => (content === null || content === '' || content === '--');
+
+  const flowsheetRows = useMemo(() => {
+    const noResultCellContent = (
+      <>
+        <span aria-hidden>{intl.formatMessage({ id: 'Terra.flowsheetDataGrid.no-result-display' })}</span>
+        <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.flowsheetDataGrid.no-result' })} />
+      </>
+    );
+
+    const newRows = [...rows];
+    newRows.forEach((row, rowIndex) => {
+      const newCells = [...row.cells];
+      newCells.forEach((cell, cellIndex) => {
+        // Cell content has no result and is not a row header (first column), set content to "No result".
+        if (contentHasNoResult(cell.content) && cellIndex !== 0) {
+          newCells[cellIndex].content = noResultCellContent;
+        }
+      });
+
+      newRows[rowIndex].cells = newCells;
+    });
+
+    return newRows;
+  }, [intl, rows]);
+
   return (
     <div className={cx('flowsheet-data-grid-container')}>
       <DataGrid
         id={id}
         ariaLabel={ariaLabel}
         ariaLabelledBy={ariaLabelledBy}
-        rows={rows}
+        rows={flowsheetRows}
         rowHeight={rowHeight}
         rowHeaderIndex={0}
-        pinnedColumns={columns.length ? [{ ...columns[0], isResizable: false }] : []}
-        overflowColumns={columns.length > 1 ? columns.slice(1).map(column => ({ ...column, isResizable: false })) : []}
+        pinnedColumns={pinnedColumns}
+        overflowColumns={overflowColumns}
         defaultColumnWidth={defaultColumnWidth}
         columnHeaderHeight={columnHeaderHeight}
         onCellSelect={onCellSelect}
@@ -111,4 +151,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('ForwardRef');
-    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('#test-terra-flowsheet-data-grid');
     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 empty, null, or "--" 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: '' },
+            { content: '2.28' },
+          ],
+        },
+        {
+          id: '4',
+          cells: [
+            { content: '' },
+            { content: null },
+            { content: '--' },
+          ],
+        },
+      ],
+    };
+
+    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('#test-terra-flowsheet-data-grid');
+    expect(dataGrid.prop('rows')).toEqual(expectedRows);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });