From 8de54cc86bc9ca86f550218e8090842264c9fa99 Mon Sep 17 00:00:00 2001
From: Shane Maglangit <smaglangit@gitlab.com>
Date: Wed, 22 Oct 2025 16:43:59 +0800
Subject: [PATCH] Support filtered search on data management page

---
 .../admin/data_management/components/app.vue  | 101 +++++++++++++-----
 .../admin/data_management/constants.js        |  43 ++++++++
 .../admin/data_management/filters.js          |  35 ++++--
 .../admin/data_management/index.js            |   2 +
 .../javascripts/api/data_management_api.js    |   4 +-
 .../data_management/components/app_spec.js    |  79 +++++++++++++-
 .../admin/data_management/filters_spec.js     |  62 ++++++++++-
 .../frontend/api/data_management_api_spec.js  |  12 +++
 locale/gitlab.pot                             |   3 +
 9 files changed, 299 insertions(+), 42 deletions(-)

diff --git a/ee/app/assets/javascripts/admin/data_management/components/app.vue b/ee/app/assets/javascripts/admin/data_management/components/app.vue
index 53c83fd508a18f..d25c5f9e88b116 100644
--- a/ee/app/assets/javascripts/admin/data_management/components/app.vue
+++ b/ee/app/assets/javascripts/admin/data_management/components/app.vue
@@ -1,17 +1,20 @@
 <script>
+import { debounce } from 'lodash';
 import GeoListTopBar from 'ee/geo_shared/list/components/geo_list_top_bar.vue';
 import GeoList from 'ee/geo_shared/list/components/geo_list.vue';
-import { sprintf, s__ } from '~/locale';
+import { sprintf, s__, __ } from '~/locale';
 import {
+  CHECKSUM_STATES_ARRAY,
   DEFAULT_SORT,
   GEO_TROUBLESHOOTING_LINK,
   TOKEN_TYPES,
 } from 'ee/admin/data_management/constants';
