Merge pull request #351 from ashmaroli/raw-config

Support editing raw config file via admin interface

Author: mertkahyaoglu

docs/_frontend/actions.md

@@ -7,11 +7,15 @@ description: Actions are payloads of information that send data from the applica
 
 ### > `fetchConfig`
 
-Async action for fetching Jekyll project configuration (`_config.yml`)
+Async action for fetching an object comprised of Jekyll project configuration (from `_config.yml` by default)
 
 ### > `putConfig(config)`
 
-Async action for updating Jekyll project configuration
+Async action for updating Jekyll project configuration, after ensuring the content is not empty.
+
+### > `validateConfig(config)`
+
+Action for checking whether the YAML editor has content.
 
 ### > `onEditorChange`
 

docs/_frontend/containers.md

@@ -25,7 +25,8 @@ Container for displaying header which includes title and homepage link.
 ```javascript
 {
   config: Object,
-  fetchConfig: Function
+  fetchConfig: Function,
+  updated: Boolean \\ optional
 }
 ```
 
@@ -82,7 +83,11 @@ The button is activated when the editor changes.
   putConfig: Function,
   error: String,
   updated: Boolean,
-  editorChanged: Boolean
+  editorChanged: Boolean,
+  errors: Array,
+  clearErrors: Function,
+  router: Object,
+  route: Object
 }
 ```
 

docs/api.md

@@ -73,12 +73,18 @@ A standard JSON object of a directory looks like this:
 
 #### Data files and the config file
 
-Data files and the config file are direct JSON representations of the underlying YAML File.
+Data files are a direct JSON representations of the underlying YAML File.
+A JSON object from the config file has the data segregated into two representations:
+
+* `content` - the parsed configuration data as read by Jekyll.
+* `raw_content` - the raw data as it sits on the disk.
 
 #### Static files
 
 Static files are non-Jekyll files and may be binary or text.
 
+---
+
 ### Collections
 
 #### Parameters
@@ -143,13 +149,13 @@ Delete the requested page from disk.
 
 #### `GET /configuration`
 
-Returns the parsed site configuration.
+Returns a hash object comprised of the parsed configuration from the file and the raw unparsed content of the file.
 
 #### `PUT /configuration`
 
-Create or update the site's `_config.yml` file with the requested contents.
+Create or update the site's `_config.yml` file with the requested raw file content string.
 
-File will be written to disk in YAML. It will not necessarily preserve whitespace or inline comments.
+File will be written to disk verbatim, preserving whitespace and inline comments.
 
 ### Static files
 

lib/jekyll-admin/server/configuration.rb

@@ -2,12 +2,15 @@ module JekyllAdmin
   class Server < Sinatra::Base
     namespace "/configuration" do
       get do
-        json raw_configuration.to_liquid
+        json({
+          :content     => parsed_configuration,
+          :raw_content => raw_configuration,
+        })
       end
 
       put do
         write_file(configuration_path, configuration_body)
-        json raw_configuration.to_liquid
+        json request_payload
       end
 
       private
@@ -23,19 +26,31 @@ def configuration
         @configuration ||= Jekyll.configuration(overrides)
       end
 
-      # Raw configuration, as it sits on disk
-      def raw_configuration
+      # Configuration data, as read by Jekyll
+      def parsed_configuration
         configuration.read_config_file(configuration_path)
       end
 
+      # Raw configuration content, as it sits on disk
+      def raw_configuration
+        File.read(
+          configuration_path,
+          Jekyll::Utils.merged_file_read_opts(site, {})
+        )
+      end
+
       # Returns the path to the *first* config file discovered
       def configuration_path
         sanitized_path configuration.config_files(overrides).first
       end
 
       # The user's uploaded configuration for updates
+      # Instead of extracting `raw_content` directly from the `request_payload`,
+      #   assign the data to a new variable and then extract the `raw_content`
+      #   from it to circumvent CORS violation in `development` mode.
       def configuration_body
-        YAML.dump request_payload
+        payload = request_payload
+        payload["raw_content"]
       end
     end
   end

spec/jekyll-admin/server/configuration_spec.rb

@@ -8,7 +8,7 @@ def app
   it "returns the configuration" do
     get "/configuration"
     expect(last_response).to be_ok
-    expect(last_response_parsed["foo"]).to eql("bar")
+    expect(last_response_parsed["content"]["foo"]).to eql("bar")
     expect(last_response_parsed.key?("source")).to eql(false)
   end
 

src/actions/config.js

@@ -1,9 +1,10 @@
 import * as ActionTypes from '../constants/actionTypes';
 import { getConfigurationUrl, putConfigurationUrl } from '../constants/api';
-import { getParserErrorMessage } from '../constants/lang';
+import { getContentRequiredMessage } from '../constants/lang';
 import { addNotification } from './notifications';
 import { get, put } from '../utils/fetch';
-import { toJSON } from '../utils/helpers';
+import { validator } from '../utils/validation';
+import { validationError } from './utils';
 
 export function fetchConfig() {
   return dispatch => {
@@ -18,23 +19,33 @@ export function fetchConfig() {
 }
 
 export function putConfig(config) {
-  return (dispatch) => {
-    let json;
-    try {
-      json = toJSON(config);
-    } catch (e) {
-      return dispatch(addNotification(getParserErrorMessage(), e.message, 'error'));
+  return (dispatch, getState) => {
+    const errors = validateConfig(config);
+    if (errors.length) {
+      return dispatch(validationError(errors));
     }
+    // clear errors
+    dispatch({type: ActionTypes.CLEAR_ERRORS});
     return put(
       putConfigurationUrl(),
-      JSON.stringify(json),
+      JSON.stringify({ raw_content: config }),
       { type: ActionTypes.PUT_CONFIG_SUCCESS, name: "config"},
       { type: ActionTypes.PUT_CONFIG_FAILURE, name: "error"},
       dispatch
     );
   };
 }
 
+function validateConfig(config) {
+  return validator(
+    { config },
+    { 'config': 'required' },
+    {
+      'config.required': getContentRequiredMessage()
+    }
+  );
+}
+
 export function onEditorChange() {
   return {
     type: ActionTypes.CONFIG_EDITOR_CHANGED

src/actions/tests/config.spec.js

@@ -36,13 +36,13 @@ describe('Actions::Config', () => {
 
   it('updates the configuration', () => {
     nock(API)
-      .put('/configuration', config)
+      .put('/configuration')
       .reply(200, config);
 
-    const expectedAction = [{
-      type: types.PUT_CONFIG_SUCCESS,
-      config
-    }];
+    const expectedAction = [
+      { type: types.CLEAR_ERRORS },
+      { type: types.PUT_CONFIG_SUCCESS, config }
+    ];
 
     const store = mockStore({ config: {} });
     return store.dispatch(actions.putConfig(config_yaml))
@@ -56,15 +56,16 @@ describe('Actions::Config', () => {
       .put('/configuration', config)
       .replyWithError('something awful happened');
 
-    const expectedAction = {
-      type: types.PUT_CONFIG_FAILURE
-    };
+    const expectedAction = [
+      { type: types.CLEAR_ERRORS },
+      { type: types.PUT_CONFIG_FAILURE }
+    ];
 
     const store = mockStore({ config: {} });
 
     return store.dispatch(actions.putConfig(config_yaml))
       .then(() => {
-        expect(store.getActions()[0].type).toEqual(expectedAction.type);
+        expect(store.getActions()[1].type).toEqual(expectedAction[1].type);
       });
   });
 });

src/containers/Header.js

@@ -12,14 +12,25 @@ export class Header extends Component {
     fetchConfig();
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.updated !== nextProps.updated) {
+      const { fetchConfig } = this.props;
+      fetchConfig();
+    }
+  }
+
   render() {
     const { config } = this.props;
+    const configuration = config.content;
     return (
       <div className="header">
         <h3 className="title">
           <Link target="_blank" to={`/`}>
             <i className="fa fa-home" />
-            <span>{config.title || 'You have no title!'}</span>
+            {
+              configuration &&
+                <span>{configuration.title || 'You have no title!'}</span>
+            }
           </Link>
         </h3>
         <span className="version">{VERSION}</span>
@@ -30,11 +41,13 @@ export class Header extends Component {
 
 Header.propTypes = {
   fetchConfig: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired
+  config: PropTypes.object.isRequired,
+  updated: PropTypes.bool
 };
 
 const mapStateToProps = (state) => ({
   config: state.config.config,
+  updated: state.config.updated,
   isFetching: state.config.isFetching
 });
 

src/containers/tests/fixtures/index.js

@@ -1,9 +1,11 @@
 export const config = {
-  title: "Your awesome title",
-  email: "[email protected]",
-  description: "Write an awesome description for your new site here.",
-  baseurl: "",
-  url: "http://yourdomain.com"
+  content: {
+    title: "Your awesome title",
+    email: "[email protected]",
+    baseurl: "",
+    url: "http://yourdomain.com"
+  },
+  raw_content: "title: Your awesome title\nemail: [email protected]\nbaseurl:\nurl: http://yourdomain.com"
 };
 
 export const collections = [

src/containers/tests/header.spec.js

@@ -24,8 +24,9 @@ function setup() {
 describe('Containers::Header', () => {
   it('should render correctly', () => {
     const { title, component } = setup();
+    const { content } = config;
     const actual = title.text();
-    const expected = config.title;
+    const expected = content.title;
     expect(actual).toEqual(expected);
   });
 

src/containers/views/Configuration.js

@@ -4,8 +4,10 @@ import { bindActionCreators } from 'redux';
 import { withRouter } from 'react-router';
 import { HotKeys } from 'react-hotkeys';
 import Editor from '../../components/Editor';
+import Errors from '../../components/Errors';
 import Button from '../../components/Button';
 import { putConfig, onEditorChange } from '../../actions/config';
+import { clearErrors } from '../../actions/utils';
 import { getLeaveMessage } from '../../constants/lang';
 import { toYAML, preventDefault } from '../../utils/helpers';
 
@@ -22,6 +24,14 @@ export class Configuration extends Component {
     router.setRouteLeaveHook(route, this.routerWillLeave.bind(this));
   }
 
+  componentWillUnmount() {
+    const { clearErrors, errors } = this.props;
+    // clear errors if any
+    if (errors.length) {
+      clearErrors();
+    }
+  }
+
   routerWillLeave(nextLocation) {
     if (this.props.editorChanged) {
       return getLeaveMessage();
@@ -40,14 +50,15 @@ export class Configuration extends Component {
   }
 
   render() {
-    const { editorChanged, onEditorChange, config, updated } = this.props;
-
+    const { editorChanged, onEditorChange, config, updated, errors } = this.props;
+    const { raw_content } = config;
     const keyboardHandlers = {
       'save': this.handleClickSave,
     };
 
     return (
-      <HotKeys handlers={keyboardHandlers}>
+      <HotKeys handlers={keyboardHandlers} className="single">
+        {errors && errors.length > 0 && <Errors errors={errors} />}
         <div className="content-header">
           <h1>Configuration</h1>
           <div className="page-buttons">
@@ -58,11 +69,14 @@ export class Configuration extends Component {
               triggered={updated} />
           </div>
         </div>
-        <Editor
-          editorChanged={editorChanged}
-          onEditorChange={onEditorChange}
-          content={toYAML(config)}
-          ref="editor" />
+        {
+          raw_content &&
+            <Editor
+              editorChanged={editorChanged}
+              onEditorChange={onEditorChange}
+              content={raw_content}
+              ref="editor" />
+        }
       </HotKeys>
     );
   }
@@ -74,19 +88,23 @@ Configuration.propTypes = {
   putConfig: PropTypes.func.isRequired,
   updated: PropTypes.bool.isRequired,
   editorChanged: PropTypes.bool.isRequired,
+  errors: PropTypes.array.isRequired,
+  clearErrors: PropTypes.func.isRequired,
   router: PropTypes.object.isRequired,
   route: PropTypes.object.isRequired
 };
 
 const mapStateToProps = (state) => ({
   config: state.config.config,
   updated: state.config.updated,
-  editorChanged: state.config.editorChanged
+  editorChanged: state.config.editorChanged,
+  errors: state.utils.errors
 });
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
   putConfig,
-  onEditorChange
+  onEditorChange,
+  clearErrors
 }, dispatch);
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Configuration));