Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

app/assets/javascripts/observability/constants.js

@@ -52,3 +52,6 @@ export const DATE_RANGE_END_QUERY_KEY = 'date_end';
 export const TIMESTAMP_QUERY_KEY = 'timestamp';
 
 export const FILTERED_SEARCH_TERM_QUERY_KEY = 'search';
+
+export const UTC_FULL_DATE_TIME_FORMAT = `UTC:mmm dd yyyy HH:MM:ss.l Z`;
+export const UTC_SHORT_DATE_TIME_FORMAT = `UTC:mmm dd yyyy HH:MM:ss Z`;

app/assets/javascripts/search/graphql/blob_search_zoekt.query.graphql

@@ -0,0 +1,39 @@
+query getBlobSearchQuery(
+  $search: String!
+  $groupId: GroupID
+  $projectId: ProjectID
+  $page: Int
+  $chunkCount: Int
+  $regex: Boolean
+) {
+  blobSearch(
+    search: $search
+    groupId: $groupId
+    projectId: $projectId
+    page: $page
+    chunkCount: $chunkCount
+    regex: $regex
+  ) {
+    fileCount
+    files {
+      blameUrl
+      chunks {
+        lines {
+          lineNumber
+          richText
+          text
+        }
+        matchCountInChunk
+      }
+      fileUrl
+      matchCount
+      matchCountTotal
+      path
+      projectPath
+    }
+    matchCount
+    perPage
+    searchLevel
+    searchType
+  }
+}

app/assets/javascripts/search/index.js

@@ -6,6 +6,8 @@ import { initSearchSort } from './sort';
 import createStore from './store';
 import { initTopbar } from './topbar';
 import { initBlobRefSwitcher } from './under_topbar';
