feat: auth page

Author: Nilumilak

frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.tsx

@@ -7,6 +7,7 @@ import AlertIcon from 'components/common/Icons/AlertIcon';
 import { useNavigate } from 'react-router-dom';
 
 import * as S from './BasicSignIn.styled';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface FormValues {
   username: string;
@@ -19,15 +20,16 @@ function BasicSignIn() {
   });
   const navigate = useNavigate();
   const { mutateAsync } = useAuthenticate();
+  const client = useQueryClient();
 
   const onSubmit = async (data: FormValues) => {
     await mutateAsync(data, {
-      onSuccess(response) {
+      onSuccess: async (response) => {
         if (response.raw.url.includes('error')) {
           methods.setError('root', { message: 'error' });
         } else {
+          await client.invalidateQueries({queryKey: ['app', 'info']});
           navigate('/');
-          window.location.reload();
         }
       },
     });

frontend/src/components/contexts/GlobalSettingsContext.tsx

@@ -22,19 +22,20 @@ export const GlobalSettingsProvider: React.FC<
   });
 
   React.useEffect(() => {
-    if (info.data?.raw.url.includes('auth')) {
+    if (info.data?.redirect && !info.isFetching) {
       navigate('auth');
       return;
     }
 
-    info.data?.value().then((res) => {
-      const features = res?.enabledFeatures || [];
+    const features = info?.data?.response.enabledFeatures
+
+    if (features) {
       setValue({
         hasDynamicConfig: features.includes(
           ApplicationInfoEnabledFeaturesEnum.DYNAMIC_CONFIG
         ),
-      });
-    });
+      })
+    }
   }, [info.data]);
 
   return (

frontend/src/lib/hooks/api/appConfig.ts

@@ -6,6 +6,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import {
   ApplicationConfig,
   ApplicationConfigPropertiesKafkaClusters,
+  ApplicationInfo,
 } from 'generated-sources';
 import { QUERY_REFETCH_OFF_OPTIONS } from 'lib/constants';
 
@@ -29,8 +30,21 @@ export function useAuthenticate() {
 export function useAppInfo() {
   return useQuery(
     ['app', 'info'],
-    () => appConfig.getApplicationInfoRaw(),
-    QUERY_REFETCH_OFF_OPTIONS
+    async () => {
+      const data = await appConfig.getApplicationInfoRaw()
+
+      let response: ApplicationInfo = {}
+      try {
+        response = await data.value()
+      } catch {
+        response = {}
+      }
+
+      return {
+        redirect: data.raw.url.includes('auth'),
+        response,
+      }
+    },
   );
 }