ref(ui): Convert alertLink component to function, use RTL (#28258)

docs-ui/stories/components/alertLink.stories.js

@@ -3,6 +3,7 @@ import {IconDocs, IconGeneric, IconMail, IconStack, IconStar} from 'app/icons';
 
 export default {
   title: 'Components/Alerts/Alert Links',
+  component: AlertLink,
 };
 
 export const Default = () => [

static/app/components/alertLink.tsx

@@ -16,6 +16,7 @@ type OtherProps = {
   ['data-test-id']?: string;
   icon?: string | React.ReactNode;
   onClick?: (e: React.MouseEvent) => void;
+  children?: React.ReactNode;
 };
 
 type DefaultProps = {
@@ -26,53 +27,42 @@ type DefaultProps = {
   href?: string;
 };
 
-type Props = OtherProps & DefaultProps & Partial<Pick<LinkProps, 'to'>>;
+type Props = OtherProps & Partial<DefaultProps> & Partial<Pick<LinkProps, 'to'>>;
 
 type StyledLinkProps = DefaultProps &
   Partial<Pick<LinkProps, 'to'>> &
   Omit<LinkProps, 'to' | 'size'>;
 
-class AlertLink extends React.Component<Props> {
-  static defaultProps: DefaultProps = {
-    priority: 'warning',
-    size: 'normal',
-    withoutMarginBottom: false,
-    openInNewTab: false,
-  };
-
-  render() {
-    const {
-      size,
-      priority,
-      icon,
-      children,
-      onClick,
-      withoutMarginBottom,
-      openInNewTab,
-      to,
-      href,
-      ['data-test-id']: dataTestId,
-    } = this.props;
-
-    return (
-      <StyledLink
-        data-test-id={dataTestId}
-        to={to}
-        href={href}
-        onClick={onClick}
-        size={size}
-        priority={priority}
-        withoutMarginBottom={withoutMarginBottom}
-        openInNewTab={openInNewTab}
-      >
-        {icon && <IconWrapper>{icon}</IconWrapper>}
-        <AlertLinkText>{children}</AlertLinkText>
-        <IconLink>
-          <IconChevron direction="right" />
-        </IconLink>
-      </StyledLink>
-    );
-  }
+function AlertLink({
+  size = 'normal',
+  priority = 'warning',
+  icon,
+  children,
+  onClick,
+  withoutMarginBottom = false,
+  openInNewTab = false,
+  to,
+  href,
+  ['data-test-id']: dataTestId,
+}: Props) {
+  return (
+    <StyledLink
+      data-test-id={dataTestId}
+      to={to}
+      href={href}
+      onClick={onClick}
+      size={size}
+      priority={priority}
+      withoutMarginBottom={withoutMarginBottom}
+      openInNewTab={openInNewTab}
+    >
+      {icon && <IconWrapper>{icon}</IconWrapper>}
+      <AlertLinkText>{children}</AlertLinkText>
+      <IconLink>
+        <IconChevron direction="right" />
+      </IconLink>
+    </StyledLink>
+  );
 }
 
 export default AlertLink;

tests/js/spec/components/alertLink.spec.jsx → tests/js/spec/components/alertLink.spec.tsx

@@ -1,24 +1,24 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
+import {mountWithTheme} from 'sentry-test/reactTestingLibrary';
 
 import AlertLink from 'app/components/alertLink';
 import {IconMail} from 'app/icons';
 
 describe('AlertLink', function () {
   it('renders', function () {
-    const wrapper = mountWithTheme(
+    const {container} = mountWithTheme(
       <AlertLink to="/settings/accounts/notifications">
         This is an external link button
       </AlertLink>
     );
-    expect(wrapper).toSnapshot();
+    expect(container).toSnapshot();
   });
 
   it('renders with icon', function () {
-    const wrapper = mountWithTheme(
+    const {container} = mountWithTheme(
       <AlertLink to="/settings/accounts/notifications" icon={<IconMail />}>
         This is an external link button
       </AlertLink>
     );
-    expect(wrapper).toSnapshot();
+    expect(container).toSnapshot();
   });
 });