Merge pull request #388 from puppetlabs/DATA-GRID-COMPLIY-CHANGES

(MAINT) Data-grid onRowClick handler

Author: Lukeaber

packages/data-grid/src/__test__/Table.test.jsx

@@ -272,12 +272,14 @@ describe('Custom classes', () => {
 
 describe('Selection Props', () => {
   const rowCheckMockfunc = jest.fn();
+  const rowClickMockfunc = jest.fn();
   const wrapper9 = mount(
     <Table
       columns={columns}
       data={data}
       selectable
       onRowChecked={rowCheckMockfunc}
+      onRowClick={rowClickMockfunc}
     />,
   );
 
@@ -332,4 +334,18 @@ describe('Selection Props', () => {
         .prop('checked'),
     ).toEqual(true);
   });
+
+  test('When row is clicked fire onRowClick', () => {
+    wrapper9
+      .find('.dg-table-row')
+      .first()
+      .simulate('click');
+
+    expect(rowClickMockfunc).toHaveBeenCalledWith(undefined, 0, {
+      affectedDevices: 20,
+      detections: 634,
+      eventType: 'Virus/Malware',
+      id: 0,
+    });
+  });
 });

packages/data-grid/src/__test__/__snapshots__/Table.test.jsx.snap

@@ -84,6 +84,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
   loadingMessage="Loading"
   onHeaderChecked={[Function]}
   onRowChecked={[Function]}
+  onRowClick={[Function]}
   onSort={[Function]}
   rowClassName={[Function]}
   selectable={false}
@@ -210,6 +211,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="0"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -237,6 +239,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="1"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -264,6 +267,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="2"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -291,6 +295,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="3"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -318,6 +323,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="4"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -345,6 +351,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="5"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -372,6 +379,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
         <tr
           className="dg-table-row"
           key="6"
+          onClick={[Function]}
         >
           <td
             className="rc-table-cell testColumnClassName"
@@ -441,6 +449,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 2`] = `
   loadingMessage="Loading"
   onHeaderChecked={[Function]}
   onRowChecked={[Function]}
+  onRowClick={[Function]}
   onSort={[Function]}
   rowClassName={[Function]}
   selectable={false}

packages/data-grid/src/table/Table.jsx

@@ -48,6 +48,8 @@ const propTypes = {
   rowKey: oneOfType([func, string]),
   /** Optional function which can be used to render styling on specific rows */
   rowClassName: oneOfType([func, string]),
+  /** Optional function which can be used to execute a function on row click, will return rowKey, rowIndex, rowData */
+  onRowClick: func,
   /** Render table in fixed-layout mode */
   fixed: bool,
   /** Optional additional table className */
@@ -102,6 +104,7 @@ const defaultProps = {
   selectable: false,
   onRowChecked: () => {},
   onHeaderChecked: () => {},
+  onRowClick: () => {},
   headerCheckState: false,
   headerIndeterminateState: true,
 };
@@ -156,6 +159,7 @@ class Table extends Component {
       onRowChecked,
       onSort,
       headerIndeterminateState,
+      onRowClick,
       ...rest
     } = this.props;
 
@@ -223,6 +227,7 @@ class Table extends Component {
                     },
                   )}
                   key={this.uniqueIDCheck(rowKey, rowData, rowIndex)}
+                  onClick={() => onRowClick(rowKey, rowIndex, rowData)}
                 >
                   {selectable ? (
                     <td