From d29c458bd7f870d9577f1f5d14ca06448aa51b88 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 17 May 2023 11:04:36 +0200
Subject: [PATCH 1/3] Implement fulltext filter on search result page

---
 .../enhancement-search-fulltext-filter        |  6 ++
 .../OcFilterChip/OcFilterChip.spec.ts         | 18 +++++
 .../components/OcFilterChip/OcFilterChip.vue  | 41 +++++++++--
 .../src/components/Search/List.vue            | 23 ++++++-
 .../tests/unit/components/Search/List.spec.ts | 29 +++++++-
 .../web-pkg/src/components/ItemFilter.vue     |  2 +-
 .../src/components/ItemFilterToggle.vue       | 68 +++++++++++++++++++
 .../unit/components/ItemFilterToggle.spec.ts  | 56 +++++++++++++++
 .../__snapshots__/ItemFilter.spec.ts.snap     |  8 +--
 9 files changed, 234 insertions(+), 17 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-search-fulltext-filter
 create mode 100644 packages/web-pkg/src/components/ItemFilterToggle.vue
 create mode 100644 packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts

diff --git a/changelog/unreleased/enhancement-search-fulltext-filter b/changelog/unreleased/enhancement-search-fulltext-filter
new file mode 100644
index 00000000000..819d3c12da4
--- /dev/null
+++ b/changelog/unreleased/enhancement-search-fulltext-filter
@@ -0,0 +1,6 @@
+Enhancement: Search fulltext filter
+
+The search result page now has a fulltext filter which can be used to filter the displayed files by their content.
+
+https://github.com/owncloud/web/pull/9059
+https://github.com/owncloud/web/issues/9058
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
index 463f381a100..421d656d8bd 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
@@ -2,7 +2,10 @@ import { defaultPlugins, mount } from 'web-test-helpers'
 import OcFilterChip from './OcFilterChip.vue'
 
 const selectors = {
+  filterChipBtn: '.oc-filter-chip-button',
   filterChipLabel: '.oc-filter-chip-label',
+  filterChipDrop: '.oc-filter-chip-drop',
+  filterChipBtnActive: '.oc-filter-chip-button-selected',
   clearBtn: '.oc-filter-chip-clear'
 }
 
@@ -22,6 +25,21 @@ describe('OcFilterChip', () => {
     await wrapper.find(selectors.clearBtn).trigger('click')
     expect(wrapper.emitted('clearFilter')).toBeTruthy()
   })
