1 files changed, 82 insertions, 10 deletions

diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index 23a842fab4c..1526d994770 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlModal, GlLink } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import PipelinesService from '~/pipelines/services/pipelines_service';
 import PipelineStore from '~/pipelines/stores/pipelines_store';
@@ -12,8 +12,10 @@ import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
 export default {
   components: {
     TablePagination,
-    GlDeprecatedButton,
+    GlButton,
     GlLoadingIcon,
+    GlModal,
+    GlLink,
   },
   mixins: [pipelinesMixin, CIPaginationMixin],
   props: {
@@ -38,11 +40,21 @@ export default {
       required: false,
       default: 'child',
     },
-    canRunPipeline: {
+    canCreatePipelineInTargetProject: {
       type: Boolean,
       required: false,
       default: false,
     },
+    sourceProjectFullPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    targetProjectFullPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     projectId: {
       type: String,
       required: false,
@@ -63,6 +75,7 @@ export default {
       state: store.state,
       page: getParameterByName('page') || '1',
       requestData: {},
+      modalId: 'create-pipeline-for-fork-merge-request-modal',
     };
   },
 
@@ -75,13 +88,28 @@ export default {
     },
     /**
      * The Run Pipeline button can only be rendered when:
-     * - In MR view -  we use `canRunPipeline` for that purpose
+     * - In MR view -  we use `canCreatePipelineInTargetProject` for that purpose
      * - If the latest pipeline has the `detached_merge_request_pipeline` flag
      *
      * @returns {Boolean}
      */
     canRenderPipelineButton() {
-      return this.canRunPipeline && this.latestPipelineDetachedFlag;
+      return this.latestPipelineDetachedFlag;
+    },
+    isForkMergeRequest() {
+      return this.sourceProjectFullPath !== this.targetProjectFullPath;
+    },
+    isLatestPipelineCreatedInTargetProject() {
+      const latest = this.state.pipelines[0];
+
+      return latest?.project?.full_path === `/${this.targetProjectFullPath}`;
+    },
+    shouldShowSecurityWarning() {
+      return (
+        this.canCreatePipelineInTargetProject &&
+        this.isForkMergeRequest &&
+        !this.isLatestPipelineCreatedInTargetProject
+      );
     },
     /**
      * Checks if either `detached_merge_request_pipeline` or
@@ -148,6 +176,13 @@ export default {
         mergeRequestId: this.mergeRequestId,
       });
     },
+    tryRunPipeline() {
+      if (!this.shouldShowSecurityWarning) {
+        this.onClickRunPipeline();
+      } else {
+        this.$refs.modal.show();
+      }
+    },
   },
 };
 </script>
@@ -171,16 +206,53 @@ export default {
 
     <div v-else-if="shouldRenderTable" class="table-holder">
       <div v-if="canRenderPipelineButton" class="nav justify-content-end">
-        <gl-deprecated-button
-          v-if="canRenderPipelineButton"
+        <gl-button
           variant="success"
-          class="js-run-mr-pipeline prepend-top-10 btn-wide-on-xs"
+          class="js-run-mr-pipeline gl-mt-3 btn-wide-on-xs"
           :disabled="state.isRunningMergeRequestPipeline"
-          @click="onClickRunPipeline"
+          @click="tryRunPipeline"
         >
           <gl-loading-icon v-if="state.isRunningMergeRequestPipeline" inline />
           {{ s__('Pipelines|Run Pipeline') }}
-        </gl-deprecated-button>
+        </gl-button>
+
+        <gl-modal
+          :id="modalId"
+          ref="modal"
+          :modal-id="modalId"
+          :title="s__('Pipelines|Are you sure you want to run this pipeline?')"
+          :ok-title="s__('Pipelines|Run Pipeline')"
+          ok-variant="danger"
+          @ok="onClickRunPipeline"
+        >
+          <p>
+            {{
+              s__(
+                'Pipelines|This pipeline will run code originating from a forked project merge request. This means that the code can potentially have security considerations like exposing CI variables.',
+              )
+            }}
+          </p>
+          <p>
+            {{
+              s__(
+                "Pipelines|It is recommended the code is reviewed thoroughly before running this pipeline with the parent project's CI resource.",
+              )
+            }}
+          </p>
+          <p>
+            {{
+              s__(
+                'Pipelines|If you are unsure, please ask a project maintainer to review it for you.',
+              )
+            }}
+          </p>
+          <gl-link
+            href="/help/ci/merge_request_pipelines/index.html#create-pipelines-in-the-parent-project-for-merge-requests-from-a-forked-project"
+            target="_blank"
+          >
+            {{ s__('Pipelines|More Information') }}
+          </gl-link>
+        </gl-modal>
       </div>
 
       <pipelines-table-component