Login Modal For Read Only Mode

neo4j-labs · Jan 28, 2025 · 28a9c1c · 28a9c1c
1 parent c20c380
commit 28a9c1c
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 9 deletions.
diff --git a/frontend/src/components/Auth/Auth.tsx b/frontend/src/components/Auth/Auth.tsx
@@ -7,6 +7,7 @@ const Auth0ProviderWithHistory: React.FC<{ children: React.ReactNode }> = ({ chi
   const navigate = useNavigate();
 
   function onRedirectCallback(appState?: AppState) {
+    localStorage.removeItem('isReadOnlyMode');
     navigate(appState?.returnTo || window.location.pathname, { state: appState });
   }
 

diff --git a/frontend/src/components/FileTable.tsx b/frontend/src/components/FileTable.tsx
@@ -10,6 +10,7 @@ import {
   useCopyToClipboard,
   Checkbox,
   useMediaQuery,
+  Dialog,
 } from '@neo4j-ndl/react';
 import {
   forwardRef,
@@ -66,6 +67,8 @@ import { showErrorToast, showNormalToast } from '../utils/toasts';
 import { ThemeWrapperContext } from '../context/ThemeWrapper';
 import BreakDownPopOver from './BreakDownPopOver';
 import { InformationCircleIconOutline } from '@neo4j-ndl/react/icons';
+import { useLocation } from 'react-router';
+import Login from './Login/Index';
 
 let onlyfortheFirstRender = true;
 
@@ -86,7 +89,7 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
   const { colorMode } = useContext(ThemeWrapperContext);
   const [copyRow, setCopyRow] = useState<boolean>(false);
   const islargeDesktop = useMediaQuery(`(min-width:1440px )`);
-
+  const { pathname } = useLocation();
   const tableRef = useRef(null);
 
   const { updateStatusForLargeFiles } = useServerSideEvent(
@@ -999,6 +1002,13 @@ const FileTable: ForwardRefRenderFunction<ChildRef, FileTableProps> = (props, re
     <>
       {filesData ? (
         <>
+          {filesData.length === 0 && pathname === '/readonly' && (
+            <Dialog hasDisabledCloseButton={true} isOpen={true}>
+              <Dialog.Content>
+                <Login />
+              </Dialog.Content>
+            </Dialog>
+          )}
           <DataGrid
             ref={tableRef}
             isResizable={true}

diff --git a/frontend/src/components/Layout/DrawerChatbot.tsx b/frontend/src/components/Layout/DrawerChatbot.tsx
@@ -14,7 +14,12 @@ const DrawerChatbot: React.FC<DrawerChatbotProps> = ({ isExpanded, clearHistoryD
   useEffect(() => {
     if (location && location.state && Array.isArray(location.state)) {
       setMessages(location.state);
-    } else if (location && location.state && Object.prototype.toString.call(location.state) === '[object Object]') {
+    } else if (
+      location &&
+      location.state &&
+      typeof location.state === 'object' &&
+      Object.keys(location.state).length > 1
+    ) {
       setUserCredentials(location.state.credential);
       setIsGCSActive(location.state.isGCSActive);
       setGdsActive(location.state.isgdsActive);

diff --git a/frontend/src/components/Layout/PageLayout.tsx b/frontend/src/components/Layout/PageLayout.tsx
@@ -118,6 +118,7 @@ const PageLayout: React.FC = () => {
         }
         try {
           const parsedConnection = JSON.parse(neo4jConnection);
+          const readonlymode = JSON.parse(localStorage.getItem('isReadOnlyMode') ?? 'null');
           if (parsedConnection.uri && parsedConnection.user && parsedConnection.password && parsedConnection.database) {
             const credentials = {
               uri: parsedConnection.uri,
@@ -126,10 +127,14 @@ const PageLayout: React.FC = () => {
               database: parsedConnection.database,
               email: parsedConnection.email,
             };
+            if (readonlymode !== null) {
+              setIsReadOnlyUser(readonlymode);
+            } else {
+              setIsReadOnlyUser(parsedConnection.isReadOnlyUser);
+            }
             setUserCredentials(credentials);
             createDefaultFormData(credentials);
             setGdsActive(parsedConnection.isgdsActive);
-            setIsReadOnlyUser(parsedConnection.isReadOnlyUser);
             setIsGCSActive(parsedConnection.isGCSActive);
           } else {
             console.error('Invalid parsed session data:', parsedConnection);

diff --git a/frontend/src/components/Login/Index.tsx b/frontend/src/components/Login/Index.tsx
@@ -1,17 +1,16 @@
 import { useAuth0 } from '@auth0/auth0-react';
-import Neo4jLogoColor from '../../logo-color.svg';
 import { Button, Flex, Typography } from '@neo4j-ndl/react';
 
 export default function Login() {
   const { loginWithRedirect } = useAuth0();
 
   return (
-    <div className='w-dvw h-dvh flex justify-center items-center n-bg-palette-neutral-bg-default'>
-      <div className='max-w-screen-lg grid gap-4 grid-cols-2 grid-rows-1 n-shadow-light-raised p-4 n-bg-palette-neutral-bg-weak n-rounded-lg'>
+    <div className='ng-bg-palette-neutral-bg-default'>
+      <div className='flex flex-col p-4 n-bg-palette-neutral-bg-weak n-rounded-lg gap-4'>
         <Flex flexDirection='column' gap='4' alignItems='center'>
-          <img src={Neo4jLogoColor} className='w-[80%]'></img>
           <Typography variant='body-medium'>
-            Turn unstructured information into to rich insightful Knowledge Graph
+            It seems like you haven't ingested any data yet. To begin building your knowledge graph, you'll need to log
+            in to the main application.
           </Typography>
         </Flex>
         <div className='flex justify-center items-center'>

diff --git a/frontend/src/components/User/Profile.tsx b/frontend/src/components/User/Profile.tsx
@@ -12,7 +12,7 @@ export default function Profile() {
       {
         title: 'Logout',
         onClick: () => {
-          logout({ logoutParams: { returnTo: window.location.origin } });
+          logout({ logoutParams: { returnTo: `${window.location.origin}/readonly` } });
         },
       },
     ],

diff --git a/frontend/src/context/UserCredentials.tsx b/frontend/src/context/UserCredentials.tsx
@@ -64,6 +64,7 @@ const UserCredentialsWrapper: FunctionComponent<Props> = (props) => {
   useEffect(() => {
     if (pathname === '/readonly') {
       setIsReadOnlyUser(true);
+      localStorage.setItem('isReadOnlyMode', 'true');
     }
   }, [pathname]);
   return <UserConnection.Provider value={value}>{props.children}</UserConnection.Provider>;