Data Connections: make sub-routes work (#50754)

* fix(Data Connections): make sub-routes work

* test(Data Connections): add basic tests for sub-urls
This commit is contained in:
Levente Balogh 2022-06-14 11:10:20 +02:00 committed by GitHub
parent 929fcd5910
commit 2a72dff356
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 5 deletions

View File

@ -8,7 +8,7 @@ import { configureStore } from 'app/store/configureStore';
import DataConnectionsPage from './DataConnectionsPage';
import navIndex from './__mocks__/store.navIndex.mock';
import { ROUTE_BASE_ID } from './constants';
import { ROUTE_BASE_ID, ROUTES } from './constants';
const renderPage = (path = `/${ROUTE_BASE_ID}`): RenderResult => {
// @ts-ignore
@ -39,4 +39,12 @@ describe('Data Connections Page', () => {
expect(await screen.findByText('The list of data sources is under development.')).toBeVisible();
});
test('renders the correct tab even if accessing it with a "sub-url"', async () => {
renderPage(`${ROUTES.Plugins}/foo`);
// Check if it still renders the plugins tab
expect(await screen.findByText('The list of plugins is under development')).toBeVisible();
expect(screen.queryByText('The list of data sources is under development.')).not.toBeInTheDocument();
});
});

View File

@ -17,9 +17,9 @@ export default function DataConnectionsPage(): React.ReactElement | null {
<Page navModel={navModel}>
<Page.Contents>
<Switch>
<Route exact path={ROUTES.Plugins} component={Plugins} />
<Route exact path={ROUTES.CloudIntegrations} component={CloudIntegrations} />
<Route exact path={ROUTES.RecordedQueries} component={RecordedQueries} />
<Route path={ROUTES.Plugins} component={Plugins} />
<Route path={ROUTES.CloudIntegrations} component={CloudIntegrations} />
<Route path={ROUTES.RecordedQueries} component={RecordedQueries} />
{/* Default page */}
<Route component={DataSources} />

View File

@ -16,7 +16,7 @@ export const useNavModel = () => {
main.children = main.children?.map((item) => ({
...item,
active: item.url === pathname,
active: pathname.startsWith(item.url || ''),
}));
return {