1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<script>
import { GlButton, GlButtonGroup, GlCollapsibleListbox } from '@gitlab/ui';
import { createAlert } from '~/flash';
import { MINIMUM_SEARCH_LENGTH } from '~/graphql_shared/constants';
import { s__ } from '~/locale';
import { getIdFromGraphQLId } from '~/graphql_shared/utils';
import { DEBOUNCE_DELAY } from '~/vue_shared/components/filtered_search_bar/constants';
import searchForkableNamespaces from '../queries/search_forkable_namespaces.query.graphql';
export default {
components: {
GlButton,
GlButtonGroup,
GlCollapsibleListbox,
},
apollo: {
project: {
query: searchForkableNamespaces,
variables() {
return {
projectPath: this.projectFullPath,
search: this.search,
};
},
skip() {
const { length } = this.search;
return length > 0 && length < MINIMUM_SEARCH_LENGTH;
},
error(error) {
createAlert({
message: s__(
'ForkProject|Something went wrong while loading data. Please refresh the page to try again.',
),
captureError: true,
error,
});
},
debounce: DEBOUNCE_DELAY,
},
},
inject: ['projectFullPath'],
data() {
return {
project: {},
search: '',
selectedNamespace: null,
};
},
computed: {
loading() {
return this.$apollo.queries.project.loading;
},
rootUrl() {
return `${gon.gitlab_url}/`;
},
namespaces() {
return this.project.forkTargets?.nodes || [];
},
dropdownText() {
return this.selectedNamespace?.fullPath || s__('ForkProject|Select a namespace');
},
namespaceItems() {
return this.namespaces?.map(({ id, fullPath }) => ({ value: id, text: fullPath }));
},
},
methods: {
setNamespace(namespaceId) {
const namespace = this.namespaces.find(({ id }) => id === namespaceId);
const id = getIdFromGraphQLId(namespace.id);
this.$emit('select', {
id,
name: namespace.name,
visibility: namespace.visibility,
});
this.selectedNamespace = { id, fullPath: namespace.fullPath };
},
searchNamespaces(search) {
this.search = search;
},
},
};
</script>
<template>
<gl-button-group class="gl-w-full">
<gl-button class="gl-text-truncate gl-flex-grow-0! gl-max-w-34" label :title="rootUrl">{{
rootUrl
}}</gl-button>
<gl-collapsible-listbox
class="gl-flex-grow-1"
data-qa-selector="select_namespace_dropdown"
data-testid="select_namespace_dropdown"
:items="namespaceItems"
:header-text="__('Namespaces')"
:no-results-text="__('No matches found')"
:searchable="true"
:searching="loading"
toggle-class="gl-flex-direction-column gl-align-items-stretch!"
:toggle-text="dropdownText"
@search="searchNamespaces"
@select="setNamespace"
/>
</gl-button-group>
</template>
|
