From 9d68c317797123d982d627ac5b8444236cb06e27 Mon Sep 17 00:00:00 2001
From: Liam Mulhall <liammulh@gmail.com>
Date: Thu, 5 Jan 2023 16:34:06 -0700
Subject: [PATCH] fix: add curly brace pattern validation for shared strings

See https://github.com/phetsims/rosetta/issues/350.
---
 src/client/components/InputErrorMessage.jsx   | 50 ++++++++++---------
 .../components/TranslationFormTables.jsx      |  2 +-
 src/client/js/computeTranslatedStringsData.js |  2 +-
 src/client/js/makeValidationSchema.js         |  5 +-
 src/client/js/submitTranslation.js            |  2 +-
 src/{client/js => common}/KeyTypesEnum.js     |  0
 6 files changed, 32 insertions(+), 29 deletions(-)
 rename src/{client/js => common}/KeyTypesEnum.js (100%)

diff --git a/src/client/components/InputErrorMessage.jsx b/src/client/components/InputErrorMessage.jsx
index 2a5e6dfc..658a6df6 100644
--- a/src/client/components/InputErrorMessage.jsx
+++ b/src/client/components/InputErrorMessage.jsx
@@ -7,6 +7,7 @@
  */
 
 import { useContext } from 'react';
+import KeyTypesEnum from '../../common/KeyTypesEnum.js';
 import { ErrorContext } from './TranslationForm.jsx';
 import questionOctagon from '../img/question-octagon.svg';
 
@@ -21,15 +22,15 @@ const InputErrorMessage = ( { fieldKey } ) => {
     marginLeft: '6px'
   };
   const tooltip = 'Curly brace patterns must match the English version. ' +
