feat(plugins/plugin-client-common): empty tables use PatternFly's "empty state" UI

Fixes #6867

Author: myan9

packages/test/src/api/selectors.ts

@@ -223,6 +223,7 @@ export const TABLE_AS_SEQUENCE = (N: number) => `${OUTPUT_N(N)} .kui--data-table
 export const TABLE_AS_SEQUENCE_BAR = (N: number) => `${TABLE_AS_SEQUENCE(N)} .kui--bar`
 export const TABLE_AS_SEQUENCE_BAR_WIDTH = (N: number, width: string) =>
   `${TABLE_AS_SEQUENCE(N)} .kui--bar[data-width="${width}]`
+export const _TABLE_EMPTY = `.kui--table-like-wrapper tbody td[data-is-empty="true"]`
 
 const _TABLE_TITLE = `.kui--data-table-title`
 export const TABLE_TITLE = (N: number) => `${OUTPUT_N(N)} ${_TABLE_TITLE}`

plugins/plugin-client-common/i18n/resources_en_US.json

@@ -58,6 +58,7 @@
   "Try getting started": "Try getting started",
   "Settings": "Settings",
   "Switch theme": "Switch theme",
+  "No results found": "No results found",
   "Show as table in terminal": "Show as table in terminal",
   "Pause watcher": "Pause this watcher",
   "Resume watcher": "Resume this watcher",

plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx

@@ -14,13 +14,17 @@
  * limitations under the License.
  */
 
-import { Table, Tab, REPL } from '@kui-shell/core'
+import { i18n, Table, Tab, REPL } from '@kui-shell/core'
 
 import React from 'react'
-import { Tbody, Tr } from '@patternfly/react-table'
+import { Tbody, Tr, Td } from '@patternfly/react-table'
+import { EmptyState, EmptyStateVariant, Bullseye, Title, EmptyStateIcon } from '@patternfly/react-core'
+import { SearchIcon } from '@patternfly/react-icons'
 
 import renderCell from './TableCell'
 
+const strings = i18n('plugin-client-common')
+
 /**
  * Render the TableBody part
  *
@@ -34,24 +38,42 @@ export default function renderBody(
   repl: REPL,
   offset: number
 ) {
+  const emptyState = () => {
+    return (
+      <Tr>
+        <Td data-is-empty={true} colSpan={kuiTable.header ? kuiTable.header.attributes.length + 1 : 0}>
+          <Bullseye>
+            <EmptyState variant={EmptyStateVariant.small}>
+              <EmptyStateIcon icon={SearchIcon} />
+              <Title headingLevel="h2" size="lg">
+                {strings('No results found')}
+              </Title>
+            </EmptyState>
+          </Bullseye>
+        </Td>
+      </Tr>
+    )
+  }
   return (
     <Tbody>
-      {kuiTable.body.map((kuiRow, ridx) => {
-        const updated = justUpdated[kuiRow.rowKey || kuiRow.name]
-        const cell = renderCell(kuiTable, kuiRow, updated, tab, repl)
+      {kuiTable.body.length === 0
+        ? emptyState()
+        : kuiTable.body.map((kuiRow, ridx) => {
+            const updated = justUpdated[kuiRow.rowKey || kuiRow.name]
+            const cell = renderCell(kuiTable, kuiRow, updated, tab, repl)
 
-        const key = kuiRow.key || (kuiTable.header ? kuiTable.header.key || kuiTable.header.name : undefined)
+            const key = kuiRow.key || (kuiTable.header ? kuiTable.header.key || kuiTable.header.name : undefined)
 
-        return (
-          <Tr key={ridx} data-row-key={kuiRow.rowKey} data-name={kuiTable.body[offset + ridx].name}>
-            {cell(key, kuiRow.name, undefined, kuiRow.outerCSS, kuiRow.css, kuiRow.onclick, 0)}
-            {kuiRow.attributes &&
-              kuiRow.attributes.map((attr, idx) =>
-                cell(attr.key, attr.value, attr.tag, attr.outerCSS, attr.css, attr.onclick, idx + 1)
-              )}
-          </Tr>
-        )
-      })}
+            return (
+              <Tr key={ridx} data-row-key={kuiRow.rowKey} data-name={kuiTable.body[offset + ridx].name}>
+                {cell(key, kuiRow.name, undefined, kuiRow.outerCSS, kuiRow.css, kuiRow.onclick, 0)}
+                {kuiRow.attributes &&
+                  kuiRow.attributes.map((attr, idx) =>
+                    cell(attr.key, attr.value, attr.tag, attr.outerCSS, attr.css, attr.onclick, idx + 1)
+                  )}
+              </Tr>
+            )
+          })}
     </Tbody>
   )
 }

plugins/plugin-client-common/web/scss/components/Table/tables.scss

@@ -232,6 +232,12 @@ body[kui-theme-style] .kui--data-table-wrapper {
       th {
         padding-left: var(--pf-c-card--child--PaddingLeft);
       }
+
+      td {
+        h2 {
+          margin: 0;
+        }
+      }
     }
 
     .pf-m-wrap {

plugins/plugin-core-support/src/test/core-support2/history.ts

@@ -106,7 +106,7 @@ describe('command history plain', function(this: Common.ISuite) {
 
   it(`should list history with filter, expect nothing`, () =>
     CLI.command(`history gumbogumbo`, this.app)
-      .then(ReplExpect.justOK) // some random string that won't be in the command history
+      .then(ReplExpect.okWithCustom({ selector: Selectors._TABLE_EMPTY }))
       .catch(Common.oops(this, true)))
 
   it(`should delete command history`, () =>
@@ -116,7 +116,7 @@ describe('command history plain', function(this: Common.ISuite) {
 
   it(`should list history with no args after delete and expect nothing`, () =>
     CLI.command(`history`, this.app)
-      .then(ReplExpect.justOK)
+      .then(ReplExpect.okWithCustom({ selector: Selectors._TABLE_EMPTY }))
       .catch(Common.oops(this, true)))
 
   it(`should list history with idx arg after delete and expect only the previous`, () =>
@@ -131,6 +131,6 @@ describe('command history plain', function(this: Common.ISuite) {
 
   it(`should list history with idx and filter args after delete and expect nothing`, () =>
     CLI.command(`history 10 lls`, this.app)
-      .then(ReplExpect.justOK) // some random string that won't be in the command history
+      .then(ReplExpect.okWithCustom({ selector: Selectors._TABLE_EMPTY }))
       .catch(Common.oops(this, true)))
 })