Merge pull request #1023 from DemocracyLab/1014-Restrict-Volunteering

#1014 Restrict volunteering with project to only listed roles

Author: marlonkeating

common/components/common/projects/ProjectVolunteerButton.jsx

@@ -19,6 +19,7 @@ type LeaveProjectParams = {|
 type Props = {|
   project: ?ProjectDetailsAPIData,
   positionToJoin: ?PositionInfo,
+  positions: $ReadOnlyArray<PositionInfo>,
   onVolunteerClick: () => void,
 |};
 type State = {|
@@ -151,28 +152,35 @@ class ProjectVolunteerButton extends React.PureComponent<Props, State> {
   }
 
   _renderVolunteerButton(): React$Node {
-    return this.state.isAlreadyVolunteering ? (
+    const hasProjectPositions = !_.isEmpty(this.state.project.project_positions) && this.state.project.project_positions.some(position => !position.isHidden);
+    if (this.state.isAlreadyVolunteering) {
       // TODO: Make this its own component and hook up to My Projects page
-      <Button
-        className="AboutProject-button"
-        type="button"
-        variant="destructive"
-        onClick={this.handleShowLeaveModal}
-      >
-        Leave Project
-      </Button>
-    ) : (
-      <Button
-        variant="primary"
-        className="AboutProject-button"
-        type="button"
-        disabled={this.state.buttonDisabled}
-        title={this.state.buttonTitle}
-        onClick={this.handleShowJoinModal}
-      >
-        Volunteer With Project
-      </Button>
-    );
+      return (
+        <Button
+          className="AboutProject-button"
+          type="button"
+          variant="destructive"
+          onClick={this.handleShowLeaveModal}
+        >
+          Leave Project
+        </Button>
+      );
+    } else if (hasProjectPositions) {
+      return (
+        <Button
+          variant="primary"
+          className="AboutProject-button"
+          type="button"
+          disabled={this.state.buttonDisabled}
+          title={this.state.buttonTitle}
+          onClick={this.handleShowJoinModal}
+        >
+          Volunteer With Project
+        </Button>
+      );
+    } else {
+      return null;
+    }
   }
 
   _renderLinkToSignInButton(): React$Node {

common/components/common/projects/ProjectVolunteerModal.jsx

@@ -44,7 +44,6 @@ const volunteerPeriodsInDays: $ReadOnlyArray<SelectOption> = [
   ["6 months - 1 year", 365],
 ].map(textDaysPair => ({ label: textDaysPair[0], value: textDaysPair[1] }));
 
-const OtherRoleOption: SelectOption = { label: "Other", value: "Other" };
 
 /**
  * Modal for volunteering to join a project
@@ -80,7 +79,6 @@ class ProjectVolunteerModal extends React.PureComponent<Props, State> {
           value: position.roleTag.tag_name,
           label: tagOptionDisplay(position.roleTag),
         }))
-        .concat(OtherRoleOption)
     );
 
     let state: State = {
@@ -187,12 +185,6 @@ class ProjectVolunteerModal extends React.PureComponent<Props, State> {
                 {!_.isEmpty(this.props.positions)
                   ? this._renderExistingPositionDropdown()
                   : null}
-                {_.isEmpty(this.props.positions) ||
-                (this.state.existingPositionOption &&
-                  this.state.existingPositionOption.value ===
-                    OtherRoleOption.value)
-                  ? this._renderOtherRoleDropdown()
-                  : null}
                 <Form.Label>
                   How long do you expect to be able to contribute to this
                   project?
@@ -242,21 +234,12 @@ class ProjectVolunteerModal extends React.PureComponent<Props, State> {
     );
   }
 
-  _selectedExistingPositionTag(): ?string {
-    return this.state.existingPositionOption &&
-      this.state.existingPositionOption.value !== OtherRoleOption.value
+  _selectedTag(): ?string {
+    return this.state.existingPositionOption
       ? this.state.existingPositionOption.value
       : null;
   }
 
-  _selectedOtherRoleTag(): ?string {
-    return this.state.roleTag && this.state.roleTag.tag_name;
-  }
-
-  _selectedTag(): ?string {
-    return this._selectedExistingPositionTag() || this._selectedOtherRoleTag();
-  }
-
   _renderExistingPositionDropdown(): React$Node {
     return (
       <div className="form-group">
@@ -276,21 +259,6 @@ class ProjectVolunteerModal extends React.PureComponent<Props, State> {
     );
   }
 
-  _renderOtherRoleDropdown(): React$Node {
-    return (
-      <div className="form-group">
-        <label htmlFor="project_technologies">Role You are Applying For</label>
-        <TagSelector
-          value={[this.state.roleTag]}
-          category={TagCategory.ROLE}
-          allowMultiSelect={false}
-          isClearable={false}
-          onSelection={this.onRoleChange.bind(this)}
-        />
-      </div>
-    );
-  }
-
   _renderVolunteerPeriodDropdown(): React$Node {
     return (
       <Select