Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jul 16, 2020
+102 −65
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9571763
Use real experiment status in rapid UI fixes #3053
jaredlockhart Jul 16, 2020
8c4062a
Merge branch 'main' into 3053
jaredlockhart Jul 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions app/experimenter/static/rapid/__tests__/experimentDetails.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -18,6 +19,7 @@ describe("<ExperimentDetails />", () => {
const { getByDisplayValue } = renderWithRouter(
wrapInExperimentProvider(<ExperimentDetails />, {
initialState: {
status: ExperimentStatus.DRAFT,
slug: "test-slug",
name: "Test Name",
objectives: "Test objectives",
Expand All @@ -41,6 +43,7 @@ describe("<ExperimentDetails />", () => {
const { getByText } = renderWithRouter(
wrapInExperimentProvider(<ExperimentDetails />, {
initialState: {
status: ExperimentStatus.DRAFT,
slug: "test-slug",
name: "Test Name",
objectives: "Test objectives",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -109,6 +114,7 @@ describe("<ExperimentDetails />", () => {
const { getByText } = renderWithRouter(
wrapInExperimentProvider(<ExperimentDetails />, {
initialState: {
status: ExperimentStatus.DRAFT,
slug: "test-slug",
name: "Test Name",
objectives: "Test objectives",
Expand Down
2 changes: 2 additions & 0 deletions app/experimenter/static/rapid/__tests__/experimentForm.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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",
Expand Down
119 changes: 70 additions & 49 deletions app/experimenter/static/rapid/components/experiments/ExperimentDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
4 changes: 3 additions & 1 deletion app/experimenter/static/rapid/components/experiments/ExperimentEditHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
11 changes: 1 addition & 10 deletions app/experimenter/static/rapid/components/pages/ExperimentDetailsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
7 changes: 6 additions & 1 deletion app/experimenter/static/rapid/contexts/experiment/context.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: [],
Expand Down
18 changes: 14 additions & 4 deletions app/experimenter/static/rapid/types/experiment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down