fix(plugins/plugin-client-common): when proxy disconnects, all terminal state is lost

part of #8030

Author: starpit

plugins/plugin-client-common/src/components/Client/Kui.tsx

@@ -188,7 +188,7 @@ export class Kui extends React.PureComponent<Props, State> {
     return (
       <Alert
         hideCloseButton
-        className="kui--terminal-alert kui--connection-lost"
+        className="kui--terminal-alert kui--connection-lost top-pad left-pad right-pad"
         alert={{
           type: 'error',
           title: strings('Lost connection to your cluster'),
@@ -217,7 +217,10 @@ export class Kui extends React.PureComponent<Props, State> {
 
   private defaultLoadingError() {
     return err => (
-      <Alert alert={{ type: 'error', title: strings('Error connecting to your cluster'), body: err.toString() }} />
+      <Alert
+        className="top-pad"
+        alert={{ type: 'error', title: strings('Error connecting to your cluster'), body: err.toString() }}
+      />
     )
   }
 

plugins/plugin-client-common/src/components/Client/SessionInitStatus.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2020 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+type SessionInitStatus = 'NotYet' | 'InProgress' | 'Reinit' | 'Done' | 'Error'
+
+export default SessionInitStatus

plugins/plugin-client-common/src/components/Client/TabContent.tsx

@@ -21,6 +21,7 @@ import KuiContext from './context'
 const Confirm = React.lazy(() => import('../Views/Confirm'))
 
 import getSize from '../Views/Terminal/getSize'
+import SessionInitStatus from './SessionInitStatus'
 import ScrollableTerminal, { TerminalOptions } from '../Views/Terminal/ScrollableTerminal'
 
 type Cleaner = () => void
@@ -49,8 +50,6 @@ type Props = TabContentOptions &
     tabTitle?: string
   }
 
-type SessionInitStatus = 'NotYet' | 'InProgress' | 'Reinit' | 'Done' | 'Error'
-
 type State = Partial<WithTab> & {
   sessionInit: SessionInitStatus
   sessionInitError?: Error
@@ -243,38 +242,42 @@ export default class TabContent extends React.PureComponent<Props, State> {
   }
 
   private terminal() {
-    if (this.state.sessionInit !== 'Done') {
+    if (this.state.sessionInit !== 'NotYet') {
       return (
         <KuiContext.Consumer>
-          {config => {
-            if (this.state.sessionInit === 'Error' && config.loadingError) {
-              return config.loadingError(this.state.sessionInitError)
-            } else if (this.state.sessionInit === 'Reinit' && config.reinit) {
-              return config.reinit
-            }
-
-            return config.loading || this.defaultLoading()
-          }}
+          {config => (
+            <ScrollableTerminal
+              {...this.props}
+              tab={this.state.tab.current}
+              sessionInit={this.state.sessionInit}
+              config={config}
+              toggleAttribute={this._toggleAttribute}
+              onClear={this._onClear}
+              ref={this.state._terminal}
+            >
+              {this.children()}
+            </ScrollableTerminal>
+          )}
         </KuiContext.Consumer>
       )
-    } else {
+    }
+  }
+
+  /** Use client-provided (or default) proxy disconnected notice, if warranted */
+  private proxyDisconnectNotice() {
+    if (this.state.sessionInit !== 'Done') {
       return (
-        <React.Fragment>
-          <KuiContext.Consumer>
-            {config => (
-              <ScrollableTerminal
-                {...this.props}
-                tab={this.state.tab.current}
-                config={config}
-                toggleAttribute={this._toggleAttribute}
-                onClear={this._onClear}
-                ref={this.state._terminal}
-              >
-                {this.children()}
-              </ScrollableTerminal>
-            )}
-          </KuiContext.Consumer>
-        </React.Fragment>
+        <KuiContext.Consumer>
+          {config => (
+            <React.Suspense fallback={<div />}>
+              {this.state.sessionInit === 'Error' && config.loadingError
+                ? config.loadingError(this.state.sessionInitError)
+                : this.state.sessionInit === 'Reinit' && config.reinit
+                ? config.reinit
+                : this.state.sessionInit !== 'Done' && (config.loading || this.defaultLoading())}
+            </React.Suspense>
+          )}
+        </KuiContext.Consumer>
       )
     }
   }
@@ -333,6 +336,7 @@ export default class TabContent extends React.PureComponent<Props, State> {
     return (
       <React.Fragment>
         <div className="kui--rows">
+          {this.proxyDisconnectNotice()}
           <div className="kui--columns" style={{ position: 'relative' }}>
             {this.terminal()}
           </div>

plugins/plugin-client-common/src/components/Views/Terminal/ScrollableTerminal.tsx

@@ -50,6 +50,7 @@ import getSize from './getSize'
 import SplitHeader from './SplitHeader'
 import { NotebookImpl, isNotebookImpl, snapshot, FlightRecorder, tabAlignment } from './Snapshot'
 import KuiConfiguration from '../../Client/KuiConfiguration'
+import SessionInitStatus from '../../Client/SessionInitStatus'
 import { onCopy, onCut, onPaste } from './ClipboardTransfer'
 import {
   Active,
@@ -121,6 +122,9 @@ type Props = TerminalOptions & {
 
   /** Toggle attribute on Tab DOM */
   toggleAttribute(attr: string): void
+
+  /** Status of the proxy session (for client-server architectures of Kui) */
+  sessionInit: SessionInitStatus
 }
 
 interface State {
@@ -350,7 +354,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
     const scrollback = this.scrollback()
     const welcomeMax = this.props.config.showWelcomeMax
 
-    if (this.props.config.loadingDone && welcomeMax !== undefined) {
+    if (this.props.sessionInit === 'Done' && this.props.config.loadingDone && welcomeMax !== undefined) {
       const welcomed = parseInt(localStorage.getItem(NUM_WELCOMED)) || 0
 
       if ((welcomeMax === -1 || welcomed < welcomeMax) && this.props.config.loadingDone) {
@@ -1539,7 +1543,7 @@ export default class ScrollableTerminal extends React.PureComponent<Props, State
 
   public render() {
     return (
-      <div className="repl" id="main-repl">
+      <div className="repl" id="main-repl" data-session-init-status={this.props.sessionInit}>
         <div className="repl-inner zoomable kui--terminal-split-container" data-split-count={this.state.splits.length}>
           {this.state.splits.map((scrollback, sbidx) => this.split(scrollback, sbidx))}
         </div>

plugins/plugin-client-common/web/scss/components/Alert/PatternFly.scss

@@ -17,10 +17,6 @@
 .kui--toolbar-alert {
   white-space: normal;
 
-  &.kui--connection-lost {
-    position: absolute;
-  }
-
   h4 {
     margin: 0;
     font-size: inherit;

plugins/plugin-client-common/web/scss/components/Terminal/Announcement.scss

@@ -22,3 +22,7 @@
     background-color: var(--color-repl-background);
   }
 }
+
+.repl:not([data-session-init-status='Done']) .kui--session-init-done {
+  display: none;
+}