feat: search highlights

changelog/unreleased/enhancement-search-list-add-highligthed-file-content

@@ -0,0 +1,7 @@
+Enhancement: Search list add highlighted file content
+
+We've introduced a feature that shows a highlighted result summary matching the search term in the search list,
+if there are occurrences in the found files.
+
+https://github.com/owncloud/web/pull/9294
+https://github.com/owncloud/web/issues/9295

package.json

@@ -83,7 +83,7 @@
     "cucumber-html-reporter": "5.5.1",
     "depcheck": "1.4.3",
     "ejs": "3.1.9",
-    "eslint": "8.40.0",
+    "eslint": "8.43.0",
     "flush-promises": "1.0.2",
     "git-repo-info": "2.1.1",
     "jest": "29.5.0",

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

@@ -79,6 +79,7 @@
           <oc-icon name="edit-2" fill-type="line" size="small" />
         </oc-button>
       </div>
+      <slot name="additionalResourceContent" :resource="item" />
     </template>
     <template #status="{ item }">
       <!-- @slot Status column -->

packages/web-app-files/src/components/Search/List.vue

@@ -28,7 +28,7 @@
         </item-filter>
         <item-filter-toggle
           v-if="fullTextSearchEnabled"
-          :filter-label="$gettext('Search in file content')"
+          :filter-label="$gettext('Search only in content')"
           filter-name="fullText"
           class="files-search-filter-full-text oc-mr-s"
         />
@@ -61,10 +61,18 @@
           :is-selectable="true"
           :sort-by="sortBy"
           :sort-dir="sortDir"
+          :fields-displayed="['name', 'size', 'tags', 'mdate']"
           @file-click="triggerDefaultAction"
           @row-mounted="rowMounted"
           @sort="handleSort"
         >
+          <template #additionalResourceContent="{ resource }">
+            <span
+              v-if="resource.highlights"
+              class="files-search-resource-highlights oc-text-truncate"
+              v-html="resource.highlights"
+            />
+          </template>
           <template #contextMenu="{ resource }">
             <context-actions
               v-if="isResourceInSelection(resource)"
@@ -373,4 +381,15 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.files-search-resource-highlights {
+  font-size: 0.8125rem;
+  color: var(--oc-color-text-muted);
+
+  mark {
+    background: #fff74c;
+    font-style: normal;
+    font-weight: var(--oc-font-weight-semibold);
+  }
+}
+</style>

packages/web-app-files/src/search/sdk/list.ts

@@ -1,13 +1,22 @@
 import { SearchList, SearchResult } from 'web-app-search/src/types'
 import ListComponent from '../../components/Search/List.vue'
 import { ClientService } from 'web-pkg/src/services'
-import { ProjectSpaceResource, buildResource, isProjectSpaceResource } from 'web-client/src/helpers'
+import {
+  ProjectSpaceResource,
+  buildResource,
+  isProjectSpaceResource,
+  Resource
+} from 'web-client/src/helpers'
 import { Component, computed, Ref, unref } from 'vue'
 import { DavProperties, DavProperty } from 'web-client/src/webdav/constants'
 import { Store } from 'vuex'
 
 export const searchLimit = 200
 
+export interface SearchResource extends Resource {
+  highlights: string
+}
+
 export default class List implements SearchList {
   public readonly component: Component
   private readonly store: Store<any>
@@ -45,7 +54,11 @@ export default class List implements SearchList {
       totalResults: range ? parseInt(range?.split('/')[1]) : null,
       values: results.map((result) => {
         const matchingSpace = this.getMatchingSpace(result.fileInfo[DavProperty.FileParent])
-        const resource = matchingSpace ? matchingSpace : buildResource(result)
+        const resource = {
+          ...(matchingSpace ? matchingSpace : buildResource(result)),
+          highlights: result.fileInfo[DavProperty.Highlights] || ''
+        } as SearchResource
+
         // info: in oc10 we have no storageId in resources. All resources are mounted into the personal space.
         if (!resource.storageId) {
           resource.storageId = this.store.getters.user.id

packages/web-client/src/webdav/constants/dav.ts

@@ -28,6 +28,7 @@ export abstract class DavProperty {
   static readonly MimeType: string = '{DAV:}getcontenttype'
   static readonly ResourceType: string = '{DAV:}resourcetype'
   static readonly DownloadURL: string = '{http://owncloud.org/ns}downloadURL'
+  static readonly Highlights: string = '{http://owncloud.org/ns}highlights'
 
   static readonly ShareId: string = '{http://owncloud.org/ns}shareid'
   static readonly ShareRoot: string = '{http://owncloud.org/ns}shareroot'