Use component_names instead of component_ids

We recently switched to returning component names instead
of ids in the filtered search as the backend returns
de-duplicated results with the names. To match the same
behaviour with the dependencies results, we have to send
the component names instead of ids. This commit implements
the necessary changes for this fix.

ee/app/assets/javascripts/dependencies/components/filtered_search/group_dependencies_filtered_search.vue

@@ -61,7 +61,7 @@ export default {
         ...(this.glFeatures.groupLevelDependenciesFilteringByComponent
           ? [
               {
-                type: 'component_ids',
+                type: 'component_names',
                 title: __('Component'),
                 multiSelect: true,
                 unique: true,

ee/app/assets/javascripts/dependencies/components/filtered_search/tokens/component_token.vue

@@ -8,7 +8,6 @@ import {
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
 import { s__ } from '~/locale';
-import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import componentsQuery from 'ee/dependencies/graphql/group_components.query.graphql';
 
 export default {
@@ -61,9 +60,6 @@ export default {
     selectedComponentNames() {
       return this.selectedComponents.map(({ name }) => name);
     },
-    selectedComponentIds() {
-      return this.selectedComponents.map(({ id }) => getIdFromGraphQLId(id));
-    },
     tokenValue() {
       return {
         ...this.value,
@@ -128,7 +124,7 @@ export default {
   <gl-filtered-search-token
     :config="config"
     v-bind="{ ...$props, ...$attrs }"
-    :multi-select-values="selectedComponentIds"
+    :multi-select-values="selectedComponentNames"
     :value="tokenValue"
     v-on="$listeners"
     @select="toggleSelectedComponent"

ee/spec/frontend/dependencies/components/filtered_search/group_dependencies_filtered_search_spec.js

@@ -59,7 +59,7 @@ describe('GroupDependenciesFilteredSearch', () => {
         ${'License'}   | ${{ title: 'License', type: 'licenses', multiSelect: true, token: LicenseToken }}
         ${'Project'}   | ${{ title: 'Project', type: 'project_ids', multiSelect: true, token: ProjectToken }}
         ${'Packager'}  | ${{ title: 'Packager', type: 'package_managers', multiSelect: true, token: PackagerToken }}
-        ${'Component'} | ${{ title: 'Component', type: 'component_ids', multiSelect: true, token: ComponentToken }}
+        ${'Component'} | ${{ title: 'Component', type: 'component_names', multiSelect: true, token: ComponentToken }}
       `('contains a "$tokenTitle" search token', ({ tokenConfig }) => {
         expect(findFilteredSearch().props('availableTokens')).toMatchObject(
           expect.arrayContaining([