Merge branch '53227-empty-list' into 'master'

Resolve "Empty list for links to changed pages in Review App from MR Widget"

Closes #53227

See merge request gitlab-org/gitlab-ce!22665

2 files changed, 47 insertions, 24 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 5e7a35e9396..57c52a2016a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -10,6 +10,7 @@ import { visitUrl } from '../../lib/utils/url_utility';
 import createFlash from '../../flash';
 import MemoryUsage from './memory_usage.vue';
 import StatusIcon from './mr_widget_status_icon.vue';
+import ReviewAppLink from './review_app_link.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {
@@ -21,6 +22,7 @@ export default {
     Icon,
     TooltipOnTruncate,
     FilteredSearchDropdown,
+    ReviewAppLink,
   },
   directives: {
     tooltip,
@@ -63,6 +65,12 @@ export default {
     deployedText() {
       return this.$options.deployedTextMap[this.deployment.status];
     },
+    shouldRenderDropdown() {
+      return (
+        this.enableCiEnvironmentsStatusChanges &&
+        (this.deployment.changes && this.deployment.changes.length > 0)
+      );
+    },
   },
   methods: {
     stopEnvironment() {
@@ -133,7 +141,7 @@ export default {
           <div>
             <template v-if="hasExternalUrls">
               <filtered-search-dropdown
-                v-if="enableCiEnvironmentsStatusChanges"
+                v-if="shouldRenderDropdown"
                 class="js-mr-wigdet-deployment-dropdown inline"
                 :items="deployment.changes"
                 :main-action-link="deployment.external_url"
@@ -143,18 +151,10 @@ export default {
                   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>
+                  <review-app-link
+                    :link="deployment.external_url"
+                    :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
+                  />
                 </template>
 
                 <template
@@ -177,18 +177,11 @@ export default {
                   </a>
                 </template>
               </filtered-search-dropdown>
-              <a
+              <review-app-link
                 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>
+                :link="deployment.external_url"
+                css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
+              />
             </template>
             <loading-button
               v-if="deployment.stop_url"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
new file mode 100644
index 00000000000..b007d4f4dcb
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -0,0 +1,30 @@
+<script>
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    link: {
+      type: String,
+      required: true,
+    },
+    cssClass: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <a
+    :href="link"
+    target="_blank"
+    rel="noopener noreferrer nofollow"
+    :class="cssClass"
+  >
+    {{ __('View app') }}
+    <icon name="external-link" />
+  </a>
+</template>