SceneAppPage: preserving tabs

packages/scenes/src/components/SceneApp/SceneAppPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Redirect, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { SceneObjectBase } from '../../core/SceneObjectBase';
 import { SceneComponentProps, SceneObject, isDataRequestEnricher } from '../../core/types';
 import { getUrlSyncManager } from '../../services/UrlSyncManager';
@@ -17,15 +17,36 @@ export class SceneAppPage extends SceneObjectBase<SceneAppPageState> implements
   public static Component = SceneAppPageRenderer;
   private _sceneCache = new Map<string, EmbeddedScene>();
   private _drilldownCache = new Map<string, SceneAppPageLike>();
+  private _lastTabUrl;
 
   public constructor(state: SceneAppPageState) {
     super(state);
-
-    this.addActivationHandler(() => {
-      return () => getUrlSyncManager().cleanUp(this);
-    });
+    this._lastTabUrl = state.preserveTab && 
+                       state.tabs && 
+                       state.tabs.length > 0 ? 
+                       state.tabs[0].state.url : 
+                       undefined
+
+    if (this.state.preserveTab){
+      this.addActivationHandler(() => {
+        this.subscribeToState(() => {
+          if(this.state.tabs){
+            for(const tab of this.state.tabs){
+              if (tab.isActive){
+                this._lastTabUrl = tab.state.url;
+              }
+            }
+          }
+        })
+        return () => getUrlSyncManager().cleanUp(this);
+      });
+    }
+
   }
 
+  public get lastTabUrl(){
+    return this._lastTabUrl;
+  }
   public initializeScene(scene: EmbeddedScene) {
     this.setState({ initializedScene: scene });
     getUrlSyncManager().initSync(this);
@@ -86,23 +107,11 @@ export interface SceneAppPageRendererProps extends SceneComponentProps<SceneAppP
 function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps) {
   const { tabs, drilldowns } = model.useState();
   const routes: React.ReactNode[] = [];
-
   if (tabs && tabs.length > 0) {
+    const firstTab = tabs[0];
     for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
       const tab = tabs[tabIndex];
 
-      // Add first tab as a default route, this makes it possible for the first tab to render with the url of the parent page
-      if (tabIndex === 0) {
-        routes.push(
-          <Route
-            exact={true}
-            key={model.state.url}
-            path={model.state.routePath ?? model.state.url}
-            render={(props) => renderSceneComponentWithRouteProps(tab, props)}
-          ></Route>
-        );
-      }
-
       routes.push(
         <Route
           exact={true}
@@ -125,6 +134,19 @@ function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps)
         }
       }
     }
+    if (model.state.preserveTab && model.lastTabUrl){
+      routes.push(<Redirect from={model.state.url} to={model.lastTabUrl}></Redirect>)
+    }
+    else{ 
+      routes.push(
+        <Route
+          exact={true}
+          key={model.state.url}
+          path={model.state.routePath ?? model.state.url}
+          render={(props) => renderSceneComponentWithRouteProps(firstTab, props)}
+        ></Route>
+      );
+    }
   }
 
   if (drilldowns) {
@@ -139,13 +161,11 @@ function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps)
       );
     }
   }
-
   if (!tabs && isCurrentPageRouteMatch(model, routeProps.match)) {
     return <SceneAppPageView page={model} routeProps={routeProps} />;
   }
 
   routes.push(getFallbackRoute(model, routeProps));
-
   return <Switch>{routes}</Switch>;
 }
 

packages/scenes/src/components/SceneApp/types.ts

@@ -60,6 +60,8 @@ export interface SceneAppPageState extends SceneObjectState {
    * The current initialized scene, this is set by the framework after scene url initialization
    **/
   initializedScene?: SceneObject;
+  // Determines whether tabs should be preserved after deactivation of page
+  preserveTab?: boolean
 
   /**
    * Function that returns a fallback scene app page,