From 377b7ce68801cef99cd3a09474b28a8b60f90f0a Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Wed, 4 Sep 2024 13:47:10 -0700
Subject: [PATCH] Add save warnings to PhET widget editor and unhide widget
 (#1582)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
* Add `getSaveWarnings()` function to PhET widget editor so that a widget cannot be saved with a non-PhET URL
* Unhide the widget from the content editor

<img width="1465" alt="A save warning popup, Are you sure you want to save your changes with errors? phet-simulation 1: Please enter a URL from the PhET domain." src="https://github.com/user-attachments/assets/34ac2131-5237-4aa3-9f63-91d379d8e12c">

Issue: LEMS-2292

## Test plan:
* `yarn jest packages/perseus/src/widgets/__tests__/phet-simulation.test.ts`
* `yarn jest packages/perseus-editor/src/widgets/__tests__/phet-simulation-editor.test.tsx`
* Verify that the widget and editor still show up in Storybook
* Verify that the editor displays an error when a non-PhET URL is typed into the PhET widget content editor

Author: aemandine

Reviewers: SonicScrewdriver, aemandine

Required Reviewers:

Approved By: SonicScrewdriver

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

Pull Request URL: https://github.com/Khan/perseus/pull/1582
---
 .changeset/thirty-pans-hammer.md                          | 6 ++++++
 .../perseus-editor/src/widgets/phet-simulation-editor.tsx | 8 ++++++++
 packages/perseus/src/index.ts                             | 2 ++
 packages/perseus/src/widgets/phet-simulation/index.ts     | 2 +-
 .../src/widgets/phet-simulation/phet-simulation.tsx       | 2 --
 5 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/thirty-pans-hammer.md

diff --git a/.changeset/thirty-pans-hammer.md b/.changeset/thirty-pans-hammer.md
new file mode 100644
index 0000000000..a9ba7063ca
--- /dev/null
+++ b/.changeset/thirty-pans-hammer.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Add save warnings to PhET widget editor and un-hide widget from content editor widget dropdown
diff --git a/packages/perseus-editor/src/widgets/phet-simulation-editor.tsx b/packages/perseus-editor/src/widgets/phet-simulation-editor.tsx
index 89a1c3ca9d..dd61140fd6 100644
--- a/packages/perseus-editor/src/widgets/phet-simulation-editor.tsx
+++ b/packages/perseus-editor/src/widgets/phet-simulation-editor.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
+import {makeSafeUrl} from "@khanacademy/perseus";
 import {LabeledTextField} from "@khanacademy/wonder-blocks-form";
 import * as React from "react";
 
@@ -31,6 +32,13 @@ class PhetSimulationEditor extends React.Component<Props> {
         };
     }
 
+    getSaveWarnings: () => ReadonlyArray<string> = () => {
+        if (makeSafeUrl(this.props.url, "en") === null) {
+            return ["Please enter a URL from the PhET domain."];
+        }
+        return [];
+    };
+
     render(): React.ReactNode {
         return (
             <div>
diff --git a/packages/perseus/src/index.ts b/packages/perseus/src/index.ts
index 436a78ee77..4ede0dff03 100644
--- a/packages/perseus/src/index.ts
+++ b/packages/perseus/src/index.ts
@@ -130,6 +130,8 @@ export {
     getAngleCoords,
 } from "./widgets/interactive-graphs/reducer/initialize-graph-state";
 
+export {makeSafeUrl} from "./widgets/phet-simulation";
+
 /**
  * Mixins
  */
diff --git a/packages/perseus/src/widgets/phet-simulation/index.ts b/packages/perseus/src/widgets/phet-simulation/index.ts
index fb6616d2e0..1f615d85ba 100644
--- a/packages/perseus/src/widgets/phet-simulation/index.ts
+++ b/packages/perseus/src/widgets/phet-simulation/index.ts
@@ -1 +1 @@
-export {default} from "./phet-simulation";
+export {default, makeSafeUrl} from "./phet-simulation";
diff --git a/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx b/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
index 12dab1dad4..77691b1d2c 100644
--- a/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
+++ b/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
@@ -250,7 +250,5 @@ export default {
     name: "phet-simulation",
     displayName: "PhET Simulation",
     widget: PhetSimulation,
-    // Hides widget from content creators until full release
-    hidden: true,
     isLintable: true,
 } as WidgetExports<typeof PhetSimulation>;