4
4
* See License.AGPL.txt in the project root for license information.
5
5
*/
6
6
7
- import { FC , useCallback , useEffect , useMemo } from "react" ;
7
+ import { useCallback , useEffect , useMemo } from "react" ;
8
8
import { Combobox , ComboboxElement , ComboboxSelectedItem } from "./podkit/combobox/Combobox" ;
9
9
import Editor from "../icons/Editor.svg" ;
10
10
import { AllowedWorkspaceEditor , useAllowedWorkspaceEditorsMemo } from "../data/ide-options/ide-options-query" ;
@@ -14,33 +14,34 @@ import { Link } from "react-router-dom";
14
14
import { repositoriesRoutes } from "../repositories/repositories.routes" ;
15
15
import { useFeatureFlag } from "../data/featureflag-query" ;
16
16
17
- interface SelectIDEComponentProps {
17
+ type Props = {
18
18
selectedIdeOption ?: string ;
19
19
selectedConfigurationId ?: string ;
20
20
pinnedEditorVersions ?: Map < string , string > ;
21
21
useLatest ?: boolean ;
22
- onSelectionChange : ( ide : string , latest : boolean ) => void ;
23
- setError ?: ( error ?: React . ReactNode ) => void ;
24
- setWarning ?: ( warning ?: React . ReactNode ) => void ;
25
22
disabled ?: boolean ;
26
23
loading ?: boolean ;
27
24
ignoreRestrictionScopes : DisableScope [ ] | undefined ;
28
25
availableOptions ?: string [ ] ;
29
- }
30
-
26
+ hideVersions ?: boolean ;
27
+ setError ?: ( error ?: React . ReactNode ) => void ;
28
+ setWarning ?: ( warning ?: React . ReactNode ) => void ;
29
+ onSelectionChange : ( ide : string , latest : boolean ) => void ;
30
+ } ;
31
31
export default function SelectIDEComponent ( {
32
32
selectedIdeOption,
33
33
selectedConfigurationId,
34
34
pinnedEditorVersions,
35
35
useLatest,
36
36
disabled = false ,
37
37
loading = false ,
38
+ ignoreRestrictionScopes,
39
+ availableOptions,
40
+ hideVersions,
38
41
setError,
39
42
setWarning,
40
43
onSelectionChange,
41
- ignoreRestrictionScopes,
42
- availableOptions,
43
- } : SelectIDEComponentProps ) {
44
+ } : Props ) {
44
45
const {
45
46
data : ideOptions ,
46
47
isLoading : ideOptionsLoading ,
@@ -51,15 +52,13 @@ export default function SelectIDEComponent({
51
52
} ) ;
52
53
const isEditorVersionPinningEnabled = useFeatureFlag ( "org_level_editor_version_pinning_enabled" ) ;
53
54
54
- const options = ideOptions ;
55
-
56
55
const getElements = useCallback (
57
56
( search : string ) => {
58
- if ( ! options ) {
57
+ if ( ! ideOptions ) {
59
58
return [ ] ;
60
59
}
61
60
const result : ComboboxElement [ ] = [ ] ;
62
- for ( const ide of options . filter ( ( ide ) =>
61
+ for ( const ide of ideOptions . filter ( ( ide ) =>
63
62
`${ ide . label } ${ ide . title } ${ ide . notes } ${ ide . id } ` . toLowerCase ( ) . includes ( search . toLowerCase ( ) ) ,
64
63
) ) {
65
64
if ( ! useLatest ) {
@@ -70,21 +69,24 @@ export default function SelectIDEComponent({
70
69
option = { ide }
71
70
pinnedIdeVersion = { pinnedEditorVersions ?. get ( ide . id ) }
72
71
useLatest = { false }
72
+ hideVersion = { hideVersions }
73
73
/>
74
74
) ,
75
75
isSelectable : true ,
76
76
} ) ;
77
77
} else if ( ide . latestImage ) {
78
78
result . push ( {
79
79
id : ide . id + "-latest" ,
80
- element : < IdeOptionElementInDropDown option = { ide } useLatest = { true } /> ,
80
+ element : (
81
+ < IdeOptionElementInDropDown option = { ide } useLatest = { true } hideVersion = { hideVersions } />
82
+ ) ,
81
83
isSelectable : true ,
82
84
} ) ;
83
85
}
84
86
}
85
87
return result ;
86
88
} ,
87
- [ options , useLatest , pinnedEditorVersions ] ,
89
+ [ ideOptions , useLatest , pinnedEditorVersions , hideVersions ] ,
88
90
) ;
89
91
const internalOnSelectionChange = ( id : string ) => {
90
92
const { ide, useLatest } = parseId ( id ) ;
@@ -177,6 +179,7 @@ export default function SelectIDEComponent({
177
179
pinnedIdeVersion = { pinnedEditorVersions ?. get ( ide ) }
178
180
useLatest = { ! ! useLatest }
179
181
loading = { ideOptionsLoading || loading }
182
+ hideVersion = { hideVersions }
180
183
/>
181
184
</ Combobox >
182
185
) ;
@@ -188,23 +191,20 @@ function parseId(id: string): { ide: string; useLatest: boolean } {
188
191
return { ide, useLatest } ;
189
192
}
190
193
191
- interface IdeOptionElementProps {
194
+ type IdeOptionProps = {
192
195
option : AllowedWorkspaceEditor | undefined ;
193
196
pinnedIdeVersion ?: string ;
194
197
useLatest : boolean ;
195
198
loading ?: boolean ;
196
- }
197
-
198
- function capitalize ( label ?: string ) {
199
- return label && label [ 0 ] . toLocaleUpperCase ( ) + label . slice ( 1 ) ;
200
- }
201
-
202
- const IdeOptionElementSelected : FC < IdeOptionElementProps > = ( {
199
+ hideVersion ?: boolean ;
200
+ } ;
201
+ const IdeOptionElementSelected = ( {
203
202
option,
204
203
pinnedIdeVersion,
205
204
useLatest,
206
205
loading = false ,
207
- } ) => {
206
+ hideVersion = false ,
207
+ } : IdeOptionProps ) => {
208
208
let version : string | undefined , label : string | undefined , title : string ;
209
209
if ( ! option ) {
210
210
title = "Select Editor" ;
@@ -221,9 +221,14 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({
221
221
htmlTitle = { title }
222
222
title = {
223
223
< div >
224
- { title } < MiddleDot className = "text-pk-content-tertiary" /> { " " }
225
- < span className = "font-normal" > { version } </ span > { " " }
226
- { useLatest && (
224
+ { title }
225
+ { ! hideVersion && (
226
+ < >
227
+ < MiddleDot className = "text-pk-content-tertiary" /> { " " }
228
+ < span className = "font-normal" > { version } </ span > { " " }
229
+ </ >
230
+ ) }
231
+ { useLatest && ! hideVersion && (
227
232
< div className = "ml-1 rounded-xl bg-pk-content-tertiary/10 px-2 py-1 inline text-sm font-normal" >
228
233
Latest
229
234
</ div >
@@ -236,7 +241,7 @@ const IdeOptionElementSelected: FC<IdeOptionElementProps> = ({
236
241
{ label && (
237
242
< >
238
243
< MiddleDot />
239
- < div > { capitalize ( label ) } </ div >
244
+ < div className = "capitalize" > { label } </ div >
240
245
</ >
241
246
) }
242
247
</ div >
@@ -250,13 +255,13 @@ export const isJetbrains = (editor: string) => {
250
255
return ! [ "code" , "code-desktop" , "xterm" ] . includes ( editor ) ; // a really hacky way to get just JetBrains IDEs
251
256
} ;
252
257
253
- function IdeOptionElementInDropDown ( p : IdeOptionElementProps ) : JSX . Element {
254
- const { option, useLatest } = p ;
258
+ function IdeOptionElementInDropDown ( { option, useLatest, pinnedIdeVersion, hideVersion = false } : IdeOptionProps ) {
255
259
if ( ! option ) {
256
260
return < > </ > ;
257
261
}
258
- const version = useLatest ? option . latestImageVersion : p . pinnedIdeVersion ?? option . imageVersion ;
259
- const label = ! isJetbrains ( option . id ) && capitalize ( option . type ) ;
262
+
263
+ const version = useLatest ? option . latestImageVersion : pinnedIdeVersion ?? option . imageVersion ;
264
+ const label = ! isJetbrains ( option . id ) && option . type ;
260
265
261
266
return (
262
267
< div className = "flex" title = { option . title } >
@@ -265,19 +270,19 @@ function IdeOptionElementInDropDown(p: IdeOptionElementProps): JSX.Element {
265
270
</ div >
266
271
< div className = "flex self-center text-gray-500" >
267
272
< div className = "font-semibold text-gray-700 dark:text-gray-300" > { option . title } </ div >
268
- { version && (
273
+ { ! hideVersion && version && (
269
274
< >
270
- < div className = "mx-1" > · </ div >
271
- < div > { version } </ div >
275
+ < MiddleDot / >
276
+ < span > { version } </ span >
272
277
</ >
273
278
) }
274
279
{ label && (
275
280
< >
276
- < div className = "mx-1" > · </ div >
277
- < div > { label } </ div >
281
+ < MiddleDot / >
282
+ < span className = "capitalize" > { label } </ span >
278
283
</ >
279
284
) }
280
- { useLatest && < div className = "ml-2 rounded-xl bg-gray-200 px-2" > Latest</ div > }
285
+ { useLatest && ! hideVersion && < div className = "ml-2 rounded-xl bg-gray-200 px-2" > Latest</ div > }
281
286
</ div >
282
287
</ div >
283
288
) ;
0 commit comments