diff --git a/.changeset/all-camels-agree.md b/.changeset/all-camels-agree.md new file mode 100644 index 0000000000..44d8a4f2c9 --- /dev/null +++ b/.changeset/all-camels-agree.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fix broken external links in Backstage UI Header component. diff --git a/packages/ui/src/components/Header/HeaderToolbar.tsx b/packages/ui/src/components/Header/HeaderToolbar.tsx index a1754c61f4..373f3462be 100644 --- a/packages/ui/src/components/Header/HeaderToolbar.tsx +++ b/packages/ui/src/components/Header/HeaderToolbar.tsx @@ -14,13 +14,12 @@ * limitations under the License. */ -import { Link, RouterProvider } from 'react-aria-components'; +import { Link } from 'react-aria-components'; import { useStyles } from '../../hooks/useStyles'; import { useRef } from 'react'; import { RiShapesLine } from '@remixicon/react'; import type { HeaderToolbarProps } from './types'; import { Text } from '../Text'; -import { useNavigate, useHref } from 'react-router-dom'; import styles from './Header.module.css'; import clsx from 'clsx'; @@ -33,7 +32,6 @@ export const HeaderToolbar = (props: HeaderToolbarProps) => { const { classNames, cleanedProps } = useStyles('Header', props); const { className, icon, title, titleLink, customActions, hasTabs } = cleanedProps; - let navigate = useNavigate(); // Refs for collision detection const toolbarWrapperRef = useRef(null); @@ -52,63 +50,61 @@ export const HeaderToolbar = (props: HeaderToolbarProps) => { ); return ( - +
-
+ {titleLink ? ( + + {titleContent} + + ) : ( +
+ {titleContent} +
)} - ref={toolbarContentRef} - > - - {titleLink ? ( - - {titleContent} - - ) : ( -
- {titleContent} -
- )} -
-
-
- {customActions} -
+ +
+
+ {customActions}
- +
); };