feat: refactor version-alert text (#674)

* feat: refactor version-alert text

* chore: changeset

* Update packages/docs-page/index.tsx

Co-authored-by: Bryce Kalow <bkalow@hashicorp.com>

.changeset/fifty-mayflies-kiss.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-docs-page': patch
+---
+
+Refactored version-alert implementation. No external API change

packages/docs-page/components/version-alert/index.jsx → packages/docs-page/components/version-alert/index.tsx

@@ -5,25 +5,24 @@ import {
   removeVersionFromPath,
 } from '../version-select/util'
 import s from './style.module.css'
-import useIsMobile from '../../use-is-mobile'
 
-export default function VersionAlert({ product }) {
+export interface VersionAlertProps {
+  tag: string
+  text: string
+}
+export default function VersionAlert({ tag, text }: VersionAlertProps) {
   const router = useRouter()
-  const isMobile = useIsMobile()
   const versionInPath = getVersionFromPath(router.asPath)
 
   if (!versionInPath) return null
 
   return (
     <div className={s.wrapper}>
+      {/* @ts-expect-error: explicitly not passing `product` */}
       <Alert
         url={removeVersionFromPath(router.asPath)}
-        tag={`old version ${isMobile ? `(${versionInPath})` : ''}`}
-        text={
-          isMobile
-            ? `Click to view latest`
-            : `You're looking at documentation for ${product} ${versionInPath}. Click here to view the latest content.`
-        }
+        tag={tag}
+        text={text}
         state="warning"
         textColor="dark"
       />

packages/docs-page/components/version-alert/version-alert.test.tsx

@@ -20,38 +20,27 @@ describe('<VersionAlert />', () => {
   })
 
   it('should be hidden when no version is present in the URL', () => {
-    const { container } = render(<VersionAlert product={'waypoint'} />)
+    const { container } = render(
+      <VersionAlert
+        tag={'old version'}
+        text={"You're looking at documentation for product"}
+      />
+    )
     expect(container.hasChildNodes()).toBe(false)
   })
 
-  it.each([
-    [
-      /* Product      */ 'Waypoint',
-      /* Path         */ '/docs/v0.5.x',
-      /* Text content */ "You're looking at documentation for Waypoint v0.5.x. Click here to view the latest content.",
-    ],
-    [
-      'CDK for Terraform',
-      '/cdktf/v0.10.x',
-      "You're looking at documentation for CDK for Terraform v0.10.x. Click here to view the latest content.",
-    ],
-    [
-      'Terraform Enterprise',
-      '/enterprise/v202207-1',
-      "You're looking at documentation for Terraform Enterprise v202207-1. Click here to view the latest content.",
-    ],
-  ])(
-    'given product: %p, and path: %p as arguments, should render an alert: %p',
-    (product, path, textContent) => {
-      useRouterMock.mockImplementation(() => {
-        return {
-          asPath: path,
-        } as unknown as Router
-      })
-
-      const { getByTestId } = render(<VersionAlert product={product} />)
-
-      expect(getByTestId('text')).toHaveTextContent(textContent)
-    }
-  )
+  it('should render a tag and text content', () => {
+    useRouterMock.mockImplementation(() => {
+      return {
+        asPath: 'cli/v1.1.x',
+      } as unknown as Router
+    })
+
+    const { getByTestId } = render(
+      <VersionAlert tag="old version" text="Some Text" />
+    )
+
+    expect(getByTestId('tag')).toHaveTextContent('old version')
+    expect(getByTestId('text')).toHaveTextContent('Some Text')
+  })
 })

packages/docs-page/index.test.tsx

@@ -128,7 +128,7 @@ describe('<DocsPage />', () => {
   })
 
   describe('when versioned docs is enabled', () => {
-    const versions = [
+    let versions = [
       {
         name: 'latest',
         label: 'v0.6.x (latest)',
@@ -248,6 +248,46 @@ describe('<DocsPage />', () => {
 
         expect(queryByTestId('tag')).toHaveTextContent('old version')
       })
+
+      it('should show display values from versions', () => {
+        // Terraform core
+        versions = [
+          {
+            name: 'latest',
+            label: 'v1.2.x (latest)',
+            isLatest: true,
+            version: 'v1.2.x',
+          },
+          {
+            name: 'v1.1.x',
+            label: 'v1.1 and earlier',
+            isLatest: false,
+            version: 'v1.1.x',
+          },
+        ]
+
+        // mock that v1.1.x is selected
+        useRouterMock.mockImplementation(() => {
+          return {
+            asPath: '/cli/v1.1.x',
+          } as unknown as Router
+        })
+
+        const { queryByTestId } = render(
+          <DocsPage
+            {...defaultProps}
+            showVersionSelect={true}
+            staticProps={{
+              ...defaultProps.staticProps,
+              versions,
+            }}
+          />
+        )
+
+        expect(queryByTestId('text')).toHaveTextContent(
+          "You're looking at documentation for Terraform v1.1 and earlier. Click here to view the latest content."
+        )
+      })
     })
   })
 })

packages/docs-page/index.tsx

@@ -69,6 +69,10 @@ export const DocsPageInner: FunctionComponent<DocsPageInnerProps> = ({
     versionInPath &&
     versions?.find((v) => v.isLatest)?.version === versionInPath
 
+  const selectedVersion: VersionSelectItem | null =
+    (versionInPath && versions?.find((v) => v.version === versionInPath)) ||
+    null
+
   // TEMPORARY (https://app.asana.com/0/1100423001970639/1160656182754009)
   // activates the "jump to section" feature
   useEffect(() => {
@@ -98,7 +102,20 @@ export const DocsPageInner: FunctionComponent<DocsPageInnerProps> = ({
 
   const versionAlert =
     !versionIsLatest && showVersionSelect ? (
-      <VersionAlert product={projectName || name} />
+      <VersionAlert
+        tag={`old version ${
+          isMobile
+            ? `(${selectedVersion?.label || selectedVersion?.version})`
+            : ''
+        }`}
+        text={
+          isMobile
+            ? `Click to view latest`
+            : `You're looking at documentation for ${projectName || name} ${
+                selectedVersion?.label || selectedVersion?.version
+              }. Click here to view the latest content.`
+        }
+      />
     ) : null
 
   return (