+  describe('isToggle is true', () => {
+    it('does not render a dropdown', () => {
+      const { wrapper } = getWrapper({ props: { isToggle: true } })
+      expect(wrapper.find(selectors.filterChipDrop).exists()).toBeFalsy()
+    })
+    it('marks filter as active when isToggleActive is true', () => {
+      const { wrapper } = getWrapper({ props: { isToggle: true, isToggleActive: true } })
+      expect(wrapper.find(selectors.filterChipBtnActive).exists()).toBeTruthy()
+    })
+    it('emits the "toggleFilter"-event when clicking the button', async () => {
+      const { wrapper } = getWrapper({ props: { isToggle: true } })
+      await wrapper.find(selectors.filterChipBtn).trigger('click')
+      expect(wrapper.emitted('toggleFilter')).toBeTruthy()
+    })
+  })
 })
 
 const getWrapper = ({ props = {} } = {}) => {
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index d94eda5b994..1e469b08608 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="oc-filter-chip oc-flex">
+  <div class="oc-filter-chip oc-flex" :class="{ 'oc-filter-chip-toggle': isToggle }">
     <oc-button
       :id="id"
       class="oc-filter-chip-button oc-pill"
       :class="{ 'oc-filter-chip-button-selected': filterActive }"
       appearance="raw"
+      @click="isToggle ? $emit('toggleFilter') : () => ({})"
     >
       <oc-icon v-if="filterActive" name="check" size="small" color="var(--oc-color-text-inverse)" />
       <span
@@ -12,9 +13,10 @@
         v-text="!!selectedItemNames.length ? selectedItemNames[0] : filterLabel"
       />
       <span v-if="selectedItemNames.length > 1" v-text="` +${selectedItemNames.length - 1}`" />
-      <oc-icon v-if="!filterActive" name="arrow-down-s" size="small" />
+      <oc-icon v-if="!filterActive && !isToggle" name="arrow-down-s" size="small" />
     </oc-button>
     <oc-drop
+      v-if="!isToggle"
       :toggle="'#' + id"
       class="oc-filter-chip-drop"
       mode="click"
@@ -50,19 +52,42 @@ export default defineComponent({
       required: false,
       default: () => uniqueId('oc-filter-chip-')
     },
+    /**
+     * Label which is displayed when no items are selected.
+     */
     filterLabel: {
       type: String,
       required: true
     },
+    /**
+     * An array of selected item names. It is being ignored when `isToggle` is set to `true`.
+     */
     selectedItemNames: {
       type: Array,
       required: false,
       default: () => []
+    },
+    /**
+     * Display the filter chip as a on/off toggle.
+     */
+    isToggle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the toggle filter is active. It only has an effect if `isToggle` is set to `true`.
+     */
+    isToggleActive: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ['clearFilter', 'hideDrop', 'showDrop'],
+  emits: ['clearFilter', 'hideDrop', 'showDrop', 'toggleFilter'],
   setup(props) {
     const filterActive = computed(() => {
+      if (props.isToggle) {
+        return props.isToggleActive
+      }
       return !!props.selectedItemNames.length
     })
     return { filterActive }
@@ -83,7 +108,8 @@ export default defineComponent({
     text-decoration: none;
     font-size: var(--oc-font-size-xsmall);
     line-height: 1rem;
-    max-width: 120px;
+    max-width: 150px;
+    height: 24px;
     padding: var(--oc-space-xsmall) var(--oc-space-small) !important;
 
     &-selected,
@@ -94,11 +120,11 @@ export default defineComponent({
       border-bottom-left-radius: 99px !important;
       border-top-right-radius: 0px !important;
       border-bottom-right-radius: 0px !important;
+      border: 0;
     }
   }
   &-clear,
   &-clear:hover {
-    margin-left: 1px;
     background-color: var(--oc-color-swatch-primary-default) !important;
     color: var(--oc-color-text-inverse) !important;
     border-top-left-radius: 0px !important;
@@ -106,6 +132,9 @@ export default defineComponent({
     border-top-right-radius: 99px !important;
     border-bottom-right-radius: 99px !important;
   }
+  &-clear:not(.oc-filter-chip-toggle .oc-filter-chip-clear),
+  &-clear:hover:not(.oc-filter-chip-toggle .oc-filter-chip-clear) {
+    margin-left: 1px;
+  }
 }
 </style>
-
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 8f823509e88..3a8e3387a32 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -24,9 +24,14 @@
             <oc-avatar :width="24" :user-name="item.label" />
           </template>
           <template #item="{ item }">
-            <div v-text="item.label" />
+            <span v-text="item.label" />
           </template>
         </item-filter>
+        <item-filter-toggle
+          :filter-label="$gettext('Search in file content')"
+          filter-name="fulltext"
+          class="files-search-filter-fulltext oc-mr-s"
+        />
       </div>
       <app-loading-spinner v-if="loading" />
       <template v-else>
@@ -129,6 +134,7 @@ import { useTask } from 'vue-concurrency'
 import { eventBus } from 'web-pkg'
 import ItemFilter from 'web-pkg/src/components/ItemFilter.vue'
 import { isLocationCommonActive } from 'web-app-files/src/router'
+import ItemFilterToggle from 'web-pkg/src/components/ItemFilterToggle.vue'
 
 const visibilityObserver = new VisibilityObserver()
 
@@ -148,7 +154,8 @@ export default defineComponent({
     NoContentMessage,
     ResourceTable,
     FilesViewWrapper,
-    ItemFilter
+    ItemFilter,
+    ItemFilterToggle
   },
   props: {
     searchResult: {
@@ -179,6 +186,8 @@ export default defineComponent({
     const availableTags = ref<Tag[]>([])
     const tagFilter = ref<VNodeRef>()
     const tagParam = useRouteQuery('q_tags')
+    const fulltextParam = useRouteQuery('q_fulltext')
+
     const loadAvailableTagsTask = useTask(function* () {
       const {
         data: { value: tags = [] }
@@ -203,6 +212,11 @@ export default defineComponent({
     const buildSearchTerm = (manuallyUpdateFilterChip = false) => {
       let term = unref(searchTerm)
 
+      const fulltext = queryItemAsString(unref(fulltextParam))
+      if (fulltext) {
+        term = `Content:"${term}"`
+      }
+
       const tags = queryItemAsString(unref(tagParam))
       if (tags) {
         const tagsTerm = tags.split('+')?.join(',') || ''
@@ -231,7 +245,10 @@ export default defineComponent({
     watch(
       () => unref(route).query,
       (newVal, oldVal) => {
-        const isChange = newVal?.term !== oldVal?.term || newVal?.q_tags !== oldVal?.q_tags
+        const filters = ['q_fulltext', 'q_tags']
+        const isChange =
+          newVal?.term !== oldVal?.term || filters.some((f) => newVal[f] ?? '' !== oldVal[f] ?? '')
+
         if (isChange && isLocationCommonActive(router, 'files-common-search')) {
           emit('search', buildSearchTerm(true))
         }
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.ts b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
index 715766eda57..cdf6e22872c 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
@@ -21,7 +21,8 @@ jest.mock('web-pkg/src/composables/appDefaults')
 const selectors = {
   noContentMessageStub: 'no-content-message-stub',
   resourceTableStub: 'resource-table-stub',
-  tagFilter: '.files-search-filter-tags'
+  tagFilter: '.files-search-filter-tags',
+  fulltextFilter: '.files-search-filter-fulltext'
 }
 
 describe('List component', () => {
@@ -50,19 +51,41 @@ describe('List component', () => {
         ])
       })
       it('should set initial filter when tags are given via query param', async () => {
+        const searchTerm = 'term'
         const tagFilterQuery = 'tag1'
         const { wrapper } = getWrapper({
           availableTags: ['tag1'],
+          searchTerm,
           tagFilterQuery
         })
         await wrapper.vm.loadAvailableTagsTask.last
-        expect(wrapper.emitted('search')[0][0]).toEqual(tagFilterQuery)
+        expect(wrapper.emitted('search')[0][0]).toEqual(`${searchTerm} Tags:"${tagFilterQuery}"`)
+      })
+    })
+    describe('fulltext', () => {
+      it('should render filter', () => {
+        const { wrapper } = getWrapper()
+        expect(wrapper.find(selectors.fulltextFilter).exists()).toBeTruthy()
+      })
+      it('should set initial filter when fulltext is set active via query param', async () => {
+        const searchTerm = 'term'
+        const { wrapper } = getWrapper({ searchTerm, fulltextFilterQuery: 'true' })
+        await wrapper.vm.loadAvailableTagsTask.last
+        expect(wrapper.emitted('search')[0][0]).toEqual(`Content:"${searchTerm}"`)
       })
     })
   })
 })
 
-function getWrapper({ availableTags = [], resources = [], tagFilterQuery = null } = {}) {
+function getWrapper({
+  availableTags = [],
+  resources = [],
+  searchTerm = '',
+  tagFilterQuery = null,
+  fulltextFilterQuery = null
+} = {}) {
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => searchTerm)
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => fulltextFilterQuery)
   jest.mocked(queryItemAsString).mockImplementationOnce(() => tagFilterQuery)
 
   const resourcesViewDetailsMock = useResourcesViewDefaultsMock({
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index 98e66e6d898..428da52850d 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -41,7 +41,7 @@
                 <div>
                   <slot name="image" :item="item" />
                 </div>
-                <div>
+                <div class="oc-text-truncate">
                   <slot name="item" :item="item" />
                 </div>
               </component>
diff --git a/packages/web-pkg/src/components/ItemFilterToggle.vue b/packages/web-pkg/src/components/ItemFilterToggle.vue
new file mode 100644
index 00000000000..c9e0f992902
--- /dev/null
+++ b/packages/web-pkg/src/components/ItemFilterToggle.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="item-filter oc-flex" :class="`item-filter-${filterName}`">
+    <oc-filter-chip
+      :is-toggle="true"
+      :filter-label="filterLabel"
+      :is-toggle-active="filterActive"
+      @toggle-filter="toggleFilter"
+      @clear-filter="toggleFilter"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref, unref } from 'vue'
+import omit from 'lodash-es/omit'
+import { useRoute, useRouteQuery, useRouter } from 'web-pkg'
+import { queryItemAsString } from 'web-pkg/src/composables/appDefaults'
+
+export default defineComponent({
+  name: 'ItemFilterToggle',
+  props: {
+    filterLabel: {
+      type: String,
+      required: true
+    },
+    filterName: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['toggleFilter'],
+  setup: function (props, { emit }) {
+    const router = useRouter()
+    const currentRoute = useRoute()
+    const filterActive = ref<boolean>(false)
+
+    const queryParam = `q_${props.filterName}`
+    const currentRouteQuery = useRouteQuery(queryParam)
+    const setRouteQuery = () => {
+      return router.push({
+        query: {
+          ...omit(unref(currentRoute).query, [queryParam]),
+          ...(unref(filterActive) && { [queryParam]: 'true' })
+        }
+      })
+    }
+
+    const toggleFilter = async () => {
+      filterActive.value = !unref(filterActive)
+      await setRouteQuery()
+      emit('toggleFilter', unref(filterActive))
+    }
+
+    onMounted(() => {
+      const queryStr = queryItemAsString(unref(currentRouteQuery))
+      if (queryStr === 'true') {
+        filterActive.value = true
+      }
+    })
+
+    return {
+      queryParam,
+      filterActive,
+      toggleFilter
+    }
+  }
+})
+</script>
diff --git a/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts b/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts
new file mode 100644
index 00000000000..3a0e4e93204
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/ItemFilterToggle.spec.ts
@@ -0,0 +1,56 @@
+import ItemFilterToggle from 'web-pkg/src/components/ItemFilterToggle.vue'
+import { defaultComponentMocks, defaultPlugins, mount } from 'web-test-helpers'
+import { queryItemAsString } from 'web-pkg/src/composables/appDefaults'
+
+jest.mock('web-pkg/src/composables/appDefaults')
+
+const selectors = {
+  labelSpan: '.oc-filter-chip-label',
+  filterBtn: '.oc-filter-chip-button'
+}
+
+describe('ItemFilterToggle', () => {
+  it('renders the toggle filter including its label', () => {
+    const filterLabel = 'Toggle'
+    const { wrapper } = getWrapper({ props: { filterLabel } })
+    expect(wrapper.find(selectors.labelSpan).text()).toEqual(filterLabel)
+  })
+  it('emits the "toggleFilter"-event on click', async () => {
+    const { wrapper } = getWrapper()
+    await wrapper.find(selectors.filterBtn).trigger('click')
+    expect(wrapper.emitted('toggleFilter').length).toBeGreaterThan(0)
+  })
+  describe('route query', () => {
+    it('sets the active state as query param', async () => {
+      const { wrapper, mocks } = getWrapper()
+      const currentRouteQuery = (mocks.$router.currentRoute as any).query
+      expect(mocks.$router.push).not.toHaveBeenCalled()
+      await wrapper.find(selectors.filterBtn).trigger('click')
+      expect(currentRouteQuery[wrapper.vm.queryParam]).toBeDefined()
+      expect(mocks.$router.push).toHaveBeenCalled()
+    })
+    it('sets the active state initially when given via query param', () => {
+      const { wrapper } = getWrapper({ initialQuery: 'true' })
+      expect(wrapper.vm.filterActive).toEqual(true)
+    })
+  })
+})
+
+function getWrapper({ props = {}, initialQuery = '' } = {}) {
+  jest.mocked(queryItemAsString).mockImplementation(() => initialQuery)
+  const mocks = defaultComponentMocks()
+  return {
+    mocks,
+    wrapper: mount(ItemFilterToggle, {
+      props: {
+        filterLabel: 'Toggle',
+        filterName: 'toggle',
+        ...props
+      },
+      global: {
+        plugins: [...defaultPlugins()],
+        mocks
+      }
+    })
+  }
+}
diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
index 3ec4ba74074..1b5fbe11d7c 100644
--- a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -24,7 +24,7 @@ exports[`ItemFilter can use a custom attribute as display name 1`] = `
                   <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-7" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
                 </div>
                 <div></div>
-                <div>Albert Einstein</div>
+                <div class="oc-text-truncate">Albert Einstein</div>
               </button>
             </li>
             <li class="oc-my-xs">
@@ -34,7 +34,7 @@ exports[`ItemFilter can use a custom attribute as display name 1`] = `
                   <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-8" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
                 </div>
                 <div></div>
-                <div>Marie Curie</div>
+                <div class="oc-text-truncate">Marie Curie</div>
               </button>
             </li>
           </ul>
@@ -70,7 +70,7 @@ exports[`ItemFilter renders all items 1`] = `
                   <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-3" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
                 </div>
                 <div></div>
-                <div>Albert Einstein</div>
+                <div class="oc-text-truncate">Albert Einstein</div>
               </button>
             </li>
             <li class="oc-my-xs">
@@ -80,7 +80,7 @@ exports[`ItemFilter renders all items 1`] = `
                   <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-4" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
                 </div>
                 <div></div>
-                <div>Marie Curie</div>
+                <div class="oc-text-truncate">Marie Curie</div>
               </button>
             </li>
           </ul>

From b31205b6cd1a91932007dcc2ca61e55b6cfb4472 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 23 May 2023 12:35:50 +0200
Subject: [PATCH 2/3] Use camelCase for fullText

---
 .../unreleased/enhancement-search-fulltext-filter  |  4 ++--
 .../web-app-files/src/components/Search/List.vue   | 12 ++++++------
 .../tests/unit/components/Search/List.spec.ts      | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/changelog/unreleased/enhancement-search-fulltext-filter b/changelog/unreleased/enhancement-search-fulltext-filter
index 819d3c12da4..ec5060a15f7 100644
--- a/changelog/unreleased/enhancement-search-fulltext-filter
+++ b/changelog/unreleased/enhancement-search-fulltext-filter
@@ -1,6 +1,6 @@
-Enhancement: Search fulltext filter
+Enhancement: Search full-text filter
 
-The search result page now has a fulltext filter which can be used to filter the displayed files by their content.
+The search result page now has a full-text filter which can be used to filter the displayed files by their content.
 
 https://github.com/owncloud/web/pull/9059
 https://github.com/owncloud/web/issues/9058
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index 3a8e3387a32..19b5443335f 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -29,8 +29,8 @@
         </item-filter>
         <item-filter-toggle
           :filter-label="$gettext('Search in file content')"
-          filter-name="fulltext"
-          class="files-search-filter-fulltext oc-mr-s"
+          filter-name="fullText"
+          class="files-search-filter-full-text oc-mr-s"
         />
       </div>
       <app-loading-spinner v-if="loading" />
@@ -186,7 +186,7 @@ export default defineComponent({
     const availableTags = ref<Tag[]>([])
     const tagFilter = ref<VNodeRef>()
     const tagParam = useRouteQuery('q_tags')
-    const fulltextParam = useRouteQuery('q_fulltext')
+    const fullTextParam = useRouteQuery('q_fullText')
 
     const loadAvailableTagsTask = useTask(function* () {
       const {
@@ -212,8 +212,8 @@ export default defineComponent({
     const buildSearchTerm = (manuallyUpdateFilterChip = false) => {
       let term = unref(searchTerm)
 
-      const fulltext = queryItemAsString(unref(fulltextParam))
-      if (fulltext) {
+      const fullTextQuery = queryItemAsString(unref(fullTextParam))
+      if (fullTextQuery) {
         term = `Content:"${term}"`
       }
 
@@ -245,7 +245,7 @@ export default defineComponent({
     watch(
       () => unref(route).query,
       (newVal, oldVal) => {
-        const filters = ['q_fulltext', 'q_tags']
+        const filters = ['q_fullText', 'q_tags']
         const isChange =
           newVal?.term !== oldVal?.term || filters.some((f) => newVal[f] ?? '' !== oldVal[f] ?? '')
 
diff --git a/packages/web-app-files/tests/unit/components/Search/List.spec.ts b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
index cdf6e22872c..ce8309e4729 100644
--- a/packages/web-app-files/tests/unit/components/Search/List.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Search/List.spec.ts
@@ -22,7 +22,7 @@ const selectors = {
   noContentMessageStub: 'no-content-message-stub',
   resourceTableStub: 'resource-table-stub',
   tagFilter: '.files-search-filter-tags',
-  fulltextFilter: '.files-search-filter-fulltext'
+  fullTextFilter: '.files-search-filter-full-text'
 }
 
 describe('List component', () => {
@@ -62,14 +62,14 @@ describe('List component', () => {
         expect(wrapper.emitted('search')[0][0]).toEqual(`${searchTerm} Tags:"${tagFilterQuery}"`)
       })
     })
-    describe('fulltext', () => {
+    describe('fullText', () => {
       it('should render filter', () => {
         const { wrapper } = getWrapper()
-        expect(wrapper.find(selectors.fulltextFilter).exists()).toBeTruthy()
+        expect(wrapper.find(selectors.fullTextFilter).exists()).toBeTruthy()
       })
-      it('should set initial filter when fulltext is set active via query param', async () => {
+      it('should set initial filter when fullText is set active via query param', async () => {
         const searchTerm = 'term'
-        const { wrapper } = getWrapper({ searchTerm, fulltextFilterQuery: 'true' })
+        const { wrapper } = getWrapper({ searchTerm, fullTextFilterQuery: 'true' })
         await wrapper.vm.loadAvailableTagsTask.last
         expect(wrapper.emitted('search')[0][0]).toEqual(`Content:"${searchTerm}"`)
       })
@@ -82,10 +82,10 @@ function getWrapper({
   resources = [],
   searchTerm = '',
   tagFilterQuery = null,
-  fulltextFilterQuery = null
+  fullTextFilterQuery = null
 } = {}) {
   jest.mocked(queryItemAsString).mockImplementationOnce(() => searchTerm)
-  jest.mocked(queryItemAsString).mockImplementationOnce(() => fulltextFilterQuery)
+  jest.mocked(queryItemAsString).mockImplementationOnce(() => fullTextFilterQuery)
   jest.mocked(queryItemAsString).mockImplementationOnce(() => tagFilterQuery)
 
   const resourcesViewDetailsMock = useResourcesViewDefaultsMock({

From 6a8a5f625bc4fb9d27d0d7e64c9813d681c97692 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Tue, 23 May 2023 13:30:24 +0200
Subject: [PATCH 3/3] Improve toggleFilter emit on click

---
 .../design-system/src/components/OcFilterChip/OcFilterChip.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 1e469b08608..fa35752dcf3 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -5,7 +5,7 @@
       class="oc-filter-chip-button oc-pill"
       :class="{ 'oc-filter-chip-button-selected': filterActive }"
       appearance="raw"
-      @click="isToggle ? $emit('toggleFilter') : () => ({})"
+      @click="isToggle ? $emit('toggleFilter') : false"
     >
       <oc-icon v-if="filterActive" name="check" size="small" color="var(--oc-color-text-inverse)" />
       <span