Merge pull request #2734 from devtron-labs/fix/login-page-loading

feat: detach dashboard access event from login list api

Author: AbhishekA1509

src/components/login/Login.tsx

@@ -43,7 +43,6 @@ import { TOKEN_COOKIE_NAME, URLS } from '../../config'
 import { getSSOConfigList } from '../../Pages/GlobalConfigurations/Authorization/SSOLoginServices/service'
 import { dashboardAccessed } from '../../services/service'
 import { LOGIN_CARD_ANIMATION_VARIANTS, SSOProvider } from './constants'
-import { SSOConfigLoginList } from './login.types'
 import { LoginForm } from './LoginForm'
 
 import './login.scss'
@@ -54,13 +53,14 @@ const getTermsAndConditions = importComponentFromFELibrary('getTermsAndCondition
 
 const Login = () => {
     const [continueUrl, setContinueUrl] = useState('')
-    const [loginList, setLoginList] = useState<SSOConfigLoginList[]>([])
 
     const { searchParams } = useSearchString()
     const location = useLocation()
     const history = useHistory()
 
-    const [initLoading, initResult] = useAsync(() => Promise.allSettled([getSSOConfigList(), dashboardAccessed()]), [])
+    const [ssoListLoading, ssoListResponse] = useAsync(getSSOConfigList, [])
+
+    const loginList = ssoListResponse?.result ?? []
 
     const setLoginNavigationURL = () => {
         let queryParam = searchParams.continue
@@ -96,26 +96,10 @@ const Login = () => {
 
     useEffect(() => {
         setLoginNavigationURL()
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        dashboardAccessed()
     }, [])
 
-    useEffect(() => {
-        if (initResult && !initLoading) {
-            const [ssoLoginListResponse, dashboardAccessesResponse] = initResult
-            if (ssoLoginListResponse.status === 'fulfilled' && ssoLoginListResponse.value.result) {
-                setLoginList(ssoLoginListResponse.value.result as SSOConfigLoginList[])
-            }
-
-            if (
-                typeof Storage !== 'undefined' &&
-                !localStorage.getItem('isDashboardAccessed') &&
-                dashboardAccessesResponse.status === 'fulfilled' &&
-                dashboardAccessesResponse.value.result
-            ) {
-                localStorage.setItem('isDashboardAccessed', 'true')
-            }
-        }
-    }, [initLoading, initResult])
-
     const onClickSSO = () => {
         if (typeof Storage !== 'undefined') {
             localStorage.setItem('isSSOLogin', 'true')
@@ -127,7 +111,7 @@ const Login = () => {
 
     const renderSSOLoginPage = () => (
         <div className="flexbox-col dc__gap-12 p-36">
-            {initLoading && !loginList.length && (
+            {ssoListLoading && !loginList.length && (
                 <Button
                     variant={ButtonVariantType.secondary}
                     text="Checking SSO"

src/components/login/login.types.ts

@@ -21,5 +21,5 @@ export interface SSOConfigLoginList extends Pick<SSOConfigDTO, 'id' | 'active' |
 }
 
 export interface LoginFormType {
-    loginList: SSOConfigLoginList[]
+    loginList: SSOConfigDTO[]
 }

src/services/service.ts

@@ -525,8 +525,17 @@ export function getClusterListMinWithoutAuth(): Promise<ClusterListResponse> {
     return get(URL)
 }
 
-export function dashboardAccessed() {
-    return get(Routes.DASHBOARD_ACCESSED)
+export const dashboardAccessed = async () => {
+    try {
+        const isDashboardAccessed = localStorage.getItem('isDashboardAccessed')
+        if (isDashboardAccessed) {
+            return
+        }
+        await get(Routes.DASHBOARD_ACCESSED)
+        localStorage.setItem('isDashboardAccessed', 'true')
+    } catch {
+        // do noting
+    }
 }
 
 export function dashboardLoggedIn() {