|
1 | 1 | <script> |
| 2 | +import { GlAlert } from '@gitlab/ui'; |
2 | 3 | // eslint-disable-next-line no-restricted-imports |
3 | 4 | import { mapState, mapGetters } from 'vuex'; |
4 | | -import { __ } from '~/locale'; |
| 5 | +import { __, s__ } from '~/locale'; |
| 6 | +import getBlobSearchQuery from '~/search/graphql/blob_search_zoekt.query.graphql'; |
5 | 7 | import { SCOPE_BLOB, SEARCH_TYPE_ZOEKT } from '~/search/sidebar/constants/index'; |
6 | | -import ZoektBlobResults from '~/search/results/components/zoekt_blob_results.vue'; |
| 8 | +import { DEFAULT_FETCH_CHUNKS } from '../constants'; |
| 9 | +import StatusBar from './status_bar.vue'; |
| 10 | +
|
| 11 | +import ZoektBlobResults from './zoekt_blob_results.vue'; |
7 | 12 |
|
8 | 13 | export default { |
9 | 14 | name: 'GlobalSearchResultsApp', |
10 | 15 | i18n: { |
11 | 16 | headerText: __('Search results'), |
| 17 | + blobDataFetchError: s__( |
| 18 | + 'GlobalSearch|Could not load search results. Refresh the page to try again.', |
| 19 | + ), |
12 | 20 | }, |
13 | 21 | components: { |
14 | 22 | ZoektBlobResults, |
| 23 | + StatusBar, |
| 24 | + GlAlert, |
| 25 | + }, |
| 26 | + data() { |
| 27 | + return { |
| 28 | + hasError: false, |
| 29 | + blobSearch: {}, |
| 30 | + hasResults: true, |
| 31 | + }; |
| 32 | + }, |
| 33 | + apollo: { |
| 34 | + blobSearch: { |
| 35 | + query() { |
| 36 | + return getBlobSearchQuery; |
| 37 | + }, |
| 38 | + errorPolicy: 'none', |
| 39 | + variables() { |
| 40 | + return { |
| 41 | + search: this.query.search, |
| 42 | + groupId: this.query.group_id && `gid://gitlab/Group/${this.query.group_id}`, |
| 43 | + projectId: this.query.project_id && `gid://gitlab/Project/${this.query.project_id}`, |
| 44 | + page: this.currentPage, |
| 45 | + chunkCount: DEFAULT_FETCH_CHUNKS, |
| 46 | + regex: this.query.regex ? JSON.parse(this.query.regex) : false, |
| 47 | + }; |
| 48 | + }, |
| 49 | + result({ data }) { |
| 50 | + this.hasError = false; |
| 51 | + this.blobSearch = data?.blobSearch; |
| 52 | + this.hasResults = data?.blobSearch?.files?.length > 0; |
| 53 | + }, |
| 54 | + debounce: 500, |
| 55 | + error() { |
| 56 | + this.hasError = true; |
| 57 | + this.hasResults = false; |
| 58 | + }, |
| 59 | + }, |
15 | 60 | }, |
16 | 61 | computed: { |
17 | | - ...mapState(['searchType']), |
| 62 | + ...mapState(['searchType', 'query']), |
18 | 63 | ...mapGetters(['currentScope']), |
| 64 | + currentPage() { |
| 65 | + return this.query?.page ? parseInt(this.query?.page, 10) : 1; |
| 66 | + }, |
19 | 67 | isBlobScope() { |
20 | 68 | return this.currentScope === SCOPE_BLOB; |
21 | 69 | }, |
22 | 70 | isZoektSearch() { |
23 | 71 | return this.searchType === SEARCH_TYPE_ZOEKT; |
24 | 72 | }, |
| 73 | + isLoading() { |
| 74 | + return this.$apollo.queries.blobSearch.loading; |
| 75 | + }, |
| 76 | + }, |
| 77 | + methods: { |
| 78 | + clearErrors() { |
| 79 | + this.hasError = false; |
| 80 | + }, |
25 | 81 | }, |
26 | 82 | }; |
27 | 83 | </script> |
28 | 84 |
|
29 | 85 | <template> |
30 | | - <section> |
31 | | - <zoekt-blob-results v-if="isBlobScope && isZoektSearch" /> |
32 | | - </section> |
| 86 | + <div> |
| 87 | + <gl-alert v-if="hasError" variant="danger" @dismiss="clearErrors"> |
| 88 | + {{ $options.i18n.blobDataFetchError }} |
| 89 | + </gl-alert> |
| 90 | + <section v-else-if="isBlobScope && isZoektSearch"> |
| 91 | + <status-bar :blob-search="blobSearch" :has-results="hasResults" :is-loading="isLoading" /> |
| 92 | + <zoekt-blob-results |
| 93 | + :blob-search="blobSearch" |
| 94 | + :has-results="hasResults" |
| 95 | + :is-loading="isLoading" |
| 96 | + /> |
| 97 | + </section> |
| 98 | + </div> |
33 | 99 | </template> |
0 commit comments