Remove ActionListManager & add support for state to DataTable (#1633)

* ActionListManager removed, DataTable supports loading/noResults
* Fixed some grammar issues in docs with a/an
* Fix states example in datatable docs

Co-authored-by: Elliot Park <[email protected]>

Author: Luke Bowerman

packages/components/CHANGELOG.md

@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
     - `firstColumnStuck` developer can specify if the first column should "stick" to the viewport edge when scrolling
     - NOTE: Column for checkbox selection and actions column are always stuck to their respective edges
   - Column selection - the user can select which columns are displayed (if any columns have `hide` specified in their configuration)
+  - Supports `state="loading|noResults"` and `noResultsDisplay`
 - The `autoFocus` prop will now work for inputs in `Popover` and `Dialog`
 - `Select`, `SelectMulti`, `InputTimeSelect`, and `InputSearch` now support `autoFocus`
 - `Dialog` & `Drawer` now support semantic sizes (`xxsmall - xlarge`)
@@ -47,6 +48,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Removed
 
+- `ActionListManager` was removed (`DataTable` now supports `state=loading|noResults`)
 - `ActionList` (now known as `DataTable`) no longer supports `header` prop (header is always generated by component now)
   - `column` no longer supports `width` (see new `size` behavior)
 - `groupedPopoversRef` and `groupedMenusRef` (`Popover` and `Menu` no longer cancel the first click outside)

packages/components/snapshots/DataTable/Manager No Results-snap.png

@@ -67,6 +67,8 @@ const data = [
   },
 ]
 
+const bestCheeseDiv = <div>Pepper Jack</div>
+
 const items = data.map(({ id, name, type }) => {
   const availableActions = (
     <>
@@ -463,4 +465,31 @@ describe('DataTable', () => {
       expect(onTotalClearAll).toHaveBeenCalledTimes(1)
     })
   })
+
+  test('Does not render children if state="loading"', () => {
+    const { queryByText } = renderWithTheme(
+      <DataTable columns={[]} state="loading">
+        {bestCheeseDiv}
+      </DataTable>
+    )
+    expect(queryByText('Pepper Jack')).not.toBeInTheDocument()
+  })
+
+  test('Does not render children if state="noResults"', () => {
+    const { queryByText } = renderWithTheme(
+      <DataTable columns={[]} state="noResults">
+        {bestCheeseDiv}
+      </DataTable>
+    )
+    expect(queryByText('Pepper Jack')).not.toBeInTheDocument()
+  })
+
+  test('Renders custom no results message when noResultsDisplay prop has a value', () => {
+    const { getByText } = renderWithTheme(
+      <DataTable columns={[]} state="noResults" noResultsDisplay={'Cheddar'}>
+        {bestCheeseDiv}
+      </DataTable>
+    )
+    expect(getByText('Cheddar')).toBeInTheDocument()
+  })
 })

packages/components/snapshots/DataTable/No Results-snap.png

@@ -72,6 +72,18 @@ export interface DataTableProps {
    *   Explicit specification of `firstColumnStuck` will always determine outcome
    */
   firstColumnStuck?: boolean
+
+  /**
+   * Specify "state" of DataTable to control display of data within the table
+   *  - `loading` will replace content with loading behavior (currently `Spinner`)
+   *  - 'noResults` will display "No Results" rather than DataTable content (customize via `noResultsDisplay`)
+   * Display loading behavior rather than DataTable content
+   */
+  state?: 'loading' | 'noResults'
+  /**
+   * Text to be displayed when no results state displayed
+   */
+  noResultsDisplay?: ReactNode
 }
 
 export interface SelectConfig {
@@ -201,6 +213,7 @@ export const DataTableLayout: FC<DataTableProps> = (props) => {
       {...filterConfig}
     />
   )
+
   return (
     <DataTableContext.Provider value={context}>
       <div className={className}>

packages/components/src/DataTable/DataTable.test.tsx

@@ -26,6 +26,8 @@
 
 import React, { FC } from 'react'
 import styled, { css } from 'styled-components'
+import { Spinner } from '../Spinner'
+import { Heading } from '../Text'
 import { useCallbackRef, useIsTruncated } from '../utils'
 import {
   getNumericColumnIndices,
@@ -44,19 +46,37 @@ export const TableLayout: FC<TableProps> = ({
   className,
   columnsVisible,
   headerRowId,
+  noResultsDisplay = 'No Results',
+  state,
 }) => {
   const [element, ref] = useCallbackRef()
   const overflow = useIsTruncated(element, columnsVisible.length)
 
+  const noResultsContent =
+    typeof noResultsDisplay === 'string' ? (
+      <Heading variant="subdued">{noResultsDisplay}</Heading>
+    ) : (
+      noResultsDisplay
+    )
+
+  const interimState = state && (
+    <InterimState>
+      {state === 'loading' ? <Spinner /> : noResultsContent}
+    </InterimState>
+  )
+
   return (
-    <TableScroll ref={ref}>
-      <table className={overflow ? `${className} overflow` : className}>
-        <thead>
-          <DataTableHeader id={headerRowId} />
-        </thead>
-        <tbody>{children}</tbody>
-      </table>
-    </TableScroll>
+    <>
+      <TableScroll ref={ref}>
+        <table className={overflow ? `${className} overflow` : className}>
+          <thead>
+            <DataTableHeader id={headerRowId} />
+          </thead>
+          {!interimState && <tbody>{children}</tbody>}
+        </table>
+      </TableScroll>
+      {interimState}
+    </>
   )
 }
 
@@ -180,6 +200,13 @@ export const Table = styled(TableLayout)`
     )}
 `
 
+const InterimState = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: ${({ theme }) => theme.space.xlarge};
+`
+
 export const TableScroll = styled.div`
   overflow-x: auto;
   scrollbar-width: none; /* Firefox */