Use new errorMessage props of text-input component.

- oc-text-input now has an errorMessage property for showing an error
message in a fixed way.
- also use prop of oc-text-input to always reserve vertical space for
the error message.
- Debounce error message changes:
The dialog reacted to error messages as soon as they were created which
can be annoying.
For example there is an error message when the name of a new folder ends
in a blank. If you type folder names containing blanks, the error
message would appear during typing for every single blank for a brief
moment and then would disappear when the next non-blank char is typed.
Debouncing error messages causes that they don't appear during typing
but only if you stop typing for the specified time (400 milliseconds).

apps/files/src/components/ocDialogPrompt.vue

@@ -1,9 +1,6 @@
 <template>
   <oc-dialog :name="name" v-model="ocActive" :title="ocTitle">
     <template slot="content">
-      <oc-alert v-if="ocError" class="oc-dialog-prompt-alert" :noClose="true" variation="danger">
-        {{ ocError }}
-      </oc-alert>
       <span v-if="ocContent" class="uk-text-break">{{ ocContent }}</span>
       <oc-text-input v-if="ocHasInput"
         :disabled="ocLoading"
@@ -14,12 +11,15 @@
         v-model="inputValue"
         ref="input"
         @keydown.enter.native="onConfirm"
+        :error-message="ocErrorDelayed"
+        :fix-message-line="true"
+        class="oc-dialog-prompt-input-offset"
       ></oc-text-input>
       <oc-loader v-if="ocLoading"></oc-loader>
     </template>
     <template slot="footer">
         <oc-button :id="ocCancelId" :disabled="ocLoading" @click.stop="onCancel">{{ _ocCancelText }}</oc-button>
