fix(plugins/plugin-client-common): improve display of empty watch tables

Fixes #5176

Author: starpit

packages/test/src/api/selectors.ts

@@ -134,7 +134,8 @@ export const TABLE_AS_LIST = (N: number) => `${OUTPUT_N(N)} .bx--data-table:not(
 const _TABLE_TITLE = `.kui--data-table-title`
 export const TABLE_TITLE = (N: number) => `${OUTPUT_N(N)} ${_TABLE_TITLE}`
 
-export const TABLE_TITLE_SECONDARY = (N: number) => `${OUTPUT_N(N)} .kui--secondary-breadcrumb`
+export const TABLE_TITLE_SECONDARY = (N: number) => `${OUTPUT_N(N)} .kui--secondary-breadcrumb:first-child`
+export const TABLE_TITLE_NROWS = (N: number) => `${OUTPUT_N(N)} .kui--nrows-breadcrumb`
 export const BY_NAME = (name: string) => `tbody [data-name="${name}"]`
 export const LIST_RESULT_FIRST = 'tbody tr:first-child .clickable'
 export const LIST_RESULT_BY_N_AND_NAME = (N: number, name: string) =>

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

@@ -4,6 +4,7 @@
   "Status Grid": "Status Grid",
   "No resources": "No resources",
   "nRows": "{0} rows",
+  "nRows1": "1 row",
   "New Tab": "Open a new tab",
   "Close this tab": "Close this tab",
   "Split the Terminal": "Split the Terminal",

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

@@ -48,7 +48,7 @@ export default class LivePaginatedTable extends PaginatedTable<LiveProps, LiveSt
   /** Render the component */
   public render() {
     if (this.props.onRender) {
-      setTimeout(() => this.props.onRender(this.state.rows.length > 0))
+      setTimeout(() => this.props.onRender(true))
     }
     return (
       <div data-table-watching={this.state.isWatching} data-table-as-grid={this.state.asGrid}>

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Tab, REPL, Table as KuiTable, TableStyle, i18n } from '@kui-shell/core'
+import { Tab, REPL, Table as KuiTable, TableStyle, i18n, isWatchable } from '@kui-shell/core'
 
 import * as React from 'react'
 import { DataTable, DataTableHeader, TableContainer, Table } from 'carbon-components-react'
@@ -138,8 +138,14 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
         ? []
         : getBreadcrumbsFromTable(this.props.response, this.props.prefixBreadcrumbs)
 
-    if (this.props.response.body.length > 1 && !this.state.asGrid) {
-      breadcrumbs.push({ label: strings('nRows', this.props.response.body.length) })
+    if (!this.state.asGrid) {
+      const nRows = this.props.response.body.length
+      if (nRows > 1 || isWatchable(this.props.response)) {
+        breadcrumbs.push({
+          label: nRows === 1 ? strings('nRows1') : strings('nRows', nRows),
+          className: 'kui--secondary-breadcrumb kui--nrows-breadcrumb'
+        })
+      }
     }
 
     if (breadcrumbs.length > 0) {

plugins/plugin-client-common/src/components/Views/Terminal/Block/Output.tsx

@@ -27,8 +27,7 @@ import {
   eventChannelUnsafe,
   Tab as KuiTab,
   Stream,
-  Streamable,
-  isWatchable
+  Streamable
 } from '@kui-shell/core'
 
 import { BlockViewTraits } from './'
@@ -196,7 +195,7 @@ export default class Output extends React.PureComponent<Props, State> {
         isHTML(response) ||
         isMarkdownResponse(response) ||
         (typeof response === 'string' && response.length > 0) ||
-        (isTable(response) && response.body.length > 0) ||
+        isTable(response) ||
         isMixedResponse(response) ||
         this.state.streamingOutput.length > 0
       )
@@ -209,11 +208,6 @@ export default class Output extends React.PureComponent<Props, State> {
     if (isOk(this.props.model)) {
       if (hasContent) {
         return <div className="ok" />
-      } else if (isWatchable(this.props.model.response)) {
-        return (
-          //          <div className="kui--hero-text">{strings('No resources')}</div>
-          <div className="ok">{strings('No resources')}</div>
-        )
       } else {
         return <div className="ok">{strings('ok')}</div>
       }

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

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+$min-body-height: 2rem;
 $max-body-height: 36rem;
 $min-body-width: 22rem;
 $secondary-column-max-width: 9rem;

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import '../Table/sizing';
+@import './sizing';
 @import '../common/narrow-window';
 
 body[kui-theme-style] {
@@ -199,6 +199,7 @@ body[kui-theme-style] .kui--data-table-wrapper {
   .kui--data-table-container {
     min-width: $min-body-width;
     max-height: $max-body-height;
+    min-height: $min-body-height;
     overflow: auto;
   }
 }

plugins/plugin-kubectl/src/test/k8s2/aaa-watch-error-handling-via-table.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 IBM Corporation
+ * Copyright 2019-2020 IBM Corporation
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import * as assert from 'assert'
-
 import { Common, CLI, ReplExpect, Selectors } from '@kui-shell/test'
 import { createNS, waitForGreen, waitForRed } from '@kui-shell/plugin-kubectl/tests/lib/k8s/utils'
 
@@ -76,11 +74,11 @@ wdescribe(`kubectl watch error handler via table ${process.env.MOCHA_RUN_TARGET
     await this.app.client.waitForExist(Selectors.OK_N(count), CLI.waitTimeout)
 
     await this.app.client.waitUntil(async () => {
-      const emptyWatchText = await this.app.client.getText(Selectors.OK_N(count))
+      const emptyWatchText = await this.app.client.getText(Selectors.TABLE_TITLE_NROWS(count))
       if (positive) {
-        return emptyWatchText.includes('No resources')
+        return emptyWatchText.includes('0') // e.g. "0 rows"
       } else {
-        return !emptyWatchText.includes('No resources')
+        return !emptyWatchText.includes('0') // better not have "0 rows"
       }
     }, CLI.waitTimeout)
   }