diff --git a/hub/app/javascript/components/feedback-icon/index.tsx b/hub/app/javascript/components/feedback-icon/index.tsx new file mode 100644 index 00000000..50873ac4 --- /dev/null +++ b/hub/app/javascript/components/feedback-icon/index.tsx @@ -0,0 +1,19 @@ +export function FeedbackIcon({ size = 16 }: { size?: number }) { + return ( + + + + + ) +} diff --git a/hub/app/javascript/components/repository-navigation-item/index.tsx b/hub/app/javascript/components/repository-navigation-item/index.tsx index 1e445fc2..2c6ed956 100644 --- a/hub/app/javascript/components/repository-navigation-item/index.tsx +++ b/hub/app/javascript/components/repository-navigation-item/index.tsx @@ -11,10 +11,17 @@ type RepositoryNavigationItemProps = { | { href: string selected?: boolean + external?: boolean onClick?: MouseEventHandler expanded?: never } - | { href?: never; selected?: never; onClick: () => void; expanded: boolean } + | { + href?: never + selected?: never + external?: never + onClick: () => void + expanded: boolean + } ) /** Renders a sidebar destination or a control with the same row treatment. */ @@ -22,6 +29,7 @@ export function RepositoryNavigationItem({ ariaLabel, count, expanded, + external = false, href, icon: Icon, label, @@ -45,12 +53,14 @@ export function RepositoryNavigationItem({ return href !== undefined ? ( 0 ? "true" : undefined} data-active={selected ? "true" : undefined} aria-current={selected ? "page" : undefined} aria-label={ariaLabel} + target={external ? "_blank" : undefined} + rel={external ? "noopener noreferrer" : undefined} onClick={onClick} > {content} diff --git a/hub/app/javascript/components/workspace-navigation/index.tsx b/hub/app/javascript/components/workspace-navigation/index.tsx index 57a08866..cef1391a 100644 --- a/hub/app/javascript/components/workspace-navigation/index.tsx +++ b/hub/app/javascript/components/workspace-navigation/index.tsx @@ -3,6 +3,7 @@ import type { ReactNode } from "react" import { SidebarCollapseIcon, SidebarExpandIcon } from "@primer/octicons-react" import { Tooltip } from "@primer/react-brand" +import { FeedbackIcon } from "@components/feedback-icon" import { RepositoryNavigationItem } from "@components/repository-navigation-item" import { RepositoryUserMenu } from "@components/repository-user-menu" @@ -36,6 +37,14 @@ export function WorkspaceNavigation({ onClick={() => onCollapsedChange(!collapsed)} /> ) + const feedbackLink = ( + + ) return (