Use new studioModal

Altinn · Sep 18, 2024 · dcf9d1c · dcf9d1c
1 parent 9159740
commit dcf9d1c
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 42 deletions.
diff --git a/.../PageConfigPanel/PdfConfig/ConvertPageToPdfWhenExistingModal/ConvertChoicesModal.test.tsx b/.../PageConfigPanel/PdfConfig/ConvertPageToPdfWhenExistingModal/ConvertChoicesModal.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { formLayoutSettingsMock, renderWithProviders } from '@altinn/ux-editor/testing/mocks';
 import { ConvertChoicesModal } from '@altinn/ux-editor/components/Properties/PageConfigPanel/PdfConfig/ConvertPageToPdfWhenExistingModal/ConvertChoicesModal';
 import { textMock } from '@studio/testing/mocks/i18nMock';
@@ -13,7 +13,6 @@ import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
 
-const onCloseMock = jest.fn();
 const selectedLayoutSet = layoutSet1NameMock;
 
 describe('ConvertChoicesModal', () => {
@@ -22,7 +21,7 @@ describe('ConvertChoicesModal', () => {
     const user = userEvent.setup();
     const pdfLayoutNameMock = 'pdfLayoutNameMock';
     const mutateLayoutSettingsMock = jest.fn();
-    renderConvertChoicesModal(
+    await renderConvertChoicesModal(
       { pages: { order: [layout1NameMock], pdfLayoutName: pdfLayoutNameMock } },
       {},
       { saveFormLayoutSettings: mutateLayoutSettingsMock },
@@ -42,7 +41,7 @@ describe('ConvertChoicesModal', () => {
     const pdfLayoutNameMock = 'pdfLayoutNameMock';
     const mutateLayoutSettingsMock = jest.fn();
     const deleteLayoutMock = jest.fn();
-    renderConvertChoicesModal(
+    await renderConvertChoicesModal(
       { pages: { order: [layout1NameMock], pdfLayoutName: pdfLayoutNameMock } },
       {},
       { saveFormLayoutSettings: mutateLayoutSettingsMock, deleteFormLayout: deleteLayoutMock },
@@ -60,19 +59,22 @@ describe('ConvertChoicesModal', () => {
   });
 });
 
-const renderConvertChoicesModal = (
+const renderConvertChoicesModal = async (
   layoutSettings: Partial<ILayoutSettings> = {},
   appContextProps: Partial<AppContextProps> = {},
   queries: Partial<ServicesContextProps> = {},
 ) => {
+  const ref = createRef<HTMLDialogElement>();
   const queryClient = createQueryClientMock();
   queryClient.setQueryData([QueryKey.FormLayoutSettings, org, app, selectedLayoutSet], {
     ...formLayoutSettingsMock,
     ...layoutSettings,
   });
-  renderWithProviders(<ConvertChoicesModal showConvertChoices={true} onClose={onCloseMock} />, {
+  renderWithProviders(<ConvertChoicesModal ref={ref}/>, {
     queries,
     queryClient,
     appContextProps,
   });
+  ref.current?.showModal();
+  await screen.findByRole('dialog');
 };
diff --git a/...rties/PageConfigPanel/PdfConfig/ConvertPageToPdfWhenExistingModal/ConvertChoicesModal.tsx b/...rties/PageConfigPanel/PdfConfig/ConvertPageToPdfWhenExistingModal/ConvertChoicesModal.tsx
@@ -1,56 +1,50 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { StudioModal } from '@studio/components';
+import { useForwardedRef } from '@studio/hooks';
 import { OverrideCurrentPdfByConversionChoices } from './OverrideCurrentPdfByConversionChoices';
-import { Heading } from '@digdir/designsystemet-react';
 import { useTranslation } from 'react-i18next';
 import { usePdf } from '@altinn/ux-editor/hooks/usePdf/usePdf';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useAppContext } from '@altinn/ux-editor/hooks';
 import { useDeleteLayoutMutation } from '@altinn/ux-editor/hooks/mutations/useDeleteLayoutMutation';
 import { useSavableFormLayoutSettings } from '@altinn/ux-editor/hooks/useSavableFormLayoutSettings';
 
-type ConvertChoicesModalProps = {
-  showConvertChoices: boolean;
-  onClose: () => void;
-};
-export const ConvertChoicesModal = ({ showConvertChoices, onClose }: ConvertChoicesModalProps) => {
+export const ConvertChoicesModal = forwardRef<HTMLDialogElement, {}>(({}, ref): JSX.Element => {
   const { org, app } = useStudioEnvironmentParams();
   const { selectedFormLayoutSetName } = useAppContext();
   const { t } = useTranslation();
   const { mutate: deleteLayout } = useDeleteLayoutMutation(org, app, selectedFormLayoutSetName);
   const { getPdfLayoutName, convertCurrentPageToPdf, convertExistingPdfToPage } = usePdf();
   const savableLayoutSettings = useSavableFormLayoutSettings();
+  const dialogRef = useForwardedRef<HTMLDialogElement>(ref);
 
   const handleConvertPageToPdfAndConvertCurrent = () => {
     convertExistingPdfToPage();
     convertCurrentPageToPdf();
     savableLayoutSettings.save();
-    onClose();
+    dialogRef.current?.close();
   };
 
   const handleConvertPageToPdfAndDeleteCurrent = () => {
     const currentPdfLayoutName = getPdfLayoutName();
     convertCurrentPageToPdf();
     deleteLayout(currentPdfLayoutName);
     savableLayoutSettings.save();
-    onClose();
+    dialogRef.current?.close();
   };
 
   return (
-    <StudioModal
-      isOpen={showConvertChoices}
-      onClose={onClose}
-      title={
-        <Heading level={1} size='small'>
-          {t('ux_editor.page_config_pdf_convert_page_to_pdf')}
-        </Heading>
-      }
-      closeButtonLabel={t('ux_editor.page_config_pdf_abort_converting_page_to_pdf')}
+    <StudioModal.Dialog
+      closeButtonTitle={t('ux_editor.page_config_pdf_abort_converting_page_to_pdf')}
+      heading={t('ux_editor.page_config_pdf_convert_page_to_pdf')}
+      ref={dialogRef}
     >
       <OverrideCurrentPdfByConversionChoices
         onConvertPageToPdfAndConvertCurrent={handleConvertPageToPdfAndConvertCurrent}
         onConvertPageToPdfAndDeleteCurrent={handleConvertPageToPdfAndDeleteCurrent}
       />
-    </StudioModal>
+    </StudioModal.Dialog>
   );
-};
+});
+
+ConvertChoicesModal.displayName = 'ConvertChoicesModal';
diff --git a/...Config/ConvertPageToPdfWhenExistingModal/OverrideCurrentPdfByConversionChoices.module.css b/...Config/ConvertPageToPdfWhenExistingModal/OverrideCurrentPdfByConversionChoices.module.css
@@ -1,10 +1,3 @@
-.modal {
-  padding: var(--fds-spacing-5);
-  display: flex;
-  flex-direction: column;
-  width: 30vw;
-}
-
 .buttonContainer {
   display: flex;
   flex-direction: row;

diff --git a/...tend/packages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfig.tsx b/...tend/packages/ux-editor/src/components/Properties/PageConfigPanel/PdfConfig/PdfConfig.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef } from 'react';
 import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { FileIcon } from '@studio/icons';
@@ -8,14 +8,14 @@ import { useSavableFormLayoutSettings } from '@altinn/ux-editor/hooks/useSavable
 
 export const PdfConfig = () => {
   const { t } = useTranslation();
-  const [showConvertChoices, setShowConvertChoices] = useState<boolean>(false);
   const { isCurrentPagePdf, getPdfLayoutName, convertCurrentPageToPdf, convertExistingPdfToPage } =
     usePdf();
   const savableLayoutSettings = useSavableFormLayoutSettings();
+  const convertChoicesDialogRef = useRef<HTMLDialogElement>(null);
 
   const handleClickConvertButton = () => {
     if (!!getPdfLayoutName()) {
-      setShowConvertChoices(true);
+      convertChoicesDialogRef.current?.showModal();
     } else {
       convertCurrentPageToPdf();
       savableLayoutSettings.save();
@@ -29,12 +29,7 @@ export const PdfConfig = () => {
 
   return (
     <>
-      {showConvertChoices && (
-        <ConvertChoicesModal
-          showConvertChoices={showConvertChoices}
-          onClose={() => setShowConvertChoices(false)}
-        />
-      )}
+      <ConvertChoicesModal ref={convertChoicesDialogRef} />
       {isCurrentPagePdf() ? (
         <StudioProperty.Button
           onClick={handleConvertExistingPdfToFormLayout}