Bugfix: error messages aren't displayed as translated strings (#2160)

## Summary:
Proposing a bug fix for error messages not showing up as translated: https://khanacademy.slack.com/archives/C06FULVQLSV/p1738014199191129?thread_ts=1738012970.693379&cid=C06FULVQLSV

**What I thought we were doing:** Originally I thought `strings` were getting replaced during the translation process (I don't know why I thought that). So we were mapping error codes to error strings directly off of `strings`.

**What we were actually doing:** `strings` isn't actually changed, it's used to make a new object that has all of the translated strings in it. So we were pulling the English strings off of the base object that was used to create a separate translated object.

**What this PR does:** instead of pulling from `strings`, we instead pass the translated strings into `mapErrorToString`. Then we map an error code to a key that we use to access the translated message from the passed in object.

## Test plan:
- Go into a non-English language (like Portuguese)
- Go to a Radio widget that requires multiple selections
- Select one right answer, but not all right answers
- Submit question
- There should be an error message displayed
  - broken: that message will be English
  - patched: that message will be Portuguese

Author: handeyeco

Reviewers: jeresig, catandthemachines

Required Reviewers:

Approved By: jeresig, catandthemachines

Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x)

Pull Request URL: #2160

.changeset/wise-insects-occur.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Bugfix: use translated strings in mapErrorToString

packages/perseus/src/strings.test.ts

@@ -0,0 +1,18 @@
+import {clone} from "../../../testing/object-utils";
+
+import {mapErrorToString, mockStrings} from "./strings";
+
+describe("mapErrorToString", () => {
+    it("handles translated strings", () => {
+        // Assemble
+        const translated = clone(mockStrings);
+        translated.MISSING_PERCENT_ERROR =
+            "pretend this is a different language";
+
+        // Act
+        const rv = mapErrorToString("MISSING_PERCENT_ERROR", translated);
+
+        // Assert
+        expect(rv).toBe("pretend this is a different language");
+    });
+});

packages/perseus/src/strings.ts

@@ -976,26 +976,36 @@ export const mockStrings: PerseusStrings = {
 
 // This type helps us make sure all error codes are mapped to strings
 type ErrorStringMap = {
-    [K in keyof typeof ErrorCodes]: string;
+    [K in keyof typeof ErrorCodes]: keyof PerseusStrings;
 };
 
+/**
+ * Map an error string to a PerseusStrings key
+ * that we can use to get the translated error message
+ */
 const errorToString: ErrorStringMap = {
-    MISSING_PERCENT_ERROR: strings.MISSING_PERCENT_ERROR,
-    NEEDS_TO_BE_SIMPLIFIED_ERROR: strings.NEEDS_TO_BE_SIMPLFIED_ERROR,
-    APPROXIMATED_PI_ERROR: strings.APPROXIMATED_PI_ERROR,
-    EXTRA_SYMBOLS_ERROR: strings.EXTRA_SYMBOLS_ERROR,
-    WRONG_CASE_ERROR: strings.WRONG_CASE_ERROR,
-    WRONG_LETTER_ERROR: strings.WRONG_LETTER_ERROR,
-    MULTIPLICATION_SIGN_ERROR: strings.MULTIPLICATION_SIGN_ERROR,
-    INVALID_SELECTION_ERROR: strings.invalidSelection,
-    CHOOSE_CORRECT_NUM_ERROR: strings.chooseCorrectNum,
-    NOT_NONE_ABOVE_ERROR: strings.notNoneOfTheAbove,
-    FILL_ALL_CELLS_ERROR: strings.fillAllCells,
+    MISSING_PERCENT_ERROR: "MISSING_PERCENT_ERROR",
+    NEEDS_TO_BE_SIMPLIFIED_ERROR: "NEEDS_TO_BE_SIMPLFIED_ERROR",
+    APPROXIMATED_PI_ERROR: "APPROXIMATED_PI_ERROR",
+    EXTRA_SYMBOLS_ERROR: "EXTRA_SYMBOLS_ERROR",
+    WRONG_CASE_ERROR: "WRONG_CASE_ERROR",
+    WRONG_LETTER_ERROR: "WRONG_LETTER_ERROR",
+    MULTIPLICATION_SIGN_ERROR: "MULTIPLICATION_SIGN_ERROR",
+    INVALID_SELECTION_ERROR: "invalidSelection",
+    CHOOSE_CORRECT_NUM_ERROR: "chooseCorrectNum",
+    NOT_NONE_ABOVE_ERROR: "notNoneOfTheAbove",
+    FILL_ALL_CELLS_ERROR: "fillAllCells",
 };
 
-export function mapErrorToString(err: string | null | undefined) {
+export function mapErrorToString(
+    // the string representing an error code
+    err: string | null | undefined,
+    // the translated Perseus strings
+    translatedStrings: PerseusStrings,
+) {
     if (!err) {
         return err;
     }
-    return errorToString[err] || err;
+
+    return translatedStrings[errorToString[err]] || err;
 }

packages/perseus/src/widgets/graded-group/graded-group.tsx

@@ -192,7 +192,7 @@ export class GradedGroup
             score.type === "points"
                 ? score.message || ""
                 : score.message
-                  ? `${INVALID_MESSAGE_PREFIX} ${mapErrorToString(score.message)}`
+                  ? `${INVALID_MESSAGE_PREFIX} ${mapErrorToString(score.message, this.context.strings)}`
                   : `${INVALID_MESSAGE_PREFIX} ${DEFAULT_INVALID_MESSAGE_1}${DEFAULT_INVALID_MESSAGE_2}`;
 
         this.setState({