ref(ui): Use exported link props, interface props (#33473)

static/app/components/breadcrumbs.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import {LocationDescriptor} from 'history';
 
 import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 import {IconChevron} from 'sentry/icons';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
@@ -18,7 +18,7 @@ const BreadcrumbList = styled('div')`
   padding: ${space(1)} 0;
 `;
 
-export type Crumb = {
+export interface Crumb {
   /**
    * Label of the crumb
    */
@@ -39,10 +39,10 @@ export type Crumb = {
   /**
    * Link of the crumb
    */
-  to?: React.ComponentProps<typeof Link>['to'] | null;
-};
+  to?: LinkProps['to'] | null;
+}
 
-export type CrumbDropdown = {
+export interface CrumbDropdown {
   /**
    * Items of the crumb dropdown
    */
@@ -57,7 +57,7 @@ export type CrumbDropdown = {
    * Callback function for when an item is selected
    */
   onSelect: BreadcrumbDropdownProps['onSelect'];
-};
+}
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -147,11 +147,11 @@ const getBreadcrumbListItemStyles = (p: {theme: Theme}) => `
   }
 `;
 
-type BreadcrumbLinkProps = {
-  to: React.ComponentProps<typeof Link>['to'];
+interface BreadcrumbLinkProps {
+  to: LinkProps['to'];
   children?: React.ReactNode;
   preservePageFilters?: boolean;
-};
+}
 
 const BreadcrumbLink = styled(
   ({preservePageFilters, to, ...props}: BreadcrumbLinkProps) =>

static/app/components/globalSelectionLink.tsx

@@ -2,10 +2,10 @@ import {withRouter, WithRouterProps} from 'react-router';
 import {LocationDescriptor} from 'history';
 import * as qs from 'query-string';
 
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 import {extractSelectionParameters} from 'sentry/components/organizations/pageFilters/utils';
 
-type Props = WithRouterProps & {
+interface Props extends WithRouterProps {
   /**
    * Location that is being linked to
    */
@@ -18,12 +18,12 @@ type Props = WithRouterProps & {
   /**
    * Click event (not for navigation)
    */
-  onClick?: React.ComponentProps<typeof Link>['onClick'];
+  onClick?: LinkProps['onClick'];
   /**
    * Inline styles
    */
   style?: React.CSSProperties;
-};
+}
 
 /**
  * A modified link used for navigating between organization level pages that

static/app/components/idBadge/memberBadge.tsx

@@ -3,12 +3,12 @@ import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
 import UserAvatar from 'sentry/components/avatar/userAvatar';
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 import overflowEllipsis from 'sentry/styles/overflowEllipsis';
 import space from 'sentry/styles/space';
 import {AvatarUser, Member} from 'sentry/types';
 
-type Props = {
+interface Props {
   member: Member;
   avatarSize?: UserAvatar['props']['size'];
   className?: string;
@@ -17,7 +17,7 @@ type Props = {
   hideEmail?: boolean;
   orgId?: string;
   useLink?: boolean;
-};
+}
 
 function getMemberUser(member: Member): AvatarUser {
   if (member.user) {
@@ -89,10 +89,11 @@ const StyledEmail = styled('div')`
   ${overflowEllipsis};
 `;
 
-type NameProps = {
+interface NameProps {
   hideEmail: boolean;
+  to: LinkProps['to'];
   useLink: boolean;
-} & Pick<React.ComponentProps<typeof Link>, 'to'>;
+}
 
 const StyledName = styled(({useLink, to, ...props}: NameProps) => {
   const forwardProps = omit(props, 'hideEmail');

static/app/components/idBadge/projectBadge.tsx

@@ -3,14 +3,15 @@ import styled from '@emotion/styled';
 
 import BadgeDisplayName from 'sentry/components/idBadge/badgeDisplayName';
 import BaseBadge from 'sentry/components/idBadge/baseBadge';
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 import {Organization} from 'sentry/types';
 import withOrganization from 'sentry/utils/withOrganization';
 
 type BaseBadgeProps = React.ComponentProps<typeof BaseBadge>;
 type Project = NonNullable<BaseBadgeProps['project']>;
 
-type Props = Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>> & {
+interface Props
+  extends Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>> {
   project: Project;
   className?: string;
   /**
@@ -25,8 +26,8 @@ type Props = Partial<Omit<BaseBadgeProps, 'project' | 'organization' | 'team'>>
   /**
    * Overides where the project badge links
    */
-  to?: React.ComponentProps<typeof Link>['to'];
-};
+  to?: LinkProps['to'];
+}
 
 const ProjectBadge = ({
   project,

static/app/components/menuItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 import omit from 'lodash/omit';
 
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 import space from 'sentry/styles/space';
 import {callIfFunction} from 'sentry/utils/callIfFunction';
 import {Theme} from 'sentry/utils/theme';
@@ -62,7 +62,7 @@ type MenuItemProps = {
   /**
    * A router target destination
    */
-  to?: React.ComponentProps<typeof Link>['to'];
+  to?: LinkProps['to'];
 
   /**
    * Renders a bottom border (excludes the last item)

static/app/components/shortId.tsx

@@ -2,9 +2,9 @@ import * as React from 'react';
 import styled from '@emotion/styled';
 
 import AutoSelectText from 'sentry/components/autoSelectText';
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 
-type Props = {
+interface Props {
   shortId: string;
   avatar?: React.ReactNode;
   className?: string;
@@ -12,8 +12,8 @@ type Props = {
   /**
    * A router target destination
    */
-  to?: React.ComponentProps<typeof Link>['to'];
-};
+  to?: LinkProps['to'];
+}
 
 function ShortId({shortId, avatar, onClick, to, className}: Props) {
   if (!shortId) {

static/app/components/tag.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import Button from 'sentry/components/button';
 import ExternalLink from 'sentry/components/links/externalLink';
-import Link from 'sentry/components/links/link';
+import Link, {LinkProps} from 'sentry/components/links/link';
 import Tooltip from 'sentry/components/tooltip';
 import {IconClose, IconOpen} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -14,7 +14,7 @@ import theme, {Color, Theme} from 'sentry/utils/theme';
 
 const TAG_HEIGHT = '20px';
 
-type Props = React.HTMLAttributes<HTMLSpanElement> & {
+interface Props extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * Makes the tag clickable. Use for external links.
    * If no icon is passed, it defaults to IconOpen (can be removed by passing icon={null})
@@ -40,7 +40,7 @@ type Props = React.HTMLAttributes<HTMLSpanElement> & {
    * Makes the tag clickable. Use for internal links handled by react router.
    * If no icon is passed, it defaults to IconOpen (can be removed by passing icon={null})
    */
-  to?: React.ComponentProps<typeof Link>['to'];
+  to?: LinkProps['to'];
   /**
    * Text to show up on a hover.
    */
@@ -49,7 +49,7 @@ type Props = React.HTMLAttributes<HTMLSpanElement> & {
    * Dictates color scheme of the tag.
    */
   type?: keyof Theme['tag'];
-};
+}
 
 function Tag({
   type = 'default',

static/app/views/alerts/incidentRules/incidentRulePresets.tsx

@@ -1,11 +1,11 @@
-import Link from 'sentry/components/links/link';
+import type {LinkProps} from 'sentry/components/links/link';
 import {t} from 'sentry/locale';
 import {Project} from 'sentry/types';
 import {DisplayModes} from 'sentry/utils/discover/types';
 import {IncidentRule} from 'sentry/views/alerts/incidentRules/types';
 import {getIncidentRuleDiscoverUrl} from 'sentry/views/alerts/utils/getIncidentRuleDiscoverUrl';
 
-type PresetCta = {
+interface PresetCta {
   /**
    * The CTA text
    */
@@ -13,14 +13,14 @@ type PresetCta = {
   /**
    * The location to direct to upon clicking the CTA.
    */
-  to: React.ComponentProps<typeof Link>['to'];
+  to: LinkProps['to'];
   /**
    * The tooltip title for the CTA button, may be empty.
    */
   title?: string;
-};
+}
 
-type PresetCtaOpts = {
+interface PresetCtaOpts {
   orgSlug: string;
   projects: Project[];
   end?: string;
@@ -28,7 +28,7 @@ type PresetCtaOpts = {
   fields?: string[];
   rule?: IncidentRule;
   start?: string;
-};
+}
 
 /**
  * Get the CTA used for alert rules that do not have a preset

static/app/views/alerts/incidentRules/presets.tsx

@@ -1,4 +1,4 @@
-import Link from 'sentry/components/links/link';
+import type {LinkProps} from 'sentry/components/links/link';
 import {t} from 'sentry/locale';
 import {Project} from 'sentry/types';
 import {DisplayModes} from 'sentry/utils/discover/types';
@@ -18,7 +18,7 @@ type PresetCta = {
   /**
    * The location to direct to upon clicking the CTA.
    */
-  to: React.ComponentProps<typeof Link>['to'];
+  to: LinkProps['to'];
   /**
    * The tooltip title for the CTA button, may be empty.
    */

static/app/views/alerts/rules/details/relatedIssuesNotAvailable.tsx

@@ -4,13 +4,13 @@ import styled from '@emotion/styled';
 import Feature from 'sentry/components/acl/feature';
 import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
-import Link from 'sentry/components/links/link';
+import type {LinkProps} from 'sentry/components/links/link';
 import {Panel} from 'sentry/components/panels';
 
-type Props = {
+interface Props {
   buttonText: string;
-  buttonTo: React.ComponentProps<typeof Link>['to'];
-};
+  buttonTo: LinkProps['to'];
+}
 
 export const RELATED_ISSUES_BOOLEAN_QUERY_ERROR =
   'Error parsing search query: Boolean statements containing "OR" or "AND" are not supported in this search';