Hints: fix hints type on PerseusItem to be correct (#1489)

## Summary:

Our `hints` type on `ItemRenderer` used the `PerseusRenderer` type. That's mostly correct, except that a Hint can also have the `replace` key. 

Issue: "none"

## Test plan:

`yarn typecheck` ✅

Author: jeremywiebe

Reviewers: jeremywiebe, benchristel

Required Reviewers:

Approved By: benchristel

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

Pull Request URL: #1489

Author: jeremywiebe

.changeset/gentle-planes-rest.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Correct `hints` type on ItemRenderer

packages/perseus-editor/src/hint-editor.tsx

@@ -318,14 +318,13 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
         silent: boolean,
     ) => {
         // TODO(joel) - lens
-        const hints = _(this.props.hints).clone();
+        const hints = [...this.props.hints];
         hints[i] = _.extend(
             {},
             this.serializeHint(i, {keepDeletedWidgets: true}),
             newProps,
         );
 
-        // @ts-expect-error - TS2740 - Type 'Hint' is missing the following properties from type 'readonly Hint[]': length, concat, join, slice, and 18 more.
         this.props.onChange({hints: hints}, cb, silent);
     };
 
@@ -335,23 +334,18 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
             return;
         }
 
-        const hints = _(this.props.hints).clone();
-        // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
+        const hints = [...this.props.hints];
         hints.splice(i, 1);
