233 auto translation flag

.github/workflows/run-build-tests.yaml

@@ -1,29 +1,23 @@
 name: Run Build and Tests
-on: push
+on: 
+    push:
+    workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Cache Node.js modules
-        uses: actions/cache@v2
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.OS }}-node-
-            ${{ runner.OS }}-
+          cache: 'npm' # Enable automatic caching for npm
       - run: npm ci
       - run: npm run build --if-present
       - run: npm run test

firebase_to_xml/firebase_to_xml/record_json_to_yaml.py

@@ -30,6 +30,10 @@ def eovs_to_fr(eovs_en):
     """ Translate a list of EOVs in english to a list in french"""
     return [eov_translations.get(eov,"") for eov in eovs_en if eov]
 
+def verify_translation(verified, message):
+    if not verified:
+        return message
+    return ""
 
 def strip_keywords(keywords):
     """Strips whitespace from each keyword in either language"""
@@ -73,6 +77,7 @@ def record_json_to_yaml(record):
             + "https://cioos-siooc.github.io/metadata-entry-form",
             "use_constraints": {
                 "limitations": record.get("limitations", "None"),
+                "limitationsTranslationMethod":  verify_translation(record.get("translationVerifiedLimitations"), record.get("limitationsTranslationMethod")),
                 "licence": licenses.get(
                     record.get(
                         "license",
@@ -103,8 +108,10 @@ def record_json_to_yaml(record):
         },
         "identification": {
             "title": record.get("title"),
+            "titleTranslationMethod":  verify_translation(record.get("translationVerifiedTitle"), record.get("titleTranslationMethod")),
             "identifier": record.get("datasetIdentifier"),
             "abstract": record.get("abstract"),
+            "abstractTranslationMethod":  verify_translation(record.get("translationVerifiedAbstract"), record.get("abstractTranslationMethod")),
             "dates": {
                 "creation": date_from_datetime_str(record.get("dateStart")),
                 "publication": date_from_datetime_str(record.get("datePublished")),
@@ -158,6 +165,7 @@ def record_json_to_yaml(record):
         record_yaml["platform"] = {
             "id": record.get("platformID"),
             "description": record.get("platformDescription"),
+            "platformDescriptionTranslationMethod":  verify_translation(record.get("translationVerifiedPlatformDescription"), record.get("platformDescriptionTranslationMethod")),
             "type": record.get("platform"),
         }
 

src/components/FormComponents/BilingualTextInput.jsx

@@ -1,11 +1,13 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useState, useEffect } from "react";
 import {
   Button,
   InputAdornment,
   TextField,
   CircularProgress,
   Tooltip,
 } from "@material-ui/core";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Checkbox from "@material-ui/core/Checkbox";
 import TranslateIcon from "@material-ui/icons/Translate";
 import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
 import { useParams } from "react-router-dom";
@@ -27,11 +29,6 @@ const BilingualTextInput = ({
   const { translate } = useContext(UserContext);
   const [awaitingTranslation, setAwaitingTranslation] = useState(false);
 
-  function handleEvent(e) {
-    const newData = { ...value, [e.target.name]: e.target.value };
-    const newDataEvent = { target: { name, value: newData } };
-    onChange(newDataEvent);
-  }
   const { language } = useParams();
   let languages;
 
@@ -40,6 +37,66 @@ const BilingualTextInput = ({
 
   if (language === "en") languages = ["en", "fr"];
   else languages = ["fr", "en"];
+  const alternateLanguage = languages[1];
+  const translateChecked =
+    value?.translations?.[alternateLanguage]?.verified || false;
+
+  function setTranslationData(translations, checked) {
+    return {
+      ...translations,
+      [alternateLanguage]: {
+        verified: checked,
+        ...(!checked && {
+          message: `text translated using the Amazon translate service / texte traduit à l'aide du service de traduction Amazon`,
+        }),
+      },
+    };
+  }
+
+  function handleEvent(e) {
+    const { translations, ...rest } = { ...value };
+    const newData = {
+      ...rest,
+      [e.target.name]: e.target.value,
+      ...(e.target.name === alternateLanguage &&
+        e.target.value && {
+          translations: value.translations || setTranslationData({}, false),
+        }),
+    };
+    const newDataEvent = { target: { name, value: newData } };
+    onChange(newDataEvent);
+  }
+
+  function handleTranslateCheckEvent(e) {
+    const { checked } = e.target;
+    const newData = {
+      ...value,
+      translations: setTranslationData(value.translations, checked),
+    };
+    const newDataEvent = { target: { name, value: newData } };
+    onChange(newDataEvent);
+  }
+
+  // Ensure translations field exists on component mount/load
+  useEffect(() => {
+    if (value && !value.translations) {
+      const hasTranslations = value.en && value.fr;
+      if (hasTranslations) {
+        const updatedValue = {
+          ...value,
+          translations: {
+            fr: {
+              verified: false,
+              message:
+                "text translated using the Amazon translate service / texte traduit à l'aide du service de traduction Amazon",
+            },
+          },
+        };
+        onChange({ target: { name, value: updatedValue } });
+      }
+    }
+  }, [name, onChange, value]);
+
   return (
     <div>
       {languages.map((lang, i) => (
@@ -48,7 +105,7 @@ const BilingualTextInput = ({
             name={lang}
             fullWidth
             value={value?.[lang] || ""}
-            onChange={handleEvent}
+            onChange={(e) => handleEvent(e)}
             InputProps={{
               startAdornment: (
                 <InputAdornment position="start">
@@ -87,7 +144,6 @@ const BilingualTextInput = ({
                     textTooBig
                   }
                   onClick={() => {
-                    const alternateLanguage = languages[1];
                     setAwaitingTranslation(true);
 
                     translate({ text: value[lang], fromLang: lang }).then(
@@ -100,6 +156,7 @@ const BilingualTextInput = ({
                             value: translation,
                           },
                         });
+                        // onTranslateComplete();
                       }
                     );
                   }}
@@ -109,6 +166,24 @@ const BilingualTextInput = ({
                     <Fr>Traduire</Fr>
                   </I18n>
                 </Button>
+                {value?.[alternateLanguage] && (
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        checked={translateChecked}
+                        onChange={(e) => handleTranslateCheckEvent(e)}
+                        color="primary"
+                      />
+                    }
+                    label={
+                      <I18n>
+                        <En>I have verified this translation</En>
+                        <Fr>J'ai vérifié cette traduction</Fr>
+                      </I18n>
+                    }
+                  />
+                )}
+
                 {textTooBig && (
                   <I18n>
                     <En>

src/components/FormComponents/Instruments.jsx

@@ -149,6 +149,7 @@ const Instruments = ({
                     </I18n>
                   </Typography>
                   <BilingualTextInput
+                    name="type"
                     label={typeLabel}
                     value={instrument.type}
                     onChange={updateInstrumentField("type")}
@@ -158,6 +159,7 @@ const Instruments = ({
                 <Grid item xs>
                   <Typography>Description</Typography>
                   <BilingualTextInput
+                    name="description"
                     label={descriptionLabel}
                     value={instrument.description}
                     onChange={updateInstrumentField("description")}

src/components/FormComponents/Platform.jsx

@@ -135,6 +135,7 @@ const Platform = ({ record, handleUpdateRecord, disabled }) => {
           </SupplementalText>
         </QuestionText>
         <BilingualTextInput
+          name="platformDescription"
           value={record.platformDescription}
           onChange={handleUpdateRecord("platformDescription")}
           multiline

src/components/FormComponents/Resources.jsx

@@ -94,6 +94,7 @@ const Resources = ({ updateResources, resources, disabled }) => {
                   <RequiredMark passes={resourceItem.name?.en || resourceItem.name?.fr} />
                 </QuestionText>
                 <BilingualTextInput
+                  name="name"
                   label={nameLabel}
                   value={resourceItem.name}
                   onChange={handleResourceChange("name")}

src/components/Tabs/IdentificationTab.jsx

@@ -13,7 +13,7 @@ import { useParams } from "react-router-dom";
 import { OpenInNew, Update } from "@material-ui/icons";
 import { En, Fr, I18n } from "../I18n";
 import { progressCodes } from "../../isoCodeLists";
-import { eovs, eovCategories } from "../../eovs.json";
+import { eovs, eovCategories } from "../../eovs";
 
 import firebase from "../../firebase";
 import BilingualTextInput from "../FormComponents/BilingualTextInput";
@@ -279,6 +279,7 @@ const IdentificationTab = ({
         </QuestionText>
 
         <BilingualTextInput
+          name="title"
           value={record.title}
           onChange={handleUpdateRecord("title")}
           disabled={disabled}
@@ -423,6 +424,7 @@ const IdentificationTab = ({
         </QuestionText>
 
         <BilingualTextInput
+          name="abstract"
           value={record.abstract}
           onChange={handleUpdateRecord("abstract")}
           disabled={disabled}
@@ -739,13 +741,12 @@ const IdentificationTab = ({
             <SupplementalText>
               <I18n>
                 <En>
-                  <p>
-                    Please save the form before generating a draft DOI.
-                  </p>
+                  <p>Please save the form before generating a draft DOI.</p>
                 </En>
                 <Fr>
                   <p>
-                  Veuillez enregistrer le formulaire avant de générer un brouillon de DOI.
+                    Veuillez enregistrer le formulaire avant de générer un
+                    brouillon de DOI.
                   </p>
                 </Fr>
               </I18n>
@@ -779,8 +780,8 @@ const IdentificationTab = ({
             <div style={{ display: "flex", alignItems: "center" }}>
               {loadingDoiUpdate ? (
                 <>
-                    <CircularProgress size={24} style={{ marginRight: "8px" }} />
-                    Loading...
+                  <CircularProgress size={24} style={{ marginRight: "8px" }} />
+                  Loading...
                 </>
               ) : (
                 "Update DOI"
@@ -817,10 +818,7 @@ const IdentificationTab = ({
         )}
         {doiUpdateFlag && (
           <span>
-            <I18n
-              en="DOI has been updated"
-              fr="Le DOI a été mis à jour"
-            />
+            <I18n en="DOI has been updated" fr="Le DOI a été mis à jour" />
           </span>
         )}
 
@@ -988,6 +986,7 @@ const IdentificationTab = ({
           </SupplementalText>
         </QuestionText>
         <BilingualTextInput
+          name="limitations"
           value={record.limitations}
           onChange={handleUpdateRecord("limitations")}
           multiline

src/components/Tabs/ResourcesTab.jsx

@@ -14,6 +14,7 @@ import { validateField } from "../../utils/validate";
 
 const ResourcesTab = ({ disabled, record, updateRecord }) => {
   const updateResources = updateRecord("distribution");
+
   return (
     <div>
       <Paper style={paperClass}>