From 684e6ea58e720355d7b22de657d1d0f55cfeef3c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 6 Nov 2023 14:07:20 +0100
Subject: [PATCH 01/21] Implement basic ui filter construct

---
 .../src/components/Search/List.vue            | 68 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 026469247f5..90967bcaf86 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -7,6 +7,26 @@
           <oc-icon name="filter-2" class="oc-mr-xs" />
           <span v-text="$gettext('Filter:')" />
         </div>
+        <item-filter
+          v-if="availableFileTypes.length"
+          ref="fileTypeFilter"
+          :allow-multiple="true"
+          :filter-label="$gettext('File type')"
+          :filterable-attributes="['label']"
+          :items="availableFileTypes"
+          :option-filter-label="$gettext('Filter file type')"
+          :show-option-filter="true"
+          class="files-search-filter-file-type oc-mr-s"
+          display-name-attribute="label"
+          filter-name="file-type"
+        >
+          <template #image="{ item }">
+            <div class="tag-option-wrapper oc-flex oc-flex-middle">
+              <oc-icon name="price-tag-3" size="small" />
+              <span class="oc-ml-s">{{ item.label }}</span>
+            </div>
+          </template>
+        </item-filter>
         <item-filter
           v-if="availableTags.length"
           ref="tagFilter"
