Addition of new alert when json is converted.

Khan · Nov 14, 2024 · a4d0dcf · a4d0dcf
1 parent 27126aa
commit a4d0dcf
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/packages/perseus-editor/src/article-editor.tsx b/packages/perseus-editor/src/article-editor.tsx
@@ -6,6 +6,7 @@
 
 import {components, ApiOptions, iconTrash} from "@khanacademy/perseus";
 import {Errors, PerseusError} from "@khanacademy/perseus-core";
+import Banner from "@khanacademy/wonder-blocks-banner";
 import * as React from "react";
 import _ from "underscore";
 
@@ -19,7 +20,10 @@ import {
     iconCircleArrowUp,
     iconPlus,
 } from "./styles/icon-paths";
-import {convertDeprecatedWidgets} from "./util/deprecated-widgets/modernize-widgets-utils";
+import {
+    convertDeprecatedWidgets,
+    conversionRequired,
+} from "./util/deprecated-widgets/modernize-widgets-utils";
 
 import type {
     APIOptions,
@@ -51,6 +55,8 @@ type Props = DefaultProps & {
 type State = {
     highlightLint: boolean;
     json: JsonType;
+    // Whether the Editor should be warned that the JSON has been converted to modern widgets
+    conversionWarningRequired: boolean;
 };
 export default class ArticleEditor extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
@@ -64,11 +70,24 @@ export default class ArticleEditor extends React.Component<Props, State> {
 
     constructor(props: Props) {
         super(props);
+
+        // Check if the json needs to be converted
+        const conversionWarningRequired = conversionRequired(
+            props.json as PerseusRenderer,
+        );
+        let json = props.json;
+
+        // Convert the json if needed
+        if (conversionWarningRequired) {
+            json = Array.isArray(props.json)
+                ? props.json.map(convertDeprecatedWidgets)
+                : convertDeprecatedWidgets(props.json as PerseusRenderer);
+        }
+
         this.state = {
             highlightLint: true,
-            json: Array.isArray(props.json)
-                ? props.json.map(convertDeprecatedWidgets)
-                : convertDeprecatedWidgets(props.json as PerseusRenderer),
+            json,
+            conversionWarningRequired,
         };
     }
 
@@ -417,6 +436,15 @@ export default class ArticleEditor extends React.Component<Props, State> {
     render(): React.ReactNode {
         return (
             <div className="framework-perseus perseus-article-editor">
+                {this.state.conversionWarningRequired && (
+                    <div style={{marginBottom: 10}}>
+                        <Banner
+                            text="Pre-existing Input Number Widgets have been converted to Numeric Inputs. Please review the changes before publishing."
+                            kind="warning"
+                            layout="floating"
+                        />
+                    </div>
+                )}
                 {this.props.mode === "edit" && this._renderEditor()}
 
                 {this.props.mode === "preview" && this._renderPreviewMode()}

diff --git a/packages/perseus-editor/src/editor-page.tsx b/packages/perseus-editor/src/editor-page.tsx
@@ -1,12 +1,16 @@
 import {components, ApiOptions, ClassNames} from "@khanacademy/perseus";
+import Banner from "@khanacademy/wonder-blocks-banner";
 import * as React from "react";
 import _ from "underscore";
 
 import JsonEditor from "./components/json-editor";
 import ViewportResizer from "./components/viewport-resizer";
 import CombinedHintsEditor from "./hint-editor";
 import ItemEditor from "./item-editor";
-import {convertDeprecatedWidgets} from "./util/deprecated-widgets/modernize-widgets-utils";
+import {
+    convertDeprecatedWidgets,
+    conversionRequired,
+} from "./util/deprecated-widgets/modernize-widgets-utils";
 
 import type {
     APIOptions,
@@ -59,6 +63,8 @@ type Props = {
 
 type State = {
     json: PerseusItem;
+    // Whether the Editor should be warned that the JSON has been converted to modern widgets
+    conversionWarningRequired: boolean;
     question: PerseusRenderer;
     gradeMessage: string;
     wasAnswered: boolean;
@@ -88,8 +94,15 @@ class EditorPage extends React.Component<Props, State> {
 
         // Convert any widgets that need to be converted to newer widget types
         let convertedQuestionJson: PerseusRenderer = props.question;
+        let conversionWarningRequired = false;
         if (props.question) {
-            convertedQuestionJson = convertDeprecatedWidgets(props.question);
+            // Check if the question JSON needs to be converted
+            conversionWarningRequired = conversionRequired(props.question);
+            if (conversionWarningRequired) {
+                convertedQuestionJson = convertDeprecatedWidgets(
+                    props.question,
+                );
+            }
         }
 
         const json = {
@@ -102,6 +115,7 @@ class EditorPage extends React.Component<Props, State> {
         this.state = {
             // @ts-expect-error - TS2322 - Type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "hints" | "question" | "answerArea" | "itemDataVersion">' is not assignable to type 'PerseusJson'.
             json: json,
+            conversionWarningRequired: conversionWarningRequired,
             gradeMessage: "",
             wasAnswered: false,
             highlightLint: true,
@@ -246,6 +260,15 @@ class EditorPage extends React.Component<Props, State> {
 
         return (
             <div id="perseus" className={className}>
+                {this.state.conversionWarningRequired && (
+                    <div style={{marginBottom: 10}}>
+                        <Banner
+                            text="Pre-existing Input Number Widgets have been converted to Numeric Inputs. Please review the changes before publishing."
+                            kind="warning"
+                            layout="floating"
+                        />
+                    </div>
+                )}
                 <div style={{marginBottom: 10}}>
                     {this.props.developerMode && (
                         <span>

diff --git a/packages/perseus-editor/src/util/deprecated-widgets/modernize-widgets-utils.ts b/packages/perseus-editor/src/util/deprecated-widgets/modernize-widgets-utils.ts
@@ -14,17 +14,12 @@ const widgetRegExes = [/input-number \d+/]; // We can add more regexes here in t
 export const convertDeprecatedWidgets = (
     json: PerseusRenderer,
 ): PerseusRenderer => {
-    // If there's no widgets that require conversion, return the original json
-    if (!conversionRequired(json)) {
-        return json;
-    }
-
     // Currently we're only converting input-number to numeric-input,
     // But we can add more conversions here in the future
     return inputNumberToNumericInput(json);
 };
 
-const conversionRequired = (json: PerseusRenderer): boolean => {
+export const conversionRequired = (json: PerseusRenderer): boolean => {
     // If there's no content, then there's no conversion required
     if (!json.content) {
         return false;