feat: add article detail and edit page

Author: Ahtesham Quraish

articles/validators.py

@@ -32,10 +32,12 @@
     # - On all tags: https://docs.rs/ammonia/latest/ammonia/struct.Builder.html#method.generic_attributes
     "attributes": {
         "a": {"href", "hreflang"},
-        "img": {"alt", "height", "src", "width", "srcset", "sizes"},
-        "figure": {"class"},
+        "img": {"alt", "height", "src", "width", "srcset", "sizes", "style"},
+        "figure": {"class", "style"},
         "oembed": {"url"},
     },
+    # 👇 Allow data: URLs for src attributes
+    "url_schemes": {"data"},
 }
 
 

frontends/main/package.json

@@ -10,6 +10,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-react": "^6.3.0",
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
@@ -23,6 +24,7 @@
     "@tanstack/react-query": "^5.66",
     "api": "workspace:*",
     "async_hooks": "^1.0.0",
+    "ckeditor5": "^42.0.0",
     "classnames": "^2.5.1",
     "formik": "^2.4.6",
     "iso-639-1": "^3.1.4",

frontends/main/src/app-pages/Articles/ArticleDetailPage.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import React from "react"
+import { useArticleDetail } from "api/hooks/articles"
+import { Container, LoadingSpinner, styled } from "ol-components"
+import { notFound } from "next/navigation"
+import Link from "next/link"
+
+import "ckeditor5/ckeditor5.css"
+
+const ArticleTitle = styled.h1({
+  fontSize: "24px",
+  marginBottom: "12px",
+})
+const EditButton = styled.div({
+  textAlign: "right",
+  margin: "10px",
+})
+const WrapperContainer = styled.div({
+  borderBottom: "1px solid rgb(222, 208, 208)",
+  paddingBottom: "10px",
+})
+
+const EditButtonLink = styled(Link)({
+  cursor: "pointer",
+  minWidth: "100px",
+  boxSizing: "border-box",
+  borderWidth: "1px",
+  padding: "11px 16px",
+  fontFamily: "neue-haas-grotesk-text, sans-serif",
+  fontStyle: "normal",
+  fontSize: "0.875rem",
+  lineHeight: "1.125rem",
+  textTransform: "none",
+  backgroundColor: "#750014",
+  color: "#FFFFFF",
+})
+
+export const ArticleDetailPage = ({ articleId }: { articleId: number }) => {
+  const id = Number(articleId)
+  const { data, isLoading } = useArticleDetail(id)
+
+  if (isLoading) {
+    return <LoadingSpinner color="inherit" loading={isLoading} size={32} />
+  }
+  if (!data) {
+    return notFound()
+  }
+  return (
+    <Container>
+      <WrapperContainer>
+        <ArticleTitle className="article-title">{data?.title}</ArticleTitle>
+
+        <EditButton>
+          <EditButtonLink
+            href={`/articles/${data.id}/edit`}
+            className="btn btn-edit"
+            color="red"
+          >
+            Edit
+          </EditButtonLink>
+        </EditButton>
+      </WrapperContainer>
+      <div
+        className="ck-content"
+        dangerouslySetInnerHTML={{ __html: data?.html }}
+      />
+    </Container>
+  )
+}

frontends/main/src/app-pages/Articles/ArticleEditPage.test.tsx

