From 88a691503f1b92d90fd4783f677ed99af0763bbc Mon Sep 17 00:00:00 2001
From: Himanshu Kapoor <hkapoor@gitlab.com>
Date: Tue, 11 Jun 2024 18:23:41 +0200
Subject: [PATCH] Add search in wiki sidebar

Add a search box to quickly find items by title in the
sidebar.

Changelog: added
---
 .../wikis/components/wiki_sidebar_entries.vue | 36 ++++++++++++----
 .../wikis/components/wiki_sidebar_entry.vue   | 31 ++++++++++++--
 locale/gitlab.pot                             |  3 ++
 .../components/wiki_sidebar_entries_spec.js   | 41 ++++++++++++++++++-
 .../components/wiki_sidebar_entry_spec.js     |  6 +++
 5 files changed, 104 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entries.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entries.vue
index 0337cdd01db48a..2964d70c18b015 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entries.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entries.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlSkeletonLoader } from '@gitlab/ui';
+import { GlButton, GlSkeletonLoader, GlSearchBoxByType } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { sidebarEntriesToTree } from '../utils';
 import WikiSidebarEntry from './wiki_sidebar_entry.vue';
@@ -11,21 +11,34 @@ export default {
     WikiSidebarEntry,
     GlButton,
     GlSkeletonLoader,
+    GlSearchBoxByType,
   },
   inject: ['sidebarPagesApi', 'hasCustomSidebar', 'viewAllPagesPath'],
   props: {},
 
   data() {
     return {
+      allEntries: [],
       entries: [],
       totalCount: 0,
       isLoadingContent: false,
+      searchTerm: '',
     };
   },
 
   computed: {
     countExceedsSidebarLimit() {
-      return this.totalCount > this.$options.SIDEBAR_LIMIT;
+      return this.totalCount > this.$options.SIDEBAR_LIMIT && !this.searchTerm;
+    },
+  },
+
+  watch: {
+    async searchTerm() {
+      this.entries = sidebarEntriesToTree(
+        this.allEntries
+          .filter((entry) => entry.title.toLowerCase().includes(this.searchTerm.toLowerCase()))
+          .slice(0, SIDEBAR_LIMIT),
+      );
     },
   },
 
@@ -38,6 +51,7 @@ export default {
 
     this.entries = sidebarEntriesToTree(entries.slice(0, SIDEBAR_LIMIT));
     this.totalCount = entries.length;
+    this.allEntries = entries;
   },
   SIDEBAR_LIMIT,
 };
