@@ -16,11 +16,7 @@ import { Button, Typography } from 'antd';
1616import React , { useState } from 'react' ;
1717import { useTranslation } from 'react-i18next' ;
1818import { AuthProvider } from '../../../generated/settings/settings' ;
19- import {
20- getDefaultProviderForProtocol ,
21- PROTOCOL_OPTIONS ,
22- SsoProtocol ,
23- } from '../../../utils/SSOUtils' ;
19+ import { PROVIDER_OPTIONS } from '../../../utils/SSOUtils' ;
2420import './provider-selector.less' ;
2521import { ProviderSelectorProps } from './ProviderSelector.interface' ;
2622
@@ -29,30 +25,28 @@ const ProviderSelector: React.FC<ProviderSelectorProps> = ({
2925 onProviderSelect,
3026} ) => {
3127 const { t } = useTranslation ( ) ;
32- const [ selectedProtocol , setSelectedProtocol ] = useState <
33- SsoProtocol | undefined
34- > ( ) ;
28+ const [ selectedProvider , setSelectedProvider ] = useState <
29+ AuthProvider | undefined
30+ > ( initialSelectedProvider ) ;
3531
36- const handleCardClick = ( protocol : SsoProtocol ) => {
37- setSelectedProtocol ( protocol ) ;
32+ const handleCardClick = ( provider : AuthProvider ) => {
33+ setSelectedProvider ( provider ) ;
3834 } ;
3935
4036 const handleConfigureClick = ( ) => {
41- if ( selectedProtocol ) {
42- const provider = getDefaultProviderForProtocol ( selectedProtocol ) ;
43-
44- onProviderSelect ( provider ) ;
37+ if ( selectedProvider ) {
38+ onProviderSelect ( selectedProvider ) ;
4539 }
4640 } ;
4741
4842 return (
4943 < div className = "provider-selector-container" >
5044 < div className = "provider-selector-header" >
5145 < Typography . Title className = "m-b-lg" level = { 5 } >
52- { t ( 'label.choose-protocol ' ) }
46+ { t ( 'label.choose-provider ' ) }
5347 </ Typography . Title >
5448 < Button
55- disabled = { ! selectedProtocol }
49+ disabled = { ! selectedProvider }
5650 type = "primary"
5751 onClick = { handleConfigureClick } >
5852 { t ( 'label.configure' ) }
@@ -61,25 +55,28 @@ const ProviderSelector: React.FC<ProviderSelectorProps> = ({
6155 </ div >
6256
6357 < div className = "provider-selection-container d-flex flex-wrap" >
64- { PROTOCOL_OPTIONS . map ( ( protocol ) => (
58+ { PROVIDER_OPTIONS . map ( ( provider ) => (
6559 < div
6660 className = { `provider-item ${
67- selectedProtocol === protocol . key ? 'selected' : ''
61+ selectedProvider === provider . key ? 'selected' : ''
6862 } `}
69- key = { protocol . key }
70- onClick = { ( ) => handleCardClick ( protocol . key ) } >
63+ key = { provider . key }
64+ onClick = { ( ) => handleCardClick ( provider . key ) } >
7165 < div className = "provider-icon" >
7266 < div className = "provider-icon-inner" >
73- < img
74- alt = { protocol . label }
75- height = "24"
76- src = { protocol . icon }
77- width = "24"
78- />
67+ { typeof provider . icon === 'string' ? (
68+ < img
69+ alt = { provider . label }
70+ height = "24"
71+ src = { provider . icon }
72+ width = "24"
73+ />
74+ ) : (
75+ provider . icon
76+ ) }
7977 </ div >
8078 </ div >
81- < span className = "provider-name" > { protocol . label } </ span >
82- < span className = "provider-description" > { protocol . description } </ span >
79+ < span className = "provider-name" > { provider . label } </ span >
8380 </ div >
8481 ) ) }
8582 </ div >
0 commit comments