+import { SEARCH_TYPE_ZOEKT, SCOPE_BLOB } from './sidebar/constants/index';
+import { initZoektBlobResult } from './results/index';
 
 const sidebarInitState = () => {
   const el = document.getElementById('js-search-sidebar');
@@ -67,4 +69,12 @@ export const initSearchApp = () => {
 
   setHighlightClass(query.search); // Code Highlighting
   initBlobRefSwitcher(); // Code Search Branch Picker
+
+  if (
+    searchType === SEARCH_TYPE_ZOEKT &&
+    store.getters.currentScope === SCOPE_BLOB &&
+    gon.features.zoektMultimatchFrontend
+  ) {
+    initZoektBlobResult(store);
+  }
 };

app/assets/javascripts/search/results/components/app.vue

@@ -0,0 +1,33 @@
+<script>
+// eslint-disable-next-line no-restricted-imports
+import { mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
+import { SCOPE_BLOB, SEARCH_TYPE_ZOEKT } from '~/search/sidebar/constants/index';
+import ZoektBlobResults from '~/search/results/components/zoekt_blob_results.vue';
+
+export default {
+  name: 'GlobalSearchResultsApp',
+  i18n: {
+    headerText: __('Search results'),
+  },
+  components: {
+    ZoektBlobResults,
+  },
+  computed: {
+    ...mapState(['searchType']),
+    ...mapGetters(['currentScope']),
+    isBlobScope() {
+      return this.currentScope === SCOPE_BLOB;
+    },
+    isZoektSearch() {
+      return this.searchType === SEARCH_TYPE_ZOEKT;
+    },
+  },
+};
+</script>
+
+<template>
+  <section>
+    <zoekt-blob-results v-if="isBlobScope && isZoektSearch" />
+  </section>
+</template>

app/assets/javascripts/search/results/components/zoekt_blob_results.vue

@@ -0,0 +1,80 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+// eslint-disable-next-line no-restricted-imports
+import { mapState } from 'vuex';
+import { createAlert } from '~/alert';
+import { __, s__ } from '~/locale';
+import getBlobSearchQuery from '~/search/graphql/blob_search_zoekt.query.graphql';
+import { convertToGraphQLId } from '~/graphql_shared/utils';
+
+import {
+  DEFAULT_FETCH_CHUNKS,
+  PROJECT_GRAPHQL_ID_TYPE,
+  GROUP_GRAPHQL_ID_TYPE,
+  SEARCH_RESULTS_DEBOUNCE,
+} from '~/search/results/constants';
+
+export default {
+  name: 'ZoektBlobResults',
+  components: {
+    GlLoadingIcon,
+  },
+  i18n: {
+    headerText: __('Search results'),
+    blobDataFetchError: s__(
+      'GlobalSearch|Could not load search results. Please refresh the page to try again.',
+    ),
+  },
+  data() {
+    return {
+      hasError: false,
+      blobSearch: [],
+    };
+  },
+  apollo: {
+    blobSearch: {
+      query() {
+        return getBlobSearchQuery;
+      },
+      variables() {
+        return {
+          search: this.query.search,
+          groupId:
+            this.query.group_id && convertToGraphQLId(GROUP_GRAPHQL_ID_TYPE, this.query.group_id),
+          projectId:
+            this.query.project_id &&
+            convertToGraphQLId(PROJECT_GRAPHQL_ID_TYPE, this.query.project_id),
+          page: this.query.page,
+          chunkCount: DEFAULT_FETCH_CHUNKS,
+          regex: this.query.regex ? JSON.parse(this.query.regex) : false,
+        };
+      },
+      result({ data }) {
+        this.blobSearch = data?.blobSearch;
+        this.hasError = false;
+      },
+      debounce: SEARCH_RESULTS_DEBOUNCE,
+      error(error) {
+        this.hasError = true;
+        createAlert({
+          message: this.$options.i18n.blobDataFetchError,
+          captureError: true,
+          error,
+        });
+      },
+    },
+  },
+  computed: {
+    ...mapState(['query']),
+    isLoading() {
+      return this.$apollo.queries.blobSearch.loading;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-flex gl-justify-center gl-flex-col">
+    <gl-loading-icon v-if="isLoading" size="sm" />
+  </div>
+</template>

app/assets/javascripts/search/results/constants.js

@@ -0,0 +1,4 @@
+export const DEFAULT_FETCH_CHUNKS = 50;
+export const PROJECT_GRAPHQL_ID_TYPE = 'Project';
+export const GROUP_GRAPHQL_ID_TYPE = 'Group';
+export const SEARCH_RESULTS_DEBOUNCE = 500;

app/assets/javascripts/search/results/index.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import { defaultClient } from '~/graphql_shared/issuable_client';
+import GlobalSearchResults from './components/app.vue';
+
+Vue.use(VueApollo);
+
+const apolloProvider = new VueApollo({
+  defaultClient,
+});
+
+export const initZoektBlobResult = (store) => {
+  const el = document.getElementById('js-search-zoekt-blob-results');
+  if (!el) return false;
+
+  return new Vue({
+    el,
+    name: 'GlobalSearchResults',
+    store,
+    apolloProvider,
+    render(createElement) {
+      return createElement(GlobalSearchResults);
+    },
+  });
+};

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

@@ -1,11 +1,11 @@
 import Api from '~/api';
 import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
-import { visitUrl, setUrlParams, getNormalizedURL } from '~/lib/utils/url_utility';
+import { visitUrl, setUrlParams, getNormalizedURL, updateHistory } from '~/lib/utils/url_utility';
 import { logError } from '~/lib/logger';
 import { __ } from '~/locale';
 import { LABEL_FILTER_PARAM } from '~/search/sidebar/components/label_filter/data';
-import { SCOPE_BLOB } from '~/search/sidebar/constants';
+import { SCOPE_BLOB, SEARCH_TYPE_ZOEKT } from '~/search/sidebar/constants';
 import {
   GROUPS_LOCAL_STORAGE_KEY,
   PROJECTS_LOCAL_STORAGE_KEY,
@@ -102,7 +102,7 @@ export const setFrequentProject = ({ state, commit }, item) => {
   commit(types.LOAD_FREQUENT_ITEMS, { key: PROJECTS_LOCAL_STORAGE_KEY, data: frequentItems });
 };
 
-export const setQuery = ({ state, commit }, { key, value }) => {
+export const setQuery = ({ state, commit, getters }, { key, value }) => {
   commit(types.SET_QUERY, { key, value });
   if (SIDEBAR_PARAMS.includes(key)) {
     commit(types.SET_SIDEBAR_DIRTY, isSidebarDirty(state.query, state.urlQuery));
@@ -111,6 +111,15 @@ export const setQuery = ({ state, commit }, { key, value }) => {
   if (key === REGEX_PARAM) {
     setDataToLS(LS_REGEX_HANDLE, value);
   }
+
+  if (
+    state.searchType === SEARCH_TYPE_ZOEKT &&
+    getters.currentScope === SCOPE_BLOB &&
+    gon.features.zoektMultimatchFrontend
+  ) {
+    const newUrl = setUrlParams({ ...state.query, page: null }, window.location.href, false, true);
+    updateHistory({ state: state.query, url: newUrl, replace: true });
+  }
 };
 
 export const applyQuery = ({ state }) => {