Merge pull request #2622 from NDLANO/refactor/preview-draft-lightbox

refactor: use primitives in PreviewResource
NDLANO · Nov 8, 2024 · a170dae · a170dae
2 parents 7fb1954 + eb9980b
commit a170dae
Show file tree

Hide file tree

Showing 10 changed files with 86 additions and 64 deletions.
diff --git a/e2e/specs/versions.spec.ts b/e2e/specs/versions.spec.ts
@@ -42,9 +42,9 @@ test("Open previews", async ({ page }) => {
   await page.getByRole("heading", { name: "Versjonslogg og merknader" }).click();
   await page.getByTestId("previewVersion").last().click();
   await page.getByRole("article").first().waitFor();
-  await expect(page.getByTestId("close-modal-button")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Sammenlign med publisert" })).toBeVisible();
   expect(await page.getByRole("article").count()).toBe(2);
-  await page.getByTestId("close-modal-button").click();
+  await page.getByRole("button", { name: "Lukk" }).click();
   await expect(page.getByTestId("preview-draft-modal")).toBeVisible({ visible: false });
 });
 

diff --git a/src/components/HeaderWithLanguage/HeaderActions.tsx b/src/components/HeaderWithLanguage/HeaderActions.tsx
@@ -9,10 +9,10 @@
 import { useFormikContext } from "formik";
 import { memo, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { ButtonV2 } from "@ndla/button";
 import { FileCompare } from "@ndla/icons/action";
 import { Launch } from "@ndla/icons/common";
 import { CheckboxCircleFill, Eye } from "@ndla/icons/editor";
+import { Button } from "@ndla/primitives";
 import { SafeLinkButton } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { IConcept } from "@ndla/types-backend/concept-api";
@@ -27,7 +27,7 @@ import { createEditUrl, hasArticleFieldsChanged, toMapping, translatableTypes }
 import { PUBLISHED } from "../../constants";
 import { toCompareLanguage } from "../../util/routeHelpers";
 import { useIsTranslatableToNN } from "../NynorskTranslateProvider";
-import PreviewDraftLightboxV2 from "../PreviewDraft/PreviewDraftLightboxV2";
+import { PreviewResourceDialog } from "../PreviewDraft/PreviewResourceDialog";
 
 interface PreviewLightBoxProps {
   article?: IArticle;
@@ -60,14 +60,14 @@ const PreviewLightBox = memo(({ type, currentLanguage, article, concept }: Previ
   const { t } = useTranslation();
   if ((type === "concept" || type === "gloss") && concept) {
     return (
-      <PreviewDraftLightboxV2
+      <PreviewResourceDialog
         type="conceptCompare"
         concept={concept}
         language={currentLanguage}
         activateButton={
-          <ButtonV2 size="small" colorTheme="light">
+          <Button size="small" variant="secondary">
             <FileCompare /> {t("form.previewLanguageArticle.button")}
-          </ButtonV2>
+          </Button>
         }
       />
     );
@@ -193,14 +193,14 @@ const HeaderActions = ({
           {lastPublishedVersion && (
             <>
               <StyledSplitter />
-              <PreviewDraftLightboxV2
+              <PreviewResourceDialog
                 type="version"
                 article={lastPublishedVersion}
                 language={language}
                 customTitle={t("form.previewProductionArticle.published")}
                 activateButton={
-                  <ButtonV2
-                    variant="ghost"
+                  <Button
+                    variant="tertiary"
                     size="small"
                     aria-label={
                       hasChanges
@@ -215,7 +215,7 @@ const HeaderActions = ({
                     }
                   >
                     <Eye /> {t("form.previewVersion")}
-                  </ButtonV2>
+                  </Button>
                 }
               />
             </>

diff --git a/src/components/PreviewDraft/PreviewDraftLightboxV2.tsx b/src/components/PreviewDraft/PreviewDraftLightboxV2.tsx
diff --git a/src/components/PreviewDraft/PreviewResourceDialog.tsx b/src/components/PreviewDraft/PreviewResourceDialog.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { ElementType, ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import { DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "@ndla/primitives";
+import { ConceptPreviewProps, PreviewConcept } from "./PreviewConcept";
+import { CompareConceptPreviewProps, PreviewConceptCompare } from "./PreviewConceptCompare";
+import { MarkupPreviewProps, PreviewMarkup } from "./PreviewMarkup";
+import { PreviewVersion, VersionPreviewProps } from "./PreviewVersion";
+import { DialogCloseButton } from "../DialogCloseButton";
+
+type PreviewProps = MarkupPreviewProps | VersionPreviewProps | CompareConceptPreviewProps | ConceptPreviewProps;
+
+type Props = PreviewProps & {
+  activateButton: ReactElement;
+};
+
+const types: Record<Props["type"], { title: string; component: ElementType }> = {
+  markup: { title: "editMarkup.previewDialogTitle", component: PreviewMarkup },
+  version: { title: "form.previewVersion", component: PreviewVersion },
+  conceptCompare: { title: "conceptCompare.title", component: PreviewConceptCompare },
+  concept: { title: "conceptPreview.title", component: PreviewConcept },
+};
+
+export const PreviewResourceDialog = (props: Props) => {
+  const { t } = useTranslation();
+  const { component: Component, title } = types[props.type];
+  return (
+    <DialogRoot size={props.type === "version" ? "full" : "large"}>
+      <DialogTrigger asChild>{props.activateButton}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{t(title)}</DialogTitle>
+          <DialogCloseButton />
+        </DialogHeader>
+        <Component {...props} />
+      </DialogContent>
+    </DialogRoot>
+  );
+};
diff --git a/src/components/SlateEditor/EditorFooter.tsx b/src/components/SlateEditor/EditorFooter.tsx
@@ -26,7 +26,7 @@ import { ConceptStatusStateMachineType, DraftStatusStateMachineType } from "../.
 import { toPreviewDraft } from "../../util/routeHelpers";
 import Footer from "../Footer/Footer";
 import { createEditUrl, TranslatableType, translatableTypes } from "../HeaderWithLanguage/util";
-import PreviewDraftLightboxV2 from "../PreviewDraft/PreviewDraftLightboxV2";
+import { PreviewResourceDialog } from "../PreviewDraft/PreviewResourceDialog";
 import SaveMultiButton from "../SaveMultiButton";
 
 interface Props {
@@ -246,7 +246,7 @@ function EditorFooter<T extends FormValues>({
       <>
         <div data-testid="footerPreviewAndValidate">
           {values.id && isConcept && (
-            <PreviewDraftLightboxV2
+            <PreviewResourceDialog
               type="concept"
               language={values.language}
               activateButton={<Button variant="link">{t("form.preview.button")}</Button>}

diff --git a/src/containers/EditMarkupPage/EditMarkupPage.tsx b/src/containers/EditMarkupPage/EditMarkupPage.tsx
@@ -10,7 +10,6 @@ import { lazy, Suspense, useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation, useParams } from "react-router-dom";
 import styled from "@emotion/styled";
-import { ButtonV2 } from "@ndla/button";
 import { spacing, colors } from "@ndla/core";
 import { InformationLine } from "@ndla/icons/common";
 import {
@@ -22,14 +21,15 @@ import {
   DialogTrigger,
   IconButton,
   Text,
+  Button,
 } from "@ndla/primitives";
 import { IArticle } from "@ndla/types-backend/draft-api";
 import { Row } from "../../components";
 import { DialogCloseButton } from "../../components/DialogCloseButton";
 import FieldHeader from "../../components/Field/FieldHeader";
 import HeaderSupportedLanguages from "../../components/HeaderWithLanguage/HeaderSupportedLanguages";
 import { OldSpinner } from "../../components/OldSpinner";
-import PreviewDraftLightboxV2 from "../../components/PreviewDraft/PreviewDraftLightboxV2";
+import { PreviewResourceDialog } from "../../components/PreviewDraft/PreviewResourceDialog";
 import SaveButton from "../../components/SaveButton";
 import { DRAFT_HTML_SCOPE } from "../../constants";
 import { fetchDraft, updateDraft } from "../../modules/draft/draftApi";
@@ -231,11 +231,11 @@ const EditMarkupPage = () => {
         />
         <StyledRow>
           {!!draft && (
-            <PreviewDraftLightboxV2
+            <PreviewResourceDialog
               type="markup"
               language={language}
               article={draft}
-              activateButton={<ButtonV2 variant="link">{t("form.preview.button")}</ButtonV2>}
+              activateButton={<Button variant="link">{t("form.preview.button")}</Button>}
             />
           )}
           <Row justifyContent="end" alignItems="baseline">

diff --git a/src/containers/FormikForm/VersionActionButtons.tsx b/src/containers/FormikForm/VersionActionButtons.tsx
@@ -11,7 +11,7 @@ import { Eye, Restore } from "@ndla/icons/editor";
 import { IconButton } from "@ndla/primitives";
 import { IArticle } from "@ndla/types-backend/draft-api";
 
-import PreviewDraftLightboxV2 from "../../components/PreviewDraft/PreviewDraftLightboxV2";
+import { PreviewResourceDialog } from "../../components/PreviewDraft/PreviewResourceDialog";
 
 interface Props {
   showFromArticleApi: boolean;
@@ -36,7 +36,7 @@ const VersionActionButtons = ({
   if (current && !showFromArticleApi) return null;
   return (
     <>
-      <PreviewDraftLightboxV2
+      <PreviewResourceDialog
         type="version"
         article={version}
         language={currentLanguage}

diff --git a/src/phrases/phrases-en.ts b/src/phrases/phrases-en.ts
@@ -398,6 +398,7 @@ const phrases = {
   editMarkup: {
     linkTitle: "Go to HTML editor",
     title: "HTML editor",
+    previewDialogTitle: "Preview article",
     subTitle: "Edit article with HTML",
     back: "Back",
     fetchError: "An error occurred while loding an article into the HTML editor. Go back or try to reload the page.",
@@ -2175,6 +2176,12 @@ const phrases = {
   fileUpload: {
     title: "Upload files",
   },
+  conceptCompare: {
+    title: "Compare language versions",
+  },
+  conceptPreview: {
+    title: "Preview concept",
+  },
 };
 
 export default phrases;
diff --git a/src/phrases/phrases-nb.ts b/src/phrases/phrases-nb.ts
@@ -397,6 +397,7 @@ const phrases = {
   editMarkup: {
     linkTitle: "Gå til HTML-editor",
     title: "HTML-editor",
+    previewDialogTitle: "Forhåndsvis artikkel",
     subTitle: "Rediger artikkelinnhold med HTML",
     fetchError: "En feil oppsto ved lasting av HTML-editoren. Gå tilbake eller prøv å laste siden på nytt.",
     saveError: "En feil oppsto ved lagring av endringer.",
@@ -2174,6 +2175,12 @@ const phrases = {
   fileUpload: {
     title: "Last opp filer",
   },
+  conceptCompare: {
+    title: "Sammenlign språkversjoner",
+  },
+  conceptPreview: {
+    title: "Forhåndsvis forklaring",
+  },
 };
 
 export default phrases;
diff --git a/src/phrases/phrases-nn.ts b/src/phrases/phrases-nn.ts
@@ -397,6 +397,7 @@ const phrases = {
   editMarkup: {
     linkTitle: "Gå til HTML-editor",
     title: "HTML-editor",
+    previewDialogTitle: "Forhåndsvis artikkel",
     subTitle: "Rediger artikkelinnhold med HTML",
     fetchError: "Ein feil oppsto ved lasting av HTML-editoren. Gå tilbake eller prøv å laste sida på nytt.",
     saveError: "Ein feil oppsto ved lagring av endringar.",
@@ -2174,6 +2175,12 @@ const phrases = {
   fileUpload: {
     title: "Last opp filer",
   },
+  conceptCompare: {
+    title: "Samanlikn språkversjonar",
+  },
+  conceptPreview: {
+    title: "Forhåndsvis forklaring",
+  },
 };
 
 export default phrases;