Disable fields for preference experiments when recipe form is disabled.

recipe-server/client/control/components/action_fields/PreferenceExperimentFields.js

@@ -25,6 +25,10 @@ const DEFAULT_BRANCH_VALUES = {
  * Form fields for the preference-experiment action.
  */
 export class PreferenceExperimentFields extends ActionFields {
+  static propTypes = {
+    disabled: pt.bool,
+  }
+
   static initialValues = {
     slug: '',
     experimentDocumentUrl: '',
@@ -46,7 +50,7 @@ export class PreferenceExperimentFields extends ActionFields {
   );
 
   render() {
-    const { preferenceBranchType } = this.props;
+    const { disabled, preferenceBranchType } = this.props;
     return (
       <div className="arguments-fields">
         <p className="info">Run a feature experiment activated by a preference.</p>
@@ -55,23 +59,27 @@ export class PreferenceExperimentFields extends ActionFields {
           name="arguments.slug"
           component="input"
           type="text"
+          disabled={disabled}
         />
         <ControlField
           label="Experiment Document URL"
           name="arguments.experimentDocumentUrl"
           component="input"
           type="url"
+          disabled={disabled}
         />
         <ControlField
           label="Preference Name"
           name="arguments.preferenceName"
           component="input"
           type="text"
+          disabled={disabled}
         />
         <ControlField
           label="Preference Type"
           name="arguments.preferenceType"
           component="select"
+          disabled={disabled}
         >
           <option value="boolean">Boolean</option>
           <option value="integer">Integer</option>
@@ -81,12 +89,17 @@ export class PreferenceExperimentFields extends ActionFields {
           label="Preference Branch Type"
           name="arguments.preferenceBranchType"
           component="select"
+          disabled={disabled}
         >
           <option value="default">Default</option>
           <option value="user">User</option>
         </ControlField>
         {preferenceBranchType === 'user' && PreferenceExperimentFields.userBranchWarning}
-        <FieldArray name="arguments.branches" component={PreferenceBranches} />
+        <FieldArray
+          name="arguments.branches"
+          component={PreferenceBranches}
+          disabled={disabled}
+        />
       </div>
     );
   }
@@ -101,6 +114,7 @@ export default connect(
 export class PreferenceBranches extends React.Component {
   static propTypes = {
     fields: pt.object.isRequired,
+    disabled: pt.bool,
   }
 
   constructor(props) {
@@ -110,15 +124,19 @@ export class PreferenceBranches extends React.Component {
   }
 
   handleClickDelete(index) {
-    this.props.fields.remove(index);
+    if (!this.props.disabled) {
+      this.props.fields.remove(index);
+    }
   }
 
   handleClickAdd() {
-    this.props.fields.push({ ...DEFAULT_BRANCH_VALUES });
+    if (!this.props.disabled) {
+      this.props.fields.push({ ...DEFAULT_BRANCH_VALUES });
+    }
   }
 
   render() {
-    const { fields } = this.props;
+    const { fields, disabled } = this.props;
     return (
       <div>
         <h4 className="branch-header">Experiment Branches</h4>
@@ -128,31 +146,39 @@ export class PreferenceBranches extends React.Component {
               <ConnectedBranchFields
                 branch={branch}
                 index={index}
+                disabled={disabled}
                 onClickDelete={this.handleClickDelete}
               />
             </li>
           ))}
-          <li>
-            <a
-              className="button"
-              onClick={this.handleClickAdd}
-            >
-              <i className="fa fa-plus pre" />
-              Add Branch
-            </a>
-          </li>
+          {!disabled && <AddBranchButton onClick={this.handleClickAdd} />}
         </ul>
       </div>
     );
   }
 }
 
+export function AddBranchButton({ onClick }) {
+  return (
+    <li>
+      <a className="button" onClick={onClick}>
+        <i className="fa fa-plus pre" />
+        Add Branch
+      </a>
+    </li>
+  );
+}
+AddBranchButton.propTypes = {
+  onClick: pt.func.isRequired,
+};
+
 export class BranchFields extends React.Component {
   static propTypes = {
     branch: pt.string.isRequired,
     onClickDelete: pt.func.isRequired,
     preferenceType: pt.string.isRequired,
     index: pt.number.isRequired,
+    disabled: pt.bool,
   }
 
   constructor(props) {
@@ -161,11 +187,13 @@ export class BranchFields extends React.Component {
   }
 
   handleClickDelete() {
-    this.props.onClickDelete(this.props.index);
+    if (!this.props.disabled) {
+      this.props.onClickDelete(this.props.index);
+    }
   }
 
   render() {
-    const { branch, preferenceType = 'boolean' } = this.props;
+    const { branch, preferenceType = 'boolean', disabled } = this.props;
     const ValueField = VALUE_FIELDS[preferenceType];
     return (
       <div className="branch-fields">
@@ -174,23 +202,34 @@ export class BranchFields extends React.Component {
           name={`${branch}.slug`}
           component="input"
           type="text"
+          disabled={disabled}
         />
-        <ValueField name={`${branch}.value`} />
+        <ValueField name={`${branch}.value`} disabled={disabled} />
         <IntegerControlField
           label="Ratio"
           name={`${branch}.ratio`}
+          disabled={disabled}
         />
-        <div className="remove-branch">
-          <a className="button delete" onClick={this.handleClickDelete}>
-            <i className="fa fa-times pre" />
-            Remove Branch
-          </a>
-        </div>
+        {!disabled && <RemoveBranchButton onClick={this.handleClickDelete} />}
       </div>
     );
   }
 }
 
+export function RemoveBranchButton({ onClick }) {
+  return (
+    <div className="remove-branch">
+      <a className="button delete" onClick={onClick}>
+        <i className="fa fa-times pre" />
+        Remove Branch
+      </a>
+    </div>
+  );
+}
+RemoveBranchButton.propTypes = {
+  onClick: pt.func.isRequired,
+};
+
 export const ConnectedBranchFields = connect(
   state => ({
     preferenceType: selector(state, 'arguments.preferenceType'),

recipe-server/client/control/tests/components/test_PreferenceExperimentFields.js

@@ -3,7 +3,11 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import {
+  AddBranchButton,
+  BranchFields,
+  PreferenceBranches,
   PreferenceExperimentFields,
+  RemoveBranchButton,
 } from 'control/components/action_fields/PreferenceExperimentFields';
 
 describe('<PreferenceExperimentFields>', () => {
@@ -20,3 +24,37 @@ describe('<PreferenceExperimentFields>', () => {
     expect(wrapper.contains(PreferenceExperimentFields.userBranchWarning)).toBe(true);
   });
 });
+
+describe('<PreferenceBranches>', () => {
+  it('should render the add button if it is not disabled', () => {
+    const wrapper = shallow(<PreferenceBranches fields={[]} />);
+    expect(wrapper.find(AddBranchButton).length).toBe(1);
+  });
+
+  it('should not render the add button if it is disabled', () => {
+    const wrapper = shallow(<PreferenceBranches disabled fields={[]} />);
+    expect(wrapper.find(AddBranchButton).length).toBe(0);
+  });
+});
+
+describe('<BranchFields>', () => {
+  it('should render the remove button if it is not disabled', () => {
+    const wrapper = shallow(
+      <BranchFields branch="branch" onClickDelete={() => {}} preferenceType="string" index={1} />
+    );
+    expect(wrapper.find(RemoveBranchButton).length).toBe(1);
+  });
+
+  it('should not render the remove button if it is disabled', () => {
+    const wrapper = shallow(
+      <BranchFields
+        branch="branch"
+        onClickDelete={() => {}}
+        preferenceType="string"
+        index={1}
+        disabled
+      />
+    );
+    expect(wrapper.find(RemoveBranchButton).length).toBe(0);
+  });
+});