Route different content types to correct edit pages (#2169)

* Reroute content

* Reverting changes to Root.tsx and urls.py

* Revert change to ResourceLinkMarkdownSyntax

* Update rerouting

* Undo changes to App.tsx

* Making routing work

* Adding URL test

* Adding test for GenericContentReroutePage

static/js/components/GenericContentReroutePage.test.tsx

@@ -0,0 +1,54 @@
+import { makeWebsiteDetail } from "../util/factories/websites"
+import { useWebsiteContent } from "../hooks/websites"
+import { IntegrationTestHelper } from "../testing_utils"
+import GenericContentReroutePage from "./GenericContentReroutePage"
+import { waitFor } from "@testing-library/react"
+import React from "react"
+
+jest.mock("../hooks/websites")
+
+describe("GenericContentReroutePage", () => {
+  const mockWebsite = makeWebsiteDetail({
+    name: "test-site",
+    uuid: "website-uuid",
+    title: "Test Site",
+  })
+
+  const helper = new IntegrationTestHelper()
+  helper.mockGetWebsiteDetail(mockWebsite)
+
+  const testCases = [
+    {
+      type: "page",
+      expectedPath: "/sites/test-site/type/page/edit/test-uuid/",
+    },
+    {
+      type: "video_gallery",
+      expectedPath: "/sites/test-site/type/video_gallery/edit/test-uuid/",
+    },
+    {
+      type: "external_resource",
+      expectedPath: "/sites/test-site/type/external_resource/edit/test-uuid/",
+    },
+  ]
+
+  testCases.forEach(({ type, expectedPath }) => {
+    it(`reroutes to the correct page based on content type: ${type}`, async () => {
+      const mockResource = {
+        type,
+        text_id: "test-uuid",
+      }
+
+      ;(useWebsiteContent as jest.Mock).mockReturnValue([mockResource])
+
+      const [_, { history }] = helper.renderWithWebsite(
+        <GenericContentReroutePage />,
+        mockWebsite,
+      )
+
+      await waitFor(() => {
+        expect(history.location.pathname).toBe(expectedPath)
+      })
+    })
+  })
+})

static/js/components/GenericContentReroutePage.tsx

@@ -0,0 +1,33 @@
+import { useParams, useHistory } from "react-router"
+import { useWebsiteContent } from "../hooks/websites"
+import { useEffect } from "react"
+import { siteContentDetailUrl } from "../lib/urls"
+import { useWebsite } from "../context/Website"
+/**
+ * A page to be served at /content/:uuid that fetches the resource and reroutes
+ * the user to the appropriate page, i.e.,
+ *  /type/pages/:uuid
+ *  /type/resources/:uuid
+ *  /type/video-galleries/:uuid
+ * etc.
+ **/
+const GenericContentReroutePage = () => {
+  const { uuid } = useParams<{ uuid: string }>()
+  const history = useHistory()
+  const website = useWebsite()
+  const [resource] = useWebsiteContent(uuid)
+  useEffect(() => {
+    if (!resource?.type) return
+    history.replace({
+      pathname: siteContentDetailUrl.param({
+        contentType: resource.type,
+        name: website.name,
+        uuid: resource.text_id,
+      }).pathname,
+    })
+  }, [uuid, history, resource?.type, resource?.text_id, website.name])
+
+  return null
+}
+
+export default GenericContentReroutePage

static/js/components/widgets/MarkdownEditor.tsx

@@ -26,7 +26,7 @@ import {
 import ResourcePickerDialog from "./ResourcePickerDialog"
 import useThrowSynchronously from "../../hooks/useAsyncError"
 import { useWebsite } from "../../context/Website"
-import { siteContentDetailUrl } from "../../lib/urls"
+import { siteContentRerouteUrl } from "../../lib/urls"
 
 export interface Props {
   value?: string
@@ -128,9 +128,8 @@ export default function MarkdownEditor(props: Props): JSX.Element {
     const resourceLink = {
       [RESOURCE_LINK_CONFIG_KEY]: {
         hrefTemplate: `${location.origin}${
-          siteContentDetailUrl.param({
+          siteContentRerouteUrl.param({
             name: website.name,
-            contentType: "resource",
           }).pathname
         }`,
       },

static/js/lib/urls.test.ts

@@ -16,6 +16,7 @@ import {
   siteApiContentListingUrl,
   siteContentNewUrl,
   siteContentDetailUrl,
+  siteContentRerouteUrl,
 } from "./urls"
 
 describe("urls", () => {
@@ -154,6 +155,14 @@ describe("urls", () => {
             .toString(),
         ).toBe("/api/websites/the-best-course/content/?limit=10&offset=40")
       })
+
+      it("renders a content reroute URL", () => {
+        expect(
+          siteContentRerouteUrl
+            .param({ name: "site-name", uuid: "test-uuid" })
+            .toString(),
+        ).toBe("/sites/site-name/content/test-uuid/")
+      })
     })
   })
 })

static/js/lib/urls.ts

@@ -10,6 +10,7 @@ export const sitesBaseUrl = UrlAssembler.prefix("/sites/")
 export const newSiteUrl = UrlAssembler.prefix("/new-site/")
 
 export const siteDetailUrl = sitesBaseUrl.segment(":name/")
+export const siteContentRerouteUrl = siteDetailUrl.segment("content/:uuid/")
 export const siteContentListingUrl = siteDetailUrl.segment("type/:contentType/")
 export const siteContentNewUrl = siteContentListingUrl.segment("new/")
 export const siteContentDetailUrl = siteContentListingUrl.segment("edit/:uuid/")

static/js/pages/SitePage.tsx

@@ -9,11 +9,13 @@ import Spinner from "../components/util/Spinner"
 import {
   siteCollaboratorsUrl,
   siteContentListingUrl,
+  siteContentRerouteUrl,
   siteDetailUrl,
 } from "../lib/urls"
 
 import { useWebsite } from "../context/Website"
 import DocumentTitle, { formatTitle } from "../components/DocumentTitle"
+import GenericContentReroutePage from "../components/GenericContentReroutePage"
 
 interface SitePageProps {
   isLoading: boolean
@@ -33,6 +35,12 @@ export default function SitePage(props: SitePageProps): JSX.Element | null {
             <SiteSidebar website={website} />
           </Card>
           <div className="content pl-3">
+            <Route
+              path={
+                siteContentRerouteUrl.param({ name: website.name }).pathname
+              }
+              component={GenericContentReroutePage}
+            />
             <Route
               path={siteCollaboratorsUrl.param("name", website.name).toString()}
             >