autosave unsaved global translation connections when publishing

Author: magnurh-cx

Diff for: packages/bygger/src/Forms/publish/ConfirmPublishModal.tsx

@@ -1,22 +1,44 @@
 import { ConfirmationModal } from '@navikt/skjemadigitalisering-shared-components';
-import { Form, localizationUtils } from '@navikt/skjemadigitalisering-shared-domain';
+import { Form, FormsApiFormTranslation, localizationUtils } from '@navikt/skjemadigitalisering-shared-domain';
+import { useFeedbackEmit } from '../../context/notifications/FeedbackContext';
 import { useForm } from '../../context/old_form/FormContext';
+import { useFormTranslations } from '../../context/translations/FormTranslationsContext';
 
 interface Props {
   form: Form;
   open: boolean;
   onClose: () => void;
   publishLanguageCodeList: string[];
+  unsavedGlobalTranslations: FormsApiFormTranslation[];
 }
 
-const ConfirmPublishModal = ({ open, onClose, form, publishLanguageCodeList }: Props) => {
+const ConfirmPublishModal = ({ open, onClose, form, publishLanguageCodeList, unsavedGlobalTranslations }: Props) => {
   const { publishForm } = useForm();
+  const { saveTranslation, loadTranslations } = useFormTranslations();
+  const feedbackEmit = useFeedbackEmit();
+
   const languageCodes = publishLanguageCodeList.map(localizationUtils.getLanguageCodeAsIso639_1);
 
+  const handlePublish = async () => {
+    if (unsavedGlobalTranslations.length > 0) {
+      try {
+        await Promise.all(unsavedGlobalTranslations.map(saveTranslation));
+        await loadTranslations();
+      } catch (error) {
+        const message = (error as Error)?.message;
+        feedbackEmit.error(
+          `Autolagring av oversettelser feilet. Prøv å laste siden på nytt og forsøk å publisere på nytt. ${message}`,
+        );
+        return;
+      }
+    }
+    await publishForm(form, languageCodes);
+  };
+
   return (
     <ConfirmationModal
       open={open}
-      onConfirm={() => publishForm(form, languageCodes)}
+      onConfirm={handlePublish}
       onClose={onClose}
       texts={{
         title: 'Publiseringsadvarsel',

Diff for: packages/bygger/src/Forms/publish/PublishModalComponents.tsx

@@ -1,6 +1,9 @@
 import { ConfirmationModal, useModal } from '@navikt/skjemadigitalisering-shared-components';
 import { Form, navFormUtils } from '@navikt/skjemadigitalisering-shared-domain';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { useFormTranslations } from '../../context/translations/FormTranslationsContext';
+import { useGlobalTranslations } from '../../context/translations/GlobalTranslationsContext';
+import { generateAndPopulateTranslationsForForm } from '../../translations/utils/editFormTranslationsUtils';
 import LockedFormModal from '../lockedFormModal/LockedFormModal';
 import ConfirmPublishModal from './ConfirmPublishModal';
 import PublishSettingsModal from './PublishSettingsModal';
@@ -27,6 +30,8 @@ const PublishModalComponents = ({
   const [userMessageModal, setUserMessageModal] = useModal();
   const [lockedFormModal, setLockedFormModal] = useModal();
   const [selectedLanguageCodeList, setSelectedLanguageCodeList] = useState<string[]>([]);
+  const { storedTranslations: globalTranslations, isReady: isFormTranslationsReady } = useGlobalTranslations();
+  const { storedTranslations: formTranslations, isReady: isGlobalTranslationsReady } = useFormTranslations();
   const isLockedForm = !!form.lock;
 
   useEffect(() => {
@@ -53,6 +58,16 @@ const PublishModalComponents = ({
     setLockedFormModal,
   ]);
 
+  const unsavedGlobalTranslations = useMemo(
+    () =>
+      isFormTranslationsReady && isGlobalTranslationsReady
+        ? generateAndPopulateTranslationsForForm(form, {}, globalTranslations).filter(
+            (translation) => !formTranslations[translation.nb ?? translation.key],
+          )
+        : [],
+    [form, formTranslations, globalTranslations, isFormTranslationsReady, isGlobalTranslationsReady],
+  );
+
   return (
     <>
       <PublishSettingsModal
@@ -63,12 +78,14 @@ const PublishModalComponents = ({
           setSelectedLanguageCodeList(languageCodes);
         }}
         form={form}
+        unsavedGlobalTranslations={unsavedGlobalTranslations}
       />
       <ConfirmPublishModal
         open={openConfirmPublishModal}
         onClose={() => setOpenConfirmPublishModal(false)}
         form={form}
         publishLanguageCodeList={selectedLanguageCodeList}
+        unsavedGlobalTranslations={unsavedGlobalTranslations}
       />
       <ConfirmationModal
         open={userMessageModal}

Diff for: packages/bygger/src/Forms/publish/PublishSettingsModal.tsx

@@ -1,8 +1,9 @@
 import { Alert, Checkbox, CheckboxGroup, Heading } from '@navikt/ds-react';
 import { ConfirmationModal, i18nUtils, makeStyles } from '@navikt/skjemadigitalisering-shared-components';
-import { Form, I18nTranslations } from '@navikt/skjemadigitalisering-shared-domain';
+import { Form, FormsApiFormTranslation, I18nTranslations } from '@navikt/skjemadigitalisering-shared-domain';
 import { useEffect, useState } from 'react';
 import { useFormTranslations } from '../../context/translations/FormTranslationsContext';
+import { useGlobalTranslations } from '../../context/translations/GlobalTranslationsContext';
 import { getFormTextsWithoutCountryNames } from '../../translations/utils/formTextsUtils';
 import FormStatus from '../status/FormStatus';
 import { allLanguagesInNorwegian } from '../status/PublishedLanguages';
@@ -29,6 +30,7 @@ interface Props {
   open: boolean;
   onClose: () => void;
   onConfirm: (languageCodes: string[]) => void;
+  unsavedGlobalTranslations: FormsApiFormTranslation[];
 }
 
 export const getCompleteTranslationLanguageCodeList = (
@@ -52,8 +54,9 @@ export const getCompleteTranslationLanguageCodeList = (
   return completeTranslationList;
 };
 
-const PublishSettingsModal = ({ open, onClose, onConfirm, form }: Props) => {
-  const { translations } = useFormTranslations();
+const PublishSettingsModal = ({ open, onClose, onConfirm, form, unsavedGlobalTranslations }: Props) => {
+  const { translations: formTranslations } = useFormTranslations();
+  const { translations: globalTranslations } = useGlobalTranslations();
   const [allFormOriginalTexts, setAllFormOriginalTexts] = useState<string[]>([]);
   const [completeTranslationLanguageCodeList, setCompleteTranslationLanguageCodeList] = useState<string[]>([]);
   const [checkedLanguages, setCheckedLanguages] = useState<string[]>([]);
@@ -67,14 +70,23 @@ const PublishSettingsModal = ({ open, onClose, onConfirm, form }: Props) => {
   }, [form]);
 
   useEffect(() => {
-    const i18n = i18nUtils.mapFormsApiTranslationsToI18n(translations);
-    const completeTranslations = getCompleteTranslationLanguageCodeList(allFormOriginalTexts, i18n);
+    const i18n = i18nUtils.mapFormsApiTranslationsToI18n([...formTranslations]);
+    const skipWhenCheckingForCompleteTranslations = unsavedGlobalTranslations.map((translation) => translation.key);
+    const originalTextsExcludingUnsavedGlobalTranslations = allFormOriginalTexts.filter(
+      (text) => !skipWhenCheckingForCompleteTranslations.includes(text),
+    );
+
+    const completeTranslations = getCompleteTranslationLanguageCodeList(
+      originalTextsExcludingUnsavedGlobalTranslations,
+      i18n,
+    );
+
     const sanitizedCompleteTranslations = completeTranslations
       .map((langCode) => (langCode.length > 2 ? langCode.substring(0, 2) : langCode))
       .filter(skipBokmal);
     setCompleteTranslationLanguageCodeList([...sanitizedCompleteTranslations, 'nb']);
     setCheckedLanguages([...sanitizedCompleteTranslations, 'nb']);
-  }, [allFormOriginalTexts, translations]);
+  }, [allFormOriginalTexts, formTranslations, globalTranslations, unsavedGlobalTranslations]);
 
   const PublishStatusPanel = ({ form }: { form: Form }) => {
     const statusPanelStyles = useStatusPanelStyles();

Diff for: packages/bygger/src/translations/form/FormTranslationsPage.tsx

@@ -34,9 +34,9 @@ const FormTranslationsPage = ({ form }: Props) => {
 
   const initialChanges = useMemo(() => {
     if (isTranslationsReady && isGlobalTranslationsReady) {
-      return translations
-        .map((row) => (row.globalTranslationId && !storedTranslations[row.key]?.globalTranslationId ? row : undefined))
-        .filter((value) => !!value);
+      return translations.filter(
+        (translation) => translation.globalTranslationId && !storedTranslations[translation.key]?.globalTranslationId,
+      );
     }
   }, [isGlobalTranslationsReady, isTranslationsReady, translations, storedTranslations]);