1 files changed, 17 insertions, 0 deletions
diff --git a/app/assets/javascripts/environments/components/enable_review_app_modal.vue b/app/assets/javascripts/environments/components/enable_review_app_modal.vue
index b0c0f83b88a..d770a2302e8 100644
--- a/app/assets/javascripts/environments/components/enable_review_app_modal.vue
+++ b/app/assets/javascripts/environments/components/enable_review_app_modal.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlLink, GlModal, GlSprintf } from '@gitlab/ui';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
@@ -25,6 +26,9 @@ export default {
     step3: s__(
       `EnableReviewApp|%{stepStart}Step 3%{stepEnd}. Add it to the project %{linkStart}gitlab-ci.yml%{linkEnd} file.`,
     ),
+    step4: s__(
+      `EnableReviewApp|%{stepStart}Step 4 (optional)%{stepEnd}. Enable Visual Reviews by following the %{linkStart}setup instructions%{linkEnd}.`,
+    ),
   },
   modalInfo: {
     closeText: s__('EnableReviewApp|Close'),
@@ -45,6 +49,9 @@ export default {
   except:
     - ${this.defaultBranchName}`;
     },
+    visualReviewsDocs() {
+      return helpPagePath('ci/review_apps/index.md', { anchor: 'visual-reviews' });
+    },
   },
 };
 </script>
@@ -103,5 +110,15 @@ export default {
         </template>
       </gl-sprintf>
     </p>
+    <p>
+      <gl-sprintf :message="$options.instructionText.step4">
+        <template #step="{ content }">
+          <strong>{{ content }}</strong>
+        </template>
+        <template #link="{ content }">
+          <gl-link :href="visualReviewsDocs" target="_blank">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </p>
   </gl-modal>
 </template>