fix(plugins/plugin-client-commong): show RadioTable selected row in the table body and header breadcrumb

Fixes #5239

Author: myan9

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

@@ -91,18 +91,18 @@ export default class CarbonRadioTable extends React.PureComponent<Props, State>
       breadcrumbs.push({ label: strings('nRows', table.body.length) })
     }
 
-    return <Toolbar className="kui--data-table-toolbar-top" breadcrumbs={breadcrumbs.length > 0 && breadcrumbs} />
-  }
-
-  private bottomToolbar() {
     if (this.props.selectedIdx >= 0) {
       const selectedRow = this.props.table.body[this.props.selectedIdx]
-      return <Toolbar>{this.row(selectedRow, this.props.selectedIdx)}</Toolbar>
+      if (selectedRow.nameIdx !== undefined) {
+        breadcrumbs.push({ label: radioTableCellToString(selectedRow.cells[selectedRow.nameIdx]) })
+      }
     }
+
+    return <Toolbar className="kui--data-table-toolbar-top" breadcrumbs={breadcrumbs.length > 0 && breadcrumbs} />
   }
 
   private row(row: RadioTableRow, ridx: number, head = false, onSelect?: () => void) {
-    const isSelected = !onSelect && !head && ridx === this.props.selectedIdx - this.props.offset
+    const isSelected = !head && ridx === this.props.selectedIdx - this.props.offset
     const name = this.id(ridx)
 
     // notes: label is needed for selection
@@ -111,7 +111,11 @@ export default class CarbonRadioTable extends React.PureComponent<Props, State>
         label
         head={head}
         key={ridx}
-        className={'kui--radio-table-row' + (head ? ' kui--radio-table-row--header-row' : '')}
+        className={
+          'kui--radio-table-row' +
+          (head ? ' kui--radio-table-row--header-row' : '') +
+          (isSelected ? ' kui--inverted-color-context bx--structured-list-row--selected' : '')
+        }
         data-name={row.nameIdx !== undefined ? radioTableCellToString(row.cells[row.nameIdx]) : name}
         data-is-selected={isSelected || undefined}
       >
@@ -164,9 +168,7 @@ export default class CarbonRadioTable extends React.PureComponent<Props, State>
   private body() {
     return (
       <StructuredListBody className="kui--radio-table-body">
-        {this.props.table.body.map(
-          (row, idx) => idx !== this.props.selectedIdx && this.row(row, idx, false, row.onSelect)
-        )}
+        {this.props.table.body.map((row, idx) => this.row(row, idx, false, row.onSelect))}
       </StructuredListBody>
     )
   }
@@ -177,7 +179,6 @@ export default class CarbonRadioTable extends React.PureComponent<Props, State>
         <div className="kui--screenshotable">
           <Card
             header={this.props.title && this.topToolbar()}
-            footer={this.bottomToolbar()}
             footerClassName="kui--inverted-color-context kui--no-padding"
           >
             <div className="kui--data-table-container">

plugins/plugin-client-common/web/scss/components/RadioTable/Carbon.scss

@@ -21,7 +21,7 @@
 $max-body-height: 30rem;
 $min-body-width: 30rem;
 
-[kui-theme-style] .kui--radio-table .kui--radio-table-row:hover .bx--structured-list-svg {
+[kui-theme-style] .kui--radio-table .kui--radio-table-row:hover:not([data-is-selected]) .bx--structured-list-svg {
   fill: var(--color-text-02);
 }
 

plugins/plugin-client-common/web/scss/components/StructuredList/Carbon.scss

@@ -73,6 +73,13 @@
   }
 }
 
+.bx--structured-list--selection
+  .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row)
+  > .bx--structured-list-td,
+.bx--structured-list-row.bx--structured-list-row--selected > .bx--structured-list-td {
+  color: inherit;
+}
+
 .bx--structured-list--selection
   .bx--structured-list-row:hover:not(.bx--structured-list-row--header-row):not(.bx--structured-list-row--selected) {
   background-color: var(--color-ui-03);

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

@@ -213,3 +213,11 @@ body[kui-theme-style] .kui--data-table-wrapper {
     overflow: auto;
   }
 }
+
+.kui--radio-table-row.kui--inverted-color-context.bx--structured-list-row--selected {
+  background-color: var(--color-sidecar-header);
+}
+
+[kui-theme-style='dark'] .kui--radio-table-row.kui--inverted-color-context.bx--structured-list-row--selected {
+  background-color: var(--color-sidecar-background);
+}