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

-
+ - -
+
); };