Add edit/display button to research plan detail

app/assets/javascripts/components/research_plan/ResearchPlanDetails.js

@@ -218,35 +218,31 @@ export default class ResearchPlanDetails extends Component {
     )
   }
 
-  renderExportButton(edit) {
-    if (!edit) {
-      return (
-        <div className="pull-right">
-          <Dropdown id="research-plan-export-dropdown">
-            <Dropdown.Toggle>
-              Export
-            </Dropdown.Toggle>
-            <Dropdown.Menu>
-              <MenuItem onSelect={() => this.handleExport('docx')}>
-                as .docx
-              </MenuItem>
-              <MenuItem onSelect={() => this.handleExport('odt')}>
-                as .odt
-              </MenuItem>
-              <MenuItem onSelect={() => this.handleExport('html')}>
-                as HTML
-              </MenuItem>
-              <MenuItem onSelect={() => this.handleExport('markdown')}>
-                as Markdown
-              </MenuItem>
-              <MenuItem onSelect={() => this.handleExport('latex')}>
-                as LaTeX
-              </MenuItem>
-            </Dropdown.Menu>
-          </Dropdown>
-        </div>
-      )
-    }
+  renderExportButton() {
+    return (
+      <Dropdown id="research-plan-export-dropdown dropdown-right">
+        <Dropdown.Toggle>
+          Export
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <MenuItem onSelect={() => this.handleExport('docx')}>
+            as .docx
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('odt')}>
+            as .odt
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('html')}>
+            as HTML
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('markdown')}>
+            as Markdown
+          </MenuItem>
+          <MenuItem onSelect={() => this.handleExport('latex')}>
+            as LaTeX
+          </MenuItem>
+        </Dropdown.Menu>
+      </Dropdown>
+    )
   }
 
   renderPropertiesTab(research_plan) {
@@ -257,7 +253,12 @@ export default class ResearchPlanDetails extends Component {
     return (
       <ListGroup fill="true">
         <ListGroupItem >
-          {this.renderExportButton(edit)}
+          <div className="research-plan-export-buttons pull-right">
+            {edit && this.renderExportButton()}
+            <Button bsStyle="warning" onClick={() => this.toggleEdit()}>
+              {edit ? 'Display' : 'Edit'}
+            </Button>
+          </div>
 
           <ResearchPlanDetailsName value={name}
               disabled={research_plan.isMethodDisabled('name')}

app/assets/javascripts/components/research_plan/ResearchPlanDetailsName.js

@@ -10,15 +10,19 @@ export default class ResearchPlanDetailsName extends Component {
     if (edit) {
       return (
         <div className="research-plan-name">
-          <FormGroup>
-            <ControlLabel>Name</ControlLabel>
-            <FormControl
-              type="text"
-              value={value || ''}
-              onChange={(event) => onChange(event.target.value)}
-              disabled={disabled}
-            />
-          </FormGroup>
+          <Row>
+            <Col lg={8}>
+              <FormGroup>
+                <ControlLabel>Name</ControlLabel>
+                <FormControl
+                  type="text"
+                  value={value || ''}
+                  onChange={(event) => onChange(event.target.value)}
+                  disabled={disabled}
+                />
+              </FormGroup>
+            </Col>
+          </Row>
         </div>
       )
     } else {

app/assets/stylesheets/research-plan.scss

@@ -4,12 +4,23 @@
         margin-bottom: 0;
     }
 
+    .research-plan-export-buttons {
+        padding-top: 24px;
+
+        button {
+            line-height: 20px;
+            margin-left: 10px;
+        }
+    }
+
     .research-plan-name {
         &.static {
+            margin-top: 22px;
             margin-bottom: 20px;
 
             h1 {
                 margin: 0;
+                line-height: 36px;
             }
         }
     }