feat: Implement the Article CRUD except listing (#2686)

* feat: add article feature crud except listing
Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.1.4>

Author: ahtesham-quraish

articles/migrations/0003_remove_article_html_article_content.py

@@ -0,0 +1,21 @@
+# Generated by Django 4.2.25 on 2025-11-07 11:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("articles", "0002_alter_article_created_on"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="article",
+            name="html",
+        ),
+        migrations.AddField(
+            model_name="article",
+            name="content",
+            field=models.JSONField(default={}),
+        ),
+    ]

articles/models.py

@@ -10,5 +10,5 @@ class Article(TimestampedModel):
     Stores rich-text content created by staff members.
     """
 
-    html = models.TextField()
+    content = models.JSONField(default={})
     title = models.CharField(max_length=255)

articles/serializers.py

@@ -20,9 +20,9 @@ class RichTextArticleSerializer(serializers.ModelSerializer):
     Serializer for LearningResourceInstructor model
     """
 
-    html = SanitizedHtmlField()
+    content = serializers.JSONField(default={})
     title = serializers.CharField(max_length=255)
 
     class Meta:
         model = models.Article
-        fields = ["html", "id", "title"]
+        fields = ["content", "id", "title"]

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"},
 }
 
 

articles/views_test.py

@@ -13,12 +13,12 @@ def test_article_creation(staff_client, user):
 
     url = reverse("articles:v1:articles-list")
     data = {
-        "html": "<p><script>console.log('hax')</script></p>",
+        "content": {},
         "title": "Some title",
     }
     resp = staff_client.post(url, data)
     json = resp.json()
-    assert json["html"] == "<p></p>"
+    assert json["content"] == {}
     assert json["title"] == "Some title"
 
 

frontends/api/src/generated/v1/api.ts

@@ -6,7 +6,10 @@ import type { RichTextArticle } from "../../generated/v1"
 const article: Factory<RichTextArticle> = (overrides = {}) => ({
   id: faker.number.int(),
   title: faker.lorem.sentence(),
-  html: faker.lorem.paragraph(),
+  content: {
+    text: faker.lorem.paragraph(),
+    author: faker.person.fullName(),
+  },
   ...overrides,
 })
 

frontends/api/src/test-utils/factories/articles.ts

@@ -0,0 +1,65 @@
+"use client"
+
+import React from "react"
+import { useArticleDetail } from "api/hooks/articles"
+import { Container, LoadingSpinner, styled, Typography } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
+import { notFound } from "next/navigation"
+import { Permission } from "api/hooks/user"
+import RestrictedRoute from "@/components/RestrictedRoute/RestrictedRoute"
+import { articlesEditView } from "@/common/urls"
+
+const Page = styled(Container)({
+  marginTop: "40px",
+  marginBottom: "40px",
+})
+
+const ControlsContainer = styled.div({
+  display: "flex",
+  justifyContent: "flex-end",
+  margin: "10px",
+})
+const WrapperContainer = styled.div({
+  borderBottom: "1px solid rgb(222, 208, 208)",
+  paddingBottom: "10px",
+})
+
+const PreTag = styled.pre({
+  background: "#f6f6f6",
+  padding: "16px",
+  borderRadius: "8px",
+  fontSize: "14px",
+  overflowX: "auto",
+})
+
+export const ArticleDetailPage = ({ articleId }: { articleId: number }) => {
+  const id = Number(articleId)
+  const { data, isLoading } = useArticleDetail(id)
+
+  const editUrl = articlesEditView(id)
+
+  if (isLoading) {
+    return <LoadingSpinner color="inherit" loading={isLoading} size={32} />
+  }
+  if (!data) {
+    return notFound()
+  }
+  return (
+    <RestrictedRoute requires={Permission.ArticleEditor}>
+      <Page>
+        <WrapperContainer>
+          <Typography variant="h3" component="h1">
+            {data?.title}
+          </Typography>
+
+          <ControlsContainer>
+            <ButtonLink href={editUrl} variant="primary">
+              Edit
+            </ButtonLink>
+          </ControlsContainer>
+        </WrapperContainer>
+        <PreTag>{JSON.stringify(data.content, null, 2)}</PreTag>
+      </Page>
+    </RestrictedRoute>
+  )
+}

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

@@ -0,0 +1,100 @@
+import React from "react"
+import { screen, renderWithProviders, setMockResponse } from "@/test-utils"
+import { waitFor, fireEvent } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { factories, urls } from "api/test-utils"
+import { ArticleEditPage } from "./ArticleEditPage"
+
+const pushMock = jest.fn()
+
+jest.mock("next-nprogress-bar", () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}))
+
+describe("ArticleEditPage", () => {
+  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)
+
+    const article = factories.articles.article({
+      id: 42,
+      title: "Existing Title",
+      content: { id: 1, content: "Existing content" },
+    })
+    setMockResponse.get(urls.articles.details(article.id), article)
+
+    renderWithProviders(<ArticleEditPage articleId={"42"} />)
+
+    expect(await screen.findByText("Edit 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)
+
+    const article = factories.articles.article({
+      id: 123,
+      title: "Existing Title",
+      content: { id: 1, content: "Existing content" },
+    })
+    setMockResponse.get(urls.articles.details(article.id), article)
+
+    // ✅ Mock successful update response
+    const updated = { ...article, title: "Updated Title" }
+    setMockResponse.patch(urls.articles.details(article.id), updated)
+
+    renderWithProviders(<ArticleEditPage articleId={"123"} />)
+
+    const titleInput = await screen.findByPlaceholderText("Enter article title")
+
+    fireEvent.change(titleInput, { target: { value: "Updated Title" } })
+
+    await waitFor(() => expect(titleInput).toHaveValue("Updated Title"))
+
+    await userEvent.click(screen.getByText(/save article/i))
+
+    // ✅ Wait for redirect after update success
+    await waitFor(() => 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)
+
+    const article = factories.articles.article({
+      id: 7,
+      title: "Old Title",
+      content: { id: 1, content: "Bad content" },
+    })
+    setMockResponse.get(urls.articles.details(article.id), article)
+
+    // ✅ Mock failed update (500)
+    setMockResponse.patch(
+      urls.articles.details(article.id),
+      { detail: "Server Error" },
+      { code: 500 },
+    )
+
+    renderWithProviders(<ArticleEditPage articleId={"7"} />)
+
+    const titleInput = await screen.findByPlaceholderText("Enter article title")
+    fireEvent.change(titleInput, { target: { value: "Bad Article" } })
+
+    await userEvent.click(screen.getByText(/save article/i))
+
+    expect(await screen.findByText(/Mock Error/i)).toBeInTheDocument()
+  })
+})