diff options
Diffstat (limited to 'app/assets/javascripts/ide/components')
39 files changed, 184 insertions, 122 deletions
diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue index 644808cb83a..c71d911adfb 100644 --- a/app/assets/javascripts/ide/components/activity_bar.vue +++ b/app/assets/javascripts/ide/components/activity_bar.vue @@ -1,6 +1,7 @@ <script> -import { mapActions, mapState } from 'vuex'; import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { leftSidebarViews } from '../constants'; export default { @@ -11,7 +12,7 @@ export default { GlTooltip: GlTooltipDirective, }, computed: { - ...mapState(['currentActivityView']), + ...mapState(['currentActivityView', 'stagedFiles']), }, methods: { ...mapActions(['updateActivityBarView']), @@ -20,7 +21,7 @@ export default { this.updateActivityBarView(view); - this.$root.$emit('bv::hide::tooltip'); + this.$root.$emit(BV_HIDE_TOOLTIP); }, }, leftSidebarViews, @@ -81,6 +82,9 @@ export default { @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)" > <gl-icon name="commit" /> + <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill"> + {{ stagedFiles.length }} + </div> </button> </li> </ul> diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue index c317fadb656..1ae7cf9339d 100644 --- a/app/assets/javascripts/ide/components/branches/search_list.vue +++ b/app/assets/javascripts/ide/components/branches/search_list.vue @@ -1,7 +1,7 @@ <script> -import { mapActions, mapState } from 'vuex'; -import { debounce } from 'lodash'; import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { debounce } from 'lodash'; +import { mapActions, mapState } from 'vuex'; import Item from './item.vue'; export default { diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue index b89329c92ec..273d8d972f7 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue @@ -1,11 +1,14 @@ <script> +import { GlSprintf } from '@gitlab/ui'; import { escape } from 'lodash'; import { mapState, mapGetters, createNamespacedHelpers } from 'vuex'; -import { GlSprintf } from '@gitlab/ui'; import { s__ } from '~/locale'; -import consts from '../../stores/modules/commit/constants'; -import RadioGroup from './radio_group.vue'; +import { + COMMIT_TO_CURRENT_BRANCH, + COMMIT_TO_NEW_BRANCH, +} from '../../stores/modules/commit/constants'; import NewMergeRequestOption from './new_merge_request_option.vue'; +import RadioGroup from './radio_group.vue'; const { mapState: mapCommitState, mapActions: mapCommitActions } = createNamespacedHelpers( 'commit', @@ -53,14 +56,14 @@ export default { } if (this.shouldDefaultToCurrentBranch) { - this.updateCommitAction(consts.COMMIT_TO_CURRENT_BRANCH); + this.updateCommitAction(COMMIT_TO_CURRENT_BRANCH); } else { - this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH); + this.updateCommitAction(COMMIT_TO_NEW_BRANCH); } }, }, - commitToCurrentBranch: consts.COMMIT_TO_CURRENT_BRANCH, - commitToNewBranch: consts.COMMIT_TO_NEW_BRANCH, + commitToCurrentBranch: COMMIT_TO_CURRENT_BRANCH, + commitToNewBranch: COMMIT_TO_NEW_BRANCH, currentBranchPermissionsTooltip: s__( "IDE|This option is disabled because you don't have write permissions for the current branch.", ), diff --git a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue index 53fac09ab66..75f02af28c4 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue @@ -1,9 +1,9 @@ <script> -import { mapActions } from 'vuex'; import { GlModal, GlButton } from '@gitlab/ui'; +import { mapActions } from 'vuex'; import { sprintf, __ } from '~/locale'; -import FileIcon from '~/vue_shared/components/file_icon.vue'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; +import FileIcon from '~/vue_shared/components/file_icon.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue index 7c3e522a488..cdb3eaff207 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue @@ -1,12 +1,16 @@ <script> +import { GlModal, GlSafeHtmlDirective, GlButton, GlTooltipDirective } from '@gitlab/ui'; import { mapState, mapActions, mapGetters } from 'vuex'; -import { GlModal, GlSafeHtmlDirective, GlButton } from '@gitlab/ui'; -import { n__, __ } from '~/locale'; -import CommitMessageField from './message_field.vue'; -import Actions from './actions.vue'; -import SuccessMessage from './success_message.vue'; +import { n__, s__ } from '~/locale'; import { leftSidebarViews, MAX_WINDOW_HEIGHT_COMPACT } from '../../constants'; import { createUnexpectedCommitError } from '../../lib/errors'; +import Actions from './actions.vue'; +import CommitMessageField from './message_field.vue'; +import SuccessMessage from './success_message.vue'; + +const MSG_CANNOT_PUSH_CODE = s__( + 'WebIDE|You need permission to edit files directly in this project.', +); export default { components: { @@ -18,6 +22,7 @@ export default { }, directives: { SafeHtml: GlSafeHtmlDirective, + GlTooltip: GlTooltipDirective, }, data() { return { @@ -30,15 +35,21 @@ export default { computed: { ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']), ...mapState('commit', ['commitMessage', 'submitCommitLoading', 'commitError']), - ...mapGetters(['someUncommittedChanges']), + ...mapGetters(['someUncommittedChanges', 'canPushCode']), ...mapGetters('commit', ['discardDraftButtonDisabled', 'preBuiltCommitMessage']), + commitButtonDisabled() { + return !this.canPushCode || !this.someUncommittedChanges; + }, + commitButtonTooltip() { + if (!this.canPushCode) { + return MSG_CANNOT_PUSH_CODE; + } + + return ''; + }, overviewText() { return n__('%d changed file', '%d changed files', this.stagedFiles.length); }, - commitButtonText() { - return this.stagedFiles.length ? __('Commit') : __('Stage & Commit'); - }, - currentViewIsCommitView() { return this.currentActivityView === leftSidebarViews.commit.name; }, @@ -73,6 +84,12 @@ export default { 'updateCommitAction', ]), commit() { + // Even though the submit button will be disabled, we need to disable the submission + // since hitting enter on the branch name text input also submits the form. + if (!this.canPushCode) { + return false; + } + return this.commitChanges(); }, handleCompactState() { @@ -113,6 +130,8 @@ export default { this.componentHeight = null; }, }, + // Expose for tests + MSG_CANNOT_PUSH_CODE, }; </script> @@ -134,17 +153,22 @@ export default { @after-enter="afterEndTransition" > <div v-if="isCompact" ref="compactEl" class="commit-form-compact"> - <gl-button - :disabled="!someUncommittedChanges" - category="primary" - variant="info" - block - class="qa-begin-commit-button" - data-testid="begin-commit-button" - @click="beginCommit" + <div + v-gl-tooltip="{ title: commitButtonTooltip }" + data-testid="begin-commit-button-tooltip" > - {{ __('Commit…') }} - </gl-button> + <gl-button + :disabled="commitButtonDisabled" + category="primary" + variant="info" + block + class="qa-begin-commit-button" + data-testid="begin-commit-button" + @click="beginCommit" + > + {{ __('Commit…') }} + </gl-button> + </div> <p class="text-center bold">{{ overviewText }}</p> </div> <form v-else ref="formEl" @submit.prevent.stop="commit"> @@ -157,16 +181,29 @@ export default { /> <div class="clearfix gl-mt-5"> <actions /> + <div + v-gl-tooltip="{ title: commitButtonTooltip }" + class="float-left" + data-testid="commit-button-tooltip" + > + <gl-button + :disabled="commitButtonDisabled" + :loading="submitCommitLoading" + data-testid="commit-button" + class="qa-commit-button" + category="primary" + variant="success" + @click="commit" + > + {{ __('Commit') }} + </gl-button> + </div> <gl-button - :loading="submitCommitLoading" - class="float-left qa-commit-button" - category="primary" - variant="success" - @click="commit" + v-if="!discardDraftButtonDisabled" + class="float-right" + data-testid="discard-draft" + @click="discardDraft" > - {{ __('Commit') }} - </gl-button> - <gl-button v-if="!discardDraftButtonDisabled" class="float-right" @click="discardDraft"> {{ __('Discard draft') }} </gl-button> <gl-button diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue index 729ff7c74ec..fbe353fc4ba 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue @@ -1,6 +1,6 @@ <script> -import { mapActions } from 'vuex'; import { GlModal, GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapActions } from 'vuex'; import { __, sprintf } from '~/locale'; import ListItem from './list_item.vue'; diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue index 4192a002486..79b6fd1ec68 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue @@ -1,9 +1,9 @@ <script> -import { mapActions } from 'vuex'; import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapActions } from 'vuex'; import FileIcon from '~/vue_shared/components/file_icon.vue'; -import { viewerTypes } from '../../constants'; import getCommitIconMap from '../../commit_icon'; +import { viewerTypes } from '../../constants'; export default { components: { @@ -85,7 +85,11 @@ export default { role="button" @click="openFileInEditor" > - <span class="multi-file-commit-list-file-path d-flex align-items-center"> + <span + class="multi-file-commit-list-file-path d-flex align-items-center" + data-qa-selector="file_to_commit_content" + :data-qa-file-name="file.name" + > <file-icon :file-name="file.name" class="gl-mr-3" /> <template v-if="file.prevName && file.prevName !== file.name"> {{ file.prevName }} → diff --git a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue index cdf49866982..121dae4b87e 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/new_merge_request_option.vue @@ -1,6 +1,6 @@ <script> -import { createNamespacedHelpers } from 'vuex'; import { GlTooltipDirective } from '@gitlab/ui'; +import { createNamespacedHelpers } from 'vuex'; import { s__ } from '~/locale'; const { mapActions: mapCommitActions, mapGetters: mapCommitGetters } = createNamespacedHelpers( diff --git a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue index 91cce44382c..039b4a54b26 100644 --- a/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue +++ b/app/assets/javascripts/ide/components/commit_sidebar/radio_group.vue @@ -1,6 +1,6 @@ <script> -import { mapActions, mapState, mapGetters } from 'vuex'; import { GlTooltipDirective } from '@gitlab/ui'; +import { mapActions, mapState, mapGetters } from 'vuex'; export default { directives: { diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue index 08635b43b91..d3a52f9f0cf 100644 --- a/app/assets/javascripts/ide/components/error_message.vue +++ b/app/assets/javascripts/ide/components/error_message.vue @@ -1,7 +1,7 @@ <script> /* eslint-disable vue/no-v-html */ -import { mapActions } from 'vuex'; import { GlAlert, GlLoadingIcon } from '@gitlab/ui'; +import { mapActions } from 'vuex'; export default { components: { diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue index fb0d00dc6a1..d80ad723fce 100644 --- a/app/assets/javascripts/ide/components/file_row_extra.vue +++ b/app/assets/javascripts/ide/components/file_row_extra.vue @@ -1,10 +1,10 @@ <script> -import { mapGetters } from 'vuex'; import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; +import { mapGetters } from 'vuex'; import { n__ } from '~/locale'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; -import NewDropdown from './new_dropdown/index.vue'; import MrFileIcon from './mr_file_icon.vue'; +import NewDropdown from './new_dropdown/index.vue'; export default { name: 'FileRowExtra', diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue index 772dab3fed3..ec61e3374d7 100644 --- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue +++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue @@ -1,7 +1,7 @@ <script> +import { GlIcon, GlLoadingIcon } from '@gitlab/ui'; import $ from 'jquery'; import { mapActions, mapState } from 'vuex'; -import { GlIcon, GlLoadingIcon } from '@gitlab/ui'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; export default { diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue index aac899fde0d..2816f89d60d 100644 --- a/app/assets/javascripts/ide/components/ide.vue +++ b/app/assets/javascripts/ide/components/ide.vue @@ -1,7 +1,7 @@ <script> +import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui'; import { mapActions, mapGetters, mapState } from 'vuex'; -import { GlButton, GlLoadingIcon } from '@gitlab/ui'; -import { __ } from '~/locale'; +import { __, s__ } from '~/locale'; import { WEBIDE_MARK_APP_START, WEBIDE_MARK_FILE_FINISH, @@ -10,13 +10,12 @@ import { WEBIDE_MEASURE_BEFORE_VUE, } from '~/performance/constants'; import { performanceMarkAndMeasure } from '~/performance/utils'; +import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import { modalTypes } from '../constants'; import eventHub from '../eventhub'; +import { measurePerformance } from '../utils'; import IdeSidebar from './ide_side_bar.vue'; import RepoEditor from './repo_editor.vue'; -import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; - -import { measurePerformance } from '../utils'; eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () => measurePerformance( @@ -26,10 +25,15 @@ eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () => ), ); +const MSG_CANNOT_PUSH_CODE = 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 default { components: { IdeSidebar, RepoEditor, + GlAlert, GlButton, GlLoadingIcon, ErrorMessage: () => import(/* webpackChunkName: 'ide_runtime' */ './error_message.vue'), @@ -59,12 +63,14 @@ export default { 'loading', ]), ...mapGetters([ + 'canPushCode', 'activeFile', 'someUncommittedChanges', 'isCommitModeActive', 'allBlobs', 'emptyRepo', 'currentTree', + 'hasCurrentProject', 'editorTheme', 'getUrlForPath', ]), @@ -110,6 +116,7 @@ export default { this.loadDeferred = true; }, }, + MSG_CANNOT_PUSH_CODE, }; </script> @@ -118,6 +125,9 @@ export default { class="ide position-relative d-flex flex-column align-items-stretch" :class="{ [`theme-${themeName}`]: themeName }" > + <gl-alert v-if="!canPushCode" :dismissible="false">{{ + $options.MSG_CANNOT_PUSH_CODE + }}</gl-alert> <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_review.vue b/app/assets/javascripts/ide/components/ide_review.vue index 7d2f0acb08c..bea25d42756 100644 --- a/app/assets/javascripts/ide/components/ide_review.vue +++ b/app/assets/javascripts/ide/components/ide_review.vue @@ -1,8 +1,8 @@ <script> import { mapGetters, mapState, mapActions } from 'vuex'; -import IdeTreeList from './ide_tree_list.vue'; -import EditorModeDropdown from './editor_mode_dropdown.vue'; import { viewerTypes } from '../constants'; +import EditorModeDropdown from './editor_mode_dropdown.vue'; +import IdeTreeList from './ide_tree_list.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue index 135b28685ed..c3d6494692a 100644 --- a/app/assets/javascripts/ide/components/ide_side_bar.vue +++ b/app/assets/javascripts/ide/components/ide_side_bar.vue @@ -1,12 +1,12 @@ <script> -import { mapState, mapGetters } from 'vuex'; import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; -import IdeTree from './ide_tree.vue'; -import ResizablePanel from './resizable_panel.vue'; +import { mapState, mapGetters } from 'vuex'; +import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants'; import ActivityBar from './activity_bar.vue'; import CommitForm from './commit_sidebar/form.vue'; import IdeProjectHeader from './ide_project_header.vue'; -import { SIDEBAR_INIT_WIDTH, leftSidebarViews } from '../constants'; +import IdeTree from './ide_tree.vue'; +import ResizablePanel from './resizable_panel.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue index 9dbed0ace40..d8daf3b7ad6 100644 --- a/app/assets/javascripts/ide/components/ide_sidebar_nav.vue +++ b/app/assets/javascripts/ide/components/ide_sidebar_nav.vue @@ -1,7 +1,8 @@ <script> import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; -import { otherSide } from '../utils'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; import { SIDE_RIGHT } from '../constants'; +import { otherSide } from '../utils'; export default { directives: { @@ -50,7 +51,7 @@ export default { }, clickTab(e, tab) { e.currentTarget.blur(); - this.$root.$emit('bv::hide::tooltip'); + this.$root.$emit(BV_HIDE_TOOLTIP); if (this.isActiveTab(tab)) { this.$emit('close'); diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue index ee292190e06..28ca1b6750f 100644 --- a/app/assets/javascripts/ide/components/ide_status_bar.vue +++ b/app/assets/javascripts/ide/components/ide_status_bar.vue @@ -1,13 +1,13 @@ <script> /* eslint-disable @gitlab/vue-require-i18n-strings */ -import { mapActions, mapState, mapGetters } from 'vuex'; import { GlIcon, GlTooltipDirective } from '@gitlab/ui'; -import IdeStatusList from './ide_status_list.vue'; -import IdeStatusMr from './ide_status_mr.vue'; +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 { rightSidebarViews } from '../constants'; +import IdeStatusList from './ide_status_list.vue'; +import IdeStatusMr from './ide_status_mr.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/ide_status_list.vue b/app/assets/javascripts/ide/components/ide_status_list.vue index aa61c0d9b5e..da393b42dca 100644 --- a/app/assets/javascripts/ide/components/ide_status_list.vue +++ b/app/assets/javascripts/ide/components/ide_status_list.vue @@ -1,8 +1,8 @@ <script> -import { mapGetters } from 'vuex'; import { GlLink, GlTooltipDirective } from '@gitlab/ui'; -import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue'; +import { mapGetters } from 'vuex'; import { isTextFile, getFileEOL } from '~/ide/utils'; +import TerminalSyncStatusSafe from './terminal_sync/terminal_sync_status_safe.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue index e563de6659a..2df998d7518 100644 --- a/app/assets/javascripts/ide/components/ide_tree.vue +++ b/app/assets/javascripts/ide/components/ide_tree.vue @@ -2,9 +2,9 @@ import { mapState, mapGetters, mapActions } from 'vuex'; import { modalTypes, viewerTypes } from '../constants'; import IdeTreeList from './ide_tree_list.vue'; -import Upload from './new_dropdown/upload.vue'; import NewEntryButton from './new_dropdown/button.vue'; import NewModal from './new_dropdown/modal.vue'; +import Upload from './new_dropdown/upload.vue'; export default { components: { @@ -58,8 +58,9 @@ export default { <new-entry-button :label="__('New file')" :show-label="false" - class="d-flex border-0 p-0 mr-3 qa-new-file" + class="d-flex border-0 p-0 mr-3" icon="doc-new" + data-qa-selector="new_file_button" @click="createNewFile()" /> <upload @@ -73,6 +74,7 @@ export default { :show-label="false" class="d-flex border-0 p-0" icon="folder-new" + data-qa-selector="new_directory_button" @click="createNewFolder()" /> </div> diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue index b67881b14f4..b987adc8bae 100644 --- a/app/assets/javascripts/ide/components/ide_tree_list.vue +++ b/app/assets/javascripts/ide/components/ide_tree_list.vue @@ -1,9 +1,9 @@ <script> -import { mapActions, mapGetters, mapState } from 'vuex'; import { GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui'; -import FileTree from '~/vue_shared/components/file_tree.vue'; +import { mapActions, mapGetters, mapState } from 'vuex'; import { WEBIDE_MARK_FILE_CLICKED } from '~/performance/constants'; import { performanceMarkAndMeasure } from '~/performance/utils'; +import FileTree from '~/vue_shared/components/file_tree.vue'; import IdeFileRow from './ide_file_row.vue'; import NavDropdown from './nav_dropdown.vue'; diff --git a/app/assets/javascripts/ide/components/jobs/detail.vue b/app/assets/javascripts/ide/components/jobs/detail.vue index 7f07a5dbe43..8e611503cb4 100644 --- a/app/assets/javascripts/ide/components/jobs/detail.vue +++ b/app/assets/javascripts/ide/components/jobs/detail.vue @@ -1,11 +1,11 @@ <script> /* eslint-disable vue/no-v-html */ -import { mapActions, mapState } from 'vuex'; -import { throttle } from 'lodash'; import { GlTooltipDirective, GlButton, GlIcon } from '@gitlab/ui'; +import { throttle } from 'lodash'; +import { mapActions, mapState } from 'vuex'; import { __ } from '../../../locale'; -import ScrollButton from './detail/scroll_button.vue'; import JobDescription from './detail/description.vue'; +import ScrollButton from './detail/scroll_button.vue'; const scrollPositions = { top: 0, diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue index 4e0912f3f44..0ce21c5c36c 100644 --- a/app/assets/javascripts/ide/components/jobs/list.vue +++ b/app/assets/javascripts/ide/components/jobs/list.vue @@ -1,6 +1,6 @@ <script> -import { mapActions } from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; +import { mapActions } from 'vuex'; import Stage from './stage.vue'; export default { diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue index 4b3c6e61e11..680e8841a1f 100644 --- a/app/assets/javascripts/ide/components/merge_requests/list.vue +++ b/app/assets/javascripts/ide/components/merge_requests/list.vue @@ -1,10 +1,10 @@ <script> -import { mapActions, mapState } from 'vuex'; -import { debounce } from 'lodash'; import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { debounce } from 'lodash'; +import { mapActions, mapState } from 'vuex'; import { __ } from '~/locale'; -import Item from './item.vue'; import TokenedInput from '../shared/tokened_input.vue'; +import Item from './item.vue'; const SEARCH_TYPES = [ { type: 'created', label: __('Created by me') }, diff --git a/app/assets/javascripts/ide/components/nav_dropdown.vue b/app/assets/javascripts/ide/components/nav_dropdown.vue index 6ff77e556c0..f5f0db3a7a3 100644 --- a/app/assets/javascripts/ide/components/nav_dropdown.vue +++ b/app/assets/javascripts/ide/components/nav_dropdown.vue @@ -1,8 +1,8 @@ <script> import $ from 'jquery'; import { mapGetters } from 'vuex'; -import NavForm from './nav_form.vue'; import NavDropdownButton from './nav_dropdown_button.vue'; +import NavForm from './nav_form.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/nav_dropdown_button.vue b/app/assets/javascripts/ide/components/nav_dropdown_button.vue index 116d3cec03e..0db43123562 100644 --- a/app/assets/javascripts/ide/components/nav_dropdown_button.vue +++ b/app/assets/javascripts/ide/components/nav_dropdown_button.vue @@ -1,6 +1,6 @@ <script> -import { mapState } from 'vuex'; import { GlIcon } from '@gitlab/ui'; +import { mapState } from 'vuex'; import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue'; const EMPTY_LABEL = '-'; diff --git a/app/assets/javascripts/ide/components/nav_form.vue b/app/assets/javascripts/ide/components/nav_form.vue index 70a92b8d3ab..62bb4841760 100644 --- a/app/assets/javascripts/ide/components/nav_form.vue +++ b/app/assets/javascripts/ide/components/nav_form.vue @@ -1,6 +1,6 @@ <script> -import Tabs from '~/vue_shared/components/tabs/tabs'; import Tab from '~/vue_shared/components/tabs/tab.vue'; +import Tabs from '~/vue_shared/components/tabs/tabs'; import BranchesSearchList from './branches/search_list.vue'; import MergeRequestSearchList from './merge_requests/list.vue'; diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue index 692878de5e1..bdd201aac1b 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/index.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue @@ -1,10 +1,10 @@ <script> -import { mapActions } from 'vuex'; import { GlIcon } from '@gitlab/ui'; -import upload from './upload.vue'; -import ItemButton from './button.vue'; +import { mapActions } from 'vuex'; import { modalTypes } from '../../constants'; +import ItemButton from './button.vue'; import NewModal from './modal.vue'; +import upload from './upload.vue'; export default { components: { @@ -108,6 +108,7 @@ export default { class="d-flex" icon="remove" icon-classes="mr-2" + data-qa-selector="delete_button" @click="deleteEntry(path)" /> </li> diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue index 22eefb6634f..cafb58b0e2c 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue @@ -1,6 +1,6 @@ <script> -import { mapActions, mapState, mapGetters } from 'vuex'; import { GlModal, GlButton } from '@gitlab/ui'; +import { mapActions, mapState, mapGetters } from 'vuex'; import { deprecatedCreateFlash as flash } from '~/flash'; import { __, sprintf, s__ } from '~/locale'; import { modalTypes } from '../../constants'; diff --git a/app/assets/javascripts/ide/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue index 5704129c10f..76d8a0aff3d 100644 --- a/app/assets/javascripts/ide/components/new_dropdown/upload.vue +++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue @@ -1,6 +1,6 @@ <script> -import ItemButton from './button.vue'; import { isTextFile } from '~/ide/utils'; +import ItemButton from './button.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue index 46ef08a45a9..da2d4fbe7f0 100644 --- a/app/assets/javascripts/ide/components/panes/right.vue +++ b/app/assets/javascripts/ide/components/panes/right.vue @@ -1,13 +1,13 @@ <script> import { mapGetters, mapState } from 'vuex'; import { __ } from '~/locale'; -import CollapsibleSidebar from './collapsible_sidebar.vue'; -import ResizablePanel from '../resizable_panel.vue'; import { rightSidebarViews, SIDEBAR_INIT_WIDTH, SIDEBAR_NAV_WIDTH } from '../../constants'; -import PipelinesList from '../pipelines/list.vue'; import JobsDetail from '../jobs/detail.vue'; +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 CollapsibleSidebar from './collapsible_sidebar.vue'; // Need to add the width of the nav buttons since the resizable container contains those as well const WIDTH = SIDEBAR_INIT_WIDTH + SIDEBAR_NAV_WIDTH; diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue index a4a13389fbf..2526db0cd7b 100644 --- a/app/assets/javascripts/ide/components/pipelines/list.vue +++ b/app/assets/javascripts/ide/components/pipelines/list.vue @@ -1,6 +1,4 @@ <script> -import { mapActions, mapGetters, mapState } from 'vuex'; -import { escape } from 'lodash'; import { GlLoadingIcon, GlIcon, @@ -10,13 +8,14 @@ import { GlBadge, GlAlert, } from '@gitlab/ui'; +import { escape } from 'lodash'; +import { mapActions, mapGetters, mapState } from 'vuex'; +import IDEServices from '~/ide/services'; import { sprintf, __ } from '../../../locale'; -import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import EmptyState from '../../../pipelines/components/pipelines_list/empty_state.vue'; +import CiIcon from '../../../vue_shared/components/ci_icon.vue'; import JobsList from '../jobs/list.vue'; -import IDEServices from '~/ide/services'; - export default { components: { GlIcon, diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue index 4c2a369226e..13f2e775fc3 100644 --- a/app/assets/javascripts/ide/components/preview/clientside.vue +++ b/app/assets/javascripts/ide/components/preview/clientside.vue @@ -1,13 +1,13 @@ <script> -import { mapActions, mapGetters, mapState } from 'vuex'; +import { GlLoadingIcon } from '@gitlab/ui'; +import { listen } from 'codesandbox-api'; import { isEmpty, debounce } from 'lodash'; import { Manager } from 'smooshpack'; -import { listen } from 'codesandbox-api'; -import { GlLoadingIcon } from '@gitlab/ui'; -import Navigator from './navigator.vue'; +import { mapActions, mapGetters, mapState } from 'vuex'; import { packageJsonPath, LIVE_PREVIEW_DEBOUNCE } from '../../constants'; -import { createPathWithExt } from '../../utils'; import eventHub from '../../eventhub'; +import { createPathWithExt } from '../../utils'; +import Navigator from './navigator.vue'; export default { components: { @@ -165,7 +165,7 @@ export default { </p> <a :href="links.webIDEHelpPagePath" - class="btn btn-primary" + class="btn gl-button btn-confirm" target="_blank" rel="noopener noreferrer" > diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue index 8986359427f..0c6cb041095 100644 --- a/app/assets/javascripts/ide/components/preview/navigator.vue +++ b/app/assets/javascripts/ide/components/preview/navigator.vue @@ -1,6 +1,6 @@ <script> -import { listen } from 'codesandbox-api'; import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { listen } from 'codesandbox-api'; export default { components: { @@ -78,6 +78,7 @@ export default { this.visitPath(this.path); }, visitPath(path) { + // eslint-disable-next-line vue/no-mutating-props this.manager.iframe.src = `${this.manager.bundlerURL}${path}`; }, }, diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue index 8092ef3bce6..854ff74d0af 100644 --- a/app/assets/javascripts/ide/components/repo_commit_section.vue +++ b/app/assets/javascripts/ide/components/repo_commit_section.vue @@ -1,8 +1,8 @@ <script> import { mapState, mapActions, mapGetters } from 'vuex'; -import CommitFilesList from './commit_sidebar/list.vue'; -import EmptyState from './commit_sidebar/empty_state.vue'; import { stageKeys } from '../constants'; +import EmptyState from './commit_sidebar/empty_state.vue'; +import CommitFilesList from './commit_sidebar/list.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue index a9c05f2e1ac..690060f5cb0 100644 --- a/app/assets/javascripts/ide/components/repo_editor.vue +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -1,9 +1,7 @@ <script> import { mapState, mapGetters, mapActions } from 'vuex'; -import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils'; import { deprecatedCreateFlash as flash } from '~/flash'; -import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue'; -import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue'; +import { __ } from '~/locale'; import { WEBIDE_MARK_FILE_CLICKED, WEBIDE_MARK_REPO_EDITOR_START, @@ -12,21 +10,23 @@ import { WEBIDE_MEASURE_FILE_AFTER_INTERACTION, } from '~/performance/constants'; import { performanceMarkAndMeasure } from '~/performance/utils'; -import eventHub from '../eventhub'; +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 { leftSidebarViews, viewerTypes, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW, } from '../constants'; +import eventHub from '../eventhub'; import Editor from '../lib/editor'; -import FileTemplatesBar from './file_templates/bar.vue'; -import { __ } from '~/locale'; -import { extractMarkdownImagesFromEntries } from '../stores/utils'; -import { getFileEditorOrDefault } from '../stores/modules/editor/utils'; -import { getPathParent, readFileAsDataURL, registerSchema, isTextFile } from '../utils'; import { getRulesWithTraversal } from '../lib/editorconfig/parser'; import mapRulesToMonaco from '../lib/editorconfig/rules_mapper'; +import { getFileEditorOrDefault } from '../stores/modules/editor/utils'; +import { extractMarkdownImagesFromEntries } from '../stores/utils'; +import { getPathParent, readFileAsDataURL, registerSchema, isTextFile } from '../utils'; +import FileTemplatesBar from './file_templates/bar.vue'; export default { name: 'RepoEditor', diff --git a/app/assets/javascripts/ide/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue index e3c41eee15e..d28751c9571 100644 --- a/app/assets/javascripts/ide/components/repo_tab.vue +++ b/app/assets/javascripts/ide/components/repo_tab.vue @@ -1,10 +1,10 @@ <script> -import { mapActions, mapGetters } from 'vuex'; import { GlIcon } from '@gitlab/ui'; +import { mapActions, mapGetters } from 'vuex'; import { __, sprintf } from '~/locale'; -import FileIcon from '~/vue_shared/components/file_icon.vue'; import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; +import FileIcon from '~/vue_shared/components/file_icon.vue'; import FileStatusIcon from './repo_file_status_icon.vue'; export default { diff --git a/app/assets/javascripts/ide/components/terminal/session.vue b/app/assets/javascripts/ide/components/terminal/session.vue index 0e67a2ab45f..3a4128b6207 100644 --- a/app/assets/javascripts/ide/components/terminal/session.vue +++ b/app/assets/javascripts/ide/components/terminal/session.vue @@ -1,9 +1,9 @@ <script> -import { mapActions, mapState } from 'vuex'; import { GlButton } from '@gitlab/ui'; +import { mapActions, mapState } from 'vuex'; import { __ } from '~/locale'; -import Terminal from './terminal.vue'; import { isEndingStatus } from '../../stores/modules/terminal/utils'; +import Terminal from './terminal.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/terminal/terminal.vue b/app/assets/javascripts/ide/components/terminal/terminal.vue index 0ee4107f9ab..08fb2f5e5a0 100644 --- a/app/assets/javascripts/ide/components/terminal/terminal.vue +++ b/app/assets/javascripts/ide/components/terminal/terminal.vue @@ -1,11 +1,11 @@ <script> -import { mapState } from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; +import { mapState } from 'vuex'; import { __ } from '~/locale'; import GLTerminal from '~/terminal/terminal'; -import TerminalControls from './terminal_controls.vue'; import { RUNNING, STOPPING } from '../../stores/modules/terminal/constants'; import { isStartingStatus } from '../../stores/modules/terminal/utils'; +import TerminalControls from './terminal_controls.vue'; export default { components: { diff --git a/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue b/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue index c3f722d6052..67692c842b8 100644 --- a/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue +++ b/app/assets/javascripts/ide/components/terminal_sync/terminal_sync_status.vue @@ -1,6 +1,6 @@ <script> -import { throttle } from 'lodash'; import { GlTooltipDirective, GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { throttle } from 'lodash'; import { mapState } from 'vuex'; import { MSG_TERMINAL_SYNC_CONNECTING, |