[terra-data-grid] Add section support to Flowsheet (#1896)

packages/terra-data-grid/CHANGELOG.md

@@ -7,6 +7,7 @@
 
 * Added
   * Added `hasVisibleColumnHeaders` prop for FlowsheetDataGrid to toggle visibility of column headers.
+  * Added section support to FlowsheetDataGrid.
 
 Changed
   * Updated all columns and cells to be selectable in FlowsheetDataGrid, as `isSelectable` prop is not supported for columns or cells.

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

@@ -5,12 +5,11 @@ import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import classNames from 'classnames/bind';
 import * as KeyCode from 'keycode-js';
-import Table, { GridConstants, GridContext } from 'terra-table';
+import Table, {
+  GridConstants, GridContext, sectionShape, rowShape, columnShape, validateRowHeaderIndex,
+} from 'terra-table';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
-import rowShape from './proptypes/rowShape';
-import { columnShape } from './proptypes/columnShape';
 import WorklistDataGridUtils from './utils/WorklistDataGridUtils';
-import validateRowHeaderIndex from './proptypes/validators';
 import styles from './DataGrid.module.scss';
 import './_elementPolyfill';
 
@@ -38,6 +37,11 @@ const propTypes = {
    */
   rows: PropTypes.arrayOf(rowShape),
 
+  /**
+  * Data for content in the body of the table. Sections will be rendered in the order given.
+  */
+  sections: PropTypes.arrayOf(sectionShape),
+
   /**
    * Data for pinned columns. Pinned columns are the stickied leftmost columns of the grid.
    * Columns will be presented in the order given.
@@ -89,6 +93,11 @@ const propTypes = {
    */
   onCellSelect: PropTypes.func,
 
+  /**
+   * Function that is called when a collapsible section is selected. Parameters: `onSectionSelect(sectionId)`
+   */
+  onSectionSelect: PropTypes.func,
+
   /**
    * Callback function that is called when a selectable column is selected. Parameters:
    *  @param {string} columnId columnId
@@ -161,11 +170,13 @@ const DataGrid = injectIntl((props) => {
     onColumnSelect,
     onRangeSelection,
     onRowSelectionHeaderSelect,
+    onSectionSelect,
     overflowColumns,
     pinnedColumns,
     rowHeaderIndex,
     rowHeight,
     rows,
+    sections,
   } = props;
 
   const displayedColumns = (hasSelectableRows ? [WorklistDataGridUtils.ROW_SELECTION_COLUMN] : []).concat(pinnedColumns).concat(overflowColumns);
@@ -518,6 +529,7 @@ const DataGrid = injectIntl((props) => {
         <Table
           id={`${id}-table`}
           rows={dataGridRows}
+          sections={sections}
           ariaLabelledBy={ariaLabelledBy}
           ariaLabel={ariaLabel}
           activeColumnIndex={(gridHasFocus && focusedRow === 0) ? focusedCol : undefined}
@@ -531,6 +543,7 @@ const DataGrid = injectIntl((props) => {
           rowHeaderIndex={rowHeaderIndex}
           onColumnResize={onColumnResize}
           onColumnSelect={handleColumnSelect}
+          onSectionSelect={onSectionSelect}
           onCellSelect={handleCellSelection}
           onRowSelectionHeaderSelect={handleRowSelectionHeaderSelect}
           hasSelectableRows={hasSelectableRows}

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

@@ -7,10 +7,8 @@ import classNames from 'classnames/bind';
 import * as KeyCode from 'keycode-js';
 
 import VisuallyHiddenText from 'terra-visually-hidden-text';
-
+import { sectionShape, rowShape, columnShape } from 'terra-table';
 import DataGrid from './DataGrid';
-import rowShape from './proptypes/rowShape';
-import { columnShape } from './proptypes/columnShape';
 import styles from './FlowsheetDataGrid.module.scss';
 
 const cx = classNames.bind(styles);
@@ -37,6 +35,11 @@ const propTypes = {
    */
   rows: PropTypes.arrayOf(rowShape),
 
+  /**
+  * Data for content in the body of the table. Sections will be rendered in the order given.
+  */
+  sections: PropTypes.arrayOf(sectionShape),
+
   /**
    * Data for columns. Columns will be presented in the order given.
    * The first column, pinned to the leftmost side of the grid, will contain row headers.
@@ -66,6 +69,11 @@ const propTypes = {
    */
   onCellSelect: PropTypes.func,
 
+  /**
+   * Function that is called when a collapsible section is selected. Parameters: `onSectionSelect(sectionId)`
+   */
+  onSectionSelect: PropTypes.func,
+
   /**
    * Callback function that is called when all selected cells need to be unselected. Parameters: none.
    */
@@ -104,11 +112,13 @@ function FlowsheetDataGrid(props) {
     ariaLabelledBy,
     ariaLabel,
     rows,
+    sections,
     columns,
     defaultColumnWidth,
     columnHeaderHeight,
     rowHeight,
     onCellSelect,
+    onSectionSelect,
     onClearSelectedCells,
     onCellRangeSelect,
     intl,
@@ -156,6 +166,39 @@ function FlowsheetDataGrid(props) {
     return newRows;
   }, [intl, rows]);
 
+  const flowsheetSections = useMemo(() => {
+    if (!sections) {
+      return null;
+    }
+
+    const noResultCellContent = (
+      <>
+        <span aria-hidden>{intl.formatMessage({ id: 'Terra.flowsheetDataGrid.no-result-display' })}</span>
+        <VisuallyHiddenText text={intl.formatMessage({ id: 'Terra.flowsheetDataGrid.no-result' })} />
+      </>
+    );
+
+    const newSections = [...sections];
+    newSections.forEach((section, sectionIndex) => {
+      const newRows = [...section.rows];
+      newRows.forEach((row, rowIndex) => {
+        const newCells = [...row.cells];
+        newCells.forEach((cell, cellIndex) => {
+          newCells[cellIndex].isSelectable = cell.isSelectable !== false;
+          // 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;
+      });
+      newSections[sectionIndex].rows = newRows;
+    });
+
+    return newSections;
+  }, [intl, sections]);
+
   useEffect(() => {
     const previousSelectedCells = [...selectedCells.current];
     const newSelectedCells = [];
@@ -179,12 +222,6 @@ function FlowsheetDataGrid(props) {
     }
   }, [intl, rows, columns, setCellSelectionAriaLiveMessage]);
 
-  const handleClearSelectedCells = useCallback(() => {
-    if (onClearSelectedCells) {
-      onClearSelectedCells();
-    }
-  }, [onClearSelectedCells]);
-
   const selectCellRange = useCallback((rowIndex, columnIndex) => {
     const anchorRowIndex = rows.findIndex(row => row.id === anchorCell.current.rowId);
     const anchorColumnIndex = columns.findIndex(col => col.id === anchorCell.current.columnId);
@@ -294,14 +331,16 @@ function FlowsheetDataGrid(props) {
         ariaLabel={ariaLabel}
         ariaLabelledBy={ariaLabelledBy}
         rows={flowsheetRows}
+        sections={flowsheetSections}
         rowHeight={rowHeight}
         rowHeaderIndex={0}
         pinnedColumns={pinnedColumns}
         overflowColumns={overflowColumns}
         defaultColumnWidth={defaultColumnWidth}
         columnHeaderHeight={columnHeaderHeight}
         onCellSelect={handleCellSelection}
-        onClearSelection={handleClearSelectedCells}
+        onSectionSelect={onSectionSelect}
+        onClearSelection={onClearSelectedCells}
         onCellRangeSelect={handleCellRangeSelection}
         hasVisibleColumnHeaders={hasVisibleColumnHeaders}
       />

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

@@ -8,9 +8,7 @@ import { injectIntl } from 'react-intl';
 import classNames from 'classnames/bind';
 import * as KeyCode from 'keycode-js';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
-import rowShape from './proptypes/rowShape';
-import { columnShape } from './proptypes/columnShape';
-import validateRowHeaderIndex from './proptypes/validators';
+import { rowShape, columnShape, validateRowHeaderIndex } from 'terra-table';
 import styles from './WorklistDataGrid.module.scss';
 import DataGrid from './DataGrid';
 import WorklistDataGridUtils from './utils/WorklistDataGridUtils';

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

@@ -13,7 +13,6 @@ exports[`FlowsheetDataGrid renders the row header column as pinned and remaining
     id="test-terra-flowsheet-data-grid"
     onCellRangeSelect={[Function]}
     onCellSelect={[Function]}
-    onClearSelection={[Function]}
     overflowColumns={
       Array [
         Object {
@@ -114,6 +113,7 @@ exports[`FlowsheetDataGrid renders the row header column as pinned and remaining
         },
       ]
     }
+    sections={null}
   />
   <VisuallyHiddenText
     aria-live="polite"
@@ -135,7 +135,6 @@ exports[`FlowsheetDataGrid replaces non-header empty, null, or "--" cell content
     id="test-terra-flowsheet-data-grid"
     onCellRangeSelect={[Function]}
     onCellSelect={[Function]}
-    onClearSelection={[Function]}
     overflowColumns={
       Array [
         Object {
@@ -281,6 +280,7 @@ exports[`FlowsheetDataGrid replaces non-header empty, null, or "--" cell content
         },
       ]
     }
+    sections={null}
   />
   <VisuallyHiddenText
     aria-live="polite"

packages/terra-data-grid/tests/wdio/flowsheet-data-grid-spec.js

@@ -185,4 +185,15 @@ Terra.describeViewports('FlowsheetDataGrid', ['medium', 'large'], () => {
       Terra.validates.element('cell-3-1-focused', { selector: defaultSelector });
     });
   });
+
+  describe('Sections', () => {
+    const sectionSelector = '#flowsheet-with-sections';
+    beforeEach(() => {
+      browser.url('raw/tests/cerner-terra-framework-docs/data-grid/flowsheet-data-grid/flowsheet-with-sections');
+    });
+
+    it('validate Flowsheet section UI', () => {
+      Terra.validates.element('flowsheet-with-sections', { selector: sectionSelector });
+    });
+  });
 });

packages/terra-framework-docs/CHANGELOG.md

@@ -5,6 +5,7 @@
 * Added
   * Added new test for Terra Slider component for long field labels.
   * Added `hasVisibleColumnHeaders` example for FlowsheetDataGrid.
+  * Added examples and tests to `terra-data-grid` for sections in FlowsheetDataGrid.
 
 * Updated
   * Updated About page of `terra-table` to provide accessibility documentation for Home and End keys.

packages/terra-framework-docs/src/terra-dev-site/doc/data-grid/FlowsheetDataGrid.4/Examples.6/FlowsheetWithSections.doc.mdx

@@ -0,0 +1,3 @@
+import FlowsheetWithSections from "./FlowsheetWithSections?dev-site-example";
+
+<FlowsheetWithSections />