mirror of
https://github.com/gravitational/teleport
synced 2024-10-21 09:44:51 +00:00
Fix the navigation only ever linking to the root cluster (#23567)
* Subscribe navigation items to clusterId updates * Add a test for navigtion item changing correctly * Add license to test * Update license to match others
This commit is contained in:
parent
e93803d9d9
commit
255c97eba9
105
web/packages/teleport/src/Navigation/NavigationItem.test.tsx
Normal file
105
web/packages/teleport/src/Navigation/NavigationItem.test.tsx
Normal file
|
@ -0,0 +1,105 @@
|
|||
/*
|
||||
Copyright 2023 Gravitational, Inc.
|
||||
|
||||
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.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { render, screen } from 'design/utils/testing';
|
||||
|
||||
import { generatePath, Router } from 'react-router';
|
||||
|
||||
import { createMemoryHistory } from 'history';
|
||||
|
||||
import { TeleportFeature } from 'teleport/types';
|
||||
import { NavigationCategory } from 'teleport/Navigation/categories';
|
||||
import { NavigationItem } from 'teleport/Navigation/NavigationItem';
|
||||
import { NavigationItemSize } from 'teleport/Navigation/common';
|
||||
|
||||
class MockFeature implements TeleportFeature {
|
||||
category = NavigationCategory.Resources;
|
||||
|
||||
route = {
|
||||
title: 'Some Feature',
|
||||
path: '/web/cluster/:clusterId/feature',
|
||||
exact: true,
|
||||
component: () => <div>Test!</div>,
|
||||
};
|
||||
|
||||
hasAccess() {
|
||||
return true;
|
||||
}
|
||||
|
||||
navigationItem = {
|
||||
title: 'Some Feature',
|
||||
icon: <div />,
|
||||
exact: true,
|
||||
getLink(clusterId: string) {
|
||||
return generatePath('/web/cluster/:clusterId/feature', { clusterId });
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
describe('navigation items', () => {
|
||||
it('should render the feature link correctly', () => {
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/web/cluster/root/feature'],
|
||||
});
|
||||
|
||||
render(
|
||||
<Router history={history}>
|
||||
<NavigationItem
|
||||
feature={new MockFeature()}
|
||||
size={NavigationItemSize.Large}
|
||||
transitionDelay={100}
|
||||
visible={true}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Some Feature').closest('a')).toHaveAttribute(
|
||||
'href',
|
||||
'/web/cluster/root/feature'
|
||||
);
|
||||
});
|
||||
|
||||
it('should change the feature link to the leaf cluster when navigating to a leaf cluster', () => {
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/web/cluster/root/feature'],
|
||||
});
|
||||
|
||||
render(
|
||||
<Router history={history}>
|
||||
<NavigationItem
|
||||
feature={new MockFeature()}
|
||||
size={NavigationItemSize.Large}
|
||||
transitionDelay={100}
|
||||
visible={true}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Some Feature').closest('a')).toHaveAttribute(
|
||||
'href',
|
||||
'/web/cluster/root/feature'
|
||||
);
|
||||
|
||||
history.push('/web/cluster/leaf/feature');
|
||||
|
||||
expect(screen.getByText('Some Feature').closest('a')).toHaveAttribute(
|
||||
'href',
|
||||
'/web/cluster/leaf/feature'
|
||||
);
|
||||
});
|
||||
});
|
|
@ -21,7 +21,6 @@ import { NavLink } from 'react-router-dom';
|
|||
|
||||
import { ExternalLinkIcon } from 'design/SVGIcon';
|
||||
|
||||
import { useTeleport } from 'teleport';
|
||||
import { getIcon } from 'teleport/Navigation/utils';
|
||||
import { NavigationDropdown } from 'teleport/Navigation/NavigationDropdown';
|
||||
import {
|
||||
|
@ -30,6 +29,8 @@ import {
|
|||
NavigationItemSize,
|
||||
} from 'teleport/Navigation/common';
|
||||
|
||||
import useStickyClusterId from 'teleport/useStickyClusterId';
|
||||
|
||||
import type { TeleportFeature } from 'teleport/types';
|
||||
|
||||
interface NavigationItemProps {
|
||||
|
@ -74,8 +75,7 @@ const ExternalLinkIndicator = styled.div`
|
|||
`;
|
||||
|
||||
export function NavigationItem(props: NavigationItemProps) {
|
||||
const ctx = useTeleport();
|
||||
const clusterId = ctx.storeUser.getClusterId();
|
||||
const { clusterId } = useStickyClusterId();
|
||||
|
||||
const { navigationItem, route } = props.feature;
|
||||
|
||||
|
|
Loading…
Reference in a new issue