fix: RadioTables are not replayable

Fixes #5599

Author: starpit

packages/core/src/index.ts

@@ -238,6 +238,7 @@ export {
   isRadioTable,
   RadioTableRow,
   RadioTableCell,
+  Selectable,
   radioTableHintsAsCss,
   radioTableCellToString,
   radioTableAddHint,

packages/core/src/models/RadioTable.ts

@@ -34,7 +34,13 @@ export interface RadioTableRow {
 }
 
 export interface Selectable {
-  onSelect: () => void | Promise<void>
+  /**
+   * Handler for change of selection. This will be interpreted as a
+   * Kui command line to be executed when the user clicks on the
+   * corresponding row in the UI.
+   *
+   */
+  onSelect: string
 }
 
 export function radioTableHintsAsCss(cell: RadioTableCell) {

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

@@ -118,7 +118,7 @@ export default class KuiMMRContent extends React.Component<KuiMMRProps, State> {
         // so we have to re-assign mode.content to work around this typescript compile error
         return (
           <KuiContext.Consumer>
-            {config => <RadioTableSpi table={radioTable} title={!config.disableTableTitle} />}
+            {config => <RadioTableSpi table={radioTable} title={!config.disableTableTitle} repl={tab.REPL} />}
           </KuiContext.Consumer>
         )
       } else if (isTable(mode.content)) {

plugins/plugin-client-common/src/components/Content/Scalar/index.tsx

@@ -104,7 +104,7 @@ export default class Scalar extends React.PureComponent<Props, State> {
       } else if (isRadioTable(response)) {
         return (
           <KuiContext.Consumer>
-            {config => <RadioTableSpi table={response} title={!config.disableTableTitle} />}
+            {config => <RadioTableSpi table={response} title={!config.disableTableTitle} repl={tab.REPL} />}
           </KuiContext.Consumer>
         )
       } else if (isTable(response)) {

plugins/plugin-client-common/src/components/spi/RadioTable/impl/Carbon.tsx

@@ -19,6 +19,7 @@ import { v4 as uuid } from 'uuid'
 import {
   Breadcrumb,
   RadioTableRow,
+  Selectable,
   radioTableHintsAsCss,
   radioTableCellToString,
   cellShouldHaveBadge,
@@ -63,15 +64,17 @@ export default class CarbonRadioTable extends React.PureComponent<Props, State>
     }
   }
 
-  private async onChange(selectedIdx: number, onSelect: () => void) {
+  private async onChange(selectedIdx: number, onSelect: Selectable['onSelect']) {
     // wow, carbon components isn't so great; we have to manage unchecking ourselves??
     const currentSelection = document.getElementById(this.id(this.props.selectedIdx)) as HTMLInputElement
     if (currentSelection) {
       currentSelection.checked = false
     }
 
-    if (onSelect) {
-      await onSelect()
+    try {
+      await this.props.repl.qexec(onSelect)
+    } catch (err) {
+      console.error('Error changing selection in RadioTable', err)
     }
 
     this.props.onChange(selectedIdx + this.props.offset)
@@ -101,7 +104,7 @@ export default class CarbonRadioTable extends React.PureComponent<Props, State>
     return <Toolbar className="kui--data-table-toolbar-top" breadcrumbs={breadcrumbs.length > 0 && breadcrumbs} />
   }
 
-  private row(row: RadioTableRow, ridx: number, head = false, onSelect?: () => void) {
+  private row(row: RadioTableRow, ridx: number, head = false, onSelect?: Selectable['onSelect']) {
     const isSelected = !head && ridx === this.props.selectedIdx - this.props.offset
     const name = this.id(ridx)
 

plugins/plugin-client-common/src/components/spi/RadioTable/model.ts

@@ -14,10 +14,12 @@
  * limitations under the License.
  */
 
-import { RadioTable } from '@kui-shell/core'
+import { RadioTable, REPL } from '@kui-shell/core'
 
 interface Props {
+  /** The model to be rendered */
   table: RadioTable
+
   /**
    * paginate: true -> always paginate
    * paginate: false -> never paginate
@@ -27,6 +29,9 @@ interface Props {
 
   /** display table title? */
   title: boolean
+
+  /** REPL Controller */
+  repl: REPL
 }
 
 export default Props

plugins/plugin-core-support/src/lib/cmds/theme.ts

@@ -101,9 +101,7 @@ const list = async ({ REPL }: Arguments): Promise<RadioTable> => {
           { value: plugin, hints: [CellShould.HideWithSidecar, CellShould.BeGrayish] }
         ],
 
-        onSelect: async () => {
-          await REPL.qexec(`theme set ${REPL.encodeComponent(theme.name)}`)
-        }
+        onSelect: `theme set ${REPL.encodeComponent(theme.name)}`
       }))
     )
   )

plugins/plugin-git/src/controller/git/branch.ts

@@ -81,9 +81,7 @@ async function doListBranches(args: Arguments<GitBranchOptions>): Promise<RadioT
       return {
         nameIdx: 0,
         cells: [branchName],
-        onSelect: async () => {
-          args.REPL.pexec(`git checkout ${branchName}`)
-        }
+        onSelect: `git checkout ${branchName}`
       }
     })
 

plugins/plugin-kubectl/oc/src/controller/oc/get/projects.ts

@@ -27,7 +27,7 @@ import {
 
 /** Actuate a project switch by using `oc project set` */
 function doSwitchViaOc(ns: string, args: Arguments<KubeOptions>) {
-  return args.REPL.pexec(`oc project ${args.REPL.encodeComponent(ns)}`)
+  return `oc project ${args.REPL.encodeComponent(ns)}`
 }
 
 // we use the fetcher from 'kubectl get', and the viewTransformer from 'kubectl get namespaces'

plugins/plugin-kubectl/src/controller/kubectl/contexts.ts

@@ -117,14 +117,13 @@ const asRadioTable = (args: Arguments, { header, body }: Table): RadioTable => {
     header: rtRowsFor(header, wide),
     body: body
       .map(row => rtRowsFor(row, wide))
-      .map(rtRow =>
-        Object.assign(rtRow, {
-          onSelect: async () => {
-            const context = radioTableCellToString(rtRow.cells[0], true) // true: use title if we have it
-            await args.REPL.qexec(`kubectl config use-context ${context}`)
-          }
+      .map(rtRow => {
+        const context = radioTableCellToString(rtRow.cells[0], true) // true: use title if we have it
+
+        return Object.assign(rtRow, {
+          onSelect: `kubectl config use-context ${context}`
         })
-      )
+      })
   }
 }