fix(plugins/plugin-client-common): If Tab is closed soon after it is …

…created, console errors can appear part of #7965
kubernetes-sigs · Sep 13, 2021 · e7eb729 · e7eb729
1 parent 091a4ee
commit e7eb729
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/plugins/plugin-client-common/src/components/Client/TabContent.tsx b/plugins/plugin-client-common/src/components/Client/TabContent.tsx
@@ -99,11 +99,11 @@ export default class TabContent extends React.PureComponent<Props, State> {
     const onTabNew = () => {
       this.setState({ sessionInit: 'Done' })
 
-      if (this.state._terminal.current) {
-        setTimeout(() => {
+      setTimeout(() => {
+        if (this.state._terminal.current) {
           this.state._terminal.current.doFocusIfNeeded()
-        }, 300)
-      }
+        }
+      }, 300)
 
       try {
         if (this.props.onTabReady) {

diff --git a/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx b/plugins/plugin-client-common/src/components/Client/TopTabStripe/Tab.tsx
@@ -59,6 +59,8 @@ interface State {
 }
 
 export default class Tab extends React.PureComponent<Props, State> {
+  private _unmounted = false
+
   private readonly closeTabRef = React.createRef<HTMLDivElement>()
 
   private onCommandStart: (evt: Event) => void
@@ -78,7 +80,7 @@ export default class Tab extends React.PureComponent<Props, State> {
     if (!props.topTabNames) {
       setTimeout(async () => {
         const { theme } = await findThemeByName((await getPersistedThemeChoice()) || (await getDefaultTheme()))
-        if (theme.topTabNames) {
+        if (theme.topTabNames && !this._unmounted) {
           this.setState({
             topTabNames: theme.topTabNames
           })
@@ -90,6 +92,7 @@ export default class Tab extends React.PureComponent<Props, State> {
   }
 
   public componentWillUnmount() {
+    this._unmounted = true
     this.removeCommandEvaluationListeners()
   }
 
@@ -105,7 +108,7 @@ export default class Tab extends React.PureComponent<Props, State> {
    */
   private addCommandEvaluationListeners() {
     this.onCommandComplete = (event: Event) => {
-      if (this.props.uuid === event.tab.state.uuid) {
+      if (this.props.uuid === event.tab.state.uuid && !this._unmounted) {
         if (event.execType !== undefined && event.execType !== ExecType.Nested && event.route) {
           // ignore nested, which means one plugin calling another
           this.setState({ processing: false })
@@ -116,7 +119,7 @@ export default class Tab extends React.PureComponent<Props, State> {
     }
 
     this.onCommandStart = (event: Event) => {
-      if (this.props.uuid === event.tab.state.uuid) {
+      if (this.props.uuid === event.tab.state.uuid && !this._unmounted) {
         if (event.execType !== undefined && event.execType !== ExecType.Nested && event.route) {
           // ignore nested, which means one plugin calling another
           // debug('got event', event)
@@ -136,9 +139,11 @@ export default class Tab extends React.PureComponent<Props, State> {
     }
 
     this.onThemeChange = ({ themeModel }: { themeModel: Theme }) => {
-      this.setState({
-        topTabNames: themeModel.topTabNames || 'fixed'
-      })
+      if (!this._unmounted) {
+        this.setState({
+          topTabNames: themeModel.topTabNames || 'fixed'
+        })
+      }
     }
 
     eventBus.onCommandStart(this.props.uuid, this.onCommandStart)