From 68fd2bdd74f675f66e39d8785541e85b56ca54ce Mon Sep 17 00:00:00 2001
From: Sarah Groff Hennigh-Palermo <sarah.groff.palermo@gmail.com>
Date: Mon, 20 May 2019 17:08:37 +0000
Subject: Add backport changes

Adds backport changes for ee
---
 .../components/deployment.vue                      | 37 ++++++++++++++++++---
 .../components/mr_widget_pipeline_container.vue    | 38 +++++++++++++++-------
 .../components/review_app_link.vue                 |  2 +-
 .../vue_shared/components/clipboard_button.vue     |  2 +-
 app/assets/stylesheets/framework/common.scss       |  3 ++
 app/assets/stylesheets/pages/merge_requests.scss   |  4 ---
 6 files changed, 63 insertions(+), 23 deletions(-)

(limited to 'app')

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..8f4cae8ae58 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -23,6 +23,8 @@ export default {
     TooltipOnTruncate,
     FilteredSearchDropdown,
     ReviewAppLink,
+    VisualReviewAppLink: () =>
+      import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -37,6 +39,20 @@ export default {
       type: Boolean,
       required: true,
     },
+    showVisualReviewApp: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visualReviewAppMeta: {
+      type: Object,
+      required: false,
+      default: () => ({
+        sourceProjectId: '',
+        issueId: '',
+        appUrl: '',
+      }),
+    },
   },
   deployedTextMap: {
     running: __('Deploying to'),
@@ -168,6 +184,11 @@ export default {
                     :link="deploymentExternalUrl"
                     :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
                   />
+                  <visual-review-app-link
+                    v-if="showVisualReviewApp"
+                    :link="deploymentExternalUrl"
+                    :app-metadata="visualReviewAppMeta"
+                  />
                 </template>
 
                 <template slot="result" slot-scope="slotProps">
@@ -187,11 +208,17 @@ export default {
                   </a>
                 </template>
               </filtered-search-dropdown>
-              <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"
-              />
+              <template v-else>
+                <review-app-link
+                  :link="deploymentExternalUrl"
+                  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"
+                  :app-metadata="visualReviewAppMeta"
+                />
+              </template>
             </template>
             <span
               v-if="deployment.stop_url"
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..b9f5f602117 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;
     },
@@ -48,6 +45,19 @@ export default {
     hasDeploymentMetrics() {
       return this.isPostMerge;
     },
+    visualReviewAppMeta() {
+      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.visualReviewFF && this.mr.visualReviewAppAvailable);
+    },
   },
 };
 </script>
@@ -61,14 +71,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 v-if="deployments.length" class="mr-widget-extension">
+        <deployment
+          v-for="deployment in deployments"
+          :key="deployment.id"
+          :class="deploymentClass"
+          :deployment="deployment"
+          :show-metrics="hasDeploymentMetrics"
+          :show-visual-review-app="true"
+          :visual-review-app-meta="visualReviewAppMeta"
+        />
+      </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..457a71cab95 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
@@ -19,6 +19,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 2e38b260f5f..fc488b85138 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;
   }
-- 
cgit v1.2.1