From f664c3c8c97df3a42c7b2dca9db6578e58e8a98d Mon Sep 17 00:00:00 2001
From: Peter Hegman <phegman@gitlab.com>
Date: Wed, 20 Mar 2024 15:19:04 -0700
Subject: [PATCH 1/2] Refactor organization groups/projects search to shared
 component

Component will be used for all groups and projects lists
---
 .../components/filtered_search_and_sort.vue   | 126 ++++++++++++++++++
 .../groups_and_projects/components/app.vue    | 104 +++++----------
 locale/gitlab.pot                             |   6 +-
 .../filtered_search_and_sort_spec.js          | 103 ++++++++++++++
 .../components/app_spec.js                    |  63 +++------
 5 files changed, 284 insertions(+), 118 deletions(-)
 create mode 100644 app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
 create mode 100644 spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js

diff --git a/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue b/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
new file mode 100644
index 00000000000000..297f3678679851
--- /dev/null
+++ b/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
@@ -0,0 +1,126 @@
+<script>
+import { GlSorting } from '@gitlab/ui';
+import { __ } from '~/locale';
+import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import {
+  filterToQueryObject,
+  processFilters,
+  urlQueryToFilter,
+  prepareTokens,
+} from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
+import {
+  FILTERED_SEARCH_TERM,
+  TOKEN_EMPTY_SEARCH_TERM,
+} from '~/vue_shared/components/filtered_search_bar/constants';
+
+export default {
+  i18n: {
+    searchInputPlaceholder: __('Search or filter list'),
+  },
+  components: {
+    FilteredSearchBar,
+    GlSorting,
+  },
+  props: {
+    filteredSearchTokens: {
+      type: Array,
+      required: true,
+    },
+    /**
+     * Filtered search value as an object. Can come from `$route.query` if using Vue router
+     * or manually convert the query string to an object using `queryToObject` util.
+     *
+     * Example:
+     *
+     * {
+     *   search: 'foo bar',
+     *   role: 'Owner'
+     * }
+     */
+    filteredSearchQuery: {
+      type: Object,
+      required: true,
+    },
+    filteredSearchTermKey: {
+      type: String,
+      required: true,
+    },
+    filteredSearchNamespace: {
+      type: String,
+      required: true,
+    },
+    filteredSearchRecentSearchesStorageKey: {
+      type: String,
+      required: true,
+    },
+    sortOptions: {
+      type: Array,
+      required: true,
+    },
+    activeSortOption: {
+      type: Object,
+      required: true,
+    },
+    isAscending: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  computed: {
+    filteredSearchValue() {
+      const tokens = prepareTokens(
+        urlQueryToFilter(this.filteredSearchQuery, {
+          filteredSearchTermKey: this.filteredSearchTermKey,
+          filterNamesAllowList: [FILTERED_SEARCH_TERM],
+        }),
+      );
+
+      return tokens.length ? tokens : [TOKEN_EMPTY_SEARCH_TERM];
+    },
+  },
+  methods: {
+    onFilter(filters) {
+      this.$emit(
+        'filter',
+        filterToQueryObject(processFilters(filters), {
+          filteredSearchTermKey: this.filteredSearchTermKey,
+        }),
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-p-5 gl-bg-gray-10 gl-border-t gl-border-b">
+    <div class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-gap-3">
+      <div class="gl-flex-grow-1">
+        <filtered-search-bar
+          :namespace="filteredSearchNamespace"
+          :tokens="filteredSearchTokens"
+          :initial-filter-value="filteredSearchValue"
+          sync-filter-and-sort
+          :recent-searches-storage-key="filteredSearchRecentSearchesStorageKey"
+          :search-input-placeholder="$options.i18n.searchInputPlaceholder"
+          @onFilter="onFilter"
+        />
+      </div>
+      <div v-if="$scopedSlots.default">
+        <slot></slot>
+      </div>
+      <div>
+        <gl-sorting
+          class="gl-display-flex"
+          dropdown-class="gl-w-full"
+          block
+          :text="activeSortOption.text"
+          :is-ascending="isAscending"
+          :sort-options="sortOptions"
+          :sort-by="activeSortOption.value"
+          @sortDirectionChange="$emit('sort-direction-change', $event)"
+          @sortByChange="$emit('sort-by-change', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
index 83a99b0f86632a..79e61e89af0439 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
+++ b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
@@ -1,18 +1,7 @@
 <script>
-import { GlCollapsibleListbox, GlSorting } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { isEqual } from 'lodash';
-import { s__, __ } from '~/locale';
-import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import {
-  filterToQueryObject,
-  processFilters,
-  urlQueryToFilter,
-  prepareTokens,
-} from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
-import {
-  FILTERED_SEARCH_TERM,
-  TOKEN_EMPTY_SEARCH_TERM,
-} from '~/vue_shared/components/filtered_search_bar/constants';
+import { __ } from '~/locale';
 import { RESOURCE_TYPE_GROUPS, RESOURCE_TYPE_PROJECTS } from '~/organizations/constants';
 import GroupsView from '~/organizations/shared/components/groups_view.vue';
 import ProjectsView from '~/organizations/shared/components/projects_view.vue';
@@ -26,18 +15,17 @@ import {
   SORT_DIRECTION_DESC,
   SORT_ITEM_NAME,
 } from '~/organizations/shared/constants';
+import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
 import { DISPLAY_LISTBOX_ITEMS, SORT_ITEMS, FILTERED_SEARCH_TERM_KEY } from '../constants';
 
 export default {
   i18n: {
     pageTitle: __('Groups and projects'),
-    searchInputPlaceholder: s__('Organization|Search or filter list'),
     displayListboxHeaderText: __('Display'),
   },
   components: {
-    FilteredSearchBar,
+    FilteredSearchAndSort,
     GlCollapsibleListbox,
-    GlSorting,
     NewGroupButton,
     NewProjectButton,
   },
@@ -48,6 +36,7 @@ export default {
   },
   displayListboxItems: DISPLAY_LISTBOX_ITEMS,
   sortItems: SORT_ITEMS,
+  filteredSearchTermKey: FILTERED_SEARCH_TERM_KEY,
   computed: {
     routerView() {
       const { display } = this.$route.query;
@@ -84,16 +73,6 @@ export default {
     endCursor() {
       return this.$route.query[QUERY_PARAM_END_CURSOR] || null;
     },
-    filteredSearchValue() {
-      const tokens = prepareTokens(
-        urlQueryToFilter(this.$route.query, {
-          filteredSearchTermKey: FILTERED_SEARCH_TERM_KEY,
-          filterNamesAllowList: [FILTERED_SEARCH_TERM],
-        }),
-      );
-
-      return tokens.length ? tokens : [TOKEN_EMPTY_SEARCH_TERM];
-    },
     displayListboxSelected() {
       const { display } = this.$route.query;
 
@@ -102,10 +81,7 @@ export default {
         : RESOURCE_TYPE_GROUPS;
     },
     search() {
-      return (
-        this.filteredSearchValue.find((token) => token.type === FILTERED_SEARCH_TERM)?.value
-          ?.data || ''
-      );
+      return this.$route.query[FILTERED_SEARCH_TERM_KEY] || '';
     },
     routeQueryWithoutPagination() {
       const {
@@ -130,7 +106,7 @@ export default {
     onDisplayListboxSelect(display) {
       this.pushQuery({ display });
     },
-    onSortItemClick(sortValue) {
+    onSortByChange(sortValue) {
       if (this.$route.query.sort_name === sortValue) {
         return;
       }
@@ -150,9 +126,7 @@ export default {
         display,
         sort_name,
         sort_direction,
-        ...filterToQueryObject(processFilters(filters), {
-          filteredSearchTermKey: FILTERED_SEARCH_TERM_KEY,
-        }),
+        ...filters,
       });
     },
     onPageChange(pagination) {
@@ -173,44 +147,30 @@ export default {
         <new-project-button />
       </div>
     </div>
-    <div class="gl-p-5 gl-bg-gray-10 gl-border-t gl-border-b">
-      <div class="gl-mx-n2 gl-my-n2 gl-md-display-flex">
-        <div class="gl-p-2 gl-flex-grow-1">
-          <filtered-search-bar
-            :namespace="$options.filteredSearch.namespace"
-            :tokens="$options.filteredSearch.tokens"
-            :initial-filter-value="filteredSearchValue"
-            sync-filter-and-sort
-            :recent-searches-storage-key="$options.filteredSearch.recentSearchesStorageKey"
-            :search-input-placeholder="$options.i18n.searchInputPlaceholder"
-            @onFilter="onFilter"
-          />
-        </div>
-        <div class="gl-p-2">
-          <gl-collapsible-listbox
-            :selected="displayListboxSelected"
-            :items="$options.displayListboxItems"
-            :header-text="$options.i18n.displayListboxHeaderText"
-            block
-            toggle-class="gl-md-w-30"
-            @select="onDisplayListboxSelect"
-          />
-        </div>
-        <div class="gl-p-2">
-          <gl-sorting
-            class="gl-display-flex"
-            dropdown-class="gl-w-full"
-            block
-            :text="sortText"
-            :is-ascending="isAscending"
-            :sort-options="$options.sortItems"
-            :sort-by="activeSortItem.value"
-            @sortDirectionChange="onSortDirectionChange"
-            @sortByChange="onSortItemClick"
-          />
-        </div>
-      </div>
-    </div>
+    <filtered-search-and-sort
+      :filtered-search-namespace="$options.filteredSearch.namespace"
+      :filtered-search-tokens="$options.filteredSearch.tokens"
+      :filtered-search-query="$route.query"
+      :filtered-search-term-key="$options.filteredSearchTermKey"
+      :filtered-search-recent-searches-storage-key="
+        $options.filteredSearch.recentSearchesStorageKey
+      "
+      :is-ascending="isAscending"
+      :sort-options="$options.sortItems"
+      :active-sort-option="activeSortItem"
+      @filter="onFilter"
+      @sort-direction-change="onSortDirectionChange"
+      @sort-by-change="onSortByChange"
+    >
+      <gl-collapsible-listbox
+        :selected="displayListboxSelected"
+        :items="$options.displayListboxItems"
+        :header-text="$options.i18n.displayListboxHeaderText"
+        block
+        toggle-class="gl-md-w-30"
+        @select="onDisplayListboxSelect"
+      />
+    </filtered-search-and-sort>
     <component
       :is="routerView"
       list-item-class="gl-px-5"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 2e9dfa1a272646..89de444f2db750 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -35512,9 +35512,6 @@ msgstr ""
 msgid "Organization|Search for an organization"
 msgstr ""
 
-msgid "Organization|Search or filter list"
-msgstr ""
-
 msgid "Organization|Select an organization"
 msgstr ""
 
@@ -45070,6 +45067,9 @@ msgstr ""
 msgid "Search or filter commits"
 msgstr ""
 
+msgid "Search or filter list"
+msgstr ""
+
 msgid "Search or filter results…"
 msgstr ""
 
diff --git a/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js b/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js
new file mode 100644
index 00000000000000..a87fa745c8b8b5
--- /dev/null
+++ b/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js
@@ -0,0 +1,103 @@
+import { GlSorting } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
+import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+
+describe('FilteredSearchAndSort', () => {
+  let wrapper;
+
+  const defaultPropsData = {
+    activeSortOption: { value: 'updated_at', text: 'Updated' },
+    filteredSearchNamespace: 'organization_groups_and_projects',
+    filteredSearchQuery: { display: 'projects', sort_name: 'updated_at', sort_direction: 'asc' },
+    filteredSearchRecentSearchesStorageKey: 'organization_groups_and_projects',
+    filteredSearchTermKey: 'search',
+    filteredSearchTokens: [],
+    isAscending: true,
+    sortOptions: [
+      { value: 'name', text: 'Name' },
+      { value: 'created_at', text: 'Created' },
+      { value: 'updated_at', text: 'Updated' },
+    ],
+  };
+
+  const createComponent = ({ propsData = {}, scopedSlots = {} } = {}) => {
+    wrapper = shallowMountExtended(FilteredSearchAndSort, {
+      propsData: { ...defaultPropsData, ...propsData },
+      scopedSlots,
+    });
+  };
+
+  const findFilteredSearchAndSortRoot = () => wrapper.findComponent(FilteredSearchBarRoot);
+  const findGlSorting = () => wrapper.findComponent(GlSorting);
+
+  it('renders `FilteredSearchBarRoot` and passes correct props', () => {
+    createComponent();
+
+    expect(findFilteredSearchAndSortRoot().props()).toMatchObject({
+      namespace: defaultPropsData.filteredSearchNamespace,
+      tokens: defaultPropsData.filteredSearchTokens,
+      initialFilterValue: [{ type: 'filtered-search-term', value: { data: '' } }],
+      syncFilterAndSort: true,
+      recentSearchesStorageKey: defaultPropsData.filteredSearchRecentSearchesStorageKey,
+      searchInputPlaceholder: 'Search or filter list',
+    });
+  });
+
+  it('renders `GlSorting` and passes correct props', () => {
+    createComponent();
+
+    expect(findGlSorting().props()).toMatchObject({
+      dropdownClass: 'gl-w-full',
+      block: true,
+      text: defaultPropsData.activeSortOption.text,
+      isAscending: defaultPropsData.isAscending,
+      sortOptions: defaultPropsData.sortOptions,
+      sortBy: defaultPropsData.activeSortOption.value,
+    });
+  });
+
+  it('renders default slot', () => {
+    createComponent({ scopedSlots: { default: '<div data-testid="default-slot"></div>' } });
+
+    expect(wrapper.findByTestId('default-slot').exists()).toBe(true);
+  });
+
+  describe('when `FilteredSearchBarRoot` emits `onFilter` event', () => {
+    beforeEach(() => {
+      createComponent();
+
+      findFilteredSearchAndSortRoot().vm.$emit('onFilter', [
+        { type: 'filtered-search-term', value: { data: 'foo bar' } },
+      ]);
+    });
+
+    it('emits `filter` event with payload transformed to a query object', () => {
+      expect(wrapper.emitted('filter')).toEqual([[{ search: 'foo bar' }]]);
+    });
+  });
+
+  describe('when `GlSorting` emits `sortDirectionChange` event', () => {
+    beforeEach(() => {
+      createComponent();
+
+      findGlSorting().vm.$emit('sortDirectionChange', true);
+    });
+
+    it('emits `sort-direction-change` event', () => {
+      expect(wrapper.emitted('sort-direction-change')).toEqual([[true]]);
+    });
+  });
+
+  describe('when `GlSorting` emits `sortByChange` event', () => {
+    beforeEach(() => {
+      createComponent();
+
+      findGlSorting().vm.$emit('sortByChange', defaultPropsData.sortOptions[1].value);
+    });
+
+    it('emits `sort-by-change` event', () => {
+      expect(wrapper.emitted('sort-by-change')).toEqual([[defaultPropsData.sortOptions[1].value]]);
+    });
+  });
+});
diff --git a/spec/frontend/organizations/groups_and_projects/components/app_spec.js b/spec/frontend/organizations/groups_and_projects/components/app_spec.js
index 1f6a153a9e1bc6..cc8df14a350cf8 100644
--- a/spec/frontend/organizations/groups_and_projects/components/app_spec.js
+++ b/spec/frontend/organizations/groups_and_projects/components/app_spec.js
@@ -1,22 +1,17 @@
-import { GlCollapsibleListbox, GlSorting } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import App from '~/organizations/groups_and_projects/components/app.vue';
 import GroupsView from '~/organizations/shared/components/groups_view.vue';
 import ProjectsView from '~/organizations/shared/components/projects_view.vue';
 import NewGroupButton from '~/organizations/shared/components/new_group_button.vue';
 import NewProjectButton from '~/organizations/shared/components/new_project_button.vue';
 import { RESOURCE_TYPE_GROUPS, RESOURCE_TYPE_PROJECTS } from '~/organizations/constants';
-import { SORT_ITEMS } from '~/organizations/groups_and_projects/constants';
 import {
   SORT_ITEM_NAME,
   SORT_ITEM_CREATED_AT,
   SORT_DIRECTION_DESC,
   SORT_DIRECTION_ASC,
 } from '~/organizations/shared/constants';
-import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
-import {
-  FILTERED_SEARCH_TERM,
-  TOKEN_EMPTY_SEARCH_TERM,
-} from '~/vue_shared/components/filtered_search_bar/constants';
+import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
 import { createRouter } from '~/organizations/groups_and_projects';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
@@ -38,9 +33,8 @@ describe('GroupsAndProjectsApp', () => {
   };
 
   const findPageTitle = () => wrapper.findByText('Groups and projects');
-  const findFilteredSearchBar = () => wrapper.findComponent(FilteredSearchBar);
+  const findFilteredSearchAndSort = () => wrapper.findComponent(FilteredSearchAndSort);
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
-  const findSort = () => wrapper.findComponent(GlSorting);
   const findProjectsView = () => wrapper.findComponent(ProjectsView);
   const findNewGroupButton = () => wrapper.findComponent(NewGroupButton);
   const findNewProjectButton = () => wrapper.findComponent(NewProjectButton);
@@ -94,21 +88,19 @@ describe('GroupsAndProjectsApp', () => {
   it('renders filtered search bar with correct props', () => {
     createComponent();
 
-    expect(findFilteredSearchBar().props()).toMatchObject({
-      namespace: App.filteredSearch.namespace,
-      tokens: App.filteredSearch.tokens,
-      initialFilterValue: [
-        {
-          type: FILTERED_SEARCH_TERM,
-          value: {
-            data: 'foo',
-            operator: undefined,
-          },
-        },
+    expect(findFilteredSearchAndSort().props()).toMatchObject({
+      filteredSearchTokens: [],
+      filteredSearchQuery: { search: 'foo' },
+      filteredSearchTermKey: 'search',
+      filteredSearchNamespace: 'organization_groups_and_projects',
+      filteredSearchRecentSearchesStorageKey: 'organization_groups_and_projects',
+      sortOptions: [
+        { value: 'name', text: 'Name' },
+        { value: 'created_at', text: 'Created' },
+        { value: 'updated_at', text: 'Updated' },
       ],
-      syncFilterAndSort: true,
-      recentSearchesStorageKey: App.filteredSearch.recentSearchesStorageKey,
-      searchInputPlaceholder: App.i18n.searchInputPlaceholder,
+      activeSortOption: { value: 'name', text: 'Name' },
+      isAscending: true,
     });
   });
 
@@ -126,26 +118,13 @@ describe('GroupsAndProjectsApp', () => {
     });
   });
 
-  it('renders sort dropdown with sort items and correct props', () => {
-    createComponent();
-
-    expect(findSort().props()).toMatchObject({
-      isAscending: true,
-      text: 'Name',
-      sortBy: SORT_ITEM_NAME.value,
-      sortOptions: SORT_ITEMS,
-    });
-  });
-
   describe('when filtered search bar is submitted', () => {
     const searchTerm = 'foo bar';
 
     beforeEach(() => {
       createComponent();
 
-      findFilteredSearchBar().vm.$emit('onFilter', [
-        { id: 'token-0', type: FILTERED_SEARCH_TERM, value: { data: searchTerm } },
-      ]);
+      findFilteredSearchAndSort().vm.$emit('filter', { search: searchTerm });
     });
 
     it('updates `search` query string', () => {
@@ -176,7 +155,7 @@ describe('GroupsAndProjectsApp', () => {
         },
       });
 
-      findSort().vm.$emit('sortByChange', SORT_ITEM_CREATED_AT.value);
+      findFilteredSearchAndSort().vm.$emit('sort-by-change', SORT_ITEM_CREATED_AT.value);
     });
 
     it('updates `sort_name` query string', () => {
@@ -201,7 +180,7 @@ describe('GroupsAndProjectsApp', () => {
         },
       });
 
-      findSort().vm.$emit('sortDirectionChange', false);
+      findFilteredSearchAndSort().vm.$emit('sort-direction-change', false);
     });
 
     it('updates `sort_direction` query string', () => {
@@ -220,10 +199,8 @@ describe('GroupsAndProjectsApp', () => {
       createComponent({ routeQuery: {} });
     });
 
-    it('passes empty search term token to filtered search', () => {
-      expect(findFilteredSearchBar().props('initialFilterValue')).toEqual([
-        TOKEN_EMPTY_SEARCH_TERM,
-      ]);
+    it('passes empty search query to `FilteredSearchAndSort`', () => {
+      expect(findFilteredSearchAndSort().props('filteredSearchQuery')).toEqual({});
     });
   });
 
-- 
GitLab


From dfe4ef02848c13b726ae36d7b8f58bd9259d7478 Mon Sep 17 00:00:00 2001
From: Peter Hegman <phegman@gitlab.com>
Date: Mon, 1 Apr 2024 14:14:40 -0700
Subject: [PATCH 2/2] Refactor to use constants

In app code and specs, per frontend maintainer feedback
---
 .../recent_searches_storage_keys.js           |  5 ++
 .../components/filtered_search_and_sort.vue   | 11 ++-
 .../groups_and_projects/components/app.vue    | 46 ++++++++---
 .../groups_and_projects/constants.js          |  1 +
 .../filtered_search_bar_root.vue              |  7 +-
 locale/gitlab.pot                             |  3 -
 .../filtered_search_and_sort_spec.js          | 35 ++++----
 .../components/app_spec.js                    | 82 +++++++++++++------
 .../filtered_search_bar_root_spec.js          | 17 ++++
 9 files changed, 148 insertions(+), 59 deletions(-)

diff --git a/app/assets/javascripts/filtered_search/recent_searches_storage_keys.js b/app/assets/javascripts/filtered_search/recent_searches_storage_keys.js
index 446a0e5eb245cf..00700df72f8482 100644
--- a/app/assets/javascripts/filtered_search/recent_searches_storage_keys.js
+++ b/app/assets/javascripts/filtered_search/recent_searches_storage_keys.js
@@ -1,3 +1,6 @@
+export const RECENT_SEARCHES_STORAGE_KEY_GROUPS = 'groups';
+export const RECENT_SEARCHES_STORAGE_KEY_PROJECTS = 'projects';
+
 export default {
   issues: 'issue-recent-searches',
   merge_requests: 'merge-request-recent-searches',
@@ -5,4 +8,6 @@ export default {
   group_invited_members: 'group-invited-members-recent-searches',
   project_members: 'project-members-recent-searches',
   project_group_links: 'project-group-links-recent-searches',
+  [RECENT_SEARCHES_STORAGE_KEY_GROUPS]: 'groups-recent-searches',
+  [RECENT_SEARCHES_STORAGE_KEY_PROJECTS]: 'projects-recent-searches',
 };
diff --git a/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue b/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
index 297f3678679851..c2a950ca222a26 100644
--- a/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
+++ b/app/assets/javascripts/groups_projects/components/filtered_search_and_sort.vue
@@ -2,6 +2,10 @@
 import { GlSorting } from '@gitlab/ui';
 import { __ } from '~/locale';
 import FilteredSearchBar from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import {
+  RECENT_SEARCHES_STORAGE_KEY_GROUPS,
+  RECENT_SEARCHES_STORAGE_KEY_PROJECTS,
+} from '~/filtered_search/recent_searches_storage_keys';
 import {
   filterToQueryObject,
   processFilters,
@@ -15,7 +19,7 @@ import {
 
 export default {
   i18n: {
-    searchInputPlaceholder: __('Search or filter list'),
+    searchInputPlaceholder: __('Search or filter results…'),
   },
   components: {
     FilteredSearchBar,
@@ -52,6 +56,11 @@ export default {
     filteredSearchRecentSearchesStorageKey: {
       type: String,
       required: true,
+      validator(value) {
+        return [RECENT_SEARCHES_STORAGE_KEY_GROUPS, RECENT_SEARCHES_STORAGE_KEY_PROJECTS].includes(
+          value,
+        );
+      },
     },
     sortOptions: {
       type: Array,
diff --git a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
index 79e61e89af0439..47a6b269d9eb73 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
+++ b/app/assets/javascripts/organizations/groups_and_projects/components/app.vue
@@ -16,7 +16,16 @@ import {
   SORT_ITEM_NAME,
 } from '~/organizations/shared/constants';
 import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
-import { DISPLAY_LISTBOX_ITEMS, SORT_ITEMS, FILTERED_SEARCH_TERM_KEY } from '../constants';
+import {
+  RECENT_SEARCHES_STORAGE_KEY_GROUPS,
+  RECENT_SEARCHES_STORAGE_KEY_PROJECTS,
+} from '~/filtered_search/recent_searches_storage_keys';
+import {
+  DISPLAY_LISTBOX_ITEMS,
+  SORT_ITEMS,
+  FILTERED_SEARCH_TERM_KEY,
+  FILTERED_SEARCH_NAMESPACE,
+} from '../constants';
 
 export default {
   i18n: {
@@ -31,17 +40,19 @@ export default {
   },
   filteredSearch: {
     tokens: [],
-    namespace: 'organization_groups_and_projects',
-    recentSearchesStorageKey: 'organization_groups_and_projects',
+    namespace: FILTERED_SEARCH_NAMESPACE,
+    searchTermKey: FILTERED_SEARCH_TERM_KEY,
   },
   displayListboxItems: DISPLAY_LISTBOX_ITEMS,
   sortItems: SORT_ITEMS,
-  filteredSearchTermKey: FILTERED_SEARCH_TERM_KEY,
   computed: {
-    routerView() {
+    displayQuery() {
       const { display } = this.$route.query;
 
-      switch (display) {
+      return display;
+    },
+    routerView() {
+      switch (this.displayQuery) {
         case RESOURCE_TYPE_GROUPS:
           return GroupsView;
 
@@ -52,8 +63,23 @@ export default {
           return GroupsView;
       }
     },
+    filteredSearchRecentSearchesStorageKey() {
+      switch (this.displayQuery) {
+        case RESOURCE_TYPE_GROUPS:
+          return RECENT_SEARCHES_STORAGE_KEY_GROUPS;
+
+        case RESOURCE_TYPE_PROJECTS:
+          return RECENT_SEARCHES_STORAGE_KEY_PROJECTS;
+
+        default:
+          return RECENT_SEARCHES_STORAGE_KEY_GROUPS;
+      }
+    },
     activeSortItem() {
-      return this.$options.sortItems.find((sortItem) => sortItem.value === this.sortName);
+      return (
+        this.$options.sortItems.find((sortItem) => sortItem.value === this.sortName) ||
+        SORT_ITEM_NAME
+      );
     },
     sortName() {
       return this.$route.query.sort_name || SORT_ITEM_NAME.value;
@@ -150,11 +176,9 @@ export default {
     <filtered-search-and-sort
       :filtered-search-namespace="$options.filteredSearch.namespace"
       :filtered-search-tokens="$options.filteredSearch.tokens"
+      :filtered-search-term-key="$options.filteredSearch.searchTermKey"
       :filtered-search-query="$route.query"
-      :filtered-search-term-key="$options.filteredSearchTermKey"
-      :filtered-search-recent-searches-storage-key="
-        $options.filteredSearch.recentSearchesStorageKey
-      "
+      :filtered-search-recent-searches-storage-key="filteredSearchRecentSearchesStorageKey"
       :is-ascending="isAscending"
       :sort-options="$options.sortItems"
       :active-sort-option="activeSortItem"
diff --git a/app/assets/javascripts/organizations/groups_and_projects/constants.js b/app/assets/javascripts/organizations/groups_and_projects/constants.js
index 24868658e2ee7d..de1cb4b6f4fda5 100644
--- a/app/assets/javascripts/organizations/groups_and_projects/constants.js
+++ b/app/assets/javascripts/organizations/groups_and_projects/constants.js
@@ -5,6 +5,7 @@ export const DISPLAY_QUERY_GROUPS = 'groups';
 export const DISPLAY_QUERY_PROJECTS = 'projects';
 
 export const FILTERED_SEARCH_TERM_KEY = 'search';
+export const FILTERED_SEARCH_NAMESPACE = 'organization';
 
 export const DISPLAY_LISTBOX_ITEMS = [
   {
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
index 364ba10e888b6e..0cead1cb0cc1a2 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue
@@ -176,9 +176,10 @@ export default {
         this.updateSelectedSortValues();
       }
     },
-  },
-  created() {
-    if (this.recentSearchesStorageKey) this.setupRecentSearch();
+    recentSearchesStorageKey: {
+      handler: 'setupRecentSearch',
+      immediate: true,
+    },
   },
   methods: {
     /**
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 89de444f2db750..38f9ac6d5d9b35 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -45067,9 +45067,6 @@ msgstr ""
 msgid "Search or filter commits"
 msgstr ""
 
-msgid "Search or filter list"
-msgstr ""
-
 msgid "Search or filter results…"
 msgstr ""
 
diff --git a/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js b/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js
index a87fa745c8b8b5..730f3fb15c6dba 100644
--- a/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js
+++ b/spec/frontend/groups_projects/components/filtered_search_and_sort_spec.js
@@ -2,23 +2,30 @@ import { GlSorting } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
 import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
+import { RECENT_SEARCHES_STORAGE_KEY_GROUPS } from '~/filtered_search/recent_searches_storage_keys';
+import {
+  SORT_ITEMS,
+  FILTERED_SEARCH_TERM_KEY,
+  FILTERED_SEARCH_NAMESPACE,
+} from '~/organizations/groups_and_projects/constants';
+import { SORT_ITEM_NAME } from '~/organizations/shared/constants';
+import {
+  FILTERED_SEARCH_TERM,
+  TOKEN_EMPTY_SEARCH_TERM,
+} from '~/vue_shared/components/filtered_search_bar/constants';
 
 describe('FilteredSearchAndSort', () => {
   let wrapper;
 
   const defaultPropsData = {
-    activeSortOption: { value: 'updated_at', text: 'Updated' },
-    filteredSearchNamespace: 'organization_groups_and_projects',
-    filteredSearchQuery: { display: 'projects', sort_name: 'updated_at', sort_direction: 'asc' },
-    filteredSearchRecentSearchesStorageKey: 'organization_groups_and_projects',
-    filteredSearchTermKey: 'search',
+    activeSortOption: SORT_ITEM_NAME,
+    filteredSearchNamespace: FILTERED_SEARCH_NAMESPACE,
+    filteredSearchQuery: {},
+    filteredSearchRecentSearchesStorageKey: RECENT_SEARCHES_STORAGE_KEY_GROUPS,
+    filteredSearchTermKey: FILTERED_SEARCH_TERM_KEY,
     filteredSearchTokens: [],
     isAscending: true,
-    sortOptions: [
-      { value: 'name', text: 'Name' },
-      { value: 'created_at', text: 'Created' },
-      { value: 'updated_at', text: 'Updated' },
-    ],
+    sortOptions: SORT_ITEMS,
   };
 
   const createComponent = ({ propsData = {}, scopedSlots = {} } = {}) => {
@@ -37,10 +44,10 @@ describe('FilteredSearchAndSort', () => {
     expect(findFilteredSearchAndSortRoot().props()).toMatchObject({
       namespace: defaultPropsData.filteredSearchNamespace,
       tokens: defaultPropsData.filteredSearchTokens,
-      initialFilterValue: [{ type: 'filtered-search-term', value: { data: '' } }],
+      initialFilterValue: [TOKEN_EMPTY_SEARCH_TERM],
       syncFilterAndSort: true,
       recentSearchesStorageKey: defaultPropsData.filteredSearchRecentSearchesStorageKey,
-      searchInputPlaceholder: 'Search or filter list',
+      searchInputPlaceholder: 'Search or filter results…',
     });
   });
 
@@ -68,12 +75,12 @@ describe('FilteredSearchAndSort', () => {
       createComponent();
 
       findFilteredSearchAndSortRoot().vm.$emit('onFilter', [
-        { type: 'filtered-search-term', value: { data: 'foo bar' } },
+        { type: FILTERED_SEARCH_TERM, value: { data: 'foo bar' } },
       ]);
     });
 
     it('emits `filter` event with payload transformed to a query object', () => {
-      expect(wrapper.emitted('filter')).toEqual([[{ search: 'foo bar' }]]);
+      expect(wrapper.emitted('filter')).toEqual([[{ [FILTERED_SEARCH_TERM_KEY]: 'foo bar' }]]);
     });
   });
 
diff --git a/spec/frontend/organizations/groups_and_projects/components/app_spec.js b/spec/frontend/organizations/groups_and_projects/components/app_spec.js
index cc8df14a350cf8..99015bb5edf129 100644
--- a/spec/frontend/organizations/groups_and_projects/components/app_spec.js
+++ b/spec/frontend/organizations/groups_and_projects/components/app_spec.js
@@ -11,6 +11,15 @@ import {
   SORT_DIRECTION_DESC,
   SORT_DIRECTION_ASC,
 } from '~/organizations/shared/constants';
+import {
+  SORT_ITEMS,
+  FILTERED_SEARCH_TERM_KEY,
+  FILTERED_SEARCH_NAMESPACE,
+} from '~/organizations/groups_and_projects/constants';
+import {
+  RECENT_SEARCHES_STORAGE_KEY_GROUPS,
+  RECENT_SEARCHES_STORAGE_KEY_PROJECTS,
+} from '~/filtered_search/recent_searches_storage_keys';
 import FilteredSearchAndSort from '~/groups_projects/components/filtered_search_and_sort.vue';
 import { createRouter } from '~/organizations/groups_and_projects';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
@@ -25,7 +34,7 @@ describe('GroupsAndProjectsApp', () => {
 
   let wrapper;
 
-  const createComponent = ({ routeQuery = { search: 'foo' } } = {}) => {
+  const createComponent = ({ routeQuery = { [FILTERED_SEARCH_TERM_KEY]: 'foo' } } = {}) => {
     wrapper = shallowMountExtended(App, {
       router,
       mocks: { $route: { path: '/', query: routeQuery }, $router: routerMock },
@@ -46,19 +55,24 @@ describe('GroupsAndProjectsApp', () => {
   });
 
   describe.each`
-    display                   | expectedComponent | expectedDisplayListboxSelectedProp
-    ${null}                   | ${GroupsView}     | ${RESOURCE_TYPE_GROUPS}
-    ${'unsupported_value'}    | ${GroupsView}     | ${RESOURCE_TYPE_GROUPS}
-    ${RESOURCE_TYPE_GROUPS}   | ${GroupsView}     | ${RESOURCE_TYPE_GROUPS}
-    ${RESOURCE_TYPE_PROJECTS} | ${ProjectsView}   | ${RESOURCE_TYPE_PROJECTS}
+    display                   | expectedComponent | expectedDisplayListboxSelectedProp | expectedRecentSearchesStorageKey
+    ${null}                   | ${GroupsView}     | ${RESOURCE_TYPE_GROUPS}            | ${RECENT_SEARCHES_STORAGE_KEY_GROUPS}
+    ${'unsupported_value'}    | ${GroupsView}     | ${RESOURCE_TYPE_GROUPS}            | ${RECENT_SEARCHES_STORAGE_KEY_GROUPS}
+    ${RESOURCE_TYPE_GROUPS}   | ${GroupsView}     | ${RESOURCE_TYPE_GROUPS}            | ${RECENT_SEARCHES_STORAGE_KEY_GROUPS}
+    ${RESOURCE_TYPE_PROJECTS} | ${ProjectsView}   | ${RESOURCE_TYPE_PROJECTS}          | ${RECENT_SEARCHES_STORAGE_KEY_PROJECTS}
   `(
     'when `display` query string is $display',
-    ({ display, expectedComponent, expectedDisplayListboxSelectedProp }) => {
+    ({
+      display,
+      expectedComponent,
+      expectedDisplayListboxSelectedProp,
+      expectedRecentSearchesStorageKey,
+    }) => {
       beforeEach(() => {
         createComponent({
           routeQuery: {
             display,
-            search: 'foo',
+            [FILTERED_SEARCH_TERM_KEY]: 'foo',
             start_cursor: mockStartCursor,
             end_cursor: mockEndCursor,
           },
@@ -69,7 +83,7 @@ describe('GroupsAndProjectsApp', () => {
         expect(wrapper.findComponent(expectedComponent).props()).toMatchObject({
           startCursor: mockStartCursor,
           endCursor: mockEndCursor,
-          search: 'foo',
+          [FILTERED_SEARCH_TERM_KEY]: 'foo',
           sortName: SORT_ITEM_NAME.value,
           sortDirection: SORT_DIRECTION_ASC,
         });
@@ -82,6 +96,12 @@ describe('GroupsAndProjectsApp', () => {
           headerText: App.i18n.displayListboxHeaderText,
         });
       });
+
+      it('renders filtered search bar with correct `filteredSearchRecentSearchesStorageKey` prop', () => {
+        expect(findFilteredSearchAndSort().props('filteredSearchRecentSearchesStorageKey')).toBe(
+          expectedRecentSearchesStorageKey,
+        );
+      });
     },
   );
 
@@ -90,20 +110,26 @@ describe('GroupsAndProjectsApp', () => {
 
     expect(findFilteredSearchAndSort().props()).toMatchObject({
       filteredSearchTokens: [],
-      filteredSearchQuery: { search: 'foo' },
-      filteredSearchTermKey: 'search',
-      filteredSearchNamespace: 'organization_groups_and_projects',
-      filteredSearchRecentSearchesStorageKey: 'organization_groups_and_projects',
-      sortOptions: [
-        { value: 'name', text: 'Name' },
-        { value: 'created_at', text: 'Created' },
-        { value: 'updated_at', text: 'Updated' },
-      ],
-      activeSortOption: { value: 'name', text: 'Name' },
+      filteredSearchQuery: { [FILTERED_SEARCH_TERM_KEY]: 'foo' },
+      filteredSearchTermKey: FILTERED_SEARCH_TERM_KEY,
+      filteredSearchNamespace: FILTERED_SEARCH_NAMESPACE,
+      filteredSearchRecentSearchesStorageKey: RECENT_SEARCHES_STORAGE_KEY_GROUPS,
+      sortOptions: SORT_ITEMS,
+      activeSortOption: SORT_ITEM_NAME,
       isAscending: true,
     });
   });
 
+  describe('when `sort_name` query string is not a valid sort option', () => {
+    beforeEach(() => {
+      createComponent({ routeQuery: { sort_name: 'foo-bar' } });
+    });
+
+    it('defaults to sorting by name', () => {
+      expect(findFilteredSearchAndSort().props('activeSortOption')).toEqual(SORT_ITEM_NAME);
+    });
+  });
+
   describe('actions', () => {
     beforeEach(() => {
       createComponent();
@@ -124,11 +150,13 @@ describe('GroupsAndProjectsApp', () => {
     beforeEach(() => {
       createComponent();
 
-      findFilteredSearchAndSort().vm.$emit('filter', { search: searchTerm });
+      findFilteredSearchAndSort().vm.$emit('filter', { [FILTERED_SEARCH_TERM_KEY]: searchTerm });
     });
 
-    it('updates `search` query string', () => {
-      expect(routerMock.push).toHaveBeenCalledWith({ query: { search: searchTerm } });
+    it(`updates \`${FILTERED_SEARCH_TERM_KEY}\` query string`, () => {
+      expect(routerMock.push).toHaveBeenCalledWith({
+        query: { [FILTERED_SEARCH_TERM_KEY]: searchTerm },
+      });
     });
   });
 
@@ -151,7 +179,7 @@ describe('GroupsAndProjectsApp', () => {
           display: RESOURCE_TYPE_PROJECTS,
           start_cursor: mockStartCursor,
           end_cursor: mockEndCursor,
-          search: 'foo',
+          [FILTERED_SEARCH_TERM_KEY]: 'foo',
         },
       });
 
@@ -163,7 +191,7 @@ describe('GroupsAndProjectsApp', () => {
         query: {
           display: RESOURCE_TYPE_PROJECTS,
           sort_name: SORT_ITEM_CREATED_AT.value,
-          search: 'foo',
+          [FILTERED_SEARCH_TERM_KEY]: 'foo',
         },
       });
     });
@@ -176,7 +204,7 @@ describe('GroupsAndProjectsApp', () => {
           display: RESOURCE_TYPE_PROJECTS,
           start_cursor: mockStartCursor,
           end_cursor: mockEndCursor,
-          search: 'foo',
+          [FILTERED_SEARCH_TERM_KEY]: 'foo',
         },
       });
 
@@ -188,13 +216,13 @@ describe('GroupsAndProjectsApp', () => {
         query: {
           display: RESOURCE_TYPE_PROJECTS,
           sort_direction: SORT_DIRECTION_DESC,
-          search: 'foo',
+          [FILTERED_SEARCH_TERM_KEY]: 'foo',
         },
       });
     });
   });
 
-  describe('when `search` query string is not set', () => {
+  describe(`when \`${FILTERED_SEARCH_TERM_KEY}\` query string is not set`, () => {
     beforeEach(() => {
       createComponent({ routeQuery: {} });
     });
diff --git a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
index ec7fb134636b66..07769b6057f1ea 100644
--- a/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
+++ b/spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js
@@ -14,6 +14,7 @@ import {
 } from '~/vue_shared/components/filtered_search_bar/constants';
 import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import { uniqueTokens } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';
+import { RECENT_SEARCHES_STORAGE_KEY_GROUPS } from '~/filtered_search/recent_searches_storage_keys';
 
 import {
   mockAvailableTokens,
@@ -209,6 +210,22 @@ describe('FilteredSearchBarRoot', () => {
         expect(localStorage.setItem).toHaveBeenCalledWith('canUseLocalStorage', 'true');
         expect(wrapper.vm.recentSearchesPromise instanceof Promise).toBe(true);
       });
+
+      describe('when `recentSearchesStorageKey` is changed', () => {
+        it('gets new items from local storage', async () => {
+          createComponent();
+
+          expect(localStorage.getItem).toHaveBeenCalledWith(
+            'gitlab-org/gitlab-test-issue-recent-searches',
+          );
+
+          await wrapper.setProps({ recentSearchesStorageKey: RECENT_SEARCHES_STORAGE_KEY_GROUPS });
+
+          expect(localStorage.getItem).toHaveBeenCalledWith(
+            'gitlab-org/gitlab-test-groups-recent-searches',
+          );
+        });
+      });
     });
 
     describe('removeQuotesEnclosure', () => {
-- 
GitLab