-import { processFilters } from 'ee/admin/data_management/filters';
-import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
+import { isValidFilter, processFilters } from 'ee/admin/data_management/filters';
+import { queryToObject, setUrlParams, updateHistory, visitUrl } from '~/lib/utils/url_utility';
 import { createAlert } from '~/alert';
 import { getModels } from 'ee/api/data_management_api';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 
 export default {
   name: 'AdminDataManagementApp',
@@ -29,54 +32,100 @@ export default {
     return {
       isLoading: false,
       modelItems: [],
+      filters: [],
     };
   },
   computed: {
     hasItems() {
       return Boolean(this.modelItems.length);
     },
+    emptyStateTitle() {
+      return this.filters.length
+        ? __('No results found')
+        : sprintf(s__('Geo|No %{itemTitle} exist'), {
+            itemTitle: this.modelClass.titlePlural.toLowerCase(),
+          });
+    },
+    emptyStateDescription() {
+      return this.filters.length
+        ? __('Edit your search filter and try again.')
+        : s__(
+            'Geo|If you believe this is an error, see the %{linkStart}Geo troubleshooting%{linkEnd} documentation.',
+          );
+    },
     emptyState() {
       return {
-        title: sprintf(s__('Geo|No %{itemTitle} exist'), {
-          itemTitle: this.modelClass.titlePlural.toLowerCase(),
-        }),
-        description: s__(
-          'Geo|If you believe this is an error, see the %{linkStart}Geo troubleshooting%{linkEnd} documentation.',
-        ),
+        title: this.emptyStateTitle,
+        description: this.emptyStateDescription,
         helpLink: GEO_TROUBLESHOOTING_LINK,
       };
     },
   },
   created() {
-    this.getModelList();
+    this.initializeFilters();
+    this.fetchModelList();
   },
   methods: {
-    async getModelList() {
+    initializeFilters() {
+      const filters = [];
+      const { checksum_state: checksumState, identifiers } = queryToObject(
+        window.location.search || '',
+        { gatherArrays: true },
+      );
+
+      if (identifiers) {
+        filters.push(identifiers.join(' '));
+      }
+
+      if (isValidFilter(checksumState, CHECKSUM_STATES_ARRAY)) {
+        filters.push({ type: TOKEN_TYPES.CHECKSUM_STATE, value: { data: checksumState } });
+      }
+
+      this.filters = filters;
+    },
+    fetchModelList: debounce(async function fetchModelList() {
       this.isLoading = true;
 
       try {
-        const { data } = await getModels(this.modelClass.name);
+        const { query } = processFilters(this.filters);
+        const { data } = await getModels(this.modelClass.name, query);
+
         this.modelItems = convertObjectPropsToCamelCase(data, { deep: true });
       } catch (error) {
-        createAlert({
-          message: sprintf(
-            s__('Geo|There was an error fetching %{model}. Please refresh the page and try again.'),
-            {
-              model: this.modelClass.titlePlural.toLowerCase(),
-            },
-          ),
-          captureError: true,
-          error,
-        });
+        this.handleFetchError(error);
       } finally {
         this.isLoading = false;
       }
+    }, DEFAULT_DEBOUNCE_AND_THROTTLE_MS),
+    handleFetchError(error) {
+      createAlert({
+        message: sprintf(
+          s__('Geo|There was an error fetching %{model}. Please refresh the page and try again.'),
+          { model: this.modelClass.titlePlural.toLowerCase() },
+        ),
+        captureError: true,
+        error,
+      });
+    },
+    handleListboxChange(model) {
+      this.updateUrl({ model, redirect: true });
     },
-    handleListboxChange(value) {
-      const filters = [{ type: TOKEN_TYPES.MODEL, value }];
+    handleSearch(filters) {
+      this.filters = filters;
+      this.updateUrl({ model: this.modelClass.name, redirect: false });
+    },
+    updateUrl({ model, redirect }) {
+      const filters = [{ type: TOKEN_TYPES.MODEL, value: model }, ...this.filters];
       const { query, url } = processFilters(filters);
 
-      visitUrl(setUrlParams(query, url.href, true));
+      const urlWithParams = setUrlParams(query, url.href, true, true);
+
+      if (redirect) {
+        visitUrl(urlWithParams);
+      } else {
+        updateHistory({ url: urlWithParams });
+        this.fetchModelList();
+      }
     },
   },
   defaultSort: DEFAULT_SORT,
@@ -86,6 +135,7 @@ export default {
 <template>
   <div>
     <geo-list-top-bar
+      :active-filtered-search-filters="filters"
       :page-heading-title="__('Data management')"
       :page-heading-description="
         s__('Geo|Review stored data and data health within your instance.')
@@ -94,6 +144,7 @@ export default {
       :active-listbox-item="modelClass.name"
       :active-sort="$options.defaultSort"
       @listboxChange="handleListboxChange"
+      @search="handleSearch"
     />
     <geo-list :is-loading="isLoading" :has-items="hasItems" :empty-state="emptyState">
       <ul>
diff --git a/ee/app/assets/javascripts/admin/data_management/constants.js b/ee/app/assets/javascripts/admin/data_management/constants.js
index 608952f823e8d6..e77480741d16fe 100644
--- a/ee/app/assets/javascripts/admin/data_management/constants.js
+++ b/ee/app/assets/javascripts/admin/data_management/constants.js
@@ -1,15 +1,58 @@
+import { GlFilteredSearchToken } from '@gitlab/ui';
 import { SORT_DIRECTION } from 'ee/geo_shared/constants';
 import { s__ } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
 
 export const GEO_TROUBLESHOOTING_LINK = helpPagePath(
   'administration/geo/replication/troubleshooting/_index.md',
 );
 
 export const TOKEN_TYPES = {
+  IDENTIFIERS: 'identifiers',
   MODEL: 'model_name',
+  CHECKSUM_STATE: 'checksum_state',
 };
 
+export const CHECKSUM_STATES_ARRAY = [
+  {
+    title: s__('Geo|Pending'),
+    value: 'pending',
+  },
+  {
+    title: s__('Geo|Started'),
+    value: 'started',
+  },
+  {
+    title: s__('Geo|Succeeded'),
+    value: 'succeeded',
+  },
+  {
+    title: s__('Geo|Failed'),
+    value: 'failed',
+  },
+  {
+    title: s__('Geo|Disabled'),
+    value: 'disabled',
+  },
+  {
+    title: s__('Geo|Unknown'),
+    value: null,
+  },
+];
+
+export const FILTERED_SEARCH_TOKEN_OPTIONS = [
+  {
+    title: s__('Geo|Checksum status'),
+    type: TOKEN_TYPES.CHECKSUM_STATE,
+    icon: 'check-circle',
+    token: GlFilteredSearchToken,
+    operators: OPERATORS_IS,
+    unique: true,
+    options: CHECKSUM_STATES_ARRAY,
+  },
+];
+
 const SORT_OPTIONS = {
   ID: {
     text: s__('Geo|Model ID'),
diff --git a/ee/app/assets/javascripts/admin/data_management/filters.js b/ee/app/assets/javascripts/admin/data_management/filters.js
index 3f6e92bc60b704..3637424423c8b0 100644
--- a/ee/app/assets/javascripts/admin/data_management/filters.js
+++ b/ee/app/assets/javascripts/admin/data_management/filters.js
@@ -7,16 +7,39 @@ export const formatListboxItems = (items) => {
   }));
 };
 
+export const isValidFilter = (data, array) => {
+  return Boolean(data && array?.some(({ value }) => value === data));
+};
+
+const filterProcessors = [
+  {
+    key: TOKEN_TYPES.IDENTIFIERS,
+    condition: (filter) => typeof filter === 'string',
+    transform: (filter) => filter.split(' '),
+  },
+  {
+    key: TOKEN_TYPES.MODEL,
+    condition: (filter) => filter.type === TOKEN_TYPES.MODEL,
+    transform: (filter) => filter.value,
+  },
+  {
+    key: TOKEN_TYPES.CHECKSUM_STATE,
+    condition: (filter) => filter.type === TOKEN_TYPES.CHECKSUM_STATE,
+    transform: (filter) => filter.value.data,
+  },
+];
+
 export const processFilters = (filters) => {
   // URL Structure: /admin/data_management?${FILTERS}
   const url = new URL(window.location.href);
-  const query = {};
 
-  filters.forEach(({ type, value }) => {
-    if (type === TOKEN_TYPES.MODEL) {
-      query[TOKEN_TYPES.MODEL] = value;
-    }
-  });
+  const query = filters.reduce((acc, filter) => {
+    const matchingProcessor = filterProcessors.find(({ condition }) => condition(filter));
+    if (!matchingProcessor) return acc;
+
+    const { key, transform } = matchingProcessor;
+    return { ...acc, [key]: transform(filter) };
+  }, {});
 
   return { query, url };
 };
diff --git a/ee/app/assets/javascripts/admin/data_management/index.js b/ee/app/assets/javascripts/admin/data_management/index.js
index e2eb4206b55fd2..9c06902823698d 100644
--- a/ee/app/assets/javascripts/admin/data_management/index.js
+++ b/ee/app/assets/javascripts/admin/data_management/index.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import AdminDataManagementApp from 'ee/admin/data_management/components/app.vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { formatListboxItems } from 'ee/admin/data_management/filters';
+import { FILTERED_SEARCH_TOKEN_OPTIONS } from 'ee/admin/data_management/constants';
 
 export const initAdminDataManagementApp = () => {
   const el = document.getElementById('js-admin-data-management');
@@ -18,6 +19,7 @@ export const initAdminDataManagementApp = () => {
     el,
     provide: {
       listboxItems: formatListboxItems(modelTypes),
+      filteredSearchTokens: FILTERED_SEARCH_TOKEN_OPTIONS,
     },
     render(createElement) {
       return createElement(AdminDataManagementApp, {
diff --git a/ee/app/assets/javascripts/api/data_management_api.js b/ee/app/assets/javascripts/api/data_management_api.js
index 3b664ba8a190f3..dd0a609c966392 100644
--- a/ee/app/assets/javascripts/api/data_management_api.js
+++ b/ee/app/assets/javascripts/api/data_management_api.js
@@ -3,8 +3,8 @@ import axios from '~/lib/utils/axios_utils';
 
 const DATA_MANAGEMENT_PATH = '/api/:version/admin/data_management/:model';
 
-export const getModels = (model) => {
+export const getModels = (model, params = {}) => {
   const url = buildApiUrl(DATA_MANAGEMENT_PATH).replace(':model', model);
 
-  return axios.get(url);
+  return axios.get(url, { params });
 };
diff --git a/ee/spec/frontend/admin/data_management/components/app_spec.js b/ee/spec/frontend/admin/data_management/components/app_spec.js
index 05a12d8d7d1a6c..32853706a60cb9 100644
--- a/ee/spec/frontend/admin/data_management/components/app_spec.js
+++ b/ee/spec/frontend/admin/data_management/components/app_spec.js
@@ -4,16 +4,22 @@ import AdminDataManagementApp from 'ee/admin/data_management/components/app.vue'
 import GeoListTopBar from 'ee/geo_shared/list/components/geo_list_top_bar.vue';
 import GeoList from 'ee/geo_shared/list/components/geo_list.vue';
 import { MOCK_MODEL_CLASS } from 'ee_jest/admin/data_management/mock_data';
-import { DEFAULT_SORT, GEO_TROUBLESHOOTING_LINK } from 'ee/admin/data_management/constants';
-import { visitUrl } from '~/lib/utils/url_utility';
+import {
+  TOKEN_TYPES,
+  DEFAULT_SORT,
+  GEO_TROUBLESHOOTING_LINK,
+} from 'ee/admin/data_management/constants';
+import { updateHistory, visitUrl } from '~/lib/utils/url_utility';
 import { TEST_HOST } from 'spec/test_constants';
 import { getModels } from 'ee/api/data_management_api';
 import waitForPromises from 'helpers/wait_for_promises';
 import { createAlert } from '~/alert';
+import setWindowLocation from 'helpers/set_window_location_helper';
 
 jest.mock('~/lib/utils/url_utility', () => ({
   ...jest.requireActual('~/lib/utils/url_utility'),
   visitUrl: jest.fn(),
+  updateHistory: jest.fn(),
 }));
 jest.mock('~/alert');
 jest.mock('ee/api/data_management_api');
@@ -64,10 +70,10 @@ describe('AdminDataManagementApp', () => {
   });
 
   describe('API calls', () => {
-    it('calls getModels with correct parameters on component creation', () => {
+    it('calls getModels with correct parameters', () => {
       createComponent();
 
-      expect(getModels).toHaveBeenCalledWith(MOCK_MODEL_CLASS.name);
+      expect(getModels).toHaveBeenCalledWith(MOCK_MODEL_CLASS.name, {});
     });
 
     describe('while loading model is querying', () => {
@@ -144,6 +150,34 @@ describe('AdminDataManagementApp', () => {
     });
   });
 
+  describe('when URL has params', () => {
+    beforeEach(() => {
+      const params = new URLSearchParams([
+        [`${TOKEN_TYPES.IDENTIFIERS}[]`, '123'],
+        [`${TOKEN_TYPES.IDENTIFIERS}[]`, '456'],
+        [TOKEN_TYPES.CHECKSUM_STATE, 'failed'],
+      ]);
+
+      setWindowLocation(`?${params.toString()}`);
+
+      createComponent();
+    });
+
+    it('calls getModels with correct parameters', () => {
+      expect(getModels).toHaveBeenCalledWith(MOCK_MODEL_CLASS.name, {
+        [TOKEN_TYPES.IDENTIFIERS]: ['123', '456'],
+        [TOKEN_TYPES.CHECKSUM_STATE]: 'failed',
+      });
+    });
+
+    it('passes initial filter to GeoListTopBar', () => {
+      expect(findGeoListTopBar().props('activeFilteredSearchFilters')).toMatchObject([
+        '123 456',
+        { type: TOKEN_TYPES.CHECKSUM_STATE, value: { data: 'failed' } },
+      ]);
+    });
+  });
+
   describe('when GeoListTopBar emits `listboxChange` event', () => {
     it('redirects to page with correct params', () => {
       createComponent();
@@ -153,4 +187,41 @@ describe('AdminDataManagementApp', () => {
       expect(visitUrl).toHaveBeenCalledWith(`${TEST_HOST}/?model_name=foo`);
     });
   });
+
+  describe('when GeoListTopBar emits `search` event', () => {
+    beforeEach(() => {
+      createComponent();
+
+      findGeoListTopBar().vm.$emit('search', [
+        '123 456',
+        { type: TOKEN_TYPES.CHECKSUM_STATE, value: { data: 'failed' } },
+      ]);
+    });
+
+    it('calls updateHistory with correct params', () => {
+      const params = new URLSearchParams([
+        [TOKEN_TYPES.MODEL, MOCK_MODEL_CLASS.name],
+        [`${TOKEN_TYPES.IDENTIFIERS}[]`, '123'],
+        [`${TOKEN_TYPES.IDENTIFIERS}[]`, '456'],
+        [TOKEN_TYPES.CHECKSUM_STATE, 'failed'],
+      ]);
+
+      expect(updateHistory).toHaveBeenCalledWith({
+        url: `${TEST_HOST}/?${params.toString()}`,
+      });
+    });
+
+    it('calls getModels with correct params', () => {
+      expect(getModels).toHaveBeenCalledWith(MOCK_MODEL_CLASS.name, {
+        [TOKEN_TYPES.IDENTIFIERS]: ['123', '456'],
+        [TOKEN_TYPES.CHECKSUM_STATE]: 'failed',
+      });
+    });
+
+    it('shows loading state', () => {
+      createComponent();
+
+      expect(findGeoList().props('isLoading')).toBe(true);
+    });
+  });
 });
diff --git a/ee/spec/frontend/admin/data_management/filters_spec.js b/ee/spec/frontend/admin/data_management/filters_spec.js
index 0d25076d4a510f..eba982c6d5e4e4 100644
--- a/ee/spec/frontend/admin/data_management/filters_spec.js
+++ b/ee/spec/frontend/admin/data_management/filters_spec.js
@@ -1,4 +1,8 @@
-import { formatListboxItems, processFilters } from 'ee/admin/data_management/filters';
+import {
+  formatListboxItems,
+  processFilters,
+  isValidFilter,
+} from 'ee/admin/data_management/filters';
 import { TEST_HOST } from 'spec/test_constants';
 import { TOKEN_TYPES } from 'ee/admin/data_management/constants';
 
@@ -22,14 +26,62 @@ describe('formatListboxItems', () => {
   });
 });
 
+describe('isValidFilter', () => {
+  const validStates = [
+    { value: 'verified', text: 'Verified' },
+    { value: 'failed', text: 'Failed' },
+    { value: 'pending', text: 'Pending' },
+  ];
+
+  it.each`
+    data          | array          | expected
+    ${'verified'} | ${validStates} | ${true}
+    ${'invalid'}  | ${validStates} | ${false}
+    ${null}       | ${validStates} | ${false}
+    ${undefined}  | ${validStates} | ${false}
+    ${'verified'} | ${null}        | ${false}
+    ${'verified'} | ${undefined}   | ${false}
+    ${'verified'} | ${[]}          | ${false}
+  `('returns $expected when data is $data and array is $array', ({ data, array, expected }) => {
+    expect(isValidFilter(data, array)).toBe(expected);
+  });
+});
+
 describe('processFilters', () => {
   const url = new URL(TEST_HOST);
 
   it.each`
-    filters                                          | query
-    ${[]}                                            | ${{}}
-    ${[{ type: TOKEN_TYPES.MODEL, value: 'model' }]} | ${{ model_name: 'model' }}
-  `('returns the correct { query, url }', ({ filters, query }) => {
+    filters                                                                | query
+    ${[]}                                                                  | ${{}}
+    ${[{ type: TOKEN_TYPES.MODEL, value: 'model' }]}                       | ${{ model_name: 'model' }}
+    ${[{ type: TOKEN_TYPES.CHECKSUM_STATE, value: { data: 'verified' } }]} | ${{ checksum_state: 'verified' }}
+    ${['123 456 789']}                                                     | ${{ identifiers: ['123', '456', '789'] }}
+  `('returns the correct { query, url } for filters: $filters', ({ filters, query }) => {
     expect(processFilters(filters)).toStrictEqual({ query, url });
   });
+
+  it('handles mixed filter types', () => {
+    const filters = [
+      '123 456',
+      { type: TOKEN_TYPES.MODEL, value: 'user' },
+      { type: TOKEN_TYPES.CHECKSUM_STATE, value: { data: 'verified' } },
+    ];
+
+    const expectedQuery = {
+      identifiers: ['123', '456'],
+      model_name: 'user',
+      checksum_state: 'verified',
+    };
+
+    expect(processFilters(filters)).toStrictEqual({ query: expectedQuery, url });
+  });
+
+  it('handles empty string filters', () => {
+    const filters = [''];
+    const expectedQuery = {
+      identifiers: [''],
+    };
+
+    expect(processFilters(filters)).toStrictEqual({ query: expectedQuery, url });
+  });
 });
diff --git a/ee/spec/frontend/api/data_management_api_spec.js b/ee/spec/frontend/api/data_management_api_spec.js
index 4635103d0a257b..f419e190572d57 100644
--- a/ee/spec/frontend/api/data_management_api_spec.js
+++ b/ee/spec/frontend/api/data_management_api_spec.js
@@ -31,5 +31,17 @@ describe('DataManagementApp', () => {
 
       await expect(getModels(model)).resolves.toMatchObject({ data: { data: models } });
     });
+
+    it('passes params to request', async () => {
+      const model = 'snippet_repository';
+      const params = { page: 1, per_page: 20, checksum_state: 'verified' };
+      const expectedUrl = `${mockUrlRoot}/api/${mockApiVersion}/admin/data_management/${model}`;
+
+      mock.onGet(expectedUrl).reply(HTTP_STATUS_OK, { data: models });
+
+      await getModels(model, params);
+
+      expect(mock.history.get[0].params).toEqual(params);
+    });
   });
 });
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 8023c5a4fc2e35..33973f43d35ec5 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -29385,6 +29385,9 @@ msgstr ""
 msgid "Geo|CI Secure Files"
 msgstr ""
 
+msgid "Geo|Checksum status"
+msgstr ""
+
 msgid "Geo|Checksum: %{verificationChecksum}"
 msgstr ""
 
-- 
GitLab