Adds dropdown with list of deploys

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

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
@@ -18,6 +19,7 @@ export default {
     StatusIcon,
     Icon,
     TooltipOnTruncate,
+    FilteredSearchDropdown,
   },
   directives: {
     tooltip,
@@ -120,18 +122,45 @@ export default {
             />
           </div>
           <div>
-            <a
+            <filtered-search-dropdown
               v-if="hasExternalUrls"
-              :href="deployment.external_url"
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              class="deploy-link js-deploy-url btn btn-default btn-sm inline"
+              :items="deployment.changes"
+              :main-action-link="deployment.external_url"
             >
-              <span>
-                View app
-                <icon name="external-link" />
-              </span>
-            </a>
+              <template slot="mainAction" slot-scope="slotProps">
+                <a
+                  :href="deployment.external_url"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                  class="deploy-link js-deploy-url inline"
+                  :class="slotProps.className"
+                >
+                  <span>
+                    {{ __('View app') }}
+                    <icon name="external-link" />
+                  </span>
+                </a>
+              </template>
+
+              <template slot="result" slot-scope="slotProps">
+                <a
+                  :href="slotProps.result.external_url"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                  class="dropdown-item"
+                >
+
+                  <strong class="str-truncated append-bottom-0 d-block">
+                    {{ slotProps.result.path }}
+                  </strong>
+
+                  <p class="text-muted str-truncated append-bottom-0 d-block">
+                    {{ slotProps.result.external_url }}
+                  </p>
+                </a>
+              </template>
+            </filtered-search-dropdown>
+
             <loading-button
               v-if="deployment.stop_url"
               :loading="isStopping"

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -245,7 +245,37 @@ export default {
     },
     handleMounted() {
       this.setFaviconHelper();
-      this.initDeploymentsPolling();
+      // 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:
+                        'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+                    },
+                    {
+                      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/',
+                    },
+                  ],
+                },
+              ];
     },
   },
 };

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

+<script>
+  import Icon from '~/vue_shared/components/icon.vue';
+  /**
+    Renders a slipt dropdown with
+    an input that allows to search through the given
+    array of options.
+   */
+  export default {
+    name: 'FilteredSearchDropdown',
+    components: {
+      Icon,
+    },
+    props: {
+      title: {
+        type: String,
+        required: false,
+      },
+      color: {
+        required: false,
+        validator: value => (
+            ['primary', 'default', 'secondary', 'success', 'info', 'warning', 'danger'].indexOf(
+              value,
+            ) !== -1
+          ),
+        default: 'default',
+      },
+      mainActionLink: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      items: {
+        type: Array,
+        required: true,
+      },
+      visibleItems: {
+        type: Number,
+        required: false,
+        default: 5,
+      },
+    },
+    data() {
+      return {
+        filteredResults: this.items.slice(0, this.visibleItems - 1),
+        filter: '',
+      };
+    },
+    computed: {
+      className() {
+        return `btn btn-${this.color}`;
+      },
+    },
+    methods: {
+      onType() {},
+    },
+  };
+</script>
+<template>
+  <div class="btn-group">
+    <slot
+      name="mainAction"
+      :class-name="className">
+      <button
+        type="button"
+        :class="className"
+      >
+        {{ title }}
+      </button>
+    </slot>
+
+    <button
+      type="button"
+      :class="className"
+      class="dropdown-toggle dropdown-toggle-split"
+      data-toggle="dropdown"
+      aria-haspopup="true"
+      aria-expanded="false"
+    >
+      <i class="fa fa-caret-down"></i>
+    </button>
+    <div class="dropdown-menu dropdown-menu-right">
+      <div class="position-relative">
+        <input
+          v-model="filter"
+          type="search"
+          placeholder="Filter"
+          class="form-control"
+        />
+        <icon
+          class="position-absolute search-icon"
+          name="search" />
+      </div>
+      <template
+        v-for="(result, i) in filteredResults"
+      >
+        <slot
+          name="result"
+          :result="result"
+        >
+          <li class="dropdown-item" :key="i">{{ 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

@@ -908,6 +908,15 @@
   .btn svg {
     fill: $theme-gray-700;
   }
+
+  .dropdown-menu {
+    padding: $gl-padding-8;
+
+    .search-icon {
+      top: $gl-padding-top;
+      right: $gl-padding-top;
+    }
+  }
 }
 // Hack alert: we've rewritten `btn` class in a way that