From a1df595ed5697c515d5c7c5cc4a348cf5cf60879 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Mon, 9 Sep 2019 12:10:54 +0200
Subject: [PATCH 1/4] Adjust UX in new folder/file creation dialog

- empty name now shows an error
- added default value
- added placeholder text
---
 apps/files/src/components/FilesAppBar.vue     | 36 ++++++++++++++-----
 apps/files/src/components/ocDialogPrompt.vue  |  1 +
 .../features/webUIFiles/createFolders.feature |  8 +++++
 tests/acceptance/pageObjects/filesPage.js     |  9 +++--
 .../stepDefinitions/filesContext.js           |  8 +++++
 5 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/apps/files/src/components/FilesAppBar.vue b/apps/files/src/components/FilesAppBar.vue
index 02a150f5d16..3cddf7aeb02 100644
--- a/apps/files/src/components/FilesAppBar.vue
+++ b/apps/files/src/components/FilesAppBar.vue
@@ -27,8 +27,8 @@
               <oc-nav>
                 <file-upload :url='url' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></file-upload>
                 <folder-upload :rootPath='item' :url='url' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></folder-upload>
-                <oc-nav-item @click="createFolder = true" id="new-folder-btn" icon="create_new_folder"><translate>Create new folder…</translate></oc-nav-item>
-                <oc-nav-item @click="createFile = true" id="new-file-btn" icon="save"><translate>Create new file…</translate></oc-nav-item>
+                <oc-nav-item @click="showCreateFolderDialog" id="new-folder-btn" icon="create_new_folder"><translate>Create new folder…</translate></oc-nav-item>
+                <oc-nav-item @click="showCreateFileDialog" id="new-file-btn" icon="save"><translate>Create new file…</translate></oc-nav-item>
               </oc-nav>
             </oc-drop>
           </template>
@@ -55,8 +55,8 @@
       </div>
     </oc-grid>
     <oc-dialog-prompt name="overwrite-dialog" :oc-active="overwriteDialogMessage !== null" :oc-has-input="false" ocCancelId="files-overwrite-cancel" ocConfirmId="files-overwrite-confirm" :ocTitle="overwriteDialogTitle" :oc-content="overwriteDialogMessage" @oc-confirm="$_ocUpload_confirmOverwrite(true)" @oc-cancel="$_ocUpload_confirmOverwrite(false)" />
-    <oc-dialog-prompt name="new-folder-dialog" :oc-active="createFolder" v-model="newFolderName" ocInputId="new-folder-input" ocConfirmId="new-folder-ok" :ocLoading="fileFolderCreationLoading" :ocError="newFolderErrorMessage" :ocTitle="_createFolderDialogTitle" @oc-confirm="addNewFolder" @oc-cancel="createFolder = false; newFolderName = ''"></oc-dialog-prompt>
-    <oc-dialog-prompt name="new-file-dialog" :oc-active="createFile" v-model="newFileName" :ocLoading="fileFolderCreationLoading" :ocError="newFileErrorMessage" :ocTitle="_createFileDialogTitle" @oc-confirm="addNewFile" @oc-cancel="createFile = false; newFileName = ''"></oc-dialog-prompt>
+    <oc-dialog-prompt name="new-folder-dialog" :oc-active="createFolder" v-model="newFolderName" ocInputId="new-folder-input" ocConfirmId="new-folder-ok" :ocLoading="fileFolderCreationLoading" :ocError="newFolderErrorMessage" :ocTitle="$_createFolderDialogTitle" :ocInputPlaceholder="$_createFolderDialogPlaceholder" @oc-confirm="addNewFolder" @oc-cancel="createFolder = false"></oc-dialog-prompt>
+    <oc-dialog-prompt name="new-file-dialog" :oc-active="createFile" v-model="newFileName" :ocLoading="fileFolderCreationLoading" :ocError="newFileErrorMessage" :ocTitle="$_createFileDialogTitle" :ocInputPlaceholder="$_createFileDialogTitle" @oc-confirm="addNewFile" @oc-cancel="createFile = false"></oc-dialog-prompt>
   </div>
 </template>
 