@@ -47,11 +61,19 @@ export default {
     <gl-skeleton-loader />
   </div>
   <ul v-else class="wiki-pages" :class="{ 'gl-border-b !gl-pb-3': hasCustomSidebar }">
-    <wiki-sidebar-entry v-for="entry in entries" :key="entry.slug" :page="entry" />
-    <div
-      v-if="totalCount > $options.SIDEBAR_LIMIT"
-      class="gl-text-secondary gl-mt-3 gl-ml-3 gl-inline-block"
-    >
+    <gl-search-box-by-type
+      v-model.trim="searchTerm"
+      :placeholder="s__('Wiki|Search pages')"
+      class="gl-m-2"
+      @keyup.prevent.stop
+    />
+    <wiki-sidebar-entry
+      v-for="entry in entries"
+      :key="entry.slug"
+      :page="entry"
+      :search-term="searchTerm"
+    />
+    <div v-if="countExceedsSidebarLimit" class="gl-text-secondary gl-mt-3 gl-ml-3 gl-inline-block">
       {{ sprintf(s__('Wiki|+ %{count} more'), { count: totalCount - $options.SIDEBAR_LIMIT }) }}
       <span class="gl-px-2">&middot;</span>
     </div>
diff --git a/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entry.vue b/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entry.vue
index b01d6eb84ef8b9..6cdc38a128f979 100644
--- a/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entry.vue
+++ b/app/assets/javascripts/pages/shared/wikis/components/wiki_sidebar_entry.vue
@@ -1,7 +1,9 @@
 <script>
 import { GlIcon, GlButton, GlLink } from '@gitlab/ui';
+import { escape } from 'lodash';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 import { s__, sprintf } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
 
 export default {
   name: 'WikiSidebarEntry',
@@ -11,12 +13,20 @@ export default {
     GlButton,
     LocalStorageSync,
   },
+  directives: {
+    SafeHtml,
+  },
   inject: ['canCreate'],
   props: {
     page: {
       type: Object,
       required: true,
     },
+    searchTerm: {
+      type: String,
+      default: '',
+      required: false,
+    },
   },
   data() {
     return {
@@ -41,7 +51,16 @@ export default {
     toggleCollapsed() {
       this.isCollapsed = !this.isCollapsed;
     },
+    highlight(text) {
+      return this.searchTerm
+        ? String(escape(text)).replace(
+            new RegExp(this.searchTerm, 'i'),
+            (match) => `<strong>${match}</strong>`,
+          )
+        : escape(text);
+    },
   },
+  safeHtmlConfig: { ALLOWED_TAGS: ['strong'] },
 };
 </script>
 <template>
@@ -55,14 +74,13 @@ export default {
       @click="toggleCollapsed"
     >
       <gl-link
+        v-safe-html:[$options.safeHtmlConfig]="highlight(pageTitle)"
         :href="page.path"
         class="gl-str-truncated"
         :data-qa-page-name="pageTitle"
         :data-testid="page.children.length ? 'wiki-dir-page-link' : 'wiki-page-link'"
         @click.stop
-      >
-        {{ pageTitle }}
-      </gl-link>
+      />
       <gl-button
         v-if="canCreate"
         icon="plus"
@@ -82,7 +100,12 @@ export default {
       />
     </span>
     <ul v-if="page.children.length && !isCollapsed" dir="auto" class="!gl-pl-5">
-      <wiki-sidebar-entry v-for="child in page.children" :key="child.slug" :page="child" />
+      <wiki-sidebar-entry
+        v-for="child in page.children"
+        :key="child.slug"
+        :page="child"
+        :search-term="searchTerm"
+      />
     </ul>
   </li>
 </template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b3a43330111ed3..9d46392523e0a7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -59492,6 +59492,9 @@ msgstr ""
 msgid "Wiki|Pages"
 msgstr ""
 
+msgid "Wiki|Search pages"
+msgstr ""
+
 msgid "Wiki|Sidebar was successfully created."
 msgstr ""
 
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entries_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entries_spec.js
index 047436a3262090..60e1bd783c8401 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entries_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entries_spec.js
@@ -1,4 +1,4 @@
-import { GlSkeletonLoader } from '@gitlab/ui';
+import { GlSkeletonLoader, GlSearchBoxByType } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import axios from '~/lib/utils/axios_utils';
@@ -46,6 +46,7 @@ describe('pages/shared/wikis/components/wiki_sidebar_entry', () => {
   const findAllEntries = () => wrapper.findAllComponents(WikiSidebarEntry);
   const findAndMapEntriesToPages = () =>
     findAllEntries().wrappers.map((entry) => ({ ...entry.props('page') }));
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
 
   function buildWrapper(props = {}, provide = {}) {
     wrapper = shallowMountExtended(WikiSidebarEntries, {
@@ -57,7 +58,9 @@ describe('pages/shared/wikis/components/wiki_sidebar_entry', () => {
         canCreate: false,
         ...provide,
       },
-      stubs: {},
+      stubs: {
+        GlSearchBoxByType,
+      },
     });
   }
 
@@ -171,4 +174,38 @@ describe('pages/shared/wikis/components/wiki_sidebar_entry', () => {
       expect(findViewAllPagesButton().attributes('href')).toBe(MOCK_VIEW_ALL_PAGES_PATH);
     });
   });
+
+  describe('when searching for pages', () => {
+    beforeEach(async () => {
+      mock.onGet(MOCK_SIDEBAR_PAGES_API).reply(HTTP_STATUS_OK, MOCK_ENTRIES_MORE_THAN_LIMIT);
+      buildWrapper();
+
+      await waitForPromises();
+
+      findSearchBox().vm.$emit('input', 'Page 1');
+    });
+
+    it('lists all the filtered search results', () => {
+      expect(findAndMapEntriesToPages()).toEqual([
+        { slug: 'page-1', path: 'path/to/page-1', title: 'Page 1', children: [] },
+        { slug: 'page-10', path: 'path/to/page-10', title: 'Page 10', children: [] },
+        { slug: 'page-11', path: 'path/to/page-11', title: 'Page 11', children: [] },
+        { slug: 'page-12', path: 'path/to/page-12', title: 'Page 12', children: [] },
+        { slug: 'page-13', path: 'path/to/page-13', title: 'Page 13', children: [] },
+        { slug: 'page-14', path: 'path/to/page-14', title: 'Page 14', children: [] },
+        { slug: 'page-15', path: 'path/to/page-15', title: 'Page 15', children: [] },
+        { slug: 'page-16', path: 'path/to/page-16', title: 'Page 16', children: [] },
+        { slug: 'page-17', path: 'path/to/page-17', title: 'Page 17', children: [] },
+      ]);
+    });
+
+    it('does not display + X more text', () => {
+      expect(wrapper.text()).not.toMatch(/\+ \d+ more/);
+    });
+
+    it('has a "View all pages" button', () => {
+      expect(findViewAllPagesButton().exists()).toBe(true);
+      expect(findViewAllPagesButton().attributes('href')).toBe(MOCK_VIEW_ALL_PAGES_PATH);
+    });
+  });
 });
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entry_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entry_spec.js
index 31d0e05162b8aa..fb587759484754 100644
--- a/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entry_spec.js
+++ b/spec/frontend/pages/shared/wikis/components/wiki_sidebar_entry_spec.js
@@ -50,6 +50,12 @@ describe('pages/shared/wikis/components/wiki_sidebar_entry', () => {
 
       expect(wrapper.findByTestId('wiki-list-create-child-button').exists()).toBe(true);
     });
+
+    it('highlights the searchTerm in the page title', () => {
+      buildWrapper({ page: { title: 'Foo', path: '/foo', children: [] }, searchTerm: 'Fo' });
+
+      expect(wrapper.html()).toContain('<strong>Fo</strong>o');
+    });
   });
 
   describe('when the page has children', () => {
-- 
GitLab