Use monaco editor for specification and description

README.md

@@ -1,3 +1,4 @@
+
 # vlingo-schemata
 
 [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/vlingo-platform-java/schemata)
@@ -153,7 +154,7 @@ $ # run Boostrap.main from your IDE
 $ cd <project root>/src/main/frontend
 $ npm run serve &
 $ cd <project root>/src/test/e2e
-$ CYPRESS_BASE_URL=http://localhost:8080 npx cypress open
+$ CYPRESS_BASE_URL=http://localhost:8080/app npx cypress open
 ```
 In case you want to run the tests against `vlingo-schemata` running within a docker container,
 you can simple start it like this to match the E2E base URL default: 
@@ -162,6 +163,6 @@ you can simple start it like this to match the E2E base URL default:
 
 ```
 $ cd <project root>/src/test/e2e
-$ export CYPRESS_BASE_URL=http://localhost:9019 # default
+$ export CYPRESS_BASE_URL=http://localhost:9019/app # default
 $ npx cypress open
 ```

src/main/frontend/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@babel/polyfill": "^7.0.0-rc.1",
+    "monaco-editor-vue": "1.0.9",
     "axios": "^0.19.0",
     "marked": "^0.7.0",
     "vue": "^2.6.6",
@@ -29,6 +30,7 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "monaco-editor-webpack-plugin": "^1.7.0",
     "vue-cli-plugin-vuetify": "^0.5.0",
     "vue-template-compiler": "^2.5.21"
   },

src/main/frontend/src/components/SchemaVersion.vue

@@ -86,19 +86,34 @@
                         ></v-autocomplete>
                     </v-col>
 
-                    <v-col class="d-flex" cols="12" lg="6">
-                        <v-textarea
+                    <v-col cols="12">
+                        <label class="v-label theme--light"
+                               :class="{'primary--text':descriptionEditorActive}">Description</label>
+                        <editor
+                                id="description-editor"
+                                @change="activateDescriptionEditor"
                                 v-model="description"
-                                label="Description"
-                                required
-                        ></v-textarea>
+                                theme="vs-dark"
+                                language="markdown"
+                                height="200"
+                                :options="editorOptions"
+                        ></editor>
                     </v-col>
-                    <v-col class="d-flex" cols="12" lg="6">
-                        <v-textarea
+                    <v-col cols="12">
+                        <label class="v-label theme--light"
+                               :class="{'primary--text':specificationEditorActive}"
+                        >Specification</label>
+                        <editor
+                                id="specification-editor"
                                 v-model="specification"
-                                label="Specification"
-                                required
-                        ></v-textarea>
+                                @change="activateSpecificationEditor"
+                                theme="vs-dark"
+                                language="javascript"
+                                height="500"
+                                :options="editorOptions"
+                        ></editor>
+
+
                     </v-col>
                 </v-row>
             </v-form>
@@ -116,8 +131,11 @@
 <script>
     import {mapFields} from 'vuex-map-fields';
     import Repository from '@/api/SchemataRepository'
+    import editor from 'monaco-editor-vue';
 
     export default {
+        components: {editor},
+
         data: () => {
             return {
                 schemaVersionId: '',
@@ -134,6 +152,12 @@
                     contexts: false,
                     versions: false,
                     schemata: false,
+                },
+                descriptionEditorActive: false,
+                specificationEditorActive: false,
+
+                editorOptions: {
+                    automaticLayout: true,
                 }
             }
         },
@@ -233,6 +257,14 @@
                         let response = err.response ? err.response.data + ' - ' : ''
                         vm.$store.commit('raiseError', {message: response + err})
                     })
+            },
+            activateDescriptionEditor() {
+                this.descriptionEditorActive = true
+                this.specificationEditorActive = false
+            },
+            activateSpecificationEditor() {
+                this.descriptionEditorActive = false
+                this.specificationEditorActive = true
             }
         }
     }

src/main/frontend/vue.config.js

@@ -1,5 +1,7 @@
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
+
 module.exports = {
-    publicPath: './',
+    publicPath: '/app/',
     devServer: {
         proxy: {
             '/organizations': {
@@ -13,4 +15,11 @@ module.exports = {
             }
         },
     },
+    chainWebpack: config => {
+        config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
+            {
+                languages: ['javascript', 'markdown']
+            }
+        ])
+    }
 }

src/test/e2e/cypress/integration/browse-schemata.spec.ts

@@ -24,8 +24,7 @@ describe('Entity Creation Tests', function () {
         let prevVersion = majorMinorVersion + '.' + patchVersion
         let currentVersion = majorMinorVersion + '.' + (patchVersion + 1)
         let spec = 'event SalutationHappened {\n' +
-            '    type eventType\n' +
-            '}'
+            '    type eventType'
         let desc = faker.lorem.sentence()
 
         // Create Entities
@@ -67,8 +66,8 @@ describe('Entity Creation Tests', function () {
         cy.fillField('Previous Version', prevVersion)
         cy.fillField('Current Version', currentVersion)
         cy.selectOption('Status', faker.random.arrayElement(['Draft', 'Published', 'Deprecated', 'Removed']))
-        cy.fillField('Description', desc)
-        cy.fillField('Specification', spec)
+        cy.fillEditor('#description-editor', desc)
+        cy.fillEditor('#specification-editor', spec)
         cy.contains('button', 'Create').click()
 
         // Assert visibility in treeview
@@ -86,7 +85,8 @@ describe('Entity Creation Tests', function () {
         cy.contains('.v-list-item__title', currentVersion).click()
 
         // Assert spec & desc
-        cy.contains('code',spec)
+        cy.contains('code','event SalutationHappened')
+        cy.contains('code','type eventType')
         cy.contains('.v-tab', 'Description').click()
         cy.contains('.v-window-item--active',desc)
 

src/test/e2e/cypress/integration/entity-creation.spec.ts

@@ -33,7 +33,6 @@ describe('Entity Creation Tests', function () {
 
         cy.visit('/#/unit')
         cy.fieldContent('UnitID').should('be.empty')
-        cy.selectOption('Organization', orgName)
         cy.fillField('Name', unitName)
         cy.fillField('Description', faker.lorem.sentence())
         cy.contains('button', 'Create').click()
@@ -51,15 +50,12 @@ describe('Entity Creation Tests', function () {
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/unit')
-        cy.selectOption('Organization', orgName)
         cy.fillField('Name', unitName)
         cy.fillField('Description', 'foo')
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/context')
         cy.fieldContent('ContextID').should('be.empty')
-        cy.selectOption('Organization', orgName)
-        cy.selectOption('Unit', unitName)
         cy.fillField('Namespace', namespace)
         cy.fillField('Description', faker.lorem.sentence())
         cy.contains('button', 'Create').click()
@@ -78,23 +74,17 @@ describe('Entity Creation Tests', function () {
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/unit')
-        cy.selectOption('Organization', orgName)
         cy.fillField('Name', unitName)
         cy.fillField('Description', 'foo')
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/context')
-        cy.selectOption('Organization', orgName)
-        cy.selectOption('Unit', unitName)
         cy.fillField('Namespace', namespace)
         cy.fillField('Description', 'foo')
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/schema')
         cy.fieldContent('SchemaID').should('be.empty')
-        cy.selectOption('Organization', orgName)
-        cy.selectOption('Unit', unitName)
-        cy.selectOption('Context', namespace)
         cy.fillField('Name', name)
         cy.selectOption('Category', faker.random.arrayElement(['Command', 'Data', 'Document', 'Envelope', 'Event', 'Unknown']))
         cy.selectOption('Scope', faker.random.arrayElement(['Public', 'Private']))
@@ -121,23 +111,17 @@ describe('Entity Creation Tests', function () {
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/unit')
-        cy.selectOption('Organization', orgName)
         cy.fillField('Name', unitName)
         cy.fillField('Description', 'foo')
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/context')
-        cy.selectOption('Organization', orgName)
-        cy.selectOption('Unit', unitName)
         cy.fillField('Namespace', namespace)
         cy.fillField('Description', 'foo')
         cy.contains('button', 'Create').click()
 
         cy.visit('/#/schema')
         cy.fieldContent('SchemaID').should('be.empty')
-        cy.selectOption('Organization', orgName)
-        cy.selectOption('Unit', unitName)
-        cy.selectOption('Context', namespace)
         cy.fillField('Name', schema)
         cy.selectOption('Category', faker.random.arrayElement(['Command', 'Data', 'Document', 'Envelope', 'Event', 'Unknown']))
         cy.selectOption('Scope', faker.random.arrayElement(['Public', 'Private']))
@@ -147,19 +131,15 @@ describe('Entity Creation Tests', function () {
 
         cy.visit('/#/schemaVersion')
         cy.fieldContent('SchemaVersionID').should('be.empty')
-        cy.selectOption('Organization', orgName)
-        cy.selectOption('Unit', unitName)
-        cy.selectOption('Context', namespace)
-        cy.selectOption('Schema', schema)
         cy.fillField('Previous Version', prevVersion)
         cy.fillField('Current Version', currentVersion)
         cy.selectOption('Status', faker.random.arrayElement(['Draft', 'Published', 'Deprecated', 'Removed']))
-        cy.fillField('Description', faker.lorem.sentence())
-        cy.fillField('Specification', 'event SalutationHappened {\n' +
-            '    type eventType\n' +
-            '}')
-        cy.contains('button', 'Create').click()
-        cy.fieldContent('SchemaVersionID').should('not.be.empty')
+        cy.fillEditor('#description-editor', faker.lorem.sentence())
+        cy.fillEditor('#specification-editor', 'event SalutationHappened {\n' +
+            '    type eventType')
+        cy.wait(250).contains('button', 'Create').click({force: true})
+
+        cy.wait(250).fieldContent('SchemaVersionID').should('not.be.empty')
     });
 
 });

src/test/e2e/cypress/support/commands.ts

@@ -7,20 +7,28 @@
 // ***********************************************
 
 Cypress.Commands.add("fillField", (label: string, text: string) => {
-    cy.contains('label', new RegExp("^"+label+"$"))
+    cy.contains('label', new RegExp("^" + label + "$"))
         .next('input,textarea').type(text)
 })
 
+Cypress.Commands.add("fillEditor", (id: string, text: string) => {
+    cy.get(id)
+        .click()
+        .focused()
+        .type('{ctrl}a')
+        .type(text)
+})
+
 Cypress.Commands.add("fieldContent", (label: string) => {
-    cy.contains('label', new RegExp("^"+label+"$"))
+    cy.contains('label', new RegExp("^" + label + "$"))
         .next('input,textarea').invoke('val')
 })
 
 Cypress.Commands.add("selectOption", (label: string, optionLabel: string) => {
-    cy.contains('label', new RegExp("^"+label+"$"))
+    cy.contains('label', new RegExp("^" + label + "$"))
         .next('input')
-        .type(optionLabel.substr(0,optionLabel.length-1))
+        .type(optionLabel.substr(0, optionLabel.length - 1))
         .get('.v-select-list')
-        .contains('.v-list-item',optionLabel)
+        .contains('.v-list-item', optionLabel)
         .click({force: true})
 })

src/test/e2e/cypress/support/index.d.ts

@@ -8,6 +8,12 @@ declare namespace Cypress {
          */
         fillField(label: string, text: string): Chainable<Element>
 
+        /**
+         * Fill a vue-monaco-editor field identified by its id
+         * @example cy.fillEditor('#specification-editor','schema MySpec {}')
+         */
+        fillEditor(label: string, text: string): Chainable<Element>
+
         /**
          * Return the value a Vuetify text(area) field identified by its label
          * @example cy.fieldContent('Name')