diff --git a/.changeset/perfect-donkeys-cry.md b/.changeset/perfect-donkeys-cry.md new file mode 100644 index 0000000000..744dc19d64 --- /dev/null +++ b/.changeset/perfect-donkeys-cry.md @@ -0,0 +1,5 @@ +--- +'@backstage/core-components': patch +--- + +Added `exact` prop to `SidebarSubmenuItem` which causes it to only highlight if the current location is an exact match. diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index 9f4aca1dcf..df34abdd03 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -1087,6 +1087,7 @@ export type SidebarSubmenuItemProps = { to?: string; icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; + exact?: boolean; }; // @public diff --git a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx index b08647d335..d05ee23636 100644 --- a/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx +++ b/packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx @@ -130,6 +130,7 @@ export type SidebarSubmenuItemProps = { to?: string; icon?: IconComponent; dropdownItems?: SidebarSubmenuItemDropdownItem[]; + exact?: boolean; }; /** @@ -138,7 +139,7 @@ export type SidebarSubmenuItemProps = { * @public */ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { - const { title, subtitle, to, icon: Icon, dropdownItems } = props; + const { title, subtitle, to, icon: Icon, dropdownItems, exact } = props; const classes = useStyles(); const { setIsHoveredOn } = useContext(SidebarItemWithSubmenuContext); const closeSubmenu = () => { @@ -146,7 +147,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { }; const toLocation = useResolvedPath(to ?? ''); const currentLocation = useLocation(); - let isActive = isLocationMatch(currentLocation, toLocation); + let isActive = isLocationMatch(currentLocation, toLocation, exact); const [showDropDown, setShowDropDown] = useState(false); const handleClickDropdown = () => { @@ -155,7 +156,7 @@ export const SidebarSubmenuItem = (props: SidebarSubmenuItemProps) => { if (dropdownItems !== undefined) { dropdownItems.some(item => { const resolvedPath = resolvePath(item.to); - isActive = isLocationMatch(currentLocation, resolvedPath); + isActive = isLocationMatch(currentLocation, resolvedPath, exact); return isActive; }); return ( diff --git a/packages/core-components/src/layout/Sidebar/utils.test.ts b/packages/core-components/src/layout/Sidebar/utils.test.ts index b08dcda0fc..976108a63d 100644 --- a/packages/core-components/src/layout/Sidebar/utils.test.ts +++ b/packages/core-components/src/layout/Sidebar/utils.test.ts @@ -95,4 +95,30 @@ describe('isLocationMatching', () => { toLocation = { pathname: '/catalog', search: '', hash: '' }; expect(isLocationMatch(currentLocation, toLocation)).toBe(true); }); + + describe('exact matching', () => { + it('return false when target query parameters are subset of current location query parameters', async () => { + currentLocation = { + pathname: '/catalog', + search: '?x=foo&y=bar', + state: null, + hash: '', + key: '', + }; + toLocation = { pathname: '/catalog', search: '?x=foo', hash: '' }; + expect(isLocationMatch(currentLocation, toLocation, true)).toBe(false); + }); + + it('return true when target query parameters are exact match with current location query parameters', async () => { + currentLocation = { + pathname: '/catalog', + search: '?x=foo&y=bar', + state: null, + hash: '', + key: '', + }; + toLocation = { pathname: '/catalog', search: '?y=bar&x=foo', hash: '' }; + expect(isLocationMatch(currentLocation, toLocation, true)).toBe(true); + }); + }); }); diff --git a/packages/core-components/src/layout/Sidebar/utils.ts b/packages/core-components/src/layout/Sidebar/utils.ts index 1afebe796d..5dba73f4cd 100644 --- a/packages/core-components/src/layout/Sidebar/utils.ts +++ b/packages/core-components/src/layout/Sidebar/utils.ts @@ -18,7 +18,11 @@ import { Location, Path } from 'history'; import { isEqual, isMatch } from 'lodash'; import qs from 'qs'; -export function isLocationMatch(currentLocation: Location, toLocation: Path) { +export function isLocationMatch( + currentLocation: Location, + toLocation: Path, + exact: boolean = false, +) { const toDecodedSearch = new URLSearchParams(toLocation.search).toString(); const toQueryParameters = qs.parse(toDecodedSearch); @@ -27,9 +31,11 @@ export function isLocationMatch(currentLocation: Location, toLocation: Path) { ).toString(); const currentQueryParameters = qs.parse(currentDecodedSearch); + const queryStringMatcher = exact ? isEqual : isMatch; + const matching = isEqual(toLocation.pathname, currentLocation.pathname) && - isMatch(currentQueryParameters, toQueryParameters); + queryStringMatcher(currentQueryParameters, toQueryParameters); return matching; }