Config Editor - Base Module

This project includes a React based JSON Schema editor.

Installation

npm install --save config-editor-base

---

Development testing

You can directly test the "raw" configuration editor by cloning this repository and running below npm install in root and in the example/ folder. After this, run npm start in the root as well as in the example/ folder.

---

Publishing a new package via npm

To publish your own custom version as an npm package, you can modify the package.json and run npm publish. You'll need to be logged in first.

---

Usage in a parent app

The module uses redux, hence you'll need to import the base module and the reducer as follows:

// reducers.js

import { combineReducers } from 'redux'
import alert from './alert/reducer'

import { editor } from 'config-editor-base'

const rootReducer = combineReducers({
  alert,
  editor
})

export default rootReducer

In the parent App we can load an Editor module, which can be constructed as below:

import React from 'react'
import { connect } from 'react-redux'

import { EncryptionModal } from 'config-editor-tools'
import { EditorSection } from 'config-editor-base'

import * as actionsAlert from '../alert/actions'
import AlertContainer from '../alert/AlertContainer'

class Editor extends React.Component {
  render() {
    let editorTools = [
      {
        name: 'encryption-modal',
        comment: 'Encryption tool',
        class: 'fa fa-lock',
        modal: <EncryptionModal showAlert={this.props.showAlert} />
      }
    ]

    return (
      <div className='file-explorer'>
        <div className='fe-body fe-body-offline'>
          <AlertContainer />
          <EditorSection
            editorTools={editorTools}
            showAlert={this.props.showAlert}
          />
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    showAlert: (type, message) =>
      dispatch(actionsAlert.set({ type: type, message: message }))
  }
}

export default connect(null, mapDispatchToProps)(Editor)

---

Parsing embedded Rule Schema and UISchema files

The config editor can take a list of UIschema and Rule Schema files. This enables the editor to "auto-load" the UIschemas upon initial load, as well as "auto-load" the Rule Schema files matching the revision of the loaded Configuration File.

Note that the parsed list of files should match the actual files that are included in the config-editor-base dist/ folder.

For example, the Rule Schema for "schema-01.02.json | CANedge2" should be contained in dist/schema/CANedge2/schema-01.02.json.

The syntax for parsing these lists is as below (in the config-editor repo Editor.js file):

// define UIschema and Rule Schema names for auto-loading embedded schema files
export const uiSchemaAry = [
  "uischema-01.02.json | Simple",
  "uischema-01.02.json | Advanced",
];

export const schemaAry = [
  "schema-01.02.json | CANedge2",
  "schema-01.02.json | CANedge1",
  "schema-00.07.json | CANedge2",
  "schema-00.07.json | CANedge1",
];

...

<EditorSection
  editorTools={editorTools}
  showAlert={this.props.showAlert}
  uiSchemaAry={uiSchemaAry}
  schemaAry={schemaAry}
/>
...

Note that the code distinguishes between a config-XX.YY.json file loaded from a CANedge1 and CANedge2 unit. This is done by evaluating whether a connect section exists or not in the Configuration File. Based on this test, the editor either loads the Rule Schema for the CANedge2 (if connect exists) or the CANedge1.

---

Parsing S3 functionality

The config editor also supports various S3 calls, e.g. for loading Rule Schema and Configuration Files from a device S3 folder - as well as submitting updated Configuration Files to S3. See the CANcloud repository for an example of this implementation.

---

Regarding styling

The config editor relies on styling from the parent application. For examples of styling, see the CANedge configuration editor.

---

Regarding JSON Schema files

The module expects to find JSON Schema files in the structure below to facilitate auto-loading of these:

/
|-- dist/
	|-- schema/
		|-- Advanced/
			|-- uischema-XX.YY.json 
		|-- Simple/
			|-- uischema-XX.YY.json 
		|-- CANedge1/
			|-- schema-XX.YY.json 
		|-- CANedge2/
			|-- schema-XX.YY.json