1
1
<script >
2
- import { GlFormGroup , GlFormInput , GlFormInputGroup , GlInputGroupText } from ' @gitlab/ui' ;
2
+ import {
3
+ GlFormGroup ,
4
+ GlFormInput ,
5
+ GlFormInputGroup ,
6
+ GlInputGroupText ,
7
+ GlLink ,
8
+ GlAlert ,
9
+ } from ' @gitlab/ui' ;
3
10
import { debounce } from ' lodash' ;
4
11
5
12
import { s__ , __ } from ' ~/locale' ;
@@ -33,23 +40,36 @@ export default {
33
40
),
34
41
validFeedback: s__ (' Groups|Group path is available.' ),
35
42
},
43
+ groupId: {
44
+ label: s__ (' Groups|Group ID' ),
45
+ },
36
46
},
37
47
apiLoadingMessage: s__ (' Groups|Checking group URL availability...' ),
38
48
apiErrorMessage: __ (
39
49
' An error occurred while checking group path. Please refresh and try again.' ,
40
50
),
51
+ changingUrlWarningMessage: s__ (' Groups|Changing group URL can have unintended side effects.' ),
52
+ learnMore: s__ (' Groups|Learn more' ),
41
53
},
42
54
nameInputSize: { md: ' lg' },
43
55
changingGroupPathHelpPagePath: helpPagePath (' user/group/index' , {
44
56
anchor: ' change-a-groups-path' ,
45
57
}),
46
58
mattermostDataBindName: ' create_chat_team' ,
47
- components: { GlFormGroup, GlFormInput, GlFormInputGroup, GlInputGroupText },
59
+ components: {
60
+ GlFormGroup,
61
+ GlFormInput,
62
+ GlFormInputGroup,
63
+ GlInputGroupText,
64
+ GlLink,
65
+ GlAlert,
66
+ },
48
67
inject: [' fields' , ' basePath' , ' mattermostEnabled' ],
49
68
data () {
50
69
return {
51
70
name: this .fields .name .value ,
52
71
path: this .fields .path .value ,
72
+ hasPathBeenManuallySet: false ,
53
73
apiSuggestedPath: ' ' ,
54
74
apiLoading: false ,
55
75
nameFeedbackState: null ,
@@ -65,16 +85,23 @@ export default {
65
85
pathDescription () {
66
86
return this .apiLoading ? this .$options .i18n .apiLoadingMessage : ' ' ;
67
87
},
88
+ isEditingGroup () {
89
+ return this .fields .groupId .value !== ' ' ;
90
+ },
68
91
},
69
92
watch: {
70
93
name: [
71
94
function updatePath (newName ) {
95
+ if (this .isEditingGroup || this .hasPathBeenManuallySet ) return ;
96
+
72
97
this .nameFeedbackState = null ;
73
98
this .pathFeedbackState = null ;
74
99
this .apiSuggestedPath = ' ' ;
75
100
this .path = slugify (newName);
76
101
},
77
102
debounce (async function updatePathWithSuggestions () {
103
+ if (this .isEditingGroup || this .hasPathBeenManuallySet ) return ;
104
+
78
105
try {
79
106
const { suggests } = await this .checkPathAvailability ();
80
107
@@ -134,10 +161,13 @@ export default {
134
161
handlePathInput (value ) {
135
162
this .pathFeedbackState = null ;
136
163
this .apiSuggestedPath = ' ' ;
164
+ this .hasPathBeenManuallySet = true ;
137
165
this .path = value;
138
166
this .debouncedValidatePath ();
139
167
},
140
168
debouncedValidatePath: debounce (async function validatePath () {
169
+ if (this .isEditingGroup && this .path === this .fields .path .value ) return ;
170
+
141
171
try {
142
172
const {
143
173
exists ,
@@ -228,5 +258,22 @@ export default {
228
258
/ >
229
259
< / gl- form- input- group>
230
260
< / gl- form- group>
261
+ < template v- if = " isEditingGroup" >
262
+ < gl- alert class = " gl-mb-5" : dismissible= " false" variant= " warning" >
263
+ {{ $options .i18n .changingUrlWarningMessage }}
264
+ < gl- link : href= " $options.changingGroupPathHelpPagePath"
265
+ > {{ $options .i18n .learnMore }}
266
+ < / gl- link>
267
+ < / gl- alert>
268
+ < gl- form- group : label= " $options.i18n.inputs.groupId.label" : label- for = " fields.groupId.id" >
269
+ < gl- form- input
270
+ : id= " fields.groupId.id"
271
+ : value= " fields.groupId.value"
272
+ : name= " fields.groupId.name"
273
+ size= " sm"
274
+ readonly
275
+ / >
276
+ < / gl- form- group>
277
+ < / template>
231
278
< / div>
232
279
< / template>
0 commit comments