@@ -0,0 +1,123 @@
+import React from "react"
+import { screen, renderWithProviders, setMockResponse } from "@/test-utils"
+import { waitFor, fireEvent } from "@testing-library/react"
+import { factories, urls } from "api/test-utils"
+import { ArticleEditPage } from "./ArticleEditPage"
+
+const pushMock = jest.fn()
+
+jest.mock("next-nprogress-bar", () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}))
+
+// Mock API hooks
+const mockUpdateMutate = jest.fn()
+jest.mock("api/hooks/articles", () => ({
+  useArticleDetail: (id: number) => ({
+    data: {
+      id,
+      title: "Existing Title",
+      html: "<p>Existing content</p>",
+    },
+    isLoading: false,
+  }),
+  useArticlePartialUpdate: () => ({
+    mutate: mockUpdateMutate,
+    isPending: false,
+  }),
+}))
+
+// Mock CKEditor
+jest.mock("ol-ckeditor", () => ({
+  CKEditorClient: ({ onChange }: { onChange: (content: string) => void }) => (
+    <textarea
+      data-testid="editor"
+      onChange={(e) => onChange(e.target.value)}
+      value="mock content"
+    />
+  ),
+}))
+
+describe("ArticleEditPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test("renders editor when user has ArticleEditor permission", async () => {
+    const user = factories.user.user({
+      is_authenticated: true,
+      is_article_editor: true,
+    })
+    setMockResponse.get(urls.userMe.get(), user)
+
+    renderWithProviders(<ArticleEditPage articleId={"42"} />)
+
+    expect(await screen.findByText("Write Article")).toBeInTheDocument()
+    expect(screen.getByTestId("editor")).toBeInTheDocument()
+    expect(screen.getByDisplayValue("Existing Title")).toBeInTheDocument()
+  })
+
+  test("submits article successfully and redirects", async () => {
+    const user = factories.user.user({
+      is_authenticated: true,
+      is_article_editor: true,
+    })
+    setMockResponse.get(urls.userMe.get(), user)
+
+    renderWithProviders(<ArticleEditPage articleId={"123"} />)
+
+    const titleInput = await screen.findByPlaceholderText("Enter article title")
+
+    // Change title
+    fireEvent.change(titleInput, { target: { value: "Updated Title" } })
+    await waitFor(() => expect(titleInput).toHaveValue("Updated Title"))
+
+    // Mock success response
+    mockUpdateMutate.mockImplementation((_data, opts) => {
+      opts.onSuccess({ id: 123 })
+    })
+
+    // Click save
+    fireEvent.click(screen.getByText(/save article/i))
+
+    // Assert payload
+    await waitFor(() => {
+      expect(mockUpdateMutate).toHaveBeenCalledWith(
+        {
+          id: 123,
+          title: "Updated Title",
+          html: "<p>Existing content</p>",
+        },
+        expect.any(Object),
+      )
+    })
+
+    // Assert redirect
+    expect(pushMock).toHaveBeenCalledWith("/articles/123")
+  })
+
+  test("shows error alert on failure", async () => {
+    const user = factories.user.user({
+      is_authenticated: true,
+      is_article_editor: true,
+    })
+    setMockResponse.get(urls.userMe.get(), user)
+
+    renderWithProviders(<ArticleEditPage articleId={"7"} />)
+
+    const titleInput = await screen.findByPlaceholderText("Enter article title")
+    fireEvent.change(titleInput, { target: { value: "Bad Article" } })
+
+    mockUpdateMutate.mockImplementation((_data, opts) => {
+      opts.onError?.()
+    })
+
+    fireEvent.click(screen.getByText(/save article/i))
+
+    expect(
+      await screen.findByText(/Failed to save article/i),
+    ).toBeInTheDocument()
+  })
+})

frontends/main/src/app-pages/Articles/ArticleEditPage.tsx

