diff --git a/packages/test/src/api/selectors.ts b/packages/test/src/api/selectors.ts index d675382ad0a..15dcff4c491 100644 --- a/packages/test/src/api/selectors.ts +++ b/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}` diff --git a/plugins/plugin-client-common/i18n/resources_en_US.json b/plugins/plugin-client-common/i18n/resources_en_US.json index a25a356670b..8e14b39b697 100644 --- a/plugins/plugin-client-common/i18n/resources_en_US.json +++ b/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", diff --git a/plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx b/plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx index 239bb9e5dfd..4355364257d 100644 --- a/plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx +++ b/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 ( + + + + + + + {strings('No results found')} + + + + + + ) + } return ( - {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 ( - - {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) - )} - - ) - })} + return ( + + {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) + )} + + ) + })} ) } diff --git a/plugins/plugin-client-common/web/scss/components/Table/tables.scss b/plugins/plugin-client-common/web/scss/components/Table/tables.scss index 03fd88de1de..1c4132dbf2c 100644 --- a/plugins/plugin-client-common/web/scss/components/Table/tables.scss +++ b/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 { diff --git a/plugins/plugin-core-support/src/test/core-support2/history.ts b/plugins/plugin-core-support/src/test/core-support2/history.ts index bb02df8272a..12623485207 100644 --- a/plugins/plugin-core-support/src/test/core-support2/history.ts +++ b/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))) })