fix: replace Containers with Logs tab

this PR also fixes
- a few missing pieces to support Sidecar Toolbar updates from react components
- ability for PTY streaming consumers to direct xon/xoff flow control
- removes a number of way out of date css rules

Fixes #4603

Author: starpit

packages/core/src/core/jobs/job.ts

@@ -18,5 +18,10 @@ export interface Abortable {
   abort(): void
 }
 
+export interface FlowControllable {
+  xon(): void
+  xoff(): void
+}
+
 /** in the future, a WatchableJob may be more than Abortable, e.g. Suspendable */
 export type WatchableJob = Abortable

packages/core/src/index.ts

@@ -79,7 +79,7 @@ export {
   isMetadataBearing as isResourceWithMetadata
 } from './models/entity'
 export { isWatchable, Watchable, Watcher, WatchPusher } from './core/jobs/watchable'
-export { Abortable } from './core/jobs/job'
+export { Abortable, FlowControllable } from './core/jobs/job'
 import { Tab } from './webapp/tab'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export async function History(tab: Tab) {

packages/core/src/models/execOptions.ts

@@ -16,9 +16,9 @@
 
 import { ExecType } from './command'
 import { Tab } from '../webapp/tab'
-import { Streamable, StreamableFactory } from './streamable'
+import { Stream, Streamable, StreamableFactory } from './streamable'
 import { Block } from '../webapp/models/block'
-import { Abortable } from '../core/jobs/job'
+import { Abortable, FlowControllable } from '../core/jobs/job'
 
 export interface ExecOptions {
   /** force execution in a given tab? */
@@ -89,7 +89,7 @@ export interface ExecOptions {
   stderr?: (str: string) => any // eslint-disable-line @typescript-eslint/no-explicit-any
 
   /** on job init, pass the job, and get back a stdout */
-  onInit?: (job: Abortable) => (str: Streamable) => void
+  onInit?: (job: Abortable & FlowControllable) => Stream | Promise<Stream>
 
   parameters?: any // eslint-disable-line @typescript-eslint/no-explicit-any
   entity?: any // eslint-disable-line @typescript-eslint/no-explicit-any

packages/core/src/models/streamable.ts

@@ -19,6 +19,6 @@ import { ScalarResponse } from './entity'
 export type Streamable = ScalarResponse // SimpleEntity | Table | MixedResponse | MultiModalResponse
 export default Streamable
 
-export type Stream = (response: Streamable) => Promise<void>
+export type Stream = (response: Streamable) => void | Promise<void>
 
-export type StreamableFactory = () => Promise<Stream>
+export type StreamableFactory = () => Stream | Promise<Stream>

plugins/plugin-bash-like/src/pty/client.ts

@@ -708,7 +708,7 @@ const remoteChannelFactory: ChannelFactory = async (tab: Tab) => {
     const { proto, port, path, uid, gid } = resp.content
     const protoHostPortContextRoot = window.location.href
       .replace(/#?\/?$/, '')
-      .replace(/^http(s?):\/\/([^:/]+)(:\d+)?/, `${proto}://$2${port === -1 ? '$3' : ':'+port}`)
+      .replace(/^http(s?):\/\/([^:/]+)(:\d+)?/, `${proto}://$2${port === -1 ? '$3' : ':' + port}`)
       .replace(/\/(index\.html)?$/, '')
     const url = new URL(path, protoHostPortContextRoot).href
     debug('websocket url', url, proto, port, path, uid, gid)
@@ -938,11 +938,20 @@ export const doExec = (
 
           if (execOptions.onInit) {
             const job = {
+              xon: () => {
+                debug('xon requested')
+                ws.send(JSON.stringify({ type: 'xon', uuid: ourUUID }))
+              },
+              xoff: () => {
+                debug('xoff requested')
+                ws.send(JSON.stringify({ type: 'xoff', uuid: ourUUID }))
+              },
               abort: () => {
+                debug('abort requested')
                 ws.send(JSON.stringify({ type: 'kill', uuid: ourUUID }))
               }
             }
-            execOptions.stdout = execOptions.onInit(job)
+            execOptions.stdout = await execOptions.onInit(job)
           }
         }
 

plugins/plugin-bash-like/src/pty/server.ts

@@ -251,6 +251,24 @@ export const onConnection = (exitNow: ExitHandler, uid?: number, gid?: number) =
       } = JSON.parse(data)
 
       switch (msg.type) {
+        case 'xon': {
+          const shell = msg.uuid && (await shells[msg.uuid])
+          if (shell) {
+            const RESUME = '\x11' // this is XON
+            shell.write(RESUME)
+          }
+          break
+        }
+
+        case 'xoff': {
+          const shell = msg.uuid && (await shells[msg.uuid])
+          if (shell) {
+            const PAUSE = '\x13' // this is XOFF
+            shell.write(PAUSE)
+          }
+          break
+        }
+
         case 'kill': {
           const shell = msg.uuid && (await shells[msg.uuid])
           if (shell) {

plugins/plugin-client-common/src/components/Content/Eval.tsx

@@ -18,11 +18,8 @@ import * as React from 'react'
 import * as Debug from 'debug'
 
 import {
-  ParsedOptions,
-  Tab as KuiTab,
   ScalarResource,
   SupportedStringContent,
-  MultiModalResponse,
   isCommandStringContent,
   FunctionThatProducesContent,
   ReactProvider,
@@ -33,18 +30,12 @@ import {
 } from '@kui-shell/core'
 
 import { Loading } from '../../'
-import KuiMMRContent from './KuiContent'
+import KuiMMRContent, { KuiMMRProps } from './KuiContent'
 
 const debug = Debug('plugins/sidecar/Eval')
 
-interface EvalProps {
-  tab: KuiTab
+interface EvalProps extends Omit<KuiMMRProps, 'mode'> {
   command: string | FunctionThatProducesContent
-  args: {
-    argvNoOptions: string[]
-    parsedOptions: ParsedOptions
-  }
-  response: MultiModalResponse
   contentType?: SupportedStringContent
 }
 
@@ -129,6 +120,6 @@ export default class Eval extends React.PureComponent<EvalProps, EvalState> {
           contentType: this.state.contentType
         }
 
-    return <KuiMMRContent tab={this.props.tab} mode={mode} response={this.props.response} args={this.props.args} />
+    return <KuiMMRContent {...this.props} mode={mode} />
   }
 }

plugins/plugin-client-common/src/components/Content/KuiContent.tsx

@@ -42,7 +42,7 @@ import HTMLString from './HTMLString'
 import HTMLDom from './Scalar/HTMLDom'
 import RadioTableSpi from '../spi/RadioTable'
 
-interface KuiMMRProps {
+export interface KuiMMRProps {
   tab: KuiTab
   mode: Content
   response: MultiModalResponse
@@ -55,7 +55,7 @@ interface KuiMMRProps {
 
 export default class KuiMMRContent extends React.PureComponent<KuiMMRProps> {
   public render() {
-    const { tab, mode, response, willUpdateToolbar, args } = this.props
+    const { tab, mode, response, willUpdateToolbar } = this.props
 
     if (isStringWithOptionalContentType(mode)) {
       if (mode.contentType === 'text/html') {
@@ -74,18 +74,16 @@ export default class KuiMMRContent extends React.PureComponent<KuiMMRProps> {
           <Editor
             content={mode}
             readOnly={false}
-            willUpdateToolbar={willUpdateToolbar}
+            willUpdateToolbar={!response.toolbarText && willUpdateToolbar}
             response={response}
             repl={tab.REPL}
           />
         )
       }
     } else if (isCommandStringContent(mode)) {
-      return (
-        <Eval tab={tab} command={mode.contentFrom} contentType={mode.contentType} response={response} args={args} />
-      )
+      return <Eval {...this.props} command={mode.contentFrom} contentType={mode.contentType} />
     } else if (isFunctionContent(mode)) {
-      return <Eval tab={tab} command={mode.content} response={response} args={args} />
+      return <Eval {...this.props} command={mode.content} />
     } else if (isScalarContent(mode)) {
       if (isReactProvider(mode)) {
         return mode.react({ willUpdateToolbar })

plugins/plugin-client-common/src/components/Views/Sidecar/Toolbar.tsx

@@ -31,6 +31,12 @@ export type Props = {
   }
 }
 
+/** helper to ensure exhaustiveness of the switch statement below */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function assertUnreachable(x: never): never {
+  throw new Error('Did not expect to get here')
+}
+
 export default class Toolbar extends React.PureComponent<Props> {
   private icon() {
     if (this.props.toolbarText) {
@@ -40,9 +46,13 @@ export default class Toolbar extends React.PureComponent<Props> {
           return <Icons icon="Info" />
         case 'warning':
           return <Icons icon="Warning" />
-        default:
+        case 'error':
           return <Icons icon="Error" />
       }
+
+      // this bit of magic ensures exhaustiveness of the switch;
+      // reference: https://stackoverflow.com/a/39419171
+      return assertUnreachable(type)
     }
   }
 

plugins/plugin-client-common/src/components/spi/Icons/impl/PatternFly.tsx

@@ -35,8 +35,8 @@ import {
   ArrowLeftIcon as Back,
   ArrowRightIcon as Forward,
   InfoCircleIcon as Info,
-  WarningTriangleIcon as Warning,
-  ExclamationTriangleIcon as Oops,
+  ExclamationTriangleIcon as Warning,
+  BombIcon as Oops,
   ListIcon as List,
   ThIcon as Grid,
   CaretLeftIcon as PreviousPage,