diff options
Diffstat (limited to 'app/assets/javascripts/ide')
15 files changed, 112 insertions, 27 deletions
diff --git a/app/assets/javascripts/ide/components/cannot_push_code_alert.vue b/app/assets/javascripts/ide/components/cannot_push_code_alert.vue new file mode 100644 index 00000000000..d3e51e6e140 --- /dev/null +++ b/app/assets/javascripts/ide/components/cannot_push_code_alert.vue @@ -0,0 +1,40 @@ +<script> +import { GlAlert, GlButton } from '@gitlab/ui'; + +export default { + components: { + GlAlert, + GlButton, + }, + props: { + message: { + type: String, + required: true, + }, + action: { + type: Object, + required: false, + default: null, + }, + }, + computed: { + hasAction() { + return Boolean(this.action?.href); + }, + actionButtonMethod() { + return this.action?.isForm ? 'post' : null; + }, + }, +}; +</script> + +<template> + <gl-alert :dismissible="false"> + {{ message }} + <template v-if="hasAction" #actions> + <gl-button variant="confirm" :href="action.href" :data-method="actionButtonMethod"> + {{ action.text }} + </gl-button> + </template> + </gl-alert> +</template> diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index ff2644704d9..0c9fd324f8c 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -1,5 +1,5 @@ <script> -import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui'; +import { GlButton, GlLoadingIcon } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; import { __ } from '~/locale'; import { @@ -14,6 +14,7 @@ import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { modalTypes } from '../constants'; import eventHub from '../eventhub'; import { measurePerformance } from '../utils'; +import CannotPushCodeAlert from './cannot_push_code_alert.vue'; import IdeSidebar from './ide_side_bar.vue'; import RepoEditor from './repo_editor.vue'; @@ -29,7 +30,6 @@ export default { components: { IdeSidebar, RepoEditor, - GlAlert, GlButton, GlLoadingIcon, ErrorMessage: () => import(/* webpackChunkName: 'ide_runtime' */ './error_message.vue'), @@ -41,6 +41,7 @@ export default { import(/* webpackChunkName: 'ide_runtime' */ '~/vue_shared/components/file_finder/index.vue'), RightPane: () => import(/* webpackChunkName: 'ide_runtime' */ './panes/right.vue'), NewModal: () => import(/* webpackChunkName: 'ide_runtime' */ './new_dropdown/modal.vue'), + CannotPushCodeAlert, }, mixins: [glFeatureFlagsMixin()], data() { @@ -120,9 +121,11 @@ export default { class="ide position-relative d-flex flex-column align-items-stretch" :class="{ [`theme-${themeName}`]: themeName }" > - <gl-alert v-if="!canPushCodeStatus.isAllowed" :dismissible="false">{{ - canPushCodeStatus.message - }}</gl-alert> + <cannot-push-code-alert + v-if="!canPushCodeStatus.isAllowed" + :message="canPushCodeStatus.message" + :action="canPushCodeStatus.action" + /> <error-message v-if="errorMessage" :message="errorMessage" /> <div class="ide-view flex-grow d-flex"> <template v-if="loadDeferred"> diff --git a/app/assets/javascripts/ide/components/ide_status_mr.vue b/app/assets/javascripts/ide/components/ide_status_mr.vue index a3b26d23a17..d05ca4141c8 100644 --- a/app/assets/javascripts/ide/components/ide_status_mr.vue +++ b/app/assets/javascripts/ide/components/ide_status_mr.vue @@ -20,7 +20,7 @@ export default { </script> <template> - <div class="d-flex-center flex-nowrap text-nowrap js-ide-status-mr"> + <div class="d-flex-center gl-flex-nowrap text-nowrap js-ide-status-mr"> <gl-icon name="merge-request" /> <span class="ml-1 d-none d-sm-block">{{ s__('WebIDE|Merge request') }}</span> <gl-link class="ml-1" :href="url">{{ text }}</gl-link> diff --git a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue index f4859b9f312..6e1929a1948 100644 --- a/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue +++ b/app/assets/javascripts/ide/components/jobs/detail/scroll_button.vue @@ -55,6 +55,7 @@ export default { :disabled="disabled" class="btn-scroll btn-transparent btn-blank" type="button" + :aria-label="tooltipTitle" @click="clickedScroll" > <gl-icon :name="iconName" /> diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index f7cfe80df5c..829a9d64cb7 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -87,7 +87,7 @@ export default { @input="searchMergeRequests" @removeToken="setSearchType(null)" /> - <gl-icon :size="18" name="search" class="ml-3 input-icon" use-deprecated-sizes /> + <gl-icon :size="16" name="search" class="ml-3 input-icon" /> </label> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <gl-loading-icon @@ -105,7 +105,7 @@ export default { @click.stop="setSearchType(searchType)" > <span class="d-flex gl-mr-3 ide-search-list-current-icon"> - <gl-icon :size="18" name="search" use-deprecated-sizes /> + <gl-icon :size="16" name="search" /> </span> <span>{{ searchType.label }}</span> </button> diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue index 0db43123562..3699073adb8 100644 --- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue +++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue @@ -31,12 +31,12 @@ export default { <template> <dropdown-button> - <span class="row flex-nowrap"> + <span class="row gl-flex-nowrap"> <span class="col-auto flex-fill text-truncate"> <gl-icon :size="16" :aria-label="__('Current Branch')" name="branch" /> {{ branchLabel }} </span> <span v-if="showMergeRequests" class="col-5 pl-0 text-truncate"> - <gl-icon :size="16" :aria-label="__('Merge Request')" name="merge-request" /> + <gl-icon :size="16" :aria-label="__('Merge request')" name="merge-request" /> {{ mergeRequestLabel }} </span> </span> diff --git a/app/assets/javascripts/ide/components/nav_form.vue b/app/assets/javascripts/ide/components/nav_form.vue index 98f0504298b..750c2c3e215 100644 --- a/app/assets/javascripts/ide/components/nav_form.vue +++ b/app/assets/javascripts/ide/components/nav_form.vue @@ -26,7 +26,7 @@ export default { <gl-tab :title="__('Branches')"> <branches-search-list /> </gl-tab> - <gl-tab :title="__('Merge Requests')"> + <gl-tab :title="__('Merge requests')"> <merge-request-search-list /> </gl-tab> </gl-tabs> diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js index 056df3739ee..6304423a3c0 100644 --- a/app/assets/javascripts/ide/constants.js +++ b/app/assets/javascripts/ide/constants.js @@ -110,5 +110,5 @@ export const SIDE_RIGHT = 'right'; export const LIVE_PREVIEW_DEBOUNCE = 2000; // This is the maximum number of files to auto open when opening the Web IDE -// from a Merge Request +// from a merge request export const MAX_MR_FILES_AUTO_OPEN = 10; diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js index f4a0f324e4a..2ce5bf7e271 100644 --- a/app/assets/javascripts/ide/index.js +++ b/app/assets/javascripts/ide/index.js @@ -54,6 +54,7 @@ export function initIde(el, options = {}) { }); this.setLinks({ webIDEHelpPagePath: el.dataset.webIdeHelpPagePath, + forkInfo: el.dataset.forkInfo ? JSON.parse(el.dataset.forkInfo) : null, }); this.setInitialData({ clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled), diff --git a/app/assets/javascripts/ide/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js index 9f2a9a8cf4a..52da9942efe 100644 --- a/app/assets/javascripts/ide/lib/editor_options.js +++ b/app/assets/javascripts/ide/lib/editor_options.js @@ -7,6 +7,7 @@ export const defaultEditorOptions = { enabled: false, }, wordWrap: 'on', + glyphMargin: true, }; export const defaultDiffOptions = { @@ -21,6 +22,7 @@ export const defaultDiffEditorOptions = { readOnly: false, renderLineHighlight: 'none', hideCursorInOverviewRuler: true, + glyphMargin: true, }; export const defaultModelOptions = { diff --git a/app/assets/javascripts/ide/lib/languages/README.md b/app/assets/javascripts/ide/lib/languages/README.md index c4f3de00783..86c5045ec71 100644 --- a/app/assets/javascripts/ide/lib/languages/README.md +++ b/app/assets/javascripts/ide/lib/languages/README.md @@ -1,21 +1,21 @@ # Web IDE Languages -The Web IDE uses the [Monaco editor](https://microsoft.github.io/monaco-editor/) which uses the [Monarch library](https://microsoft.github.io/monaco-editor/monarch.html) for syntax highlighting. -The Web IDE currently supports all languages defined in the [monaco-languages](https://github.com/microsoft/monaco-languages/tree/master/src) repository. +The Web IDE uses the [Monaco editor](https://microsoft.github.io/monaco-editor/) which uses the [Monarch library](https://microsoft.github.io/monaco-editor/monarch.html) for syntax highlighting. +The Web IDE currently supports all languages defined in the [monaco-languages](https://github.com/microsoft/monaco-languages/tree/master/src) repository. ## Adding New Languages -While Monaco supports a wide variety of languages, there's always the chance that it's missing something. +While Monaco supports a wide variety of languages, there's always the chance that it's missing something. You'll find a list of [unsupported languages in this epic](https://gitlab.com/groups/gitlab-org/-/epics/1474), which is the right place to add more if needed. Should you be willing to help us and add support to GitLab for any missing languages, here are the steps to do so: 1. Create a new issue and add it to [this epic](https://gitlab.com/groups/gitlab-org/-/epics/1474), if it doesn't already exist. 2. Create a new file in this folder called `{languageName}.js`, where `{languageName}` is the name of the language you want to add support for. -3. Follow the [Monarch documentation](https://microsoft.github.io/monaco-editor/monarch.html) to add a configuration for the new language. +3. Follow the [Monarch documentation](https://microsoft.github.io/monaco-editor/monarch.html) to add a configuration for the new language. - Example: The [`vue.js`](./vue.js) file in the current directory adds support for Vue.js Syntax Highlighting. 4. Add tests for the new language implementation in `spec/frontend/ide/lib/languages/{langaugeName}.js`. - Example: See [`vue_spec.js`](spec/frontend/ide/lib/languages/vue_spec.js). -5. Create a [Merge Request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html) with your newly added language. +5. Create a [merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html) with your newly added language. Thank you! diff --git a/app/assets/javascripts/ide/messages.js b/app/assets/javascripts/ide/messages.js index 4298d4c627c..189226ef835 100644 --- a/app/assets/javascripts/ide/messages.js +++ b/app/assets/javascripts/ide/messages.js @@ -1,10 +1,14 @@ import { s__ } from '~/locale'; -export const MSG_CANNOT_PUSH_CODE = s__( +export const MSG_CANNOT_PUSH_CODE_SHOULD_FORK = s__( 'WebIDE|You need permission to edit files directly in this project. Fork this project to make your changes and submit a merge request.', ); -export const MSG_CANNOT_PUSH_CODE_SHORT = s__( +export const MSG_CANNOT_PUSH_CODE_GO_TO_FORK = s__( + 'WebIDE|You need permission to edit files directly in this project. Go to your fork to make changes and submit a merge request.', +); + +export const MSG_CANNOT_PUSH_CODE = s__( 'WebIDE|You need permission to edit files directly in this project.', ); @@ -15,3 +19,7 @@ export const MSG_CANNOT_PUSH_UNSIGNED = s__( export const MSG_CANNOT_PUSH_UNSIGNED_SHORT = s__( 'WebIDE|This project does not accept unsigned commits.', ); + +export const MSG_FORK = s__('WebIDE|Fork project'); + +export const MSG_GO_TO_FORK = s__('WebIDE|Go to fork'); diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js index 753f6b9cd47..74423cd7376 100644 --- a/app/assets/javascripts/ide/stores/actions/merge_request.js +++ b/app/assets/javascripts/ide/stores/actions/merge_request.js @@ -73,7 +73,7 @@ export const getMergeRequestData = ( actionText: __('Please try again'), actionPayload: { projectId, mergeRequestId, force }, }); - reject(new Error(`Merge Request not loaded ${projectId}`)); + reject(new Error(`Merge request not loaded ${projectId}`)); }); } else { resolve(state.projects[projectId].mergeRequests[mergeRequestId]); @@ -106,7 +106,7 @@ export const getMergeRequestChanges = ( actionText: __('Please try again'), actionPayload: { projectId, mergeRequestId, force }, }); - reject(new Error(`Merge Request Changes not loaded ${projectId}`)); + reject(new Error(`Merge request changes not loaded ${projectId}`)); }); } else { resolve(state.projects[projectId].mergeRequests[mergeRequestId].changes); @@ -140,7 +140,7 @@ export const getMergeRequestVersions = ( actionText: __('Please try again'), actionPayload: { projectId, mergeRequestId, force }, }); - reject(new Error(`Merge Request Versions not loaded ${projectId}`)); + reject(new Error(`Merge request versions not loaded ${projectId}`)); }); } else { resolve(state.projects[projectId].mergeRequests[mergeRequestId].versions); diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js index a5bb32ec44a..e8b1a0ea494 100644 --- a/app/assets/javascripts/ide/stores/getters.js +++ b/app/assets/javascripts/ide/stores/getters.js @@ -11,12 +11,42 @@ import { } from '../constants'; import { MSG_CANNOT_PUSH_CODE, - MSG_CANNOT_PUSH_CODE_SHORT, + MSG_CANNOT_PUSH_CODE_SHOULD_FORK, + MSG_CANNOT_PUSH_CODE_GO_TO_FORK, MSG_CANNOT_PUSH_UNSIGNED, MSG_CANNOT_PUSH_UNSIGNED_SHORT, + MSG_FORK, + MSG_GO_TO_FORK, } from '../messages'; import { getChangesCountForFiles, filePathMatches } from './utils'; +const getCannotPushCodeViewModel = (state) => { + const { ide_path: idePath, fork_path: forkPath } = state.links.forkInfo || {}; + + if (idePath) { + return { + message: MSG_CANNOT_PUSH_CODE_GO_TO_FORK, + action: { + href: idePath, + text: MSG_GO_TO_FORK, + }, + }; + } else if (forkPath) { + return { + message: MSG_CANNOT_PUSH_CODE_SHOULD_FORK, + action: { + href: forkPath, + isForm: true, + text: MSG_FORK, + }, + }; + } + + return { + message: MSG_CANNOT_PUSH_CODE, + }; +}; + export const activeFile = (state) => state.openFiles.find((file) => file.active) || null; export const addedFiles = (state) => state.changedFiles.filter((f) => f.tempFile); @@ -178,7 +208,7 @@ export const canPushCodeStatus = (state, getters) => { PUSH_RULE_REJECT_UNSIGNED_COMMITS ]; - if (rejectUnsignedCommits) { + if (window.gon?.features?.rejectUnsignedCommitsByGitlab && rejectUnsignedCommits) { return { isAllowed: false, message: MSG_CANNOT_PUSH_UNSIGNED, @@ -188,8 +218,8 @@ export const canPushCodeStatus = (state, getters) => { if (!canPushCode) { return { isAllowed: false, - message: MSG_CANNOT_PUSH_CODE, - messageShort: MSG_CANNOT_PUSH_CODE_SHORT, + messageShort: MSG_CANNOT_PUSH_CODE, + ...getCannotPushCodeViewModel(state), }; } diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js index 22ff29e8866..76ba8339703 100644 --- a/app/assets/javascripts/ide/stores/mutation_types.js +++ b/app/assets/javascripts/ide/stores/mutation_types.js @@ -10,7 +10,7 @@ export const SET_PROJECT = 'SET_PROJECT'; export const SET_CURRENT_PROJECT = 'SET_CURRENT_PROJECT'; export const TOGGLE_EMPTY_STATE = 'TOGGLE_EMPTY_STATE'; -// Merge Request Mutation Types +// Merge request mutation types export const SET_MERGE_REQUEST = 'SET_MERGE_REQUEST'; export const SET_CURRENT_MERGE_REQUEST = 'SET_CURRENT_MERGE_REQUEST'; export const SET_MERGE_REQUEST_CHANGES = 'SET_MERGE_REQUEST_CHANGES'; |