diff options
Diffstat (limited to 'app/assets/javascripts/ide')
13 files changed, 55 insertions, 46 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/detail/description.vue b/app/assets/javascripts/ide/components/jobs/detail/description.vue index c184e25f67f..00059d01308 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/description.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/description.vue @@ -23,7 +23,12 @@ export default { <template> <div class="d-flex align-items-center"> - <ci-icon is-borderless :status="job.status" :size="24" class="d-flex" /> + <ci-icon + is-borderless + :status="job.status" + :size="24" + class="gl-align-items-center gl-border gl-display-inline-flex gl-z-index-1" + /> <span class="gl-ml-3"> {{ job.name }} <a diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 2284ffb8480..4d8c62d3430 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -1,6 +1,6 @@ <script> import { GlLoadingIcon, GlIcon, GlTooltipDirective, GlBadge } from '@gitlab/ui'; -import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import { __ } from '~/locale'; import Item from './item.vue'; export default { @@ -10,7 +10,6 @@ export default { components: { GlIcon, GlBadge, - CiIcon, Item, GlLoadingIcon, }, @@ -27,11 +26,15 @@ export default { }, computed: { collapseIcon() { - return this.stage.isCollapsed ? 'chevron-lg-left' : 'chevron-lg-down'; + return this.stage.isCollapsed ? 'chevron-lg-down' : 'chevron-lg-up'; }, showLoadingIcon() { return this.stage.isLoading && !this.stage.jobs.length; }, + stageTitle() { + const prefix = __('Stage'); + return `${prefix}: ${this.stage.name}`; + }, jobsCount() { return this.stage.jobs.length; }, @@ -57,29 +60,29 @@ export default { <template> <div class="ide-stage card gl-mt-3"> <div - ref="cardHeader" :class="{ 'border-bottom-0': stage.isCollapsed, }" - class="card-header" + class="card-header gl-align-items-center gl-cursor-pointer gl-display-flex" + data-testid="card-header" @click="toggleCollapsed" > - <ci-icon :status="stage.status" :size="24" /> <strong ref="stageTitle" v-gl-tooltip="showTooltip" :title="showTooltip ? stage.name : null" data-container="body" - class="gl-ml-3 text-truncate" + class="gl-text-truncate" + data-testid="stage-title" > - {{ stage.name }} + {{ stageTitle }} </strong> <div v-if="!stage.isLoading || stage.jobs.length" class="gl-mr-3 gl-ml-2"> <gl-badge>{{ jobsCount }}</gl-badge> </div> - <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" /> + <gl-icon :name="collapseIcon" class="gl-absolute gl-right-5" /> </div> - <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0"> + <div v-show="!stage.isCollapsed" class="card-body p-0" data-testid="job-list"> <gl-loading-icon v-if="showLoadingIcon" size="sm" /> <template v-else> <item v-for="job in stage.jobs" :key="job.id" :job="job" @clickViewLog="clickViewLog" /> diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index 9684bf8f18c..dbfaeba9708 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -1,7 +1,7 @@ <script> import { GlModal, GlButton } from '@gitlab/ui'; import { mapActions, mapState, mapGetters } from 'vuex'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __, sprintf } from '~/locale'; import { modalTypes } from '../../constants'; import { trimPathComponents, getPathParent } from '../../utils'; @@ -77,7 +77,7 @@ export default { if (this.modalType === modalTypes.rename) { if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) { - createFlash({ + createAlert({ message: sprintf(__('The name "%{name}" is already taken in this directory.'), { name: this.entryName, }), diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index a1396995a3b..5f35dbdc5e7 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -11,7 +11,7 @@ import { import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base'; import { EditorWebIdeExtension } from '~/editor/extensions/source_editor_webide_ext'; import SourceEditor from '~/editor/source_editor'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import ModelManager from '~/ide/lib/common/model_manager'; import { defaultDiffEditorOptions, defaultEditorOptions } from '~/ide/lib/editor_options'; import { __ } from '~/locale'; @@ -239,7 +239,7 @@ export default { this.createEditorInstance(); }) .catch((err) => { - createFlash({ + createAlert({ message: __('Error setting up editor. Please try again.'), fadeTransition: false, addBodyClass: true, @@ -331,7 +331,7 @@ export default { useLivePreviewExtension(); }) .catch((e) => - createFlash({ + createAlert({ message: e, }), ); diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index 10e9f6a9488..1a191f6f76f 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -99,7 +99,9 @@ export function startIde(options) { return; } - if (gon.features?.vscodeWebIde) { + const useNewWebIde = parseBoolean(ideElement.dataset.useNewWebIde); + + if (useNewWebIde) { initGitlabWebIDE(ideElement); } else { resetServiceWorkersPublicPath(); diff --git a/app/assets/javascripts/ide/init_gitlab_web_ide.js b/app/assets/javascripts/ide/init_gitlab_web_ide.js index a061da38d4f..140f2895a29 100644 --- a/app/assets/javascripts/ide/init_gitlab_web_ide.js +++ b/app/assets/javascripts/ide/init_gitlab_web_ide.js @@ -7,8 +7,7 @@ export const initGitlabWebIDE = async (el) => { 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; + const { cspNonce: nonce, branchName: ref, projectPath } = el.dataset; // what: Clean up the element, but preserve id. // why: This way we don't inherit any `ide-loading` side-effects. This diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js index b22e58a376d..dc0f3a1d7e9 100644 --- a/app/assets/javascripts/ide/stores/actions.js +++ b/app/assets/javascripts/ide/stores/actions.js @@ -1,6 +1,6 @@ import { escape } from 'lodash'; import Vue from 'vue'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { visitUrl } from '~/lib/utils/url_utility'; import { __, sprintf } from '~/locale'; import { @@ -36,7 +36,7 @@ export const createTempEntry = ( const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name; if (getters.entryExists(name)) { - createFlash({ + createAlert({ message: sprintf(__('The name "%{name}" is already taken in this directory.'), { name: name.split('/').pop(), }), @@ -281,7 +281,7 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force = if (e.response.status === 404) { reject(e); } else { - createFlash({ + createAlert({ message: __('Error loading branch data. Please try again.'), fadeTransition: false, addBodyClass: true, diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js index f3f603d4ae9..cd8088bf667 100644 --- a/app/assets/javascripts/ide/stores/actions/merge_request.js +++ b/app/assets/javascripts/ide/stores/actions/merge_request.js @@ -1,4 +1,4 @@ -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __ } from '~/locale'; import { leftSidebarViews, PERMISSION_READ_MR, MAX_MR_FILES_AUTO_OPEN } from '../../constants'; import service from '../../services'; @@ -34,7 +34,7 @@ export const getMergeRequestsForBranch = ( } }) .catch((e) => { - createFlash({ + createAlert({ message: __(`Error fetching merge requests for ${branchId}`), fadeTransition: false, addBodyClass: true, @@ -233,7 +233,7 @@ export const openMergeRequest = async ( await dispatch('openMergeRequestChanges', changes); } catch (e) { - createFlash({ message: __('Error while loading the merge request. Please try again.') }); + createAlert({ message: __('Error while loading the merge request. Please try again.') }); throw e; } }; diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js index 37a405e3fac..7a6a267e7d0 100644 --- a/app/assets/javascripts/ide/stores/actions/project.js +++ b/app/assets/javascripts/ide/stores/actions/project.js @@ -1,5 +1,5 @@ import { escape } from 'lodash'; -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { __, sprintf } from '~/locale'; import { logError } from '~/lib/logger'; import api from '~/api'; @@ -11,7 +11,7 @@ const ERROR_LOADING_PROJECT = __('Error loading project data. Please try again.' const errorFetchingData = (e) => { logError(ERROR_LOADING_PROJECT, e); - createFlash({ + createAlert({ message: ERROR_LOADING_PROJECT, fadeTransition: false, addBodyClass: true, @@ -51,7 +51,7 @@ export const refreshLastCommitData = ({ commit }, { projectId, branchId } = {}) }); }) .catch((e) => { - createFlash({ + createAlert({ message: __('Error loading last commit.'), fadeTransition: false, addBodyClass: true, diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js index 2ff71523b1b..cbc6e0fe519 100644 --- a/app/assets/javascripts/ide/stores/modules/commit/actions.js +++ b/app/assets/javascripts/ide/stores/modules/commit/actions.js @@ -1,4 +1,4 @@ -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import { addNumericSuffix } from '~/ide/utils'; import { sprintf, __ } from '~/locale'; import { leftSidebarViews } from '../../../constants'; @@ -143,7 +143,7 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo commit(types.UPDATE_LOADING, false); if (!data.short_id) { - createFlash({ + createAlert({ message: data.message, fadeTransition: false, addBodyClass: true, diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js index 82d9300d30b..91868132a5a 100644 --- a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js +++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_controls.js @@ -1,4 +1,4 @@ -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import httpStatus from '~/lib/utils/http_status'; import * as terminalService from '../../../../services/terminals'; @@ -26,7 +26,7 @@ export const receiveStartSessionSuccess = ({ commit, dispatch }, data) => { }; export const receiveStartSessionError = ({ dispatch }) => { - createFlash({ message: messages.UNEXPECTED_ERROR_STARTING }); + createAlert({ message: messages.UNEXPECTED_ERROR_STARTING }); dispatch('killSession'); }; @@ -59,7 +59,7 @@ export const receiveStopSessionSuccess = ({ dispatch }) => { }; export const receiveStopSessionError = ({ dispatch }) => { - createFlash({ message: messages.UNEXPECTED_ERROR_STOPPING }); + createAlert({ message: messages.UNEXPECTED_ERROR_STOPPING }); dispatch('killSession'); }; diff --git a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js index 7fe1a8cc2df..4aa0768d394 100644 --- a/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js +++ b/app/assets/javascripts/ide/stores/modules/terminal/actions/session_status.js @@ -1,4 +1,4 @@ -import createFlash from '~/flash'; +import { createAlert } from '~/flash'; import axios from '~/lib/utils/axios_utils'; import * as messages from '../messages'; import * as types from '../mutation_types'; @@ -42,7 +42,7 @@ export const receiveSessionStatusSuccess = ({ commit, dispatch }, data) => { }; export const receiveSessionStatusError = ({ dispatch }) => { - createFlash({ message: messages.UNEXPECTED_ERROR_STATUS }); + createAlert({ message: messages.UNEXPECTED_ERROR_STATUS }); dispatch('killSession'); }; diff --git a/app/assets/javascripts/ide/utils.js b/app/assets/javascripts/ide/utils.js index a7e6506b045..83a3d7f2ac3 100644 --- a/app/assets/javascripts/ide/utils.js +++ b/app/assets/javascripts/ide/utils.js @@ -1,5 +1,6 @@ import { flatten, isString } from 'lodash'; import { languages } from 'monaco-editor'; +import { setDiagnosticsOptions as yamlDiagnosticsOptions } from 'monaco-yaml'; import { performanceMarkAndMeasure } from '~/performance/utils'; import { SIDE_LEFT, SIDE_RIGHT } from './constants'; @@ -82,17 +83,16 @@ export function registerLanguages(def, ...defs) { } export function registerSchema(schema, options = {}) { - const defaults = [languages.json.jsonDefaults, languages.yaml.yamlDefaults]; - defaults.forEach((d) => - d.setDiagnosticsOptions({ - validate: true, - enableSchemaRequest: true, - hover: true, - completion: true, - schemas: [schema], - ...options, - }), - ); + const defaultOptions = { + validate: true, + enableSchemaRequest: true, + hover: true, + completion: true, + schemas: [schema], + ...options, + }; + languages.json.jsonDefaults.setDiagnosticsOptions(defaultOptions); + yamlDiagnosticsOptions(defaultOptions); } export const otherSide = (side) => (side === SIDE_RIGHT ? SIDE_LEFT : SIDE_RIGHT); |