@@ -12,14 +12,16 @@ import CheckBox from "../components/CheckBox";
12
12
import ConfirmationModal from "../components/ConfirmationModal" ;
13
13
import { ContextMenuEntry } from "../components/ContextMenu" ;
14
14
import InfoBox from "../components/InfoBox" ;
15
- import { Item , ItemField , ItemFieldContextMenu , ItemFieldIcon , ItemsList } from "../components/ItemsList" ;
15
+ import { ItemsList } from "../components/ItemsList" ;
16
16
import Modal , { ModalBody , ModalHeader , ModalFooter } from "../components/Modal" ;
17
17
import copy from "../images/copy.svg" ;
18
18
import exclamation from "../images/exclamation.svg" ;
19
19
import { openAuthorizeWindow } from "../provider-utils" ;
20
20
import { getGitpodService , gitpodHostUrl } from "../service/service" ;
21
21
import { UserContext } from "../user-context" ;
22
22
import { isGitpodIo } from "../utils" ;
23
+ import { AuthEntryItem } from "./AuthEntryItem" ;
24
+ import { IntegrationEntryItem } from "./IntegrationItemEntry" ;
23
25
import { PageWithSettingsSubMenu } from "./PageWithSettingsSubMenu" ;
24
26
import { SelectAccountModal } from "./SelectAccountModal" ;
25
27
@@ -336,39 +338,13 @@ function GitProviders() {
336
338
< ItemsList className = "pt-6" >
337
339
{ authProviders &&
338
340
authProviders . map ( ( ap ) => (
339
- < Item key = { "ap-" + ap . authProviderId } className = "h-16" >
340
- < ItemFieldIcon >
341
- < div
342
- className = {
343
- "rounded-full w-3 h-3 text-sm align-middle m-auto " +
344
- ( isConnected ( ap . authProviderId ) ? "bg-green-500" : "bg-gray-400" )
345
- }
346
- >
347
-
348
- </ div >
349
- </ ItemFieldIcon >
350
- < ItemField className = "w-4/12 xl:w-3/12 flex flex-col my-auto" >
351
- < span className = "my-auto font-medium truncate overflow-ellipsis" >
352
- { ap . authProviderType }
353
- </ span >
354
- < span className = "text-sm my-auto text-gray-400 truncate overflow-ellipsis dark:text-gray-500" >
355
- { ap . host }
356
- </ span >
357
- </ ItemField >
358
- < ItemField className = "w-6/12 xl:w-3/12 flex flex-col my-auto" >
359
- < span className = "my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400" >
360
- { getUsername ( ap . authProviderId ) || "–" }
361
- </ span >
362
- < span className = "text-sm my-auto text-gray-400 dark:text-gray-500" > Username</ span >
363
- </ ItemField >
364
- < ItemField className = "hidden xl:w-5/12 xl:flex xl:flex-col my-auto" >
365
- < span className = "my-auto truncate text-gray-500 overflow-ellipsis dark:text-gray-400" >
366
- { getPermissions ( ap . authProviderId ) ?. join ( ", " ) || "–" }
367
- </ span >
368
- < span className = "text-sm my-auto text-gray-400 dark:text-gray-500" > Permissions</ span >
369
- </ ItemField >
370
- < ItemFieldContextMenu menuEntries = { gitProviderMenu ( ap ) } />
371
- </ Item >
341
+ < AuthEntryItem
342
+ isConnected = { isConnected }
343
+ gitProviderMenu = { gitProviderMenu }
344
+ getUsername = { getUsername }
345
+ getPermissions = { getPermissions }
346
+ ap = { ap }
347
+ />
372
348
) ) }
373
349
</ ItemsList >
374
350
</ div >
@@ -482,28 +458,7 @@ function GitIntegrations() {
482
458
</ div >
483
459
) }
484
460
< ItemsList className = "pt-6" >
485
- { providers &&
486
- providers . map ( ( ap ) => (
487
- < Item key = { "ap-" + ap . id } className = "h-16" >
488
- < ItemFieldIcon >
489
- < div
490
- className = {
491
- "rounded-full w-3 h-3 text-sm align-middle m-auto " +
492
- ( ap . status === "verified" ? "bg-green-500" : "bg-gray-400" )
493
- }
494
- >
495
-
496
- </ div >
497
- </ ItemFieldIcon >
498
- < ItemField className = "w-3/12 flex flex-col my-auto" >
499
- < span className = "font-medium truncate overflow-ellipsis" > { ap . type } </ span >
500
- </ ItemField >
501
- < ItemField className = "w-7/12 flex flex-col my-auto" >
502
- < span className = "my-auto truncate text-gray-500 overflow-ellipsis" > { ap . host } </ span >
503
- </ ItemField >
504
- < ItemFieldContextMenu menuEntries = { gitProviderMenu ( ap ) } />
505
- </ Item >
506
- ) ) }
461
+ { providers && providers . map ( ( ap ) => < IntegrationEntryItem ap = { ap } gitProviderMenu = { gitProviderMenu } /> ) }
507
462
</ ItemsList >
508
463
</ div >
509
464
) ;
0 commit comments