diff options
Diffstat (limited to 'app/assets/javascripts/ide')
6 files changed, 51 insertions, 9 deletions
diff --git a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue index 52593aabfea..d40aab8ee4f 100644 --- a/app/assets/javascripts/ide/components/editor_mode_dropdown.vue +++ b/app/assets/javascripts/ide/components/editor_mode_dropdown.vue @@ -50,7 +50,7 @@ export default { <gl-dropdown-item v-for="mode in modeDropdownItems" :key="mode.viewerType" - :is-check-item="true" + is-check-item :is-checked="viewer === mode.viewerType" @click="changeMode(mode.viewerType)" > diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index e0b7ac9b1e1..8962bb76926 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -4,7 +4,7 @@ import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { mapActions, mapState, mapGetters } from 'vuex'; import timeAgoMixin from '~/vue_shared/mixins/timeago'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; -import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; +import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; import { rightSidebarViews } from '../constants'; import IdeStatusList from './ide_status_list.vue'; import IdeStatusMr from './ide_status_mr.vue'; @@ -12,7 +12,7 @@ import IdeStatusMr from './ide_status_mr.vue'; export default { components: { GlIcon, - userAvatarImage, + UserAvatarImage, CiIcon, IdeStatusList, IdeStatusMr, diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index 87b60eca73c..9a529bdcee1 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -4,12 +4,12 @@ import { mapActions } from 'vuex'; import { modalTypes } from '../../constants'; import ItemButton from './button.vue'; import NewModal from './modal.vue'; -import upload from './upload.vue'; +import Upload from './upload.vue'; export default { components: { GlIcon, - upload, + Upload, ItemButton, NewModal, }, diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index d6207d4a557..9684bf8f18c 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -176,7 +176,11 @@ export default { :placeholder="placeholder" /> </form> - <ul v-if="isCreatingNewFile" class="file-templates gl-mt-3 list-inline qa-template-list"> + <ul + v-if="isCreatingNewFile" + class="file-templates gl-mt-3 list-inline" + data-qa-selector="template_list_content" + > <li v-for="(template, index) in templateTypes" :key="index" class="list-inline-item"> <gl-button variant="dashed" diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index df643675357..10e9f6a9488 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -8,6 +8,7 @@ import { parseBoolean } from '../lib/utils/common_utils'; import { resetServiceWorkersPublicPath } from '../lib/utils/webpack'; import ide from './components/ide.vue'; import { createRouter } from './ide_router'; +import { initGitlabWebIDE } from './init_gitlab_web_ide'; import { DEFAULT_THEME } from './lib/themes'; import { createStore } from './stores'; @@ -34,7 +35,7 @@ Vue.use(PerformancePlugin, { * @param {extendStoreCallback} options.extendStore - * Function that receives the default store and returns an extended one. */ -export const initIde = (el, options = {}) => { +export const initLegacyWebIDE = (el, options = {}) => { if (!el) return null; const { rootComponent = ide, extendStore = identity } = options; @@ -93,8 +94,15 @@ export const initIde = (el, options = {}) => { */ export function startIde(options) { const ideElement = document.getElementById('ide'); - if (ideElement) { + + if (!ideElement) { + return; + } + + if (gon.features?.vscodeWebIde) { + initGitlabWebIDE(ideElement); + } else { resetServiceWorkersPublicPath(); - initIde(ideElement, options); + initLegacyWebIDE(ideElement, options); } } diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js new file mode 100644 index 00000000000..a061da38d4f --- /dev/null +++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js @@ -0,0 +1,30 @@ +import { cleanTrailingSlash } from './stores/utils'; + +export const initGitlabWebIDE = async (el) => { + const { start } = await import('@gitlab/web-ide'); + + const { gitlab_url: gitlabUrl } = window.gon; + const baseUrl = new URL(process.env.GITLAB_WEB_IDE_PUBLIC_PATH, window.location.origin); + + // what: Pull what we need from the element. We will replace it soon. + const { path_with_namespace: projectPath } = JSON.parse(el.dataset.project); + const { cspNonce: nonce, branchName: ref } = el.dataset; + + // what: Clean up the element, but preserve id. + // why: This way we don't inherit any `ide-loading` side-effects. This + // mirrors the behavior of Vue when it mounts to an element. + const newEl = document.createElement(el.tagName); + newEl.id = el.id; + newEl.classList.add('gl--flex-center', 'gl-relative', 'gl-h-full'); + + el.replaceWith(newEl); + + // what: Trigger start on our new mounting element + await start(newEl, { + baseUrl: cleanTrailingSlash(baseUrl.href), + projectPath, + gitlabUrl, + ref, + nonce, + }); +}; |