Shorten JS import paths

Use webpack aliases to make import paths more readable

app/assets/javascripts/behaviors/markdown/render_gfm.js

@@ -24,7 +24,7 @@ $.fn.renderGFM = function renderGFM() {
 
   const mrPopoverElements = this.find('.gfm-merge_request').get();
   if (mrPopoverElements.length) {
-    import(/* webpackChunkName: 'MrPopoverBundle' */ '../../mr_popover')
+    import(/* webpackChunkName: 'MrPopoverBundle' */ '~/mr_popover')
       .then(({ default: initMRPopovers }) => {
         initMRPopovers(mrPopoverElements);
       })

app/assets/javascripts/behaviors/shortcuts/shortcuts_issuable.js

@@ -4,7 +4,7 @@ import { clickCopyToClipboardButton } from '~/behaviors/copy_to_clipboard';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
 import { isElementVisible } from '~/lib/utils/dom_utils';
 import { DEBOUNCE_DROPDOWN_DELAY } from '~/vue_shared/components/sidebar/labels_select_widget/constants';
-import Sidebar from '../../right_sidebar';
+import Sidebar from '~/right_sidebar';
 import { CopyAsGFM } from '../markdown/copy_as_gfm';
 import {
   keysFor,

app/assets/javascripts/blob/pdf/pdf_viewer.vue

 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import PdfLab from '../../pdf/index.vue';
+import PdfLab from '~/pdf/index.vue';
 
 export default {
   components: {

app/assets/javascripts/boards/components/board_card_inner.vue

@@ -13,7 +13,7 @@ import boardCardInner from 'ee_else_ce/boards/mixins/board_card_inner';
 import { isScopedLabel } from '~/lib/utils/common_utils';
 import { sprintf, __, n__ } from '~/locale';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue';
-import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { ListType } from '../constants';
 import BoardBlockedIcon from './board_blocked_icon.vue';
 import IssueDueDate from './issue_due_date.vue';

app/assets/javascripts/code_navigation/components/app.vue

 <script>
 import { mapActions, mapState } from 'vuex';
-import eventHub from '../../notes/event_hub';
+import eventHub from '~/notes/event_hub';
 import Popover from './popover.vue';
 
 export default {

app/assets/javascripts/diffs/components/app.vue

@@ -21,7 +21,7 @@ import MrWidgetHowToMergeModal from '~/vue_merge_request_widget/components/mr_wi
 import PanelResizer from '~/vue_shared/components/panel_resizer.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
-import notesEventHub from '../../notes/event_hub';
+import notesEventHub from '~/notes/event_hub';
 import {
   TREE_LIST_WIDTH_STORAGE_KEY,
   INITIAL_TREE_WIDTH,

app/assets/javascripts/diffs/components/diff_content.vue

@@ -9,9 +9,9 @@ import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_preview.vue';
 import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue';
-import NoteForm from '../../notes/components/note_form.vue';
-import eventHub from '../../notes/event_hub';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import NoteForm from '~/notes/components/note_form.vue';
+import eventHub from '~/notes/event_hub';
+import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { IMAGE_DIFF_POSITION_TYPE } from '../constants';
 import { getDiffMode } from '../store/utils';
 import DiffDiscussions from './diff_discussions.vue';

app/assets/javascripts/diffs/components/diff_discussions.vue

@@ -2,7 +2,7 @@
 import { GlIcon } from '@gitlab/ui';
 import { mapActions } from 'vuex';
 import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
-import noteableDiscussion from '../../notes/components/noteable_discussion.vue';
+import noteableDiscussion from '~/notes/components/noteable_discussion.vue';
 
 export default {
   components: {

app/assets/javascripts/diffs/components/diff_file.vue

@@ -17,7 +17,7 @@ import { diffViewerErrors } from '~/ide/constants';
 import { scrollToElement } from '~/lib/utils/common_utils';
 import { sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import notesEventHub from '../../notes/event_hub';
+import notesEventHub from '~/notes/event_hub';
 
 import {
   DIFF_FILE_AUTOMATIC_COLLAPSE,

app/assets/javascripts/diffs/components/diff_line_note_form.vue

@@ -4,13 +4,10 @@ import { s__ } from '~/locale';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import MultilineCommentForm from '../../notes/components/multiline_comment_form.vue';
-import {
-  commentLineOptions,
-  formatLineRange,
-} from '../../notes/components/multiline_comment_utils';
-import noteForm from '../../notes/components/note_form.vue';
-import autosave from '../../notes/mixins/autosave';
+import MultilineCommentForm from '~/notes/components/multiline_comment_form.vue';
+import { commentLineOptions, formatLineRange } from '~/notes/components/multiline_comment_utils';
+import noteForm from '~/notes/components/note_form.vue';
+import autosave from '~/notes/mixins/autosave';
 import {
   DIFF_NOTE_TYPE,
   INLINE_DIFF_LINES_KEY,

app/assets/javascripts/diffs/store/actions.js

@@ -13,7 +13,7 @@ import httpStatusCodes from '~/lib/utils/http_status';
 import Poll from '~/lib/utils/poll';
 import { mergeUrlParams, getLocationHash } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
-import notesEventHub from '../../notes/event_hub';
+import notesEventHub from '~/notes/event_hub';
 import {
   PARALLEL_DIFF_VIEW_TYPE,
   INLINE_DIFF_VIEW_TYPE,

app/assets/javascripts/diffs/utils/performance.js

@@ -7,7 +7,7 @@ import {
   MR_DIFFS_MARK_DIFF_FILES_END,
   MR_DIFFS_MEASURE_FILE_TREE_DONE,
   MR_DIFFS_MEASURE_DIFF_FILES_DONE,
-} from '../../performance/constants';
+} from '~/performance/constants';
 
 import {
   EVT_PERF_MARK_FILE_TREE_START,

app/assets/javascripts/environments/folder/environments_folder_bundle.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import Translate from '../../vue_shared/translate';
+import Translate from '~/vue_shared/translate';
 import environmentsFolderApp from './environments_folder_view.vue';
 
 Vue.use(Translate);

app/assets/javascripts/ide/components/ide_status_bar.vue

@@ -3,8 +3,8 @@
 import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 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 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';

app/assets/javascripts/image_diff/helpers/init_image_diff.js

-import ImageFile from '../../commit/image_file';
+import ImageFile from '~/commit/image_file';
 import ImageDiff from '../image_diff';
 import ReplacedImageDiff from '../replaced_image_diff';
 

app/assets/javascripts/jira_connect/subscriptions/index.js

-import '../../webpack';
+import '~/webpack';
 
 import setConfigs from '@gitlab/ui/dist/config';
 import Vue from 'vue';

app/assets/javascripts/mr_popover/components/mr_popover.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
 import { GlPopover, GlDeprecatedSkeletonLoading as GlSkeletonLoading } from '@gitlab/ui';
-import CiIcon from '../../vue_shared/components/ci_icon.vue';
-import timeagoMixin from '../../vue_shared/mixins/timeago';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { mrStates, humanMRStates } from '../constants';
 import query from '../queries/merge_request.query.graphql';
 

app/assets/javascripts/notes/components/diff_discussion_header.vue

@@ -6,7 +6,7 @@ import { mapActions } from 'vuex';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__, __, sprintf } from '~/locale';
 
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import noteEditedText from './note_edited_text.vue';
 import noteHeader from './note_header.vue';
 

app/assets/javascripts/notes/components/diff_with_note.vue

@@ -9,7 +9,7 @@ import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
 import { getDiffMode } from '~/diffs/store/utils';
 import { diffViewerModes } from '~/ide/constants';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
-import { isCollapsed } from '../../diffs/utils/diff_file';
+import { isCollapsed } from '~/diffs/utils/diff_file';
 
 const FIRST_CHAR_REGEX = /^(\+|-| )/;
 

app/assets/javascripts/notes/components/note_edited_text.vue

 <script>
 /* eslint-disable @gitlab/vue-require-i18n-strings */
-import timeAgoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
+import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
   name: 'EditedNoteText',

app/assets/javascripts/notes/components/note_header.vue

@@ -8,7 +8,7 @@ import {
 import { mapActions } from 'vuex';
 import { __, s__ } from '~/locale';
 import timeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import UserNameWithStatus from '../../sidebar/components/assignees/user_name_with_status.vue';
+import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 
 import { NOTEABLE_TYPE_MAPPING } from '../constants';
 

app/assets/javascripts/notes/components/noteable_discussion.vue

@@ -10,7 +10,7 @@ import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
 import { s__, __ } from '~/locale';
 import diffLineNoteFormMixin from '~/notes/mixins/diff_line_note_form';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import userAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import eventHub from '../event_hub';
 import noteable from '../mixins/noteable';
 import resolvable from '../mixins/resolvable';

app/assets/javascripts/pages/admin/index.js

 import initGitlabVersionCheck from '~/gitlab_version_check';
-import initAdminStatisticsPanel from '../../admin/statistics_panel/index';
-import initVueAlerts from '../../vue_alerts';
+import initAdminStatisticsPanel from '~/admin/statistics_panel/index';
+import initVueAlerts from '~/vue_alerts';
 import initAdmin from './admin';
 
 initVueAlerts();

app/assets/javascripts/pages/projects/index.js

-import ShortcutsNavigation from '../../behaviors/shortcuts/shortcuts_navigation';
-import initTerraformNotification from '../../projects/terraform_notification';
+import ShortcutsNavigation from '~/behaviors/shortcuts/shortcuts_navigation';
+import initTerraformNotification from '~/projects/terraform_notification';
 import { initSidebarTracking } from '../shared/nav/sidebar_tracking';
 import Project from './project';
 

app/assets/javascripts/pages/projects/project.js

@@ -9,7 +9,7 @@ import axios from '~/lib/utils/axios_utils';
 import { serializeForm } from '~/lib/utils/forms';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
-import projectSelect from '../../project_select';
+import projectSelect from '~/project_select';
 
 export default class Project {
   constructor() {

app/assets/javascripts/repository/components/last_commit.vue

@@ -10,10 +10,10 @@ import {
 import defaultAvatarUrl from 'images/no_avatar.png';
 import pathLastCommitQuery from 'shared_queries/repository/path_last_commit.query.graphql';
 import { sprintf, s__ } from '~/locale';
-import CiIcon from '../../vue_shared/components/ci_icon.vue';
-import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
-import TimeagoTooltip from '../../vue_shared/components/time_ago_tooltip.vue';
-import UserAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import getRefMixin from '../mixins/get_ref';
 import projectPathQuery from '../queries/project_path.query.graphql';
 

app/assets/javascripts/serverless/components/url.vue

 <script>
-import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
   components: {

app/assets/javascripts/sidebar/components/copy_email_to_clipboard.vue

 <script>
-import CopyableField from '../../vue_shared/components/sidebar/copyable_field.vue';
+import CopyableField from '~/vue_shared/components/sidebar/copyable_field.vue';
 
 export default {
   components: {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue

 <script>
 import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import ciIcon from '../../vue_shared/components/ci_icon.vue';
+import ciIcon from '~/vue_shared/components/ci_icon.vue';
 
 export default {
   components: {

app/assets/javascripts/vue_shared/components/awards_list.vue

@@ -4,7 +4,7 @@ import { groupBy } from 'lodash';
 import EmojiPicker from '~/emoji/components/picker.vue';
 import { __, sprintf } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { glEmojiTag } from '../../emoji';
+import { glEmojiTag } from '~/emoji';
 
 // Internal constant, specific to this component, used when no `currentUserId` is given
 const NO_USER_ID = -1;