SoapboxConfig: Raw JSON editor

app/soapbox/features/soapbox_config/index.js

@@ -11,10 +11,11 @@ import {
   TextInput,
   Checkbox,
   FileChooser,
+  SimpleTextarea,
   ColorWithPicker,
   FileChooserLogo,
 } from 'soapbox/features/forms';
-import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { updateAdminConfig } from 'soapbox/actions/admin';
 import Icon from 'soapbox/components/icon';
 import { defaultConfig } from 'soapbox/actions/soapbox';
@@ -29,6 +30,8 @@ const messages = defineMessages({
   homeFooterItemLabel: { id: 'soapbox_config.home_footer.meta_fields.label_placeholder', defaultMessage: 'Label' },
   homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
   customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
+  rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' },
+  rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly. You need to paste it in for now.' },
 });
 
 const templates = {
@@ -61,6 +64,10 @@ class SoapboxConfig extends ImmutablePureComponent {
     this.setState({ soapbox: config });
   };
 
+  putConfig = config => {
+    this.setState({ soapbox: config });
+  };
+
   getParams = () => {
     const { soapbox } = this.state;
     return {
@@ -138,13 +145,22 @@ class SoapboxConfig extends ImmutablePureComponent {
     );
   };
 
+  handleEditJSON = e => {
+    try {
+      const data = fromJS(JSON.parse(e.target.value));
+      this.putConfig(data);
+    } catch {
+      // do nothing
+    }
+  }
+
   getSoapboxConfig = () => {
     return defaultConfig.mergeDeep(this.state.soapbox);
   }
 
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.soapbox !== this.props.soapbox) {
-      this.setState({ soapbox: this.props.soapbox });
+      this.putConfig(this.props.soapbox);
     }
   }
 
@@ -314,6 +330,17 @@ class SoapboxConfig extends ImmutablePureComponent {
                 </div>
               </div>
             </FieldsGroup>
+            <FieldsGroup>
+              <div className='code-editor'>
+                <SimpleTextarea
+                  label={intl.formatMessage(messages.rawJSONLabel)}
+                  hint={intl.formatMessage(messages.rawJSONHint)}
+                  value={JSON.stringify(this.state.soapbox, null, 2)}
+                  onChange={this.handleEditJSON}
+                  rows={12}
+                />
+              </div>
+            </FieldsGroup>
           </fieldset>
           <div className='actions'>
             <button name='button' type='submit' className='btn button button-primary'>

app/styles/forms.scss

@@ -989,3 +989,8 @@ code {
   max-width: 100px;
   max-height: 100px;
 }
+
+.code-editor textarea {
+  font-family: monospace;
+  white-space: pre;
+}