fix: add link to the creation page of article and news (#3430)

* fix: add link to the creation page of article and news


---------

Co-authored-by: Ahtesham Quraish <ahtesham.quraish@192.168.1.6>

Author: ahtesham-quraish

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

@@ -22,7 +22,9 @@ import type { WebsiteContent } from "api/v1"
 import { LocalDate } from "ol-utilities"
 import { useWebsiteContentList } from "api/hooks/website_content"
 import { extractArticleContent } from "@/common/websiteContentUtils"
-import { articleView } from "@/common/urls"
+import { articleView, websiteContentCreateView } from "@/common/urls"
+import { Permission, useUserHasPermission } from "api/hooks/user"
+import { ButtonLink } from "@mitodl/smoot-design"
 
 const PAGE_SIZE = 10
 const MAX_PAGE = 50
@@ -223,6 +225,10 @@ const BannerGridContainer = styled.div`
   max-width: 842px;
   margin: 0 auto;
   padding: 64px 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 
   ${theme.breakpoints.down("sm")} {
     max-width: 100%;
@@ -299,6 +305,10 @@ const BannerSection = styled.div`
   background: ${theme.custom.colors.white};
   border-bottom: 1px solid ${theme.custom.colors.lightGray2};
 `
+const NewArticleLink = styled(ButtonLink)`
+  display: flex;
+  justify-content: end;
+`
 
 const EmptyState = styled.div`
   display: flex;
@@ -319,7 +329,6 @@ const EmptyState = styled.div`
 
 const BannerTitle = styled(Typography)`
   color: ${theme.custom.colors.black};
-  margin-top: 8px;
   ${theme.breakpoints.down("md")} {
     ${{ ...theme.typography.h2 }}
   }
@@ -329,16 +338,6 @@ const BannerTitle = styled(Typography)`
   }
 ` as typeof Typography
 
-const BannerDescription = styled(Typography)`
-  color: ${theme.custom.colors.black};
-  margin-top: 16px;
-  font-size: 20px;
-  line-height: 32px;
-  ${theme.breakpoints.down("sm")} {
-    ${{ ...theme.typography.body2 }}
-  }
-`
-
 const BreadcrumbBar = styled.div(({ theme }) => ({
   width: "100%",
   padding: "18px 0 2px 0",
@@ -418,6 +417,8 @@ const ArticleListingPage: React.FC = () => {
   const parsedPage = Number.parseInt(searchParams.get("page") ?? "1", 10)
   const page = Number.isFinite(parsedPage) && parsedPage > 0 ? parsedPage : 1
 
+  const isArticleEditor = useUserHasPermission(Permission.ArticleEditor)
+
   const { data: articles, isLoading } = useWebsiteContentList({
     limit: PAGE_SIZE,
     offset: (page - 1) * PAGE_SIZE,
@@ -454,11 +455,16 @@ const ArticleListingPage: React.FC = () => {
             <BannerTitle component="h1" variant="h1">
               Articles
             </BannerTitle>
-            <BannerDescription variant="body1">
-              Dive into articles covering emerging technologies, global
-              challenges, and creative thinking. Stay connected with the latest
-              insights and discoveries from MIT.
-            </BannerDescription>
+            {isArticleEditor && (
+              <NewArticleLink
+                variant="primary"
+                href={websiteContentCreateView("article")}
+              >
+                <Typography variant="body1" color="white">
+                  New Article
+                </Typography>
+              </NewArticleLink>
+            )}
           </BannerGridContainer>
         </Container>
       </BannerSection>

frontends/main/src/app-pages/News/NewsBanner.tsx

@@ -7,6 +7,9 @@ import {
   Breadcrumbs,
   BannerBackground,
 } from "ol-components"
+import { ButtonLink } from "@mitodl/smoot-design"
+import { Permission, useUserHasPermission } from "api/hooks/user"
+import { websiteContentCreateView } from "@/common/urls"
 
 export const DEFAULT_BACKGROUND_IMAGE_URL =
   "/images/backgrounds/backgroung_steps.jpg"
@@ -30,7 +33,17 @@ const BannerSection = styled(BannerBackground)`
     z-index: 2;
   }
 `
-
+const NewArticleLink = styled(ButtonLink)`
+  display: flex;
+  justify-content: end;
+`
+const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+`
 const BannerTitle = styled(Typography)`
   color: ${theme.custom.colors.white};
   margin-top: 8px;
@@ -65,6 +78,7 @@ const NewsBanner: React.FC<NewsBannerProps> = ({
   backgroundUrl = DEFAULT_BACKGROUND_IMAGE_URL,
   className,
 }) => {
+  const isArticleEditor = useUserHasPermission(Permission.ArticleEditor)
   return (
     <BannerSection
       className={className}
@@ -78,10 +92,22 @@ const NewsBanner: React.FC<NewsBannerProps> = ({
           ancestors={[{ href: "/", label: "Home" }]}
           current={currentBreadcrumb}
         />
-        <BannerTitle component="h1" variant="h1">
-          {title}
-        </BannerTitle>
-        <BannerDescription variant="body1">{description}</BannerDescription>
+        <InfoContainer>
+          <div>
+            <BannerTitle component="h1" variant="h1">
+              {title}
+            </BannerTitle>
+            <BannerDescription variant="body1">{description}</BannerDescription>
+          </div>
+          {isArticleEditor && (
+            <NewArticleLink
+              variant="tertiary"
+              href={websiteContentCreateView("news")}
+            >
+              <Typography variant="body1">Add news</Typography>
+            </NewArticleLink>
+          )}
+        </InfoContainer>
       </Container>
     </BannerSection>
   )

frontends/main/src/app-pages/News/NewsListingPage.test.tsx

@@ -23,6 +23,7 @@ describe("NewsListingPage", () => {
   beforeEach(() => {
     mockedUseFeatureFlagEnabled.mockReturnValue(true)
     mockedUseFeatureFlagsLoaded.mockReturnValue(true)
+    setMockResponse.get(urls.userMe.get(), { is_authenticated: false })
   })
 
   afterEach(() => {
@@ -82,6 +83,34 @@ describe("NewsListingPage", () => {
     })
   })
 
+  test("shows 'Add news' button in banner when user is an article editor", async () => {
+    setMockResponse.get(urls.userMe.get(), {
+      is_authenticated: true,
+      is_article_editor: true,
+    })
+    setupAPI(21)
+    renderWithProviders(<NewsListingPage />)
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("link", { name: /add news/i }),
+      ).toBeInTheDocument()
+    })
+  })
+
+  test("hides 'Add news' button in banner when user is not an article editor", async () => {
+    setupAPI(21)
+    renderWithProviders(<NewsListingPage />)
+
+    await waitFor(() => {
+      expect(screen.queryByRole("progressbar")).not.toBeInTheDocument()
+    })
+
+    expect(
+      screen.queryByRole("link", { name: /add news/i }),
+    ).not.toBeInTheDocument()
+  })
+
   test("displays News images when available", async () => {
     const news = setupAPI(21)
     renderWithProviders(<NewsListingPage />)

frontends/main/src/page-components/Header/Header.test.tsx

@@ -148,4 +148,31 @@ describe("UserMenu", () => {
     })
     expect(link).toBe(null)
   })
+
+  test("Article editors see 'Article' and 'News' links in the user menu", async () => {
+    setMockResponse.get(urls.userMe.get(), {
+      is_authenticated: true,
+      is_article_editor: true,
+    })
+    renderWithProviders(<Header />)
+    const menu = await findUserMenu()
+
+    const articleLink = within(menu).getByRole("menuitem", { name: "Article" })
+    expect(articleLink).toHaveAttribute("href", "/website_content/article/new")
+
+    const newsLink = within(menu).getByRole("menuitem", { name: "News" })
+    expect(newsLink).toHaveAttribute("href", "/website_content/news/new")
+  })
+
+  test("Users WITHOUT ArticleEditor permission do not see 'Article' or 'News' links", async () => {
+    setMockResponse.get(urls.userMe.get(), {
+      is_authenticated: true,
+      is_article_editor: false,
+    })
+    renderWithProviders(<Header />)
+    const menu = await findUserMenu()
+
+    expect(within(menu).queryByRole("menuitem", { name: "Article" })).toBe(null)
+    expect(within(menu).queryByRole("menuitem", { name: "News" })).toBe(null)
+  })
 })

frontends/main/src/page-components/Header/UserMenu.tsx

@@ -13,6 +13,7 @@ import {
 } from "@remixicon/react"
 import { useUserMe, User } from "api/hooks/user"
 import MITLogoLink from "@/components/MITLogoLink/MITLogoLink"
+import { websiteContentCreateView } from "@/common/urls"
 
 const FlexContainer = styled.div({
   display: "flex",
@@ -158,6 +159,18 @@ const UserMenu: React.FC<UserMenuProps> = ({ variant }) => {
       allow: !!user?.is_learning_path_editor,
       href: urls.LEARNINGPATH_LISTING,
     },
+    {
+      label: "Article",
+      key: "articles",
+      allow: !!user?.is_article_editor,
+      href: websiteContentCreateView("article"),
+    },
+    {
+      label: "News",
+      key: "news",
+      allow: !!user?.is_article_editor,
+      href: websiteContentCreateView("news"),
+    },
     {
       label: "Log Out",
       key: "logout",