Updates filtered search to accept a key to filter forfe-ac-review-app-changes-33418

Updates filter method to use a computedProp instead of a watcher

4 files changed, 26 insertions, 25 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 4f7f6d92e98..6c87287a4c4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -54,11 +54,6 @@ export default {
     hasMetrics() {
       return !!this.deployment.metrics_url;
     },
-    changedFiles() {
-      return this.deployment.changes
-        ? this.deployment.changes.map(file => ({ title: file.path, ...file }))
-        : [];
-    },
   },
   methods: {
     stopEnvironment() {
@@ -131,8 +126,9 @@ export default {
               <filtered-search-dropdown
                 v-if="enableCiEnvironmentsStatusChanges"
                 class="js-mr-wigdet-deployment-dropdown inline"
-                :items="changedFiles"
+                :items="deployment.changes"
                 :main-action-link="deployment.external_url"
+                filter-key="path"
               >
                 <template
                   slot="mainAction"
@@ -163,7 +159,7 @@ export default {
                     class="menu-item"
                   >
                     <strong class="str-truncated-100 append-bottom-0 d-block">
-                      {{ slotProps.result.title }}
+                      {{ slotProps.result.path }}
                     </strong>
 
                     <p class="text-secondary str-truncated-100 append-bottom-0 d-block">
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
index eddae978917..460fa6ad72e 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
@@ -2,7 +2,7 @@
 import $ from 'jquery';
 import Icon from '~/vue_shared/components/icon.vue';
 /**
- * Renders a slipt dropdown with
+ * Renders a split dropdown with
  * an input that allows to search through the given
  * array of options.
  */
@@ -17,7 +17,7 @@ export default {
       required: false,
       default: '',
     },
-    color: {
+    buttonType: {
       required: false,
       validator: value =>
         ['primary', 'default', 'secondary', 'success', 'info', 'warning', 'danger'].indexOf(
@@ -39,27 +39,29 @@ export default {
       required: false,
       default: 5,
     },
+    filterKey: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
-      filteredResults: this.items.slice(0, this.visibleItems),
       filter: '',
     };
   },
   computed: {
     className() {
-      return `btn btn-${this.color} btn-${this.size}`;
-    },
-  },
-  watch: {
-    /**
-     * Updates the results every time the user types
-     */
-    filter(newVal) {
-      this.filteredResults = this.items.filter(
-        item => item.title && item.title.toLowerCase().includes(newVal.toLowerCase()),
-      );
+      return `btn btn-${this.buttonType} btn-${this.size}`;
     },
+    filteredResults() {
+      if (this.filter !== '') {
+        return this.items.filter(
+          item => item[this.filterKey] && item[this.filterKey].toLowerCase().includes(this.filter.toLowerCase()),
+        );
+      }
+
+      return this.items.slice(0, this.visibleItems);
+    }
   },
   mounted() {
     /**
@@ -71,7 +73,6 @@ export default {
       })
       .on('hidden.bs.dropdown', () => {
         this.filter = '';
-        this.filteredResults = this.items.slice(0, this.visibleItems);
       });
   },
 };
@@ -98,7 +99,7 @@ export default {
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
-
+        aria-label="Expand dropdown"
       >
         <icon
           name="angle-down"
@@ -131,7 +132,7 @@ export default {
                 name="result"
                 :result="result"
               >
-                {{ result.title }}
+                {{ result[filterKey] }}
               </slot>
             </li>
           </ul>
diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
index 22a32db6e5a..ce850bc621e 100644
--- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
@@ -201,7 +201,7 @@ describe('Deployment component', () => {
     });
 
     afterEach(() => {
-      delete window.gon.features.ciEnvironmentsStatusChanges;
+      window.gon.features = {};
     });
 
     it('renders dropdown with changes', () => {
diff --git a/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js b/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js
index 2c42e76f64c..b71cb36ecf6 100644
--- a/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js
+++ b/spec/javascripts/vue_shared/components/filtered_search_dropdown_spec.js
@@ -14,6 +14,7 @@ describe('Filtered search dropdown', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
         items: [],
+        filterKey: '',
       });
     });
 
@@ -31,6 +32,7 @@ describe('Filtered search dropdown', () => {
       vm = mountComponent(Component, {
         items: [{ title: 'One' }, { title: 'Two' }, { title: 'Three' }],
         visibleItems: 2,
+        filterKey: 'title',
       });
     });
 
@@ -43,6 +45,7 @@ describe('Filtered search dropdown', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
         items: [{ title: 'One' }, { title: 'Two' }, { title: 'Three' }],
+        filterKey: 'title',
       });
     });
 
@@ -60,6 +63,7 @@ describe('Filtered search dropdown', () => {
           { title: 'Three four' },
           { title: 'Five' },
         ],
+        filterKey: 'title',
       });
     });