Merge pull request #2104 from navikt/editor-warnings

Ny alert for redaktører med varsel om feil

src/components/_common/pageNavigationMenu/PageNavigationMenu.tsx

@@ -6,7 +6,6 @@ import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { classNames } from 'utils/classnames';
 import { AnalyticsEvents } from 'utils/amplitude';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
-import { PageNavigationDupeLinkWarning } from './PageNavigationDupeLinkWarning';
 
 import style from './PageNavigationMenu.module.scss';
 
@@ -38,42 +37,38 @@ export const PageNavigationMenu = ({
     }
 
     return (
-        <>
-            <PageNavigationDupeLinkWarning anchorLinks={anchorLinks} />
-
-            <div
-                className={classNames(
-                    style.pageNavigationMenu,
-                    isChapterNavigation && style.chapterNavigation
-                )}
+        <div
+            className={classNames(
+                style.pageNavigationMenu,
+                isChapterNavigation && style.chapterNavigation
+            )}
+        >
+            <Heading
+                level={headingLevel}
+                size="xsmall"
+                spacing
+                id={headingId}
+                className={style.heading}
             >
-                <Heading
-                    level={headingLevel}
-                    size="xsmall"
-                    spacing
-                    id={headingId}
-                    className={style.heading}
-                >
-                    {title}
-                </Heading>
-                <ul aria-labelledby={headingId} className={style.list}>
-                    {links.map((anchorLink) => (
-                        <li key={anchorLink.anchorId}>
-                            <LenkeBase
-                                href={`#${anchorLink.anchorId}`}
-                                analyticsEvent={AnalyticsEvents.NAVIGATION}
-                                analyticsLinkGroup={'Innhold'}
-                                analyticsComponent={analyticsComponent}
-                                analyticsLabel={anchorLink.linkText}
-                                className={style.link}
-                            >
-                                <ArrowDownRightIcon aria-hidden className={style.icon} />
-                                <BodyShort as="span">{anchorLink.linkText}</BodyShort>
-                            </LenkeBase>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-        </>
+                {title}
+            </Heading>
+            <ul aria-labelledby={headingId} className={style.list}>
+                {links.map((anchorLink) => (
+                    <li key={anchorLink.anchorId}>
+                        <LenkeBase
+                            href={`#${anchorLink.anchorId}`}
+                            analyticsEvent={AnalyticsEvents.NAVIGATION}
+                            analyticsLinkGroup={'Innhold'}
+                            analyticsComponent={analyticsComponent}
+                            analyticsLabel={anchorLink.linkText}
+                            className={style.link}
+                        >
+                            <ArrowDownRightIcon aria-hidden className={style.icon} />
+                            <BodyShort as="span">{anchorLink.linkText}</BodyShort>
+                        </LenkeBase>
+                    </li>
+                ))}
+            </ul>
+        </div>
     );
 };

src/components/_editor-only/EditorWidgets.tsx

@@ -29,7 +29,7 @@ export const EditorWidgets = ({ content }: Props) => {
                 {!liveId && (editorView === 'inline' || editorView === 'edit') && (
                     <ReferencesInfo content={content} />
                 )}
-                <EditorGlobalWarnings key={content._id} />
+                <EditorGlobalWarnings content={content} />
                 {editorView !== 'edit' && <VersionHistory content={content} />}
             </div>
         </div>

src/components/_editor-only/global-warnings/EditorGlobalWarnings.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { DuplicateIdsWarning } from 'components/_editor-only/duplicate-ids-warning/DuplicateIdsWarning';
-
-import style from './EditorGlobalWarnings.module.scss';
+import { Alert } from '@navikt/ds-react';
+import { ContentProps } from 'types/content-props/_content-common';
+import { DuplicateIdsWarning } from 'components/_editor-only/warnings/duplicate-ids-warning/DuplicateIdsWarning';
+import { KortUrlWarning } from 'components/_editor-only/warnings/kort-id-warning/KortUrlWarning';
+import { removeDuplicates } from 'utils/arrays';
 
 const EDITOR_GLOBAL_WARNINGS_CONTAINER_ID = 'global-warnings';
 
@@ -25,10 +27,59 @@ export const RenderToEditorGlobalWarnings = ({ children }: { children: React.Rea
     return createPortal(children, element);
 };
 
-export const EditorGlobalWarnings = () => {
+export const EditorGlobalWarnings = ({ content }: { content: ContentProps }) => {
+    const maalgruppe = content.data?.audience?._selected;
+    const path = content.data?.customPath;
+    const feilKortUrl =
+        (maalgruppe === 'employer' && !path?.includes('/arbeidsgiver')) ||
+        (maalgruppe === 'provider' && !path?.includes('/samarbeidspartner'));
+
+    const [elementsWithDupeIds, setElementsWithDupeIds] = useState<HTMLElement[]>([]);
+    const uniqueDupeIds = removeDuplicates(elementsWithDupeIds, (a, b) => a.id === b.id).map(
+        (element) => element.id
+    );
+
+    useEffect(() => {
+        // Delay the check slightly to avoid certain false positives.
+        // Typically mobile/desktop exclusive elements which may have duplicate
+        // ids in the server html, which are pruned with client-side javascript
+        setTimeout(() => {
+            const elementsWithDuplicateIds = [
+                ...document.querySelectorAll<HTMLElement>('#maincontent [id]'),
+            ].filter(
+                (element1, index1, array) =>
+                    // Don't include svg elements in this warning, as this is
+                    // something our editors generelly don't deal with
+                    !element1.closest('svg') &&
+                    array.some(
+                        (element2, index2) => element1.id === element2.id && index1 !== index2
+                    )
+            );
+
+            setElementsWithDupeIds(elementsWithDuplicateIds);
+        }, 1000);
+    }, []);
+
+    const harFeil = uniqueDupeIds.length > 0 || feilKortUrl;
+
     return (
-        <div className={style.container} id={EDITOR_GLOBAL_WARNINGS_CONTAINER_ID}>
-            <DuplicateIdsWarning />
-        </div>
+        <>
+            {harFeil && (
+                <Alert variant="warning">
+                    Redaktørvarsel:
+                    <br />
+                    Disse problemene må rettes før publisering:
+                    <ul>
+                        {feilKortUrl && <KortUrlWarning maalgruppe={maalgruppe} />}
+                        {uniqueDupeIds.length > 0 && (
+                            <DuplicateIdsWarning
+                                uniqueDupeIds={uniqueDupeIds}
+                                elementsWithDupeIds={elementsWithDupeIds}
+                            />
+                        )}
+                    </ul>
+                </Alert>
+            )}
+        </>
     );
 };

src/components/_editor-only/warnings/duplicate-ids-warning/DuplicateIdsWarning.module.scss

@@ -0,0 +1,10 @@
+@use '../../../../common' as common;
+
+.warning {
+    min-width: 400px;
+    background-color: common.$a-white;
+}
+
+.lenkeInline {
+    margin-left: 0.5rem;
+}