Implements basic filter

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

@@ -127,7 +127,9 @@ export default {
               :items="deployment.changes"
               :main-action-link="deployment.external_url"
             >
-              <template slot="mainAction" slot-scope="slotProps">
+              <template
+                slot="mainAction"
+                slot-scope="slotProps">
                 <a
                   :href="deployment.external_url"
                   target="_blank"
@@ -142,7 +144,9 @@ export default {
                 </a>
               </template>
-              <template slot="result" slot-scope="slotProps">
+              <template
+                slot="result"
+                slot-scope="slotProps">
                 <a
                   :href="slotProps.result.external_url"
                   target="_blank"

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -247,35 +247,35 @@ export default {
       this.setFaviconHelper();
       // this.initDeploymentsPolling();
       this.mr.deployments = [
-                {
-                  id: 40,
-                  name: 'review/root-master-patch-91341',
-                  url: '/root/test-pages/environments/40',
-                  metrics_url: null,
-                  metrics_monitoring_url: '/root/test-pages/environments/40/metrics',
-                  stop_url: '/root/test-pages/environments/40/stop',
-                  external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh',
-                  external_url_formatted: 'root-master-patch-91341.volatile-watch.surge.sh',
-                  deployed_at: '2018-10-12T13:08:21.839Z',
-                  deployed_at_formatted: 'Oct 12, 2018 1:08pm',
-                  changes: [
-                    {
-                      path: 'index.html',
-                      external_url:
+        {
+          id: 40,
+          name: 'review/root-master-patch-91341',
+          url: '/root/test-pages/environments/40',
+          metrics_url: null,
+          metrics_monitoring_url: '/root/test-pages/environments/40/metrics',
+          stop_url: '/root/test-pages/environments/40/stop',
+          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh',
+          external_url_formatted: 'root-master-patch-91341.volatile-watch.surge.sh',
+          deployed_at: '2018-10-12T13:08:21.839Z',
+          deployed_at_formatted: 'Oct 12, 2018 1:08pm',
+          changes: [
+            {
+              path: 'index.html',
+              external_url:
                         'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
-                    },
-                    {
-                      path: 'imgs/gallery.html',
-                      external_url:
+            },
+            {
+              path: 'imgs/gallery.html',
+              external_url:
                         'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
-                    },
-                    {
-                      path: 'about/',
-                      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
-                    },
-                  ],
-                },
-              ];
+            },
+            {
+              path: 'about/',
+              external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+            },
+          ],
+        },
+      ];
     },
   },
 };

app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue

@@ -24,11 +24,6 @@
           ),
         default: 'default',
       },
-      mainActionLink: {
-        type: String,
-        required: false,
-        default: null,
-      },
       items: {
         type: Array,
         required: true,
@@ -50,8 +45,10 @@
         return `btn btn-${this.color}`;
       },
     },
-    methods: {
-      onType() {},
+    watch: {
+      filter(newVal) {
+        this.filteredResults = this.items.filter((item) => item.path.includes(newVal));
+      },
     },
   };
 </script>
@@ -97,23 +94,11 @@
           name="result"
           :result="result"
         >
-          <li class="dropdown-item" :key="i">{{ result }}</li>
+          <li
+            :key="i"
+            class="dropdown-item">{{ result }}</li>
         </slot>
       </template>
     </div>
   </div>
 </template>
-
-<style>
-  .dropdown-menu {
-    padding: 8px;
-  };
-  .search-icon {
-    top: 10px;
-    right: 10px;
-  }
-
-  .dropdown-item {
-    padding: 8px;
-  }
-</style>

app/assets/stylesheets/pages/merge_requests.scss

@@ -916,6 +916,10 @@
       top: $gl-padding-top;
       right: $gl-padding-top;
     }
+
+    .dropdown-item {
+      padding: $gl-padding-8;
+    }
   }
 }