self-hosted/teleport
self-hosted/teleport
1
0
Fork 0
mirror of https://github.com/gravitational/teleport synced 2024-10-21 09:44:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the navigation not listening to the back button (#21207)

Browse source 
* Fix the navigation not listening to the back button

* Update web/packages/teleport/src/Navigation/Navigation.tsx

Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>

* Allow for history.Location and Location types to be used

* Run prettier

---------

Co-authored-by: Rafał Cieślak <rafal.cieslak@goteleport.com>
This commit is contained in:
Ryan Clark 2023-02-03 17:12:39 +00:00 committed by GitHub
parent a604a2bc1d
commit 3c464d658a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
web/packages/teleport/src/Navigation/Navigation.tsx
View file

@ -33,7 +33,7 @@ import { NavigationCategoryContainer } from 'teleport/Navigation/NavigationCateg
import logo from './logo.png';
import type { Location } from 'history';
import type * as history from 'history';
import type { TeleportFeature } from 'teleport/types';
@ -77,7 +77,7 @@ export function getFirstRouteForCategory(
function getCategoryForRoute(
features: TeleportFeature[],
route: Location<unknown>
route: history.Location<unknown> | Location
) {
const feature = features
.filter(feature => Boolean(feature.route))
@ -105,21 +105,44 @@ export function Navigation() {
NavigationCategory.Resources
);
const [previousRoute, setPreviousRoute] = useState('');
const [previousRoute, setPreviousRoute] = useState<{
[category: string]: string;
}>({});
useEffect(() => {
return history.listen(next => {
const handleLocationChange = useCallback(
(next: history.Location<unknown> | Location) => {
const previousPathName = location.pathname;
const category = getCategoryForRoute(features, next);
if (category && category !== view) {
setPreviousRoute(previousPathName);
setPreviousRoute(previous => ({
...previous,
[view]: previousPathName,
}));
setView(category);
}
});
},
[location, view]
);
useEffect(() => {
return history.listen(handleLocationChange);
}, [history, location.pathname, features, view]);
const handlePopState = useCallback(
(event: PopStateEvent) => {
handleLocationChange((event.currentTarget as Window).location);
},
[view]
);
useEffect(() => {
window.addEventListener('popstate', handlePopState);
return () => window.removeEventListener('popstate', handlePopState);
}, [handlePopState]);
const handleCategoryChange = useCallback(
(category: NavigationCategory) => {
if (view === category) {
@ -127,10 +150,10 @@ export function Navigation() {
}
history.push(
previousRoute || getFirstRouteForCategory(features, category)
previousRoute[category] || getFirstRouteForCategory(features, category)
);
},
[view, location.pathname, previousRoute]
[view, previousRoute]
);
const categories = NAVIGATION_CATEGORIES.map((category, index) => (