Fix: issue with docs_enterprise_link call (#510)

* Add target="_blank" to signup links

* Add missing trackEvent call

* Add interaction tests for ExclusivityBanner

* Add play function for 'not shown' test

Author: aatuvai

src/components/EnterpriseFeatureBadge/EnterpriseFeatureBadge.tsx

@@ -113,6 +113,7 @@ const EnterpriseFeatureBadge: React.FC<
           <Button
             as="link"
             href="https://goteleport.com/signup/"
+            target="_blank"
             className={styles.upsellLink}
             onClick={() =>
               trackEvent({

src/components/EnterpriseFeatureCallout/EnterpriseFeatureCallout.tsx

@@ -17,6 +17,7 @@ const EnterpriseFeatureCallout: React.FC<{
           {children && <>{children}</>}{" "}
           <a
             href="https://goteleport.com/signup/"
+            target="_blank"
             onClick={() =>
               trackEvent({ event_name: "docs_enterprise_link", emitEvent })
             }

src/components/ExclusivityBanner/ExclusivityBanner.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent, within } from "@storybook/test";
+import { expect } from "@storybook/test";
+import ExclusivityBanner from "./ExclusivityBanner";
+import ExclusivityContext from "/src/components/ExclusivityBanner/context";
+import { collectEvents } from "/src/utils/analytics";
+
+const meta: Meta<typeof ExclusivityBanner> = {
+  title: "components/ExclusivityBanner",
+  component: ExclusivityBanner,
+};
+
+export default meta;
+type Story = StoryObj<typeof ExclusivityBanner>;
+
+export const WithoutExclusivity: Story = {
+  render: () => (
+    <ExclusivityContext.Provider value={{ exclusiveFeature: null }}>
+      <ExclusivityBanner emitEvent={collectEvents()} />
+    </ExclusivityContext.Provider>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Verify exclusivity banner is not shown", async () => {
+      expect(
+        canvas.queryByText(/is available only with Teleport Enterprise/)
+      ).not.toBeInTheDocument();
+    });
+  },
+};
+
+export const WithExclusivity: Story = {
+  render: () => (
+    <ExclusivityContext.Provider value={{ exclusiveFeature: "Desktop Access" }}>
+      <ExclusivityBanner emitEvent={collectEvents()} />
+    </ExclusivityContext.Provider>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Verify exclusivity banner is shown", async () => {
+      expect(
+        canvas.getByText(
+          "Desktop Access is available only with Teleport Enterprise."
+        )
+      ).toBeInTheDocument();
+
+      const signupLink = canvas.getByText("Start your free trial.");
+      expect(signupLink).toBeInTheDocument();
+      expect(signupLink).toHaveAttribute(
+        "href",
+        "https://goteleport.com/signup/"
+      );
+    });
+  },
+};
+
+export const ExclusivitySignupLinkClick: Story = {
+  render: () => (
+    <ExclusivityContext.Provider value={{ exclusiveFeature: "Machine ID" }}>
+      <ExclusivityBanner emitEvent={collectEvents()} />
+    </ExclusivityContext.Provider>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step("Click signup link in exclusivity banner", async () => {
+      const signupLink = canvas.getByText("Start your free trial.");
+      expect(signupLink).toBeInTheDocument();
+
+      await userEvent.click(signupLink);
+
+      expect((window as any).events).toHaveLength(1);
+      expect((window as any).events[0]).toEqual({
+        event: "docs_enterprise_link",
+      });
+    });
+  },
+};

src/components/ExclusivityBanner/ExclusivityBanner.tsx

@@ -4,10 +4,13 @@ import Button from "../Button";
 import Icon from "../Icon";
 import styles from "./ExclusivityBanner.module.css";
 import ExclusivityContext from "./context";
+import { trackEvent } from "@site/src/utils/analytics";
 
 const STORAGE_KEY = "exclusivity_banner_dismissed";
 
-const ExclusivityBanner: React.FC = () => {
+const ExclusivityBanner: React.FC<{
+  emitEvent?: (name: string, params: any) => {};
+}> = ({ emitEvent }) => {
   const { exclusiveFeature } = useContext(ExclusivityContext);
   const [dismissed, setDismissed] = useState<boolean>(() => {
     // Initialize from localStorage
@@ -38,7 +41,16 @@ const ExclusivityBanner: React.FC = () => {
               <Icon size="sm-md" name="rocketLaunch" />
               <p>
                 {exclusiveFeature} is available only with Teleport Enterprise.{" "}
-                <a href="https://goteleport.com/signup/">
+                <a
+                  href="https://goteleport.com/signup/"
+                  target="_blank"
+                  onClick={() =>
+                    trackEvent({
+                      event_name: "docs_enterprise_link",
+                      emitEvent,
+                    })
+                  }
+                >
                   Start your free trial.
                 </a>
               </p>

src/components/Pages/Landing/LandingHero/LandingHero.tsx

@@ -48,6 +48,7 @@ const LandingHero: React.FC<LandingHeroProps> = ({
                 {exclusiveFeature} is available only with Teleport Enterprise.{" "}
                 <a
                   href="https://goteleport.com/signup/"
+                  target="_blank"
                   onClick={() =>
                     trackEvent({
                       event_name: "docs_enterprise_link",