Add latest changes from gitlab-org/gitlab@master

1 files changed, 36 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/web_ide_link.vue b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
index 82022d1f4d6..1227edbb50b 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -8,6 +8,7 @@ import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue';
 const KEY_EDIT = 'edit';
 const KEY_WEB_IDE = 'webide';
 const KEY_GITPOD = 'gitpod';
+const KEY_PIPELINE_EDITOR = 'pipeline_editor';
 
 export default {
   components: {
@@ -64,6 +65,11 @@ export default {
       required: false,
       default: false,
     },
+    showPipelineEditorButton: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     userPreferencesGitpodPath: {
       type: String,
       required: false,
@@ -79,6 +85,11 @@ export default {
       required: false,
       default: '',
     },
+    pipelineEditorUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
     webIdeUrl: {
       type: String,
       required: false,
@@ -117,14 +128,19 @@ export default {
   },
   data() {
     return {
-      selection: KEY_WEB_IDE,
+      selection: this.showPipelineEditorButton ? KEY_PIPELINE_EDITOR : KEY_WEB_IDE,
       showEnableGitpodModal: false,
       showForkModal: false,
     };
   },
   computed: {
     actions() {
-      return [this.webIdeAction, this.editAction, this.gitpodAction].filter((action) => action);
+      return [
+        this.pipelineEditorAction,
+        this.webIdeAction,
+        this.editAction,
+        this.gitpodAction,
+      ].filter((action) => action);
     },
     editAction() {
       if (!this.showEditButton) {
@@ -209,6 +225,24 @@ export default {
         this.showGitpodButton && this.userPreferencesGitpodPath && this.userProfileEnableGitpodPath
       );
     },
+    pipelineEditorAction() {
+      if (!this.showPipelineEditorButton) {
+        return null;
+      }
+
+      const secondaryText = __('Edit, lint, and visualize your pipeline.');
+
+      return {
+        key: KEY_PIPELINE_EDITOR,
+        text: __('Edit in pipeline editor'),
+        secondaryText,
+        tooltip: secondaryText,
+        attrs: {
+          'data-qa-selector': 'pipeline_editor_button',
+        },
+        href: this.pipelineEditorUrl,
+      };
+    },
     gitpodAction() {
       if (!this.computedShowGitpodButton) {
         return null;