show user icon with login username in tooltip on header (#326)

Co-authored-by: wangsn <wangsn@cn.ibm.com>

client/src/components/layout/GlobalEffect.tsx

@@ -1,15 +1,15 @@
 import React, { useContext } from 'react';
 import axiosInstance from '@/http/Axios';
 import { rootContext, authContext } from '@/context';
-import { MILVUS_ADDRESS } from '@/consts';
+import { MILVUS_ADDRESS, LOGIN_USERNAME } from '@/consts';
 import { HTTP_STATUS_CODE } from '@server/utils/Const';
 
 let axiosResInterceptor: number | null = null;
 // let timer: Record<string, ReturnType<typeof setTimeout> | number>[] = [];
 // we only take side effect here, nothing else
 const GlobalEffect = (props: { children: React.ReactNode }) => {
   const { openSnackBar } = useContext(rootContext);
-  const { setIsAuth, setAddress } = useContext(authContext);
+  const { setIsAuth, setAddress, setUsername } = useContext(authContext);
 
   // catch axios error here
   if (axiosResInterceptor === null) {
@@ -27,7 +27,9 @@ const GlobalEffect = (props: { children: React.ReactNode }) => {
         const reset = () => {
           setIsAuth(false);
           setAddress('');
+          setUsername('');
           window.localStorage.removeItem(MILVUS_ADDRESS);
+          window.localStorage.removeItem(LOGIN_USERNAME);
         };
         switch (response.status) {
           case HTTP_STATUS_CODE.UNAUTHORIZED:

client/src/components/layout/Header.tsx

@@ -1,10 +1,17 @@
 import { FC, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { makeStyles, Theme, createStyles, Typography } from '@material-ui/core';
+import {
+  makeStyles,
+  Theme,
+  createStyles,
+  Typography,
+  Tooltip,
+} from '@material-ui/core';
+import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import { useNavigate } from 'react-router-dom';
 import { navContext, dataContext, authContext } from '@/context';
 import { MilvusHttp } from '@/http';
-import { MILVUS_ADDRESS } from '@/consts';
+import { MILVUS_ADDRESS, LOGIN_USERNAME } from '@/consts';
 import CustomSelector from '@/components/customSelector/CustomSelector';
 import icons from '../icons/Icons';
 import { HeaderType } from './Types';
@@ -65,7 +72,8 @@ const Header: FC<HeaderType> = props => {
   const classes = useStyles();
   const { navInfo } = useContext(navContext);
   const { database, databases, setDatabase } = useContext(dataContext);
-  const { address, setAddress, setIsAuth } = useContext(authContext);
+  const { address, setAddress, username, setUsername, setIsAuth } =
+    useContext(authContext);
   const navigate = useNavigate();
 
   const { t: commonTrans } = useTranslation();
@@ -80,9 +88,11 @@ const Header: FC<HeaderType> = props => {
 
   const handleLogout = async () => {
     setAddress('');
+    setUsername('');
     setIsAuth(false);
     await MilvusHttp.closeConnection();
     window.localStorage.removeItem(MILVUS_ADDRESS);
+    window.localStorage.removeItem(LOGIN_USERNAME);
     // make sure we clear state in all pages
     // navigate(0);
   };
@@ -127,6 +137,11 @@ const Header: FC<HeaderType> = props => {
             <Typography className="address">{address}</Typography>
             <Typography className="status">{statusTrans.running}</Typography>
           </div>
+          {username && (
+            <Tooltip title={username}>
+              <AccountCircleIcon classes={{ root: classes.icon }} />
+            </Tooltip>
+          )}
           <LogoutIcon classes={{ root: classes.icon }} onClick={handleLogout} />
         </div>
       </div>

client/src/consts/Localstorage.ts

@@ -1,5 +1,6 @@
 export const SESSION = 'CLOUD_SESSION';
 export const MILVUS_ADDRESS = 'milvus-address';
+export const LOGIN_USERNAME = 'login-username';
 export const LAST_TIME_ADDRESS = 'last-time-address';
 export const LAST_TIME_DATABASE = 'last-time-database';
 

client/src/context/Auth.tsx

@@ -1,13 +1,15 @@
 import { createContext, useEffect, useState } from 'react';
-import { MILVUS_ADDRESS } from '@/consts';
+import { MILVUS_ADDRESS, LOGIN_USERNAME } from '@/consts';
 import { MilvusHttp } from '@/http';
 import { AuthContextType } from './Types';
 
 export const authContext = createContext<AuthContextType>({
   isAuth: false,
   address: '',
+  username: '',
   isManaged: false,
   setAddress: () => {},
+  setUsername: () => {},
   setIsAuth: () => {},
 });
 
@@ -17,6 +19,10 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
   const [address, setAddress] = useState<string>(
     window.localStorage.getItem(MILVUS_ADDRESS) || ''
   );
+  // get login username from local storage
+  const [username, setUsername] = useState<string>(
+    window.localStorage.getItem(LOGIN_USERNAME) || ''
+  );
   const [isAuth, setIsAuth] = useState<boolean>(address !== '');
   // const isAuth = useMemo(() => !!address, [address]);
 
@@ -33,20 +39,28 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
       if (!res.connected) {
         window.localStorage.removeItem(MILVUS_ADDRESS);
       }
+
+      const username = window.localStorage.getItem(LOGIN_USERNAME) || '';
+      if (!username) {
+        return;
+      }
+      setUsername(username);
     };
     check();
-  }, [setAddress]);
+  }, [setAddress, setUsername]);
 
   useEffect(() => {
     document.title = address ? `${address} - Attu` : 'Attu';
-  }, [address]);
+  }, [address, username]);
 
   return (
     <Provider
       value={{
         isAuth,
         address,
+        username,
         setAddress,
+        setUsername,
         setIsAuth,
         isManaged: address.includes('vectordb.zillizcloud.com'),
       }}

client/src/context/Types.ts

@@ -57,8 +57,10 @@ export type OpenSnackBarType = (
 export type AuthContextType = {
   isAuth: boolean;
   address: string;
+  username: string;
   isManaged: boolean;
   setAddress: Dispatch<SetStateAction<string>>;
+  setUsername: Dispatch<SetStateAction<string>>;
   setIsAuth: Dispatch<SetStateAction<boolean>>;
 };
 

client/src/pages/connect/AuthForm.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/context';
 import {
   MILVUS_ADDRESS,
+  LOGIN_USERNAME,
   LAST_TIME_ADDRESS,
   MILVUS_URL,
   LAST_TIME_DATABASE,
@@ -63,7 +64,7 @@ export const AuthForm = (props: any) => {
   const classes = useStyles();
 
   const { openSnackBar } = useContext(rootContext);
-  const { setAddress, setIsAuth } = useContext(authContext);
+  const { setAddress, setUsername, setIsAuth } = useContext(authContext);
   const { setDatabase } = useContext(dataContext);
 
   const Logo = icons.zilliz;
@@ -206,10 +207,12 @@ export const AuthForm = (props: any) => {
 
     setIsAuth(true);
     setAddress(form.address);
+    setUsername(form.username);
     setDatabase(result.database);
 
     openSnackBar(successTrans('connect'));
     window.localStorage.setItem(MILVUS_ADDRESS, form.address);
+    window.localStorage.setItem(LOGIN_USERNAME, form.username);
     // store address for next time using
     window.localStorage.setItem(LAST_TIME_ADDRESS, form.address);
     window.localStorage.setItem(LAST_TIME_DATABASE, form.database);