Viser en advarsel dersom en side tidligere hadde en annen content-type

Author: anders-nom

src/components/_top-container/TopContainer.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import { classNames } from '../../utils/classnames';
-import {
-    ContentProps,
-    ContentType,
-} from '../../types/content-props/_content-common';
-import { getContentLanguages } from '../../utils/languages';
+import { classNames } from 'utils/classnames';
+import { ContentProps, ContentType } from 'types/content-props/_content-common';
+import { getContentLanguages } from 'utils/languages';
 import { VersionHistory } from './version-history/VersionHistory';
 import { PageWarning } from './page-warning/PageWarning';
+import { translator } from 'translations';
 
 import style from './TopContainer.module.scss';
 
@@ -25,27 +23,41 @@ type Props = {
 };
 
 export const TopContainer = ({ content }: Props) => {
-    const { __typename, breadcrumbs, isFailover, isPagePreview } = content;
+    const {
+        __typename,
+        breadcrumbs,
+        isFailover,
+        isPagePreview,
+        originalType,
+        language,
+    } = content;
     const hasDecoratorWidgets =
         breadcrumbs?.length > 0 || getContentLanguages(content)?.length > 0;
     const hasWhiteHeader = contentTypesWithWhiteHeader[__typename];
     // Should be shown in Content Studio only (except the edit view)
     const showVersionPicker =
         !!content.editorView && content.editorView !== 'edit';
 
+    const warningLabels = translator('pageWarnings', language);
+
     return (
         <>
             {isPagePreview && (
-                <PageWarning
-                    labelKey={'draftWarning'}
-                    whiteBg={hasWhiteHeader}
-                />
+                <PageWarning whiteBg={hasWhiteHeader}>
+                    {warningLabels('draftWarning')}
+                </PageWarning>
             )}
             {isFailover && (
-                <PageWarning
-                    labelKey={'failoverWarning'}
-                    whiteBg={hasWhiteHeader}
-                />
+                <PageWarning whiteBg={hasWhiteHeader}>
+                    {warningLabels('failoverWarning')}
+                </PageWarning>
+            )}
+            {originalType && content.editorView && (
+                <PageWarning whiteBg={hasWhiteHeader}>{`${warningLabels(
+                    'contentTypeChangedWarningPre'
+                )}"${originalType}"${warningLabels(
+                    'contentTypeChangedWarningPost'
+                )}`}</PageWarning>
             )}
             <div
                 className={classNames(

src/components/_top-container/page-warning/PageWarning.tsx

@@ -1,29 +1,23 @@
 import React from 'react';
-import { usePageConfig } from 'store/hooks/usePageConfig';
-import { translator } from 'translations';
-import { Translations } from '../../../translations/default';
 import { AlertBox } from '../../_common/alert-box/AlertBox';
-import { classNames } from '../../../utils/classnames';
+import { classNames } from 'utils/classnames';
 
 import style from './PageWarning.module.scss';
 
 type Props = {
-    labelKey: keyof Translations['pageWarnings'];
     whiteBg?: boolean;
+    children: React.ReactNode;
 };
 
-export const PageWarning = ({ labelKey, whiteBg }: Props) => {
-    const { language } = usePageConfig();
-    const getDraftLabels = translator('pageWarnings', language);
-
+export const PageWarning = ({ whiteBg, children }: Props) => {
     return (
         <div className={classNames(style.container, whiteBg && style.whiteBg)}>
             <AlertBox
                 variant={'warning'}
                 size={'small'}
                 className={style.warning}
             >
-                {getDraftLabels(labelKey)}
+                {children}
             </AlertBox>
         </div>
     );

src/translations/default.ts

@@ -203,6 +203,10 @@ export const translationsBundleNb = {
         draftWarning: 'Utkast - siden er under arbeid',
         failoverWarning:
             'Vi har for tiden tekniske problemer på nav.no. Du kan oppleve noe treghet eller at innhold mangler. Du kan prøve å laste inn siden på nytt.',
+        contentTypeChangedWarningPre:
+            'Obs! Denne siden var tidligere av typen ',
+        contentTypeChangedWarningPost:
+            ' - Sjekk om versjonshistorikken har innhold som må arkiveres før eventuell sletting.',
     },
     caseTimeUnit: {
         single: {

src/types/content-props/_content-common.ts

@@ -107,6 +107,7 @@ type ContentCommonData = Partial<{
 
 export type ContentCommonProps = {
     __typename: ContentType;
+    originalType?: string;
     children?: ContentCommonProps[];
     parent?: ContentCommonProps;
     data?: ContentCommonData;