Merge pull request #606 from zilliztech/attu-603

fix: homepage databases are not fully displayed

client/src/pages/home/DatabaseCard.tsx

@@ -10,6 +10,7 @@ import { rootContext, authContext } from '@/context';
 import { DatabaseObject } from '@server/types';
 import CreateDatabaseDialog from '../dialogs/CreateDatabaseDialog';
 import CustomToolTip from '@/components/customToolTip/CustomToolTip';
+import { CREATE_DB } from './Home';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -131,7 +132,7 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   };
 
   // empty database => create new database
-  if (database.name === 'new') {
+  if (database.name === CREATE_DB.name) {
     return (
       <section
         className={`${wrapperClass} ${classes.wrapper} ${classes.create}`}

client/src/pages/home/Home.tsx

@@ -30,6 +30,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+export const CREATE_DB = { name: '___new___', collections: [], createdTime: 0 };
+
 const Home = () => {
   useNavigationHook(ALL_ROUTER_TYPES.HOME);
   const {
@@ -106,10 +108,10 @@ const Home = () => {
               );
             })}
             <DatabaseCard
-              database={{ name: 'new', collections: [], createdTime: 0 }}
+              database={CREATE_DB}
               setDatabase={setDatabase}
               dropDatabase={dropDatabase}
-              key={'new'}
+              key={CREATE_DB.name}
             />
           </div>
         )}