@openmrs/esm-form-builder-app 3.1.1-pre.2178 → 3.1.1-pre.2185

package/dist/openmrs-esm-form-builder-app.js.buildmanifest.json

@@ -188,9 +188,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 707267,
+      "size": 709847,
       "sizes": {
-        "javascript": 707267
+        "javascript": 709847
       },
       "names": [],
       "idHints": [],
@@ -204,7 +204,7 @@
       "auxiliaryFiles": [
         "1208.js.map"
       ],
-      "hash": "70d3ba3c975d31e9",
+      "hash": "561f892439c8a5d1",
       "childrenByOrder": {}
     },
     {
@@ -617,9 +617,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 13398,
+      "size": 13468,
       "sizes": {
-        "javascript": 13398
+        "javascript": 13468
       },
       "names": [],
       "idHints": [],
@@ -631,7 +631,7 @@
         "4300.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "5c3b7c8e158103a2",
+      "hash": "7b1f86f0827b1db8",
       "childrenByOrder": {}
     },
     {
@@ -1797,7 +1797,7 @@
       "auxiliaryFiles": [
         "8091.js.map"
       ],
-      "hash": "9589730ab86032cb",
+      "hash": "bb301aa5f424eb42",
       "childrenByOrder": {}
     },
     {
@@ -1987,7 +1987,7 @@
       "auxiliaryFiles": [
         "main.js.map"
       ],
-      "hash": "3c7c8be6655dd104",
+      "hash": "b08048e79f21c17b",
       "childrenByOrder": {}
     },
     {

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"add-form-reference-modal","component":"addFormReferenceModal"},{"name":"question-modal","component":"questionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"},{"name":"edit-translation-modal","component":"editTranslationModal"}],"version":"3.1.1-pre.2178"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"add-form-reference-modal","component":"addFormReferenceModal"},{"name":"question-modal","component":"questionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"},{"name":"edit-translation-modal","component":"editTranslationModal"}],"version":"3.1.1-pre.2185"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "3.1.1-pre.2178",
+  "version": "3.1.1-pre.2185",
   "license": "MPL-2.0",
   "description": "Form Builder for O3",
   "browser": "dist/openmrs-esm-form-builder-app.js",

package/src/components/translation-builder/translation-builder.component.tsx

