Merge pull request #2975 from owncloud/empty-folder-indicator

Add empty folder indicator

apps/files/src/components/AllFilesList.vue

@@ -37,6 +37,16 @@
               {{ formDateFromNow(item.mdate) }}
             </div>
           </template>
+          <template #noContentMessage>
+            <no-content-message v-if="!$_isFavoritesList" icon="folder">
+              <template #message><span v-translate>There are no resources in this folder.</span></template>
+              <template #callToAction><span v-translate>Drag files and folders here or use the "+ New" button to upload.</span></template>
+            </no-content-message>
+            <no-content-message v-else icon="star">
+              <template #message><span v-translate>There are no resources marked as favorite.</span></template>
+              <template #callToAction><span v-translate>You can mark some by clicking on the star icon in the file list.</span></template>
+            </no-content-message>
+          </template>
           <template #footer>
             <div v-if="activeFilesCount.folders > 0 || activeFilesCount.files > 0" class="uk-text-nowrap uk-text-meta">
               <span id="files-list-count-folders" v-text="activeFilesCount.folders" />
@@ -67,6 +77,7 @@
 </template>
 <script>
 import FileList from './FileList.vue'
+import NoContentMessage from './NoContentMessage.vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
 
 import Mixins from '../mixins'
@@ -78,7 +89,8 @@ export default {
   name: 'AllFilesList',
   components: {
     FileList,
-    StatusIndicators
+    StatusIndicators,
+    NoContentMessage
   },
   mixins: [
     Mixins,
@@ -99,6 +111,10 @@ export default {
       return this.$route.params.item
     },
 
+    $_isFavoritesList () {
+      return (this.$route.name === 'files-favorites')
+    },
+
     quotaVisible () {
       return (
         !this.publicPage() &&
@@ -174,7 +190,7 @@ export default {
       })
     },
     $_ocFileName (item) {
-      if (this.$route.name === 'files-favorites') {
+      if (this.$_isFavoritesList) {
         const pathSplit = item.path.substr(1).split('/')
         if (pathSplit.length === 2) return `${pathSplit[pathSplit.length - 2]}/${item.basename}`
         if (pathSplit.length > 2) return `…/${pathSplit[pathSplit.length - 2]}/${item.basename}`

apps/files/src/components/Collaborators/SharedFilesList.vue

@@ -3,7 +3,7 @@
     :isActionEnabled="isActionEnabled">
     <template #headerColumns>
       <div class="uk-text-truncate uk-text-meta uk-width-expand" v-translate>Name</div>
-      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-text="sharedCellTitle" />
+      <div class="uk-text-nowrap uk-text-meta uk-width-small" v-text="$_sharedCellTitle" />
       <div
         v-if="$route.name === 'files-shared-with-me'"
         shrink
@@ -45,6 +45,14 @@
       </div>
       <div class="uk-text-meta uk-text-nowrap uk-width-small" v-text="formDateFromNow(item.shareTime)" />
     </template>
+    <template #noContentMessage>
+      <no-content-message icon="share">
+        <template #message>
+          <span v-if="$_isSharedWithMe" v-translate>You are currently not collaborating on other people's resources.</span>
+          <span v-else v-translate>You are currently not collaborating on any of your resources with other people.</span>
+        </template>
+      </no-content-message>
+    </template>
   </file-list>
 </template>
 
@@ -53,11 +61,13 @@ import { mapGetters, mapActions } from 'vuex'
 import Mixins from '../../mixins'
 import FileActions from '../../fileactions'
 import FileList from '../FileList.vue'
+import NoContentMessage from '../NoContentMessage.vue'
 
 export default {
   name: 'SharedFilesList',
   components: {
-    FileList
+    FileList,
+    NoContentMessage
   },
   mixins: [
     Mixins,
@@ -76,12 +86,16 @@ export default {
   computed: {
     ...mapGetters('Files', ['loadingFolder']),
 
-    sharedCellTitle () {
-      if (this.$route.name === 'files-shared-with-me') {
-        return this.$gettext('Shared from')
+    $_isSharedWithMe () {
+      return (this.$route.name === 'files-shared-with-me')
+    },
+
+    $_sharedCellTitle () {
+      if (this.$_isSharedWithMe) {
+        return this.$gettext('Owner')
       }
 
-      return this.$gettext('Shared with')
+      return this.$gettext('Collaborators')
     }
   },
   watch: {

apps/files/src/components/FileList.vue

@@ -2,7 +2,7 @@
   <!-- TODO: Take care of outside click overall and not just in files list -->
   <div :id="id" class="uk-height-1-1 uk-position-relative" @click="hideRowActionsDropdown">
     <div class="uk-flex uk-flex-column uk-height-1-1">
-      <oc-grid gutter="small" flex id="files-table-header" class="uk-padding-small">
+      <oc-grid gutter="small" flex id="files-table-header" class="uk-padding-small" v-if="fileData.length > 0" key="files-list-results-existence">
         <div>
           <oc-checkbox
             class="uk-margin-small-left"
@@ -65,6 +65,9 @@
             </oc-grid>
           </div>
         </RecycleScroller>
+        <div v-else class="uk-position-center files-list-no-content-message" key="files-list-results-absence">
+          <slot name="noContentMessage" />
+        </div>
       </div>
       <oc-grid gutter="large" class="uk-width-1-1 uk-padding-small" v-if="!loading">
         <slot name="footer" />

apps/files/src/components/FilesAppBar.vue

@@ -32,7 +32,7 @@
           <template v-if="$_ocFilesAppBar_showActions">
             <oc-button v-if="canUpload && hasFreeSpace" variation="primary" id="new-file-menu-btn"><translate>+ New</translate></oc-button>
             <oc-button v-else disabled id="new-file-menu-btn" :uk-tooltip="_cannotCreateDialogText"><translate>+ New</translate></oc-button>
-            <oc-drop drop-id="new-file-menu-drop" toggle="#new-file-menu-btn" mode="click" closeOnClick>
+            <oc-drop drop-id="new-file-menu-drop" toggle="#new-file-menu-btn" mode="click" closeOnClick :options="{delayHide: 0}">
               <oc-nav>
                 <file-upload :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></file-upload>
                 <folder-upload v-if="!isIE11()" :rootPath='item' :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></folder-upload>
@@ -50,7 +50,7 @@
             <oc-button v-if="selectedFiles.length > 0" icon="restore" @click="$_ocTrashbin_restoreFiles()">
               <translate>Restore selected</translate>
             </oc-button>
-            <oc-button id="delete-selected-btn" icon="delete" @click="selectedFiles.length < 1 ? $_ocTrashbin_empty() : $_ocTrashbin_deleteSelected()">
+            <oc-button id="delete-selected-btn" icon="delete" :disabled="files.length === 0" @click="selectedFiles.length < 1 ? $_ocTrashbin_empty() : $_ocTrashbin_deleteSelected()">
               {{ $_ocAppBar_clearTrashbinButtonText }}
             </oc-button>
           </template>
@@ -220,7 +220,7 @@ export default {
     },
 
     $_ocAppBar_clearTrashbinButtonText () {
-      return this.selectedFiles.length < 1 ? this.$gettext('Clear trash bin') : this.$gettext('Delete selected')
+      return this.selectedFiles.length < 1 ? this.$gettext('Empty trash bin') : this.$gettext('Delete selected')
     },
 
     showBreadcrumb () {

apps/files/src/components/NoContentMessage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="uk-text-center">
+    <oc-icon :name="icon" type="div" size="xlarge" variation="system" />
+    <div class="uk-text-muted uk-text-large">
+      <slot name="message" />
+    </div>
+    <div class="uk-text-muted">
+      <slot name="callToAction" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NoContentMessage',
+
+  props: {
+    icon: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>

apps/files/src/components/Trashbin.vue

@@ -30,6 +30,11 @@
             {{ formDateFromNow(item.deleteTimestamp) }}
           </div>
         </template>
+        <template #noContentMessage>
+          <no-content-message icon="delete">
+            <template #message><span v-translate>Your trash bin is empty.</span></template>
+          </no-content-message>
+        </template>
       </file-list>
     </div>
     <oc-dialog-prompt name="delete-file-confirmation-dialog" :oc-active="trashbinDeleteMessage !== ''"
@@ -43,6 +48,7 @@
 import { mapGetters, mapActions } from 'vuex'
 import Mixins from '../mixins'
 import FileList from './FileList.vue'
+import NoContentMessage from './NoContentMessage.vue'
 import OcDialogPrompt from './ocDialogPrompt.vue'
 const { default: PQueue } = require('p-queue')
 
@@ -51,7 +57,8 @@ export default {
 
   components: {
     OcDialogPrompt,
-    FileList
+    FileList,
+    NoContentMessage
   },
 
   mixins: [

apps/files/src/default.js

@@ -103,7 +103,7 @@ const navItems = [
     }
   },
   {
-    name: $gettext('Deleted files'),
+    name: $gettext('Trash bin'),
     iconMaterial: 'delete',
     enabled (capabilities) {
       if (capabilities && capabilities.dav) {

changelog/unreleased/1910

@@ -0,0 +1,7 @@
+Enhancement: Add empty folder message in file list views
+
+Whenever a folder contains no entries in any of the file list views,
+a message is now shown indicating that the folder is empty, or that there are no favorites, etc.
+
+https://github.com/owncloud/phoenix/issues/1910
+https://github.com/owncloud/phoenix/pull/2975

tests/acceptance/features/webUICreateFilesFolders/createFolderEdgeCases.feature

@@ -29,7 +29,7 @@ Feature: create folder
     # Then try and create a sub-folder inside the folder with problematic name
     When the user creates a folder with the name <folder> using the webUI
     And the user opens folder <folder> using the webUI
-    Then there should be no files/folders listed on the webUI
+    Then there should be no resources listed on the webUI
     When the user creates a folder with the name "sub-folder" using the webUI
     Then folder "sub-folder" should be listed on the webUI
     When the user reloads the current page of the webUI

tests/acceptance/features/webUICreateFilesFolders/createFolders.feature

@@ -12,7 +12,7 @@ Feature: create folders
   Scenario: Create a folder inside another folder
     When the user creates a folder with the name "top-folder" using the webUI
     And the user opens folder "top-folder" using the webUI
-    Then there should be no files/folders listed on the webUI
+    Then there should be no resources listed on the webUI
     When the user creates a folder with the name "sub-folder" using the webUI
     Then folder "sub-folder" should be listed on the webUI
     When the user reloads the current page of the webUI
@@ -53,7 +53,7 @@ Feature: create folders
     And the public accesses the last created public link using the webUI
     When the user creates a folder with the name "top-folder" using the webUI
     And the user opens folder "top-folder" using the webUI
-    Then there should be no files/folders listed on the webUI
+    Then there should be no resources listed on the webUI
     When the user creates a folder with the name "sub-folder" using the webUI
     Then folder "sub-folder" should be listed on the webUI
     When the user reloads the current page of the webUI

tests/acceptance/features/webUIFavorites/favoritesFile.feature

@@ -45,7 +45,7 @@ Feature: Mark file as favorite
     When the user browses to the favorites page
     Then the files table should be displayed
     And no message should be displayed on the webUI
-    And there should be no files/folders listed on the webUI
+    And there should be no resources listed on the webUI
 
   Scenario: navigate to the favorites page using the menu
     Given user "user1" has favorited element "data.zip"
@@ -58,6 +58,11 @@ Feature: Mark file as favorite
     When the user browses to the files page using the webUI
     Then there should be 31 files/folders listed on the webUI
 
+  @issue-1910
+  Scenario: favorites list appears empty when no favorites are defined
+    When the user has browsed to the favorites page using the webUI
+    Then there should be no resources listed on the webUI
+
   Scenario: mark files with same name and different path as favorites and list them in favourites page
     When the user marks file "lorem.txt" as favorite using the webUI
     And the user marks folder "simple-empty-folder" as favorite using the webUI

tests/acceptance/features/webUIFiles/fileDetails.feature

@@ -114,11 +114,11 @@ Feature: User can open the details panel for any file or folder
 
   Scenario: without any share the shared-with-others page should be empty
     When the user browses to the shared-with-others page using the webUI
-    Then there should be no files/folders listed on the webUI
+    Then there should be no resources listed on the webUI
 
   Scenario: without any share the shared-with-me page should be empty
     When the user browses to the shared-with-me page using the webUI
-    Then there should be no files/folders listed on the webUI
+    Then there should be no resources listed on the webUI
 
   @skip @yetToImplement
   @comments-app-required

tests/acceptance/features/webUIFiles/fileList.feature

@@ -0,0 +1,20 @@
+Feature: User can view files inside a folder
+  As a user
+  I want to be able to view folder contents
+  So that I can work with files and folders inside it
+
+  Background:
+    Given user "user1" has been created with default attributes
+    And user "user1" has logged in using the webUI
+
+  Scenario: Resources are listed
+    When the user has browsed to the files page
+    Then folder "simple-folder" should be listed on the webUI
+    And file "textfile0.txt" should be listed on the webUI
+
+  @issue-1910
+  Scenario: Empty folders display no resources in the list
+    When the user creates a folder with the name "empty-thing" using the webUI
+    And the user opens folder "empty-thing" directly on the webUI
+    Then there should be no resources listed on the webUI
+

tests/acceptance/features/webUISharingPublic/shareByPublicLink.feature

@@ -53,18 +53,19 @@ Feature: Share by public link
 
   Scenario: sharing by public link with "Uploader" role
     Given user "user1" has logged in using the webUI
-    When the user creates a new public link for folder "simple-folder" using the webUI with
+    When the user creates a folder with the name "shared-folder" using the webUI
+    And the user creates a new public link for folder "shared-folder" using the webUI with
       | role | Uploader |
     Then user "user1" should have a share with these details:
       | field       | value          |
       | share_type  | public_link    |
       | uid_owner   | user1          |
       | permissions | create         |
-      | path        | /simple-folder |
+      | path        | /shared-folder |
       | name        | Public link    |
-    And a link named "Public link" should be listed with role "Uploader" in the public link list of folder "simple-folder" on the webUI
+    And a link named "Public link" should be listed with role "Uploader" in the public link list of folder "shared-folder" on the webUI
     When the public uses the webUI to access the last public link created by user "user1"
-    Then there should be no files/folders listed on the webUI
+    Then there should be no resources listed on the webUI
 
   Scenario: public link share shows up on shared-with-others page
     Given user "user1" has logged in using the webUI

tests/acceptance/features/webUITrashbin/trashbinFilesFolders.feature

@@ -59,6 +59,7 @@ Feature: files and folders exist in the trashbin after being deleted
     And as "user1" the file with original path "simple-folder/lorem.txt" should exist in trash
     And the deleted elements should be listed on the webUI
 
+  @issue-1725 @issue-1910
   Scenario: Delete an empty folder and check it is in the trashbin
     Given the user has created folder "my-empty-folder"
     And the user has created folder "my-other-empty-folder"
@@ -69,8 +70,9 @@ Feature: files and folders exist in the trashbin after being deleted
     When the user browses to the trashbin page
     Then folder "my-empty-folder" should be listed on the webUI
     But folder "my-other-empty-folder" should not be listed on the webUI
-    When the user opens folder "my-empty-folder" using the webUI
-    Then there should be no files/folders listed on the webUI
+    # Uncomment after https://github.com/owncloud/phoenix/issues/1725 is solved
+    #When the user opens folder "my-empty-folder" using the webUI
+    #Then there should be no resources listed on the webUI
 
   Scenario: Delete multiple file with same filename and check they are in the trashbin
     When the user deletes the following elements using the webUI
@@ -93,3 +95,9 @@ Feature: files and folders exist in the trashbin after being deleted
 #    And file "lorem.txt" with path "./lorem.txt" should be listed in the trashbin on the webUI
 #    And file "lorem.txt" with path "simple-folder/lorem.txt" should be listed in the trashbin on the webUI
 #    And file "lorem.txt" with path "strängé नेपाली folder/lorem.txt" should be listed in the trashbin on the webUI
+
+  @issue-1910
+  Scenario: trashbin list appears empty when no deleted files exist
+    When the user browses to the trashbin page
+    Then there should be no resources listed on the webUI
+