-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Security Solutions] Fix Serverless page title (#163911)
## Summary Refactor useUpdateBrowserTitle to use pathname instead of SpyRoute ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
- Loading branch information
Showing
3 changed files
with
146 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 83 additions & 0 deletions
83
x-pack/plugins/security_solution/public/common/links/use_find_app_links_by_path.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import { renderHook } from '@testing-library/react-hooks'; | ||
import { APP_PATH, SecurityPageName } from '../../../common'; | ||
import { useFindAppLinksByPath } from './use_find_app_links_by_path'; | ||
|
||
const mockedGetAppUrl = jest | ||
.fn() | ||
.mockImplementation(({ deepLinkId }) => `${APP_PATH}/${deepLinkId}`); | ||
const mockedUseLocation = jest.fn().mockReturnValue({ pathname: '/' }); | ||
|
||
jest.mock('../lib/kibana', () => ({ | ||
useAppUrl: () => ({ | ||
getAppUrl: mockedGetAppUrl, | ||
}), | ||
useBasePath: () => '', | ||
})); | ||
|
||
jest.mock('react-router-dom', () => { | ||
const actual = jest.requireActual('react-router-dom'); | ||
return { | ||
...actual, | ||
useLocation: () => mockedUseLocation(), | ||
}; | ||
}); | ||
|
||
describe('useFindAppLinksByPath', () => { | ||
it('returns null when navLinks is undefined', () => { | ||
const { result } = renderHook(() => useFindAppLinksByPath(undefined)); | ||
expect(result.current).toBe(null); | ||
}); | ||
it('returns null when navLinks is empty', () => { | ||
const { result } = renderHook(() => useFindAppLinksByPath([])); | ||
expect(result.current).toBe(null); | ||
}); | ||
|
||
it('returns null when navLinks is not empty but does not match the current pathname', () => { | ||
const { result } = renderHook(() => | ||
useFindAppLinksByPath([{ id: SecurityPageName.hostsAnomalies, title: 'no page' }]) | ||
); | ||
expect(result.current).toBe(null); | ||
}); | ||
|
||
it('returns nav item when it matches the current pathname', () => { | ||
const navItem = { id: SecurityPageName.users, title: 'Test User page' }; | ||
mockedUseLocation.mockReturnValue({ pathname: '/users' }); | ||
const { result } = renderHook(() => useFindAppLinksByPath([navItem])); | ||
expect(result.current).toBe(navItem); | ||
}); | ||
|
||
it('returns nav item when the pathname starts with the nav item url', () => { | ||
const navItem = { id: SecurityPageName.users, title: 'Test User page' }; | ||
mockedUseLocation.mockReturnValue({ pathname: '/users/events' }); | ||
const { result } = renderHook(() => useFindAppLinksByPath([navItem])); | ||
expect(result.current).toBe(navItem); | ||
}); | ||
|
||
it('returns leaf nav item when it matches the current pathname', () => { | ||
const leafNavItem = { id: SecurityPageName.usersEvents, title: 'Test User Events page' }; | ||
const navItem = { | ||
id: SecurityPageName.users, | ||
title: 'Test User page', | ||
links: [leafNavItem], | ||
}; | ||
mockedUseLocation.mockReturnValue({ pathname: '/users-events' }); | ||
const { result } = renderHook(() => useFindAppLinksByPath([navItem])); | ||
expect(result.current).toBe(leafNavItem); | ||
}); | ||
|
||
it('should not confuse pages with similar names (users and users-risk)', () => { | ||
const usersNavItem = { id: SecurityPageName.users, title: 'Test User page' }; | ||
const usersRiskNavItem = { id: SecurityPageName.usersRisk, title: 'Test User Risk page' }; | ||
|
||
mockedUseLocation.mockReturnValue({ pathname: '/users-risk' }); | ||
const { result } = renderHook(() => useFindAppLinksByPath([usersNavItem, usersRiskNavItem])); | ||
expect(result.current).toBe(usersRiskNavItem); | ||
}); | ||
}); |
58 changes: 58 additions & 0 deletions
58
x-pack/plugins/security_solution/public/common/links/use_find_app_links_by_path.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/* | ||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
* or more contributor license agreements. Licensed under the Elastic License | ||
* 2.0; you may not use this file except in compliance with the Elastic License | ||
* 2.0. | ||
*/ | ||
|
||
import { useCallback, useMemo } from 'react'; | ||
import { matchPath, useLocation } from 'react-router-dom'; | ||
import { APP_PATH } from '../../../common'; | ||
import { useBasePath, useAppUrl } from '../lib/kibana'; | ||
import type { NavigationLink } from './types'; | ||
|
||
/** | ||
* It returns the first nav item that matches the current pathname. | ||
* It compares the pathname and nav item using `startsWith`, | ||
* meaning that the pathname: `/hosts/anomalies` matches the nav item URL `/hosts`. | ||
*/ | ||
export const useFindAppLinksByPath = (navLinks: NavigationLink[] | undefined) => { | ||
const { getAppUrl } = useAppUrl(); | ||
const basePath = useBasePath(); | ||
const { pathname } = useLocation(); | ||
|
||
const isCurrentPathItem = useCallback( | ||
(navItem: NavigationLink) => { | ||
const appUrl = getAppUrl({ deepLinkId: navItem.id }); | ||
return !!matchPath(`${basePath}${APP_PATH}${pathname}`, { path: appUrl, strict: false }); | ||
}, | ||
[basePath, getAppUrl, pathname] | ||
); | ||
|
||
return useMemo(() => findNavItem(isCurrentPathItem, navLinks), [navLinks, isCurrentPathItem]); | ||
}; | ||
|
||
/** | ||
* DFS to find the first nav item that matches the current pathname. | ||
* Case the leaf node does not match the pathname; we return the nearest parent node that does. | ||
* | ||
* @param predicate calls predicate once for each element of the tree, until it finds one where predicate returns true. | ||
*/ | ||
const findNavItem = ( | ||
predicate: (navItem: NavigationLink) => boolean, | ||
navItems: NavigationLink[] | undefined | ||
): NavigationLink | null => { | ||
if (!navItems) return null; | ||
|
||
for (const navItem of navItems) { | ||
if (navItem.links?.length) { | ||
const foundItem = findNavItem(predicate, navItem.links); | ||
if (foundItem) return foundItem; | ||
} | ||
|
||
if (predicate(navItem)) { | ||
return navItem; | ||
} | ||
} | ||
return null; | ||
}; |