Merge branch 'master' into certmanager-temp

142 files changed, 504 insertions, 477 deletions

diff --git a/app/assets/javascripts/badges/components/badge.vue b/app/assets/javascripts/badges/components/badge.vue
index 8512bf9dd7b..ca1662313c2 100644
--- a/app/assets/javascripts/badges/components/badge.vue
+++ b/app/assets/javascripts/badges/components/badge.vue
@@ -1,7 +1,7 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
 import Tooltip from '~/vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   name: 'Badge',
diff --git a/app/assets/javascripts/badges/components/badge_form.vue b/app/assets/javascripts/badges/components/badge_form.vue
index 47e6e618219..0eff922d93c 100644
--- a/app/assets/javascripts/badges/components/badge_form.vue
+++ b/app/assets/javascripts/badges/components/badge_form.vue
@@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import createFlash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import createEmptyBadge from '../empty_badge';
 import Badge from './badge.vue';
 
diff --git a/app/assets/javascripts/badges/components/badge_list.vue b/app/assets/javascripts/badges/components/badge_list.vue
index ab518820378..5b64ea1080c 100644
--- a/app/assets/javascripts/badges/components/badge_list.vue
+++ b/app/assets/javascripts/badges/components/badge_list.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import BadgeListRow from './badge_list_row.vue';
 import { GROUP_BADGE } from '../constants';
 
diff --git a/app/assets/javascripts/badges/components/badge_list_row.vue b/app/assets/javascripts/badges/components/badge_list_row.vue
index f28eff18f03..d01465232a7 100644
--- a/app/assets/javascripts/badges/components/badge_list_row.vue
+++ b/app/assets/javascripts/badges/components/badge_list_row.vue
@@ -2,7 +2,7 @@
 import { mapActions, mapState } from 'vuex';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { PROJECT_BADGE } from '../constants';
 import Badge from './badge.vue';
 
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 5e28fc396ab..a04b828e277 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -1,6 +1,6 @@
 <script>
 import Sortable from 'sortablejs';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import boardNewIssue from './board_new_issue.vue';
 import boardCard from './board_card.vue';
 import eventHub from '../eventhub';
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index ee3dc38bca6..2a96d1443e1 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlButton } from '@gitlab-org/gitlab-ui';
+import { GlButton } from '@gitlab/ui';
 import eventHub from '../eventhub';
 import ProjectSelect from './project_select.vue';
 import ListIssue from '../models/issue';
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 2315a48a306..48c46ae32f1 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
@@ -231,7 +231,7 @@ export default {
         >
           <span class="js-assignee-tooltip">
             <span class="bold d-block">Assignee</span>
-            {{ assignee.name }} 
+            {{ assignee.name }}
             <span class="text-white-50">@{{ assignee.username }}</span>
           </span>
         </user-avatar-link>
diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue
index 025ef7e9743..d6c87132843 100644
--- a/app/assets/javascripts/boards/components/issue_due_date.vue
+++ b/app/assets/javascripts/boards/components/issue_due_date.vue
@@ -1,6 +1,6 @@
 <script>
 import dateFormat from 'dateformat';
-import { GlTooltip } from '@gitlab-org/gitlab-ui';
+import { GlTooltip } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import { getDayDifference, getTimeago, dateInWords } from '~/lib/utils/datetime_utility';
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
index efc7daf7812..a9803c8ab5d 100644
--- a/app/assets/javascripts/boards/components/issue_time_estimate.vue
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltip } from '@gitlab-org/gitlab-ui';
+import { GlTooltip } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
 
diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue
index fdd1346d4c7..fc0e3e46b88 100644
--- a/app/assets/javascripts/boards/components/modal/index.vue
+++ b/app/assets/javascripts/boards/components/modal/index.vue
@@ -6,7 +6,7 @@ import ModalList from './list.vue';
 import ModalFooter from './footer.vue';
 import EmptyState from './empty_state.vue';
 import ModalStore from '../../stores/modal_store';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
index 20665f903d5..c502e32d169 100644
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import ModalStore from '../../stores/modal_store';
 import boardsStore from '../../stores/boards_store';
diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue
index 503417644fa..83e6e237757 100644
--- a/app/assets/javascripts/boards/components/project_select.vue
+++ b/app/assets/javascripts/boards/components/project_select.vue
@@ -2,7 +2,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import Icon from '~/vue_shared/components/icon.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../eventhub';
 import Api from '../../api';
 
