Add latest changes from gitlab-org/gitlab@master

15 files changed, 83 insertions, 16 deletions

diff --git a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue
index 81f9b1f0af5..55cf38dfcbb 100644
--- a/app/assets/javascripts/content_editor/components/wrappers/code_block.vue
+++ b/app/assets/javascripts/content_editor/components/wrappers/code_block.vue
@@ -80,7 +80,7 @@ export default {
 <template>
   <editor-state-observer @transaction="updateDiagramPreview">
     <node-view-wrapper
-      :class="`content-editor-code-block gl-relative code highlight ${$options.userColorScheme}`"
+      :class="`content-editor-code-block gl-relative code highlight gl-p-3 ${$options.userColorScheme}`"
       as="pre"
     >
       <div
diff --git a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
index 7c6ff002014..373c5970e64 100644
--- a/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
+++ b/app/assets/javascripts/jira_connect/subscriptions/pages/sign_in/sign_in_gitlab_multiversion/index.vue
@@ -42,8 +42,8 @@ export default {
   },
   mounted() {
     this.gitlabBasePath = retrieveBaseUrl();
-    setApiBaseURL(this.gitlabBasePath);
     if (this.gitlabBasePath !== GITLAB_COM_BASE_PATH) {
+      setApiBaseURL(this.gitlabBasePath);
       this.showSetupInstructions = true;
     }
   },
diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index dee8d11c065..2e6fcbea80d 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -53,6 +53,15 @@ export const typePolicies = {
   TreeEntry: {
     keyFields: ['webPath'],
   },
+  Subscription: {
+    fields: {
+      aiCompletionResponse: {
+        read(value) {
+          return value ?? null;
+        },
+      },
+    },
+  },
 };
 
 export const stripWhitespaceFromQuery = (url, path) => {
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index a1539aba786..fd002e29afc 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -89,9 +89,11 @@ initRails();
 function deferredInitialisation() {
   const $body = $('body');
 
-  if (!gon.use_new_navigation) initTopNav();
+  if (!gon.use_new_navigation) {
+    initTopNav();
+    initTodoToggle();
+  }
   initBreadcrumbs();
-  initTodoToggle();
   initPrefetchLinks('.js-prefetch-document');
   initLogoAnimation();
   initServicePingConsent();
diff --git a/app/assets/javascripts/pages/projects/blob/show/index.js b/app/assets/javascripts/pages/projects/blob/show/index.js
index 6d5460da2e5..dee13f60008 100644
--- a/app/assets/javascripts/pages/projects/blob/show/index.js
+++ b/app/assets/javascripts/pages/projects/blob/show/index.js
@@ -61,7 +61,14 @@ const initRefSwitcher = () => {
 initRefSwitcher();
 
 if (viewBlobEl) {
-  const { blobPath, projectPath, targetBranch, originalBranch } = viewBlobEl.dataset;
+  const {
+    blobPath,
+    projectPath,
+    targetBranch,
+    originalBranch,
+    resourceId,
+    userId,
+  } = viewBlobEl.dataset;
 
   // eslint-disable-next-line no-new
   new Vue({
@@ -72,6 +79,8 @@ if (viewBlobEl) {
     provide: {
       targetBranch,
       originalBranch,
+      resourceId,
+      userId,
     },
     render(createElement) {
       return createElement(BlobContentViewer, {
diff --git a/app/assets/javascripts/repository/index.js b/app/assets/javascripts/repository/index.js
index b5568393313..294c0c13648 100644
--- a/app/assets/javascripts/repository/index.js
+++ b/app/assets/javascripts/repository/index.js
@@ -32,7 +32,7 @@ Vue.use(PerformancePlugin, {
 export default function setupVueRepositoryList() {
   const el = document.getElementById('js-tree-list');
   const { dataset } = el;
-  const { projectPath, projectShortPath, ref, escapedRef, fullName } = dataset;
+  const { projectPath, projectShortPath, ref, escapedRef, fullName, resourceId, userId } = dataset;
   const router = createRouter(projectPath, escapedRef);
 
   apolloProvider.clients.defaultClient.cache.writeQuery({
@@ -281,6 +281,7 @@ export default function setupVueRepositoryList() {
     store: createStore(),
     router,
     apolloProvider,
+    provide: { resourceId, userId },
     render(h) {
       return h(App);
     },
diff --git a/app/assets/javascripts/search/index.js b/app/assets/javascripts/search/index.js
index d71785d7fac..1e4b1e36514 100644
--- a/app/assets/javascripts/search/index.js
+++ b/app/assets/javascripts/search/index.js
@@ -15,6 +15,7 @@ export const initSearchApp = () => {
   const store = createStore({
     query,
     navigation,
+    useNewNavigation: gon.use_new_navigation,
   });
 
   initTopbar(store);
diff --git a/app/assets/javascripts/search/store/constants.js b/app/assets/javascripts/search/store/constants.js
index 3f586c5fed8..c8ee0a3f9d9 100644
--- a/app/assets/javascripts/search/store/constants.js
+++ b/app/assets/javascripts/search/store/constants.js
@@ -17,3 +17,15 @@ export const SIDEBAR_PARAMS = [
 ];
 
 export const NUMBER_FORMATING_OPTIONS = { notation: 'compact', compactDisplay: 'short' };
+
+export const ICON_MAP = {
+  blobs: 'code',
+  issues: 'issues',
+  merge_requests: 'merge-request',
+  commits: 'commit',
+  notes: 'comments',
+  milestones: 'tag',
+  users: 'users',
+  projects: 'project',
+  wiki_blobs: 'overview',
+};
diff --git a/app/assets/javascripts/search/store/getters.js b/app/assets/javascripts/search/store/getters.js
index 0e387607af7..135c9a3d67c 100644
--- a/app/assets/javascripts/search/store/getters.js
+++ b/app/assets/javascripts/search/store/getters.js
@@ -1,7 +1,8 @@
 import { findKey, has } from 'lodash';
 import { languageFilterData } from '~/search/sidebar/components/language_filter/data';
+import { formatSearchResultCount, addCountOverLimit } from '~/search/store/utils';
 
-import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from './constants';
+import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY, ICON_MAP } from './constants';
 
 export const frequentGroups = (state) => {
   return state.frequentItems[GROUPS_LOCAL_STORAGE_KEY];
@@ -26,3 +27,13 @@ export const queryLanguageFilters = (state) => state.query[languageFilterData.fi
 export const currentUrlQueryHasLanguageFilters = (state) =>
   has(state.urlQuery, languageFilterData.filterParam) &&
   state.urlQuery[languageFilterData.filterParam]?.length > 0;
+
+export const navigationItems = (state) =>
+  Object.values(state.navigation).map((item) => ({
+    title: item.label,
+    icon: ICON_MAP[item.scope] || '',
+    link: item.link,
+    is_active: Boolean(item?.active),
+    pill_count: `${formatSearchResultCount(item?.count)}${addCountOverLimit(item?.count)}` || '',
+    items: [],
+  }));
diff --git a/app/assets/javascripts/search/store/index.js b/app/assets/javascripts/search/store/index.js
index e20a43808cf..634f8f7a7fa 100644
--- a/app/assets/javascripts/search/store/index.js
+++ b/app/assets/javascripts/search/store/index.js
@@ -7,11 +7,11 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-export const getStoreConfig = ({ query, navigation }) => ({
+export const getStoreConfig = ({ query, navigation, useNewNavigation }) => ({
   actions,
   getters,
   mutations,
-  state: createState({ query, navigation }),
+  state: createState({ query, navigation, useNewNavigation }),
 });
 
 const createStore = (config) => new Vuex.Store(getStoreConfig(config));
diff --git a/app/assets/javascripts/search/store/state.js b/app/assets/javascripts/search/store/state.js
index d85a135bb4e..a62b6728819 100644
--- a/app/assets/javascripts/search/store/state.js
+++ b/app/assets/javascripts/search/store/state.js
@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash';
 import { GROUPS_LOCAL_STORAGE_KEY, PROJECTS_LOCAL_STORAGE_KEY } from './constants';
 
-const createState = ({ query, navigation }) => ({
+const createState = ({ query, navigation, useNewNavigation }) => ({
   urlQuery: cloneDeep(query),
   query,
   groups: [],
@@ -14,6 +14,7 @@ const createState = ({ query, navigation }) => ({
   },
   sidebarDirty: false,
   navigation,
+  useNewNavigation,
   aggregations: {
     error: false,
     fetching: false,
diff --git a/app/assets/javascripts/search/store/utils.js b/app/assets/javascripts/search/store/utils.js
index 9d1743e64ad..2f02ef3475c 100644
--- a/app/assets/javascripts/search/store/utils.js
+++ b/app/assets/javascripts/search/store/utils.js
@@ -144,3 +144,7 @@ export const prepareSearchAggregations = (state, aggregationData) =>
 
     return item;
   });
+
+export const addCountOverLimit = (count = '') => {
+  return count.includes('+') ? '+' : '';
+};
diff --git a/app/assets/javascripts/sidebar/utils.js b/app/assets/javascripts/sidebar/utils.js
index 6b90fb80abf..a61b4e4f066 100644
--- a/app/assets/javascripts/sidebar/utils.js
+++ b/app/assets/javascripts/sidebar/utils.js
@@ -12,7 +12,7 @@ export const updateGlobalTodoCount = (additionalTodoCount) => {
 
   if (countContainer === null) return;
 
-  const currentCount = parseInt(countContainer.innerText, 10);
+  const currentCount = parseInt(countContainer.innerText, 10) || 0;
 
   const todoToggleEvent = new CustomEvent('todo:toggle', {
     detail: {
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index b69ebc6be17..e96b896825a 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -2,6 +2,7 @@
 import { GlBadge, GlButton, GlModalDirective, GlTooltipDirective } from '@gitlab/ui';
 import { __, s__, sprintf } from '~/locale';
 import SafeHtml from '~/vue_shared/directives/safe_html';
+import { highCountTrim } from '~/lib/utils/text_utility';
 import logo from '../../../../views/shared/_logo.svg';
 import { toggleSuperSidebarCollapsed } from '../super_sidebar_collapsed_state_manager';
 import CreateMenu from './create_menu.vue';
@@ -59,12 +60,27 @@ export default {
   data() {
     return {
       mrMenuShown: false,
+      todoCount: this.sidebarData.todos_pending_count,
     };
   },
+  computed: {
+    formattedTodoCount() {
+      return highCountTrim(this.todoCount);
+    },
+  },
+  mounted() {
+    document.addEventListener('todo:toggle', this.updateTodos);
+  },
+  beforeDestroy() {
+    document.removeEventListener('todo:toggle', this.updateTodos);
+  },
   methods: {
     collapseSidebar() {
       toggleSuperSidebarCollapsed(true, true, true);
     },
+    updateTodos(e) {
+      this.todoCount = e.detail.count || 0;
+    },
   },
 };
 </script>
@@ -94,8 +110,9 @@ export default {
         :href="sidebarData.canary_toggle_com_url"
         size="sm"
         class="gl-ml-2"
-        >{{ $options.NEXT_LABEL }}</gl-badge
       >
+        {{ $options.NEXT_LABEL }}
+      </gl-badge>
       <div class="gl-flex-grow-1"></div>
       <gl-button
         v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.collapseSidebar"
@@ -165,9 +182,9 @@ export default {
       </merge-request-menu>
       <counter
         v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.todoList"
-        class="gl-flex-basis-third shortcuts-todos"
+        class="gl-flex-basis-third shortcuts-todos js-todos-count"
         icon="todo-done"
-        :count="sidebarData.todos_pending_count"
+        :count="formattedTodoCount"
         href="/dashboard/todos"
         :label="$options.i18n.todoList"
         data-qa-selector="todos_shortcut_button"
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue
index f2c27cf611e..0577279cdd0 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_todo.vue
@@ -53,11 +53,11 @@ export default {
   },
   methods: {
     updateToDoCount(add) {
-      const oldCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
+      const oldCount = parseInt(document.querySelector('.js-todos-count').innerText, 10) || 0;
       const count = add ? oldCount + 1 : oldCount - 1;
       const headerTodoEvent = new CustomEvent('todo:toggle', {
         detail: {
-          count,
+          count: Math.max(count, 0),
         },
       });