diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
11 files changed, 59 insertions, 157 deletions
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index d02dc67d933..ef3da57c240 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -1,6 +1,7 @@ <script> -import { GlModal, GlSafeHtmlDirective, GlButton, GlTooltipDirective } from '@gitlab/ui'; +import { GlModal, GlButton, GlTooltipDirective } from '@gitlab/ui'; import { mapState, mapActions, mapGetters } from 'vuex'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import { n__ } from '~/locale'; import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants'; import { createUnexpectedCommitError } from '../../lib/errors'; @@ -17,7 +18,7 @@ export default { GlButton, }, directives: { - SafeHtml: GlSafeHtmlDirective, + SafeHtml, GlTooltip: GlTooltipDirective, }, data() { diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue index 5272c4310d8..dd343bc5f79 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue @@ -1,6 +1,6 @@ <script> -import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui'; import { mapState } from 'vuex'; +import SafeHtml from '~/vue_shared/directives/safe_html'; export default { directives: { diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue index 67eedc6b37f..eba9bbcdf09 100644 --- a/app/assets/javascripts/ide/components/error_message.vue +++ b/app/assets/javascripts/ide/components/error_message.vue @@ -1,6 +1,7 @@ <script> -import { GlAlert, GlLoadingIcon, GlSafeHtmlDirective } from '@gitlab/ui'; +import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; import { mapActions } from 'vuex'; +import SafeHtml from '~/vue_shared/directives/safe_html'; export default { components: { @@ -8,7 +9,7 @@ export default { GlLoadingIcon, }, directives: { - SafeHtml: GlSafeHtmlDirective, + SafeHtml, }, props: { message: { diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 8d6a0b99e0c..9676233a443 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -1,7 +1,8 @@ <script> -import { GlTooltipDirective, GlButton, GlIcon, GlSafeHtmlDirective } from '@gitlab/ui'; +import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui'; import { throttle } from 'lodash'; import { mapActions, mapState } from 'vuex'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import { __ } from '~/locale'; import JobDescription from './detail/description.vue'; import ScrollButton from './detail/scroll_button.vue'; @@ -14,7 +15,7 @@ const scrollPositions = { export default { directives: { GlTooltip: GlTooltipDirective, - SafeHtml: GlSafeHtmlDirective, + SafeHtml, }, components: { GlButton, diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index 9a529bdcee1..ea1dbee4669 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -80,7 +80,7 @@ export default { @click="createNewItem('blob')" /> </li> - <li><upload :path="path" @create="createTempEntry" /></li> + <upload :path="path" @create="createTempEntry" /> <li> <item-button :label="__('New directory')" diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue index 76d8a0aff3d..7c10e055e91 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue @@ -65,7 +65,7 @@ export default { </script> <template> - <div> + <li> <item-button :class="buttonCssClasses" :show-label="showLabel" @@ -84,5 +84,5 @@ export default { data-qa-selector="file_upload_field" @change="openFile" /> - </div> + </li> </template> diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index c74a5052573..da2d4fbe7f0 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -7,7 +7,6 @@ import PipelinesList from '../pipelines/list.vue'; import Clientside from '../preview/clientside.vue'; import ResizablePanel from '../resizable_panel.vue'; import TerminalView from '../terminal/view.vue'; -import SwitchEditorsView from '../switch_editors/switch_editors_view.vue'; import CollapsibleSidebar from './collapsible_sidebar.vue'; // Need to add the width of the nav buttons since the resizable container contains those as well @@ -21,7 +20,7 @@ export default { }, computed: { ...mapState('terminal', { isTerminalVisible: 'isVisible' }), - ...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled', 'canUseNewWebIde']), + ...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled']), ...mapGetters(['packageJson']), ...mapState('rightPane', ['isOpen']), showLivePreview() { @@ -30,12 +29,6 @@ export default { rightExtensionTabs() { return [ { - show: this.canUseNewWebIde, - title: __('Switch editors'), - views: [{ component: SwitchEditorsView, ...rightSidebarViews.switchEditors }], - icon: 'bullhorn', - }, - { show: true, title: __('Pipelines'), views: [ @@ -60,7 +53,6 @@ export default { }, }, WIDTH, - SWITCH_EDITORS_VIEW_NAME: rightSidebarViews.switchEditors.name, }; </script> @@ -72,11 +64,6 @@ export default { :min-size="$options.WIDTH" :resizable="isOpen" > - <collapsible-sidebar - class="gl-w-full" - :extension-tabs="rightExtensionTabs" - :init-open-view="$options.SWITCH_EDITORS_VIEW_NAME" - side="right" - /> + <collapsible-sidebar class="gl-w-full" :extension-tabs="rightExtensionTabs" side="right" /> </resizable-panel> </template> diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index 7f513afe82e..7f662f528d7 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -1,17 +1,8 @@ <script> -import { - GlLoadingIcon, - GlIcon, - GlSafeHtmlDirective as SafeHtml, - GlTabs, - GlTab, - GlBadge, - GlAlert, -} from '@gitlab/ui'; -import { escape } from 'lodash'; +import { GlLoadingIcon, GlIcon, GlTabs, GlTab, GlBadge, GlAlert } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; +import SafeHtml from '~/vue_shared/directives/safe_html'; import IDEServices from '~/ide/services'; -import { sprintf, __ } from '~/locale'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import JobsList from '../jobs/list.vue'; import EmptyState from './empty_state.vue'; @@ -48,16 +39,6 @@ export default { 'stages', 'isLoadingJobs', ]), - ciLintText() { - return sprintf( - __('You can test your .gitlab-ci.yml in %{linkStart}CI Lint%{linkEnd}.'), - { - linkStart: `<a href="${escape(this.currentProject.web_url)}/-/ci/lint">`, - linkEnd: '</a>', - }, - false, - ); - }, showLoadingIcon() { return this.isLoadingPipeline && !this.hasLoadedPipeline; }, @@ -101,9 +82,8 @@ export default { :dismissible="false" class="gl-mt-5" > - <p class="gl-mb-0">{{ __('Found errors in your .gitlab-ci.yml:') }}</p> + <p class="gl-mb-0">{{ __('Unable to create pipeline') }}</p> <p class="gl-mb-0 break-word">{{ latestPipeline.yamlError }}</p> - <p v-safe-html="ciLintText" class="gl-mb-0"></p> </gl-alert> <gl-tabs v-else> <gl-tab :active="!pipelineFailed"> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index 5f35dbdc5e7..3c9c0b1ade1 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -7,6 +7,7 @@ import { EDITOR_TYPE_CODE, EDITOR_CODE_INSTANCE_FN, EDITOR_DIFF_INSTANCE_FN, + EXTENSION_CI_SCHEMA_FILE_NAME_MATCH, } from '~/editor/constants'; import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base'; import { EditorWebIdeExtension } from '~/editor/extensions/source_editor_webide_ext'; @@ -26,6 +27,7 @@ import { performanceMarkAndMeasure } from '~/performance/utils'; import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue'; import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils'; import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; +import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { leftSidebarViews, viewerTypes, @@ -53,6 +55,7 @@ export default { DiffViewer, FileTemplatesBar, }, + mixins: [glFeatureFlagMixin()], props: { file: { type: Object, @@ -145,6 +148,12 @@ export default { showTabs() { return !this.shouldHideEditor && this.isEditModeActive && this.previewMode; }, + isCiConfigFile() { + return ( + this.file.path === EXTENSION_CI_SCHEMA_FILE_NAME_MATCH && + this.editor?.getEditorType() === EDITOR_TYPE_CODE + ); + }, }, watch: { 'file.name': { @@ -232,8 +241,6 @@ export default { return; } - this.registerSchemaForFile(); - Promise.all([this.fetchFileData(), this.fetchEditorconfigRules()]) .then(() => { this.createEditorInstance(); @@ -357,6 +364,8 @@ export default { this.model.updateOptions(this.rules); + this.registerSchemaForFile(); + this.model.onChange((model) => { const { file } = model; if (!file.active) return; @@ -446,8 +455,33 @@ export default { return Promise.resolve(); }, registerSchemaForFile() { - const schema = this.getJsonSchemaForPath(this.file.path); - registerSchema(schema); + const registerExternalSchema = () => { + const schema = this.getJsonSchemaForPath(this.file.path); + return registerSchema(schema); + }; + const registerLocalSchema = async () => { + if (!this.CiSchemaExtension) { + const { CiSchemaExtension } = await import( + '~/editor/extensions/source_editor_ci_schema_ext' + ).catch((e) => + createAlert({ + message: e, + }), + ); + this.CiSchemaExtension = CiSchemaExtension; + } + this.editor.use({ definition: this.CiSchemaExtension }); + this.editor.registerCiSchema(); + }; + + if (this.isCiConfigFile && this.glFeatures.schemaLinting) { + registerLocalSchema(); + } else { + if (this.CiSchemaExtension) { + this.editor.unuse(this.CiSchemaExtension); + } + registerExternalSchema(); + } }, updateEditor(data) { // Looks like our model wrapper `.dispose` causes the monaco editor to emit some position changes after diff --git a/app/assets/javascripts/ide/components/switch_editors/switch_editors_view.vue b/app/assets/javascripts/ide/components/switch_editors/switch_editors_view.vue deleted file mode 100644 index 00164f65e33..00000000000 --- a/app/assets/javascripts/ide/components/switch_editors/switch_editors_view.vue +++ /dev/null @@ -1,103 +0,0 @@ -<script> -import { GlButton, GlEmptyState, GlLink } from '@gitlab/ui'; -import { mapState } from 'vuex'; -import { createAlert } from '~/flash'; -import { logError } from '~/lib/logger'; -import axios from '~/lib/utils/axios_utils'; -import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal'; -import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending'; -import { s__, __ } from '~/locale'; -import eventHub from '../../eventhub'; - -export const MSG_DESCRIPTION = s__('WebIDE|You are invited to experience the new Web IDE.'); -export const MSG_BUTTON_TEXT = s__('WebIDE|Switch to new Web IDE'); -export const MSG_LEARN_MORE = __('Learn more'); -export const MSG_TITLE = s__('WebIDE|Ready for something new?'); - -export const MSG_CONFIRM = s__( - 'WebIDE|Are you sure you want to switch editors? You will lose any unsaved changes.', -); -export const MSG_ERROR_ALERT = s__( - 'WebIDE|Something went wrong while updating the user preferences. Please see developer console for details.', -); - -export default { - components: { - GlButton, - GlEmptyState, - GlLink, - }, - data() { - return { - loading: false, - }; - }, - computed: { - ...mapState(['switchEditorSvgPath', 'links', 'userPreferencesPath']), - }, - methods: { - async submitSwitch() { - const confirmed = await confirmAction(MSG_CONFIRM, { - primaryBtnText: __('Switch editors'), - cancelBtnText: __('Cancel'), - }); - - if (!confirmed) { - return; - } - - try { - await axios.put(this.userPreferencesPath, { - user: { use_legacy_web_ide: false }, - }); - } catch (e) { - // why: We do not want to translate console logs - // eslint-disable-next-line @gitlab/require-i18n-strings - logError('Error while updating user preferences', e); - createAlert({ - message: MSG_ERROR_ALERT, - }); - return; - } - - eventHub.$emit('skip-beforeunload'); - window.location.reload(); - }, - // what: ignoreWhilePending prevents double confirmation boxes - onSwitchClicked: ignoreWhilePending(async function onSwitchClicked() { - this.loading = true; - - try { - await this.submitSwitch(); - } finally { - this.loading = false; - } - }), - }, - MSG_TITLE, - MSG_DESCRIPTION, - MSG_BUTTON_TEXT, - MSG_LEARN_MORE, -}; -</script> - -<template> - <div class="gl-h-full gl-display-flex gl-flex-direction-column gl-justify-content-center"> - <gl-empty-state :svg-path="switchEditorSvgPath" :svg-height="150" :title="$options.MSG_TITLE"> - <template #description> - <span>{{ $options.MSG_DESCRIPTION }}</span> - <gl-link :href="links.newWebIDEHelpPagePath">{{ $options.MSG_LEARN_MORE }}</gl-link - >. - </template> - <template #actions> - <gl-button - category="primary" - variant="confirm" - :loading="loading" - @click="onSwitchClicked" - >{{ $options.MSG_BUTTON_TEXT }}</gl-button - > - </template> - </gl-empty-state> - </div> -</template> diff --git a/app/assets/javascripts/ide/components/terminal/empty_state.vue b/app/assets/javascripts/ide/components/terminal/empty_state.vue index 623ba719b28..fa93f6d42a5 100644 --- a/app/assets/javascripts/ide/components/terminal/empty_state.vue +++ b/app/assets/javascripts/ide/components/terminal/empty_state.vue @@ -1,5 +1,6 @@ <script> -import { GlLoadingIcon, GlButton, GlAlert, GlSafeHtmlDirective } from '@gitlab/ui'; +import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui'; +import SafeHtml from '~/vue_shared/directives/safe_html'; export default { components: { @@ -8,7 +9,7 @@ export default { GlAlert, }, directives: { - SafeHtml: GlSafeHtmlDirective, + SafeHtml, }, props: { isLoading: { |