Categorizer UserInput parsing issue (null / undefined values) (#2758)

## Summary:

Categorizer user input was typed as `number[]`. _Correct_ answers can only be `number[]` but incomplete user input could be `Array<number | undefined>`. To complicate things, `JSON.stringify` converts `[undefined, 2]` to `[null,2]` so the backend also needs to support `null`.

So fix the parser to handle number, undefined, or  null.

Issue: LEMS-3344

Author: handeyeco

Reviewers: benchristel, catandthemachines, Myranae

Required Reviewers:

Approved By: benchristel, catandthemachines

Checks: ✅ 10 checks were successful

Pull Request URL: #2758

Author: handeyeco

.changeset/weak-dots-wave.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-core": patch
+---
+
+Bugfix: Categorizer user input parser needs to handle undefined and null, not just numbers

packages/perseus-core/src/parse-perseus-json/perseus-parsers/categorizer-user-input.test.ts

@@ -0,0 +1,30 @@
+import {parse} from "../parse";
+import {success} from "../result";
+
+import {parseCategorizerUserInput} from "./categorizer-user-input";
+
+describe("parseCategorizerUserInput", () => {
+    it("handles undefined", () => {
+        const userInput = {
+            values: [undefined, 2],
+        };
+
+        expect(parse(userInput, parseCategorizerUserInput)).toEqual(
+            success({
+                values: [undefined, 2],
+            }),
+        );
+    });
+
+    it("handles null", () => {
+        const userInput = {
+            values: [null, 2],
+        };
+
+        expect(parse(userInput, parseCategorizerUserInput)).toEqual(
+            success({
+                values: [null, 2],
+            }),
+        );
+    });
+});

packages/perseus-core/src/parse-perseus-json/perseus-parsers/categorizer-user-input.ts

@@ -1,5 +1,11 @@
-import {object, array, number} from "../general-purpose-parsers";
+import {
+    object,
+    array,
+    number,
+    optional,
+    nullable,
+} from "../general-purpose-parsers";
 
 export const parseCategorizerUserInput = object({
-    values: array(number),
+    values: array(optional(nullable(number))),
 });

packages/perseus-core/src/validation.types.ts

@@ -87,7 +87,7 @@ export type PerseusCategorizerRubric = {
 } & PerseusCategorizerValidationData;
 
 export type PerseusCategorizerUserInput = {
-    values: PerseusCategorizerRubric["values"];
+    values: Array<number | null | undefined>;
 };
 
 export type PerseusCategorizerValidationData = {

packages/perseus/src/widget-ai-utils/categorizer/categorizer-ai-utils.ts

@@ -8,7 +8,7 @@ export type CategorizerPromptJSON = {
         categories: ReadonlyArray<string>;
     };
     userInput: {
-        itemToCategoryMapping: ReadonlyArray<number>;
+        itemToCategoryMapping: ReadonlyArray<number | null | undefined>;
     };
 };
 

packages/perseus/src/widgets/categorizer/categorizer.tsx

@@ -69,7 +69,7 @@ export class Categorizer
         return _getPromptJSON(this.props);
     }
 
-    _handleUserInput(itemNum, catNum) {
+    _handleUserInput(itemNum: number, catNum: number) {
         const values = [...this.props.userInput.values];
         values[itemNum] = catNum;
         this.props.handleUserInput({values});