Rapid exp title changes dependent on new or edit fixes #2901 (#2994)

* Rapid exp title changes dependent on new or edit fixes #2901 * determine new or edit based on experiment data * formatting Co-authored-by: Jared Lockhart <[email protected]>
mozilla · Jul 8, 2020 · 6a1c22a · 6a1c22a
1 parent aec8bb1
commit 6a1c22a
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/app/experimenter/static/rapid/__tests__/app.test.tsx b/app/experimenter/static/rapid/__tests__/app.test.tsx
@@ -25,7 +25,7 @@ describe("<App />", () => {
     const { getByText } = renderWithRouter(<App />, {
       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("<App />", () => {
     const { getByText, getByLabelText } = renderWithRouter(<App />, {
       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
@@ -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 (
+    <div className="mb-4">
+      <div className="d-flex align-items-center">
+        <h3 className="mr-3">{pageHeading}</h3>
+        <span className="badge badge-secondary mb-1">Draft</span>
+      </div>
+      <p>
+        Create and automatically launch an A/A CFR experiment. A/A experiments
+        measure the accuracy of the tool.
+      </p>
+    </div>
+  );
+};
+
+export default ExperimentFormPage;
diff --git 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 (
     <ExperimentProvider>
-      <div className="col pt-3">
-        <div className="mb-4">
-          <div className="d-flex align-items-center">
-            <h3 className="mr-3">Create a New A/A Experiment</h3>
-            <span className="badge badge-secondary mb-1">Draft</span>
-          </div>
-          <p>
-            Create and automatically launch an A/A CFR experiment. A/A
-            experiments measure the accuracy of the tool.
-          </p>
-        </div>
+      <ExperimentEditHeader />
 
-        <ExperimentForm />
-      </div>
+      <ExperimentForm />
     </ExperimentProvider>
   );
 };