Show warning if note is longer than configured maximum length (#534)

* Add maximum document length config option

* Show remaining characters in tooltip of status-bar length-info

* Remove unnecessary checkDocumentLength function

* Add max-length warning

* Update translation wording

* Set dialog to medium size

* Add coloring to status-bar length info

* Improve wording in warning modal

* Add cypress e2e tests

I included the cypress-commands package and set the language level to ES6 to allow easier testing e.g. of element attributes.

* Changed way how the modal-advice was styled and positioned

* Show warning modal only on first length exceeding

* Improved length tooltip by adding messages when exceeding or reaching limit

cypress/integration/maxLength.spec.ts

@@ -0,0 +1,49 @@
+const tenChars: string = '0123456789'
+
+describe('status-bar text-length info', () => {
+  beforeEach(() => {
+    cy.visit('/n/test')
+    cy.get('.CodeMirror textarea')
+      .type('{ctrl}a', { force: true })
+      .type('{backspace}')
+  })
+
+  it('tooltip shows full remaining on empty text', () => {
+    cy.get('.status-bar div:nth-child(2) span:nth-child(2)')
+      .attribute('title')
+      .should('contain', ' 200 ')
+  })
+
+  it('color is warning on <= 100 chars remaining', () => {
+    cy.get('.CodeMirror textarea')
+    .type(`${tenChars.repeat(10)}`)
+    cy.get('.status-bar div:nth-child(2) span:nth-child(2)')
+      .should('have.class', 'text-warning')
+  })
+
+  it('color is danger on <= 0 chars remaining', () => {
+    cy.get('.CodeMirror textarea')
+    .type(`${tenChars.repeat(20)}`)
+    cy.get('.status-bar div:nth-child(2) span:nth-child(2)')
+    .should('have.class', 'text-danger')
+  })
+})
+
+describe('show warning if content length > configured max length', () => {
+  beforeEach(() => {
+    cy.visit('/n/test')
+    cy.get('.CodeMirror textarea')
+    .type('{ctrl}a', { force: true })
+    .type('{backspace}')
+    .type(`${tenChars.repeat(20)}`)
+  })
+
+  it('show warning alert in renderer and as modal', () => {
+    cy.get('.CodeMirror textarea')
+      .type('a')
+    cy.get('.modal-body.limit-warning')
+      .should('be.visible')
+    cy.get('.splitter .alert-danger')
+    .should('be.visible')
+  })
+})

cypress/support/config.ts

@@ -34,6 +34,7 @@ beforeEach(() => {
         oauth2: 'Olaf2',
         saml: 'aufSAMLn.de'
       },
+      maxDocumentLength: 200,
       specialLinks: {
         privacy: 'https://example.com/privacy',
         termsOfUse: 'https://example.com/termsOfUse',

cypress/support/index.ts

@@ -13,6 +13,7 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import 'cypress-commands'
 import './checkLinks'
 import './config'
 import './login'

cypress/tsconfig.json

@@ -2,9 +2,9 @@
   "compilerOptions": {
     "strict": true,
     "baseUrl": "../node_modules",
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["cypress"]
+    "target": "es6",
+    "lib": ["es6", "dom"],
+    "types": ["cypress-commands", "cypress"]
   },
   "include": [
     "**/*.ts"