Cleanup for how we define SSO providers

Author: jmgasper

src/apps/admin/src/lib/components/UsersTable/UsersTable.tsx

@@ -6,6 +6,7 @@ import _ from 'lodash'
 import classNames from 'classnames'
 import moment from 'moment'
 
+import { EnvironmentConfig } from '~/config'
 import { useWindowSize, WindowSize } from '~/libs/shared'
 import {
     Button,
@@ -26,13 +27,11 @@ import { DialogEditUserTerms } from '../DialogEditUserTerms'
 import { DialogEditUserStatus } from '../DialogEditUserStatus'
 import { DialogUserStatusHistory } from '../DialogUserStatusHistory'
 import { DropdownMenuButton } from '../common/DropdownMenuButton'
-import { useOnComponentDidMount, useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
+import { useTableFilterLocal, useTableFilterLocalProps } from '../../hooks'
 import { TABLE_DATE_FORMAT } from '../../../config/index.config'
 import { SSOLoginProvider, UserInfo } from '../../models'
 import { Pagination } from '../common/Pagination'
 import { ReactComponent as RectangleListRegularIcon } from '../../assets/i/rectangle-list-regular-icon.svg'
-import { fetchSSOLoginProviders } from '../../services'
-import { handleError } from '../../utils'
 
 import styles from './UsersTable.module.scss'
 
@@ -50,7 +49,10 @@ interface Props {
 
 export const UsersTable: FC<Props> = props => {
     const [colWidth, setColWidth] = useState<colWidthType>({})
-    const [ssoLoginProviders, setSsoLoginProviders] = useState<SSOLoginProvider[]>([])
+    const ssoLoginProviders = useMemo<SSOLoginProvider[]>(
+        () => EnvironmentConfig.ADMIN_SSO_LOGIN_PROVIDERS.map(provider => ({ ...provider })),
+        [],
+    )
     const [showDialogEditUserEmail, setShowDialogEditUserEmail] = useState<
         UserInfo | undefined
     >()
@@ -370,16 +372,6 @@ export const UsersTable: FC<Props> = props => {
         [isTablet, isMobile],
     )
 
-    useOnComponentDidMount(() => {
-        fetchSSOLoginProviders()
-            .then(result => {
-                setSsoLoginProviders(result)
-            })
-            .catch(e => {
-                handleError(e)
-            })
-    })
-
     return (
         <div className={classNames(styles.container, props.className)}>
             <Table

src/apps/admin/src/lib/hooks/useManageUserSSOLogin.ts

@@ -6,14 +6,8 @@ import { toast } from 'react-toastify'
 import _ from 'lodash'
 
 import { FormAddSSOLoginData } from '../models/FormAddSSOLoginData.model'
-import { SSOLoginProvider, SSOUserLogin, UserInfo } from '../models'
-import {
-    createSSOUserLogin,
-    deleteSSOUserLogin,
-    fetchSSOLoginProviders,
-    fetchSSOUserLogins,
-    updateSSOUserLogin,
-} from '../services'
+import { SSOUserLogin, UserInfo } from '../models'
+import { createSSOUserLogin, deleteSSOUserLogin, fetchSSOUserLogins, updateSSOUserLogin } from '../services'
 import { handleError } from '../utils'
 
 import { useOnComponentDidMount } from './useOnComponentDidMount'
@@ -25,7 +19,6 @@ import { useOnComponentDidMount } from './useOnComponentDidMount'
 type SSOUserLoginsState = {
     isLoading: boolean
     isAdding: boolean
-    providers: SSOLoginProvider[]
     ssoUserLogins: SSOUserLogin[]
     isRemoving: { [key: string]: boolean }
 }
@@ -59,7 +52,6 @@ type SSOUserLoginsReducerAction =
           type: typeof SSOUserLoginsActionType.FETCH_SSO_USER_LOGINS_DONE
           payload: {
               ssoUserLogins: SSOUserLogin[]
-              providers: SSOLoginProvider[]
           }
       }
     | {
@@ -93,7 +85,6 @@ const reducer = (
             return {
                 ...previousState,
                 isLoading: false,
-                providers: action.payload.providers,
                 ssoUserLogins: action.payload.ssoUserLogins,
             }
         }
@@ -222,20 +213,18 @@ export function useManageUserSSOLogin(
         isAdding: false,
         isLoading: false,
         isRemoving: {},
-        providers: [],
         ssoUserLogins: [],
     })
 
     const doFetchSSOUserLogins = useCallback(() => {
         dispatch({
             type: SSOUserLoginsActionType.FETCH_SSO_USER_LOGINS_INIT,
         })
-        Promise.all([fetchSSOUserLogins(userInfo.id), fetchSSOLoginProviders()])
+        fetchSSOUserLogins(userInfo.id)
             .then(result => {
                 dispatch({
                     payload: {
-                        providers: result[1],
-                        ssoUserLogins: result[0],
+                        ssoUserLogins: result,
                     },
                     type: SSOUserLoginsActionType.FETCH_SSO_USER_LOGINS_DONE,
                 })

src/apps/admin/src/lib/services/user.service.ts

@@ -14,7 +14,6 @@ import {
     adjustUserStatusHistoryResponse,
     ApiV3Response,
     MemberInfo,
-    SSOLoginProvider,
     SSOUserLogin,
     UserInfo,
     UserStatusHistory,
@@ -193,17 +192,6 @@ export const fetchSSOUserLogins = async (
     `${EnvironmentConfig.API.V6}/users/${userId}/SSOUserLogins`,
 )
 
-/**
- * Fetch list of sso login provider.
- * @returns resolves to sso user logins
- */
-export const fetchSSOLoginProviders = async (): Promise<SSOLoginProvider[]> => {
-    const result = await xhrGetAsync<ApiV3Response<SSOLoginProvider[]>>(
-        `${EnvironmentConfig.API.V3}/ssoLoginProviders`,
-    )
-    return result.result.content
-}
-
 /**
  * Create sso user login.
  * @param userId user id.

src/config/environments/default.env.ts

@@ -2,6 +2,23 @@
 import { get } from 'lodash'
 
 import { getReactEnv } from './react-env'
+import type { SSOLoginProviderConfig } from './global-config.model'
+
+function parseSSOLoginProviders(
+    raw: string | undefined,
+): SSOLoginProviderConfig[] {
+    if (!raw) {
+        return []
+    }
+
+    try {
+        const parsed = JSON.parse(raw) as SSOLoginProviderConfig[]
+        return Array.isArray(parsed) ? parsed : []
+    } catch (error) {
+        console.error('Failed to parse ADMIN_SSO_LOGIN_PROVIDERS:', error)
+        return []
+    }
+}
 
 export const ENV = getReactEnv<'prod' | 'dev' | 'qa'>('HOST_ENV', 'dev')
 
@@ -44,6 +61,15 @@ export const VANILLA_FORUM = {
     V2_URL: 'https://vanilla.topcoder-dev.com/api/v2',
 }
 
+const ADMIN_SSO_LOGIN_PROVIDERS_ENV = getReactEnv<string | undefined>(
+    'ADMIN_SSO_LOGIN_PROVIDERS',
+    undefined,
+)
+
+export const ADMIN_SSO_LOGIN_PROVIDERS: SSOLoginProviderConfig[] = parseSSOLoginProviders(
+    ADMIN_SSO_LOGIN_PROVIDERS_ENV,
+)
+
 export const STRIPE = {
     API_KEY: getReactEnv<string>('STRIPE_API_KEY', ''),
     API_VERSION: getReactEnv<string | undefined>('STRIPE_API_VERSION', undefined),

src/config/environments/global-config.model.ts

@@ -1,3 +1,9 @@
+export interface SSOLoginProviderConfig {
+    ssoLoginProviderId: number
+    name: string
+    type: string
+}
+
 export interface GlobalConfig {
     TC_DOMAIN: string
     TOPCODER_URL: string
@@ -65,4 +71,5 @@ export interface GlobalConfig {
         CHALLENGE_PAGE_URL: string
         PROFILE_PAGE_URL: string
     },
+    ADMIN_SSO_LOGIN_PROVIDERS: SSOLoginProviderConfig[]
 }