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 | 73 |
1 files changed, 18 insertions, 55 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 3c08142e2b9..82f4edcbd5f 100644 --- a/app/assets/javascripts/vue_shared/components/web_ide_link.vue +++ b/app/assets/javascripts/vue_shared/components/web_ide_link.vue @@ -3,9 +3,7 @@ import { GlModal, GlSprintf, GlLink } from '@gitlab/ui'; import { s__, __ } from '~/locale'; import { visitUrl } from '~/lib/utils/url_utility'; import ActionsButton from '~/vue_shared/components/actions_button.vue'; -import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue'; -import ConfirmForkModal from '~/vue_shared/components/confirm_fork_modal.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; +import ConfirmForkModal from '~/vue_shared/components/web_ide/confirm_fork_modal.vue'; import { KEY_EDIT, KEY_WEB_IDE, KEY_GITPOD, KEY_PIPELINE_EDITOR } from './constants'; export const i18n = { @@ -21,22 +19,18 @@ export const i18n = { webIdeTooltip: s__( 'WebIDE|Quickly and easily edit multiple files in your project. Press . to open', ), + toggleText: __('Edit'), }; -export const PREFERRED_EDITOR_KEY = 'gl-web-ide-button-selected'; -export const PREFERRED_EDITOR_RESET_KEY = 'gl-web-ide-button-selected-reset'; - export default { components: { ActionsButton, - LocalStorageSync, GlModal, GlSprintf, GlLink, ConfirmForkModal, }, i18n, - mixins: [glFeatureFlagsMixin()], props: { isFork: { type: Boolean, @@ -141,7 +135,6 @@ export default { }, data() { return { - selection: this.showPipelineEditorButton ? KEY_PIPELINE_EDITOR : KEY_WEB_IDE, showEnableGitpodModal: false, showForkModal: false, }; @@ -155,10 +148,11 @@ export default { this.gitpodAction, ].filter((action) => action); }, + hasActions() { + return this.actions.length > 0; + }, editAction() { - if (!this.showEditButton) { - return null; - } + if (!this.showEditButton) return null; const handleOptions = this.needsToFork ? { @@ -176,9 +170,8 @@ export default { return { key: KEY_EDIT, - text: __('Edit'), + text: __('Edit single file'), secondaryText: __('Edit this file only.'), - tooltip: '', attrs: { 'data-qa-selector': 'edit_button', 'data-track-action': 'click_consolidated_edit', @@ -199,13 +192,10 @@ export default { return __('Web IDE'); }, webIdeAction() { - if (!this.showWebIdeButton) { - return null; - } + if (!this.showWebIdeButton) return null; const handleOptions = this.needsToFork ? { - href: '#modal-confirm-fork-webide', handle: () => { if (this.disableForkModal) { this.$emit('edit', 'ide'); @@ -216,9 +206,7 @@ export default { }, } : { - href: this.webIdeUrl, - handle: (evt) => { - evt.preventDefault(); + handle: () => { visitUrl(this.webIdeUrl, true); }, }; @@ -227,7 +215,6 @@ export default { key: KEY_WEB_IDE, text: this.webIdeActionText, secondaryText: this.$options.i18n.webIdeText, - tooltip: this.$options.i18n.webIdeTooltip, attrs: { 'data-qa-selector': 'web_ide_button', 'data-track-action': 'click_consolidated_edit_ide', @@ -258,7 +245,6 @@ export default { key: KEY_PIPELINE_EDITOR, text: __('Edit in pipeline editor'), secondaryText, - tooltip: secondaryText, attrs: { 'data-qa-selector': 'pipeline_editor_button', }, @@ -283,7 +269,6 @@ export default { key: KEY_GITPOD, text: this.gitpodActionText, secondaryText, - tooltip: secondaryText, attrs: { 'data-qa-selector': 'gitpod_button', }, @@ -309,53 +294,31 @@ export default { }, }; }, - }, - mounted() { - this.resetPreferredEditor(); + mountForkModal() { + const { disableForkModal, showWebIdeButton, showEditButton } = this; + if (disableForkModal) return false; + + return showWebIdeButton || showEditButton; + }, }, methods: { - select(key) { - this.selection = key; - }, showModal(dataKey) { this[dataKey] = true; }, - resetPreferredEditor() { - if (!this.glFeatures.vscodeWebIde || this.showEditButton) { - return; - } - - if (localStorage.getItem(PREFERRED_EDITOR_RESET_KEY) === 'true') { - return; - } - - localStorage.setItem(PREFERRED_EDITOR_KEY, KEY_WEB_IDE); - localStorage.setItem(PREFERRED_EDITOR_RESET_KEY, true); - - this.select(KEY_WEB_IDE); - }, }, webIdeButtonId: 'web-ide-link', - PREFERRED_EDITOR_KEY, }; </script> <template> <div class="gl-sm-ml-3"> <actions-button + v-if="hasActions" :id="$options.webIdeButtonId" :actions="actions" - :selected-key="selection" + :toggle-text="$options.i18n.toggleText" :variant="isBlob ? 'confirm' : 'default'" :category="isBlob ? 'primary' : 'secondary'" - show-action-tooltip - @select="select" - /> - <local-storage-sync - :storage-key="$options.PREFERRED_EDITOR_KEY" - :value="selection" - as-string - @input="select" /> <gl-modal v-if="computedShowGitpodButton && !gitpodEnabled" @@ -369,7 +332,7 @@ export default { </gl-sprintf> </gl-modal> <confirm-fork-modal - v-if="showWebIdeButton || showEditButton" + v-if="mountForkModal" v-model="showForkModal" :modal-id="forkModalId" :fork-path="forkPath" |