Show hidden files and folders count in file info

changelog/unreleased/enhancement-display-hidden-resources-information-in-files-list

@@ -0,0 +1,6 @@
+Enhancement: Display hidden resources information in files list
+
+We've added the ability for the user to see how many files and folders are hidden in the files list footer.
+
+https://github.com/owncloud/web/pull/10907
+https://github.com/owncloud/web/issues/9036

packages/web-app-files/src/components/FilesList/ListInfo.vue

@@ -24,10 +24,20 @@ export default defineComponent({
       type: Number,
       required: true
     },
+    hiddenFiles: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     folders: {
       type: Number,
       required: true
     },
+    hiddenFolders: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     spaces: {
       type: Number,
       default: 0,
@@ -45,25 +55,55 @@ export default defineComponent({
       type: [String, Number],
       required: false,
       default: null
+    },
+    showHiddenItems: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
     items() {
       return this.files + this.folders + (this.showSpaces ? this.spaces : 0)
     },
     text() {
-      const filesStr = this.$ngettext('%{ filesCount } file', '%{ filesCount } files', this.files, {
+      let filesStr = this.$ngettext('%{ filesCount } file', '%{ filesCount } files', this.files, {
         filesCount: this.files.toString()
       })
 
-      const foldersStr = this.$ngettext(
+      if (this.showHiddenItems && this.hiddenFiles) {
+        filesStr = this.$ngettext(
+          '%{ filesCount } file including %{ filesHiddenCount } hidden',
+          '%{ filesCount } files including %{ filesHiddenCount } hidden',
+          this.files,
+          {
+            filesCount: this.files.toString(),
+            filesHiddenCount: this.hiddenFiles.toString()
+          }
+        )
+      }
+
+      let foldersStr = this.$ngettext(
         '%{ foldersCount } folder',
         '%{ foldersCount } folders',
         this.folders,
         {
           foldersCount: this.folders.toString()
         }
       )
+
+      if (this.showHiddenItems && this.hiddenFolders) {
+        foldersStr = this.$ngettext(
+          '%{ foldersCount } folder including %{ foldersHiddenCount } hidden',
+          '%{ foldersCount } folders including %{ foldersHiddenCount } hidden',
+          this.folders,
+          {
+            foldersCount: this.folders.toString(),
+            foldersHiddenCount: this.hiddenFolders.toString()
+          }
+        )
+      }
+
       const spacesStr = this.$ngettext(
         '%{ spacesCount } space',
         '%{ spacesCount } spaces',

packages/web-app-files/src/views/spaces/GenericSpace.vue

@@ -106,8 +106,11 @@
                   v-if="paginatedResources.length > 0"
                   class="oc-width-1-1 oc-my-s"
                   :files="totalResourcesCount.files"
+                  :hidden-files="totalResourcesCount.hiddenFiles"
                   :folders="totalResourcesCount.folders"
+                  :hidden-folders="totalResourcesCount.hiddenFolders"
                   :size="totalResourcesSize"
+                  :show-hidden-items="!areHiddenFilesShown"
                 />
               </template>
               <template #quickActions="{ resource }">
@@ -257,7 +260,8 @@ export default defineComponent({
 
     const resourcesStore = useResourcesStore()
     const { removeResources, resetSelection, updateResourceField } = resourcesStore
-    const { currentFolder, totalResourcesCount, totalResourcesSize } = storeToRefs(resourcesStore)
+    const { currentFolder, totalResourcesCount, totalResourcesSize, areHiddenFilesShown } =
+      storeToRefs(resourcesStore)
 
     let loadResourcesEventToken: string
 
@@ -544,7 +548,8 @@ export default defineComponent({
       totalResourcesSize,
       removeResources,
       resetSelection,
-      updateResourceField
+      updateResourceField,
+      areHiddenFilesShown
     }
   },
 

packages/web-pkg/src/composables/piniaStores/resources.ts

@@ -41,12 +41,20 @@ export const useResourcesStore = defineStore('resources', () => {
 
   const totalResourcesCount = computed(() => {
     const fileCount = unref(resources).filter(({ type }) => type === 'file').length
+    const hiddenFileCount = unref(resources).filter(
+      ({ type, name }) => type === 'file' && name.startsWith('.')
+    ).length
     const folderCount = unref(resources).filter(({ type }) => type === 'folder').length
+    const hiddenFolderCount = unref(resources).filter(
+      ({ type, name }) => type === 'folder' && name.startsWith('.')
+    ).length
     const spaceCount = unref(resources).filter(isProjectSpaceResource).length
 
     return {
       files: fileCount,
+      hiddenFiles: hiddenFileCount,
       folders: folderCount,
+      hiddenFolders: hiddenFolderCount,
       spaces: spaceCount
     }
   })

tests/e2e/cucumber/features/smoke/personalSpacePagination.feature

@@ -15,7 +15,7 @@ Feature: check files pagination in personal space
       | .hidden-testFile.txt | This is a hidden file. |
     And "Alice" opens the "files" app
     When "Alice" navigates to page "2" of the personal space files view
-    Then "Alice" should see the text "111 items with 1 kB in total (56 files, 55 folders)" at the footer of the page
+    Then "Alice" should see the text "111 items with 1 kB in total (56 files including 1 hidden, 55 folders)" at the footer of the page
     And "Alice" should see 10 resources in the personal space files view
     When "Alice" enables the option to display the hidden file
     Then "Alice" should see 11 resources in the personal space files view

tests/e2e/cucumber/features/spaces/pagination.feature

@@ -21,7 +21,7 @@ Feature: check files pagination in project space
       | .hidden-testFile.txt | This is a hidden file. |
     And "Alice" navigates to the project space "dev.1"
     When "Alice" navigates to page "2" of the project space files view
-    Then "Alice" should see the text "112 items with 1 kB in total (56 files, 56 folders)" at the footer of the page
+    Then "Alice" should see the text "112 items with 1 kB in total (56 files including 1 hidden, 56 folders including 1 hidden)" at the footer of the page
     And "Alice" should see 10 resources in the project space files view
     When "Alice" enables the option to display the hidden file
     Then "Alice" should see 12 resources in the project space files view