-        // @ts-expect-error - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
         this.props.onChange({hints: hints});
     };
 
     handleHintMove: (i: number, dir: number) => void = (
         i: number,
         dir: number,
     ) => {
-        const hints = _(this.props.hints).clone();
-        // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
+        const hints = [...this.props.hints];
         const hint = hints.splice(i, 1)[0];
-        // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
         hints.splice(i + dir, 0, hint);
-        // @ts-expect-error - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
         this.props.onChange({hints: hints}, () => {
             // eslint-disable-next-line react/no-string-refs
             // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
@@ -360,10 +354,9 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
     };
 
     addHint: () => void = () => {
-        const hints = _(this.props.hints)
-            .clone()
-            // @ts-expect-error - TS2339 - Property 'concat' does not exist on type 'Hint'.
-            .concat([{content: ""}]);
+        const hints = this.props.hints.concat([
+            {content: "", images: {}, widgets: {}},
+        ]);
         this.props.onChange({hints: hints}, () => {
             const i = hints.length - 1;
             // eslint-disable-next-line react/no-string-refs

packages/perseus/src/hints-renderer.tsx

@@ -20,15 +20,14 @@ import mediaQueries from "./styles/media-queries";
 import sharedStyles from "./styles/shared";
 import Util from "./util";
 
+import type {Hint} from "./perseus-types";
 import type Renderer from "./renderer";
 import type {APIOptionsWithDefaults} from "./types";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 type Props = PropsFor<typeof Renderer> & {
     className?: string;
-    // note (mcurtis): I think this should be $ReadOnlyArray<PerseusRenderer>,
-    // but things spiraled out of control when I tried to change it
-    hints: ReadonlyArray<any>;
+    hints: ReadonlyArray<Hint>;
     hintsVisible?: number;
 };
 

packages/perseus/src/index.ts

@@ -152,7 +152,6 @@ export type {
     DomInsertCheckFn,
     EditorMode,
     FocusPath,
-    Hint,
     ImageDict,
     ImageUploader,
     JiptLabelStore,
@@ -167,6 +166,7 @@ export type {
 } from "./types";
 export type {ParsedValue} from "./util";
 export type {
+    Hint,
     LockedFigure,
     LockedFigureColor,
     LockedFigureFillType,

packages/perseus/src/multi-items/multi-renderer.tsx

@@ -319,6 +319,14 @@ class MultiRenderer extends React.Component<Props, State> {
                 <HintsRenderer
                     {...this._getRendererProps()}
                     findExternalWidgets={findExternalWidgets}
+                    // Note(Jeremy): The MultiRenderer codebase types are
+                    // slightly different from the rest of the codebase.
+                    // Ideally `HintNode` would spread the `Hint` type into it,
+                    // but there is a difference in optionality of `widgets`
+                    // and `images` and that causes a huge cascade of type
+                    // errors (they are truly optional, but most of our code
+                    // assumes they're provided/set). Ignoring this for now.
+                    // @ts-expect-error - TS2769 - Type 'HintNode' is not assignable to type 'Hint'.
                     hints={[hint]}
                 />
             ),

packages/perseus/src/perseus-types.ts

@@ -87,7 +87,7 @@ export type PerseusItem = {
     // The details of the question being asked to the user.
     question: PerseusRenderer;
     // A collection of hints to be offered to the user that support answering the question.
-    hints: ReadonlyArray<PerseusRenderer>;
+    hints: ReadonlyArray<Hint>;
     // Details about the tools the user might need to answer the question
     answerArea: PerseusAnswerArea | null | undefined;
     // Multi-item should only show up in Test Prep content and it is a variant of a PerseusItem
@@ -116,8 +116,6 @@ export type PerseusRenderer = {
     content: string;
     // A dictionary of {[widgetName]: Widget} to be referenced from the content field
     widgets: PerseusWidgetsMap;
-    // Used only for PerseusItem.hints.  If true, it replaces the previous hint in the list with the current one. This allows for hints that build upon each other.
-    replace?: boolean;
     // Used in the PerseusGradedGroup widget.  A list of "tags" that are keys that represent other content in the system.  Not rendered to the user.
     // NOTE: perseus_data.go says this is required even though it isn't necessary.
     metadata?: ReadonlyArray<string>;
@@ -127,6 +125,15 @@ export type PerseusRenderer = {
     };
 };
 
+export type Hint = PerseusRenderer & {
+    /**
+     * When `true`, causes the previous hint to be replaced with this hint when
+     * displayed. When `false`, the previous hint remains visible when this one
+     * is displayed. This allows for hints that build upon each other.
+     */
+    replace?: boolean;
+};
+
 export type PerseusImageDetail = {
     // The width of the image
     width: number;

packages/perseus/src/types.ts

@@ -1,8 +1,8 @@
 import type {ILogger} from "./logging/log";
 import type {Item} from "./multi-items/item-types";
 import type {
+    Hint,
     PerseusAnswerArea,
-    PerseusRenderer,
     PerseusWidget,
     PerseusWidgetsMap,
 } from "./perseus-types";
@@ -47,10 +47,6 @@ export type PerseusScore =
           message?: string | null | undefined;
       };
 
-export type Hint = PerseusRenderer & {
-    replace?: boolean;
-};
-
 export type Version = {
     major: number;
     minor: number;

packages/perseus/src/widgets/__testdata__/grapher.testdata.ts

@@ -218,7 +218,6 @@ export const quadraticQuestion: PerseusRenderer = {
     content:
         "In conclusion, the vertex of the parabola is at\n\n$(3,-8)$\n\nand the zeros are\n\n$(5,0)$ and $(1,0)$\n\nIn order to graph, we need the vertex and another point. That other point can be one of the zeros we found, like $(1,0)$:\n\n[[☃ grapher 1]]",
     images: {},
-    replace: false,
     widgets: {
         "grapher 1": {
             alignment: "default",
@@ -268,7 +267,6 @@ export const sinusoidQuestion: PerseusRenderer = {
     content:
         "###The answer\n\nWe found that the graph of $y=-4\\cos\\left(x\\right)+3$ has a minimum point at $(0,-1)$ and then intersects its midline at $\\left(\\dfrac{1}{2}\\pi,3\\right)$.\n\n[[☃ grapher 3]]\n  ",
     images: {},
-    replace: false,
     widgets: {
         "grapher 3": {
             alignment: "default",

packages/perseus/src/widgets/__testdata__/interaction.testdata.ts

@@ -4,7 +4,6 @@ export const question1: PerseusRenderer = {
     content:
         "Drag the dot all the way to the right.\n\n[[☃ interaction 1]]\n\n\n*Notice that we add a zero to the empty place value.* ",
     images: {},
-    replace: false,
     widgets: {
         "interaction 1": {
             alignment: "default",

packages/perseus/src/widgets/__testdata__/video.testdata.ts

@@ -17,7 +17,6 @@ export const question1: PerseusRenderer = {
             alignment: "block",
         },
     },
-    replace: false,
 };
 
 export const question2: PerseusRenderer = {
@@ -37,7 +36,6 @@ export const question2: PerseusRenderer = {
             alignment: "block",
         },
     },
-    replace: false,
 };
 
 export const question3: PerseusRenderer = {
@@ -57,5 +55,4 @@ export const question3: PerseusRenderer = {
             alignment: "block",
         },
     },
-    replace: false,
 };