Merge branch '10761-add-mr-widget-review-instructions-ce-backport' into 'master'

CE Backport for Add Visual Review instructions to the MR Widget

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

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,12 +208,18 @@ export default {
                   </a>
                 </template>
               </filtered-search-dropdown>
+              <template v-else>
                 <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"
+                  :app-metadata="visualReviewAppMeta"
                 />
               </template>
+            </template>
             <span
               v-if="deployment.stop_url"
               v-gl-tooltip

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">
+    <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>

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>

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"
  * />

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;

app/assets/stylesheets/pages/merge_requests.scss

@@ -972,10 +972,6 @@
     }
   }
 
-  .btn svg {
-    fill: $gray-700;
-  }
-
   .dropdown-menu {
     width: 400px;
   }

spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_container_spec.js

-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { mount, createLocalVue } from '@vue/test-utils';
 import MrWidgetPipelineContainer from '~/vue_merge_request_widget/components/mr_widget_pipeline_container.vue';
 import MrWidgetPipeline from '~/vue_merge_request_widget/components/mr_widget_pipeline.vue';
 import { mockStore } from '../mock_data';
@@ -9,7 +9,7 @@ describe('MrWidgetPipelineContainer', () => {
   const factory = (props = {}) => {
     const localVue = createLocalVue();
 
-    wrapper = shallowMount(localVue.extend(MrWidgetPipelineContainer), {
+    wrapper = mount(localVue.extend(MrWidgetPipelineContainer), {
       propsData: {
         mr: Object.assign({}, mockStore),
         ...props,

spec/javascripts/vue_mr_widget/mock_data.js

@@ -235,11 +235,44 @@ export default {
   troubleshooting_docs_path: 'help',
   merge_request_pipelines_docs_path: '/help/ci/merge_request_pipelines/index.md',
   squash: true,
+  visual_review_app_available: true,
 };
 
 export const mockStore = {
-  pipeline: { id: 0 },
-  mergePipeline: { id: 1 },
+  pipeline: {
+    id: 0,
+    details: {
+      status: {
+        details_path: '/root/review-app-tester/pipelines/66',
+        favicon:
+          '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2. png',
+        group: 'success-with-warnings',
+        has_details: true,
+        icon: 'status_warning',
+        illustration: null,
+        label: 'passed with warnings',
+        text: 'passed',
+        tooltip: 'passed',
+      },
+    },
+  },
+  mergePipeline: {
+    id: 1,
+    details: {
+      status: {
+        details_path: '/root/review-app-tester/pipelines/66',
+        favicon:
+          '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2. png',
+        group: 'success-with-warnings',
+        has_details: true,
+        icon: 'status_warning',
+        illustration: null,
+        label: 'passed with warnings',
+        text: 'passed',
+        tooltip: 'passed',
+      },
+    },
+  },
   targetBranch: 'target-branch',
   sourceBranch: 'source-branch',
   sourceBranchLink: 'source-branch-link',