Fix documentation link and provide dynamic troubleshooting link

storybookjs · Oct 9, 2024 · feea5cd · feea5cd
1 parent e4f003a
commit feea5cd
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 18 deletions.
diff --git a/code/addons/test/src/components/GlobalErrorModal.stories.tsx b/code/addons/test/src/components/GlobalErrorModal.stories.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import { ManagerContext } from 'storybook/internal/manager-api';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 
@@ -9,21 +11,32 @@ import { GlobalErrorModal } from './GlobalErrorModal';
 
 type Story = StoryObj<typeof meta>;
 
+const managerContext: any = {
+  state: {},
+  api: {
+    getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName(
+      'api::getDocsUrl'
+    ),
+  },
+};
+
 const meta = {
   component: GlobalErrorModal,
   decorators: [
     (storyFn) => (
-      <div
-        style={{
-          width: '100%',
-          minWidth: '1200px',
-          height: '800px',
-          background:
-            'repeating-linear-gradient(45deg, #000000, #ffffff 50px, #ffffff 50px, #ffffff 80px)',
-        }}
-      >
-        {storyFn()}
-      </div>
+      <ManagerContext.Provider value={managerContext}>
+        <div
+          style={{
+            width: '100%',
+            minWidth: '1200px',
+            height: '800px',
+            background:
+              'repeating-linear-gradient(45deg, #000000, #ffffff 50px, #ffffff 50px, #ffffff 80px)',
+          }}
+        >
+          {storyFn()}
+        </div>
+      </ManagerContext.Provider>
     ),
   ],
   args: {

diff --git a/code/addons/test/src/components/GlobalErrorModal.tsx b/code/addons/test/src/components/GlobalErrorModal.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
 import { Button, IconButton, Modal } from 'storybook/internal/components';
+import { useStorybookApi } from 'storybook/internal/manager-api';
 
 import { CloseIcon, SyncIcon } from '@storybook/icons';
 import { styled } from '@storybook/theming';
 
+import { TROUBLESHOOTING_LINK } from '../constants';
+
 interface GlobalErrorModalProps {
   error: string;
   open: boolean;
@@ -45,9 +48,15 @@ const TroubleshootLink = styled.a(({ theme }) => ({
   color: theme.color.defaultText,
 }));
 
-const TROUBLESHOOT_LINK = `https://storybook.js.org/docs/vitest/troubleshooting`;
-
 export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorModalProps) {
+  const api = useStorybookApi();
+
+  const troubleshootURL = api.getDocsUrl({
+    subpath: TROUBLESHOOTING_LINK,
+    versioned: true,
+    renderer: true,
+  });
+
   return (
     <Modal onEscapeKeyDown={onClose} onInteractOutside={onClose} open={open}>
       <ModalBar>
@@ -58,8 +67,7 @@ export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorM
             Rerun
           </Button>
           <Button variant="ghost" asChild>
-            {/* TODO: Is this the right link? */}
-            <a target="_blank" href={TROUBLESHOOT_LINK} rel="noreferrer">
+            <a target="_blank" href={troubleshootURL} rel="noreferrer">
               Troubleshoot
             </a>
           </Button>
@@ -73,8 +81,8 @@ export function GlobalErrorModal({ onRerun, onClose, error, open }: GlobalErrorM
         <br />
         <br />
         Troubleshoot:{' '}
-        <TroubleshootLink target="_blank" href={TROUBLESHOOT_LINK}>
-          {TROUBLESHOOT_LINK}
+        <TroubleshootLink target="_blank" href={troubleshootURL}>
+          {troubleshootURL}
         </TroubleshootLink>
       </ModalStackTrace>
     </Modal>

diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts
@@ -3,4 +3,5 @@ export const TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
 export const PANEL_ID = `${ADDON_ID}/panel`;
 
 export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
-export const DOCUMENTATION_LINK = 'writing-tests/interaction-testing';
+export const DOCUMENTATION_LINK = 'writing-tests/component-testing';
+export const TROUBLESHOOTING_LINK = `${DOCUMENTATION_LINK}#troubleshooting`;