@@ -100,10 +100,16 @@ export default {
     searchLabel () {
       return this.$gettext('Search')
     },
-    _createFolderDialogTitle () {
+    $_createFolderDialogPlaceholder () {
+      return this.$gettext('Enter new folder name…')
+    },
+    $_createFolderDialogTitle () {
       return this.$gettext('Create new folder…')
     },
-    _createFileDialogTitle () {
+    $_createFileDialogPlaceholder () {
+      return this.$gettext('Enter new file name…')
+    },
+    $_createFileDialogTitle () {
       return this.$gettext('Create new file…')
     },
     _cannotCreateDialogText () {
@@ -259,6 +265,10 @@ export default {
         })
       })
     },
+    showCreateFolderDialog () {
+      this.createFolder = true
+      this.newFolderName = this.$gettext('New folder')
+    },
     addNewFolder (folderName) {
       if (folderName !== '') {
         this.fileFolderCreationLoading = true
@@ -270,7 +280,6 @@ export default {
 
         p.then(() => {
           this.createFolder = false
-          this.newFolderName = ''
           this.$_ocFilesFolder_getFolder()
         })
           .catch(error => {
@@ -286,6 +295,10 @@ export default {
       }
     },
     checkNewFolderName (folderName) {
+      if (folderName === '') {
+        return this.$gettext('Folder name cannot be empty')
+      }
+
       if (/[/]/.test(folderName)) {
         return this.$gettext('Folder name cannot contain "/"')
       }
@@ -311,6 +324,10 @@ export default {
 
       return null
     },
+    showCreateFileDialog () {
+      this.createFile = true
+      this.newFileName = this.$gettext('New file') + '.txt'
+    },
     addNewFile (fileName) {
       if (fileName !== '') {
         this.fileFolderCreationLoading = true
@@ -321,7 +338,6 @@ export default {
         }
         p.then(() => {
           this.createFile = false
-          this.newFileName = ''
           this.$_ocFilesFolder_getFolder()
         })
           .catch(error => {
@@ -337,6 +353,10 @@ export default {
       }
     },
     checkNewFileName (fileName) {
+      if (fileName === '') {
+        return this.$gettext('File name cannot be empty')
+      }
+
       if (/[/]/.test(fileName)) {
         return this.$gettext('File name cannot contain "/"')
       }
diff --git a/apps/files/src/components/ocDialogPrompt.vue b/apps/files/src/components/ocDialogPrompt.vue
index dd6000eab5d..80338ba3b51 100644
--- a/apps/files/src/components/ocDialogPrompt.vue
+++ b/apps/files/src/components/ocDialogPrompt.vue
@@ -7,6 +7,7 @@
       <span v-if="ocContent" class="uk-text-break">{{ ocContent }}</span>
         <oc-text-input v-if="ocHasInput"
           :disabled="ocLoading"
+          :placeholder="ocInputPlaceholder"
           autofocus
           :id="ocInputId"
           v-model="inputValue"
diff --git a/tests/acceptance/features/webUIFiles/createFolders.feature b/tests/acceptance/features/webUIFiles/createFolders.feature
index da734e41e35..eb37dc98eae 100644
--- a/tests/acceptance/features/webUIFiles/createFolders.feature
+++ b/tests/acceptance/features/webUIFiles/createFolders.feature
@@ -17,6 +17,14 @@ Feature: create folders
     When the user reloads the current page of the webUI
     Then folder "sub-folder" should be listed on the webUI
 
+  Scenario: Create a folder with default name
+    When the user creates a folder with default name using the webUI
+    Then folder "New folder" should be listed on the webUI
+
+  Scenario: Try to create a folder without name
+    When the user creates a folder without name using the webUI
+    Then the error message 'Folder name cannot be empty' should be displayed on the webUI dialog prompt
+
   Scenario: Try to create a folder with existing name
     When the user creates a folder with the invalid name "simple-folder" using the webUI
     Then the error message 'simple-folder already exists' should be displayed on the webUI dialog prompt
diff --git a/tests/acceptance/pageObjects/filesPage.js b/tests/acceptance/pageObjects/filesPage.js
index 866cdb44ed9..dc1a228f1cf 100644
--- a/tests/acceptance/pageObjects/filesPage.js
+++ b/tests/acceptance/pageObjects/filesPage.js
@@ -27,8 +27,9 @@ module.exports = {
         .assert.containsText('@breadcrumb', folder)
     },
     /**
+     * Create a folder with the given name
      *
-     * @param {string} name
+     * @param {string} name to set or null to use default value from dialog
      * @param {boolean} expectToSucceed
      */
     createFolder: function (name, expectToSucceed = true) {
@@ -38,8 +39,10 @@ module.exports = {
         .waitForElementVisible('@newFolderButton')
         .click('@newFolderButton')
         .waitForElementVisible('@newFolderInput')
-        .setValue('@newFolderInput', name)
-        .click('@newFolderOkButton')
+      if (name !== null) {
+        this.setValue('@newFolderInput', name)
+      }
+      this.click('@newFolderOkButton')
         .waitForElementNotPresent('@createFolderLoadingIndicator')
       if (expectToSucceed) {
         this.waitForElementNotVisible('@newFolderDialog')
diff --git a/tests/acceptance/stepDefinitions/filesContext.js b/tests/acceptance/stepDefinitions/filesContext.js
index 7f8af6c36d0..e3e15e1bd67 100644
--- a/tests/acceptance/stepDefinitions/filesContext.js
+++ b/tests/acceptance/stepDefinitions/filesContext.js
@@ -74,6 +74,14 @@ When('the user creates a folder with the name {string} using the webUI', functio
   return client.page.filesPage().createFolder(folderName)
 })
 
+When('the user creates a folder with default name using the webUI', function () {
+  return client.page.filesPage().createFolder(null, false)
+})
+
+When('the user creates a folder without name using the webUI', function () {
+  return client.page.filesPage().createFolder('', false)
+})
+
 When('the user creates a folder with the invalid name {string} using the webUI', function (folderName) {
   return client.page.filesPage().createFolder(folderName, false)
 })

From cba338d9897b7362186e1b3472e86eaf9e83c177 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Tue, 10 Sep 2019 11:32:31 +0200
Subject: [PATCH 2/4] Make sure the oc-dialog alert prompt can be found

Use class name instead of id for the oc-dialog alert prompt element,
because Selenium would not see the element if there are multiple
elements with the same id, even if the others are invisible.
---
 apps/files/src/components/ocDialogPrompt.vue | 2 +-
 tests/acceptance/pageObjects/phoenixPage.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/files/src/components/ocDialogPrompt.vue b/apps/files/src/components/ocDialogPrompt.vue
index 80338ba3b51..0ccc6686c6d 100644
--- a/apps/files/src/components/ocDialogPrompt.vue
+++ b/apps/files/src/components/ocDialogPrompt.vue
@@ -1,7 +1,7 @@
 <template>
   <oc-dialog :name="name" v-model="ocActive" :title="ocTitle">
     <template slot="content">
-      <oc-alert v-if="ocError" id="oc-dialog-prompt-alert" :noClose="true" variation="danger">
+      <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>
diff --git a/tests/acceptance/pageObjects/phoenixPage.js b/tests/acceptance/pageObjects/phoenixPage.js
index 2534248d093..a93895a2301 100644
--- a/tests/acceptance/pageObjects/phoenixPage.js
+++ b/tests/acceptance/pageObjects/phoenixPage.js
@@ -66,7 +66,7 @@ module.exports = {
       selector: '#resolve-notification-button'
     },
     ocDialogPromptAlert: {
-      selector: '#oc-dialog-prompt-alert'
+      selector: '.uk-modal.uk-open .oc-dialog-prompt-alert'
     },
     searchInputFieldHighResolution: {
       selector: '(//input[contains(@class, "oc-search-input")])[1]',

From 7771bbacea3158a87553c00b70f3706c4073648c Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Tue, 10 Sep 2019 15:27:35 +0200
Subject: [PATCH 3/4] Trigger input events when clearing folder dialog value

When calling clearValue(), Vue's v-model do not detect any change events
so the "empty folder name" validation fails to trigger.

This adds a workaround with a new custom command clearValueWithEvent()
that will simulate clearing the field with keyboard keys instead of
programmatically.
---
 .../customCommands/clearValueWithEvent.js     | 20 +++++++++++++++++++
 tests/acceptance/pageObjects/filesPage.js     |  4 +++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 tests/acceptance/customCommands/clearValueWithEvent.js

diff --git a/tests/acceptance/customCommands/clearValueWithEvent.js b/tests/acceptance/customCommands/clearValueWithEvent.js
new file mode 100644
index 00000000000..7ac235f7e9e
--- /dev/null
+++ b/tests/acceptance/customCommands/clearValueWithEvent.js
@@ -0,0 +1,20 @@
+// from https://github.com/nightwatchjs/nightwatch/issues/1132#issuecomment-340257894
+// and adjusted a bit
+// because calling "clearValue()" does not trigger Vue events when using v-model
+/**
+ * A better `clearValue` for inputs having a more complex interaction.
+ *
+ * @export
+ * @param {string} selector
+ * @returns
+ */
+exports.command = function clearValueWithEvent (selector) {
+  const { RIGHT_ARROW, BACK_SPACE } = this.Keys
+  return this.getValue(selector, result => {
+    const chars = result.value.split('')
+    // Make sure we are at the end of the input
+    chars.forEach(() => this.setValue(selector, RIGHT_ARROW))
+    // Delete all the existing characters
+    chars.forEach(() => this.setValue(selector, BACK_SPACE))
+  })
+}
diff --git a/tests/acceptance/pageObjects/filesPage.js b/tests/acceptance/pageObjects/filesPage.js
index dc1a228f1cf..a4b5dbf8cf2 100644
--- a/tests/acceptance/pageObjects/filesPage.js
+++ b/tests/acceptance/pageObjects/filesPage.js
@@ -40,9 +40,11 @@ module.exports = {
         .click('@newFolderButton')
         .waitForElementVisible('@newFolderInput')
       if (name !== null) {
+        this.clearValueWithEvent('@newFolderInput')
         this.setValue('@newFolderInput', name)
       }
-      this.click('@newFolderOkButton')
+      this
+        .click('@newFolderOkButton')
         .waitForElementNotPresent('@createFolderLoadingIndicator')
       if (expectToSucceed) {
         this.waitForElementNotVisible('@newFolderDialog')

From e3001283aacb04a0d6401293626be73ab8ebd6a1 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Tue, 10 Sep 2019 15:29:26 +0200
Subject: [PATCH 4/4] Wait for new file menu to be enabled before clicking

Tests fail randomly when the test runner would click on the "+ new" file
menu before it becomes enabled.

This extends the selector to wait for an enabled button to appear before
clicking.
---
 tests/acceptance/pageObjects/filesPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/acceptance/pageObjects/filesPage.js b/tests/acceptance/pageObjects/filesPage.js
index a4b5dbf8cf2..4a3d62c7c36 100644
--- a/tests/acceptance/pageObjects/filesPage.js
+++ b/tests/acceptance/pageObjects/filesPage.js
@@ -157,7 +157,7 @@ module.exports = {
   },
   elements: {
     newFileMenuButton: {
-      selector: '#new-file-menu-btn'
+      selector: '#new-file-menu-btn:enabled'
     },
     deleteSelectedButton: {
       selector: '#delete-selected-btn'