From 49ebd10352b08ba43ba7f45485d4c396eac5c643 Mon Sep 17 00:00:00 2001
From: "Vink, S.A. (Sjoerd)" <s.a.vink@uu.nl>
Date: Thu, 23 Nov 2023 10:03:35 +0000
Subject: [PATCH] fix(userFeedbackDBLoading): added extra user feedback to db
loading
---
.../DatabaseManagement/DatabaseSelector.tsx | 60 +++++++++++++++----
1 file changed, 47 insertions(+), 13 deletions(-)
diff --git a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
index c376e4a26..eca81b209 100644
--- a/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
+++ b/apps/web/src/components/navbar/DatabaseManagement/DatabaseSelector.tsx
@@ -5,6 +5,7 @@ import { updateCurrentDatabase } from '@graphpolaris/shared/lib/data-access/stor
import { SettingsForm } from './forms/settings';
import { NewDatabaseForm } from './forms/AddDatabase/newdatabase';
import { LoadingSpinner } from '@graphpolaris/shared/lib/components/LoadingSpinner';
+import { addError } from '@graphpolaris/shared/lib/data-access/store/configSlice';
export default function DatabaseSelector({}) {
const dispatch = useAppDispatch();
@@ -17,7 +18,7 @@ export default function DatabaseSelector({}) {
const [dbSelectionMenuOpen, setDbSelectionMenuOpen] = useState<boolean>(false);
const [settingsMenuOpen, setSettingsMenuOpen] = useState<boolean>(false);
const [selectedDatabase, setSelectedDatabase] = useState<DatabaseInfo | null>(null);
- const [addDatabaseFormOpen, setAddDatabaseFormOpen] = useState(false);
+ const [addDatabaseFormOpen, setAddDatabaseFormOpen] = useState<boolean>(false);
useEffect(() => {
const handleClickOutside = ({ target }: MouseEvent) => {
@@ -35,6 +36,23 @@ export default function DatabaseSelector({}) {
setConnecting(false);
}, [schemaGraph]);
+ useEffect(() => {
+ let timeoutId: ReturnType<typeof setTimeout>;
+ if (connecting) {
+ timeoutId = setTimeout(() => {
+ dispatch(addError("Couldn't establish connection"));
+ setConnecting(false);
+ dispatch(updateCurrentDatabase(''));
+ }, 10000);
+ }
+
+ return () => {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+ };
+ }, [connecting]);
+
return (
<>
<SettingsForm
@@ -57,18 +75,25 @@ export default function DatabaseSelector({}) {
>
<div className="flex items-center w-full">
{connecting ? (
- <LoadingSpinner />
- ) : session.currentDatabase ? (
- <div className="h-2 w-2 rounded-full bg-green-500" />
- ) : (
- <div className="h-2 w-2 rounded-full bg-slate-500" />
- )}
- {connecting ? (
- <p className="ml-2 truncate">Connecting to {session.currentDatabase}</p>
+ <>
+ <LoadingSpinner />
+ <p className="ml-2 truncate">Connecting to {session.currentDatabase}</p>
+ </>
) : session.currentDatabase ? (
- <p className="ml-2 truncate">Connected DB: {session.currentDatabase}</p>
+ <>
+ <div className="h-2 w-2 rounded-full bg-green-500" />
+ <p className="ml-2 truncate">Connected DB: {session.currentDatabase}</p>
+ </>
+ ) : session.databases.length == 0 ? (
+ <>
+ <LoadingSpinner />
+ <p className="ml-2">Retrieving databases</p>
+ </>
) : (
- <p className="ml-2">Select a database</p>
+ <>
+ <div className="h-2 w-2 rounded-full bg-slate-500" />
+ <p className="ml-2">Select a database</p>
+ </>
)}
</div>
<ArrowDropDown />
@@ -85,8 +110,17 @@ export default function DatabaseSelector({}) {
}}
title="Add new database"
>
- <Add />
- <p className="ml-2">Add database</p>
+ {session.databases.length == 0 ? (
+ <>
+ <Add />
+ <p className="ml-2">Add your first database</p>
+ </>
+ ) : (
+ <>
+ <Add />
+ <p className="ml-2">Add database</p>
+ </>
+ )}
</div>
{session.databases.map((db) => (
<div
--
GitLab