Merge branch '494204-use-search-suggestion-severity' into 'master'

Refactor severity token

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/169566



Merged-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Approved-by: Lorenz van Herwaarden <lvanherwaarden@gitlab.com>
Co-authored-by: Savas Vedova <svedova@gitlab.com>

ee/app/assets/javascripts/security_dashboard/components/shared/filtered_search/tokens/severity_token.vue

 <script>
-import { GlIcon, GlFilteredSearchToken, GlFilteredSearchSuggestion } from '@gitlab/ui';
+import { GlFilteredSearchToken } from '@gitlab/ui';
 import { SEVERITY_LEVELS } from 'ee/security_dashboard/store/constants';
 import { getSelectedOptionsText } from '~/lib/utils/listbox_helpers';
 import { s__ } from '~/locale';
 import QuerystringSync from '../../filters/querystring_sync.vue';
 import { ALL_ID as ALL_SEVERITIES_VALUE } from '../../filters/constants';
+import SearchSuggestion from '../components/search_suggestion.vue';
 import eventHub from '../event_hub';
 const VALID_IDS = Object.entries(SEVERITY_LEVELS).map(([id]) => id.toUpperCase());
@@ -13,10 +14,9 @@ export default {
   VALID_IDS,
   components: {
-    GlIcon,
     GlFilteredSearchToken,
-    GlFilteredSearchSuggestion,
     QuerystringSync,
+    SearchSuggestion,
   },
   props: {
     config: {
@@ -129,24 +129,17 @@ export default {
       @complete="emitFiltersChanged"
     >
       <template #view>
-        {{ toggleText }}
+        <span data-testid="severity-token-placeholder">{{ toggleText }}</span>
       </template>
       <template #suggestions>
-        <gl-filtered-search-suggestion
+        <search-suggestion
           v-for="severity in $options.items"
           :key="severity.value"
           :value="severity.value"
-        >
-          <div class="gl-flex gl-items-center">
-            <gl-icon
-              name="check"
-              class="gl-mr-3 gl-shrink-0 gl-text-gray-700"
-              :class="{ 'gl-invisible': !isSeveritySelected(severity.value) }"
-              :data-testid="`severity-icon-${severity.value}`"
-            />
-            {{ severity.text }}
-          </div>
-        </gl-filtered-search-suggestion>
+          :text="severity.text"
+          :selected="isSeveritySelected(severity.value)"
+          :data-testid="`suggestion-${severity.value}`"
+        />
       </template>
     </gl-filtered-search-token>
   </querystring-sync>

ee/spec/frontend/security_dashboard/components/shared/filtered_search/tokens/severity_token_spec.js

 import { GlFilteredSearchToken } from '@gitlab/ui';
 import Vue, { nextTick } from 'vue';
 import VueRouter from 'vue-router';
+import SearchSuggestion from 'ee/security_dashboard/components/shared/filtered_search/components/search_suggestion.vue';
 import SeverityToken from 'ee/security_dashboard/components/shared/filtered_search/tokens/severity_token.vue';
 import QuerystringSync from 'ee/security_dashboard/components/shared/filters/querystring_sync.vue';
 import eventHub from 'ee/security_dashboard/components/shared/filtered_search/event_hub';
 import { OPERATORS_IS } from '~/vue_shared/components/filtered_search_bar/constants';
-import { stubComponent } from 'helpers/stub_component';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 Vue.use(VueRouter);
@@ -41,14 +41,16 @@ describe('Severity Token component', () => {
         termsAsTokens: () => false,
       },
-      stubs,
+      stubs: {
+        SearchSuggestion,
+        ...stubs,
+      },
     });
   };
   const findQuerystringSync = () => wrapper.findComponent(QuerystringSync);
   const findFilteredSearchToken = () => wrapper.findComponent(GlFilteredSearchToken);
-  const findCheckedIcon = (value) => wrapper.findByTestId(`severity-icon-${value}`);
-  const isOptionChecked = (v) => !findCheckedIcon(v).classes('gl-invisible');
+  const isOptionChecked = (v) => wrapper.findByTestId(`suggestion-${v}`).props('selected') === true;
   const clickDropdownItem = async (...ids) => {
     await Promise.all(
@@ -69,39 +71,28 @@ describe('Severity Token component', () => {
   };
   describe('default view', () => {
-    const findSlotView = () => wrapper.findByTestId('slot-view');
-    const findSlotSuggestions = () => wrapper.findByTestId('slot-suggestions');
-
     beforeEach(() => {
-      createWrapper({
-        stubs: {
-          GlFilteredSearchToken: stubComponent(GlFilteredSearchToken, {
-            template: `
-            <div>
-                <div data-testid="slot-view">
-                    <slot name="view"></slot>
-                </div>
-                <div data-testid="slot-suggestions">
-                    <slot name="suggestions"></slot>
-                </div>
-            </div>`,
-          }),
-        },
-      });
+      createWrapper();
     });
     it('shows the label', () => {
-      expect(findSlotView().text()).toBe('All severities');
+      expect(findFilteredSearchToken().props('value')).toEqual({ data: ['ALL'] });
+      expect(wrapper.findByTestId('severity-token-placeholder').text()).toBe('All severities');
     });
     it('shows the dropdown with correct options', () => {
-      expect(
-        findSlotSuggestions()
-          .text()
-          .split('\n')
-          .map((s) => s.trim())
-          .filter((i) => i),
-      ).toEqual(['All severities', 'Critical', 'High', 'Medium', 'Low', 'Info', 'Unknown']);
+      const findDropdownOptions = () =>
+        wrapper.findAllComponents(SearchSuggestion).wrappers.map((c) => c.text());
+
+      expect(findDropdownOptions()).toEqual([
+        'All severities',
+        'Critical',
+        'High',
+        'Medium',
+        'Low',
+        'Info',
+        'Unknown',
+      ]);
     });
   });