Merge pull request #208 from zilliztech/fix_popup

fix connection error not pop up

client/src/components/layout/GlobalEffect.tsx

@@ -49,7 +49,10 @@ const GlobalEffect = (props: { children: React.ReactNode }) => {
           // We need check status 401 in login page
           // So server will return 500 when change the user password.
           errMsg && openSnackBar(errMsg, 'error');
-          if (errMsg.includes('unauthenticated')) {
+          if (
+            errMsg.includes('unauthenticated') ||
+            errMsg.includes('No connection established')
+          ) {
             reset();
           }
           return Promise.reject(error);

client/src/context/Auth.tsx

@@ -27,15 +27,10 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
       if (!milvusAddress) {
         return;
       }
-      try {
-        const res = await MilvusHttp.check(milvusAddress);
-        setAddress(res.connected ? milvusAddress : '');
-        res.connected && setIsAuth(true);
-        if (!res.connected) {
-          window.localStorage.removeItem(MILVUS_ADDRESS);
-        }
-      } catch (error) {
-        setAddress('');
+      const res = await MilvusHttp.check(milvusAddress);
+      setAddress(res.connected ? milvusAddress : '');
+      res.connected && setIsAuth(true);
+      if (!res.connected) {
         window.localStorage.removeItem(MILVUS_ADDRESS);
       }
     };

client/src/pages/connect/AuthForm.tsx

@@ -14,7 +14,6 @@ import { useNavigate } from 'react-router-dom';
 import { rootContext } from '../../context/Root';
 import { authContext } from '../../context/Auth';
 import { MILVUS_ADDRESS, LAST_TIME_ADDRESS } from '../../consts/Localstorage';
-import { CODE_STATUS } from '../../consts/Http';
 import { MILVUS_URL } from '../../consts/Milvus';
 import { CustomRadio } from '../../components/customRadio/CustomRadio';
 import { prometheusContext } from '../../context/Prometheus';
@@ -67,8 +66,6 @@ export const AuthForm = (props: any) => {
   const { t: btnTrans } = useTranslation('btn');
   const { t: warningTrans } = useTranslation('warning');
   const { t: successTrans } = useTranslation('success');
-
-  const [showAuthForm, setShowAuthForm] = useState(false);
   const [form, setForm] = useState({
     address: window.localStorage.getItem(LAST_TIME_ADDRESS) || MILVUS_URL,
     username: '',
@@ -186,25 +183,17 @@ export const AuthForm = (props: any) => {
 
   const handleConnect = async () => {
     const address = formatAddress(form.address);
-    try {
-      const data = { ...form, address };
-      await MilvusHttp.connect(data);
-
-      setIsAuth(true);
-      setAddress(address);
-
-      openSnackBar(successTrans('connect'));
-      window.localStorage.setItem(MILVUS_ADDRESS, address);
-      // store address for next time using
-      window.localStorage.setItem(LAST_TIME_ADDRESS, address);
-      navigate('/');
-    } catch (error: any) {
-      if (error?.response?.status === CODE_STATUS.UNAUTHORIZED) {
-        showAuthForm
-          ? openSnackBar(attuTrans.unAuth, 'error')
-          : setShowAuthForm(true);
-      }
-    }
+    const data = { ...form, address };
+    await MilvusHttp.connect(data);
+
+    setIsAuth(true);
+    setAddress(address);
+
+    openSnackBar(successTrans('connect'));
+    window.localStorage.setItem(MILVUS_ADDRESS, address);
+    // store address for next time using
+    window.localStorage.setItem(LAST_TIME_ADDRESS, address);
+    navigate('/');
   };
 
   const btnDisabled = useMemo(() => {

client/src/pages/connect/Connect.tsx

@@ -3,6 +3,7 @@ import { Navigate } from 'react-router-dom';
 import ConnectContainer from './ConnectContainer';
 import { AuthForm } from './AuthForm';
 import { authContext } from '../../context/Auth';
+import GlobalEffect from '../../components/layout/GlobalEffect';
 
 const Connect = () => {
   const { isAuth } = useContext(authContext);
@@ -10,9 +11,11 @@ const Connect = () => {
   return (
     <>
       {isAuth && <Navigate to="/" replace={true} />}
-      <ConnectContainer>
-        <AuthForm />
-      </ConnectContainer>
+      <GlobalEffect>
+        <ConnectContainer>
+          <AuthForm />
+        </ConnectContainer>
+      </GlobalEffect>
     </>
   );
 };