Merge pull request #1396 from navikt/feat/new-translation-export

Feat/new translation export

packages/bygger/src/old_translations/global/GlobalCsvLink.tsx

@@ -1,11 +1,12 @@
 import { GlobalTranslationMap } from '@navikt/skjemadigitalisering-shared-domain';
-import { useEffect, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 import { CSVLink } from 'react-csv';
 import { getAllPredefinedOriginalTexts, transformGlobalTranslationsToCsvData } from './utils';
 
 interface Props {
   allGlobalTranslations: GlobalTranslationMap;
   languageCode: string;
+  children?: ReactElement | string;
 }
 
 interface CsvData {
@@ -18,7 +19,7 @@ interface CsvHeader {
   key: string;
 }
 
-const GlobalCsvLink = ({ allGlobalTranslations, languageCode }: Props) => {
+const GlobalCsvLink = ({ allGlobalTranslations, languageCode, children }: Props) => {
   const [csvData, setCsvData] = useState<CsvData[]>([]);
   const [csvHeaders, setCsvHeaders] = useState<CsvHeader[]>([]);
 
@@ -42,7 +43,7 @@ const GlobalCsvLink = ({ allGlobalTranslations, languageCode }: Props) => {
       separator=";"
       enclosingCharacter='"'
     >
-      Eksporter
+      {children ? children : 'Eksporter'}
     </CSVLink>
   );
 };

packages/bygger/src/translations/components/ExportGlobalTranslationsButton.tsx

@@ -0,0 +1,38 @@
+import { GlobalTranslationMap, TranslationResource, TranslationTag } from '@navikt/skjemadigitalisering-shared-domain';
+import { ReactElement, useMemo } from 'react';
+import { useGlobalTranslations } from '../../context/translations/GlobalTranslationsContext';
+import GlobalCsvLink from '../../old_translations/global/GlobalCsvLink';
+
+interface Props {
+  language: 'en' | 'nn';
+  children: ReactElement | string;
+}
+
+const ExportGlobalTranslationsButton = ({ language, children }: Props) => {
+  const { translationsPerTag } = useGlobalTranslations();
+
+  const translationsFormioFormat: GlobalTranslationMap = useMemo(() => {
+    const resources: TranslationResource[] = Object.entries(translationsPerTag).map(([tag, translations]) => ({
+      id: 'id',
+      name: tag,
+      scope: 'global',
+      tag: tag as TranslationTag,
+      translations: translations.reduce(
+        (acc, { key, nb, ...translation }) => ({
+          ...acc,
+          [nb ?? key]: { value: translation[language], scope: 'global' },
+        }),
+        {},
+      ),
+    }));
+    return { [language]: resources };
+  }, [language, translationsPerTag]);
+
+  return (
+    <GlobalCsvLink allGlobalTranslations={translationsFormioFormat} languageCode={language}>
+      {children}
+    </GlobalCsvLink>
+  );
+};
+
+export default ExportGlobalTranslationsButton;

packages/bygger/src/translations/global/GlobalTranslationButtonsColumn.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import UserFeedback from '../../components/UserFeedback';
 import { useEditGlobalTranslations } from '../../context/translations/EditGlobalTranslationsContext';
 import { useGlobalTranslations } from '../../context/translations/GlobalTranslationsContext';
+import ExportGlobalTranslationsButton from '../components/ExportGlobalTranslationsButton';
 
 const GlobalTranslationButtonsColumn = () => {
   const [isProcessing, setIsProcessing] = useState<'SAVING' | 'PUBLISHING'>();
@@ -45,9 +46,8 @@ const GlobalTranslationButtonsColumn = () => {
       >
         Publisér
       </Button>
-      <Button variant="tertiary" disabled={!!isProcessing} onClick={() => {}} type="button" size="small">
-        Eksporter
-      </Button>
+      <ExportGlobalTranslationsButton language={'nn'}>{'Eksporter nynorsk'}</ExportGlobalTranslationsButton>
+      <ExportGlobalTranslationsButton language={'en'}>{'Eksporter engelsk'}</ExportGlobalTranslationsButton>
       <UserFeedback />
     </VStack>
   );