Merge remote-tracking branch 'origin/master' into defaults

Author: mertkahyaoglu

docs/_frontend/actions.md

@@ -150,9 +150,10 @@ Async action for fetching data files.
 
 Async action for fetching the requested data file.
 
-### > `putDataFile(filename, data)`
+### > `putDataFile(filename, data, source="editor")`
 
-Async action for creating/updating the requested data file. It validates the given filename and data before the PUT request.
+Async action for creating/updating the requested data file. It validates the given filename and data before the PUT request if the `source` equals `editor` or `null`.
+When the `source` is `gui`, the requested file is updated by parsing user input into valid YAML.
 
 ### > `deleteDataFile(filename)`
 

docs/_frontend/containers.md

@@ -32,8 +32,12 @@ Container for displaying header which includes title and homepage link.
 
 ## MetaFields
 
-Main container for metafields. Generates list, object or plain inputs
-for front matters other than `title`, `body`, `path` and `draft`.
+Main container for metafields. Generates list, object or plain inputs for front
+matters other than `title`, `body`, `path` and `draft`. Doubles as a GUI to edit
+data files. The GUI will parse the input and write valid YAML to file,
+consequently removing any comments previously present, and also converting
+boolean to string literals i.e. `true` & `false` will be written as `'true'`
+and `'false'`.
 
 ### PropTypes
 
@@ -48,7 +52,8 @@ for front matters other than `title`, `body`, `path` and `draft`.
   updateFieldKey: Function,
   updateFieldValue: Function,
   moveArrayItem: Function,