-        <oc-button :disabled="ocLoading || ocError !== null || inputValue === '' || clicked"
+        <oc-button :disabled="ocLoading || !!ocError || inputValue === '' || clicked"
                :id="ocConfirmId"
                ref="confirmButton"
                :autofocus="!ocHasInput"
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import debounce from 'lodash/debounce'
 export default {
   name: 'OcDialogPrompt',
   props: {
@@ -61,7 +62,8 @@ export default {
   },
   data: () => ({
     inputValue: null,
-    clicked: false
+    clicked: false,
+    ocErrorDelayed: null
   }),
   computed: {
     _ocConfirmText () {
@@ -91,7 +93,10 @@ export default {
           this.$refs.confirmButton.$el.focus()
         }
       })
-    }
+    },
+    ocError: debounce(function (error) {
+      this.ocErrorDelayed = error
+    }, 400)
   },
   created () {
     this.inputValue = this.value
@@ -109,3 +114,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+  /* FIXME: this is ugly, but required so that the bottom padding doesn't look off when reserving vertical space for error messages below the input. */
+  .oc-dialog-prompt-input-offset {
+    margin-bottom: -20px;
+  }
+</style>

changelog/unreleased/1906

@@ -0,0 +1,9 @@
+Enhancement: Visual improvement to errors in input prompts
+
+We've adjusted the input prompts to show a visually less prominent text below the input field.
+Also, error messages now appear with a small delay, so that those happening during
+typing get ignored (e.g. trailing whitespace is not allowed in folder names and previously caused
+an error to show on every typed blank).
+
+https://github.com/owncloud/phoenix/issues/1906
+https://github.com/owncloud/phoenix/pull/3240

package.json

@@ -81,7 +81,7 @@
     "node-fs-extra": "^0.8.2",
     "npm-run-all": "^4.1.5",
     "oidc-client": "^1.9.1",
-    "owncloud-design-system": "^1.1.1",
+    "owncloud-design-system": "^1.2.1",
     "owncloud-sdk": "^1.0.0-544",
     "p-limit": "^2.2.1",
     "p-queue": "^6.1.1",

tests/acceptance/pageObjects/filesPage.js

@@ -298,10 +298,11 @@ module.exports = {
       selector: '#new-file-dialog'
     },
     newFolderInput: {
-      selector: '#new-folder-input'
+      selector: "//input[@id='new-folder-input']",
+      locateStrategy: 'xpath'
     },
     newFileInput: {
-      selector: "//div[@id='new-file-dialog']//input[@type='text']",
+      selector: "//input[@id='new-file-dialog']",
       locateStrategy: 'xpath'
     },
     newFolderOkButton: {

tests/acceptance/pageObjects/phoenixPage.js

@@ -187,7 +187,7 @@ module.exports = {
       selector: '#resolve-notification-button'
     },
     ocDialogPromptAlert: {
-      selector: '.uk-modal.uk-open .oc-dialog-prompt-alert'
+      selector: '.uk-modal.uk-open .oc-text-input-message'
     },
     searchInputFieldHighResolution: {
       selector: '(//input[contains(@class, "oc-search-input")])[1]',

yarn.lock

@@ -2894,9 +2894,9 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
-"davclient.js@git+https://github.com/owncloud/davclient.js.git":
+"davclient.js@https://github.com/owncloud/davclient.js.git":
   version "0.2.1"
-  resolved "git+https://github.com/owncloud/davclient.js.git#bf19f590451b3c0658913568053ec7f300f7dfc1"
+  resolved "https://github.com/owncloud/davclient.js.git#bf19f590451b3c0658913568053ec7f300f7dfc1"
 
 de-indent@^1.0.2:
   version "1.0.2"
@@ -6028,6 +6028,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+luxon@^1.22.0:
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-1.23.0.tgz#23b748ad0f2d5494dc4d2878c19278c1e651410c"
+  integrity sha512-+6a/bXsCWrrR8vfbL41iM92es12zwV2Rum/KPkT+ubOZnnU3Sqbqok/FmD1xsWlWN2Y9Hu0fU/vNgU24ns7bpA==
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -6353,6 +6358,11 @@ mocha@^6.2.2:
     yargs-parser "13.1.2"
     yargs-unparser "1.6.0"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6872,13 +6882,14 @@ os-tmpdir@~1.0.1, os-tmpdir@~1.0.2:
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 
-owncloud-design-system@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.1.1.tgz#4c23e9f4b2555c5e2d1ea8049a8c7c4a80346f2e"
-  integrity sha512-dIuMbhJLqsVfV8eXvBSMizJrrxXUDFA0WLIxS2MZ5qPAa9VjiDiPxzLQZKSYEotSpN+lgermzH/Mr0xU8w6Ksg==
+owncloud-design-system@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-1.2.1.tgz#b4c20d4cfda3e7e5a8fe9399320fcefd730e2f77"
+  integrity sha512-W/bcZhtlPcSMD32eXr3jzhmQiGQsNfxxruNlKeAdD84G8KbroIwUuehyRJjFO8SBfVoQl3kdNV2hwYyCGByBZg==
   dependencies:
-    lodash "^4.17.11"
+    luxon "^1.22.0"
     mini-css-extract-plugin "^0.9.0"
+    moment "^2.24.0"
     postcss-import "^12.0.1"
     postcss-loader "^3.0.0"
     postcss-safe-parser "^4.0.2"
@@ -6887,11 +6898,12 @@ owncloud-design-system@^1.1.1:
     uikit "3.3.2"
     vue "^2.6.11"
     vue-avatar "^2.2.0"
-    vue-lodash "^2.1.1"
+    vue-datetime "^1.0.0-beta.10"
     vue-meta "^2.3.2"
     vue-router "^3.1.5"
     vuex "^3.1.1"
     webfontloader "^1.6.28"
+    weekstart "^1.0.0"
 
 owncloud-sdk@^1.0.0-544:
   version "1.0.0-544"
@@ -9618,6 +9630,11 @@ vue-clipboard2@^0.3.1:
   dependencies:
     clipboard "^2.0.0"
 
+vue-datetime@^1.0.0-beta.10:
+  version "1.0.0-beta.11"
+  resolved "https://registry.yarnpkg.com/vue-datetime/-/vue-datetime-1.0.0-beta.11.tgz#283b5182dabe0ab372e375e9c47acb3b41524ffa"
+  integrity sha512-znOQCX0n4nPMsfcwAhlCL47u52NwnYPrlGrqiSsT1sLZgtZmfNMBVO/c0QF6VA5ZszVtopxU0fjZVxu/VpM/Ug==
+
 vue-drag-drop@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/vue-drag-drop/-/vue-drag-drop-1.1.4.tgz#6e94aeb10304b91d651614b7307d0b90f0227e89"
@@ -9663,11 +9680,6 @@ vue-loader@^15.7.1:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-lodash@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/vue-lodash/-/vue-lodash-2.1.2.tgz#1ec2b1471ee289518e8d285250a25516adee6c51"
-  integrity sha512-6QsNC7/XjrK4xKxFhh6Ppvcrfm0uAeR/lFsySsMgfEFUWkvRztcAIS3MsqAI4bBnAaLo9ou+8tUfJ8d+yrljQg==
-
 vue-meta@^2.2.2, vue-meta@^2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.3.3.tgz#2a097f62817204b0da78be4d62aee0cb566eaee0"
@@ -9925,6 +9937,11 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
+weekstart@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/weekstart/-/weekstart-1.0.1.tgz#950970b48e5797e06fc1a762f3d0f013312321e1"
+  integrity sha512-h6B1HSJxg7sZEXqIpDqAtwiDBp3x5y2jY8WYcUSBhLTcTCy7laQzBmamqMuQM5fpvo1pgpma0OCRpE2W8xrA9A==
+
 whatwg-fetch@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"