@@ -0,0 +1,134 @@
+"use client"
+import React, { useEffect } from "react"
+import { Permission } from "api/hooks/user"
+import { CKEditorClient } from "ol-ckeditor"
+import { useRouter } from "next-nprogress-bar"
+import { useArticleDetail, useArticlePartialUpdate } from "api/hooks/articles"
+import { Button, Input, Alert } from "@mitodl/smoot-design"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
+import { Container, Typography, styled, LoadingSpinner } from "ol-components"
+import { notFound } from "next/navigation"
+
+const SaveButton = styled.div({
+  textAlign: "right",
+  margin: "10px",
+})
+
+const ClientContainer = styled.div({
+  width: "100%",
+  margin: "10px 0",
+})
+
+const TitleInput = styled(Input)({
+  width: "100%",
+  margin: "10px 0",
+})
+
+const ArticleEditPage = ({ articleId }: { articleId: string }) => {
+  const router = useRouter()
+
+  const id = Number(articleId)
+  const { data: article, isLoading } = useArticleDetail(id)
+
+  const [title, setTitle] = React.useState<string>("")
+  const [editorContent, setEditorContent] = React.useState<string>("")
+  const [editorKey] = React.useState(0)
+  const [alertText, setAlertText] = React.useState("")
+  const [severity, setSeverity] = React.useState<"success" | "error">("success")
+
+  const { mutate: updateArticle, isPending } = useArticlePartialUpdate()
+
+  const handleSave = () => {
+    setAlertText("")
+
+    const payload = {
+      id: id,
+      title: title.trim(),
+      html: editorContent,
+    }
+
+    updateArticle(
+      payload as {
+        id: number
+        html: string
+        title: string
+      },
+      {
+        onSuccess: (article) => {
+          router.push(`/articles/${article.id}`)
+        },
+        onError: () => {
+          setAlertText("❌ Failed to save article")
+          setSeverity("error")
+        },
+      },
+    )
+  }
+
+  useEffect(() => {
+    if (article && !title && !editorContent) {
+      console.log("Article data:", article)
+      setTitle(article.title)
+      setEditorContent(article.html)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [article])
+
+  if (isLoading) {
+    return <LoadingSpinner color="inherit" loading={isLoading} size={32} />
+  }
+  if (!article) {
+    return notFound()
+  }
+
+  return (
+    <RestrictedRoute requires={Permission.ArticleEditor}>
+      <Container className="article-wrapper">
+        <h1>Write Article</h1>
+        {alertText && (
+          <Alert
+            key={alertText}
+            severity={severity}
+            className="info-alert"
+            closable
+          >
+            <Typography variant="body2" color="textPrimary">
+              {alertText}
+            </Typography>
+          </Alert>
+        )}
+        <TitleInput
+          type="text"
+          value={title}
+          onChange={(e) => {
+            console.log("Title input changed:", e.target.value)
+            setTitle(e.target.value)
+            setAlertText("")
+          }}
+          placeholder="Enter article title"
+          className="input-field"
+        />
+
+        <ClientContainer className="editor-box">
+          <CKEditorClient
+            key={editorKey}
+            value={editorContent}
+            onChange={(content) => setEditorContent(content)}
+          />
+        </ClientContainer>
+
+        <SaveButton>
+          <Button
+            variant="primary"
+            disabled={isPending || !title.trim()}
+            onClick={handleSave}
+          >
+            {isPending ? "Saving..." : "Save Article"}
+          </Button>
+        </SaveButton>
+      </Container>
+    </RestrictedRoute>
+  )
+}
+
+export { ArticleEditPage }

frontends/main/src/app-pages/Articles/NewArticlePage.test.tsx

@@ -4,6 +4,13 @@ import { waitFor, fireEvent } from "@testing-library/react"
 import { factories, urls } from "api/test-utils"
 import { NewArticlePage } from "./NewArticlePage"
 
+const pushMock = jest.fn()
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}))
+
 class TestErrorBoundary extends React.Component<{ children: React.ReactNode }> {
   state = { hasError: false }
 
@@ -102,17 +109,14 @@ describe("NewArticlePage", () => {
       opts.onSuccess({ id: 101 })
     })
 
-    // Click save
     fireEvent.click(screen.getByText(/save article/i))
 
     expect(mockMutate).toHaveBeenCalledWith(
       { title: "My Article", html: "" }, // mock editor starts empty
       expect.any(Object),
     )
 
-    expect(
-      await screen.findByText(/Article saved successfully/i),
-    ).toBeInTheDocument()
+    expect(pushMock).toHaveBeenCalledWith("/articles/101")
   })
 
   test("shows error on failure", async () => {