-  convertField: Function
+  convertField: Function,
+  dataview: Boolean
 }
 ```
 
@@ -228,23 +233,26 @@ Container for DataFiles view. Lists data files.
 
 ## DataFileEdit
 
-Container for editing a data file.
+Container for editing a data file. Supports editing via a raw text editor or a YAML editor GUI.
 
 ### PropTypes
 
 ```javascript
 {
   datafile: Object,
+  isFetching: Boolean,
+  updated: Boolean,
+  datafileChanged: Boolean,
+  fieldChanged: Boolean,
   fetchDataFile: Function,
   putDataFile: Function,
   deleteDataFile: Function,
   clearErrors: Function,
   onDataFileChanged: Function,
-  isFetching: Boolean,
-  updated: Boolean,
-  datafileChanged: Boolean,
   errors: Array,
-  params: Object
+  params: Object,
+  router: Object,
+  route: Object
 }
 ```
 

spec/fixtures/site/_data/template-config.yml

@@ -10,15 +10,34 @@
 # These are used to personalize your new site. If you look in the HTML files, you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible in the templates via {{ site.myvariable }}.
 title: Your awesome title
+path: /to/north-pole
+raw_content: "foo: bar\nbaz: boo"
 email: [email protected]
-description: > # this means to ignore newlines until "baseurl:"
+description: >- # this means to ignore newlines until "baseurl:"
   Write an awesome description for your new site here. You can edit this
   line in _config.yml. It will appear in your document head meta (for
   Google search results) and in your feed.xml site description.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: jekyllrb
 github_username:  jekyll
+author:
+  name: John Doe
+  email: [email protected]
+  web: http://www.example.com
+
+complex_data:
+  simple_key: value
+  object_key:
+    simple_key: value
+    object_key:
+      simple_key: value
+    list_key:
+      - value_1
+      - value_2
+      - value_3
+      - value_4
+
 
 # Build settings
 markdown: kramdown

src/actions/datafiles.js

@@ -2,6 +2,7 @@ import * as ActionTypes from '../constants/actionTypes';
 import _ from 'underscore';
 import { validationError } from './utils';
 import { get, put, del } from '../utils/fetch';
+import { toYAML } from '../utils/helpers';
 import { validator } from '../utils/validation';
 import {
   getParserErrorMessage,
@@ -37,17 +38,25 @@ export function fetchDataFile(filename) {
   };
 }
 
-export function putDataFile(filename, data) {
+export function putDataFile(filename, data, source = "editor") {
   return (dispatch, getState) => {
-    const errors = validateDatafile(filename, data);
-    if (errors.length) {
-      return dispatch(validationError(errors));
+    let payload = {};
+    if (source == "editor") {
+      const errors = validateDatafile(filename, data);
+      if (errors.length) {
+        return dispatch(validationError(errors));
+      }
+      // clear errors
+      dispatch({type: ActionTypes.CLEAR_ERRORS});
+      payload = { raw_content: data };
+    } else if (source == "gui") {
+      const metadata = getState().metadata.metadata;
+      const yaml_string = toYAML(metadata);
+      payload = { raw_content: yaml_string };
     }
-    // clear errors
-    dispatch({type: ActionTypes.CLEAR_ERRORS});
     return put(
       datafileAPIUrl(filename),
-      JSON.stringify({ raw_content: data }),
+      JSON.stringify(payload),
       { type: ActionTypes.PUT_DATAFILE_SUCCESS, name: "file"},
       { type: ActionTypes.PUT_DATAFILE_FAILURE, name: "error"},
       dispatch

src/components/Button.js

@@ -38,6 +38,10 @@ export default class Button extends Component {
       case 'upload':
         label = labels.upload.label;
         break;
+      case 'view-toggle':
+        label = labels.viewToggle.label;
+        triggeredLabel = labels.viewToggle.triggeredLabel;
+        break;
       default:
     }
 

src/components/metadata/MetaField.js

@@ -46,7 +46,7 @@ export class MetaField extends Component {
     const CurrentComponent = FieldTypes[type];
     return (
       <div ref="wrap" className="metafield">
-        <div className="meta-key">
+        <div className={`meta-key ${type}`}>
           <input ref="field_key"
             onBlur={() => this.handleKeyBlur()}
             defaultValue={fieldKey}

src/components/metadata/MetaObject.js

@@ -34,7 +34,7 @@ export class MetaObject extends Component {
         {items}
         <a onClick={() => addField(namePrefix)}
           className="add-field-object" title="Add new key/value pair">
-            New key/value pair
+            New key/value pair under <strong>{fieldKey}</strong>
         </a>
       </div>
     );

src/components/metadata/MetaObjectItem.js

@@ -45,7 +45,7 @@ export class MetaObjectItem extends Component {
     const CurrentComponent = FieldTypes[type];
     return (
       <div ref="wrap" className="object-item-wrap">
-        <div className="object-key">
+        <div className={`object-key ${type}`}>
           <input ref="field_key"
             onBlur={(e) => this.handleKeyBlur(e)}
             defaultValue={fieldKey}

src/components/metadata/MetaSimple.js

@@ -22,6 +22,10 @@ export class MetaSimple extends Component {
     this.handleCloseModal = this.handleCloseModal.bind(this);
   }
 
+  shouldComponentUpdate(nextProps) {
+    return nextProps.fieldValue !== this.props.fieldValue;
+  }
+
   handleOpenModal () {
     this.setState({ showModal: true });
   }

src/constants/lang/en.js

@@ -73,5 +73,9 @@ export const labels = {
   },
   upload: {
     label: 'Upload files'
+  },
+  viewToggle: {
+    label: 'Switch View to GUI Editor',
+    triggeredLabel: 'Switch View to Raw Editor'
   }
 };

src/containers/MetaFields.js

@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import _ from 'underscore';
@@ -20,12 +21,23 @@ export class MetaFields extends Component {
   }
 
   render() {
-    const { metadata, addField, removeField, updateFieldKey,
-      updateFieldValue, moveArrayItem, convertField, key_prefix } = this.props;
+    const {
+      metadata, addField, removeField, updateFieldKey, updateFieldValue, moveArrayItem,
+      convertField, key_prefix, dataview
+    } = this.props;
 
-    const { path, title, raw_content, ...rest } = metadata;
+    let visibleKeys = metadata;
 
-    const metafields = _.map(rest, (field, key) => {
+    if (!dataview) {
+      visibleKeys = _.omit(visibleKeys, ['title', 'path', 'raw_content']);
+    }
+
+    const metafieldsClass = classnames({
+      'datafields': dataview,
+      'metafields': !dataview
+    });
+
+    const metafields = _.map(visibleKeys, (field, key) => {
       let type = "simple";
       if (_.isObject(field)) type = "object";
       if (_.isArray(field)) type = "array";
@@ -48,23 +60,33 @@ export class MetaFields extends Component {
       );
     });
 
+    const newWrapper = dataview ? (
+      <div className="data-new">
+        <a onClick={() => addField('metadata')}>
+          <i className="fa fa-plus-circle" /> New data field
+        </a>
+      </div>
+    ) : (
+      <div className="meta-new">
+        <a onClick={() => addField('metadata')} className="tooltip">
+          <i className="fa fa-plus-circle" /> New metadata field
+          <span className="tooltip-text">
+            Metadata will be stored as the <b>YAML front matter</b> within the document.
+          </span>
+        </a>
+        <small className="tooltip pull-right">
+          <i className="fa fa-info-circle" />Special Keys
+          <span className="tooltip-text">
+            You can use special keys like <b>date</b>, <b>file</b>, <b>image</b> for user-friendly functionalities.
+          </span>
+        </small>
+      </div>
+    );
+
     return (
-      <div className="metafields">
+      <div className={metafieldsClass}>
         {metafields}
-        <div className="meta-new">
-          <a onClick={() => addField('metadata')} className="tooltip">
-            <i className="fa fa-plus-circle" /> New metadata field
-            <span className="tooltip-text">
-              Metadata will be stored as the <b>YAML front matter</b> within the document.
-            </span>
-          </a>
-          <small className="tooltip pull-right">
-            <i className="fa fa-info-circle" />Special Keys
-            <span className="tooltip-text">
-              You can use special keys like <b>date</b>, <b>file</b>, <b>image</b> for user-friendly functionalities.
-            </span>
-          </small>
-        </div>
+        {newWrapper}
       </div>
     );
   }
@@ -80,7 +102,8 @@ MetaFields.propTypes = {
   updateFieldKey: PropTypes.func.isRequired,
   updateFieldValue: PropTypes.func.isRequired,
   moveArrayItem: PropTypes.func.isRequired,
-  convertField: PropTypes.func.isRequired
+  convertField: PropTypes.func.isRequired,
+  dataview: PropTypes.bool
 };
 
 const mapStateToProps = (state) => ({

src/containers/tests/metafields.spec.js

@@ -5,10 +5,15 @@ import _ from 'underscore';
 
 import { MetaFields } from '../MetaFields';
 import MetaField from '../../components/metadata/MetaField';
-
 import { content } from './fixtures';
 
-function setup() {
+const defaultProps = {
+  fields: content,
+  metadata: content,
+  key_prefix: ''
+};
+
+function setup(props=defaultProps) {
   const actions = {
     storeContentFields: expect.createSpy(),
     addField: expect.createSpy(),
@@ -20,31 +25,45 @@ function setup() {
   };
 
   const component = mount(
-    <MetaFields
-      fields={content}
-      metadata={content}
-      key_prefix=""
-      {...actions} />
+    <MetaFields {...props} {...actions} />
   );
 
   return {
     component,
     addFieldButton: component.find('.meta-new a'),
+    addDataFieldButton: component.find('.data-new a'),
     metafields: component.find(MetaField),
     actions: actions
   };
 }
 
 describe('Containers::MetaFields', () => {
   it('should render MetaFields correctly', () => {
-    const { component, metafields } = setup();
+    let { component, metafields, addFieldButton, addDataFieldButton } = setup();
+
+    expect(component.find('div').first().hasClass('metafields')).toEqual(true);
+    expect(addFieldButton.node).toExist();
+    expect(addDataFieldButton.node).toNotExist();
+
+    const updatedSetup = setup(Object.assign({}, defaultProps, {
+      dataview: true
+    }));
+
+    expect(
+      updatedSetup.component.find('div').first().hasClass('datafields')
+    ).toEqual(true);
+    expect(updatedSetup.addFieldButton.node).toNotExist();
+    expect(updatedSetup.addDataFieldButton.node).toExist();
+
     expect(component.prop('key_prefix')).toBe('');
     expect(component.prop('metadata')).toEqual(content);
   });
+
   it('should call storeContentFields before mount', () => {
     const { actions } = setup();
     expect(actions.storeContentFields).toHaveBeenCalled();
   });
+
   it('should call addField when the button is clicked', () => {
     const { actions, addFieldButton } = setup();
     addFieldButton.simulate('click');