From 3cf150a99b57dbdbbc0136f84bd28a68873324e1 Mon Sep 17 00:00:00 2001
From: tiftran <ttran@mozilla.com>
Date: Tue, 7 Jul 2020 13:41:22 -0700
Subject: [PATCH 1/3] Rapid exp title changes dependent on new or edit fixes
 #2901

---
 .../static/rapid/__tests__/app.test.tsx       |  6 +++-
 .../experiments/ExperimentEditHeader.tsx      | 28 +++++++++++++++++++
 .../components/pages/ExperimentFormPage.tsx   | 16 ++---------
 3 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx

diff --git a/app/experimenter/static/rapid/__tests__/app.test.tsx b/app/experimenter/static/rapid/__tests__/app.test.tsx
index 0b42149d8f..eda2ca2ec9 100644
--- a/app/experimenter/static/rapid/__tests__/app.test.tsx
+++ b/app/experimenter/static/rapid/__tests__/app.test.tsx
@@ -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
new file mode 100644
index 0000000000..b7d52019cb
--- /dev/null
+++ b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
@@ -0,0 +1,28 @@
+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 (
+    <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
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 (
     <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>
   );
 };

From fd9ded3bec0c5636b3cca05f966034652fb76717 Mon Sep 17 00:00:00 2001
From: tiftran <ttran@mozilla.com>
Date: Tue, 7 Jul 2020 16:35:40 -0700
Subject: [PATCH 2/3] determine new or edit based on experiment data

---
 app/experimenter/static/rapid/__tests__/app.test.tsx     | 2 +-
 .../components/experiments/ExperimentEditHeader.tsx      | 9 +++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/experimenter/static/rapid/__tests__/app.test.tsx b/app/experimenter/static/rapid/__tests__/app.test.tsx
index eda2ca2ec9..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("<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 () => {
diff --git a/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
index b7d52019cb..3367bea8a0 100644
--- a/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
+++ b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
@@ -1,13 +1,10 @@
 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();
+  const experimentData = useExperimentState();
+  let pageHeading = `Create a New A/A Experiment: ${experimentData.name}`;
+  if (experimentData.slug) {
     pageHeading = `Edit Experiment: ${experimentData.name}`;
   }
 

From 04aff6546e88e6b0d37c958a54be5249d07af2c2 Mon Sep 17 00:00:00 2001
From: tiftran <ttran@mozilla.com>
Date: Tue, 7 Jul 2020 16:43:58 -0700
Subject: [PATCH 3/3] formatting

---
 .../static/rapid/components/experiments/ExperimentEditHeader.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
index 3367bea8a0..5a96be4798 100644
--- a/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
+++ b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+
 import { useExperimentState } from "experimenter-rapid/contexts/experiment/hooks";
 
 const ExperimentFormPage: React.FC = () => {