fix the image stregth issue

Author: Ahtesham Quraish

articles/models.py

@@ -5,6 +5,7 @@
 
 from main.models import TimestampedModel
 from profiles.utils import article_image_upload_uri
+from django.utils.text import slugify
 
 
 class Article(TimestampedModel):
@@ -23,6 +24,23 @@ class Article(TimestampedModel):
     slug = models.SlugField(max_length=255, unique=True, blank=True, null=True)
     is_published = models.BooleanField(default=False)
 
+    def save(self, *args, **kwargs):
+        previous = Article.objects.get(pk=self.pk) if self.pk else None
+        was_published = getattr(previous, "is_published", None)
+        if not was_published:
+            max_length = self._meta.get_field("slug").max_length
+            base_slug = slugify(self.title)[:max_length]
+            slug = base_slug
+            counter = 1
+
+            while Article.objects.filter(slug=slug).exclude(pk=self.pk).exists():
+                suffix = f"-{counter}"
+                slug = f"{base_slug[: 60 - len(suffix)]}{suffix}"
+                counter += 1
+
+        self.slug = slug
+        super().save(*args, **kwargs)
+
 
 class ArticleImageUpload(models.Model):
     user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)

articles/views_test.py

@@ -2,6 +2,10 @@
 
 import pytest
 from rest_framework.reverse import reverse
+import pytest
+from rest_framework.reverse import reverse
+
+from articles.models import Article
 
 from main.factories import UserFactory
 
@@ -30,3 +34,71 @@ def test_article_permissions(client, is_staff):
     resp = client.get(url)
     resp.json()
     assert resp.status_code == 200 if is_staff else 403
+
+
+def test_retrieve_article_by_id(client, user):
+    """Should retrieve published article by numeric ID"""
+    article = Article.objects.create(
+        title="Test Article",
+        content={},
+        is_published=True,
+        user=user,
+    )
+
+    url = reverse(
+        "articles:v1:article-detail-by-id-or-slug",
+        kwargs={"identifier": str(article.id)},
+    )
+
+    resp = client.get(url)
+    data = resp.json()
+
+    assert resp.status_code == 200
+    assert data["id"] == article.id
+    assert data["title"] == "Test Article"
+
+
+def test_retrieve_article_by_slug(client, user):
+    """Should retrieve published article by slug"""
+    article = Article.objects.create(
+        title="Slug Article",
+        content={},
+        is_published=True,
+        user=user,
+    )
+
+    url = reverse(
+        "articles:v1:article-detail-by-id-or-slug",
+        kwargs={"identifier": article.slug},
+    )
+
+    resp = client.get(url)
+    data = resp.json()
+
+    assert resp.status_code == 200
+    assert data["slug"] == article.slug
+    assert data["title"] == "Slug Article"
+
+
+def test_staff_can_access_unpublished_article(client):
+    """Staff should be able to see unpublished articles"""
+    staff_user = UserFactory.create(is_staff=True)
+    client.force_login(staff_user)
+
+    article = Article.objects.create(
+        title="Draft Article",
+        content={},
+        is_published=False,
+        user=staff_user,
+    )
+
+    url = reverse(
+        "articles:v1:article-detail-by-id-or-slug",
+        kwargs={"identifier": str(article.id)},
+    )
+
+    resp = client.get(url)
+    data = resp.json()
+
+    assert resp.status_code == 200
+    assert data["id"] == article.id

frontends/ol-components/src/components/TiptapEditor/ArticleEditor.tsx

@@ -54,7 +54,6 @@ import { Alert, Button, ButtonLink } from "@mitodl/smoot-design"
 import Typography from "@mui/material/Typography"
 import { useUserHasPermission, Permission } from "api/hooks/user"
 import { BannerNode } from "./extensions/node/Banner/BannerNode"
-import { extractFirstH1Title, slugify } from "./extensions/lib/utils"
 import {
   HEADER_HEIGHT,
   HEADER_HEIGHT_MD,
@@ -147,9 +146,6 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
   const [touched, setTouched] = useState(false)
 
   const handleSave = (publish: boolean) => {
-    const title = extractFirstH1Title(content, 1)
-    const slug = slugify(title ?? "")
-
     if (!title) return
     if (article) {
       updateArticle(
@@ -158,7 +154,6 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
           title: title.trim(),
           content,
           is_published: publish,
-          slug: !article.is_published ? slug : article.slug || "",
         },
         {
           onSuccess: onSave,
@@ -170,7 +165,6 @@ const ArticleEditor = ({ onSave, readOnly, article }: ArticleEditorProps) => {
           title: title.trim(),
           content,
           is_published: publish,
-          slug: publish ? slug : "",
         },
         {
           onSuccess: onSave,