[BasicTable] - allow noItemMessage to be node (#516)

* Table - allow noItemMessage to be node * change log * just use node propType * add example of passing node for message
elastic · Mar 15, 2018 · 574ebe8 · 574ebe8
1 parent 74cd1cd
commit 574ebe8
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 - `EuiInMemoryTable` pass items to BasicTable when message is provided ([#517](https://github.com/elastic/eui/pull/517)).
 - `EuiSearchBox` now passes unused props through to `EuiFieldSearch` ([#514](https://github.com/elastic/eui/pull/514))
+- Change `EuiBasicTable` `noItemsMessage` and `EuiInMemoryTable` `messgae` propType to node
+instead of just string ([#516](https://github.com/elastic/eui/pull/516))
 
 # [`0.0.27`](https://github.com/elastic/eui/tree/v0.0.27)
 

diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection.js b/src-docs/src/views/tables/in_memory/in_memory_selection.js
@@ -48,7 +48,17 @@ export class Table extends Component {
     this.state = {
       loading: false,
       users: [],
-      message: 'No users, click "Load Users" to load some',
+      message: (
+        <div>
+          <span>Looks like you don't have any users. Let's create some!</span>
+          <EuiButton
+            key="loadUsers"
+            onClick={this.loadUsers.bind(this)}
+          >
+            Load Users
+          </EuiButton>
+        </div>
+      ),
       selection: []
     };
   }

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -23,9 +23,46 @@ exports[`EuiBasicTable basic - empty - custom message 1`] = `
           colSpan={1}
           textOnly={true}
         >
-          <div>
-            where my items at?
-          </div>
+          where my items at?
+        </EuiTableRowCell>
+      </EuiTableRow>
+    </EuiTableBody>
+  </EuiTable>
+</div>
+`;
+
+exports[`EuiBasicTable basic - empty - custom message as node 1`] = `
+<div
+  className="euiBasicTable testClass1 testClass2"
+>
+  <EuiTable>
+    <EuiTableHeader>
+      <EuiTableHeaderCell
+        align="left"
+        isSortAscending={false}
+        isSorted={false}
+        key="_data_h_name_0"
+        scope="col"
+      >
+        Name
+      </EuiTableHeaderCell>
+    </EuiTableHeader>
+    <EuiTableBody>
+      <EuiTableRow>
+        <EuiTableRowCell
+          align="center"
+          colSpan={1}
+          textOnly={true}
+        >
+          <p>
+            no items, click 
+            <a
+              href={true}
+            >
+              here
+            </a>
+             to make some
+          </p>
         </EuiTableRowCell>
       </EuiTableRow>
     </EuiTableBody>
@@ -56,9 +93,7 @@ exports[`EuiBasicTable basic - empty 1`] = `
           colSpan={1}
           textOnly={true}
         >
-          <div>
-            No items found
-          </div>
+          No items found
         </EuiTableRowCell>
       </EuiTableRow>
     </EuiTableBody>

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -133,7 +133,7 @@ const BasicTablePropTypes = {
   onChange: PropTypes.func,
   error: PropTypes.string,
   loading: PropTypes.bool,
-  noItemsMessage: PropTypes.string,
+  noItemsMessage: PropTypes.node,
   className: PropTypes.string
 };
 
@@ -420,12 +420,13 @@ export class EuiBasicTable extends Component {
   }
 
   renderEmptyBody() {
-    const colSpan = this.props.columns.length + (this.props.selection ? 1 : 0);
+    const { columns, selection, noItemsMessage } = this.props;
+    const colSpan = columns.length + (selection ? 1 : 0);
     return (
       <EuiTableBody>
         <EuiTableRow>
           <EuiTableRowCell align="center" colSpan={colSpan}>
-            <div>{ this.props.noItemsMessage }</div>
+            {noItemsMessage}
           </EuiTableRowCell>
         </EuiTableRow>
       </EuiTableBody>

diff --git a/src/components/basic_table/basic_table.test.js b/src/components/basic_table/basic_table.test.js
@@ -47,6 +47,27 @@ describe('EuiBasicTable', () => {
     expect(component).toMatchSnapshot();
   });
 
+  test('basic - empty - custom message as node', () => {
+
+    const props = {
+      ...requiredProps,
+      items: [],
+      columns: [
+        {
+          field: 'name',
+          name: 'Name',
+          description: 'description'
+        }
+      ],
+      noItemsMessage: (<p>no items, click <a href>here</a> to make some</p>)
+    };
+    const component = shallow(
+      <EuiBasicTable {...props} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
   test('basic - with items', () => {
 
     const props = {

diff --git a/src/components/basic_table/in_memory_table.js b/src/components/basic_table/in_memory_table.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   EuiBasicTable,
   ColumnType,
-  SelectionType
+  SelectionType,
 } from './basic_table';
 import {
   defaults as paginationBarDefaults
@@ -22,7 +22,7 @@ const InMemoryTablePropTypes = {
   columns: PropTypes.arrayOf(ColumnType).isRequired,
   items: PropTypes.array,
   loading: PropTypes.bool,
-  message: PropTypes.string,
+  message: PropTypes.node,
   error: PropTypes.string,
   search: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     defaultQuery: QueryType,