1 files changed, 88 insertions, 8 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 6da2d39a95a..f02cd5c4e2e 100644
--- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue
+++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue
@@ -1,6 +1,7 @@
 <script>
 import $ from 'jquery';
-import { __ } from '~/locale';
+import { GlModal, GlSprintf, GlLink } from '@gitlab/ui';
+import { s__, __ } from '~/locale';
 import ActionsButton from '~/vue_shared/components/actions_button.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
@@ -12,6 +13,19 @@ export default {
   components: {
     ActionsButton,
     LocalStorageSync,
+    GlModal,
+    GlSprintf,
+    GlLink,
+  },
+  i18n: {
+    modal: {
+      title: __('Enable Gitpod?'),
+      content: s__(
+        'Gitpod|To use Gitpod you must first enable the feature in the integrations section of your %{linkStart}user preferences%{linkEnd}.',
+      ),
+      actionCancelText: __('Cancel'),
+      actionPrimaryText: __('Enable Gitpod'),
+    },
   },
   props: {
     isFork: {
@@ -49,6 +63,16 @@ export default {
       required: false,
       default: false,
     },
+    userPreferencesGitpodPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    userProfileEnableGitpodPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
     editUrl: {
       type: String,
       required: false,
@@ -74,10 +98,16 @@ export default {
       required: false,
       default: '',
     },
+    disableForkModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       selection: KEY_WEB_IDE,
+      showEnableGitpodModal: false,
     };
   },
   computed: {
@@ -93,8 +123,12 @@ export default {
         ? {
             href: '#modal-confirm-fork-edit',
             handle: () => {
-              this.$emit('edit', 'simple');
-              this.showModal('#modal-confirm-fork-edit');
+              if (this.disableForkModal) {
+                this.$emit('edit', 'simple');
+                return;
+              }
+
+              this.showJQueryModal('#modal-confirm-fork-edit');
             },
           }
         : { href: this.editUrl };
@@ -132,8 +166,12 @@ export default {
         ? {
             href: '#modal-confirm-fork-webide',
             handle: () => {
-              this.$emit('edit', 'ide');
-              this.showModal('#modal-confirm-fork-webide');
+              if (this.disableForkModal) {
+                this.$emit('edit', 'ide');
+                return;
+              }
+
+              this.showJQueryModal('#modal-confirm-fork-webide');
             },
           }
         : { href: this.webIdeUrl };
@@ -154,14 +192,23 @@ export default {
     gitpodActionText() {
       return this.gitpodText || __('Gitpod');
     },
+    computedShowGitpodButton() {
+      return (
+        this.showGitpodButton && this.userPreferencesGitpodPath && this.userProfileEnableGitpodPath
+      );
+    },
     gitpodAction() {
-      if (!this.showGitpodButton) {
+      if (!this.computedShowGitpodButton) {
         return null;
       }
 
       const handleOptions = this.gitpodEnabled
         ? { href: this.gitpodUrl }
-        : { href: '#modal-enable-gitpod', handle: () => this.showModal('#modal-enable-gitpod') };
+        : {
+            handle: () => {
+              this.showModal('showEnableGitpodModal');
+            },
+          };
 
       const secondaryText = __('Launch a ready-to-code development environment for your project.');
 
@@ -176,14 +223,36 @@ export default {
         ...handleOptions,
       };
     },
+    enableGitpodModalProps() {
+      return {
+        'modal-id': 'enable-gitpod-modal',
+        size: 'sm',
+        title: this.$options.i18n.modal.title,
+        'action-cancel': {
+          text: this.$options.i18n.modal.actionCancelText,
+        },
+        'action-primary': {
+          text: this.$options.i18n.modal.actionPrimaryText,
+          attributes: {
+            variant: 'confirm',
+            category: 'primary',
+            href: this.userProfileEnableGitpodPath,
+            'data-method': 'put',
+          },
+        },
+      };
+    },
   },
   methods: {
     select(key) {
       this.selection = key;
     },
-    showModal(id) {
+    showJQueryModal(id) {
       $(id).modal('show');
     },
+    showModal(dataKey) {
+      this[dataKey] = true;
+    },
   },
 };
 </script>
@@ -202,5 +271,16 @@ export default {
       :value="selection"
       @input="select"
     />
+    <gl-modal
+      v-if="computedShowGitpodButton && !gitpodEnabled"
+      v-model="showEnableGitpodModal"
+      v-bind="enableGitpodModalProps"
+    >
+      <gl-sprintf :message="$options.i18n.modal.content">
+        <template #link="{ content }">
+          <gl-link :href="userPreferencesGitpodPath">{{ content }}</gl-link>
+        </template>
+      </gl-sprintf>
+    </gl-modal>
   </div>
 </template>