Skip to content

Commit

Permalink
Move react help text to constants fixes #1988
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaredlockhart
jaredlockhart committed Nov 26, 2019
1 parent 36e3ba9 commit c1a33ee
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 145 deletions.
77 changes: 16 additions & 61 deletions app/experimenter/static/js/components/GenericBranchFields.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { boundClass } from "autobind-decorator";
import { Map } from "immutable";
import PropTypes from "prop-types";
import React from "react";
import { Map } from "immutable";
import { boundClass } from "autobind-decorator";

import DesignInput from "experimenter/components/DesignInput";
import {
BRANCH_RATIO_HELP,
BRANCH_NAME_HELP,
BRANCH_DESCRIPTION_HELP,
} from "experimenter/components/constants";

@boundClass
class GenericBranchFields extends React.PureComponent {
Expand All @@ -14,61 +19,7 @@ class GenericBranchFields extends React.PureComponent {
index: PropTypes.number,
};

renderField(name, label) {
let helpContent;
switch (name) {
case "ratio":
helpContent = (
<div>
<p>
Choose the size of this branch represented as a whole number. The
size of all branches together must be equal to 100. It does not
have to be exact, so these sizes are simply a recommendation of
the relative distribution of the branches.
</p>
<p>
<strong>Example:</strong> 50
</p>
</div>
);
break;

case "name":
helpContent = (
<div>
<p>
The control group should represent the users receiving the
existing, unchanged version of what you're testing. For example,
if you're testing making a button larger to see if users click on
it more often, the control group would receive the existing button
size. You should name your control branch based on the experience
or functionality that group of users will be receiving. Don't name
it 'Control Group', we already know it's the control group!
</p>
<p>
<strong>Example:</strong> Normal Button Size
</p>
</div>
);
break;

case "description":
helpContent = (
<div>
<p>
Describe the experience or functionality the control group will
receive in more detail.
</p>
<p>
<strong>Example:</strong> The control group will receive the
existing 80px sign in button located at the top right of the
screen.
</p>
</div>
);
break;
}

renderField(name, label, help) {
return (
<DesignInput
label={label}
Expand All @@ -79,17 +30,21 @@ class GenericBranchFields extends React.PureComponent {
this.props.handleChange(name, value);
}}
error={this.props.errors.get(name)}
helpContent={helpContent}
helpContent={help}
/>
);
}

render() {
return (
<React.Fragment>
{this.renderField("ratio", "Branch Size")}
{this.renderField("name", "Name")}
{this.renderField("description", "Description")}
{this.renderField("ratio", "Branch Size", BRANCH_RATIO_HELP)}
{this.renderField("name", "Name", BRANCH_NAME_HELP)}
{this.renderField(
"description",
"Description",
BRANCH_DESCRIPTION_HELP,
)}
</React.Fragment>
);
}
Expand Down
102 changes: 18 additions & 84 deletions app/experimenter/static/js/components/PrefBranchFields.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
import { boundClass } from "autobind-decorator";
import { Map } from "immutable";
import PropTypes from "prop-types";
import React from "react";
import { Map } from "immutable";
import { boundClass } from "autobind-decorator";

import DesignInput from "experimenter/components/DesignInput";
import {
BRANCH_RATIO_HELP,
BRANCH_NAME_HELP,
BRANCH_DESCRIPTION_HELP,
PREF_VALUE_HELP,
} from "experimenter/components/constants";

@boundClass
class PrefBranchFields extends React.PureComponent {
Expand All @@ -14,83 +20,7 @@ class PrefBranchFields extends React.PureComponent {
index: PropTypes.number,
};

renderField(name, label) {
let helpContent;
switch (name) {
case "ratio":
helpContent = (
<div>
<p>
Choose the size of this branch represented as a whole number. The
size of all branches together must be equal to 100. It does not
have to be exact, so these sizes are simply a recommendation of
the relative distribution of the branches.
</p>
<p>
<strong>Example:</strong> 50
</p>
</div>
);
break;

case "name":
helpContent = (
<div>
<p>
The control group should represent the users receiving the
existing, unchanged version of what you're testing. For example,
if you're testing making a button larger to see if users click on
it more often, the control group would receive the existing button
size. You should name your control branch based on the experience
or functionality that group of users will be receiving. Don't name
it 'Control Group', we already know it's the control group!
</p>
<p>
<strong>Example:</strong> Normal Button Size
</p>
</div>
);
break;

case "description":
helpContent = (
<div>
<p>
Describe the experience or functionality the control group will
receive in more detail.
</p>
<p>
<strong>Example:</strong> The control group will receive the
existing 80px sign in button located at the top right of the
screen.
</p>
</div>
);
break;

case "value":
helpContent = (
<div>
<p className="mt-2">
Choose the value of the pref for the control group. This value
must be valid JSON in order to be sent to Shield. This should be
the right type (boolean, string, number), and should be the value
that represents the control or default state to compare to.
</p>
<p>
<strong>Boolean Example:</strong> false
</p>
<p>
<strong>String Example:</strong> some text
</p>
<p>
<strong>Integer Example:</strong> 13
</p>
</div>
);
break;
}

renderField(name, label, help) {
return (
<DesignInput
label={label}
Expand All @@ -101,18 +31,22 @@ class PrefBranchFields extends React.PureComponent {
this.props.handleChange(name, value);
}}
error={this.props.errors.get(name)}
helpContent={helpContent}
helpContent={help}
/>
);
}

render() {
return (
<React.Fragment>
{this.renderField("ratio", "Branch Size")}
{this.renderField("name", "Name")}
{this.renderField("description", "Description")}
{this.renderField("value", "Value")}
{this.renderField("ratio", "Branch Size", BRANCH_RATIO_HELP)}
{this.renderField("name", "Name", BRANCH_NAME_HELP)}
{this.renderField(
"description",
"Description",
BRANCH_DESCRIPTION_HELP,
)}
{this.renderField("value", "Value", PREF_VALUE_HELP)}
</React.Fragment>
);
}
Expand Down
65 changes: 65 additions & 0 deletions app/experimenter/static/js/components/constants.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from "react";

export const BRANCH_RATIO_HELP = (
<div>
<p>
Choose the size of this branch represented as a whole number. The size of
all branches together must be equal to 100. It does not have to be exact,
so these sizes are simply a recommendation of the relative distribution of
the branches.
</p>
<p>
<strong>Example:</strong> 50
</p>
</div>
);

export const BRANCH_NAME_HELP = (
<div>
<p>
The control group should represent the users receiving the existing,
unchanged version of what you're testing. For example, if you're testing
making a button larger to see if users click on it more often, the control
group would receive the existing button size. You should name your control
branch based on the experience or functionality that group of users will
be receiving. Don't name it 'Control Group', we already know it's the
control group!
</p>
<p>
<strong>Example:</strong> Normal Button Size
</p>
</div>
);

export const BRANCH_DESCRIPTION_HELP = (
<div>
<p>
Describe the experience or functionality the control group will receive in
more detail.
</p>
<p>
<strong>Example:</strong> The control group will receive the existing 80px
sign in button located at the top right of the screen.
</p>
</div>
);

export const PREF_VALUE_HELP = (
<div>
<p className="mt-2">
Choose the value of the pref for the control group. This value must be
valid JSON in order to be sent to Shield. This should be the right type
(boolean, string, number), and should be the value that represents the
control or default state to compare to.
</p>
<p>
<strong>Boolean Example:</strong> false
</p>
<p>
<strong>String Example:</strong> some text
</p>
<p>
<strong>Integer Example:</strong> 13
</p>
</div>
);

0 comments on commit c1a33ee

Please sign in to comment.