diff --git a/app/experimenter/static/rapid/__tests__/app.test.tsx b/app/experimenter/static/rapid/__tests__/app.test.tsx
index 0b42149d8fd..eda2ca2ec95 100644
--- a/app/experimenter/static/rapid/__tests__/app.test.tsx
+++ b/app/experimenter/static/rapid/__tests__/app.test.tsx
@@ -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 00000000000..4e88121b351
--- /dev/null
+++ b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import { useHistory } from "react-router-dom";
+import { useExperimentState } from "experimenter-rapid/contexts/experiment/hooks";
+
+const ExperimentFormPage: React.FC = () => {
+ const { location } = useHistory();
+ let pageHeading = "Create a New A/A Experiment";
+ if (location.pathname.includes("edit")) {
+ const experimentData = useExperimentState();
+ 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 fb5b1a96f09..32d3b5878c5 100644
--- a/app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx
+++ b/app/experimenter/static/rapid/components/pages/ExperimentFormPage.tsx
@@ -1,25 +1,23 @@
import React from "react";
import ExperimentForm from "experimenter-rapid/components/forms/ExperimentForm";
+import ExperimentEditHeader from "experimenter-rapid/components/experiments/ExperimentEditHeader";
+import { useHistory } from "react-router-dom";
+import { useExperimentState } from "experimenter-rapid/contexts/experiment/hooks";
import ExperimentProvider from "experimenter-rapid/contexts/experiment/provider";
const ExperimentFormPage: React.FC = () => {
+ const { location } = useHistory();
+ let pageHeading = "Create a New A/A Experiment";
+ if (location.pathname.includes("edit")) {
+ const formData = useExperimentState();
+ console.log(formData);
+ }
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.
-
-
+
-
-
+
);
};