Add backport changes

Adds backport changes for ee

7 files changed, 103 insertions, 22 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 da0a9483f8e..1311bdc0113 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -11,6 +11,7 @@ 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 VisualReviewAppLink from 'ee/vue_merge_request_widget/components/visual_review_app_link.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {
@@ -23,6 +24,7 @@ export default {
     TooltipOnTruncate,
     FilteredSearchDropdown,
     ReviewAppLink,
+    VisualReviewAppLink,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -33,10 +35,26 @@ export default {
       type: Object,
       required: true,
     },
+    issueIds: {
+      type: Object,
+      required: false,
+      default: () => {
+        return {
+          sourceProjectId: '',
+          issueId: '',
+          appUrl: '',
+        };
+      },
+    },
     showMetrics: {
       type: Boolean,
       required: true,
     },
+    showVisualReviewApp: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   deployedTextMap: {
     running: __('Deploying to'),
@@ -123,7 +141,7 @@ export default {
       <div class="media-body">
         <div class="deploy-body">
           <div class="js-deployment-info deployment-info">
-            <template v-if="hasDeploymentMeta">
+            <template>
               <span> {{ deployedText }} </span>
               <tooltip-on-truncate
                 :title="deployment.name"
@@ -155,7 +173,7 @@ export default {
             />
           </div>
           <div>
-            <template v-if="hasExternalUrls">
+            <template>
               <filtered-search-dropdown
                 v-if="shouldRenderDropdown"
                 class="js-mr-wigdet-deployment-dropdown inline"
@@ -168,6 +186,11 @@ export default {
                     :link="deploymentExternalUrl"
                     :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
                   />
+                  <visual-review-app-link
+                    v-if="showVisualReviewApp"
+                    :link="deploymentExternalUrl"
+                    :issue-ids="issueIds"
+                  />
                 </template>
 
                 <template slot="result" slot-scope="slotProps">
@@ -190,7 +213,12 @@ export default {
               <review-app-link
                 v-else
                 :link="deploymentExternalUrl"
-                css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inlin"
+                css-class="js-deploy-url js-deploy-url-feature-flag deploy-link btn btn-default btn-sm inline"
+              />
+              <visual-review-app-link
+                v-if="showVisualReviewApp"
+                :link="deploymentExternalUrl"
+                :issue-ids="issueIds"
               />
             </template>
             <span
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
index 5f5fe67b3c1..677a5f5ca27 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue
@@ -30,9 +30,6 @@ export default {
     },
   },
   computed: {
-    pipeline() {
-      return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline;
-    },
     branch() {
       return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranch;
     },
@@ -40,7 +37,18 @@ export default {
       return this.isPostMerge ? this.mr.targetBranch : this.mr.sourceBranchLink;
     },
     deployments() {
-      return this.isPostMerge ? this.mr.postMergeDeployments : this.mr.deployments;
+      return [
+        {
+          id: 56789,
+          name: 'What a cool mocked deployment',
+          url: 'https://sarahghp.gitlab.io/review-app-tester/',
+          external_url: 'https://sarahghp.gitlab.io/review-app-tester/',
+          deployed_at_formatted: '',
+          metrics_url: '',
+          metrics_monitoring_url: '',
+        },
+      ];
+      // return this.isPostMerge ? this.mr.postMergeDeployments : this.mr.deployments;
     },
     deploymentClass() {
       return this.isPostMerge ? 'js-post-deployment' : 'js-pre-deployment';
@@ -48,6 +56,19 @@ export default {
     hasDeploymentMetrics() {
       return this.isPostMerge;
     },
+    issueIds() {
+      return {
+        appUrl: this.mr.appUrl,
+        issueId: this.mr.iid,
+        sourceProjectId: this.mr.sourceProjectId,
+      };
+    },
+    pipeline() {
+      return this.isPostMerge ? this.mr.mergePipeline : this.mr.pipeline;
+    },
+    showVisualReviewAppLink() {
+      return !!this.mr.visualReviewAppAvailable;
+    },
   },
 };
 </script>
@@ -61,14 +82,18 @@ export default {
       :source-branch-link="branchLink"
       :troubleshooting-docs-path="mr.troubleshootingDocsPath"
     />
-    <div v-if="deployments.length" slot="footer" class="mr-widget-extension">
-      <deployment
-        v-for="deployment in deployments"
-        :key="deployment.id"
-        :class="deploymentClass"
-        :deployment="deployment"
-        :show-metrics="hasDeploymentMetrics"
-      />
-    </div>
+    <template v-slot:footer>
+      <div class="mr-widget-extension">
+        <deployment
+          v-for="deployment in deployments"
+          :key="deployment.id"
+          :class="deploymentClass"
+          :deployment="deployment"
+          :show-metrics="hasDeploymentMetrics"
+          :show-visual-review-app="showVisualReviewAppLink"
+          :issue-ids="issueIds"
+        />
+      </div>
+    </template>
   </mr-widget-container>
 </template>
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
index de9c122f268..6b7b5da1a7f 100644
--- 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
@@ -1,5 +1,6 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -19,6 +20,6 @@ export default {
 </script>
 <template>
   <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
-    {{ __('View app') }} <icon name="external-link" />
+    {{ __('View app') }} <icon css-classes="fgray" name="external-link" />
   </a>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 671b4909839..a620f560b52 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -7,7 +7,7 @@
  *
  * @example
  * <clipboard-button
- *   title="Copy to clipbard"
+ *   title="Copy to clipboard"
  *   text="Content to be copied"
  *    css-class="btn-transparent"
  * />
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index dffd5e70edb..209047cfd63 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -5,6 +5,9 @@
 .cgreen { color: $green-600; }
 .cdark { color: $common-gray-dark; }
 
+.fwhite { fill: $white-light; }
+.fgray { fill: $gray-700; }
+
 .text-plain,
 .text-plain:hover {
   color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 709940ba6c8..44b558dd5ff 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -972,10 +972,6 @@
     }
   }
 
-  .btn svg {
-    fill: $gray-700;
-  }
-
   .dropdown-menu {
     width: 400px;
   }
diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
index 42bf3b7df09..abd016fe1bf 100644
--- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js
@@ -198,6 +198,34 @@ describe('Deployment component', () => {
     });
   });
 
+  describe('with showVisualReviewApp enabled', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        deployment: { ...deploymentMockData },
+        showVisualReviewApp: true,
+        showMetrics: true,
+      });
+    });
+
+    it('shows the visual review app button', () => {
+      expect(vm.$el).toContainElement('.js-mr-visual-review-app');
+    });
+  });
+
+  describe('with showVisualReviewApp disabled', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, {
+        deployment: { ...deploymentMockData },
+        showVisualReviewApp: false,
+        showMetrics: true,
+      });
+    });
+
+    it('hides the visual review app button', () => {
+      expect(vm.$el).not.toContainElement('.js-mr-visual-review-app');
+    });
+  });
+
   describe('without changes', () => {
     beforeEach(() => {
       delete deploymentMockData.changes;