-  'The values inside of the curly braces must also match the English version. ' +
-  'These curly brace patterns are values that dynamically change in the sim.\n\n' +
-  'For example, {0}: {1} cannot be translated to {x}: {y}. ' +
-  'However, the order of the {0} and the {1} can change. ' +
-  'So {0}: {1} could be translated to {1}: {0}.\n\n' +
-  'The text outside the curly braces can be changed. ' +
-  'For example, Software Development: {0} could be translated to Software Dev: {0}.\n\n' +
-  'The rules above apply to string keys with double curly braces as well.\n\n' +
-  'For further guidance, please read the user guide.';
+                  'The values inside of the curly braces must also match the English version. ' +
+                  'These curly brace patterns are values that dynamically change in the sim.\n\n' +
+                  'For example, {0}: {1} cannot be translated to {x}: {y}. ' +
+                  'However, the order of the {0} and the {1} can change. ' +
+                  'So {0}: {1} could be translated to {1}: {0}.\n\n' +
+                  'The text outside the curly braces can be changed. ' +
+                  'For example, Software Development: {0} could be translated to Software Dev: {0}.\n\n' +
+                  'The rules above apply to string keys with double curly braces as well.\n\n' +
+                  'For further guidance, please read the user guide.';
   const errorTooltipJsx = (
     <button
       onClick={() => window.alert( tooltip )}
@@ -48,21 +49,22 @@ const InputErrorMessage = ( { fieldKey } ) => {
   const error = useContext( ErrorContext );
   let jsx = null;
   if ( Object.keys( error ).length > 0 ) {
-    if (
-      error.simSpecific &&
-      error.simSpecific[ fieldKey ] &&
-      error.simSpecific[ fieldKey ].translated
-    ) {
-      const errorMessage = error.simSpecific[ fieldKey ].translated;
-      jsx = <>{errorTooltipJsx}<div style={divStyle}>{errorMessage}</div></>;
-    }
-    else if (
-      error.common &&
-      error.common[ fieldKey ] &&
-      error.common[ fieldKey ].translated
-    ) {
-      const errorMessage = error.common[ fieldKey ].translated;
-      jsx = <>{errorTooltipJsx}<div style={divStyle}>{errorMessage}</div></>;
+    for ( const keyType of Object.values( KeyTypesEnum ) ) {
+      if (
+        error[ keyType ] &&
+        error[ keyType ][ fieldKey ] &&
+        error[ keyType ][ fieldKey ].translated
+      ) {
+        const errorMessage = error[ keyType ][ fieldKey ].translated;
+        jsx = (
+          <>
+            {errorTooltipJsx}
+            <div style={divStyle}>
+              {errorMessage}
+            </div>
+          </>
+        );
+      }
     }
   }
   return jsx;
diff --git a/src/client/components/TranslationFormTables.jsx b/src/client/components/TranslationFormTables.jsx
index 085bf233..4c8e5486 100644
--- a/src/client/components/TranslationFormTables.jsx
+++ b/src/client/components/TranslationFormTables.jsx
@@ -10,7 +10,7 @@
 
 import React, { useEffect, useState } from 'react';
 import TranslationFormRow from './TranslationFormRow.jsx';
-import KeyTypesEnum from '../js/KeyTypesEnum.js';
+import KeyTypesEnum from '../../common/KeyTypesEnum.js';
 
 /**
  * This component has some headers, some info, and a table for sim-specific strings and common strings. The header
diff --git a/src/client/js/computeTranslatedStringsData.js b/src/client/js/computeTranslatedStringsData.js
index b489d6d0..0a7c1074 100644
--- a/src/client/js/computeTranslatedStringsData.js
+++ b/src/client/js/computeTranslatedStringsData.js
@@ -1,6 +1,6 @@
 // Copyright 2022, University of Colorado Boulder
 
-import KeyTypesEnum from './KeyTypesEnum.js';
+import KeyTypesEnum from '../../common/KeyTypesEnum.js';
 
 /**
  * Compute the number of strings translated in the translation form. To be presented to user
diff --git a/src/client/js/makeValidationSchema.js b/src/client/js/makeValidationSchema.js
index c186f40d..727ddd76 100644
--- a/src/client/js/makeValidationSchema.js
+++ b/src/client/js/makeValidationSchema.js
@@ -12,6 +12,7 @@ import * as Yup from 'yup';
 import alertErrorMessage from './alertErrorMessage.js';
 import isValidBracePattern from './isValidBracePattern.js';
 import publicConfig from '../../common/publicConfig.js';
+import KeyTypesEnum from '../../common/KeyTypesEnum.js';
 
 /**
  * Return a Yup schema for validating our Formik translation form.
@@ -24,9 +25,8 @@ const makeValidationSchema = translationFormData => {
   let validationSchema;
 
   // We need to iterate over both types of keys.
-  const typesOfKeys = [ 'simSpecific', 'common' ];
   try {
-    for ( const keyType of typesOfKeys ) {
+    for ( const keyType of Object.values( KeyTypesEnum ) ) {
 
       // We have to replace dots in string keys with _DOT_. Otherwise,
       // we might have errors related to the code think there are more
@@ -55,6 +55,7 @@ const makeValidationSchema = translationFormData => {
     }
     const validationObject = {
       simSpecific: Yup.object( subObjects.simSpecific ),
+      shared: Yup.object( subObjects.shared ),
       common: Yup.object( subObjects.common )
     };
     validationSchema = Yup.object().shape( validationObject );
diff --git a/src/client/js/submitTranslation.js b/src/client/js/submitTranslation.js
index 17571228..89316ff7 100644
--- a/src/client/js/submitTranslation.js
+++ b/src/client/js/submitTranslation.js
@@ -10,7 +10,7 @@ import axios from 'axios';
 import alertErrorMessage from './alertErrorMessage.js';
 import publicConfig from '../../common/publicConfig.js';
 import computeTranslatedStringsData from './computeTranslatedStringsData.js';
-import KeyTypesEnum from './KeyTypesEnum.js';
+import KeyTypesEnum from '../../common/KeyTypesEnum.js';
 import makeTranslationObject from './makeTranslationObject.js';
 
 /**
diff --git a/src/client/js/KeyTypesEnum.js b/src/common/KeyTypesEnum.js
similarity index 100%
rename from src/client/js/KeyTypesEnum.js
rename to src/common/KeyTypesEnum.js