diff --git a/app/experimenter/static/rapid/__tests__/app.test.tsx b/app/experimenter/static/rapid/__tests__/app.test.tsx
index 0b42149d8f..a0d10af597 100644
--- a/app/experimenter/static/rapid/__tests__/app.test.tsx
+++ b/app/experimenter/static/rapid/__tests__/app.test.tsx
@@ -25,7 +25,7 @@ describe("", () => {
const { getByText } = renderWithRouter(, {
route: "/new/",
});
- expect(getByText("Create a New A/A Experiment")).toBeInTheDocument();
+ expect(getByText(/Create a New A\/A Experiment/)).toBeInTheDocument();
});
it("includes the experiment form page at `/:experimentSlug/edit/`", async () => {
@@ -41,7 +41,11 @@ describe("", () => {
const { getByText, getByLabelText } = renderWithRouter(, {
route: "/test-slug/edit/",
});
- expect(getByText("Create a New A/A Experiment")).toBeInTheDocument();
+ await waitFor(() => {
+ return expect(
+ getByText("Edit Experiment: Test Name"),
+ ).toBeInTheDocument();
+ });
const nameField = getByLabelText("Public Name") as HTMLInputElement;
await waitFor(() => {
diff --git a/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
new file mode 100644
index 0000000000..5a96be4798
--- /dev/null
+++ b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+import { useExperimentState } from "experimenter-rapid/contexts/experiment/hooks";
+
+const ExperimentFormPage: React.FC = () => {
+ const experimentData = useExperimentState();
+ let pageHeading = `Create a New A/A Experiment: ${experimentData.name}`;
+ if (experimentData.slug) {
+ pageHeading = `Edit Experiment: ${experimentData.name}`;
+ }
+
+ return (
+
+
+
{pageHeading}
+ Draft
+
+
+ Create and automatically launch an A/A CFR experiment. A/A experiments
+ measure the accuracy of the tool.
+
+
+ );
+};
+
+export default ExperimentFormPage;
diff --git a/app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx b/app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx
index fb5b1a96f0..0980e80b50 100644
--- a/app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx
+++ b/app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx
@@ -1,25 +1,15 @@
import React from "react";
+import ExperimentEditHeader from "experimenter-rapid/components/experiments/ExperimentEditHeader";
import ExperimentForm from "experimenter-rapid/components/forms/ExperimentForm";
import ExperimentProvider from "experimenter-rapid/contexts/experiment/provider";
const ExperimentFormPage: React.FC = () => {
return (
-
-
-
-
Create a New A/A Experiment
- Draft
-
-
- Create and automatically launch an A/A CFR experiment. A/A
- experiments measure the accuracy of the tool.
-
-
+
-
-
+
);
};