Merge branch '336882_02-geo-sites-search-filter' into 'master'

Geo Sites - Filter by Search

See merge request gitlab-org/gitlab!79550

ee/app/assets/javascripts/geo_nodes/components/geo_nodes_filters.vue

 <script>
-import { GlTabs, GlTab, GlBadge } from '@gitlab/ui';
-import { mapGetters, mapActions } from 'vuex';
+import { GlTabs, GlTab, GlBadge, GlSearchBoxByType } from '@gitlab/ui';
+import { mapGetters, mapActions, mapState } from 'vuex';
+import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { HEALTH_STATUS_UI, STATUS_FILTER_QUERY_PARAM } from 'ee/geo_nodes/constants';
 
@@ -8,11 +9,13 @@ export default {
   name: 'GeoNodesFilters',
   i18n: {
     allTab: s__('Geo|All'),
+    searchPlaceholder: s__('Geo|Filter Geo sites'),
   },
   components: {
     GlTabs,
     GlTab,
     GlBadge,
+    GlSearchBoxByType,
   },
   props: {
     totalNodes: {
@@ -23,6 +26,15 @@ export default {
   },
   computed: {
     ...mapGetters(['countNodesForStatus']),
+    ...mapState(['searchFilter']),
+    search: {
+      get() {
+        return this.searchFilter;
+      },
+      set(search) {
+        this.setSearchFilter(search);
+      },
+    },
     tabs() {
       const ALL_TAB = { text: this.$options.i18n.allTab, count: this.totalNodes, status: null };
       const tabs = [ALL_TAB];
@@ -38,8 +50,13 @@ export default {
       return tabs;
     },
   },
+  watch: {
+    searchFilter(search) {
+      updateHistory({ url: setUrlParams({ search: search || null }), replace: true });
+    },
+  },
   methods: {
-    ...mapActions(['setStatusFilter']),
+    ...mapActions(['setStatusFilter', 'setSearchFilter']),
     tabChange(tabIndex) {
       this.setStatusFilter(this.tabs[tabIndex]?.status);
     },
@@ -50,6 +67,7 @@ export default {
 
 <template>
   <gl-tabs
+    class="gl-display-grid geo-node-filter-grid-columns"
     sync-active-tab-with-query-params
     :query-param-name="$options.STATUS_FILTER_QUERY_PARAM"
     data-testid="geo-sites-filter"
@@ -61,5 +79,8 @@ export default {
         <gl-badge size="sm" class="gl-tab-counter-badge">{{ tab.count }}</gl-badge>
       </template>
     </gl-tab>
+    <div class="gl-pb-3 gl-border-b-1 gl-border-b-solid gl-border-gray-100">
+      <gl-search-box-by-type v-model="search" :placeholder="$options.i18n.searchPlaceholder" />
+    </div>
   </gl-tabs>
 </template>

ee/app/assets/javascripts/geo_nodes/index.js

 import Vue from 'vue';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { getParameterByName } from '~/lib/utils/url_utility';
 import Translate from '~/vue_shared/translate';
 import GeoNodesApp from './components/app.vue';
 import createStore from './store';
@@ -14,13 +15,14 @@ export const initGeoNodes = () => {
   }
 
   const { primaryVersion, primaryRevision, newNodeUrl, geoNodesEmptyStateSvg } = el.dataset;
+  const searchFilter = getParameterByName('search') || '';
   let { replicableTypes } = el.dataset;
 
   replicableTypes = convertObjectPropsToCamelCase(JSON.parse(replicableTypes), { deep: true });
 
   return new Vue({
     el,
-    store: createStore({ primaryVersion, primaryRevision, replicableTypes }),
+    store: createStore({ primaryVersion, primaryRevision, replicableTypes, searchFilter }),
     render(createElement) {
       return createElement(GeoNodesApp, {
         props: {

ee/app/assets/javascripts/geo_nodes/store/actions.js

@@ -50,3 +50,7 @@ export const removeNode = ({ commit, state }) => {
 export const setStatusFilter = ({ commit }, status) => {
   commit(types.SET_STATUS_FILTER, status);
 };
+
+export const setSearchFilter = ({ commit }, search) => {
+  commit(types.SET_SEARCH_FILTER, search);
+};

ee/app/assets/javascripts/geo_nodes/store/getters.js

@@ -60,20 +60,31 @@ export const canRemoveNode = (state) => (id) => {
   return !node.primary || state.nodes.length === 1;
 };
 
-export const filteredNodes = (state) => {
-  if (!state.statusFilter) {
-    return state.nodes;
+const filterByStatus = (status) => {
+  if (!status) {
+    return () => true;
   }
 
-  return state.nodes.filter((n) =>
-    n.healthStatus
-      ? n.healthStatus.toLowerCase() === state.statusFilter
-      : state.statusFilter === 'unknown',
-  );
+  // If the healthStatus is not falsey, we group that as status "unknown"
+  return (n) => (n.healthStatus ? n.healthStatus.toLowerCase() === status : status === 'unknown');
+};
+
+const filterBySearch = (search) => {
+  if (!search) {
+    return () => true;
+  }
+
+  return (n) =>
+    n.name?.toLowerCase().includes(search.toLowerCase()) ||
+    n.url?.toLowerCase().includes(search.toLowerCase());
+};
+
+export const filteredNodes = (state) => {
+  return state.nodes
+    .filter(filterByStatus(state.statusFilter))
+    .filter(filterBySearch(state.searchFilter));
 };
 
 export const countNodesForStatus = (state) => (status) => {
-  return state.nodes.filter((n) =>
-    n.healthStatus ? n.healthStatus.toLowerCase() === status : status === 'unknown',
-  ).length;
+  return state.nodes.filter(filterByStatus(status)).length;
 };

ee/app/assets/javascripts/geo_nodes/store/index.js

@@ -7,11 +7,16 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-export const getStoreConfig = ({ primaryVersion, primaryRevision, replicableTypes }) => ({
+export const getStoreConfig = ({
+  primaryVersion,
+  primaryRevision,
+  replicableTypes,
+  searchFilter = '',
+}) => ({
   actions,
   getters,
   mutations,
-  state: createState({ primaryVersion, primaryRevision, replicableTypes }),
+  state: createState({ primaryVersion, primaryRevision, replicableTypes, searchFilter }),
 });
 
 const createStore = (config) => new Vuex.Store(getStoreConfig(config));

ee/app/assets/javascripts/geo_nodes/store/mutation_types.js

@@ -10,3 +10,4 @@ export const RECEIVE_NODE_REMOVAL_SUCCESS = 'RECEIVE_NODE_REMOVAL_SUCCESS';
 export const RECEIVE_NODE_REMOVAL_ERROR = 'RECEIVE_NODE_REMOVAL_ERROR';
 
 export const SET_STATUS_FILTER = 'SET_STATUS_FILTER';
+export const SET_SEARCH_FILTER = 'SET_SEARCH_FILTER';

ee/app/assets/javascripts/geo_nodes/store/mutations.js

@@ -36,4 +36,7 @@ export default {
   [types.SET_STATUS_FILTER](state, status) {
     state.statusFilter = status;
   },
+  [types.SET_SEARCH_FILTER](state, search) {
+    state.searchFilter = search;
+  },
 };

ee/app/assets/javascripts/geo_nodes/store/state.js

-const createState = ({ primaryVersion, primaryRevision, replicableTypes }) => ({
+const createState = ({ primaryVersion, primaryRevision, replicableTypes, searchFilter }) => ({
   primaryVersion,
   primaryRevision,
   replicableTypes,
+  searchFilter,
+  statusFilter: null,
   nodes: [],
   isLoading: false,
   nodeToBeRemoved: null,
-  statusFilter: null,
 });
 export default createState;

ee/app/assets/stylesheets/pages/geo.scss

@@ -59,3 +59,11 @@
     grid-template-columns: 1fr 1fr 2fr 2fr;
   }
 }
+
+.geo-node-filter-grid-columns {
+  grid-template-columns: 1fr;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 3fr 1fr;
+  }
+}

ee/spec/features/geo_node_spec.rb

@@ -59,7 +59,7 @@ RSpec.describe 'GEO Nodes', :geo do
         expect(all('.geo-node-details-grid-columns').last).to have_link('Open replications', href: expected_url)
       end
 
-      context 'Status Filters', :js do
+      context 'Node Filters', :js do
         it 'defaults to the All tab when a status query is not already set' do
           visit admin_geo_nodes_path
           tab_count = find('[data-testid="geo-sites-filter"] .active .badge').text.to_i
@@ -98,6 +98,39 @@ RSpec.describe 'GEO Nodes', :geo do
           expect(page).to have_current_path(admin_geo_nodes_path(status: 'unknown'))
           expect(results_count).to be(tab_count)
         end
+
+        it 'properly updates the query and filters the nodes when a search is inputed' do
+          visit admin_geo_nodes_path
+
+          fill_in 'Filter Geo sites', with: geo_secondary.name
+          wait_for_requests
+
+          results_count = page.all('[data-testid="primary-nodes"]').length + page.all('[data-testid="secondary-nodes"]').length
+
+          expect(results_count).to be(1)
+          expect(page).to have_current_path(admin_geo_nodes_path(search: geo_secondary.name))
+        end
+
+        it 'properly sets the search when a search query is already set' do
+          visit admin_geo_nodes_path(search: geo_secondary.name)
+
+          results_count = page.all('[data-testid="primary-nodes"]').length + page.all('[data-testid="secondary-nodes"]').length
+
+          expect(find('input[placeholder="Filter Geo sites"]').value).to eq(geo_secondary.name)
+          expect(results_count).to be(1)
+        end
+
+        it 'properly handles both a status and search query' do
+          visit admin_geo_nodes_path(status: 'unknown', search: geo_secondary.name)
+
+          results = page.all(:xpath, '//div[@data-testid="primary-nodes"] | //div[@data-testid="secondary-nodes"]')
+
+          expect(find('[data-testid="geo-sites-filter"] .active')).to have_content('Unknown')
+          expect(find("input[placeholder='Filter Geo sites']").value).to eq(geo_secondary.name)
+          expect(results.length).to be(1)
+          expect(results[0]).to have_content(geo_secondary.name)
+          expect(results[0]).to have_content('Unknown')
+        end
       end
     end
   end

ee/spec/frontend/geo_nodes/components/geo_nodes_filters_spec.js

-import { GlTabs, GlTab } from '@gitlab/ui';
+import { GlTabs, GlTab, GlSearchBoxByType } from '@gitlab/ui';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import GeoNodesFilters from 'ee/geo_nodes/components/geo_nodes_filters.vue';
 import { HEALTH_STATUS_UI, STATUS_FILTER_QUERY_PARAM } from 'ee/geo_nodes/constants';
+import * as urlUtils from '~/lib/utils/url_utility';
 
 Vue.use(Vuex);
 
 const MOCK_TAB_COUNT = 5;
+const MOCK_SEARCH = 'test search';
 
 describe('GeoNodesFilters', () => {
   let wrapper;
@@ -18,6 +21,7 @@ describe('GeoNodesFilters', () => {
 
   const actionSpies = {
     setStatusFilter: jest.fn(),
+    setSearchFilter: jest.fn(),
   };
 
   const createComponent = (initialState, props, getters) => {
@@ -50,6 +54,7 @@ describe('GeoNodesFilters', () => {
   const findAllGlTabs = () => wrapper.findAllComponents(GlTab);
   const findAllGlTabTitles = () => wrapper.findAllComponents(GlTab).wrappers.map((w) => w.text());
   const findAllTab = () => findAllGlTabs().at(0);
+  const findGlSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
 
   describe('template', () => {
     describe('always', () => {
@@ -70,6 +75,10 @@ describe('GeoNodesFilters', () => {
         expect(findAllTab().exists()).toBe(true);
         expect(findAllTab().text()).toBe(`All ${MOCK_TAB_COUNT}`);
       });
+
+      it('renders the GlSearchBox', () => {
+        expect(findGlSearchBox().exists()).toBe(true);
+      });
     });
 
     describe('conditional tabs', () => {
@@ -150,5 +159,35 @@ describe('GeoNodesFilters', () => {
         }
       });
     });
+
+    describe('when searching in searchbox', () => {
+      beforeEach(() => {
+        createComponent();
+        findGlSearchBox().vm.$emit('input', MOCK_SEARCH);
+      });
+
+      it('calls setSearchFilter', () => {
+        expect(actionSpies.setSearchFilter).toHaveBeenCalledWith(expect.any(Object), MOCK_SEARCH);
+      });
+    });
+  });
+
+  describe('watchers', () => {
+    describe('searchFilter', () => {
+      beforeEach(() => {
+        createComponent({ searchFilter: null });
+
+        jest.spyOn(urlUtils, 'updateHistory');
+
+        wrapper.vm.$store.state.searchFilter = MOCK_SEARCH;
+      });
+
+      it('calls urlUtils.updateHistory when updated', () => {
+        expect(urlUtils.updateHistory).toHaveBeenCalledWith({
+          replace: true,
+          url: `${TEST_HOST}/?search=test+search`,
+        });
+      });
+    });
   });
 });

ee/spec/frontend/geo_nodes/mock_data.js

@@ -242,23 +242,35 @@ export const MOCK_NODE_STATUSES_RES = [
   },
 ];
 
-export const MOCK_HEALTH_STATUS_NODES = [
+export const MOCK_FILTER_NODES = [
   {
+    name: 'healthy1',
+    url: 'url/1',
     healthStatus: 'Healthy',
   },
   {
+    name: 'healthy2',
+    url: 'url/2',
     healthStatus: 'Healthy',
   },
   {
+    name: 'unhealthy1',
+    url: 'url/3',
     healthStatus: 'Unhealthy',
   },
   {
+    name: 'disabled1',
+    url: 'url/4',
     healthStatus: 'Disabled',
   },
   {
+    name: 'offline1',
+    url: 'url/5',
     healthStatus: 'Offline',
   },
   {
+    name: 'unknown1',
+    url: 'url/6',
     healthStatus: null,
   },
 ];

ee/spec/frontend/geo_nodes/store/actions_spec.js

@@ -146,4 +146,15 @@ describe('GeoNodes Store Actions', () => {
       });
     });
   });
+
+  describe('setSearchFilter', () => {
+    it('should dispatch the correct mutations', () => {
+      return testAction({
+        action: actions.setSearchFilter,
+        payload: 'search',
+        state,
+        expectedMutations: [{ type: types.SET_SEARCH_FILTER, payload: 'search' }],
+      });
+    });
+  });
 });

ee/spec/frontend/geo_nodes/store/getters_spec.js

@@ -7,7 +7,7 @@ import {
   MOCK_PRIMARY_VERIFICATION_INFO,
   MOCK_SECONDARY_VERIFICATION_INFO,
   MOCK_SECONDARY_SYNC_INFO,
-  MOCK_HEALTH_STATUS_NODES,
+  MOCK_FILTER_NODES,
 } from '../mock_data';
 
 describe('GeoNodes Store Getters', () => {
@@ -72,18 +72,26 @@ describe('GeoNodes Store Getters', () => {
   });
 
   describe.each`
-    status         | expectedNodes
-    ${null}        | ${MOCK_HEALTH_STATUS_NODES}
-    ${'healthy'}   | ${[{ healthStatus: 'Healthy' }, { healthStatus: 'Healthy' }]}
-    ${'unhealthy'} | ${[{ healthStatus: 'Unhealthy' }]}
-    ${'offline'}   | ${[{ healthStatus: 'Offline' }]}
-    ${'disabled'}  | ${[{ healthStatus: 'Disabled' }]}
-    ${'unknown'}   | ${[{ healthStatus: null }]}
-  `('filteredNodes', ({ status, expectedNodes }) => {
-    describe(`when status is ${status}`, () => {
+    status         | search                                     | expectedNodes
+    ${null}        | ${''}                                      | ${MOCK_FILTER_NODES}
+    ${'healthy'}   | ${''}                                      | ${[MOCK_FILTER_NODES[0], MOCK_FILTER_NODES[1]]}
+    ${'unhealthy'} | ${''}                                      | ${[MOCK_FILTER_NODES[2]]}
+    ${'disabled'}  | ${''}                                      | ${[MOCK_FILTER_NODES[3]]}
+    ${'offline'}   | ${''}                                      | ${[MOCK_FILTER_NODES[4]]}
+    ${'unknown'}   | ${''}                                      | ${[MOCK_FILTER_NODES[5]]}
+    ${null}        | ${MOCK_FILTER_NODES[1].name}               | ${[MOCK_FILTER_NODES[1]]}
+    ${null}        | ${MOCK_FILTER_NODES[3].url}                | ${[MOCK_FILTER_NODES[3]]}
+    ${'healthy'}   | ${MOCK_FILTER_NODES[0].name}               | ${[MOCK_FILTER_NODES[0]]}
+    ${'healthy'}   | ${MOCK_FILTER_NODES[0].name.toUpperCase()} | ${[MOCK_FILTER_NODES[0]]}
+    ${'unhealthy'} | ${MOCK_FILTER_NODES[2].url}                | ${[MOCK_FILTER_NODES[2]]}
+    ${'unhealthy'} | ${MOCK_FILTER_NODES[2].url.toUpperCase()}  | ${[MOCK_FILTER_NODES[2]]}
+    ${'offline'}   | ${'NOT A MATCH'}                           | ${[]}
+  `('filteredNodes', ({ status, search, expectedNodes }) => {
+    describe(`when status is ${status} and search is ${search}`, () => {
       beforeEach(() => {
-        state.nodes = MOCK_HEALTH_STATUS_NODES;
+        state.nodes = MOCK_FILTER_NODES;
         state.statusFilter = status;
+        state.searchFilter = search;
       });
 
       it('should return the correct filtered array', () => {
@@ -102,7 +110,7 @@ describe('GeoNodes Store Getters', () => {
   `('countNodesForStatus', ({ status, expectedCount }) => {
     describe(`when status is ${status}`, () => {
       beforeEach(() => {
-        state.nodes = MOCK_HEALTH_STATUS_NODES;
+        state.nodes = MOCK_FILTER_NODES;
       });
 
       it(`should return ${expectedCount}`, () => {

ee/spec/frontend/geo_nodes/store/mutations_spec.js

@@ -113,4 +113,12 @@ describe('GeoNodes Store Mutations', () => {
       expect(state.statusFilter).toBe('healthy');
     });
   });
+
+  describe('SET_SEARCH_FILTER', () => {
+    it('sets searchFilter', () => {
+      mutations[types.SET_SEARCH_FILTER](state, 'search');
+
+      expect(state.searchFilter).toBe('search');
+    });
+  });
 });

locale/gitlab.pot

@@ -15985,6 +15985,9 @@ msgstr ""
 msgid "Geo|Failed"
 msgstr ""
 
+msgid "Geo|Filter Geo sites"
+msgstr ""
+
 msgid "Geo|Filter by name"
 msgstr ""