@@ -181,6 +201,10 @@ import {
 
 const visibilityObserver = new VisibilityObserver()
 
+type FileType = {
+  id: string
+  label: string
+}
 type Tag = {
   id: string
   label: string
@@ -240,6 +264,47 @@ export default defineComponent({
     useKeyboardTableMouseActions(keyActions, resourcesView.viewMode)
     useKeyboardTableActions(keyActions)
 
+    const availableFileTypes = computed(
+      (): Array<FileType> => [
+        {
+          id: 'document',
+          label: 'Document'
+        },
+        {
+          id: 'spreadsheet',
+          label: 'Spreadsheet'
+        },
+        {
+          id: 'spreadsheet',
+          label: 'Spreadsheet'
+        },
+        {
+          id: 'presentation',
+          label: 'Presentation'
+        },
+        {
+          id: 'pdf',
+          label: 'PDF'
+        },
+        {
+          id: 'image',
+          label: 'Image'
+        },
+        {
+          id: 'video',
+          label: 'Video'
+        },
+        {
+          id: 'audio',
+          label: 'Audio'
+        },
+        {
+          id: 'archive',
+          label: 'Archive'
+        }
+      ]
+    )
+
     const searchTerm = computed(() => {
       return queryItemAsString(unref(searchTermQuery))
     })
@@ -416,7 +481,8 @@ export default defineComponent({
       breadcrumbs,
       displayFilter,
       availableLastModifiedValues,
-      lastModifiedFilter
+      lastModifiedFilter,
+      availableFileTypes
     }
   },
   computed: {

From 6fa3d04837541da87310783edb1c5448c75bd3e9 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 6 Nov 2023 14:46:23 +0100
Subject: [PATCH 02/21] Implement doctype icons

---
 .../src/components/Search/List.vue            | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 90967bcaf86..e350911ca04 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -22,7 +22,7 @@
         >
           <template #image="{ item }">
             <div class="tag-option-wrapper oc-flex oc-flex-middle">
-              <oc-icon name="price-tag-3" size="small" />
+              <oc-resource-icon :resource="{ type: 'file', extension: item.icon }" />
               <span class="oc-ml-s">{{ item.label }}</span>
             </div>
           </template>
@@ -204,6 +204,7 @@ const visibilityObserver = new VisibilityObserver()
 type FileType = {
   id: string
   label: string
+  icon: string
 }
 type Tag = {
   id: string
@@ -268,39 +269,43 @@ export default defineComponent({
       (): Array<FileType> => [
         {
           id: 'document',
-          label: 'Document'
-        },
-        {
-          id: 'spreadsheet',
-          label: 'Spreadsheet'
+          label: 'Document',
+          icon: 'doc'
         },
         {
           id: 'spreadsheet',
-          label: 'Spreadsheet'
+          label: 'Spreadsheet',
+          icon: 'xls'
         },
         {
           id: 'presentation',
-          label: 'Presentation'
+          label: 'Presentation',
+          icon: 'ppt'
         },
         {
           id: 'pdf',
-          label: 'PDF'
+          label: 'PDF',
+          icon: 'pdf'
         },
         {
           id: 'image',
-          label: 'Image'
+          label: 'Image',
+          icon: 'jpg'
         },
         {
           id: 'video',
-          label: 'Video'
+          label: 'Video',
+          icon: 'mp4'
         },
         {
           id: 'audio',
-          label: 'Audio'
+          label: 'Audio',
+          icon: 'mp3'
         },
         {
           id: 'archive',
-          label: 'Archive'
+          label: 'Archive',
+          icon: 'zip'
         }
       ]
     )

From 8a0e8f79cf1219754a50d7dcd1dcbd8c6b918f0c Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Mon, 6 Nov 2023 14:47:40 +0100
Subject: [PATCH 03/21] Add changelog

---
 changelog/unreleased/enhancement-add-file-type-filter-chip | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-add-file-type-filter-chip

diff --git a/changelog/unreleased/enhancement-add-file-type-filter-chip b/changelog/unreleased/enhancement-add-file-type-filter-chip
new file mode 100644
index 00000000000..bad9b4c985a
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-file-type-filter-chip
@@ -0,0 +1,5 @@
+Enhancement: Add file type filter chip
+
+We've added a new filter option in the search list to filter by file type.
+
+https://github.com/owncloud/ocis/issues/7432

From a4efe491c75a010584fffb9b494dee438e691949 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 8 Nov 2023 15:32:08 +0100
Subject: [PATCH 04/21] Refactor using capabilities for filetypes

---
 .../src/components/Search/List.vue            | 115 ++++++++++--------
 packages/web-client/src/ocs/capabilities.ts   |   7 ++
 .../composables/capability/useCapability.ts   |   6 +
 3 files changed, 74 insertions(+), 54 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index e350911ca04..2e1b2e9603e 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -8,12 +8,12 @@
           <span v-text="$gettext('Filter:')" />
         </div>
         <item-filter
-          v-if="availableFileTypes.length"
-          ref="fileTypeFilter"
+          v-if="availableMimeTypeValues.length"
+          ref="mimeTypesFilter"
           :allow-multiple="true"
           :filter-label="$gettext('File type')"
           :filterable-attributes="['label']"
-          :items="availableFileTypes"
+          :items="availableMimeTypeValues"
           :option-filter-label="$gettext('Filter file type')"
           :show-option-filter="true"
           class="files-search-filter-file-type oc-mr-s"
@@ -22,7 +22,10 @@
         >
           <template #image="{ item }">
             <div class="tag-option-wrapper oc-flex oc-flex-middle">
-              <oc-resource-icon :resource="{ type: 'file', extension: item.icon }" />
+              <oc-resource-icon
+                size="medium"
+                :resource="{ type: 'file', extension: item.icon, isFolder: item.icon == 'folder' }"
+              />
               <span class="oc-ml-s">{{ item.label }}</span>
             </div>
           </template>
@@ -146,7 +149,11 @@
 
 <script lang="ts">
 import { useResourcesViewDefaults } from '../../composables'
-import { AppLoadingSpinner, useCapabilitySearchModifiedDate } from '@ownclouders/web-pkg'
+import {
+  AppLoadingSpinner,
+  useCapabilitySearchMimeType,
+  useCapabilitySearchModifiedDate
+} from '@ownclouders/web-pkg'
 import { VisibilityObserver } from '@ownclouders/web-pkg'
 import { ImageType, ImageDimension } from '@ownclouders/web-pkg'
 import { NoContentMessage } from '@ownclouders/web-pkg'
@@ -201,7 +208,7 @@ import {
 
 const visibilityObserver = new VisibilityObserver()
 
-type FileType = {
+type MimeTypeKeyword = {
   id: string
   label: string
   icon: string
@@ -252,6 +259,7 @@ export default defineComponent({
     const hasTags = useCapabilityFilesTags()
     const fullTextSearchEnabled = useCapabilityFilesFullTextSearch()
     const modifiedDateCapability = useCapabilitySearchModifiedDate()
+    const mimeTypeCapability = useCapabilitySearchMimeType()
     const { getMatchingSpace } = useGetMatchingSpace()
 
     const searchTermQuery = useRouteQuery('term')
@@ -259,69 +267,25 @@ export default defineComponent({
     const doUseScope = useRouteQuery('useScope')
 
     const resourcesView = useResourcesViewDefaults<Resource, any, any[]>()
-
     const keyActions = useKeyboardActions()
     useKeyboardTableNavigation(keyActions, resourcesView.paginatedResources, resourcesView.viewMode)
     useKeyboardTableMouseActions(keyActions, resourcesView.viewMode)
     useKeyboardTableActions(keyActions)
 
-    const availableFileTypes = computed(
-      (): Array<FileType> => [
-        {
-          id: 'document',
-          label: 'Document',
-          icon: 'doc'
-        },
-        {
-          id: 'spreadsheet',
-          label: 'Spreadsheet',
-          icon: 'xls'
-        },
-        {
-          id: 'presentation',
-          label: 'Presentation',
-          icon: 'ppt'
-        },
-        {
-          id: 'pdf',
-          label: 'PDF',
-          icon: 'pdf'
-        },
-        {
-          id: 'image',
-          label: 'Image',
-          icon: 'jpg'
-        },
-        {
-          id: 'video',
-          label: 'Video',
-          icon: 'mp4'
-        },
-        {
-          id: 'audio',
-          label: 'Audio',
-          icon: 'mp3'
-        },
-        {
-          id: 'archive',
-          label: 'Archive',
-          icon: 'zip'
-        }
-      ]
-    )
-
     const searchTerm = computed(() => {
       return queryItemAsString(unref(searchTermQuery))
     })
 
     const availableTags = ref<Tag[]>([])
     const tagFilter = ref<VNodeRef>()
+    const mimeTypesFilter = ref<VNodeRef>()
     const tagParam = useRouteQuery('q_tags')
     const lastModifiedParam = useRouteQuery('q_lastModified')
+    const mimeTypesParam = useRouteQuery('q_mimeTypes')
     const fullTextParam = useRouteQuery('q_fullText')
 
     const displayFilter = computed(() => {
-      return unref(fullTextSearchEnabled) || unref(availableTags).length
+      return unref(fullTextSearchEnabled) || unref(availableTags).length || true
     })
 
     const loadAvailableTagsTask = useTask(function* () {
@@ -357,6 +321,40 @@ export default defineComponent({
       })) || []
     )
 
+    const mimeTypeMapping = {
+      file: { label: $gettext('File'), icon: 'file' },
+      folder: { label: $gettext('Folder'), icon: 'folder' },
+      document: { label: $gettext('Document'), icon: 'doc' },
+      spreadsheet: { label: $gettext('Spreadsheet'), icon: 'xls' },
+      presentation: { label: $gettext('Presentation'), icon: 'ppt' },
+      pdf: { label: $gettext('PDF'), icon: 'pdf' },
+      image: { label: $gettext('Image'), icon: 'jpg' },
+      video: { label: $gettext('Video'), icon: 'mp4' },
+      audio: { label: $gettext('Audio'), icon: 'mp3' },
+      archive: { label: $gettext('Archive'), icon: 'zip' }
+    }
+    const availableMimeTypeValues = []
+    unref(mimeTypeCapability).keywords?.forEach((key: string) => {
+      if (!mimeTypeMapping[key]) {
+        return
+      }
+      availableMimeTypeValues.push({
+        id: key,
+        ...mimeTypeMapping[key]
+      })
+    })
+    /*const availableMimeTypeValues = ref<MimeTypeKeyword[]>(
+      unref(mimeTypeCapability).keywords?.map(
+        (k: string) =>
+          ({
+            id: k,
+            ...mimeTypeMapping[k]
+          } as MimeTypeKeyword)
+      ) || []
+    )*/
+
+    console.log('mtv', availableMimeTypeValues)
+
     const buildSearchTerm = (manuallyUpdateFilterChip = false) => {
       const query = {}
 
@@ -399,6 +397,14 @@ export default defineComponent({
         updateFilter(lastModifiedFilter)
       }
 
+      /*const mimeTypeParams = queryItemAsString(unref(mimeTypesParam))
+      console.log('QueryParam', mimeTypesParam)
+      if (mimeTypesParam) {
+        query['mimetype'] = mimeTypeParams.split('+').map((t) => `"${t}"`)
+        console.log('Query:' + query)
+        updateFilter(mimeTypesFilter)
+      }*/
+
       return (
         // By definition (KQL spec) OR, AND or (GROUP) is implicit for simple cases where
         // different or identical keys are part of the query.
@@ -487,7 +493,8 @@ export default defineComponent({
       displayFilter,
       availableLastModifiedValues,
       lastModifiedFilter,
-      availableFileTypes
+      mimeTypesFilter,
+      availableMimeTypeValues
     }
   },
   computed: {
diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts
index 0c53ebaeb82..5f536cc52da 100644
--- a/packages/web-client/src/ocs/capabilities.ts
+++ b/packages/web-client/src/ocs/capabilities.ts
@@ -23,12 +23,19 @@ export interface LastModifiedFilterCapability {
   keywords?: string[]
   enabled?: boolean
 }
+
+export interface MimeTypeCapability {
+  keywords?: string[]
+  enabled?: boolean
+}
+
 export interface Capabilities {
   capabilities: {
     password_policy?: PasswordPolicyCapability
     search: {
       property: {
         mtime: LastModifiedFilterCapability
+        mimetype: MimeTypeCapability
       }
     }
     notifications: {
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 15abde5c3db..48ef7d05b05 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -5,6 +5,7 @@ import { useStore } from '../store'
 import {
   AppProviderCapability,
   LastModifiedFilterCapability,
+  MimeTypeCapability,
   PasswordPolicyCapability
 } from '@ownclouders/web-client/src/ocs/capabilities'
 
@@ -146,3 +147,8 @@ export const useCapabilityPasswordPolicy = createCapabilityComposable<PasswordPo
 
 export const useCapabilitySearchModifiedDate =
   createCapabilityComposable<LastModifiedFilterCapability>('search.property.mtime', {})
+
+export const useCapabilitySearchMimeType = createCapabilityComposable<MimeTypeCapability>(
+  'search.property.mimetype',
+  {}
+)

From 744227bf4bafb00a2a66e9a4ab35586f5683f026 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 8 Nov 2023 15:49:13 +0100
Subject: [PATCH 05/21] Make filter work

---
 .../src/components/Search/List.vue            | 31 +++++++------------
 1 file changed, 12 insertions(+), 19 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 2e1b2e9603e..8142e9e4a59 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -18,7 +18,7 @@
           :show-option-filter="true"
           class="files-search-filter-file-type oc-mr-s"
           display-name-attribute="label"
-          filter-name="file-type"
+          filter-name="mimeTypes"
         >
           <template #image="{ item }">
             <div class="tag-option-wrapper oc-flex oc-flex-middle">
@@ -322,7 +322,7 @@ export default defineComponent({
     )
 
     const mimeTypeMapping = {
-      file: { label: $gettext('File'), icon: 'file' },
+      file: { label: $gettext('File'), icon: 'txt' },
       folder: { label: $gettext('Folder'), icon: 'folder' },
       document: { label: $gettext('Document'), icon: 'doc' },
       spreadsheet: { label: $gettext('Spreadsheet'), icon: 'xls' },
@@ -343,15 +343,6 @@ export default defineComponent({
         ...mimeTypeMapping[key]
       })
     })
-    /*const availableMimeTypeValues = ref<MimeTypeKeyword[]>(
-      unref(mimeTypeCapability).keywords?.map(
-        (k: string) =>
-          ({
-            id: k,
-            ...mimeTypeMapping[k]
-          } as MimeTypeKeyword)
-      ) || []
-    )*/
 
     console.log('mtv', availableMimeTypeValues)
 
@@ -397,13 +388,11 @@ export default defineComponent({
         updateFilter(lastModifiedFilter)
       }
 
-      /*const mimeTypeParams = queryItemAsString(unref(mimeTypesParam))
-      console.log('QueryParam', mimeTypesParam)
-      if (mimeTypesParam) {
+      const mimeTypeParams = queryItemAsString(unref(mimeTypesParam))
+      if (mimeTypeParams) {
         query['mimetype'] = mimeTypeParams.split('+').map((t) => `"${t}"`)
-        console.log('Query:' + query)
         updateFilter(mimeTypesFilter)
-      }*/
+      }
 
       return (
         // By definition (KQL spec) OR, AND or (GROUP) is implicit for simple cases where
@@ -467,9 +456,13 @@ export default defineComponent({
         // return early if the search term or filter has not changed, no search needed
         {
           const isSameTerm = newVal?.term === oldVal?.term
-          const isSameFilter = ['q_fullText', 'q_tags', 'q_lastModified', 'useScope'].every(
-            (key) => newVal[key] === oldVal[key]
-          )
+          const isSameFilter = [
+            'q_fullText',
+            'q_tags',
+            'q_lastModified',
+            'q_mimeTypes',
+            'useScope'
+          ].every((key) => newVal[key] === oldVal[key])
           if (isSameTerm && isSameFilter) {
             return
           }

From c2f2705ba09324ada7e83f601c5b18d62a119d56 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 8 Nov 2023 15:58:31 +0100
Subject: [PATCH 06/21] Add check for capability

---
 packages/web-app-files/src/components/Search/List.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 8142e9e4a59..0f6ec2d0b8c 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -23,7 +23,6 @@
           <template #image="{ item }">
             <div class="tag-option-wrapper oc-flex oc-flex-middle">
               <oc-resource-icon
-                size="medium"
                 :resource="{ type: 'file', extension: item.icon, isFolder: item.icon == 'folder' }"
               />
               <span class="oc-ml-s">{{ item.label }}</span>
@@ -285,7 +284,11 @@ export default defineComponent({
     const fullTextParam = useRouteQuery('q_fullText')
 
     const displayFilter = computed(() => {
-      return unref(fullTextSearchEnabled) || unref(availableTags).length || true
+      return (
+        unref(fullTextSearchEnabled) ||
+        unref(availableTags).length ||
+        unref(modifiedDateCapability).enabled
+      )
     })
 
     const loadAvailableTagsTask = useTask(function* () {
@@ -344,8 +347,6 @@ export default defineComponent({
       })
     })
 
-    console.log('mtv', availableMimeTypeValues)
-
     const buildSearchTerm = (manuallyUpdateFilterChip = false) => {
       const query = {}
 

From 4354be8721cdbbbe25d9c81b8d49e294d5b4c336 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Wed, 8 Nov 2023 16:05:47 +0100
Subject: [PATCH 07/21] Fix typescript error

---
 packages/web-app-files/src/components/Search/List.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 0f6ec2d0b8c..9b028b6bbcc 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -22,9 +22,7 @@
         >
           <template #image="{ item }">
             <div class="tag-option-wrapper oc-flex oc-flex-middle">
-              <oc-resource-icon
-                :resource="{ type: 'file', extension: item.icon, isFolder: item.icon == 'folder' }"
-              />
+              <oc-resource-icon :resource="getFakeResourceForIcon(item)" />
               <span class="oc-ml-s">{{ item.label }}</span>
             </div>
           </template>
@@ -347,6 +345,10 @@ export default defineComponent({
       })
     })
 
+    const getFakeResourceForIcon = (item) => {
+      return { type: 'file', extension: item.icon, isFolder: item.icon == 'folder' } as Resource
+    }
+
     const buildSearchTerm = (manuallyUpdateFilterChip = false) => {
       const query = {}
 
@@ -488,7 +490,8 @@ export default defineComponent({
       availableLastModifiedValues,
       lastModifiedFilter,
       mimeTypesFilter,
-      availableMimeTypeValues
+      availableMimeTypeValues,
+      getFakeResourceForIcon
     }
   },
   computed: {

From abfee9db9766ad51f7d379fd2d7b75ca8c7051d0 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 9 Nov 2023 10:56:18 +0100
Subject: [PATCH 08/21] Address PR issues

---
 .../src/components/Search/List.vue            | 42 +++++++++----------
 packages/web-pkg/src/router/common.ts         |  1 +
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 9b028b6bbcc..37501b48a4d 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -9,7 +9,7 @@
         </div>
         <item-filter
           v-if="availableMimeTypeValues.length"
-          ref="mimeTypesFilter"
+          ref="fileCategoryFilter"
           :allow-multiple="true"
           :filter-label="$gettext('File type')"
           :filterable-attributes="['label']"
@@ -18,10 +18,10 @@
           :show-option-filter="true"
           class="files-search-filter-file-type oc-mr-s"
           display-name-attribute="label"
-          filter-name="mimeTypes"
+          filter-name="fileCategory"
         >
           <template #image="{ item }">
-            <div class="tag-option-wrapper oc-flex oc-flex-middle">
+            <div class="file-category-option-wrapper oc-flex oc-flex-middle">
               <oc-resource-icon :resource="getFakeResourceForIcon(item)" />
               <span class="oc-ml-s">{{ item.label }}</span>
             </div>
@@ -205,7 +205,7 @@ import {
 
 const visibilityObserver = new VisibilityObserver()
 
-type MimeTypeKeyword = {
+type FileCategoryKeyword = {
   id: string
   label: string
   icon: string
@@ -256,7 +256,7 @@ export default defineComponent({
     const hasTags = useCapabilityFilesTags()
     const fullTextSearchEnabled = useCapabilityFilesFullTextSearch()
     const modifiedDateCapability = useCapabilitySearchModifiedDate()
-    const mimeTypeCapability = useCapabilitySearchMimeType()
+    const fileCategoryCapability = useCapabilitySearchMimeType()
     const { getMatchingSpace } = useGetMatchingSpace()
 
     const searchTermQuery = useRouteQuery('term')
@@ -275,17 +275,17 @@ export default defineComponent({
 
     const availableTags = ref<Tag[]>([])
     const tagFilter = ref<VNodeRef>()
-    const mimeTypesFilter = ref<VNodeRef>()
+    const fileCategoryFilter = ref<VNodeRef>()
     const tagParam = useRouteQuery('q_tags')
     const lastModifiedParam = useRouteQuery('q_lastModified')
-    const mimeTypesParam = useRouteQuery('q_mimeTypes')
+    const fileCategoryParam = useRouteQuery('q_fileCategory')
     const fullTextParam = useRouteQuery('q_fullText')
 
     const displayFilter = computed(() => {
       return (
         unref(fullTextSearchEnabled) ||
         unref(availableTags).length ||
-        unref(modifiedDateCapability).enabled
+        (unref(modifiedDateCapability) && unref(modifiedDateCapability).enabled)
       )
     })
 
@@ -322,7 +322,7 @@ export default defineComponent({
       })) || []
     )
 
-    const mimeTypeMapping = {
+    const fileCategoryMapping = {
       file: { label: $gettext('File'), icon: 'txt' },
       folder: { label: $gettext('Folder'), icon: 'folder' },
       document: { label: $gettext('Document'), icon: 'doc' },
@@ -334,14 +334,14 @@ export default defineComponent({
       audio: { label: $gettext('Audio'), icon: 'mp3' },
       archive: { label: $gettext('Archive'), icon: 'zip' }
     }
-    const availableMimeTypeValues = []
-    unref(mimeTypeCapability).keywords?.forEach((key: string) => {
-      if (!mimeTypeMapping[key]) {
+    const availableFileCategoryValues: FileCategoryKeyword[] = []
+    unref(fileCategoryCapability).keywords?.forEach((key: string) => {
+      if (!fileCategoryMapping[key]) {
         return
       }
-      availableMimeTypeValues.push({
+      availableFileCategoryValues.push({
         id: key,
-        ...mimeTypeMapping[key]
+        ...fileCategoryMapping[key]
       })
     })
 
@@ -391,10 +391,10 @@ export default defineComponent({
         updateFilter(lastModifiedFilter)
       }
 
-      const mimeTypeParams = queryItemAsString(unref(mimeTypesParam))
-      if (mimeTypeParams) {
-        query['mimetype'] = mimeTypeParams.split('+').map((t) => `"${t}"`)
-        updateFilter(mimeTypesFilter)
+      const fileCategoryParams = queryItemAsString(unref(fileCategoryParam))
+      if (fileCategoryParams) {
+        query['mimetype'] = fileCategoryParams.split('+').map((t) => `"${t}"`)
+        updateFilter(fileCategoryFilter)
       }
 
       return (
@@ -463,7 +463,7 @@ export default defineComponent({
             'q_fullText',
             'q_tags',
             'q_lastModified',
-            'q_mimeTypes',
+            'q_fileCategory',
             'useScope'
           ].every((key) => newVal[key] === oldVal[key])
           if (isSameTerm && isSameFilter) {
@@ -489,8 +489,8 @@ export default defineComponent({
       displayFilter,
       availableLastModifiedValues,
       lastModifiedFilter,
-      mimeTypesFilter,
-      availableMimeTypeValues,
+      fileCategoryFilter,
+      availableFileCategoryValues,
       getFakeResourceForIcon
     }
   },
diff --git a/packages/web-pkg/src/router/common.ts b/packages/web-pkg/src/router/common.ts
index 00d11c257b2..c4eadd2e571 100644
--- a/packages/web-pkg/src/router/common.ts
+++ b/packages/web-pkg/src/router/common.ts
@@ -33,6 +33,7 @@ export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
             'q_tags',
             'q_lastModified',
             'q_fullText',
+            'q_fileCategory',
             'scope',
             'useScope'
           ]

From 21534df29e47d74c79a9fa0bb9c754f339da5b9b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 9 Nov 2023 12:58:29 +0100
Subject: [PATCH 09/21] rename to mediatype

---
 .../src/components/Search/List.vue            | 34 +++++++++----------
 packages/web-client/src/ocs/capabilities.ts   |  4 +--
 .../composables/capability/useCapability.ts   |  4 +--
 packages/web-pkg/src/router/common.ts         |  2 +-
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 37501b48a4d..5d121d5b8a9 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -9,16 +9,16 @@
         </div>
         <item-filter
           v-if="availableMimeTypeValues.length"
-          ref="fileCategoryFilter"
+          ref="mediaTypeFilter"
           :allow-multiple="true"
-          :filter-label="$gettext('File type')"
+          :filter-label="$gettext('Media type')"
           :filterable-attributes="['label']"
           :items="availableMimeTypeValues"
-          :option-filter-label="$gettext('Filter file type')"
+          :option-filter-label="$gettext('Filter media type')"
           :show-option-filter="true"
           class="files-search-filter-file-type oc-mr-s"
           display-name-attribute="label"
-          filter-name="fileCategory"
+          filter-name="mediaType"
         >
           <template #image="{ item }">
             <div class="file-category-option-wrapper oc-flex oc-flex-middle">
@@ -256,7 +256,7 @@ export default defineComponent({
     const hasTags = useCapabilityFilesTags()
     const fullTextSearchEnabled = useCapabilityFilesFullTextSearch()
     const modifiedDateCapability = useCapabilitySearchModifiedDate()
-    const fileCategoryCapability = useCapabilitySearchMimeType()
+    const mediaTypeCapability = useCapabilitySearchMimeType()
     const { getMatchingSpace } = useGetMatchingSpace()
 
     const searchTermQuery = useRouteQuery('term')
@@ -275,10 +275,10 @@ export default defineComponent({
 
     const availableTags = ref<Tag[]>([])
     const tagFilter = ref<VNodeRef>()
-    const fileCategoryFilter = ref<VNodeRef>()
+    const mediaTypeFilter = ref<VNodeRef>()
     const tagParam = useRouteQuery('q_tags')
     const lastModifiedParam = useRouteQuery('q_lastModified')
-    const fileCategoryParam = useRouteQuery('q_fileCategory')
+    const mediaTypeParam = useRouteQuery('q_mediaType')
     const fullTextParam = useRouteQuery('q_fullText')
 
     const displayFilter = computed(() => {
@@ -322,7 +322,7 @@ export default defineComponent({
       })) || []
     )
 
-    const fileCategoryMapping = {
+    const mediaTypeMapping = {
       file: { label: $gettext('File'), icon: 'txt' },
       folder: { label: $gettext('Folder'), icon: 'folder' },
       document: { label: $gettext('Document'), icon: 'doc' },
@@ -335,13 +335,13 @@ export default defineComponent({
       archive: { label: $gettext('Archive'), icon: 'zip' }
     }
     const availableFileCategoryValues: FileCategoryKeyword[] = []
-    unref(fileCategoryCapability).keywords?.forEach((key: string) => {
-      if (!fileCategoryMapping[key]) {
+    unref(mediaTypeCapability).keywords?.forEach((key: string) => {
+      if (!mediaTypeMapping[key]) {
         return
       }
       availableFileCategoryValues.push({
         id: key,
-        ...fileCategoryMapping[key]
+        ...mediaTypeMapping[key]
       })
     })
 
@@ -391,10 +391,10 @@ export default defineComponent({
         updateFilter(lastModifiedFilter)
       }
 
-      const fileCategoryParams = queryItemAsString(unref(fileCategoryParam))
-      if (fileCategoryParams) {
-        query['mimetype'] = fileCategoryParams.split('+').map((t) => `"${t}"`)
-        updateFilter(fileCategoryFilter)
+      const mediaTypeParams = queryItemAsString(unref(mediaTypeParam))
+      if (mediaTypeParams) {
+        query['mimetype'] = mediaTypeParams.split('+').map((t) => `"${t}"`)
+        updateFilter(mediaTypeFilter)
       }
 
       return (
@@ -463,7 +463,7 @@ export default defineComponent({
             'q_fullText',
             'q_tags',
             'q_lastModified',
-            'q_fileCategory',
+            'q_mediaType',
             'useScope'
           ].every((key) => newVal[key] === oldVal[key])
           if (isSameTerm && isSameFilter) {
@@ -489,7 +489,7 @@ export default defineComponent({
       displayFilter,
       availableLastModifiedValues,
       lastModifiedFilter,
-      fileCategoryFilter,
+      mediaTypeFilter,
       availableFileCategoryValues,
       getFakeResourceForIcon
     }
diff --git a/packages/web-client/src/ocs/capabilities.ts b/packages/web-client/src/ocs/capabilities.ts
index 5f536cc52da..73e9abc541f 100644
--- a/packages/web-client/src/ocs/capabilities.ts
+++ b/packages/web-client/src/ocs/capabilities.ts
@@ -24,7 +24,7 @@ export interface LastModifiedFilterCapability {
   enabled?: boolean
 }
 
-export interface MimeTypeCapability {
+export interface MediaTypeCapability {
   keywords?: string[]
   enabled?: boolean
 }
@@ -35,7 +35,7 @@ export interface Capabilities {
     search: {
       property: {
         mtime: LastModifiedFilterCapability
-        mimetype: MimeTypeCapability
+        mimetype: MediaTypeCapability
       }
     }
     notifications: {
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 48ef7d05b05..6ca30a622d2 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -5,7 +5,7 @@ import { useStore } from '../store'
 import {
   AppProviderCapability,
   LastModifiedFilterCapability,
-  MimeTypeCapability,
+  MediaTypeCapability,
   PasswordPolicyCapability
 } from '@ownclouders/web-client/src/ocs/capabilities'
 
@@ -148,7 +148,7 @@ export const useCapabilityPasswordPolicy = createCapabilityComposable<PasswordPo
 export const useCapabilitySearchModifiedDate =
   createCapabilityComposable<LastModifiedFilterCapability>('search.property.mtime', {})
 
-export const useCapabilitySearchMimeType = createCapabilityComposable<MimeTypeCapability>(
+export const useCapabilitySearchMediaType = createCapabilityComposable<MediaTypeCapability>(
   'search.property.mimetype',
   {}
 )
diff --git a/packages/web-pkg/src/router/common.ts b/packages/web-pkg/src/router/common.ts
index c4eadd2e571..d37dfe5033e 100644
--- a/packages/web-pkg/src/router/common.ts
+++ b/packages/web-pkg/src/router/common.ts
@@ -33,7 +33,7 @@ export const buildRoutes = (components: RouteComponents): RouteRecordRaw[] => [
             'q_tags',
             'q_lastModified',
             'q_fullText',
-            'q_fileCategory',
+            'q_mediaType',
             'scope',
             'useScope'
           ]

From 412024b3b931a6959ea59364a2e63433fbc1aef6 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 9 Nov 2023 13:01:10 +0100
Subject: [PATCH 10/21] Update changelog

---
 changelog/unreleased/enhancement-add-file-media-filter-chip | 6 ++++++
 changelog/unreleased/enhancement-add-file-type-filter-chip  | 5 -----
 2 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-add-file-media-filter-chip
 delete mode 100644 changelog/unreleased/enhancement-add-file-type-filter-chip

diff --git a/changelog/unreleased/enhancement-add-file-media-filter-chip b/changelog/unreleased/enhancement-add-file-media-filter-chip
new file mode 100644
index 00000000000..dbc36a64187
--- /dev/null
+++ b/changelog/unreleased/enhancement-add-file-media-filter-chip
@@ -0,0 +1,6 @@
+Enhancement: Add media type filter chip
+
+We've added a new filter option in the search list to filter by media type.
+
+https://github.com/owncloud/web/pull/9912
+https://github.com/owncloud/web/issues/9780
diff --git a/changelog/unreleased/enhancement-add-file-type-filter-chip b/changelog/unreleased/enhancement-add-file-type-filter-chip
deleted file mode 100644
index bad9b4c985a..00000000000
--- a/changelog/unreleased/enhancement-add-file-type-filter-chip
+++ /dev/null
@@ -1,5 +0,0 @@
-Enhancement: Add file type filter chip
-
-We've added a new filter option in the search list to filter by file type.
-
-https://github.com/owncloud/ocis/issues/7432

From 94794e672c5363ed2adba984c4c20c720ba730e7 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Thu, 9 Nov 2023 13:03:16 +0100
Subject: [PATCH 11/21] add missing mediatype renames

---
 packages/web-app-files/src/components/Search/List.vue  | 10 +++++-----
 .../src/composables/capability/useCapability.ts        |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 5d121d5b8a9..a346823eb9f 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -8,12 +8,12 @@
           <span v-text="$gettext('Filter:')" />
         </div>
         <item-filter
-          v-if="availableMimeTypeValues.length"
+          v-if="availableMediaTypeValues.length"
           ref="mediaTypeFilter"
           :allow-multiple="true"
           :filter-label="$gettext('Media type')"
           :filterable-attributes="['label']"
-          :items="availableMimeTypeValues"
+          :items="availableMediaTypeValues"
           :option-filter-label="$gettext('Filter media type')"
           :show-option-filter="true"
           class="files-search-filter-file-type oc-mr-s"
@@ -148,7 +148,7 @@
 import { useResourcesViewDefaults } from '../../composables'
 import {
   AppLoadingSpinner,
-  useCapabilitySearchMimeType,
+  useCapabilitySearchMediaType,
   useCapabilitySearchModifiedDate
 } from '@ownclouders/web-pkg'
 import { VisibilityObserver } from '@ownclouders/web-pkg'
@@ -256,7 +256,7 @@ export default defineComponent({
     const hasTags = useCapabilityFilesTags()
     const fullTextSearchEnabled = useCapabilityFilesFullTextSearch()
     const modifiedDateCapability = useCapabilitySearchModifiedDate()
-    const mediaTypeCapability = useCapabilitySearchMimeType()
+    const mediaTypeCapability = useCapabilitySearchMediaType()
     const { getMatchingSpace } = useGetMatchingSpace()
 
     const searchTermQuery = useRouteQuery('term')
@@ -393,7 +393,7 @@ export default defineComponent({
 
       const mediaTypeParams = queryItemAsString(unref(mediaTypeParam))
       if (mediaTypeParams) {
-        query['mimetype'] = mediaTypeParams.split('+').map((t) => `"${t}"`)
+        query['mediatype'] = mediaTypeParams.split('+').map((t) => `"${t}"`)
         updateFilter(mediaTypeFilter)
       }
 
diff --git a/packages/web-pkg/src/composables/capability/useCapability.ts b/packages/web-pkg/src/composables/capability/useCapability.ts
index 6ca30a622d2..332e3ab4df1 100644
--- a/packages/web-pkg/src/composables/capability/useCapability.ts
+++ b/packages/web-pkg/src/composables/capability/useCapability.ts
@@ -149,6 +149,6 @@ export const useCapabilitySearchModifiedDate =
   createCapabilityComposable<LastModifiedFilterCapability>('search.property.mtime', {})
 
 export const useCapabilitySearchMediaType = createCapabilityComposable<MediaTypeCapability>(
-  'search.property.mimetype',
+  'search.property.mediatype',
   {}
 )

From 4e2f3315ba9a97e2a6883c69a39687fd6c2524cc Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 10 Nov 2023 09:40:59 +0100
Subject: [PATCH 12/21] Fix renaming issue

---
 packages/web-app-files/src/components/Search/List.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index a346823eb9f..ea5bc70fb67 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -334,12 +334,12 @@ export default defineComponent({
       audio: { label: $gettext('Audio'), icon: 'mp3' },
       archive: { label: $gettext('Archive'), icon: 'zip' }
     }
-    const availableFileCategoryValues: FileCategoryKeyword[] = []
+    const availableMediaTypeValues: FileCategoryKeyword[] = []
     unref(mediaTypeCapability).keywords?.forEach((key: string) => {
       if (!mediaTypeMapping[key]) {
         return
       }
-      availableFileCategoryValues.push({
+      availableMediaTypeValues.push({
         id: key,
         ...mediaTypeMapping[key]
       })
@@ -490,7 +490,7 @@ export default defineComponent({
       availableLastModifiedValues,
       lastModifiedFilter,
       mediaTypeFilter,
-      availableFileCategoryValues,
+      availableMediaTypeValues,
       getFakeResourceForIcon
     }
   },

From 41de688bd8125365bb0914932cdcc2fa8cc02264 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 10 Nov 2023 10:58:07 +0100
Subject: [PATCH 13/21] WIP e2e

---
 tests/e2e/cucumber/steps/ui/search.ts                 | 9 +++++++++
 tests/e2e/support/objects/app-files/search/actions.ts | 8 ++++++++
 tests/e2e/support/objects/app-files/search/index.ts   | 4 ++++
 3 files changed, 21 insertions(+)

diff --git a/tests/e2e/cucumber/steps/ui/search.ts b/tests/e2e/cucumber/steps/ui/search.ts
index 8c0df6d0aec..2c13ddbf771 100644
--- a/tests/e2e/cucumber/steps/ui/search.ts
+++ b/tests/e2e/cucumber/steps/ui/search.ts
@@ -36,3 +36,12 @@ When(
     await searchObject.toggleSearchInFileContent({ enableOrDisable })
   }
 )
+When(
+  '{string} selects mediaType {string} from the search result filter chip',
+  async function (this: World, stepUser: string, mediaType: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const searchObject = new objects.applicationFiles.Search({ page })
+    await searchObject.selectMediaTypeFilter({ mediaType })
+    await page.waitForTimeout(20000)
+  }
+)
diff --git a/tests/e2e/support/objects/app-files/search/actions.ts b/tests/e2e/support/objects/app-files/search/actions.ts
index 8316eaa0a19..663ef428e71 100644
--- a/tests/e2e/support/objects/app-files/search/actions.ts
+++ b/tests/e2e/support/objects/app-files/search/actions.ts
@@ -31,6 +31,14 @@ export const clearTagFilter = async ({ page }: { page: Page }): Promise<void> =>
   await page.locator(clearTagFilterSelector).click()
 }
 
+export const selectMediaTypeFilter = async ({
+  mediaType,
+  page
+}: {
+  mediaType: string
+  page: Page
+}): Promise<void> => {}
+
 export const toggleSearchInFileContent = async ({
   enableOrDisable,
   page
diff --git a/tests/e2e/support/objects/app-files/search/index.ts b/tests/e2e/support/objects/app-files/search/index.ts
index 879f329c330..f5c5c7bd1dd 100644
--- a/tests/e2e/support/objects/app-files/search/index.ts
+++ b/tests/e2e/support/objects/app-files/search/index.ts
@@ -16,6 +16,10 @@ export class Search {
     await po.selectTagFilter({ tag: string, page: this.#page })
   }
 
+  async selectMediaTypeFilter({ mediaType: string }): Promise<void> {
+    await po.selectMediaTypeFilter({ mediaType: string, page: this.#page })
+  }
+
   async clearTagFilter(): Promise<void> {
     await po.clearTagFilter({ page: this.#page })
   }

From 8e0f5ccc4fa9a16d51f4c381f49f57c87d950068 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 10 Nov 2023 10:58:20 +0100
Subject: [PATCH 14/21] WIP e2e

---
 tests/e2e/cucumber/features/smoke/search.feature | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/tests/e2e/cucumber/features/smoke/search.feature b/tests/e2e/cucumber/features/smoke/search.feature
index 929fffe36f6..78693daacfc 100644
--- a/tests/e2e/cucumber/features/smoke/search.feature
+++ b/tests/e2e/cucumber/features/smoke/search.feature
@@ -171,3 +171,18 @@ Feature: Search
       | resource                          |
       | exampleInsideThePersonalSpace.txt |
     And "Alice" logs out
+
+  Scenario: Search using mediaType filter
+    Given "Admin" creates following users using API
+      | id    |
+      | Alice |
+    And "Alice" logs in
+    And "Alice" creates the following files into personal space using API
+      | pathToFile    | content        |
+      | mediaTest.txt | I'm a Document |
+      | mediaTest.pdf | I'm a PDF      |
+      | mediaTest.mp3 | I'm a Audio    |
+      | mediaTest.zip | I'm a Archive  |
+    And "Alice" opens the "files" app
+    And "Alice" searches "mediaTest" using the global search and the "everywhere" filter and presses enter
+    And "Alice" selects mediaType "Document" from the search result filter chip

From d70040ab59327f84572310984256d9204bf1234e Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 10 Nov 2023 11:45:45 +0100
Subject: [PATCH 15/21] Implement basic mediaType filter e2e test

---
 packages/web-app-files/src/components/Search/List.vue | 5 ++++-
 tests/e2e/cucumber/features/smoke/search.feature      | 3 +++
 tests/e2e/cucumber/steps/ui/search.ts                 | 1 -
 tests/e2e/support/objects/app-files/search/actions.ts | 9 ++++++++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index ea5bc70fb67..73cdb38e4c5 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -21,7 +21,10 @@
           filter-name="mediaType"
         >
           <template #image="{ item }">
-            <div class="file-category-option-wrapper oc-flex oc-flex-middle">
+            <div
+              class="file-category-option-wrapper oc-flex oc-flex-middle"
+              :data-test-id="`media-type-${item.id.toLowerCase()}`"
+            >
               <oc-resource-icon :resource="getFakeResourceForIcon(item)" />
               <span class="oc-ml-s">{{ item.label }}</span>
             </div>
diff --git a/tests/e2e/cucumber/features/smoke/search.feature b/tests/e2e/cucumber/features/smoke/search.feature
index 78693daacfc..7ae6c9cb0b8 100644
--- a/tests/e2e/cucumber/features/smoke/search.feature
+++ b/tests/e2e/cucumber/features/smoke/search.feature
@@ -186,3 +186,6 @@ Feature: Search
     And "Alice" opens the "files" app
     And "Alice" searches "mediaTest" using the global search and the "everywhere" filter and presses enter
     And "Alice" selects mediaType "Document" from the search result filter chip
+    Then following resources should be displayed in the files list for user "Alice"
+      | resource      |
+      | mediaTest.txt |
diff --git a/tests/e2e/cucumber/steps/ui/search.ts b/tests/e2e/cucumber/steps/ui/search.ts
index 2c13ddbf771..529f9f85300 100644
--- a/tests/e2e/cucumber/steps/ui/search.ts
+++ b/tests/e2e/cucumber/steps/ui/search.ts
@@ -42,6 +42,5 @@ When(
     const { page } = this.actorsEnvironment.getActor({ key: stepUser })
     const searchObject = new objects.applicationFiles.Search({ page })
     await searchObject.selectMediaTypeFilter({ mediaType })
-    await page.waitForTimeout(20000)
   }
 )
diff --git a/tests/e2e/support/objects/app-files/search/actions.ts b/tests/e2e/support/objects/app-files/search/actions.ts
index 663ef428e71..8ccea3326ad 100644
--- a/tests/e2e/support/objects/app-files/search/actions.ts
+++ b/tests/e2e/support/objects/app-files/search/actions.ts
@@ -5,6 +5,9 @@ const searchResultMessageSelector = '//p[@class="oc-text-muted"]'
 const selectTagDropdownSelector =
   '//div[contains(@class,"files-search-filter-tags")]//button[contains(@class,"oc-filter-chip-button")]'
 const tagFilterChipSelector = '//button[contains(@data-test-value,"%s")]'
+const mediaTypeFilterSelector = '.item-filter-mediaType'
+const mediaTypeFilterItem = '[data-test-id="media-type-%s"]'
+const mediaTypeOutside = '.files-search-result-filter'
 const clearTagFilterSelector =
   '//div[contains(@class,"files-search-filter-tags")]//button[contains(@class,"oc-filter-chip-clear")]'
 const enableSearchInFileContentSelector =
@@ -37,7 +40,11 @@ export const selectMediaTypeFilter = async ({
 }: {
   mediaType: string
   page: Page
-}): Promise<void> => {}
+}): Promise<void> => {
+  await page.locator(mediaTypeFilterSelector).click()
+  await page.locator(util.format(mediaTypeFilterItem, mediaType.toLowerCase())).click()
+  await page.locator(mediaTypeOutside).click()
+}
 
 export const toggleSearchInFileContent = async ({
   enableOrDisable,

From 1759bce0d931f4319d65eabc2d03febcb9476e5b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Fri, 10 Nov 2023 13:39:12 +0100
Subject: [PATCH 16/21] Add more e2e steps

---
 tests/e2e/cucumber/features/smoke/search.feature  | 15 +++++++++++++++
 tests/e2e/cucumber/steps/ui/search.ts             |  8 ++++++++
 .../support/objects/app-files/search/actions.ts   |  6 ++++++
 .../e2e/support/objects/app-files/search/index.ts |  4 ++++
 4 files changed, 33 insertions(+)

diff --git a/tests/e2e/cucumber/features/smoke/search.feature b/tests/e2e/cucumber/features/smoke/search.feature
index 7ae6c9cb0b8..f97751d19f4 100644
--- a/tests/e2e/cucumber/features/smoke/search.feature
+++ b/tests/e2e/cucumber/features/smoke/search.feature
@@ -189,3 +189,18 @@ Feature: Search
     Then following resources should be displayed in the files list for user "Alice"
       | resource      |
       | mediaTest.txt |
+    And "Alice" clears mediaType filter
+    And "Alice" selects mediaType "PDF" from the search result filter chip
+    Then following resources should be displayed in the files list for user "Alice"
+      | resource      |
+      | mediaTest.pdf |
+    And "Alice" clears mediaType filter
+    And "Alice" selects mediaType "Audio" from the search result filter chip
+    Then following resources should be displayed in the files list for user "Alice"
+      | resource      |
+      | mediaTest.mp3 |
+    And "Alice" clears mediaType filter
+    And "Alice" selects mediaType "Archive" from the search result filter chip
+    Then following resources should be displayed in the files list for user "Alice"
+      | resource      |
+      | mediaTest.zip |
diff --git a/tests/e2e/cucumber/steps/ui/search.ts b/tests/e2e/cucumber/steps/ui/search.ts
index 529f9f85300..562d0d4f570 100644
--- a/tests/e2e/cucumber/steps/ui/search.ts
+++ b/tests/e2e/cucumber/steps/ui/search.ts
@@ -44,3 +44,11 @@ When(
     await searchObject.selectMediaTypeFilter({ mediaType })
   }
 )
+When(
+  '{string} clears mediaType filter',
+  async function (this: World, stepUser: string): Promise<void> {
+    const { page } = this.actorsEnvironment.getActor({ key: stepUser })
+    const searchObject = new objects.applicationFiles.Search({ page })
+    await searchObject.clearMediaTypeFilter()
+  }
+)
diff --git a/tests/e2e/support/objects/app-files/search/actions.ts b/tests/e2e/support/objects/app-files/search/actions.ts
index 8ccea3326ad..3eb2eb2c4fa 100644
--- a/tests/e2e/support/objects/app-files/search/actions.ts
+++ b/tests/e2e/support/objects/app-files/search/actions.ts
@@ -10,6 +10,8 @@ const mediaTypeFilterItem = '[data-test-id="media-type-%s"]'
 const mediaTypeOutside = '.files-search-result-filter'
 const clearTagFilterSelector =
   '//div[contains(@class,"files-search-filter-tags")]//button[contains(@class,"oc-filter-chip-clear")]'
+const clearMediaTypeFilterSelector =
+  '//div[contains(@class,"item-filter-mediaType")]//button[contains(@class,"oc-filter-chip-clear")]'
 const enableSearchInFileContentSelector =
   '//div[contains(@class,"files-search-filter-full-text")]//button[contains(@class,"oc-filter-chip-button")]'
 const disableSearchInFileContentSelector =
@@ -46,6 +48,10 @@ export const selectMediaTypeFilter = async ({
   await page.locator(mediaTypeOutside).click()
 }
 
+export const clearMediaTypeFilter = async ({ page }: { page: Page }): Promise<void> => {
+  await page.locator(clearMediaTypeFilterSelector).click()
+}
+
 export const toggleSearchInFileContent = async ({
   enableOrDisable,
   page
diff --git a/tests/e2e/support/objects/app-files/search/index.ts b/tests/e2e/support/objects/app-files/search/index.ts
index f5c5c7bd1dd..5a7844ce899 100644
--- a/tests/e2e/support/objects/app-files/search/index.ts
+++ b/tests/e2e/support/objects/app-files/search/index.ts
@@ -24,6 +24,10 @@ export class Search {
     await po.clearTagFilter({ page: this.#page })
   }
 
+  async clearMediaTypeFilter(): Promise<void> {
+    await po.clearMediaTypeFilter({ page: this.#page })
+  }
+
   async toggleSearchInFileContent({ enableOrDisable: string }): Promise<void> {
     await po.toggleSearchInFileContent({ enableOrDisable: string, page: this.#page })
   }

From ad326514c25cae37e9596d439e4c06900f7169be Mon Sep 17 00:00:00 2001
From: Jan <jan.alexander.ackermann@outlook.com>
Date: Mon, 13 Nov 2023 11:25:15 +0100
Subject: [PATCH 17/21] logout user before finishing test scenario

Co-authored-by: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
---
 tests/e2e/cucumber/features/smoke/search.feature | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/e2e/cucumber/features/smoke/search.feature b/tests/e2e/cucumber/features/smoke/search.feature
index f97751d19f4..4439079a7f1 100644
--- a/tests/e2e/cucumber/features/smoke/search.feature
+++ b/tests/e2e/cucumber/features/smoke/search.feature
@@ -204,3 +204,4 @@ Feature: Search
     Then following resources should be displayed in the files list for user "Alice"
       | resource      |
       | mediaTest.zip |
+    And "Alice" logs out

From ed26f0dcfed2fdace3d18e3146cf4af70e712b7b Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 14 Nov 2023 11:22:59 +0100
Subject: [PATCH 18/21] Update ocis commit id

---
 .drone.env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.drone.env b/.drone.env
index c8fe09bb93b..4908e58c7c6 100644
--- a/.drone.env
+++ b/.drone.env
@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=a9366caa0cb97de0c4a68a43f05156cc584bee16
+OCIS_COMMITID=8773aac3454f86fd3b7cdb863f0e0ecf594e9429
 OCIS_BRANCH=master

From 9e7b97992bfdaa815262b38621d6a8525466ac17 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 14 Nov 2023 14:41:33 +0100
Subject: [PATCH 19/21] Adjust ocis commit id

---
 .drone.env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.drone.env b/.drone.env
index 4908e58c7c6..c8fe09bb93b 100644
--- a/.drone.env
+++ b/.drone.env
@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=8773aac3454f86fd3b7cdb863f0e0ecf594e9429
+OCIS_COMMITID=a9366caa0cb97de0c4a68a43f05156cc584bee16
 OCIS_BRANCH=master

From adb87dc80d9fb8ff24d9d75db716208663eeb5e2 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 14 Nov 2023 15:25:14 +0100
Subject: [PATCH 20/21] Adjust commit id

---
 .drone.env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.drone.env b/.drone.env
index c8fe09bb93b..01d08c0e98f 100644
--- a/.drone.env
+++ b/.drone.env
@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=a9366caa0cb97de0c4a68a43f05156cc584bee16
+OCIS_COMMITID=7ab553e23b6facd16a4f05e2bc5206a5e92ab041
 OCIS_BRANCH=master

From 7ce522ce749edfe2bd2955797946bd3240ed4fb1 Mon Sep 17 00:00:00 2001
From: Paul Neubauer <paulneubauer@live.de>
Date: Tue, 14 Nov 2023 15:36:20 +0100
Subject: [PATCH 21/21] Update changelog

---
 .drone.env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.drone.env b/.drone.env
index 01d08c0e98f..103265ab8e4 100644
--- a/.drone.env
+++ b/.drone.env
@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=7ab553e23b6facd16a4f05e2bc5206a5e92ab041
+OCIS_COMMITID=ef1b18aeacea86be2a6918827c84f0ed99043b1e
 OCIS_BRANCH=master