1 files changed, 63 insertions, 12 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 9161f703697..6c87287a4c4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -1,6 +1,7 @@
 <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,
@@ -30,8 +32,10 @@ export default {
     },
   },
   data() {
+    const features = window.gon.features || {};
     return {
       isStopping: false,
+      enableCiEnvironmentsStatusChanges: features.ciEnvironmentsStatusChanges,
     };
   },
   computed: {
@@ -118,18 +122,65 @@ export default {
             />
           </div>
           <div>
-            <a
-              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"
-            >
-              <span>
-                View app
-                <icon name="external-link" />
-              </span>
-            </a>
+            <template v-if="hasExternalUrls">
+              <filtered-search-dropdown
+                v-if="enableCiEnvironmentsStatusChanges"
+                class="js-mr-wigdet-deployment-dropdown inline"
+                :items="deployment.changes"
+                :main-action-link="deployment.external_url"
+                filter-key="path"
+              >
+                <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="menu-item"
+                  >
+                    <strong class="str-truncated-100 append-bottom-0 d-block">
+                      {{ slotProps.result.path }}
+                    </strong>
+
+                    <p class="text-secondary str-truncated-100 append-bottom-0 d-block">
+                      {{ slotProps.result.external_url }}
+                    </p>
+                  </a>
+                </template>
+              </filtered-search-dropdown>
+              <a
+                v-else
+                :href="deployment.external_url"
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inline"
+              >
+                <span>
+                  {{ __('View app') }}
+                  <icon name="external-link" />
+                </span>
+              </a>
+            </template>
             <loading-button
               v-if="deployment.stop_url"
               :loading="isStopping"