From 6fba17b460c6475a8f138d92de87e39806d53fc9 Mon Sep 17 00:00:00 2001 From: xforman2 Date: Mon, 5 Feb 2024 09:41:11 +0100 Subject: [PATCH 1/2] implemented preserving tabs logic --- .../src/components/SceneApp/SceneAppPage.tsx | 22 ++++++++++++++----- .../scenes/src/components/SceneApp/types.ts | 2 ++ 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/scenes/src/components/SceneApp/SceneAppPage.tsx b/packages/scenes/src/components/SceneApp/SceneAppPage.tsx index f599b74f8..51c288378 100644 --- a/packages/scenes/src/components/SceneApp/SceneAppPage.tsx +++ b/packages/scenes/src/components/SceneApp/SceneAppPage.tsx @@ -17,15 +17,28 @@ export class SceneAppPage extends SceneObjectBase implements public static Component = SceneAppPageRenderer; private _sceneCache = new Map(); private _drilldownCache = new Map(); + private _lastTabIndex = 0 public constructor(state: SceneAppPageState) { super(state); - + if (this.state.preserveTab) this.addActivationHandler(() => { + this.subscribeToState(() => { + if(this.state.tabs) + for(const [index, tab] of this.state.tabs.entries()){ + if (tab.isActive){ + this._lastTabIndex = index + } + } + + }) return () => getUrlSyncManager().cleanUp(this); }); } + public get lastTabIndex(){ + return this._lastTabIndex; + } public initializeScene(scene: EmbeddedScene) { this.setState({ initializedScene: scene }); getUrlSyncManager().initSync(this); @@ -92,7 +105,7 @@ function SceneAppPageRenderer({ model, routeProps }: SceneAppPageRendererProps) 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) { + if (tabIndex === model.lastTabIndex) { routes.push( ; } routes.push(getFallbackRoute(model, routeProps)); - return {routes}; } @@ -174,7 +185,8 @@ function isCurrentPageRouteMatch(page: SceneAppPage, match: SceneRouteMatch) { // check if we are a tab and the first tab, then we should also render on the parent url if ( page.parent instanceof SceneAppPage && - page.parent.state.tabs![0] === page && + page.parent.lastTabIndex !== undefined && + page.parent.state.tabs![page.parent.lastTabIndex] === page && page.parent.state.url === match.url ) { return true; diff --git a/packages/scenes/src/components/SceneApp/types.ts b/packages/scenes/src/components/SceneApp/types.ts index b1d29e9ee..81676ae47 100644 --- a/packages/scenes/src/components/SceneApp/types.ts +++ b/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, From 49fb8b18416616b7ff8d1d79d94481f563f15530 Mon Sep 17 00:00:00 2001 From: xforman2 Date: Wed, 7 Feb 2024 14:15:29 +0100 Subject: [PATCH 2/2] tried with redirect --- .../src/components/SceneApp/SceneAppPage.tsx | 70 +++++++++++-------- 1 file changed, 39 insertions(+), 31 deletions(-) diff --git a/packages/scenes/src/components/SceneApp/SceneAppPage.tsx b/packages/scenes/src/components/SceneApp/SceneAppPage.tsx index 51c288378..f1248401f 100644 --- a/packages/scenes/src/components/SceneApp/SceneAppPage.tsx +++ b/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,27 +17,35 @@ export class SceneAppPage extends SceneObjectBase implements public static Component = SceneAppPageRenderer; private _sceneCache = new Map(); private _drilldownCache = new Map(); - private _lastTabIndex = 0 + private _lastTabUrl; public constructor(state: SceneAppPageState) { super(state); - if (this.state.preserveTab) - this.addActivationHandler(() => { - this.subscribeToState(() => { - if(this.state.tabs) - for(const [index, tab] of this.state.tabs.entries()){ - if (tab.isActive){ - this._lastTabIndex = index + 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); - }); + } + }) + return () => getUrlSyncManager().cleanUp(this); + }); + } + } - public get lastTabIndex(){ - return this._lastTabIndex; + public get lastTabUrl(){ + return this._lastTabUrl; } public initializeScene(scene: EmbeddedScene) { this.setState({ initializedScene: scene }); @@ -99,23 +107,11 @@ export interface SceneAppPageRendererProps extends SceneComponentProps 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 === model.lastTabIndex) { - routes.push( - renderSceneComponentWithRouteProps(tab, props)} - > - ); - } - routes.push( ) + } + else{ + routes.push( + renderSceneComponentWithRouteProps(firstTab, props)} + > + ); + } } if (drilldowns) { @@ -185,8 +194,7 @@ function isCurrentPageRouteMatch(page: SceneAppPage, match: SceneRouteMatch) { // check if we are a tab and the first tab, then we should also render on the parent url if ( page.parent instanceof SceneAppPage && - page.parent.lastTabIndex !== undefined && - page.parent.state.tabs![page.parent.lastTabIndex] === page && + page.parent.state.tabs![0] === page && page.parent.state.url === match.url ) { return true;