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. -

-
+ - -
+
); };