diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/web_ide_link.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/web_ide_link.vue | 92 |
1 files changed, 80 insertions, 12 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 8307c6d3b55..877414519f7 100644 --- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue +++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue @@ -4,6 +4,7 @@ import { __ } from '~/locale'; import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; import ActionsButton from '~/vue_shared/components/actions_button.vue'; +const KEY_EDIT = 'edit'; const KEY_WEB_IDE = 'webide'; const KEY_GITPOD = 'gitpod'; @@ -13,15 +14,31 @@ export default { LocalStorageSync, }, props: { - webIdeUrl: { - type: String, - required: true, + isFork: { + type: Boolean, + required: false, + default: false, }, needsToFork: { type: Boolean, required: false, default: false, }, + gitpodEnabled: { + type: Boolean, + required: false, + default: false, + }, + isBlob: { + type: Boolean, + required: false, + default: false, + }, + showEditButton: { + type: Boolean, + required: false, + default: true, + }, showWebIdeButton: { type: Boolean, required: false, @@ -32,15 +49,20 @@ export default { required: false, default: false, }, - gitpodUrl: { + editUrl: { type: String, required: false, default: '', }, - gitpodEnabled: { - type: Boolean, + webIdeUrl: { + type: String, required: false, - default: false, + default: '', + }, + gitpodUrl: { + type: String, + required: false, + default: '', }, }, data() { @@ -50,7 +72,33 @@ export default { }, computed: { actions() { - return [this.webIdeAction, this.gitpodAction].filter(x => x); + return [this.webIdeAction, this.editAction, this.gitpodAction].filter(action => action); + }, + editAction() { + if (!this.showEditButton) { + return null; + } + + const handleOptions = this.needsToFork + ? { + href: '#modal-confirm-fork-edit', + handle: () => this.showModal('#modal-confirm-fork-edit'), + } + : { href: this.editUrl }; + + return { + key: KEY_EDIT, + text: __('Edit'), + secondaryText: __('Edit this file only.'), + tooltip: '', + attrs: { + 'data-qa-selector': 'edit_button', + 'data-track-event': 'click_edit', + // eslint-disable-next-line @gitlab/require-i18n-strings + 'data-track-label': 'Edit', + }, + ...handleOptions, + }; }, webIdeAction() { if (!this.showWebIdeButton) { @@ -58,16 +106,30 @@ export default { } const handleOptions = this.needsToFork - ? { href: '#modal-confirm-fork', handle: () => this.showModal('#modal-confirm-fork') } + ? { + href: '#modal-confirm-fork-webide', + handle: () => this.showModal('#modal-confirm-fork-webide'), + } : { href: this.webIdeUrl }; + let text = __('Web IDE'); + + if (this.isBlob) { + text = __('Edit in Web IDE'); + } else if (this.isFork) { + text = __('Edit fork in Web IDE'); + } + return { key: KEY_WEB_IDE, - text: __('Web IDE'), + text, secondaryText: __('Quickly and easily edit multiple files in your project.'), tooltip: '', attrs: { 'data-qa-selector': 'web_ide_button', + 'data-track-event': 'click_edit_ide', + // eslint-disable-next-line @gitlab/require-i18n-strings + 'data-track-label': 'Web IDE', }, ...handleOptions, }; @@ -107,8 +169,14 @@ export default { </script> <template> - <div> - <actions-button :actions="actions" :selected-key="selection" @select="select" /> + <div class="d-inline-block gl-ml-3"> + <actions-button + :actions="actions" + :selected-key="selection" + :variant="isBlob ? 'info' : 'default'" + :category="isBlob ? 'primary' : 'secondary'" + @select="select" + /> <local-storage-sync storage-key="gl-web-ide-button-selected" :value="selection" |