Use real experiment status in rapid UI fixes #3053 (#3054)

mozilla · Jul 16, 2020 · d5b72a5 · d5b72a5
1 parent dece62c
commit d5b72a5
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 65 deletions.
diff --git a/app/experimenter/static/rapid/__tests__/experimentDetails.test.tsx b/app/experimenter/static/rapid/__tests__/experimentDetails.test.tsx
@@ -7,6 +7,7 @@ import {
   wrapInExperimentProvider,
 } from "experimenter-rapid/__tests__/utils";
 import ExperimentDetails from "experimenter-rapid/components/experiments/ExperimentDetails";
+import { ExperimentStatus } from "experimenter-types/experiment";
 
 afterEach(async () => {
   await cleanup();
@@ -18,6 +19,7 @@ describe("<ExperimentDetails />", () => {
     const { getByDisplayValue } = renderWithRouter(
       wrapInExperimentProvider(<ExperimentDetails />, {
         initialState: {
+          status: ExperimentStatus.DRAFT,
           slug: "test-slug",
           name: "Test Name",
           objectives: "Test objectives",
@@ -41,6 +43,7 @@ describe("<ExperimentDetails />", () => {
     const { getByText } = renderWithRouter(
       wrapInExperimentProvider(<ExperimentDetails />, {
         initialState: {
+          status: ExperimentStatus.DRAFT,
           slug: "test-slug",
           name: "Test Name",
           objectives: "Test objectives",
@@ -62,6 +65,7 @@ describe("<ExperimentDetails />", () => {
     const { getByDisplayValue, queryByText } = renderWithRouter(
       wrapInExperimentProvider(<ExperimentDetails />, {
         initialState: {
+          status: ExperimentStatus.DRAFT,
           slug: "test-slug",
           name: "Test Name",
           objectives: "Test objectives",
@@ -84,6 +88,7 @@ describe("<ExperimentDetails />", () => {
     const { getByText, history } = renderWithRouter(
       wrapInExperimentProvider(<ExperimentDetails />, {
         initialState: {
+          status: ExperimentStatus.DRAFT,
           slug: "test-slug",
           name: "Test Name",
           objectives: "Test objectives",
@@ -109,6 +114,7 @@ describe("<ExperimentDetails />", () => {
     const { getByText } = renderWithRouter(
       wrapInExperimentProvider(<ExperimentDetails />, {
         initialState: {
+          status: ExperimentStatus.DRAFT,
           slug: "test-slug",
           name: "Test Name",
           objectives: "Test objectives",

diff --git a/app/experimenter/static/rapid/__tests__/experimentForm.test.tsx b/app/experimenter/static/rapid/__tests__/experimentForm.test.tsx
@@ -8,6 +8,7 @@ import {
   wrapInExperimentProvider,
 } from "experimenter-rapid/__tests__/utils";
 import ExperimentForm from "experimenter-rapid/components/forms/ExperimentForm";
+import { ExperimentStatus } from "experimenter-rapid/types/experiment";
 
 afterEach(async () => {
   await cleanup();
@@ -104,6 +105,7 @@ describe("<ExperimentForm />", () => {
     expect(submitUrl).toEqual("/api/v3/experiments/");
     expect(requestMethod).toEqual("POST");
     expect(formData).toEqual({
+      status: ExperimentStatus.DRAFT,
       name: "test name",
       objectives: "test objective",
       audience: "AUDIENCE 2",

diff --git a/app/experimenter/static/rapid/components/experiments/ExperimentDetails.tsx b/app/experimenter/static/rapid/components/experiments/ExperimentDetails.tsx
@@ -43,76 +43,97 @@ const displaySelectOptionLabels = (options, values) => {
 };
 
 const ExperimentDetails: React.FC = () => {
-  const data = useExperimentState();
+  const experimentData = useExperimentState();
 
   const handleClickRequestApproval = async () => {
-    await fetch(`/api/v3/experiments/${data.slug}/request_review/`, {
+    await fetch(`/api/v3/experiments/${experimentData.slug}/request_review/`, {
       method: "POST",
     });
   };
 
   let bugzilla_url;
-  if (data.bugzilla_url) {
+  if (experimentData.bugzilla_url) {
     bugzilla_url = (
       <div className="my-2">
         Bugzilla ticket can be found{" "}
-        <a href={data.bugzilla_url} rel="noopener noreferrer" target="_blank">
+        <a
+          href={experimentData.bugzilla_url}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
           here
         </a>
       </div>
     );
   }
 
   return (
-    <>
-      <LabelledRow label="Experiment Owner" value={data.owner} />
-      <LabelledRow label="Public Name" value={data.name}>
-        {bugzilla_url}
-      </LabelledRow>
-      <LabelledRow label="Hypothesis" value={data.objectives} />
-      <LabelledRow
-        label="Feature"
-        value={displaySelectOptionLabels(featureOptions, data.features)}
-      />
-      <LabelledRow
-        label="Audience"
-        value={displaySelectOptionLabels(audienceOptions, data.audience)}
-      />
-      <LabelledRow
-        label="Firefox Minimum Version"
-        value={displaySelectOptionLabels(
-          firefoxVersionOptions,
-          data.firefox_min_version,
-        )}
-      />
+    <div className="col pt-3">
+      <div className="mb-4">
+        <div className="d-flex align-items-center">
+          <h3 className="mr-3">Experiment Summary</h3>
+          <span className="badge badge-secondary mb-1">
+            {experimentData.status}
+          </span>
+        </div>
+        <LabelledRow label="Experiment Owner" value={experimentData.owner} />
+        <LabelledRow label="Public Name" value={experimentData.name}>
+          {bugzilla_url}
+        </LabelledRow>
+        <LabelledRow label="Hypothesis" value={experimentData.objectives} />
+        <LabelledRow
+          label="Feature"
+          value={displaySelectOptionLabels(
+            featureOptions,
+            experimentData.features,
+          )}
+        />
+        <LabelledRow
+          label="Audience"
+          value={displaySelectOptionLabels(
+            audienceOptions,
+            experimentData.audience,
+          )}
+        />
+        <LabelledRow
+          label="Firefox Minimum Version"
+          value={displaySelectOptionLabels(
+            firefoxVersionOptions,
+            experimentData.firefox_min_version,
+          )}
+        />
 
-      <h3 className="my-4">Results</h3>
-      <p>
-        The results will be available 7 days after the experiment is launched.
-        An email will be sent to you once we start recording data.
-      </p>
-      <p>
-        The results can be found here: <a href="#">(link here)</a>
-      </p>
+        <h3 className="my-4">Results</h3>
+        <p>
+          The results will be available 7 days after the experiment is launched.
+          An email will be sent to you once we start recording data.
+        </p>
+        <p>
+          The results can be found here: <a href="#">(link here)</a>
+        </p>
 
-      <div className="d-flex mt-4">
-        <span>
-          <Link className="btn btn-secondary" to={`/${data.slug}/edit/`}>
-            Back
-          </Link>
-        </span>
+        <div className="d-flex mt-4">
+          <span>
+            <Link
+              className="btn btn-secondary"
+              to={`/${experimentData.slug}/edit/`}
+            >
+              Back
+            </Link>
+          </span>
 
-        <span className="flex-grow-1 text-right">
-          <button
-            className="btn btn-primary"
-            type="button"
-            onClick={handleClickRequestApproval}
-          >
-            Request Approval
-          </button>
-        </span>
+          <span className="flex-grow-1 text-right">
+            <button
+              className="btn btn-primary"
+              type="button"
+              onClick={handleClickRequestApproval}
+            >
+              Request Approval
+            </button>
+          </span>
+        </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx b/app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
@@ -13,7 +13,9 @@ const ExperimentFormPage: React.FC = () => {
     <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>
+        <span className="badge badge-secondary mb-1">
+          {experimentData.status}
+        </span>
       </div>
       <p>
         Create and automatically launch an A/A CFR experiment. A/A experiments

diff --git a/app/experimenter/static/rapid/components/pages/ExperimentDetailsPage.tsx b/app/experimenter/static/rapid/components/pages/ExperimentDetailsPage.tsx
@@ -6,16 +6,7 @@ import ExperimentProvider from "experimenter-rapid/contexts/experiment/provider"
 const ExperimentDetailsPage: React.FC = () => {
   return (
     <ExperimentProvider>
-      <div className="col pt-3">
-        <div className="mb-4">
-          <div className="d-flex align-items-center">
-            <h3 className="mr-3">Experiment Summary</h3>
-            <span className="badge badge-secondary mb-1">Draft</span>
-          </div>
-
-          <ExperimentDetails />
-        </div>
-      </div>
+      <ExperimentDetails />
     </ExperimentProvider>
   );
 };

diff --git a/app/experimenter/static/rapid/contexts/experiment/context.ts b/app/experimenter/static/rapid/contexts/experiment/context.ts
@@ -1,12 +1,17 @@
 import React from "react";
 
-import { Action, ExperimentData } from "experimenter-types/experiment";
+import {
+  Action,
+  ExperimentStatus,
+  ExperimentData,
+} from "experimenter-types/experiment";
 
 export const INITIAL_CONTEXT: {
   state: ExperimentData;
   dispatch: (action: Action) => void;
 } = {
   state: {
+    status: ExperimentStatus.DRAFT,
     name: "",
     objectives: "",
     features: [],

diff --git a/app/experimenter/static/rapid/types/experiment.ts b/app/experimenter/static/rapid/types/experiment.ts
@@ -1,12 +1,22 @@
+export enum ExperimentStatus {
+  DRAFT = "Draft",
+  REVIEW = "Review",
+  ACCEPTED = "Accepted",
+  LIVE = "Live",
+  COMPLETE = "Complete",
+  REJECTED = "Rejected",
+}
+
 export interface ExperimentData {
-  name: string;
-  objectives: string;
-  features: Array<string>;
   audience: string;
+  bugzilla_url?: string;
+  features: Array<string>;
   firefox_min_version: string;
+  name: string;
+  objectives: string;
   owner?: string;
   slug?: string;
-  bugzilla_url?: string;
+  status: ExperimentStatus;
 }
 
 export enum ExperimentReducerActionType {