fix: keyboard history navigation does not work in Popup clients

Fixes kubernetes-sigs#6262
starpit · Nov 26, 2020 · 0de9b09 · 0de9b09
1 parent 65e52df
commit 0de9b09
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/plugins/plugin-client-common/src/components/Client/Popup.tsx b/plugins/plugin-client-common/src/components/Client/Popup.tsx
@@ -30,6 +30,7 @@ interface Props {
 }
 
 interface State {
+  tab: KuiTab
   model: TabModel
   promptPlaceholder: string
 }
@@ -57,12 +58,14 @@ export default class Popup extends React.PureComponent<Props, State> {
     })
 
     this.state = {
+      tab: undefined,
       model: tabModel,
       promptPlaceholder: ''
     }
   }
 
   private onTabReady(tab: KuiTab) {
+    this.setState({ tab })
     tab.REPL.pexec(this.props.commandLine.join(' '), { tab })
   }
 
@@ -78,7 +81,13 @@ export default class Popup extends React.PureComponent<Props, State> {
         ></TabContent>
         <StatusStripe>
           <ContextWidgets className="kui--input-stripe-in-status-stripe">
-            <InputStripe promptPlaceholder={this.state.promptPlaceholder} uuid={this.state.model.uuid} />
+            {this.state.tab && (
+              <InputStripe
+                promptPlaceholder={this.state.promptPlaceholder}
+                uuid={this.state.model.uuid}
+                tab={this.state.tab}
+              />
+            )}
           </ContextWidgets>
           {this.props.children}
         </StatusStripe>

diff --git a/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx b/plugins/plugin-client-common/src/components/Views/Terminal/Block/Input.tsx
@@ -413,21 +413,27 @@ export default class Input extends InputProvider {
 
   private readonly _onRef = this.onRef.bind(this)
 
+  private willFocusBlock(evt: React.SyntheticEvent<HTMLInputElement>) {
+    if (this.props.willFocusBlock) {
+      this.props.willFocusBlock(evt)
+    }
+  }
+
   /** This is the onFocus property of the active prompt */
   private readonly _onFocus = (evt: React.FocusEvent<HTMLInputElement>) => {
     this.props.onInputFocus && this.props.onInputFocus(evt)
-    this.props.willFocusBlock(evt)
+    this.willFocusBlock(evt)
   }
 
   /** This is the onClick property of the prompt for Active blocks */
   private readonly _onClickActive = (evt: React.MouseEvent<HTMLInputElement>) => {
     this.props.onInputClick && this.props.onInputClick(evt)
-    this.props.willFocusBlock(evt)
+    this.willFocusBlock(evt)
   }
 
   /** This is the onClick property of the prompt for Finished blocks */
   private readonly _onClickFinished = whenNothingIsSelected((evt: React.MouseEvent<HTMLInputElement>) => {
-    this.props.willFocusBlock(evt)
+    this.willFocusBlock(evt)
     this.setState(curState => {
       if (!curState.isReEdit) {
         return {

diff --git a/plugins/plugin-client-default/src/index.tsx b/plugins/plugin-client-default/src/index.tsx
@@ -55,7 +55,8 @@ export default function renderMain(props: KuiProps) {
       {...props}
       toplevel={!inBrowser() && <Search />}
       commandLine={
-        props.commandLine || [
+        props.commandLine ||
+        (!isPopup() && [
           'tab',
           'new',
           '-s',
@@ -72,7 +73,7 @@ export default function renderMain(props: KuiProps) {
           `kuiconfig not set ${welcomeBit}`,
           '--onClose',
           `kuiconfig set ${welcomeBit}`
-        ]
+        ])
       }
     >
       <ContextWidgets>