diff options
Diffstat (limited to 'app/assets/javascripts/ide')
19 files changed, 74 insertions, 75 deletions
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue index d3a52f9f0cf..2b75d10f659 100644 --- a/app/assets/javascripts/ide/components/error_message.vue +++ b/app/assets/javascripts/ide/components/error_message.vue @@ -57,6 +57,6 @@ export default { @primaryAction="doAction" > <span v-html="message.text"></span> - <gl-loading-icon v-show="isLoading" inline class="vertical-align-middle ml-1" /> + <gl-loading-icon v-show="isLoading" size="sm" inline class="vertical-align-middle ml-1" /> </gl-alert> </template> diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index 0c9fd324f8c..e345e5dc099 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -130,7 +130,6 @@ export default { <div class="ide-view flex-grow d-flex"> <template v-if="loadDeferred"> <find-file - v-show="fileFindVisible" :files="allBlobs" :visible="fileFindVisible" :loading="loading" diff --git a/app/assets/javascripts/ide/components/ide_project_header.vue b/app/assets/javascripts/ide/components/ide_project_header.vue index 36891505230..1c25a8e634d 100644 --- a/app/assets/javascripts/ide/components/ide_project_header.vue +++ b/app/assets/javascripts/ide/components/ide_project_header.vue @@ -1,9 +1,9 @@ <script> -import ProjectAvatarDefault from '~/vue_shared/components/project_avatar/default.vue'; +import ProjectAvatar from '~/vue_shared/components/project_avatar.vue'; export default { components: { - ProjectAvatarDefault, + ProjectAvatar, }, props: { project: { @@ -16,8 +16,12 @@ export default { <template> <div class="context-header ide-context-header"> - <a :href="project.web_url" :title="s__('IDE|Go to project')"> - <project-avatar-default :project="project" :size="48" /> + <a :href="project.web_url" :title="s__('IDE|Go to project')" data-testid="go-to-project-link"> + <project-avatar + :project-name="project.name" + :project-avatar-url="project.avatar_url" + :size="48" + /> <span class="ide-sidebar-project-title"> <span class="sidebar-context-title"> {{ project.name }} </span> <span diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 6c7f084c164..938385f0b81 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -79,7 +79,7 @@ export default { <gl-icon :name="collapseIcon" class="ide-stage-collapse-icon" /> </div> <div v-show="!stage.isCollapsed" ref="jobList" class="card-body p-0"> - <gl-loading-icon v-if="showLoadingIcon" /> + <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" /> </template> diff --git a/app/assets/javascripts/ide/components/merge_requests/item.vue b/app/assets/javascripts/ide/components/merge_requests/item.vue index 639937481f3..2d9f74a06ee 100644 --- a/app/assets/javascripts/ide/components/merge_requests/item.vue +++ b/app/assets/javascripts/ide/components/merge_requests/item.vue @@ -41,7 +41,7 @@ export default { <template> <a :href="mergeRequestHref" class="btn-link d-flex align-items-center"> <span class="d-flex gl-mr-3 ide-search-list-current-icon"> - <gl-icon v-if="isActive" :size="18" name="mobile-issue-close" use-deprecated-sizes /> + <gl-icon v-if="isActive" :size="16" name="mobile-issue-close" /> </span> <span> <strong> {{ item.title }} </strong> diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index f8dc10420d0..e8541d3a4c3 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -61,9 +61,6 @@ export default { message: sprintf(s__('The name "%{name}" is already taken in this directory.'), { name: this.entryName, }), - type: 'alert', - parent: document, - actionConfig: null, fadeTransition: false, addBodyClass: true, }); diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue index 4d35e946d89..838c363a6a3 100644 --- a/app/assets/javascripts/ide/components/preview/navigator.vue +++ b/app/assets/javascripts/ide/components/preview/navigator.vue @@ -126,7 +126,11 @@ export default { class="ide-navigator-location form-control bg-white" readonly /> - <gl-loading-icon v-if="loading" class="position-absolute ide-preview-loading-icon" /> + <gl-loading-icon + v-if="loading" + size="sm" + class="position-absolute ide-preview-loading-icon" + /> </div> </header> </template> diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index bf2af9ffd49..5c711313ff6 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -6,9 +6,9 @@ import { EDITOR_CODE_INSTANCE_FN, EDITOR_DIFF_INSTANCE_FN, } from '~/editor/constants'; -import EditorLite from '~/editor/editor_lite'; -import { EditorWebIdeExtension } from '~/editor/extensions/editor_lite_webide_ext'; -import { deprecatedCreateFlash as flash } from '~/flash'; +import { EditorWebIdeExtension } from '~/editor/extensions/source_editor_webide_ext'; +import SourceEditor from '~/editor/source_editor'; +import createFlash from '~/flash'; import ModelManager from '~/ide/lib/common/model_manager'; import { defaultDiffEditorOptions, defaultEditorOptions } from '~/ide/lib/editor_options'; import { __ } from '~/locale'; @@ -216,7 +216,7 @@ export default { }, mounted() { if (!this.globalEditor) { - this.globalEditor = new EditorLite(); + this.globalEditor = new SourceEditor(); } this.initEditor(); @@ -250,14 +250,11 @@ export default { this.createEditorInstance(); }) .catch((err) => { - flash( - __('Error setting up editor. Please try again.'), - 'alert', - document, - null, - false, - true, - ); + createFlash({ + message: __('Error setting up editor. Please try again.'), + fadeTransition: false, + addBodyClass: true, + }); throw err; }); }, @@ -418,7 +415,11 @@ export default { const parentPath = getPathParent(this.file.path); const path = `${parentPath ? `${parentPath}/` : ''}${file.name}`; - return this.addTempImage({ name: path, rawPath: content }).then(({ name: fileName }) => { + return this.addTempImage({ + name: path, + rawPath: URL.createObjectURL(file), + content: atob(content.split('base64,')[1]), + }).then(({ name: fileName }) => { this.editor.replaceSelectedText(``); }); }); diff --git a/app/assets/javascripts/ide/components/shared/tokened_input.vue b/app/assets/javascripts/ide/components/shared/tokened_input.vue index ed0dab47947..14052c23a0c 100644 --- a/app/assets/javascripts/ide/components/shared/tokened_input.vue +++ b/app/assets/javascripts/ide/components/shared/tokened_input.vue @@ -82,7 +82,7 @@ export default { <div class="value-container rounded"> <div class="value">{{ token.label }}</div> <div class="remove-token inverted"> - <gl-icon :size="10" name="close" use-deprecated-sizes /> + <gl-icon :size="16" name="close" /> </div> </div> </button> diff --git a/app/assets/javascripts/ide/components/terminal/terminal.vue b/app/assets/javascripts/ide/components/terminal/terminal.vue index 08fb2f5e5a0..c91a98c9527 100644 --- a/app/assets/javascripts/ide/components/terminal/terminal.vue +++ b/app/assets/javascripts/ide/components/terminal/terminal.vue @@ -93,7 +93,7 @@ export default { <div class="d-flex flex-column flex-fill min-height-0 pr-3"> <div class="top-bar d-flex border-left-0 align-items-center"> <div v-if="loadingText" data-qa-selector="loading_container"> - <gl-loading-icon :inline="true" /> + <gl-loading-icon size="sm" :inline="true" /> <span>{{ loadingText }}</span> </div> <terminal-controls diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js index 5f60bf0269d..27cedd80347 100644 --- a/app/assets/javascripts/ide/ide_router.js +++ b/app/assets/javascripts/ide/ide_router.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import { deprecatedCreateFlash as flash } from '~/flash'; +import createFlash from '~/flash'; import IdeRouter from '~/ide/ide_router_extension'; import { joinPaths } from '~/lib/utils/url_utility'; import { __ } from '~/locale'; @@ -111,14 +111,11 @@ export const createRouter = (store, defaultBranch) => { } }) .catch((e) => { - flash( - __('Error while loading the project data. Please try again.'), - 'alert', - document, - null, - false, - true, - ); + createFlash({ + message: __('Error while loading the project data. Please try again.'), + fadeTransition: false, + addBodyClass: true, + }); throw e; }); } diff --git a/app/assets/javascripts/ide/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js index 1d051062637..682914df9ec 100644 --- a/app/assets/javascripts/ide/lib/diff/controller.js +++ b/app/assets/javascripts/ide/lib/diff/controller.js @@ -1,5 +1,6 @@ import { throttle } from 'lodash'; import { Range } from 'monaco-editor'; +import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants'; import Disposable from '../common/disposable'; import DirtyDiffWorker from './diff_worker'; @@ -31,7 +32,7 @@ export default class DirtyDiffController { this.modelManager = modelManager; this.decorationsController = decorationsController; this.dirtyDiffWorker = new DirtyDiffWorker(); - this.throttledComputeDiff = throttle(this.computeDiff, 250); + this.throttledComputeDiff = throttle(this.computeDiff, DEFAULT_DEBOUNCE_AND_THROTTLE_MS); this.decorate = this.decorate.bind(this); this.dirtyDiffWorker.addEventListener('message', this.decorate); diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js index 6bd28cd4fb6..ef4f47f226a 100644 --- a/app/assets/javascripts/ide/services/index.js +++ b/app/assets/javascripts/ide/services/index.js @@ -100,7 +100,7 @@ export default { return Api.commitPipelines(getters.currentProject.path_with_namespace, commitSha); }, pingUsage(projectPath) { - const url = `${gon.relative_url_root}/${projectPath}/usage_ping/web_ide_pipelines_count`; + const url = `${gon.relative_url_root}/${projectPath}/service_ping/web_ide_pipelines_count`; return axios.post(url); }, getCiConfig(projectPath, content) { diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js index 062dc150805..b22e58a376d 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 { deprecatedCreateFlash as flash } from '~/flash'; +import createFlash from '~/flash'; import { visitUrl } from '~/lib/utils/url_utility'; import { __, sprintf } from '~/locale'; import { @@ -36,16 +36,13 @@ export const createTempEntry = ( const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name; if (getters.entryExists(name)) { - flash( - sprintf(__('The name "%{name}" is already taken in this directory.'), { + createFlash({ + message: sprintf(__('The name "%{name}" is already taken in this directory.'), { name: name.split('/').pop(), }), - 'alert', - document, - null, - false, - true, - ); + fadeTransition: false, + addBodyClass: true, + }); return undefined; } @@ -79,11 +76,11 @@ export const createTempEntry = ( return file; }; -export const addTempImage = ({ dispatch, getters }, { name, rawPath = '' }) => +export const addTempImage = ({ dispatch, getters }, { name, rawPath = '', content = '' }) => dispatch('createTempEntry', { name: getters.getAvailableFileName(name), type: 'blob', - content: rawPath.split('base64,')[1], + content, rawPath, openFile: false, makeFileActive: false, @@ -284,14 +281,11 @@ export const getBranchData = ({ commit, state }, { projectId, branchId, force = if (e.response.status === 404) { reject(e); } else { - flash( - __('Error loading branch data. Please try again.'), - 'alert', - document, - null, - false, - true, - ); + createFlash({ + message: __('Error loading branch data. Please try again.'), + fadeTransition: false, + addBodyClass: true, + }); reject( new Error( diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js index 5e020f16104..f3f603d4ae9 100644 --- a/app/assets/javascripts/ide/stores/actions/merge_request.js +++ b/app/assets/javascripts/ide/stores/actions/merge_request.js @@ -36,9 +36,6 @@ export const getMergeRequestsForBranch = ( .catch((e) => { createFlash({ message: __(`Error fetching merge requests for ${branchId}`), - type: 'alert', - parent: document, - actionConfig: null, fadeTransition: false, addBodyClass: true, }); diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js index 120a577d44a..93ad19ba81e 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 { deprecatedCreateFlash as flash } from '~/flash'; +import createFlash from '~/flash'; import { __, sprintf } from '~/locale'; import api from '../../../api'; import service from '../../services'; @@ -19,14 +19,11 @@ export const getProjectData = ({ commit, state }, { namespace, projectId, force resolve(data); }) .catch(() => { - flash( - __('Error loading project data. Please try again.'), - 'alert', - document, - null, - false, - true, - ); + createFlash({ + message: __('Error loading project data. Please try again.'), + fadeTransition: false, + addBodyClass: true, + }); reject(new Error(`Project not loaded ${namespace}/${projectId}`)); }); } else { @@ -45,7 +42,11 @@ export const refreshLastCommitData = ({ commit }, { projectId, branchId } = {}) }); }) .catch((e) => { - flash(__('Error loading last commit.'), 'alert', document, null, false, true); + createFlash({ + message: __('Error loading last commit.'), + fadeTransition: false, + addBodyClass: true, + }); throw e; }); diff --git a/app/assets/javascripts/ide/stores/modules/clientside/actions.js b/app/assets/javascripts/ide/stores/modules/clientside/actions.js index 2bebf8b90ce..e36419cd7eb 100644 --- a/app/assets/javascripts/ide/stores/modules/clientside/actions.js +++ b/app/assets/javascripts/ide/stores/modules/clientside/actions.js @@ -3,7 +3,7 @@ import axios from '~/lib/utils/axios_utils'; export const pingUsage = ({ rootGetters }) => { const { web_url: projectUrl } = rootGetters.currentProject; - const url = `${projectUrl}/usage_ping/web_ide_clientside_preview`; + const url = `${projectUrl}/service_ping/web_ide_clientside_preview`; return axios.post(url); }; diff --git a/app/assets/javascripts/ide/stores/modules/commit/actions.js b/app/assets/javascripts/ide/stores/modules/commit/actions.js index 29555799074..2ff71523b1b 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 { deprecatedCreateFlash as flash } from '~/flash'; +import createFlash from '~/flash'; import { addNumericSuffix } from '~/ide/utils'; import { sprintf, __ } from '~/locale'; import { leftSidebarViews } from '../../../constants'; @@ -143,7 +143,11 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo commit(types.UPDATE_LOADING, false); if (!data.short_id) { - flash(data.message, 'alert', document, null, false, true); + createFlash({ + message: data.message, + fadeTransition: false, + addBodyClass: true, + }); return null; } diff --git a/app/assets/javascripts/ide/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js index 4019703b296..0cef3b98e61 100644 --- a/app/assets/javascripts/ide/stores/utils.js +++ b/app/assets/javascripts/ide/stores/utils.js @@ -252,10 +252,10 @@ export function extractMarkdownImagesFromEntries(mdFile, entries) { .trim(); const imageContent = entries[imagePath]?.content || entries[imagePath]?.raw; + const imageRawPath = entries[imagePath]?.rawPath; if (!isAbsolute(path) && imageContent) { - const ext = path.includes('.') ? path.split('.').pop().trim() : 'jpeg'; - const src = `data:image/${ext};base64,${imageContent}`; + const src = imageRawPath; i += 1; const key = `{{${prefix}${i}}}`; images[key] = { alt, src, title }; |