@@ -19,28 +19,26 @@ const TranslationBuilder: React.FC<TranslationBuilderProps> = ({ formSchema, onU
   const [translations, setTranslations] = useState<Record<string, string>>({});
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [downloadError, setDownloadError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<'all' | 'translated' | 'untranslated'>('all');
 
   const langCode = selectedLanguageCode;
 
+  const fallbackStrings = useMemo(() => {
+    return formSchema ? extractTranslatableStrings(formSchema) : {};
+  }, [formSchema]);
+
   useEffect(() => {
     if (!formSchema) return;
     const translationsMap = formSchema.translations as Record<string, Record<string, string>> | undefined;
-
     const schemaTranslations = translationsMap?.[langCode];
-    if (schemaTranslations) {
-      setTranslations(schemaTranslations);
-    } else {
-      const fallbackStrings = extractTranslatableStrings(formSchema);
-      setTranslations(fallbackStrings);
-    }
-  }, [formSchema, langCode]);
+    setTranslations(schemaTranslations ?? fallbackStrings);
+  }, [formSchema, langCode, fallbackStrings]);
 
   const handleUpdateValue = useCallback(
     (key: string, newValue: string) => {
       const updatedTranslations = { ...translations, [key]: newValue };
       setTranslations(updatedTranslations);
-
       if (formSchema) {
         const updatedSchema = { ...formSchema };
         if (!updatedSchema.translations) {
@@ -70,25 +68,61 @@ const TranslationBuilder: React.FC<TranslationBuilderProps> = ({ formSchema, onU
     [translations, handleUpdateValue],
   );
 
-  const fallbackStrings: Record<string, string> = useMemo(() => {
-    return formSchema ? extractTranslatableStrings(formSchema) : {};
-  }, [formSchema]);
-
-  const isTranslated: (key: string, value: string | undefined | null) => boolean = (key, value) => {
+  const downloadableTranslationResource = useMemo(() => {
+    if (!formSchema) return null;
+    const schemaTranslations = formSchema.translations?.[langCode];
+    const translationsToExport = langCode === 'en' ? fallbackStrings : schemaTranslations;
+
+    if (!translationsToExport) return null;
+
+    return new Blob(
+      [
+        JSON.stringify(
+          {
+            uuid: formSchema.uuid || '',
+            form: formSchema.name,
+            description: `${langCode.toUpperCase()} Translations for '${formSchema.name}'`,
+            language: langCode,
+            translations: translationsToExport,
+          },
+          null,
+          2,
+        ),
+      ],
+      { type: 'application/json' },
+    );
+  }, [formSchema, langCode, fallbackStrings]);
+
+  const isTranslated = (key: string, value: string | undefined | null): boolean => {
     const fallback = fallbackStrings[key] ?? '';
     return value != null && value.trim() !== '' && value.trim() !== fallback.trim();
   };
 
-  const filteredTranslations: Array<[string, string]> = Object.entries(translations).filter(([key, value]) => {
-    if (activeTab === 'translated') {
-      return isTranslated(key, value);
-    }
-    if (activeTab === 'untranslated') {
-      return !isTranslated(key, value);
-    }
+  const filteredTranslations = Object.entries(translations).filter(([key, value]) => {
+    if (activeTab === 'translated') return isTranslated(key, value);
+    if (activeTab === 'untranslated') return !isTranslated(key, value);
     return true;
   });
 
+  const handleDownloadTranslation = useCallback(() => {
+    setDownloadError(null);
+    if (!downloadableTranslationResource) {
+      if (langCode !== 'en') {
+        setDownloadError(t('noTranslationForLang', 'No translations found for selected language.'));
+      }
+      return;
+    }
+
+    const url = URL.createObjectURL(downloadableTranslationResource);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${formSchema?.name}_translations_${langCode}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [downloadableTranslationResource, langCode, formSchema?.name, t]);
+
   return (
     <div className={styles.translationBuilderContainer}>
       <div className={styles.translationBuilderHeader}>
@@ -124,7 +158,12 @@ const TranslationBuilder: React.FC<TranslationBuilderProps> = ({ formSchema, onU
             }}
           />
 
-          <IconButton kind="ghost" label={t('downloadTranslation', 'Download translation')} size="md">
+          <IconButton
+            kind="ghost"
+            label={t('downloadTranslation', 'Download translation')}
+            size="md"
+            onClick={handleDownloadTranslation}
+          >
             <Download />
           </IconButton>
         </div>
@@ -135,42 +174,53 @@ const TranslationBuilder: React.FC<TranslationBuilderProps> = ({ formSchema, onU
       ) : error ? (
         <InlineNotification kind="error" title={t('error', 'Error')} subtitle={error} lowContrast />
       ) : (
-        <div className={styles.translationEditor}>
-          {filteredTranslations.length > 0 ? (
-            filteredTranslations.map(([key, value]) => (
-              <div key={key} className={styles.translationRow}>
-                <div className={styles.translationKey}>{key}</div>
-                <div className={styles.translatedKey}>{value}</div>
-                <div className={styles.inlineControls}>
-                  <IconButton
-                    kind="ghost"
-                    label={t('editString', 'Edit string')}
-                    onClick={() => {
-                      handleEditClick(key);
-                    }}
-                    size="md"
-                    className={styles.deleteButton}
-                  >
-                    <Edit />
-                  </IconButton>
-                </div>
-              </div>
-            ))
-          ) : (
+        <>
+          {downloadError && (
             <InlineNotification
-              kind="info"
-              subtitle={
-                activeTab === 'translated'
-                  ? t('noTranslatedStrings', 'No strings are translated yet.')
-                  : activeTab === 'untranslated'
-                    ? t('noUntranslatedStrings', 'All strings are translated.')
-                    : t('noTranslations', 'No translatable strings found.')
-              }
-              hideCloseButton
+              className={styles.downloadError}
+              kind="error"
+              title={t('error', 'Error')}
+              subtitle={downloadError}
               lowContrast
+              onClose={() => setDownloadError(null)}
             />
           )}
-        </div>
+
+          <div className={styles.translationEditor}>
+            {filteredTranslations.length > 0 ? (
+              filteredTranslations.map(([key, value]) => (
+                <div key={key} className={styles.translationRow}>
+                  <div className={styles.translationKey}>{key}</div>
+                  <div className={styles.translatedKey}>{value}</div>
+                  <div className={styles.inlineControls}>
+                    <IconButton
+                      kind="ghost"
+                      label={t('editString', 'Edit string')}
+                      onClick={() => handleEditClick(key)}
+                      size="md"
+                      className={styles.deleteButton}
+                    >
+                      <Edit />
+                    </IconButton>
+                  </div>
+                </div>
+              ))
+            ) : (
+              <InlineNotification
+                kind="info"
+                subtitle={
+                  activeTab === 'translated'
+                    ? t('noTranslatedStrings', 'No strings are translated yet.')
+                    : activeTab === 'untranslated'
+                      ? t('noUntranslatedStrings', 'All strings are translated.')
+                      : t('noTranslations', 'No translatable strings found.')
+                }
+                hideCloseButton
+                lowContrast
+              />
+            )}
+          </div>
+        </>
       )}
     </div>
   );

package/src/components/translation-builder/translation-builder.module.scss

@@ -94,3 +94,7 @@
     font-weight: 600;
   }
 }
+
+.downloadError {
+  margin-top: layout.$spacing-05;
+}