diff --git a/app/assets/javascripts/deploy_keys/components/action_btn.vue b/app/assets/javascripts/deploy_keys/components/action_btn.vue
index ea74fd27ff6..4acd21376bf 100644
--- a/app/assets/javascripts/deploy_keys/components/action_btn.vue
+++ b/app/assets/javascripts/deploy_keys/components/action_btn.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../eventhub';
 
 export default {
diff --git a/app/assets/javascripts/deploy_keys/components/app.vue b/app/assets/javascripts/deploy_keys/components/app.vue
index 631a9673b3e..1d2ac59e20a 100644
--- a/app/assets/javascripts/deploy_keys/components/app.vue
+++ b/app/assets/javascripts/deploy_keys/components/app.vue
@@ -6,7 +6,7 @@ import eventHub from '../eventhub';
 import DeployKeysService from '../service';
 import DeployKeysStore from '../store';
 import KeysPanel from './keys_panel.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index f80e20a4391..881febedb7c 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -3,7 +3,7 @@ import { mapState, mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../../notes/event_hub';
 import CompareVersions from './compare_versions.vue';
 import DiffFile from './diff_file.vue';
@@ -94,7 +94,7 @@ export default {
       return __('Show latest version');
     },
     canCurrentUserFork() {
-      return this.currentUser.canFork === true && this.currentUser.canCreateMergeRequest;
+      return this.currentUser.can_fork === true && this.currentUser.can_create_merge_request;
     },
     showCompareVersions() {
       return this.mergeRequestDiffs && this.mergeRequestDiff;
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 23d0bad2ecb..aa72aca1478 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -40,15 +40,17 @@ export default {
   },
   computed: {
     authorName() {
-      return (this.commit.author && this.commit.author.name) || this.commit.authorName;
+      return (this.commit.author && this.commit.author.name) || this.commit.author_name;
     },
     authorUrl() {
       return (
-        (this.commit.author && this.commit.author.webUrl) || `mailto:${this.commit.authorEmail}`
+        (this.commit.author && this.commit.author.web_url) || `mailto:${this.commit.author_email}`
       );
     },
     authorAvatar() {
-      return (this.commit.author && this.commit.author.avatarUrl) || this.commit.authorGravatarUrl;
+      return (
+        (this.commit.author && this.commit.author.avatar_url) || this.commit.author_gravatar_url
+      );
     },
   },
 };
@@ -66,18 +68,18 @@ export default {
     <div class="commit-detail flex-list">
       <div class="commit-content qa-commit-content">
         <a
-          :href="commit.commitUrl"
+          :href="commit.commit_url"
           class="commit-row-message item-title"
-          v-html="commit.titleHtml"
+          v-html="commit.title_html"
         ></a>
 
         <span class="commit-row-message d-block d-sm-none">
           &middot;
-          {{ commit.shortId }}
+          {{ commit.short_id }}
         </span>
 
         <button
-          v-if="commit.descriptionHtml"
+          v-if="commit.description_html"
           class="text-expander js-toggle-button"
           type="button"
           :aria-label="__('Toggle commit description')"
@@ -95,29 +97,29 @@ export default {
           ></a>
           {{ s__('CommitWidget|authored') }}
           <time-ago-tooltip
-            :time="commit.authoredDate"
+            :time="commit.authored_date"
           />
         </div>
 
         <pre
-          v-if="commit.descriptionHtml"
+          v-if="commit.description_html"
           class="commit-row-description js-toggle-content append-bottom-8"
-          v-html="commit.descriptionHtml"
+          v-html="commit.description_html"
         ></pre>
       </div>
       <div class="commit-actions flex-row d-none d-sm-flex">
         <div
-          v-if="commit.signatureHtml"
-          v-html="commit.signatureHtml"
+          v-if="commit.signature_html"
+          v-html="commit.signature_html"
         ></div>
         <commit-pipeline-status
-          v-if="commit.pipelineStatusPath"
-          :endpoint="commit.pipelineStatusPath"
+          v-if="commit.pipeline_status_path"
+          :endpoint="commit.pipeline_status_path"
         />
         <div class="commit-sha-group">
           <div
             class="label label-monospace"
-            v-text="commit.shortId"
+            v-text="commit.short_id"
           ></div>
           <clipboard-button
             :text="commit.id"
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index a5b87dfc2d9..f50cb94a18f 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import Tooltip from '@gitlab-org/gitlab-ui/dist/directives/tooltip';
+import Tooltip from '@gitlab/ui/dist/directives/tooltip';
 import { __ } from '~/locale';
 import { getParameterValues, mergeUrlParams } from '~/lib/utils/url_utility';
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
index f4b333f3700..112206e4ad6 100644
--- a/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions_dropdown.vue
@@ -56,16 +56,16 @@ export default {
   methods: {
     commitsText(version) {
       return n__(
-        `${version.commitsCount} commit,`,
-        `${version.commitsCount} commits,`,
-        version.commitsCount,
+        `${version.commits_count} commit,`,
+        `${version.commits_count} commits,`,
+        version.commits_count,
       );
     },
     href(version) {
       if (this.showCommitCount) {
-        return version.versionPath;
+        return version.version_path;
       }
-      return version.comparePath;
+      return version.compare_path;
     },
     versionName(version) {
       if (this.isLatest(version)) {
@@ -74,7 +74,7 @@ export default {
       if (this.targetBranch && (this.isBase(version) || !version)) {
         return this.targetBranch.branchName;
       }
-      return `version ${version.versionIndex}`;
+      return `version ${version.version_index}`;
     },
     isActive(version) {
       if (!version) {
@@ -84,11 +84,11 @@ export default {
       if (this.targetBranch) {
         return (
           (this.isBase(version) && !this.startVersion) ||
-          (this.startVersion && this.startVersion.versionIndex === version.versionIndex)
+          (this.startVersion && this.startVersion.version_index === version.version_index)
         );
       }
 
-      return version.versionIndex === this.mergeRequestVersion.versionIndex;
+      return version.version_index === this.mergeRequestVersion.version_index;
     },
     isBase(version) {
       if (!version || !this.targetBranch) {
@@ -98,7 +98,7 @@ export default {
     },
     isLatest(version) {
       return (
-        this.mergeRequestVersion && version.versionIndex === this.targetVersions[0].versionIndex
+        this.mergeRequestVersion && version.version_index === this.targetVersions[0].version_index
       );
     },
   },
@@ -142,7 +142,7 @@ export default {
               </div>
               <div>
                 <small class="commit-sha">
-                  {{ version.truncatedCommitSha }}
+                  {{ version.truncated_commit_sha }}
                 </small>
               </div>
               <div>
@@ -151,8 +151,8 @@ export default {
                     {{ commitsText(version) }}
                   </template>
                   <time-ago
-                    v-if="version.createdAt"
-                    :time="version.createdAt"
+                    v-if="version.created_at"
+                    :time="version.created_at"
                     class="js-timeago js-timeago-render"
                   />
                 </small>
diff --git a/app/assets/javascripts/diffs/components/diff_content.vue b/app/assets/javascripts/diffs/components/diff_content.vue
index 547742a5ff4..5e5fda5fba6 100644
--- a/app/assets/javascripts/diffs/components/diff_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_content.vue
@@ -39,7 +39,7 @@ export default {
       return this.diffFile.viewer.name === 'text';
     },
     diffFileCommentForm() {
-      return this.getCommentFormForDiffFile(this.diffFile.fileHash);
+      return this.getCommentFormForDiffFile(this.diffFile.file_hash);
     },
     showNotesContainer() {
       return this.diffFile.discussions.length || this.diffFileCommentForm;
@@ -73,28 +73,28 @@ export default {
         <inline-diff-view
           v-if="isInlineView"
           :diff-file="diffFile"
-          :diff-lines="diffFile.highlightedDiffLines || []"
+          :diff-lines="diffFile.highlighted_diff_lines || []"
         />
         <parallel-diff-view
           v-if="isParallelView"
           :diff-file="diffFile"
-          :diff-lines="diffFile.parallelDiffLines || []"
+          :diff-lines="diffFile.parallel_diff_lines || []"
         />
       </template>
       <diff-viewer
         v-else
         :diff-mode="diffMode"
-        :new-path="diffFile.newPath"
-        :new-sha="diffFile.diffRefs.headSha"
-        :old-path="diffFile.oldPath"
-        :old-sha="diffFile.diffRefs.baseSha"
-        :file-hash="diffFile.fileHash"
+        :new-path="diffFile.new_path"
+        :new-sha="diffFile.diff_refs.head_sha"
+        :old-path="diffFile.old_path"
+        :old-sha="diffFile.diff_refs.base_sha"
+        :file-hash="diffFile.file_hash"
         :project-path="projectPath"
       >
         <image-diff-overlay
           slot="image-overlay"
           :discussions="diffFile.discussions"
-          :file-hash="diffFile.fileHash"
+          :file-hash="diffFile.file_hash"
           :can-comment="getNoteableData.current_user.can_create_note"
         />
         <div
@@ -115,7 +115,7 @@ export default {
             :save-button-title="__('Comment')"
             class="diff-comment-form new-note discussion-form discussion-form-container"
             @handleFormUpdate="handleSaveNote"
-            @cancelForm="closeDiffFileCommentForm(diffFile.fileHash)"
+            @cancelForm="closeDiffFileCommentForm(diffFile.file_hash)"
           />          
         </div>
       </diff-viewer>
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index e76c7afd863..5da0bfb5bfe 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { __, sprintf } from '~/locale';
 import createFlash from '~/flash';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import DiffFileHeader from './diff_file_header.vue';
 import DiffContent from './diff_content.vue';
 
@@ -32,6 +32,7 @@ export default {
   computed: {
     ...mapState('diffs', ['currentDiffFileId']),
     ...mapGetters(['isNotesFetched']),
+    ...mapGetters('diffs', ['getDiffFileDiscussions']),
     isCollapsed() {
       return this.file.collapsed || false;
     },
@@ -39,7 +40,7 @@ export default {
       return sprintf(
         __('You can %{linkStart}view the blob%{linkEnd} instead.'),
         {
-          linkStart: `<a href="${_.escape(this.file.viewPath)}">`,
+          linkStart: `<a href="${_.escape(this.file.view_path)}">`,
           linkEnd: '</a>',
         },
         false,
@@ -48,21 +49,34 @@ export default {
     showExpandMessage() {
       return (
         this.isCollapsed ||
-        (!this.file.highlightedDiffLines &&
+        (!this.file.highlighted_diff_lines &&
           !this.isLoadingCollapsedDiff &&
-          !this.file.tooLarge &&
+          !this.file.too_large &&
           this.file.text)
       );
     },
     showLoadingIcon() {
       return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
     },
+    hasDiffLines() {
+      return (
+        this.file.highlighted_diff_lines &&
+        this.file.parallel_diff_lines &&
+        this.file.parallel_diff_lines.length > 0
+      );
+    },
+  },
+  watch: {
+    'file.collapsed': function fileCollapsedWatch(newVal, oldVal) {
+      if (!newVal && oldVal && !this.hasDiffLines) {
+        this.handleLoadCollapsedDiff();
+      }
+    },
   },
   methods: {
     ...mapActions('diffs', ['loadCollapsedDiff', 'assignDiscussionsToDiff']),
     handleToggle() {
-      const { highlightedDiffLines, parallelDiffLines } = this.file;
-      if (!highlightedDiffLines && parallelDiffLines !== undefined && !parallelDiffLines.length) {
+      if (!this.hasDiffLines) {
         this.handleLoadCollapsedDiff();
       } else {
         this.file.collapsed = !this.file.collapsed;
@@ -81,7 +95,7 @@ export default {
         .then(() => {
           requestIdleCallback(
             () => {
-              this.assignDiscussionsToDiff();
+              this.assignDiscussionsToDiff(this.getDiffFileDiscussions(this.file));
             },
             { timeout: 1000 },
           );
@@ -103,9 +117,9 @@ export default {
 
 <template>
   <div
-    :id="file.fileHash"
+    :id="file.file_hash"
     :class="{
-      'is-active': currentDiffFileId === file.fileHash
+      'is-active': currentDiffFileId === file.file_hash
     }"
     class="diff-file file-holder"
   >
@@ -129,7 +143,7 @@ export default {
         make your changes there, and submit a merge request.
       </span>
       <a
-        :href="file.forkPath"
+        :href="file.fork_path"
         class="js-fork-suggestion-button btn btn-grouped btn-inverted btn-success"
       >
         Fork
@@ -145,7 +159,7 @@ export default {
 
     <diff-content
       v-if="!isCollapsed && file.renderIt"
-      :class="{ hidden: isCollapsed || file.tooLarge }"
+      :class="{ hidden: isCollapsed || file.too_large }"
       :diff-file="file"
     />
     <gl-loading-icon
@@ -166,7 +180,7 @@ export default {
       </a>
     </div>
     <div
-      v-if="file.tooLarge"
+      v-if="file.too_large"
       class="nothing-here-block diff-collapsed js-too-large-diff"
     >
       {{ __('This source diff could not be displayed because it is too large.') }}
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index dcf1057eb84..af03cec6582 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -68,32 +68,32 @@ export default {
     },
     titleLink() {
       if (this.diffFile.submodule) {
-        return this.diffFile.submoduleTreeUrl || this.diffFile.submoduleLink;
+        return this.diffFile.submodule_tree_url || this.diffFile.submodule_link;
       }
       return this.discussionPath;
     },
     filePath() {
       if (this.diffFile.submodule) {
-        return `${this.diffFile.filePath} @ ${truncateSha(this.diffFile.blob.id)}`;
+        return `${this.diffFile.file_path} @ ${truncateSha(this.diffFile.blob.id)}`;
       }
 
-      if (this.diffFile.deletedFile) {
-        return sprintf(__('%{filePath} deleted'), { filePath: this.diffFile.filePath }, false);
+      if (this.diffFile.deleted_file) {
+        return sprintf(__('%{filePath} deleted'), { filePath: this.diffFile.file_path }, false);
       }
 
-      return this.diffFile.filePath;
+      return this.diffFile.file_path;
     },
     titleTag() {
-      return this.diffFile.fileHash ? 'a' : 'span';
+      return this.diffFile.file_hash ? 'a' : 'span';
     },
     isUsingLfs() {
-      return this.diffFile.storedExternally && this.diffFile.externalStorage === 'lfs';
+      return this.diffFile.stored_externally && this.diffFile.external_storage === 'lfs';
     },
     collapseIcon() {
       return this.expanded ? 'chevron-down' : 'chevron-right';
     },
     viewFileButtonText() {
-      const truncatedContentSha = _.escape(truncateSha(this.diffFile.contentSha));
+      const truncatedContentSha = _.escape(truncateSha(this.diffFile.content_sha));
       return sprintf(
         s__('MergeRequests|View file @ %{commitId}'),
         {
@@ -103,7 +103,7 @@ export default {
       );
     },
     viewReplacedFileButtonText() {
-      const truncatedBaseSha = _.escape(truncateSha(this.diffFile.diffRefs.baseSha));
+      const truncatedBaseSha = _.escape(truncateSha(this.diffFile.diff_refs.base_sha));
       return sprintf(
         s__('MergeRequests|View replaced file @ %{commitId}'),
         {
@@ -113,7 +113,7 @@ export default {
       );
     },
     gfmCopyText() {
-      return `\`${this.diffFile.filePath}\``;
+      return `\`${this.diffFile.file_path}\``;
     },
   },
   methods: {
@@ -164,21 +164,21 @@ export default {
           aria-hidden="true"
           css-classes="js-file-icon append-right-5"
         />
-        <span v-if="diffFile.renamedFile">
+        <span v-if="diffFile.renamed_file">
           <strong
             v-tooltip
-            :title="diffFile.oldPath"
+            :title="diffFile.old_path"
             class="file-title-name"
             data-container="body"
-            v-html="diffFile.oldPathHtml"
+            v-html="diffFile.old_path_html"
           ></strong>
           →
           <strong
             v-tooltip
-            :title="diffFile.newPath"
+            :title="diffFile.new_path"
             class="file-title-name"
             data-container="body"
-            v-html="diffFile.newPathHtml"
+            v-html="diffFile.new_path_html"
           ></strong>
         </span>
 
@@ -195,16 +195,16 @@ export default {
 
       <clipboard-button
         :title="__('Copy file path to clipboard')"
-        :text="diffFile.filePath"
+        :text="diffFile.file_path"
         :gfm="gfmCopyText"
         css-class="btn-default btn-transparent btn-clipboard"
       />
 
       <small
-        v-if="diffFile.modeChanged"
+        v-if="diffFile.mode_changed"
         ref="fileMode"
       >
-        {{ diffFile.aMode }} → {{ diffFile.bMode }}
+        {{ diffFile.a_mode }} → {{ diffFile.b_mode }}
       </small>
 
       <span
@@ -220,7 +220,7 @@ export default {
       class="file-actions d-none d-sm-block"
     >
       <template
-        v-if="diffFile.blob && diffFile.blob.readableText"
+        v-if="diffFile.blob && diffFile.blob.readable_text"
       >
         <button
           :disabled="!diffHasDiscussions(diffFile)"
@@ -234,33 +234,33 @@ export default {
         </button>
 
         <edit-button
-          v-if="!diffFile.deletedFile"
+          v-if="!diffFile.deleted_file"
           :can-current-user-fork="canCurrentUserFork"
-          :edit-path="diffFile.editPath"
-          :can-modify-blob="diffFile.canModifyBlob"
+          :edit-path="diffFile.edit_path"
+          :can-modify-blob="diffFile.can_modify_blob"
           @showForkMessage="showForkMessage"
         />
       </template>
 
       <a
-        v-if="diffFile.replacedViewPath"
-        :href="diffFile.replacedViewPath"
+        v-if="diffFile.replaced_view_path"
+        :href="diffFile.replaced_view_path"
         class="btn view-file js-view-file"
         v-html="viewReplacedFileButtonText"
       >
       </a>
       <a
-        :href="diffFile.viewPath"
+        :href="diffFile.view_path"
         class="btn view-file js-view-file"
         v-html="viewFileButtonText"
       >
       </a>
 
       <a
-        v-if="diffFile.externalUrl"
+        v-if="diffFile.external_url"
         v-tooltip
-        :href="diffFile.externalUrl"
-        :title="`View on ${diffFile.formattedExternalUrl}`"
+        :href="diffFile.external_url"
+        :title="`View on ${diffFile.formatted_external_url}`"
         target="_blank"
         rel="noopener noreferrer"
         class="btn btn-file-option"
diff --git a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
index 254bc235691..8f8c2a31c71 100644
--- a/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
+++ b/app/assets/javascripts/diffs/components/diff_gutter_avatars.vue
@@ -3,7 +3,7 @@ import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { pluralize, truncate } from '~/lib/utils/text_utility';
 import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import { COUNT_OF_AVATARS_IN_GUTTER, LENGTH_OF_AVATAR_TOOLTIP } from '../constants';
 
 export default {
diff --git a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
index f4a9be19496..8f037eeefc4 100644
--- a/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_gutter_content.vue
@@ -73,7 +73,7 @@ export default {
     }),
     ...mapGetters(['isLoggedIn']),
     lineHref() {
-      return `#${this.line.lineCode || ''}`;
+      return `#${this.line.line_code || ''}`;
     },
     shouldShowCommentButton() {
       return (
@@ -99,7 +99,7 @@ export default {
   methods: {
     ...mapActions('diffs', ['loadMoreLines', 'showCommentForm']),
     handleCommentButton() {
-      this.showCommentForm({ lineCode: this.line.lineCode });
+      this.showCommentForm({ lineCode: this.line.line_code });
     },
     handleLoadMoreLines() {
       if (this.isRequesting) {
@@ -108,8 +108,8 @@ export default {
 
       this.isRequesting = true;
       const endpoint = this.contextLinesPath;
-      const oldLineNumber = this.line.metaData.oldPos || 0;
-      const newLineNumber = this.line.metaData.newPos || 0;
+      const oldLineNumber = this.line.meta_data.old_pos || 0;
+      const newLineNumber = this.line.meta_data.new_pos || 0;
       const offset = newLineNumber - oldLineNumber;
       const bottom = this.isBottom;
       const { fileHash } = this;
@@ -125,12 +125,12 @@ export default {
         to = lineNumber + UNFOLD_COUNT;
       } else {
         const diffFile = utils.findDiffFile(this.diffFiles, this.fileHash);
-        const indexForInline = utils.findIndexInInlineLines(diffFile.highlightedDiffLines, {
+        const indexForInline = utils.findIndexInInlineLines(diffFile.highlighted_diff_lines, {
           oldLineNumber,
           newLineNumber,
         });
-        const prevLine = diffFile.highlightedDiffLines[indexForInline - 2];
-        const prevLineNumber = (prevLine && prevLine.newLine) || 0;
+        const prevLine = diffFile.highlighted_diff_lines[indexForInline - 2];
+        const prevLineNumber = (prevLine && prevLine.new_line) || 0;
 
         if (since <= prevLineNumber + 1) {
           since = prevLineNumber + 1;
diff --git a/app/assets/javascripts/diffs/components/diff_line_note_form.vue b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
index bb9bb821de3..07f38172575 100644
--- a/app/assets/javascripts/diffs/components/diff_line_note_form.vue
+++ b/app/assets/javascripts/diffs/components/diff_line_note_form.vue
@@ -53,7 +53,7 @@ export default {
         this.noteableData.diff_head_sha,
         DIFF_NOTE_TYPE,
         this.noteableData.source_project_id,
-        this.line.lineCode,
+        this.line.line_code,
       ];
 
       this.initAutoSave(this.noteableData, keys);
@@ -72,7 +72,7 @@ export default {
       }
 
       this.cancelCommentForm({
-        lineCode: this.line.lineCode,
+        lineCode: this.line.line_code,
       });
       this.$nextTick(() => {
         this.resetAutoSave();
@@ -94,7 +94,7 @@ export default {
     <note-form
       ref="noteForm"
       :is-editing="true"
-      :line-code="line.lineCode"
+      :line-code="line.line_code"
       save-button-title="Comment"
       class="diff-comment-form"
       @cancelForm="handleCancelCommentForm"
diff --git a/app/assets/javascripts/diffs/components/diff_table_cell.vue b/app/assets/javascripts/diffs/components/diff_table_cell.vue
index 5d9a0b123fe..0a893a57f07 100644
--- a/app/assets/javascripts/diffs/components/diff_table_cell.vue
+++ b/app/assets/javascripts/diffs/components/diff_table_cell.vue
@@ -96,9 +96,7 @@ export default {
       };
     },
     lineNumber() {
-      const { lineType } = this;
-
-      return lineType === OLD_LINE_TYPE ? this.line.oldLine : this.line.newLine;
+      return this.lineType === OLD_LINE_TYPE ? this.line.old_line : this.line.new_line;
     },
   },
 };
diff --git a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
index 46a51859da5..b9e14c53d2c 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_comment_row.vue
@@ -48,7 +48,7 @@ export default {
           :discussions="line.discussions"
         />
         <diff-line-note-form
-          v-if="diffLineCommentForms[line.lineCode]"
+          v-if="diffLineCommentForms[line.line_code]"
           :diff-file-hash="diffFileHash"
           :line="line"
           :note-target-line="line"
diff --git a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
index 542acd3d930..1f4088066d1 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_table_row.vue
@@ -52,9 +52,7 @@ export default {
       };
     },
     inlineRowId() {
-      const { lineCode, oldLine, newLine } = this.line;
-
-      return lineCode || `${this.fileHash}_${oldLine}_${newLine}`;
+      return this.line.line_code || `${this.fileHash}_${this.line.old_line}_${this.line.new_line}`;
     },
   },
   created() {
@@ -107,7 +105,7 @@ export default {
     <td
       :class="line.type"
       class="line_content"
-      v-html="line.richText"
+      v-html="line.rich_text"
     >
     </td>
   </tr>
diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index fbf9e77ac07..79efac89e98 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -43,16 +43,16 @@ export default {
         v-for="(line, index) in diffLines"
       >
         <inline-diff-table-row
-          :key="line.lineCode"
-          :file-hash="diffFile.fileHash"
-          :context-lines-path="diffFile.contextLinesPath"
+          :key="line.line_code"
+          :file-hash="diffFile.file_hash"
+          :context-lines-path="diffFile.context_lines_path"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"
         />
         <inline-diff-comment-row
           v-if="shouldRenderInlineCommentRow(line)"
           :key="index"
-          :diff-file-hash="diffFile.fileHash"
+          :diff-file-hash="diffFile.file_hash"
           :line="line"
           :line-index="index"
         />
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
index 3b71c0a1fd4..00c2df4dac1 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_comment_row.vue
@@ -27,10 +27,10 @@ export default {
       diffLineCommentForms: state => state.diffs.diffLineCommentForms,
     }),
     leftLineCode() {
-      return this.line.left && this.line.left.lineCode;
+      return this.line.left && this.line.left.line_code;
     },
     rightLineCode() {
-      return this.line.right && this.line.right.lineCode;
+      return this.line.right && this.line.right.line_code;
     },
     hasExpandedDiscussionOnLeft() {
       return this.line.left && this.line.left.discussions
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
index fcc3b3e9117..2d87db12fd6 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_table_row.vue
@@ -120,11 +120,11 @@ export default {
         class="diff-line-num old_line"
       />
       <td
-        :id="line.left.lineCode"
+        :id="line.left.line_code"
         :class="parallelViewLeftLineType"
         class="line_content parallel left-side"
         @mousedown.native="handleParallelLineMouseDown"
-        v-html="line.left.richText"
+        v-html="line.left.rich_text"
       >
       </td>
     </template>
@@ -146,11 +146,11 @@ export default {
         class="diff-line-num new_line"
       />
       <td
-        :id="line.right.lineCode"
+        :id="line.right.line_code"
         :class="line.right.type"
         class="line_content parallel right-side"
         @mousedown.native="handleParallelLineMouseDown"
-        v-html="line.right.richText"
+        v-html="line.right.rich_text"
       >
       </td>
     </template>
diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index 3452f0d2b00..6942f9b53e0 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -46,8 +46,8 @@ export default {
         >
           <parallel-diff-table-row
             :key="index"
-            :file-hash="diffFile.fileHash"
-            :context-lines-path="diffFile.contextLinesPath"
+            :file-hash="diffFile.file_hash"
+            :context-lines-path="diffFile.context_lines_path"
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"
           />
@@ -55,7 +55,7 @@ export default {
             v-if="shouldRenderParallelCommentRow(line)"
             :key="`dcr-${index}`"
             :line="line"
-            :diff-file-hash="diffFile.fileHash"
+            :diff-file-hash="diffFile.file_hash"
             :line-index="index"
           />
         </template>
diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue
index ff1eb23cea3..1f82eeae6cb 100644
--- a/app/assets/javascripts/diffs/components/tree_list.vue
+++ b/app/assets/javascripts/diffs/components/tree_list.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import { convertPermissionToBoolean } from '~/lib/utils/common_utils';
 import Icon from '~/vue_shared/components/icon.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
diff --git a/app/assets/javascripts/diffs/index.js b/app/assets/javascripts/diffs/index.js
index aae89109c27..06ef4207d85 100644
--- a/app/assets/javascripts/diffs/index.js
+++ b/app/assets/javascripts/diffs/index.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import { mapState } from 'vuex';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import diffsApp from './components/app.vue';
 
 export default function initDiffsApp(store) {
@@ -17,9 +16,7 @@ export default function initDiffsApp(store) {
       return {
         endpoint: dataset.endpoint,
         projectPath: dataset.projectPath,
-        currentUser: convertObjectPropsToCamelCase(JSON.parse(dataset.currentUserData), {
-          deep: true,
-        }),
+        currentUser: JSON.parse(dataset.currentUserData) || {},
       };
     },
     computed: {
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 41256fdd27a..6354d3ce1e6 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -50,8 +50,8 @@ export const assignDiscussionsToDiff = (
 };
 
 export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => {
-  const { fileHash, line_code, id } = removeDiscussion;
-  commit(types.REMOVE_LINE_DISCUSSIONS_FOR_FILE, { fileHash, lineCode: line_code, id });
+  const { file_hash, line_code, id } = removeDiscussion;
+  commit(types.REMOVE_LINE_DISCUSSIONS_FOR_FILE, { fileHash: file_hash, lineCode: line_code, id });
 };
 
 export const startRenderDiffsQueue = ({ state, commit }) => {
@@ -167,7 +167,7 @@ export const expandAllFiles = ({ commit }) => {
 export const toggleFileDiscussions = ({ getters, dispatch }, diff) => {
   const discussions = getters.getDiffFileDiscussions(diff);
   const shouldCloseAll = getters.diffHasAllExpandedDiscussions(diff);
-  const shouldExpandAll = getters.diffHasAllCollpasedDiscussions(diff);
+  const shouldExpandAll = getters.diffHasAllCollapsedDiscussions(diff);
 
   discussions.forEach(discussion => {
     const data = { discussionId: discussion.id };
@@ -189,7 +189,7 @@ export const saveDiffDiscussion = ({ dispatch }, { note, formData }) => {
   return dispatch('saveNote', postData, { root: true })
     .then(result => dispatch('updateDiscussion', result.discussion, { root: true }))
     .then(discussion => dispatch('assignDiscussionsToDiff', [discussion]))
-    .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.fileHash))
+    .then(() => dispatch('closeDiffFileCommentForm', formData.diffFile.file_hash))
     .then(() => dispatch('startTaskList', null, { root: true }))
     .catch(() => createFlash(s__('MergeRequests|Saving the comment failed')));
 };
diff --git a/app/assets/javascripts/diffs/store/getters.js b/app/assets/javascripts/diffs/store/getters.js
index bf490f9d78a..05e32e3c1f1 100644
--- a/app/assets/javascripts/diffs/store/getters.js
+++ b/app/assets/javascripts/diffs/store/getters.js
@@ -1,4 +1,3 @@
-import _ from 'underscore';
 import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '../constants';
 
 export const isParallelView = state => state.diffViewType === PARALLEL_DIFF_VIEW_TYPE;
@@ -28,7 +27,7 @@ export const diffHasAllExpandedDiscussions = (state, getters) => diff => {
  * @param {Object} diff
  * @returns {Boolean}
  */
-export const diffHasAllCollpasedDiscussions = (state, getters) => diff => {
+export const diffHasAllCollapsedDiscussions = (state, getters) => diff => {
   const discussions = getters.getDiffFileDiscussions(diff);
 
   return (
@@ -68,8 +67,7 @@ export const diffHasDiscussions = (state, getters) => diff =>
  */
 export const getDiffFileDiscussions = (state, getters, rootState, rootGetters) => diff =>
   rootGetters.discussions.filter(
-    discussion =>
-      discussion.diff_discussion && _.isEqual(discussion.diff_file.file_hash, diff.fileHash),
+    discussion => discussion.diff_discussion && discussion.diff_file.file_hash === diff.file_hash,
   ) || [];
 
 export const shouldRenderParallelCommentRow = state => line => {
@@ -90,14 +88,14 @@ export const shouldRenderParallelCommentRow = state => line => {
     return true;
   }
 
-  const hasCommentFormOnLeft = line.left && state.diffLineCommentForms[line.left.lineCode];
-  const hasCommentFormOnRight = line.right && state.diffLineCommentForms[line.right.lineCode];
+  const hasCommentFormOnLeft = line.left && state.diffLineCommentForms[line.left.line_code];
+  const hasCommentFormOnRight = line.right && state.diffLineCommentForms[line.right.line_code];
 
   return hasCommentFormOnLeft || hasCommentFormOnRight;
 };
 
 export const shouldRenderInlineCommentRow = state => line => {
-  if (state.diffLineCommentForms[line.lineCode]) return true;
+  if (state.diffLineCommentForms[line.line_code]) return true;
 
   if (!line.discussions || line.discussions.length === 0) {
     return false;
@@ -108,7 +106,7 @@ export const shouldRenderInlineCommentRow = state => line => {
 
 // prevent babel-plugin-rewire from generating an invalid default during karma∂ tests
 export const getDiffFileByHash = state => fileHash =>
-  state.diffFiles.find(file => file.fileHash === fileHash);
+  state.diffFiles.find(file => file.file_hash === fileHash);
 
 export const allBlobs = state => Object.values(state.treeEntries).filter(f => f.type === 'blob');
 
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index e651c197968..2133cfe4825 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -23,12 +23,11 @@ export default {
   },
 
   [types.SET_DIFF_DATA](state, data) {
-    const diffData = convertObjectPropsToCamelCase(data, { deep: true });
-    prepareDiffData(diffData);
-    const { tree, treeEntries } = generateTreeList(diffData.diffFiles);
+    prepareDiffData(data);
+    const { tree, treeEntries } = generateTreeList(data.diff_files);
 
     Object.assign(state, {
-      ...diffData,
+      ...convertObjectPropsToCamelCase(data),
       tree: sortTree(tree),
       treeEntries,
     });
@@ -42,7 +41,7 @@ export default {
 
   [types.SET_MERGE_REQUEST_DIFFS](state, mergeRequestDiffs) {
     Object.assign(state, {
-      mergeRequestDiffs: convertObjectPropsToCamelCase(mergeRequestDiffs, { deep: true }),
+      mergeRequestDiffs,
     });
   },
 
@@ -62,19 +61,18 @@ export default {
     const { lineNumbers, contextLines, fileHash } = options;
     const { bottom } = options.params;
     const diffFile = findDiffFile(state.diffFiles, fileHash);
-    const { highlightedDiffLines, parallelDiffLines } = diffFile;
 
     removeMatchLine(diffFile, lineNumbers, bottom);
 
     const lines = addLineReferences(contextLines, lineNumbers, bottom).map(line => ({
       ...line,
-      lineCode: line.lineCode || `${fileHash}_${line.oldLine}_${line.newLine}`,
+      line_code: line.line_code || `${fileHash}_${line.old_line}_${line.new_line}`,
       discussions: line.discussions || [],
     }));
 
     addContextLines({
-      inlineLines: highlightedDiffLines,
-      parallelLines: parallelDiffLines,
+      inlineLines: diffFile.highlighted_diff_lines,
+      parallelLines: diffFile.parallel_diff_lines,
       contextLines: lines,
       bottom,
       lineNumbers,
@@ -82,10 +80,9 @@ export default {
   },
 
   [types.ADD_COLLAPSED_DIFFS](state, { file, data }) {
-    const normalizedData = convertObjectPropsToCamelCase(data, { deep: true });
-    prepareDiffData(normalizedData);
-    const [newFileData] = normalizedData.diffFiles.filter(f => f.fileHash === file.fileHash);
-    const selectedFile = state.diffFiles.find(f => f.fileHash === file.fileHash);
+    prepareDiffData(data);
+    const [newFileData] = data.diff_files.filter(f => f.file_hash === file.file_hash);
+    const selectedFile = state.diffFiles.find(f => f.file_hash === file.file_hash);
     Object.assign(selectedFile, { ...newFileData });
   },
 
@@ -101,20 +98,20 @@ export default {
 
     const discussionLineCode = discussion.line_code;
     const fileHash = discussion.diff_file.file_hash;
-    const lineCheck = ({ lineCode }) =>
-      lineCode === discussionLineCode &&
+    const lineCheck = line =>
+      line.line_code === discussionLineCode &&
       isDiscussionApplicableToLine({
         discussion,
-        diffPosition: diffPositionByLineCode[lineCode],
+        diffPosition: diffPositionByLineCode[line.line_code],
         latestDiff,
       });
 
     state.diffFiles = state.diffFiles.map(diffFile => {
-      if (diffFile.fileHash === fileHash) {
+      if (diffFile.file_hash === fileHash) {
         const file = { ...diffFile };
 
-        if (file.highlightedDiffLines) {
-          file.highlightedDiffLines = file.highlightedDiffLines.map(line => {
+        if (file.highlighted_diff_lines) {
+          file.highlighted_diff_lines = file.highlighted_diff_lines.map(line => {
             if (lineCheck(line)) {
               return {
                 ...line,
@@ -126,8 +123,8 @@ export default {
           });
         }
 
-        if (file.parallelDiffLines) {
-          file.parallelDiffLines = file.parallelDiffLines.map(line => {
+        if (file.parallel_diff_lines) {
+          file.parallel_diff_lines = file.parallel_diff_lines.map(line => {
             const left = line.left && lineCheck(line.left);
             const right = line.right && lineCheck(line.right);
 
@@ -148,7 +145,7 @@ export default {
           });
         }
 
-        if (!file.parallelDiffLines || !file.highlightedDiffLines) {
+        if (!file.parallel_diff_lines || !file.highlighted_diff_lines) {
           file.discussions = file.discussions.concat(discussion);
         }
 
@@ -160,16 +157,16 @@ export default {
   },
 
   [types.REMOVE_LINE_DISCUSSIONS_FOR_FILE](state, { fileHash, lineCode, id }) {
-    const selectedFile = state.diffFiles.find(f => f.fileHash === fileHash);
+    const selectedFile = state.diffFiles.find(f => f.file_hash === fileHash);
     if (selectedFile) {
-      if (selectedFile.parallelDiffLines) {
-        const targetLine = selectedFile.parallelDiffLines.find(
+      if (selectedFile.parallel_diff_lines) {
+        const targetLine = selectedFile.parallel_diff_lines.find(
           line =>
-            (line.left && line.left.lineCode === lineCode) ||
-            (line.right && line.right.lineCode === lineCode),
+            (line.left && line.left.line_code === lineCode) ||
+            (line.right && line.right.line_code === lineCode),
         );
         if (targetLine) {
-          const side = targetLine.left && targetLine.left.lineCode === lineCode ? 'left' : 'right';
+          const side = targetLine.left && targetLine.left.line_code === lineCode ? 'left' : 'right';
 
           Object.assign(targetLine[side], {
             discussions: [],
@@ -177,9 +174,9 @@ export default {
         }
       }
 
-      if (selectedFile.highlightedDiffLines) {
-        const targetInlineLine = selectedFile.highlightedDiffLines.find(
-          line => line.lineCode === lineCode,
+      if (selectedFile.highlighted_diff_lines) {
+        const targetInlineLine = selectedFile.highlighted_diff_lines.find(
+          line => line.line_code === lineCode,
         );
 
         if (targetInlineLine) {
diff --git a/app/assets/javascripts/diffs/store/utils.js b/app/assets/javascripts/diffs/store/utils.js
index a935b9b1ffa..d9d3c0f2ca2 100644
--- a/app/assets/javascripts/diffs/store/utils.js
+++ b/app/assets/javascripts/diffs/store/utils.js
@@ -1,5 +1,4 @@
 import _ from 'underscore';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { diffModes } from '~/ide/constants';
 import {
   LINE_POSITION_LEFT,
@@ -15,7 +14,7 @@ import {
 } from '../constants';
 
 export function findDiffFile(files, hash) {
-  return files.filter(file => file.fileHash === hash)[0];
+  return files.filter(file => file.file_hash === hash)[0];
 }
 
 export const getReversePosition = linePosition => {
@@ -39,14 +38,14 @@ export function getFormData(params) {
   } = params;
 
   const position = JSON.stringify({
-    base_sha: diffFile.diffRefs.baseSha,
-    start_sha: diffFile.diffRefs.startSha,
-    head_sha: diffFile.diffRefs.headSha,
-    old_path: diffFile.oldPath,
-    new_path: diffFile.newPath,
+    base_sha: diffFile.diff_refs.base_sha,
+    start_sha: diffFile.diff_refs.start_sha,
+    head_sha: diffFile.diff_refs.head_sha,
+    old_path: diffFile.old_path,
+    new_path: diffFile.new_path,
     position_type: positionType || TEXT_DIFF_POSITION_TYPE,
-    old_line: noteTargetLine ? noteTargetLine.oldLine : null,
-    new_line: noteTargetLine ? noteTargetLine.newLine : null,
+    old_line: noteTargetLine ? noteTargetLine.old_line : null,
+    new_line: noteTargetLine ? noteTargetLine.new_line : null,
     x: params.x,
     y: params.y,
     width: params.width,
@@ -56,7 +55,7 @@ export function getFormData(params) {
   const postData = {
     view: diffViewType,
     line_type: linePosition === LINE_POSITION_RIGHT ? NEW_LINE_TYPE : OLD_LINE_TYPE,
-    merge_request_diff_head_sha: diffFile.diffRefs.headSha,
+    merge_request_diff_head_sha: diffFile.diff_refs.head_sha,
     in_reply_to_discussion_id: '',
     note_project_id: '',
     target_type: noteableData.targetType,
@@ -69,10 +68,10 @@ export function getFormData(params) {
       noteable_id: noteableData.id,
       commit_id: '',
       type:
-        diffFile.diffRefs.startSha && diffFile.diffRefs.headSha
+        diffFile.diff_refs.start_sha && diffFile.diff_refs.head_sha
           ? DIFF_NOTE_TYPE
           : LEGACY_DIFF_NOTE_TYPE,
-      line_code: noteTargetLine ? noteTargetLine.lineCode : null,
+      line_code: noteTargetLine ? noteTargetLine.line_code : null,
     },
   };
 
@@ -93,7 +92,7 @@ export const findIndexInInlineLines = (lines, lineNumbers) => {
 
   return _.findIndex(
     lines,
-    line => line.oldLine === oldLineNumber && line.newLine === newLineNumber,
+    line => line.old_line === oldLineNumber && line.new_line === newLineNumber,
   );
 };
 
@@ -105,18 +104,18 @@ export const findIndexInParallelLines = (lines, lineNumbers) => {
     line =>
       line.left &&
       line.right &&
-      line.left.oldLine === oldLineNumber &&
-      line.right.newLine === newLineNumber,
+      line.left.old_line === oldLineNumber &&
+      line.right.new_line === newLineNumber,
   );
 };
 
 export function removeMatchLine(diffFile, lineNumbers, bottom) {
-  const indexForInline = findIndexInInlineLines(diffFile.highlightedDiffLines, lineNumbers);
-  const indexForParallel = findIndexInParallelLines(diffFile.parallelDiffLines, lineNumbers);
+  const indexForInline = findIndexInInlineLines(diffFile.highlighted_diff_lines, lineNumbers);
+  const indexForParallel = findIndexInParallelLines(diffFile.parallel_diff_lines, lineNumbers);
   const factor = bottom ? 1 : -1;
 
-  diffFile.highlightedDiffLines.splice(indexForInline + factor, 1);
-  diffFile.parallelDiffLines.splice(indexForParallel + factor, 1);
+  diffFile.highlighted_diff_lines.splice(indexForInline + factor, 1);
+  diffFile.parallel_diff_lines.splice(indexForParallel + factor, 1);
 }
 
 export function addLineReferences(lines, lineNumbers, bottom) {
@@ -125,18 +124,16 @@ export function addLineReferences(lines, lineNumbers, bottom) {
   let matchLineIndex = -1;
 
   const linesWithNumbers = lines.map((l, index) => {
-    const line = convertObjectPropsToCamelCase(l);
-
-    if (line.type === MATCH_LINE_TYPE) {
+    if (l.type === MATCH_LINE_TYPE) {
       matchLineIndex = index;
     } else {
-      Object.assign(line, {
-        oldLine: bottom ? oldLineNumber + index + 1 : oldLineNumber + index - lineCount,
-        newLine: bottom ? newLineNumber + index + 1 : newLineNumber + index - lineCount,
+      Object.assign(l, {
+        old_line: bottom ? oldLineNumber + index + 1 : oldLineNumber + index - lineCount,
+        new_line: bottom ? newLineNumber + index + 1 : newLineNumber + index - lineCount,
       });
     }
 
-    return line;
+    return l;
   });
 
   if (matchLineIndex > -1) {
@@ -146,9 +143,9 @@ export function addLineReferences(lines, lineNumbers, bottom) {
       : linesWithNumbers[matchLineIndex + 1];
 
     Object.assign(line, {
-      metaData: {
-        oldPos: targetLine.oldLine,
-        newPos: targetLine.newLine,
+      meta_data: {
+        old_pos: targetLine.old_line,
+        new_pos: targetLine.new_line,
       },
     });
   }
@@ -187,11 +184,11 @@ export function trimFirstCharOfLineContent(line = {}) {
 
   const parsedLine = Object.assign({}, line);
 
-  if (line.richText) {
-    const firstChar = parsedLine.richText.charAt(0);
+  if (line.rich_text) {
+    const firstChar = parsedLine.rich_text.charAt(0);
 
     if (firstChar === ' ' || firstChar === '+' || firstChar === '-') {
-      parsedLine.richText = line.richText.substring(1);
+      parsedLine.rich_text = line.rich_text.substring(1);
     }
   }
 
@@ -201,15 +198,15 @@ export function trimFirstCharOfLineContent(line = {}) {
 // This prepares and optimizes the incoming diff data from the server
 // by setting up incremental rendering and removing unneeded data
 export function prepareDiffData(diffData) {
-  const filesLength = diffData.diffFiles.length;
+  const filesLength = diffData.diff_files.length;
   let showingLines = 0;
   for (let i = 0; i < filesLength; i += 1) {
-    const file = diffData.diffFiles[i];
+    const file = diffData.diff_files[i];
 
-    if (file.parallelDiffLines) {
-      const linesLength = file.parallelDiffLines.length;
+    if (file.parallel_diff_lines) {
+      const linesLength = file.parallel_diff_lines.length;
       for (let u = 0; u < linesLength; u += 1) {
-        const line = file.parallelDiffLines[u];
+        const line = file.parallel_diff_lines[u];
         if (line.left) {
           line.left = trimFirstCharOfLineContent(line.left);
         }
@@ -219,13 +216,13 @@ export function prepareDiffData(diffData) {
       }
     }
 
-    if (file.highlightedDiffLines) {
-      const linesLength = file.highlightedDiffLines.length;
+    if (file.highlighted_diff_lines) {
+      const linesLength = file.highlighted_diff_lines.length;
       for (let u = 0; u < linesLength; u += 1) {
-        const line = file.highlightedDiffLines[u];
+        const line = file.highlighted_diff_lines[u];
         Object.assign(line, { ...trimFirstCharOfLineContent(line) });
       }
-      showingLines += file.parallelDiffLines.length;
+      showingLines += file.parallel_diff_lines.length;
     }
 
     Object.assign(file, {
@@ -238,26 +235,21 @@ export function prepareDiffData(diffData) {
 
 export function getDiffPositionByLineCode(diffFiles) {
   return diffFiles.reduce((acc, diffFile) => {
-    const { baseSha, headSha, startSha } = diffFile.diffRefs;
-    const { newPath, oldPath } = diffFile;
-
     // We can only use highlightedDiffLines to create the map of diff lines because
     // highlightedDiffLines will also include every parallel diff line in it.
-    if (diffFile.highlightedDiffLines) {
-      diffFile.highlightedDiffLines.forEach(line => {
-        const { lineCode, oldLine, newLine } = line;
-
-        if (lineCode) {
-          acc[lineCode] = {
-            baseSha,
-            headSha,
-            startSha,
-            newPath,
-            oldPath,
-            oldLine,
-            newLine,
-            lineCode,
-            positionType: 'text',
+    if (diffFile.highlighted_diff_lines) {
+      diffFile.highlighted_diff_lines.forEach(line => {
+        if (line.line_code) {
+          acc[line.line_code] = {
+            base_sha: diffFile.diff_refs.base_sha,
+            head_sha: diffFile.diff_refs.head_sha,
+            start_sha: diffFile.diff_refs.start_sha,
+            new_path: diffFile.new_path,
+            old_path: diffFile.old_path,
+            old_line: line.old_line,
+            new_line: line.new_line,
+            line_code: line.line_code,
+            position_type: 'text',
           };
         }
       });
@@ -270,30 +262,30 @@ export function getDiffPositionByLineCode(diffFiles) {
 // This method will check whether the discussion is still applicable
 // to the diff line in question regarding different versions of the MR
 export function isDiscussionApplicableToLine({ discussion, diffPosition, latestDiff }) {
-  const { lineCode, ...diffPositionCopy } = diffPosition;
+  const { line_code, ...diffPositionCopy } = diffPosition;
 
   if (discussion.original_position && discussion.position) {
-    const originalRefs = convertObjectPropsToCamelCase(discussion.original_position);
-    const refs = convertObjectPropsToCamelCase(discussion.position);
+    const originalRefs = discussion.original_position;
+    const refs = discussion.position;
 
     return _.isEqual(refs, diffPositionCopy) || _.isEqual(originalRefs, diffPositionCopy);
   }
 
-  return latestDiff && discussion.active && lineCode === discussion.line_code;
+  // eslint-disable-next-line
+  return latestDiff && discussion.active && line_code === discussion.line_code;
 }
 
 export const generateTreeList = files =>
   files.reduce(
     (acc, file) => {
-      const { fileHash, addedLines, removedLines, newFile, deletedFile, newPath } = file;
-      const split = newPath.split('/');
+      const split = file.new_path.split('/');
 
       split.forEach((name, i) => {
         const parent = acc.treeEntries[split.slice(0, i).join('/')];
         const path = `${parent ? `${parent.path}/` : ''}${name}`;
 
         if (!acc.treeEntries[path]) {
-          const type = path === newPath ? 'blob' : 'tree';
+          const type = path === file.new_path ? 'blob' : 'tree';
           acc.treeEntries[path] = {
             key: path,
             path,
@@ -307,11 +299,11 @@ export const generateTreeList = files =>
           if (type === 'blob') {
             Object.assign(entry, {
               changed: true,
-              tempFile: newFile,
-              deleted: deletedFile,
-              fileHash,
-              addedLines,
-              removedLines,
+              tempFile: file.new_file,
+              deleted: file.deleted_file,
+              fileHash: file.file_hash,
+              addedLines: file.added_lines,
+              removedLines: file.removed_lines,
             });
           } else {
             Object.assign(entry, {
@@ -329,6 +321,6 @@ export const generateTreeList = files =>
   );
 
 export const getDiffMode = diffFile => {
-  const diffModeKey = Object.keys(diffModes).find(key => diffFile[`${key}File`]);
+  const diffModeKey = Object.keys(diffModes).find(key => diffFile[`${key}_file`]);
   return diffModes[diffModeKey] || diffModes.replaced;
 };
diff --git a/app/assets/javascripts/environments/components/container.vue b/app/assets/javascripts/environments/components/container.vue
index a48f5fcb7d6..6c0b5c1f427 100644
--- a/app/assets/javascripts/environments/components/container.vue
+++ b/app/assets/javascripts/environments/components/container.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import tablePagination from '../../vue_shared/components/table_pagination.vue';
 import environmentTable from '../components/environments_table.vue';
 
diff --git a/app/assets/javascripts/environments/components/environment_actions.vue b/app/assets/javascripts/environments/components/environment_actions.vue
index 03c3ad0401f..b849772a82e 100644
--- a/app/assets/javascripts/environments/components/environment_actions.vue
+++ b/app/assets/javascripts/environments/components/environment_actions.vue
@@ -4,7 +4,7 @@ import { formatTime } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 import tooltip from '../../vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   directives: {
diff --git a/app/assets/javascripts/environments/components/environment_external_url.vue b/app/assets/javascripts/environments/components/environment_external_url.vue
index 1e8a892c0b8..af537cfb991 100644
--- a/app/assets/javascripts/environments/components/environment_external_url.vue
+++ b/app/assets/javascripts/environments/components/environment_external_url.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { s__ } from '~/locale';
 
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 50b0e9747ee..34d94490533 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,7 +1,7 @@
 <script>
 import Timeago from 'timeago.js';
 import _ from 'underscore';
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import { humanize } from '~/lib/utils/text_utility';
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 7c723fa8979..ae4f07a71cd 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -2,7 +2,7 @@
 /**
  * Renders the Monitoring (Metrics) link in environments table.
  */
-import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 298469e6482..46c77dca871 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -6,7 +6,7 @@
  * Makes a post request when the button is clicked.
  */
 import { s__ } from '~/locale';
-import { GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
 
@@ -63,7 +63,7 @@ export default {
   >
     <icon
       v-if="isLastDeployment"
-      name="repeat" 
+      name="repeat"
     />
     <icon
       v-else
diff --git a/app/assets/javascripts/environments/components/environment_stop.vue b/app/assets/javascripts/environments/components/environment_stop.vue
index 327c96a93e9..efecc128368 100644
--- a/app/assets/javascripts/environments/components/environment_stop.vue
+++ b/app/assets/javascripts/environments/components/environment_stop.vue
@@ -5,7 +5,7 @@
  */
 
 import $ from 'jquery';
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index b8b909f350c..83727caad16 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,7 +3,7 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/environments/components/environments_table.vue b/app/assets/javascripts/environments/components/environments_table.vue
index c03d4f29ff9..4eae4eec394 100644
--- a/app/assets/javascripts/environments/components/environments_table.vue
+++ b/app/assets/javascripts/environments/components/environments_table.vue
@@ -2,7 +2,7 @@
 /**
  * Render environments table.
  */
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import environmentItem from './environment_item.vue';
 
 export default {
diff --git a/app/assets/javascripts/environments/components/stop_environment_modal.vue b/app/assets/javascripts/environments/components/stop_environment_modal.vue
index 6397f6caf1b..2ebc7b5b951 100644
--- a/app/assets/javascripts/environments/components/stop_environment_modal.vue
+++ b/app/assets/javascripts/environments/components/stop_environment_modal.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { s__, sprintf } from '~/locale';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 3233f5c4f71..aad5647c045 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -1,5 +1,5 @@
 /* Developer beware! Do not add logic to showButton or hideButton
- * that will force a reflow. Doing so will create a signficant performance
+ * that will force a reflow. Doing so will create a significant performance
  * bottleneck for pages with large diffs. For a comprehensive list of what
  * causes reflows, visit https://gist.github.com/paulirish/5d52fb081b3570c81e3a
  */
diff --git a/app/assets/javascripts/filtered_search/dropdown_emoji.js b/app/assets/javascripts/filtered_search/dropdown_emoji.js
index af7936a92fb..d9a4d06b549 100644
--- a/app/assets/javascripts/filtered_search/dropdown_emoji.js
+++ b/app/assets/javascripts/filtered_search/dropdown_emoji.js
@@ -69,10 +69,13 @@ export default class DropdownEmoji extends FilteredSearchDropdown {
     // Replace empty gl-emoji tag to real content
     const dropdownItems = [...this.dropdown.querySelectorAll('.filter-dropdown-item')];
     dropdownItems.forEach(dropdownItem => {
-      const name = dropdownItem.querySelector('.js-data-value').innerText;
-      const emojiTag = this.glEmojiTag(name);
-      const emojiElement = dropdownItem.querySelector('gl-emoji');
-      emojiElement.outerHTML = emojiTag;
+      const valueElement = dropdownItem.querySelector('.js-data-value');
+      if (valueElement !== null) {
+        const name = valueElement.innerText;
+        const emojiTag = this.glEmojiTag(name);
+        const emojiElement = dropdownItem.querySelector('gl-emoji');
+        emojiElement.outerHTML = emojiTag;
+      }
     });
   }
 
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
index c23d4c484a5..89dcff74d0e 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -135,10 +135,6 @@ export default class FilteredSearchVisualTokens {
   }
 
   static updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) {
-    if (tokenValue === 'none') {
-      return Promise.resolve();
-    }
-
     const username = tokenValue.replace(/^@/, '');
     return (
       UsersCache.retrieve(username)
@@ -184,7 +180,12 @@ export default class FilteredSearchVisualTokens {
     const tokenValueElement = tokenValueContainer.querySelector('.value');
     tokenValueElement.innerText = tokenValue;
 
+    if (tokenValue === 'none' || tokenValue === 'any') {
+      return;
+    }
+
     const tokenType = tokenName.toLowerCase();
+
     if (tokenType === 'label') {
       FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue);
     } else if (tokenType === 'author' || tokenType === 'assignee') {
diff --git a/app/assets/javascripts/frequent_items/components/app.vue b/app/assets/javascripts/frequent_items/components/app.vue
index 159c0bdc992..1ed8254bc58 100644
--- a/app/assets/javascripts/frequent_items/components/app.vue
+++ b/app/assets/javascripts/frequent_items/components/app.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import AccessorUtilities from '~/lib/utils/accessor';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../event_hub';
 import store from '../store/';
 import { FREQUENT_ITEMS, STORAGE_KEY } from '../constants';
diff --git a/app/assets/javascripts/groups/components/app.vue b/app/assets/javascripts/groups/components/app.vue
index 2a4a39436e7..29dc2d6a8a3 100644
--- a/app/assets/javascripts/groups/components/app.vue
+++ b/app/assets/javascripts/groups/components/app.vue
@@ -8,7 +8,7 @@ import { HIDDEN_CLASS } from '~/lib/utils/constants';
 import { getParameterByName } from '~/lib/utils/common_utils';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../event_hub';
 import { COMMON_STR, CONTENT_LIST_CLASS } from '../constants';
 import groupsComponent from './groups.vue';
diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 358f1153de2..600e1063f89 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -2,7 +2,7 @@
 import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
 import Icon from '~/vue_shared/components/icon.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Item from './item.vue';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue
index 2d9bd99e82a..11fc15871ac 100644
--- a/app/assets/javascripts/ide/components/error_message.vue
+++ b/app/assets/javascripts/ide/components/error_message.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/components/file_templates/dropdown.vue b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
index 891f7d48b4c..81d8d0b5132 100644
--- a/app/assets/javascripts/ide/components/file_templates/dropdown.vue
+++ b/app/assets/javascripts/ide/components/file_templates/dropdown.vue
@@ -2,7 +2,7 @@
 import $ from 'jquery';
 import { mapActions, mapState } from 'vuex';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 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 364ab9426e0..6b4849eb6f9 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapGetters } from 'vuex';
-import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import IdeTree from './ide_tree.vue';
 import ResizablePanel from './resizable_panel.vue';
 import ActivityBar from './activity_bar.vue';
diff --git a/app/assets/javascripts/ide/components/ide_tree_list.vue b/app/assets/javascripts/ide/components/ide_tree_list.vue
index d2ff55a4ee3..12ed7f86b3d 100644
--- a/app/assets/javascripts/ide/components/ide_tree_list.vue
+++ b/app/assets/javascripts/ide/components/ide_tree_list.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
-import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import NavDropdown from './nav_dropdown.vue';
 import FileRowExtra from './file_row_extra.vue';
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue
index 57da8b4e2cb..e3626f60899 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-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Stage from './stage.vue';
 
 export default {
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index 5644759d2f9..e4fc78afaf2 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index e4000f588bd..4df29590b85 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -3,7 +3,7 @@ import { mapActions, mapState } from 'vuex';
 import _ from 'underscore';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Item from './item.vue';
 import TokenedInput from '../shared/tokened_input.vue';
 
diff --git a/app/assets/javascripts/ide/components/pipelines/list.vue b/app/assets/javascripts/ide/components/pipelines/list.vue
index 16aec1decd6..36cfcac4186 100644
--- a/app/assets/javascripts/ide/components/pipelines/list.vue
+++ b/app/assets/javascripts/ide/components/pipelines/list.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { sprintf, __ } from '../../../locale';
 import Icon from '../../../vue_shared/components/icon.vue';
 import CiIcon from '../../../vue_shared/components/ci_icon.vue';
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index 0bd56ff6e9b..afc0cfca7d8 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { Manager } from 'smooshpack';
 import { listen } from 'codesandbox-api';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Navigator from './navigator.vue';
 import { packageJsonPath } from '../../constants';
 import { createPathWithExt } from '../../utils';
diff --git a/app/assets/javascripts/ide/components/preview/navigator.vue b/app/assets/javascripts/ide/components/preview/navigator.vue
index af8959186f9..cc6fc595b74 100644
--- a/app/assets/javascripts/ide/components/preview/navigator.vue
+++ b/app/assets/javascripts/ide/components/preview/navigator.vue
@@ -1,7 +1,7 @@
 <script>
 import { listen } from 'codesandbox-api';
 import Icon from '~/vue_shared/components/icon.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
index 8fa86995ef0..ea2525a2f0e 100644
--- a/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pipelines/actions.js
@@ -28,7 +28,7 @@ export const receiveLatestPipelineError = ({ commit, dispatch }, err) => {
     dispatch(
       'setErrorMessage',
       {
-        text: __('An error occured whilst fetching the latest pipline.'),
+        text: __('An error occured whilst fetching the latest pipeline.'),
         action: () =>
           dispatch('forcePipelineRequest').then(() =>
             dispatch('setErrorMessage', null, { root: true }),
diff --git a/app/assets/javascripts/init_legacy_filters.js b/app/assets/javascripts/init_legacy_filters.js
deleted file mode 100644
index b6ff97d1279..00000000000
--- a/app/assets/javascripts/init_legacy_filters.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/* eslint-disable no-new */
-import LabelsSelect from './labels_select';
-import subscriptionSelect from './subscription_select';
-import UsersSelect from './users_select';
-import issueStatusSelect from './issue_status_select';
-import MilestoneSelect from './milestone_select';
-
-export default () => {
-  new UsersSelect();
-  new LabelsSelect();
-  new MilestoneSelect();
-  issueStatusSelect();
-  subscriptionSelect();
-};
diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 93c89411b4a..932675c0fc6 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 06fe23fedce..9373dbebc8a 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 
 export default {
diff --git a/app/assets/javascripts/jobs/components/empty_state.vue b/app/assets/javascripts/jobs/components/empty_state.vue
index be7425c2d25..afc4d931a68 100644
--- a/app/assets/javascripts/jobs/components/empty_state.vue
+++ b/app/assets/javascripts/jobs/components/empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/jobs/components/erased_block.vue b/app/assets/javascripts/jobs/components/erased_block.vue
index d80e905c68e..712f564b065 100644
--- a/app/assets/javascripts/jobs/components/erased_block.vue
+++ b/app/assets/javascripts/jobs/components/erased_block.vue
@@ -1,6 +1,6 @@
 <script>
 import _ from 'underscore';
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 
 export default {
diff --git a/app/assets/javascripts/jobs/components/job_app.vue b/app/assets/javascripts/jobs/components/job_app.vue
index 90216b04e92..ecb809ca4de 100644
--- a/app/assets/javascripts/jobs/components/job_app.vue
+++ b/app/assets/javascripts/jobs/components/job_app.vue
@@ -1,7 +1,7 @@
 <script>
 import _ from 'underscore';
 import { mapGetters, mapState, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { isScrolledToBottom } from '~/lib/utils/scroll_utils';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import bp from '~/breakpoints';
diff --git a/app/assets/javascripts/jobs/components/job_container_item.vue b/app/assets/javascripts/jobs/components/job_container_item.vue
index 3ddcfd11dca..80cbed422a0 100644
--- a/app/assets/javascripts/jobs/components/job_container_item.vue
+++ b/app/assets/javascripts/jobs/components/job_container_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 import tooltip from '~/vue_shared/directives/tooltip';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 8b506b124ec..5e0495bb231 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index f7b7b8f10f7..21f0a1435d7 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,7 +1,7 @@
 <script>
 import _ from 'underscore';
 import { mapActions, mapState } from 'vuex';
-import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
+import { GlLink, GlButton } from '@gitlab/ui';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index cfedb38e17a..d143e9f586c 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 
 export default {
   name: 'SidebarDetailRow',
diff --git a/app/assets/javascripts/jobs/components/stuck_block.vue b/app/assets/javascripts/jobs/components/stuck_block.vue
index ca4bf471363..2b2ebe4c3f7 100644
--- a/app/assets/javascripts/jobs/components/stuck_block.vue
+++ b/app/assets/javascripts/jobs/components/stuck_block.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 /**
  * Renders Stuck Runners block for job's view.
  */
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 1e62c05b4d1..4d18f76b7ea 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab-org/gitlab-ui';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/jobs/store/getters.js b/app/assets/javascripts/jobs/store/getters.js
index d440b2c9ef1..35e92b0b5d9 100644
--- a/app/assets/javascripts/jobs/store/getters.js
+++ b/app/assets/javascripts/jobs/store/getters.js
@@ -42,7 +42,7 @@ export const emptyStateIllustration = state =>
   (state.job && state.job.status && state.job.status.illustration) || {};
 
 export const emptyStateAction = state =>
-  (state.job && state.job.status && state.job.status.action) || {};
+  (state.job && state.job.status && state.job.status.action) || null;
 
 export const isScrollingDown = state => isScrolledToBottom() && !state.isTraceComplete;
 
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 90fe339e3de..dfb53c986fc 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -16,7 +16,7 @@ import 'vendor/jquery.atwho';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import Vue from 'vue';
 import syntaxHighlight from '~/syntax_highlight';
-import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import axios from './lib/utils/axios_utils';
 import { getLocationHash } from './lib/utils/url_utility';
 import Flash from './flash';
diff --git a/app/assets/javascripts/notes/components/diff_with_note.vue b/app/assets/javascripts/notes/components/diff_with_note.vue
index b209f736c3f..30fcb895369 100644
--- a/app/assets/javascripts/notes/components/diff_with_note.vue
+++ b/app/assets/javascripts/notes/components/diff_with_note.vue
@@ -1,10 +1,9 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import DiffFileHeader from '~/diffs/components/diff_file_header.vue';
 import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue';
-import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 import { trimFirstCharOfLineContent, getDiffMode } from '~/diffs/store/utils';
 
 export default {
@@ -34,7 +33,9 @@ export default {
       return getDiffMode(this.diffFile);
     },
     hasTruncatedDiffLines() {
-      return this.discussion.truncatedDiffLines && this.discussion.truncatedDiffLines.length !== 0;
+      return (
+        this.discussion.truncated_diff_lines && this.discussion.truncated_diff_lines.length !== 0
+      );
     },
     isDiscussionsExpanded() {
       return true; // TODO: @fatihacet - Fix this.
@@ -50,19 +51,17 @@ export default {
       return text ? 'text-file' : 'js-image-file';
     },
     diffFile() {
-      return convertObjectPropsToCamelCase(this.discussion.diffFile, { deep: true });
+      return this.discussion.diff_file;
     },
     imageDiffHtml() {
-      return this.discussion.imageDiffHtml;
+      return this.discussion.image_diff_html;
     },
     userColorScheme() {
       return window.gon.user_color_scheme;
     },
     normalizedDiffLines() {
-      if (this.discussion.truncatedDiffLines) {
-        return this.discussion.truncatedDiffLines.map(line =>
-          trimFirstCharOfLineContent(convertObjectPropsToCamelCase(line)),
-        );
+      if (this.discussion.truncated_diff_lines) {
+        return this.discussion.truncated_diff_lines.map(line => trimFirstCharOfLineContent(line));
       }
 
       return [];
@@ -97,7 +96,7 @@ export default {
     class="diff-file file-holder"
   >
     <diff-file-header
-      :discussion-path="discussion.discussionPath"
+      :discussion-path="discussion.discussion_path"
       :diff-file="diffFile"
       :can-current-user-fork="false"
       :discussions-expanded="isDiscussionsExpanded"
@@ -111,15 +110,15 @@ export default {
       <table>
         <tr
           v-for="line in normalizedDiffLines"
-          :key="line.lineCode"
+          :key="line.line_code"
           class="line_holder"
         >
-          <td class="diff-line-num old_line">{{ line.oldLine }}</td>
-          <td class="diff-line-num new_line">{{ line.newLine }}</td>
+          <td class="diff-line-num old_line">{{ line.old_line }}</td>
+          <td class="diff-line-num new_line">{{ line.new_line }}</td>
           <td
             :class="line.type"
             class="line_content"
-            v-html="line.richText"
+            v-html="line.rich_text"
           >
           </td>
         </tr>
@@ -165,17 +164,17 @@ export default {
     >
       <diff-viewer
         :diff-mode="diffMode"
-        :new-path="diffFile.newPath"
-        :new-sha="diffFile.diffRefs.headSha"
-        :old-path="diffFile.oldPath"
-        :old-sha="diffFile.diffRefs.baseSha"
-        :file-hash="diffFile.fileHash"
+        :new-path="diffFile.new_path"
+        :new-sha="diffFile.diff_refs.head_sha"
+        :old-path="diffFile.old_path"
+        :old-sha="diffFile.diff_refs.base_sha"
+        :file-hash="diffFile.file_hash"
         :project-path="projectPath"
       >
         <image-diff-overlay
           slot="image-overlay"
           :discussions="discussion"
-          :file-hash="diffFile.fileHash"
+          :file-hash="diffFile.file_hash"
           :show-comment-icon="true"
           :should-toggle-discussion="false"
           badge-class="image-comment-badge"
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index f7a61fbfcd4..0f0d7f4661a 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   name: 'NoteActions',
diff --git a/app/assets/javascripts/notes/components/noteable_discussion.vue b/app/assets/javascripts/notes/components/noteable_discussion.vue
index c1dfa036678..7740967ccd5 100644
--- a/app/assets/javascripts/notes/components/noteable_discussion.vue
+++ b/app/assets/javascripts/notes/components/noteable_discussion.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
 import systemNote from '~/vue_shared/components/notes/system_note.vue';
@@ -88,17 +87,16 @@ export default {
     transformedDiscussion() {
       return {
         ...this.discussion.notes[0],
-        truncatedDiffLines: this.discussion.truncated_diff_lines || [],
-        truncatedDiffLinesPath: this.discussion.truncated_diff_lines_path,
-        diffFile: this.discussion.diff_file,
-        diffDiscussion: this.discussion.diff_discussion,
-        imageDiffHtml: this.discussion.image_diff_html,
+        truncated_diff_lines: this.discussion.truncated_diff_lines || [],
+        truncated_diff_lines_path: this.discussion.truncated_diff_lines_path,
+        diff_file: this.discussion.diff_file,
+        diff_discussion: this.discussion.diff_discussion,
         active: this.discussion.active,
-        discussionPath: this.discussion.discussion_path,
+        discussion_path: this.discussion.discussion_path,
         resolved: this.discussion.resolved,
-        resolvedBy: this.discussion.resolved_by,
-        resolvedByPush: this.discussion.resolved_by_push,
-        resolvedAt: this.discussion.resolved_at,
+        resolved_by: this.discussion.resolved_by,
+        resolved_by_push: this.discussion.resolved_by_push,
+        resolved_at: this.discussion.resolved_at,
       };
     },
     author() {
@@ -138,7 +136,7 @@ export default {
       return null;
     },
     resolvedText() {
-      return this.transformedDiscussion.resolvedByPush ? 'Automatically resolved' : 'Resolved';
+      return this.transformedDiscussion.resolved_by_push ? 'Automatically resolved' : 'Resolved';
     },
     hasMultipleUnresolvedDiscussions() {
       return this.unresolvedDiscussions.length > 1;
@@ -150,12 +148,14 @@ export default {
       );
     },
     shouldRenderDiffs() {
-      const { diffDiscussion, diffFile } = this.transformedDiscussion;
-
-      return diffDiscussion && diffFile && this.renderDiffFile;
+      return (
+        this.transformedDiscussion.diff_discussion &&
+        this.transformedDiscussion.diff_file &&
+        this.renderDiffFile
+      );
     },
     shouldGroupReplies() {
-      return !this.shouldRenderDiffs && !this.transformedDiscussion.diffDiscussion;
+      return !this.shouldRenderDiffs && !this.transformedDiscussion.diff_discussion;
     },
     shouldRenderHeader() {
       return this.shouldRenderDiffs;
@@ -165,7 +165,7 @@ export default {
     },
     wrapperComponentProps() {
       if (this.shouldRenderDiffs) {
-        return { discussion: convertObjectPropsToCamelCase(this.discussion) };
+        return { discussion: this.discussion };
       }
 
       return {};
@@ -184,8 +184,8 @@ export default {
     },
     shouldShowDiscussions() {
       const isExpanded = this.discussion.expanded;
-      const { diffDiscussion, resolved } = this.transformedDiscussion;
-      const isResolvedNonDiffDiscussion = !diffDiscussion && resolved;
+      const { resolved } = this.transformedDiscussion;
+      const isResolvedNonDiffDiscussion = !this.transformedDiscussion.diff_discussion && resolved;
 
       return isExpanded || this.alwaysExpanded || isResolvedNonDiffDiscussion;
     },
@@ -333,9 +333,9 @@ Please check your network connection and try again.`;
               :expanded="discussion.expanded"
               @toggleHandler="toggleDiscussionHandler"
             >
-              <template v-if="transformedDiscussion.diffDiscussion">
+              <template v-if="transformedDiscussion.diff_discussion">
                 started a discussion on
-                <a :href="transformedDiscussion.discussionPath">
+                <a :href="transformedDiscussion.discussion_path">
                   <template v-if="transformedDiscussion.active">
                     the diff
                   </template>
@@ -356,8 +356,8 @@ Please check your network connection and try again.`;
             </note-header>
             <note-edited-text
               v-if="transformedDiscussion.resolved"
-              :edited-at="transformedDiscussion.resolvedAt"
-              :edited-by="transformedDiscussion.resolvedBy"
+              :edited-at="transformedDiscussion.resolved_at"
+              :edited-by="transformedDiscussion.resolved_by"
               :action-text="resolvedText"
               class-name="discussion-headline-light js-discussion-headline"
             />
diff --git a/app/assets/javascripts/notes/stores/actions.js b/app/assets/javascripts/notes/stores/actions.js
index a4ab079d258..5b2f0540020 100644
--- a/app/assets/javascripts/notes/stores/actions.js
+++ b/app/assets/javascripts/notes/stores/actions.js
@@ -341,7 +341,7 @@ export const scrollToNoteIfNeeded = (context, el) => {
 };
 
 export const fetchDiscussionDiffLines = ({ commit }, discussion) =>
-  axios.get(discussion.truncatedDiffLinesPath).then(({ data }) => {
+  axios.get(discussion.truncated_diff_lines_path).then(({ data }) => {
     commit(types.SET_DISCUSSION_DIFF_LINES, {
       discussionId: discussion.id,
       diffLines: data.truncated_diff_lines,
diff --git a/app/assets/javascripts/notes/stores/mutations.js b/app/assets/javascripts/notes/stores/mutations.js
index c8d9e196103..f6054e0be87 100644
--- a/app/assets/javascripts/notes/stores/mutations.js
+++ b/app/assets/javascripts/notes/stores/mutations.js
@@ -102,7 +102,7 @@ export default {
     discussionsData.forEach(discussion => {
       if (discussion.diff_file) {
         Object.assign(discussion, {
-          fileHash: discussion.diff_file.file_hash,
+          file_hash: discussion.diff_file.file_hash,
           truncated_diff_lines: discussion.truncated_diff_lines || [],
         });
       }
@@ -195,7 +195,7 @@ export default {
     const selectedDiscussion = state.discussions.find(disc => disc.id === note.id);
     note.expanded = true; // override expand flag to prevent collapse
     if (note.diff_file) {
-      Object.assign(note, { fileHash: note.diff_file.file_hash });
+      Object.assign(note, { file_hash: note.diff_file.file_hash });
     }
     Object.assign(selectedDiscussion, { ...note });
   },
diff --git a/app/assets/javascripts/pages/dashboard/issues/index.js b/app/assets/javascripts/pages/dashboard/issues/index.js
index c4901dd1cb6..9055738f86e 100644
--- a/app/assets/javascripts/pages/dashboard/issues/index.js
+++ b/app/assets/javascripts/pages/dashboard/issues/index.js
@@ -1,7 +1,13 @@
 import projectSelect from '~/project_select';
-import initLegacyFilters from '~/init_legacy_filters';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
+import { FILTERED_SEARCH } from '~/pages/constants';
 
 document.addEventListener('DOMContentLoaded', () => {
+  initFilteredSearch({
+    page: FILTERED_SEARCH.ISSUES,
+    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+  });
+
   projectSelect();
-  initLegacyFilters();
 });
diff --git a/app/assets/javascripts/pages/dashboard/merge_requests/index.js b/app/assets/javascripts/pages/dashboard/merge_requests/index.js
index c4901dd1cb6..260484726f3 100644
--- a/app/assets/javascripts/pages/dashboard/merge_requests/index.js
+++ b/app/assets/javascripts/pages/dashboard/merge_requests/index.js
@@ -1,7 +1,15 @@
 import projectSelect from '~/project_select';
-import initLegacyFilters from '~/init_legacy_filters';
+import initFilteredSearch from '~/pages/search/init_filtered_search';
+import IssuableFilteredSearchTokenKeys from '~/filtered_search/issuable_filtered_search_token_keys';
+import { FILTERED_SEARCH } from '~/pages/constants';
 
 document.addEventListener('DOMContentLoaded', () => {
+  IssuableFilteredSearchTokenKeys.addExtraTokensForMergeRequests();
+
+  initFilteredSearch({
+    page: FILTERED_SEARCH.MERGE_REQUESTS,
+    filteredSearchTokenKeys: IssuableFilteredSearchTokenKeys,
+  });
+
   projectSelect();
-  initLegacyFilters();
 });
diff --git a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
index f970a5ebb64..cbe85eaa590 100644
--- a/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
+++ b/app/assets/javascripts/pages/projects/wikis/components/delete_wiki_modal.vue
@@ -1,7 +1,7 @@
 <script>
 import _ from 'underscore';
 import { s__, sprintf } from '~/locale';
-import { GlModal, GlModalDirective } from '@gitlab-org/gitlab-ui';
+import { GlModal, GlModalDirective } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index 8a0259ed5a5..f756c651684 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab-org/gitlab-ui';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   name: 'PipelinesEmptyState',
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index b82e28a0735..3a39dfe181d 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,10 +1,9 @@
 <script>
-import $ from 'jquery';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
 import createFlash from '~/flash';
-import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 
 /**
@@ -20,23 +19,20 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
+    GlButton,
   },
-
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   props: {
     tooltipText: {
       type: String,
       required: true,
     },
-
     link: {
       type: String,
       required: true,
     },
-
     actionIcon: {
       type: String,
       required: true,
@@ -47,7 +43,6 @@ export default {
       isDisabled: false,
     };
   },
-
   computed: {
     cssClass() {
       const actionIconDash = dasherize(this.actionIcon);
@@ -62,8 +57,7 @@ export default {
      *
      */
     onClickAction() {
-      $(this.$el).tooltip('hide');
-
+      this.$root.$emit('bv::hide::tooltip', `js-ci-action-${this.link}`);
       this.isDisabled = true;
 
       axios
@@ -82,18 +76,16 @@ export default {
 };
 </script>
 <template>
-  <button
-    v-tooltip
+  <gl-button
+    :id="`js-ci-action-${link}`"
+    v-gl-tooltip="{ boundary: 'viewport' }"
     :title="tooltipText"
     :class="cssClass"
     :disabled="isDisabled"
-    type="button"
     class="js-ci-action btn btn-blank
 btn-transparent ci-action-icon-container ci-action-icon-wrapper"
-    data-container="body"
-    data-boundary="viewport"
     @click="onClickAction"
   >
     <icon :name="actionIcon"/>
-  </button>
+  </gl-button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 4de8b3401e8..6c9a11c3829 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,6 +1,6 @@
 <script>
 import _ from 'underscore';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import StageColumnComponent from './stage_column_component.vue';
 
 export default {
diff --git a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
index 34bada533df..2670ea29db6 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_group_dropdown.vue
@@ -1,8 +1,8 @@
 <script>
 import $ from 'jquery';
+import { GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import JobItem from './job_item.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
 
 /**
  * Renders the dropdown for the pipeline graph.
@@ -12,32 +12,27 @@ import tooltip from '../../../vue_shared/directives/tooltip';
  */
 export default {
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   components: {
     JobItem,
     CiIcon,
   },
-
   props: {
     group: {
       type: Object,
       required: true,
     },
   },
-
   computed: {
     tooltipText() {
       const { name, status } = this.group;
       return `${name} - ${status.label}`;
     },
   },
-
   mounted() {
     this.stopDropdownClickPropagation();
   },
-
   methods: {
     /**
      * When the user right clicks or cmd/ctrl + click in the group name or the action icon
@@ -65,12 +60,10 @@ export default {
 <template>
   <div class="ci-job-dropdown-container dropdown dropright">
     <button
-      v-tooltip
+      v-gl-tooltip.hover="{ boundary: 'viewport' }"
       :title="tooltipText"
       type="button"
       data-toggle="dropdown"
-      data-container="body"
-      data-boundary="viewport"
       data-display="static"
       class="dropdown-menu-toggle build-content"
     >
diff --git a/app/assets/javascripts/pipelines/components/graph/job_item.vue b/app/assets/javascripts/pipelines/components/graph/job_item.vue
index 7cdde8a53b3..e6abf32decc 100644
--- a/app/assets/javascripts/pipelines/components/graph/job_item.vue
+++ b/app/assets/javascripts/pipelines/components/graph/job_item.vue
@@ -1,7 +1,7 @@
 <script>
 import ActionComponent from './action_component.vue';
 import JobNameComponent from './job_name_component.vue';
-import tooltip from '../../../vue_shared/directives/tooltip';
+import { GlTooltipDirective, GlLink } from '@gitlab/ui';
 import { sprintf } from '~/locale';
 import delayedJobMixin from '~/jobs/mixins/delayed_job_mixin';
 
@@ -34,9 +34,10 @@ export default {
   components: {
     ActionComponent,
     JobNameComponent,
+    GlLink,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [delayedJobMixin],
   props: {
@@ -55,7 +56,6 @@ export default {
       default: Infinity,
     },
   },
-
   computed: {
     status() {
       return this.job && this.job.status ? this.job.status : {};
@@ -88,7 +88,6 @@ export default {
     tooltipBoundary() {
       return this.dropdownLength < 5 ? 'viewport' : null;
     },
-
     /**
      * Verifies if the provided job has an action path
      *
@@ -98,7 +97,6 @@ export default {
       return this.job.status && this.job.status.action && this.job.status.action.path;
     },
   },
-
   methods: {
     pipelineActionRequestComplete() {
       this.$emit('pipelineActionRequestComplete');
@@ -108,30 +106,26 @@ export default {
 </script>
 <template>
   <div class="ci-job-component">
-    <a
+    <gl-link
       v-if="status.has_details"
-      v-tooltip
+      v-gl-tooltip="{ boundary: tooltipBoundary }"
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
-      :data-boundary="tooltipBoundary"
-      data-container="body"
       class="js-pipeline-graph-job-link"
     >
-
       <job-name-component
         :name="job.name"
         :status="job.status"
       />
-    </a>
+    </gl-link>
 
     <div
       v-else
-      v-tooltip
+      v-gl-tooltip
       :title="tooltipText"
       :class="cssClassJobName"
       class="js-job-component-tooltip non-details-job-component"
-      data-container="body"
     >
 
       <job-name-component
diff --git a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
index efbab51d200..d5f931943d5 100644
--- a/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/stage_column_component.vue
@@ -13,34 +13,28 @@ export default {
       type: String,
       required: true,
     },
-
     groups: {
       type: Array,
       required: true,
     },
-
     isFirstColumn: {
       type: Boolean,
       required: false,
       default: false,
     },
-
     stageConnectorClass: {
       type: String,
       required: false,
       default: '',
     },
   },
-
   methods: {
     groupId(group) {
       return `ci-badge-${_.escape(group.name)}`;
     },
-
     buildConnnectorClass(index) {
       return index === 0 && !this.isFirstColumn ? 'left-connector' : '';
     },
-
     pipelineActionRequestComplete() {
       this.$emit('refreshPipelineGraph');
     },
@@ -50,7 +44,8 @@ export default {
 <template>
   <li
     :class="stageConnectorClass"
-    class="stage-column">
+    class="stage-column"
+  >
     <div class="stage-name">
       {{ title }}
     </div>
@@ -78,7 +73,6 @@ export default {
             :group="group"
             @pipelineActionRequestComplete="pipelineActionRequestComplete"
           />
-
         </li>
       </ul>
     </div>
diff --git a/app/assets/javascripts/pipelines/components/header_component.vue b/app/assets/javascripts/pipelines/components/header_component.vue
index 8f004b491c8..ac7fa4b195e 100644
--- a/app/assets/javascripts/pipelines/components/header_component.vue
+++ b/app/assets/javascripts/pipelines/components/header_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import ciHeader from '../../vue_shared/components/header_ci_component.vue';
 import eventHub from '../event_hub';
 
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index 0911acbb131..5104fe36b42 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlButton } from '@gitlab-org/gitlab-ui';
+import { GlLink, GlButton } from '@gitlab/ui';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
diff --git a/app/assets/javascripts/pipelines/components/pipeline_url.vue b/app/assets/javascripts/pipelines/components/pipeline_url.vue
index be4b37f3c8c..249f7b9f368 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_url.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_url.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 import popover from '~/vue_shared/directives/popover';
 
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 811495c45a9..112c1559f25 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import GlCountdown from '~/vue_shared/components/gl_countdown.vue';
 import eventHub from '../event_hub';
diff --git a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
index 2abb24b87b6..d7d9eb00faa 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_artifacts.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink, GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlLink, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 026d533d10f..fd674a8d447 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -308,7 +308,8 @@ export default {
           <div
             v-for="(stage, index) in pipeline.details.stages"
             :key="index"
-            class="stage-container dropdown js-mini-pipeline-graph">
+            class="stage-container dropdown js-mini-pipeline-graph"
+          >
             <pipeline-stage
               :type="$options.pipelinesTable"
               :stage="stage"
diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue
index 3df8f7a6da6..1d62472671a 100644
--- a/app/assets/javascripts/pipelines/components/stage.vue
+++ b/app/assets/javascripts/pipelines/components/stage.vue
@@ -13,14 +13,13 @@
  */
 
 import $ from 'jquery';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '../../locale';
 import Flash from '../../flash';
 import axios from '../../lib/utils/axios_utils';
 import eventHub from '../event_hub';
 import Icon from '../../vue_shared/components/icon.vue';
 import JobItem from './graph/job_item.vue';
-import tooltip from '../../vue_shared/directives/tooltip';
 import { PIPELINES_TABLE } from '../constants';
 
 export default {
@@ -31,7 +30,7 @@ export default {
   },
 
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
 
   props: {
@@ -159,11 +158,10 @@ export default {
     <button
       id="stageDropdown"
       ref="dropdown"
-      v-tooltip
+      v-gl-tooltip.hover
       :class="triggerButtonClass"
       :title="stage.title"
       class="mini-pipeline-graph-dropdown-toggle js-builds-dropdown-button"
-      data-placement="top"
       data-toggle="dropdown"
       data-display="static"
       type="button"
diff --git a/app/assets/javascripts/pipelines/mixins/pipelines.js b/app/assets/javascripts/pipelines/mixins/pipelines.js
index 41bc5dcce5c..32bfa47e5f2 100644
--- a/app/assets/javascripts/pipelines/mixins/pipelines.js
+++ b/app/assets/javascripts/pipelines/mixins/pipelines.js
@@ -1,5 +1,5 @@
 import Visibility from 'visibilityjs';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '../../locale';
 import Flash from '../../flash';
 import Poll from '../../lib/utils/poll';
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
index f5dae5ad808..5a3407693e5 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_dropdown_mixin.js
@@ -2,7 +2,7 @@ import _ from 'underscore';
 import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 import DropdownButton from '~/vue_shared/components/dropdown/dropdown_button.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 import store from '../store';
 
diff --git a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
index 9a729ca9b91..7400b685c7e 100644
--- a/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
+++ b/app/assets/javascripts/projects/tree/components/commit_pipeline_status_component.vue
@@ -5,7 +5,7 @@ import Poll from '~/lib/utils/poll';
 import Flash from '~/flash';
 import { s__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import CommitPipelineService from '../services/commit_pipeline_service';
 
 export default {
diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 0a906f40f5a..6f94f5d6d2a 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Flash from '../../flash';
 import store from '../stores';
 import collapsibleContainer from './collapsible_container.vue';
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index be9816a55c4..d85de973740 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import Flash from '../../flash';
 import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
diff --git a/app/assets/javascripts/reports/components/summary_row.vue b/app/assets/javascripts/reports/components/summary_row.vue
index a44ba833b63..7e73ccb6c28 100644
--- a/app/assets/javascripts/reports/components/summary_row.vue
+++ b/app/assets/javascripts/reports/components/summary_row.vue
@@ -1,7 +1,7 @@
 <script>
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import Popover from '~/vue_shared/components/help_popover.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 /**
  * Renders the summary row for each report
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
index 17def77b2d7..0a4583b5861 100644
--- a/app/assets/javascripts/search_autocomplete.js
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -253,7 +253,6 @@ export class SearchAutocomplete {
   }
 
   getCategoryContents() {
-    const userId = gon.current_user_id;
     const userName = gon.current_username;
     const { projectOptions, groupOptions, dashboardOptions } = gl;
 
@@ -279,21 +278,21 @@ export class SearchAutocomplete {
     const issueItems = [
       {
         text: s__('SearchAutocomplete|Issues assigned to me'),
-        url: `${issuesPath}/?assignee_id=${userId}`,
+        url: `${issuesPath}/?assignee_username=${userName}`,
       },
       {
         text: s__("SearchAutocomplete|Issues I've created"),
-        url: `${issuesPath}/?author_id=${userId}`,
+        url: `${issuesPath}/?author_username=${userName}`,
       },
     ];
     const mergeRequestItems = [
       {
         text: s__('SearchAutocomplete|Merge requests assigned to me'),
-        url: `${mrPath}/?assignee_id=${userId}`,
+        url: `${mrPath}/?assignee_username=${userName}`,
       },
       {
         text: s__("SearchAutocomplete|Merge requests I've created"),
-        url: `${mrPath}/?author_id=${userId}`,
+        url: `${mrPath}/?author_username=${userName}`,
       },
     ];
 
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index 4d461baf74d..8a48eea5c89 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -5,7 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 import GfmAutoComplete from '~/gfm_auto_complete';
 import { __, s__ } from '~/locale';
 import Api from '~/api';
-import { GlModal, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlModal, GlTooltipDirective } from '@gitlab/ui';
 import eventHub from './event_hub';
 import EmojiMenuInModal from './emoji_menu_in_modal';
 
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index fe73f6a0cef..43d2f754bac 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -2,7 +2,7 @@
 import { __, n__, sprintf } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   directives: {
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index b145e5dc5e2..87780411c26 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -1,7 +1,7 @@
 <script>
 import { parseSeconds, stringifyTime } from '~/lib/utils/datetime_utility';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import { GlProgressBar } from '@gitlab-org/gitlab-ui';
+import { GlProgressBar } from '@gitlab/ui';
 
 export default {
   name: 'TimeTrackingComparisonPane',
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index 913a616d9f1..7edef35461a 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
@@ -1,7 +1,7 @@
 <script>
 import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 import Icon from '~/vue_shared/components/icon.vue';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 4ec925aa8a6..fe741dc60cb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -33,6 +33,10 @@ export default {
       type: Object,
       required: true,
     },
+    showMetrics: {
+      type: Boolean,
+      required: true,
+    },
   },
   deployedTextMap: {
     running: __('Deploying to'),
@@ -74,6 +78,9 @@ export default {
     shouldRenderDropdown() {
       return this.deployment.changes && this.deployment.changes.length > 0;
     },
+    showMemoryUsage() {
+      return this.hasMetrics && this.showMetrics;
+    },
   },
   methods: {
     stopEnvironment() {
@@ -136,7 +143,7 @@ export default {
               {{ deployTimeago }}
             </span>
             <memory-usage
-              v-if="hasMetrics"
+              v-if="showMemoryUsage"
               :metrics-url="deployment.metrics_url"
               :metrics-monitoring-url="deployment.metrics_monitoring_url"
             />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index b3340290ed3..060361a6516 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import ciIcon from '../../vue_shared/components/ci_icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 4bfbdcf1404..409fc2f2db4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
index 7e33021e4b4..fb9ca897844 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.vue
@@ -6,7 +6,7 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import MrWidgetAuthorTime from '../../components/mr_widget_author_time.vue';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   name: 'MRWidgetMerged',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 0e714cc2aa1..5a7f6cc36fa 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import simplePoll from '../../../lib/utils/simple_poll';
 import eventHub from '../../event_hub';
 import statusIcon from '../mr_widget_status_icon.vue';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 063d1e15544..3b840540657 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -312,6 +312,7 @@ export default {
       :key="`pre-merge-deploy-${deployment.id}`"
       class="js-pre-merge-deploy"
       :deployment="deployment"
+      :show-metrics="false"
     />
     <div class="mr-section-container">
       <grouped-test-reports-app
@@ -366,6 +367,7 @@ export default {
         v-for="postMergeDeployment in mr.postMergeDeployments"
         :key="`post-merge-deploy-${postMergeDeployment.id}`"
         :deployment="postMergeDeployment"
+        :show-metrics="true"
         class="js-post-deployment"
       />
     </template>
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index 766fc211bf5..c5fbaf87b00 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { pluralize } from '~/lib/utils/text_utility';
 import { __, sprintf } from '~/locale';
diff --git a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
index 6780254827f..b0962684430 100644
--- a/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_badge_link.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import CiIcon from './ci_icon.vue';
 /**
  * Renders CI Badge link with CI icon and status text based on
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 6b90a1f540e..671b4909839 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -12,7 +12,7 @@
  *    css-class="btn-transparent"
  * />
  */
-import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '../components/icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/vue_shared/components/commit.vue b/app/assets/javascripts/vue_shared/components/commit.vue
index b1139f34e41..420bd25b496 100644
--- a/app/assets/javascripts/vue_shared/components/commit.vue
+++ b/app/assets/javascripts/vue_shared/components/commit.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import UserAvatarLink from './user_avatar/user_avatar_link.vue';
 import Icon from '../../vue_shared/components/icon.vue';
 
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index c78b96695cf..97bdd9915c5 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 import Icon from '../../icon.vue';
 import { numberToHumanSize } from '../../../../lib/utils/number_utils';
 
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
index 419987d2c50..a084cfdf612 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/markdown_viewer.vue
@@ -2,7 +2,7 @@
 import axios from '~/lib/utils/axios_utils';
 import { __ } from '~/locale';
 import $ from 'jquery';
-import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 
 const { CancelToken } = axios;
 let axiosSource;
diff --git a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
index 0e194eaaed5..0f4effda79f 100644
--- a/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/dropdown/dropdown_button.vue
@@ -1,6 +1,6 @@
 <script>
 import { __ } from '~/locale';
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index 03818be6a69..545be568ad3 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import getIconForFile from './file_icon/file_icon_map';
 import icon from '../../vue_shared/components/icon.vue';
 
diff --git a/app/assets/javascripts/vue_shared/components/gl_countdown.vue b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
index a35986b2d03..97f7998f461 100644
--- a/app/assets/javascripts/vue_shared/components/gl_countdown.vue
+++ b/app/assets/javascripts/vue_shared/components/gl_countdown.vue
@@ -1,6 +1,6 @@
 <script>
 import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility';
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 
 /**
  * Counts down to a given end date.
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 88e95c33b9b..1a91a8b81e3 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
 import UserAvatarImage from './user_avatar/user_avatar_image.vue';
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index 69d7e5c46f5..9bae8a32a8c 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 /* eslint-disable vue/require-default-prop */
 /* This is a re-usable vue component for rendering a button
     that will probably be sending off ajax requests and need
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index 27e3f314dd3..ca9e57a9b00 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import ToolbarButton from './toolbar_button.vue';
 import Icon from '../icon.vue';
 
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index b0a93794013..3cb48023002 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLink } from '@gitlab-org/gitlab-ui';
+import { GlLink } from '@gitlab/ui';
 
 export default {
   components: {
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
index 91d0bbfc21c..13af4b627de 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '../icon.vue';
 
 export default {
diff --git a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
index 8cb72afcdc0..2dcd161b4fb 100644
--- a/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/skeleton_note.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlSkeletonLoading } from '@gitlab-org/gitlab-ui';
+import { GlSkeletonLoading } from '@gitlab/ui';
 
 export default {
   name: 'SkeletonNote',
diff --git a/app/assets/javascripts/vue_shared/components/pagination_links.vue b/app/assets/javascripts/vue_shared/components/pagination_links.vue
index 89dcf049f6e..0b44f8578cb 100644
--- a/app/assets/javascripts/vue_shared/components/pagination_links.vue
+++ b/app/assets/javascripts/vue_shared/components/pagination_links.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlPagination } from '@gitlab-org/gitlab-ui';
+import { GlPagination } from '@gitlab/ui';
 import { s__ } from '../../locale';
 
 export default {
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
index 5b12bb6b59e..6aa880603b9 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/date_picker.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import datePicker from '../pikaday.vue';
 import toggleSidebar from './toggle_sidebar.vue';
 import collapsedCalendarIcon from './collapsed_calendar_icon.vue';
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
index e50d612ce36..98b8b6460fe 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/base.vue
@@ -4,7 +4,7 @@ import { __ } from '~/locale';
 import LabelsSelect from '~/labels_select';
 import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue';
 
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import DropdownTitle from './dropdown_title.vue';
 import DropdownValue from './dropdown_value.vue';
 import DropdownValueCollapsed from './dropdown_value_collapsed.vue';
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index e7cb5cfac12..5d1c92c3b3d 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon } from '@gitlab-org/gitlab-ui';
+import { GlLoadingIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
 import icon from './icon.vue';
 
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
index 4cfb1ded0a9..c78d98ccd9e 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_image.vue
@@ -15,7 +15,7 @@
 
 */
 
-import { GlTooltip } from '@gitlab-org/gitlab-ui';
+import { GlTooltip } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { placeholderImage } from '../../../lazy_loader';
 
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
index 351a639c6e8..6dd519ea56d 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_link.vue
@@ -17,7 +17,7 @@
 
 */
 
-import { GlLink, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 import userAvatarImage from './user_avatar_image.vue';
 
 export default {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 6bdcb20210b..037a5adfb7e 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -415,7 +415,6 @@ span.idiff {
 }
 
 .preview-container {
-  height: 100%;
   overflow: auto;
 
   .file-container {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 6d998fa1e07..3c7bf0b0e46 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -842,11 +842,15 @@
     background-repeat: repeat;
   }
 
-  .diff-file-discussions + .discussion-form::before {
-    width: auto;
-    margin-left: -16px;
-    margin-right: -16px;
-    margin-bottom: 16px;
+  .diff-file-discussions + .discussion-form {
+    padding: $gl-padding;
+
+    &::before {
+      width: auto;
+      margin-left: -$gl-padding;
+      margin-right: -$gl-padding;
+      margin-bottom: $gl-padding;
+    }
   }
 
   .notes {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 3aa79bf2466..38851de6401 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -727,6 +727,10 @@
       .issuable-main-info {
         flex: 1 auto;
         margin-right: 10px;
+
+        .issue-weight-icon {
+          vertical-align: sub;
+        }
       }
 
       .issuable-meta {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 45b921a2fbb..97b3f696139 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -241,7 +241,7 @@ table {
   .discussion-reply-holder {
     background-color: $white-light;
     padding: 10px 16px;
-    border-radius: 0 0 $border-radius-default $border-radius-default;
+    border-radius: 0 0 3px 3px;
 
     &.is-replying {
       padding-bottom: $gl-padding;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 35e01c9c807..085ff27e6ef 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -28,7 +28,7 @@ $note-form-margin-left: 72px;
 }
 
 .main-notes-list {
-  @include vertical-line(39px);
+  @include vertical-line(36px);
 }
 
 .notes {
@@ -272,7 +272,7 @@ $note-form-margin-left: 72px;
   }
 
   .system-note {
-    padding: 6px 20px;
+    padding: 6px 21px;
     margin: $gl-padding-24 0;
     background-color: transparent;
 
@@ -407,6 +407,24 @@ $note-form-margin-left: 72px;
   }
 }
 
+.tab-pane.notes {
+  .diff-file .notes .system-note {
+    margin: 0;
+  }
+}
+
+.tab-pane.diffs {
+  .system-note {
+    padding: 0 $gl-padding;
+    margin-left: 20px;
+  }
+
+  .notes > .note-discussion li.note.system-note {
+    border-bottom: 0;
+    padding: 0 $gl-padding;
+  }
+}
+
 .diff-file {
   .is-over {
     .add-diff-note {
@@ -415,18 +433,12 @@ $note-form-margin-left: 72px;
   }
 
   .discussion-notes {
-    &:not(:first-child) {
-      border-top: 1px solid $white-normal;
-      margin-top: 20px;
-    }
-
     &:not(:last-child) {
-      border-bottom: 1px solid $white-normal;
-      margin-bottom: 20px;
+      margin-bottom: 0;
     }
 
     .system-note {
-      margin: 0;
+      background-color: $white-light;
       padding: $gl-padding;
     }
   }
@@ -485,6 +497,11 @@ $note-form-margin-left: 72px;
 
   .note-wrapper {
     @include outline-comment();
+
+    &.system-note {
+      border: 0;
+      margin-left: 20px;
+    }
   }
 
   .discussion-reply-holder {
@@ -499,6 +516,10 @@ $note-form-margin-left: 72px;
     @include vertical-line(52px);
   }
 
+  .notes_content {
+    background-color: $white-light;
+  }
+
   .discussion-reply-holder {
     border-top: 1px solid $border-color;
   }
@@ -910,3 +931,23 @@ $note-form-margin-left: 72px;
     }
   }
 }
+
+//This needs to be deleted when Snippet/Commit comments are convered to Vue
+// See https://gitlab.com/gitlab-org/gitlab-ce/issues/53918#note_117038785
+.unstyled-comments {
+
+  .discussion-header {
+    padding: $gl-padding;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .note-wrapper.outlined {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .discussion-form-container {
+    padding: $gl-padding;
+  }
+}