feat: indicate linked articles with invalid statuses

src/components/SlateEditor/plugins/link/Link.tsx

@@ -18,15 +18,19 @@ import {
   PopoverContent,
   PopoverRoot,
   PopoverTrigger,
+  Text,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import { ContentLinkEmbedData } from "@ndla/types-embed";
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useMemo, useRef, type JSX } from "react";
 import { useTranslation } from "react-i18next";
 import { Editor, Node, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
 import { ContentLinkElement, LinkElement } from ".";
 import config from "../../../../config";
+import { ARCHIVED, UNPUBLISHED } from "../../../../constants";
+import { draftQueryOptions } from "../../../../modules/draft/draftQueries";
 import { routes, toEditGenericArticle } from "../../../../util/routeHelpers";
 import { DialogCloseButton } from "../../../DialogCloseButton";
 import { useArticleLanguage } from "../../ArticleLanguageProvider";
@@ -37,12 +41,17 @@ import { LinkData, LinkEmbedData, LINK_ELEMENT_TYPE, CONTENT_LINK_ELEMENT_TYPE }
 
 const StyledPopoverContent = styled(PopoverContent, {
   base: {
-    flexDirection: "row",
-    gap: "xsmall",
     zIndex: "dropdown",
   },
 });
 
+const LinksWrapper = styled("div", {
+  base: {
+    display: "flex",
+    gap: "xsmall",
+  },
+});
+
 const getResourcePath = (node: ContentLinkElement, language: string, contentType: string) => {
   const id = node.data.contentId;
   return contentType === "learningpath"
@@ -63,19 +72,42 @@ export interface Model {
   checkbox: boolean;
 }
 
+const StyledA = styled("a", {
+  base: {
+    textDecoration: "underline",
+    color: "text.link",
+  },
+  variants: {
+    inacessible: {
+      true: {
+        backgroundColor: "surface.errorSubtle",
+      },
+    },
+  },
+});
+
+const INVALID_STATUSES = [UNPUBLISHED, ARCHIVED];
+
 const Link = ({ attributes, editor, element, children }: Props) => {
   const linkRef = useRef<HTMLAnchorElement>(null);
   const editorWrapperRef = useRef<HTMLElement>(null);
   const language = useArticleLanguage();
   const { handleUnwrap, handleSave, dialogProps } = useEditableElement(element, editor, { unwrapOnAutoRemove: true });
   const { t } = useTranslation();
 
+  const draftQuery = useQuery({
+    ...draftQueryOptions({ id: element.type === "content-link" ? Number(element.data.contentId) : -1 }),
+    enabled: element.type === "content-link" && element.data.contentType === "article",
+  });
+
   useEffect(() => {
     if (linkRef.current) {
       editorWrapperRef.current = linkRef.current.closest("[data-slate-wrapper]");
     }
   }, []);
 
+  const inaccessible = INVALID_STATUSES.includes(draftQuery.data?.status.current ?? "");
+
   const linkData: LinkData = useMemo(() => {
     const text = Node.string(element);
     if (!element.data) {
@@ -115,20 +147,23 @@ const Link = ({ attributes, editor, element, children }: Props) => {
         }}
       >
         <PopoverTrigger asChild consumeCss>
-          <a {...attributes} href={linkData.href} ref={linkRef}>
+          <StyledA {...attributes} href={linkData.href} ref={linkRef} inacessible={inaccessible}>
             <InlineBugfix />
             {children}
             <InlineBugfix />
-          </a>
+          </StyledA>
         </PopoverTrigger>
         <Portal container={{ current: editorWrapperRef.current }}>
           <StyledPopoverContent>
-            <DialogTrigger asChild>
-              <Button variant="link">{t("form.content.link.change")}</Button>
-            </DialogTrigger>
-            <a href={linkData.href} target="_blank" rel="noopener noreferrer">
-              {`${t("form.content.link.goTo")} ${linkData.href}`}
-            </a>
+            {!!inaccessible && <Text color="text.error">{t("form.content.link.inaccessible")}</Text>}
+            <LinksWrapper>
+              <DialogTrigger asChild>
+                <Button variant="link">{t("form.content.link.change")}</Button>
+              </DialogTrigger>
+              <a href={linkData.href} target="_blank" rel="noopener noreferrer">
+                {`${t("form.content.link.goTo")} ${linkData.href}`}
+              </a>
+            </LinksWrapper>
           </StyledPopoverContent>
         </Portal>
       </PopoverRoot>

src/phrases/phrases-en.ts

@@ -1380,6 +1380,7 @@ const phrases = {
         fullscreen: "Open in new window",
         description:
           "Links to ndla-resources are handled by the system and are displayed correct on {{url}}. Internal resources are shown with purple background and external links with blue.",
+        inaccessible: "The linked resource is unpublished or deleted.",
       },
       footnote: {
         title: "Title",

src/phrases/phrases-nb.ts

@@ -1380,6 +1380,7 @@ const phrases = {
         fullscreen: "Åpne i nytt vindu",
         description:
           "Lenker til ndla-ressurser spesialhåndteres av systemet og vises korrekt på {{url}}. Interne ressurser vises med lilla bakgrunn og eksterne lenker med blå.",
+        inaccessible: "Ressursen i lenken er avpublisert eller slettet.",
       },
       footnote: {
         title: "Tittel",

src/phrases/phrases-nn.ts

@@ -1380,6 +1380,7 @@ const phrases = {
         fullscreen: "Åpne i nytt vindu",
         description:
           "Lenker til ndla-ressursar spesialhandterast av systemet og visast korrekt på {{- url}}. Interne ressursar visast med lilla bakgrunn og eksterne lenker med blå.",
+        inaccessible: "Ressursen i lenka er avpublisert eller sletta.",
       },
       footnote: {
         title: "Tittel",