Forced the back links on the draft and template pages to point back t…

…o their respective indexes

src/pages/__tests__/dashboard.test.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import { faker } from '@faker-js/faker'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { randomUUID } from 'crypto'
 import DashboardPage from '../dashboard'
 import {
   EmailTemplateIndex,
@@ -17,7 +15,6 @@ import {
   urlFor,
 } from 'src/testHelpers'
 import { SIDEBAR_NAVIGATION_TEST_ID } from 'src/ui'
-import { group } from 'console'
 
 jest.mock('src/network/emailTemplates', () => {
   return {

src/pages/email-templates/[id].tsx

@@ -72,6 +72,7 @@ const EmailTemplateShowPage: FC<Props> = ({ params }) => {
                   >
                     <div ref={beforeLayoutRef as any} />
                     <EmailEditorSidebar
+                      linkBackTo="/my-drafts"
                       emailTranslation={currentTranslation}
                       heading={
                         <>

src/templates/EmailEditorPage.tsx

@@ -76,6 +76,7 @@ const EmailEditorPage: FC<Props> = ({ pageContext, location }) => {
                   >
                     <div ref={beforeLayoutRef as any} />
                     <EmailEditorSidebar
+                      linkBackTo="/library"
                       emailTranslation={currentTranslation}
                       heading={
                         <>

src/templates/EmailEditorSidebar/BackLink.tsx

@@ -2,9 +2,13 @@ import React, { FC } from 'react'
 import { Link, navigate } from 'gatsby'
 import { BackArrowIcon } from 'src/ui'
 
-export const BackLink: FC = () => {
+interface Props {
+  to: string
+}
+
+export const BackLink: FC<Props> = ({ to }) => {
   return (
-    <Link to="#" onClick={() => navigate(-1)} className="back-link">
+    <Link to={to} className="back-link">
       <BackArrowIcon />
       <span className="back-link-text">Back</span>
     </Link>

src/templates/EmailEditorSidebar/__tests__/BackLink.test.tsx

@@ -1,17 +1,15 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { navigate } from 'gatsby'
 import { BackLink } from '../BackLink'
+import { faker } from '@faker-js/faker'
+import { urlFor } from 'src/testHelpers'
 
 describe('BackLink', () => {
   it('is a link that goes back when clicked', async () => {
-    const user = userEvent.setup()
-    const { baseElement } = render(<BackLink />)
-    const link = baseElement.querySelector('a')
+    const path = `/${faker.lorem.word()}`
+    const { baseElement } = render(<BackLink to={path} />)
+    const link: HTMLAnchorElement = baseElement.querySelector('a') as any
     expect(link).toHaveTextContent('Back')
-    expect(navigate).not.toHaveBeenCalled()
-    await user.click(link!)
-    expect(navigate).toHaveBeenCalledWith(-1)
+    expect(link.href).toEqual(urlFor(path))
   })
 })

src/templates/EmailEditorSidebar/__tests__/index.test.tsx

@@ -21,6 +21,7 @@ describe('EmailEditorSidebar', () => {
       <EmailEditorSidebar
         heading={<h1>{faker.lorem.words(3)}</h1>}
         emailTranslation={emailTranslation}
+        linkBackTo={`/${faker.lorem.word()}`}
       />,
     )
     const link: HTMLAnchorElement = baseElement.querySelector('.back-link') as any
@@ -30,7 +31,11 @@ describe('EmailEditorSidebar', () => {
   it('displays the given heading', () => {
     const title = faker.lorem.words(3)
     const { baseElement } = render(
-      <EmailEditorSidebar emailTranslation={emailTranslation} heading={<h1>{title}</h1>} />,
+      <EmailEditorSidebar
+        emailTranslation={emailTranslation}
+        heading={<h1>{title}</h1>}
+        linkBackTo={`/${faker.lorem.word()}`}
+      />,
     )
     expect(baseElement).toContainHTML(`<h1>${title}</h1>`)
   })
@@ -52,6 +57,7 @@ describe('EmailEditorSidebar', () => {
       <EmailEditorSidebar
         emailTranslation={emailTranslation}
         heading={<h1>{faker.lorem.words(3)}</h1>}
+        linkBackTo={`/${faker.lorem.word()}`}
       />,
     )
 
@@ -70,6 +76,7 @@ describe('EmailEditorSidebar', () => {
         <EmailEditorSidebar
           emailTranslation={buildEmailTranslation({ language: 'not-set' })}
           heading={<h1>{faker.lorem.words(3)}</h1>}
+          linkBackTo={`/${faker.lorem.word()}`}
         />,
       )
 

src/templates/EmailEditorSidebar/index.tsx

@@ -7,15 +7,16 @@ import { EmailEditorSidebarAccordion } from './EmailEditorSidebarAccordion'
 interface Props {
   heading: ReactElement
   emailTranslation: EmailTranslation.Unique
+  linkBackTo: string
 }
 
-export const EmailEditorSidebar: FC<Props> = ({ heading, emailTranslation }) => {
+export const EmailEditorSidebar: FC<Props> = ({ heading, emailTranslation, linkBackTo }) => {
   const components = emailTranslation.components
 
   return (
     <Sidebar id="sidebar-container" className="email-editor-sidebar">
       <SpacedSidebarContainer>
-        <BackLink />
+        <BackLink to={linkBackTo} />
         <SkipNavContent />
         {heading}
       </SpacedSidebarContainer>