Rapid exp title changes dependent on new or edit fixes mozilla#2901

tiftran · Jul 7, 2020 · d84e02e · d84e02e
1 parent 0ceac3f
commit d84e02e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 14 deletions.
diff --git 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
@@ -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 (
+    <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,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 (
     <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>
   );
 };