feat: enable splits for popup mode

part of kubernetes-sigs#7542
starpit · Jun 6, 2021 · 4a34f4f · 4a34f4f
1 parent b205f7e
commit 4a34f4f
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 22 deletions.
diff --git a/plugins/plugin-client-common/src/components/Client/Popup.tsx b/plugins/plugin-client-common/src/components/Client/Popup.tsx
@@ -18,7 +18,7 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import { eventBus, Tab as KuiTab, teeToFile } from '@kui-shell/core'
+import { eventBus, Tab as KuiTab, teeToFile, pexecInCurrentTab } from '@kui-shell/core'
 
 import CommonClientProps from './props/Common'
 import InputStripe from '../Client/InputStripe'
@@ -74,7 +74,7 @@ export default class Popup extends React.PureComponent<Props, State> {
 
   private onTabReady(tab: KuiTab) {
     this.setState({ tab })
-    tab.REPL.pexec(this.props.commandLine.join(' '), { tab })
+    pexecInCurrentTab(this.props.commandLine.join(' '), tab)
     this.doFocusInput()
   }
 
@@ -95,7 +95,7 @@ export default class Popup extends React.PureComponent<Props, State> {
           onTabReady={this.onTabReady.bind(this)}
         ></TabContent>
         <StatusStripe noHelp={this.props.noHelp} noSettings={this.props.noSettings}>
-          <ContextWidgets className="kui--input-stripe-in-status-stripe">
+          <ContextWidgets className="kui--input-stripe-in-status-stripe flex-fill">
             {this.state.tab && (
               <InputStripe
                 ref={this._inputStripeRef}

diff --git a/plugins/plugin-client-common/src/components/Content/Table/Grid.tsx b/plugins/plugin-client-common/src/components/Content/Table/Grid.tsx
@@ -23,6 +23,7 @@ import { onClickForCell } from './TableCell'
 import DefaultColoring, { Coloring } from './Coloring'
 import tooltipContent, { tooltipProps } from './Tooltip'
 const Markdown = React.lazy(() => import('../Markdown'))
+import KuiConfiguration from '../../Client/KuiConfiguration'
 
 /** parameters to Grid component */
 export type Props<T extends KuiTable = KuiTable> = {
@@ -31,6 +32,7 @@ export type Props<T extends KuiTable = KuiTable> = {
   response: T
   visibleRows: KuiRow[]
   justUpdated: Record<string, boolean> // rowKey index
+  config: KuiConfiguration
 }
 
 export const findGridableColumn = (response: KuiTable) => {
@@ -104,7 +106,14 @@ export default class Grid<P extends Props> extends React.PureComponent<P, State>
           <div key={_.name} data-name={_.name} className={_.css}>
             <span
               className={_.onclick && 'clickable'}
-              onClick={onClickForCell(_, this.props.tab, this.props.repl, _.onclick, this.props.response)}
+              onClick={onClickForCell(
+                _,
+                this.props.tab,
+                this.props.repl,
+                _.onclick,
+                this.props.response,
+                this.props.config
+              )}
             >
               {this.props.response.markdown ? <Markdown nested source={_.name} /> : _.name}
             </span>
@@ -145,7 +154,8 @@ export default class Grid<P extends Props> extends React.PureComponent<P, State>
               tab,
               repl,
               kuiRow.attributes.find(_ => _.onclick),
-              this.props.response
+              this.props.response,
+              this.props.config
             )
           }
 

diff --git a/plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx b/plugins/plugin-client-common/src/components/Content/Table/PaginatedTable.tsx
@@ -339,15 +339,18 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
         response={this.props.response}
         visibleRows={visibleRows}
         justUpdated={this.justUpdatedMap()}
+        config={this.props.config}
       />
     )
   }
 
+  private readonly _justUpdatedMap = {}
   private justUpdatedMap() {
-    return this.state.body.reduce(M => {
-      // FIXME if (_.justUpdated) M[_.rowKey] = true
+    return this._justUpdatedMap
+    /* FIXME return this.state.body.reduce(M => {
+      if (_.justUpdated) M[_.rowKey] = true
       return M
-    }, {} as Record<string, boolean>)
+    }, {} as Record<string, boolean>) */
   }
 
   private table() {
@@ -391,7 +394,7 @@ export default class PaginatedTable<P extends Props, S extends State> extends Re
         <TableComposable className="kui--table-like-wrapper" variant={variant} isStickyHeader gridBreakPoint="">
           {header &&
             renderHeader(header, isSortable, this.state.activeSortIdx, this.state.activeSortDir, onSort.bind(this))}
-          {renderBody(response, this.justUpdatedMap(), tab, repl, offset)}
+          {renderBody(response, this.justUpdatedMap(), tab, repl, offset, this.props.config)}
         </TableComposable>
       </div>
     )

diff --git a/plugins/plugin-client-common/src/components/Content/Table/SequenceDiagram.tsx b/plugins/plugin-client-common/src/components/Content/Table/SequenceDiagram.tsx
@@ -23,7 +23,8 @@ import Bar from './Bar'
 import ErrorCell from './ErrorCell'
 import DefaultColoring from './Coloring'
 import trafficLight from './css-for-status'
-import { /* renderCell, */ onClickForCell, CellOnClickHandler } from './TableCell'
+import { onClickForCell, CellOnClickHandler } from './TableCell'
+import KuiConfiguration from '../../Client/KuiConfiguration'
 
 import '../../../../web/scss/components/Table/SequenceDiagram/_index.scss'
 
@@ -33,6 +34,7 @@ interface Props {
   response: Table
   tab: Tab
   repl: REPL
+  config: KuiConfiguration
 
   /**
    * Threshold in millis below which two rows will be considered to be
@@ -492,7 +494,14 @@ export default class SequenceDiagram extends React.PureComponent<Props, State> {
                 : (gap >= 0 ? '+' : '') + prettyPrintDuration(gap)
 
             // drilldown to underlying resource, e.g. Pod for Kubernetes Jobs
-            const onClick = onClickForCell(row, this.props.tab, this.props.repl, row.attributes[0], this.props.response)
+            const onClick = onClickForCell(
+              row,
+              this.props.tab,
+              this.props.repl,
+              row.attributes[0],
+              this.props.response,
+              this.props.config
+            )
 
             // rows that help to define the contents of the interval; e.g. jobName
             const interGroupGapRow =

diff --git a/plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx b/plugins/plugin-client-common/src/components/Content/Table/TableBody.tsx
@@ -22,6 +22,7 @@ import { EmptyState, EmptyStateVariant, Bullseye, Title, EmptyStateIcon } from '
 import { SearchIcon } from '@patternfly/react-icons'
 
 import renderCell from './TableCell'
+import KuiConfiguration from '../../Client/KuiConfiguration'
 
 const strings = i18n('plugin-client-common')
 
@@ -36,7 +37,8 @@ export default function renderBody(
   justUpdated: Record<string, boolean>, // rowKey index
   tab: Tab,
   repl: REPL,
-  offset: number
+  offset: number,
+  config: KuiConfiguration
 ) {
   const emptyState = () => {
     return (
@@ -60,7 +62,7 @@ export default function renderBody(
         ? emptyState()
         : kuiTable.body.map((kuiRow, ridx) => {
             const updated = justUpdated[kuiRow.rowKey || kuiRow.name]
-            const cell = renderCell(kuiTable, kuiRow, updated, tab, repl)
+            const cell = renderCell(kuiTable, kuiRow, updated, tab, repl, config)
 
             const key = kuiRow.key || (kuiTable.header ? kuiTable.header.key || kuiTable.header.name : undefined)
 

diff --git a/plugins/plugin-client-common/src/components/Content/Table/TableCell.tsx b/plugins/plugin-client-common/src/components/Content/Table/TableCell.tsx
@@ -24,7 +24,6 @@ import {
   Row as KuiRow,
   Tab,
   REPL,
-  isPopup,
   eventBus,
   pexecInCurrentTab,
   isHeadless
@@ -36,6 +35,7 @@ import tooltipContent, { tooltipProps } from './Tooltip'
 const Markdown = React.lazy(() => import('../Markdown'))
 import ErrorCell from './ErrorCell'
 import whenNothingIsSelected from '../../../util/selection'
+import KuiConfiguration from '../../Client/KuiConfiguration'
 
 export type CellOnClickHandler = (evt: React.MouseEvent) => void
 
@@ -52,7 +52,8 @@ export function onClickForCell(
   tab: Tab,
   repl: REPL,
   cell?: KuiCell,
-  opts?: Pick<KuiTable, 'drilldownTo'> & { selectRow?: () => void }
+  opts?: Pick<KuiTable, 'drilldownTo'> & { selectRow?: () => void },
+  config?: KuiConfiguration
 ): CellOnClickHandler {
   const { drilldownTo = 'side-split', selectRow = () => undefined } = opts || {}
 
@@ -80,7 +81,11 @@ export function onClickForCell(
       return whenNothingIsSelected(async (evt: React.MouseEvent) => {
         evt.stopPropagation()
         selectRow()
-        if (!isPopup() && drilldownTo === 'side-split' && !XOR(evt.metaKey, !!process.env.KUI_SPLIT_DRILLDOWN)) {
+        if (
+          config.splitTerminals &&
+          drilldownTo === 'side-split' &&
+          !XOR(evt.metaKey, !!process.env.KUI_SPLIT_DRILLDOWN)
+        ) {
           pexecInCurrentTab(`split --ifnot is-split --cmdline "${handler}"`, undefined, false, true)
         } else if (!isHeadless() && drilldownTo === 'new-window') {
           const { ipcRenderer } = await import('electron')
@@ -111,7 +116,14 @@ export function onClickForCell(
  * Render a TableCell part
  *
  */
-export default function renderCell(table: KuiTable, kuiRow: KuiRow, justUpdated: boolean, tab: Tab, repl: REPL) {
+export default function renderCell(
+  table: KuiTable,
+  kuiRow: KuiRow,
+  justUpdated: boolean,
+  tab: Tab,
+  repl: REPL,
+  config: KuiConfiguration
+) {
   return function KuiTableCell(
     key: string,
     value: string,
@@ -174,7 +186,7 @@ export default function renderCell(table: KuiTable, kuiRow: KuiRow, justUpdated:
           data-value={value}
           data-tag={tag}
           className={outerClassName}
-          onClick={onclick ? onClickForCell(kuiRow, tab, repl, attributes[cidx - 1], table) : undefined}
+          onClick={onclick ? onClickForCell(kuiRow, tab, repl, attributes[cidx - 1], table, config) : undefined}
         >
           {tag === 'badge' && (
             <span

diff --git a/plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx b/plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx
@@ -27,7 +27,6 @@ import {
   ExecOptions,
   ExecOptionsWithUUID,
   ExecType,
-  isPopup,
   History,
   CommandStartEvent,
   CommandCompleteEvent,
@@ -370,7 +369,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
   }
 
   private allocateUUIDForScrollback() {
-    if (this.props.config.splitTerminals && !this.props.config.isPopup) {
+    if (this.props.config.splitTerminals) {
       // this.props.uuid is the uuid for the whole tab
       // on top of that, we allocate a "v5" uuid for this scrollback
       const sbidx = this.scrollbackCounter++
@@ -1255,7 +1254,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
 
   /** Is this scrollback not-100% width? */
   private isWidthConstrained(scrollback: ScrollbackState, sbidx: number) {
-    return isPopup() || this.isMiniSplit(scrollback, sbidx) || this.isASideBySide(sbidx)
+    return this.props.config.isPopup || this.isMiniSplit(scrollback, sbidx) || this.isASideBySide(sbidx)
   }
 
   /** Render the blocks in one split */

diff --git a/plugins/plugin-client-default/src/index.tsx b/plugins/plugin-client-default/src/index.tsx
@@ -90,7 +90,7 @@ export default function renderMain(props: KuiProps) {
         <CurrentNamespace />
       </ContextWidgets>
 
-      <SpaceFiller />
+      {!isPopup() && <SpaceFiller />}
 
       <MeterWidgets className="kui--hide-in-narrower-windows">
         {/* <ClusterUtilization /> */}