Read only mode for unauthenticated users

docker-compose.yml

@@ -65,7 +65,7 @@ services:
         - VITE_LLM_MODELS_PROD=${VITE_LLM_MODELS_PROD-openai_gpt_4o,openai_gpt_4o_mini,diffbot,gemini_1.5_flash}
         - VITE_AUTH0_DOMAIN=${VITE_AUTH0_DOMAIN-}
         - VITE_AUTH0_CLIENT_ID=${VITE_AUTH0_CLIENT_ID-}
-        - VITE_SKIP_AUTH=$VITE_SKIP_AUTH-true}
+        - VITE_SKIP_AUTH=${VITE_SKIP_AUTH-true}
         - DEPLOYMENT_ENV=local
     volumes:
       - ./frontend:/app

frontend/src/App.tsx

@@ -8,6 +8,7 @@ const App = () => {
   return (
     <Routes>
       <Route path='/' element={SKIP_AUTH ? <Home /> : <AuthenticationGuard component={Home} />}></Route>
+      <Route path='/readonly' element={<Home />}></Route>
       <Route path='/chat-only' element={<ChatOnlyComponent />}></Route>
     </Routes>
   );

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 });
   }
 

frontend/src/components/ChatBot/ChatInfoModal.tsx

@@ -141,12 +141,7 @@ const ChatInfoModal: React.FC<chatInfoMessage> = ({
       (async () => {
         toggleInfoLoading();
         try {
-          const response = await chunkEntitiesAPI(
-            userCredentials?.database,
-            nodeDetails,
-            entities_ids,
-            mode
-          );
+          const response = await chunkEntitiesAPI(userCredentials?.database, nodeDetails, entities_ids, mode);
           if (response.data.status === 'Failure') {
             throw new Error(response.data.error);
           }

frontend/src/components/Content.tsx

@@ -703,7 +703,8 @@ const Content: React.FC<ContentProps> = ({
     const selectedRows = childRef.current?.getSelectedRows();
     if (selectedRows?.length) {
       const expiredFilesExists = selectedRows.some(
-        (c) => isFileReadyToProcess(c, true) && isExpired((c?.createdAt as Date) ?? new Date()));
+        (c) => isFileReadyToProcess(c, true) && isExpired((c?.createdAt as Date) ?? new Date())
+      );
       const largeFileExists = selectedRows.some(
         (c) => isFileReadyToProcess(c, true) && typeof c.size === 'number' && c.size > largeFileSize
       );

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}

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);

frontend/src/components/Layout/PageLayout.tsx

@@ -28,7 +28,20 @@ const PageLayout: React.FC = () => {
     chunksExistsWithDifferentDimension: false,
   });
   const isLargeDesktop = useMediaQuery(`(min-width:1440px )`);
-  const { userCredentials, connectionStatus, setIsReadOnlyUser } = useCredentials();
+  const {
+    userCredentials,
+    connectionStatus,
+    setIsReadOnlyUser,
+    setConnectionStatus,
+    setGdsActive,
+    setIsBackendConnected,
+    setUserCredentials,
+    setErrorMessage,
+    setShowDisconnectButton,
+    showDisconnectButton,
+    setIsGCSActive,
+    setChunksToBeProces,
+  } = useCredentials();
   const [isLeftExpanded, setIsLeftExpanded] = useState<boolean>(Boolean(isLargeDesktop));
   const [isRightExpanded, setIsRightExpanded] = useState<boolean>(Boolean(isLargeDesktop));
   const [showChatBot, setShowChatBot] = useState<boolean>(false);
@@ -57,17 +70,6 @@ const PageLayout: React.FC = () => {
 
   const { messages, setClearHistoryData, clearHistoryData, setMessages, setIsDeleteChatLoading } = useMessageContext();
   const { setShowTextFromSchemaDialog, showTextFromSchemaDialog } = useFileContext();
-  const {
-    setConnectionStatus,
-    setGdsActive,
-    setIsBackendConnected,
-    setUserCredentials,
-    setErrorMessage,
-    setShowDisconnectButton,
-    showDisconnectButton,
-    setIsGCSActive,
-    setChunksToBeProces,
-  } = useCredentials();
   const { cancel } = useSpeechSynthesis();
 
   useEffect(() => {
@@ -116,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,
@@ -124,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);

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'>

frontend/src/components/Popups/GraphEnhancementDialog/index.tsx

@@ -134,7 +134,6 @@ export default function GraphEnhancementDialog({ open, onClose }: { open: boolea
         <Tabs.TabPanel className='n-flex n-flex-col n-gap-token-4 n-p-token-6' value={activeTab} tabId={4}>
           <PostProcessingCheckList />
         </Tabs.TabPanel>
-
       </Dialog.Content>
     </Dialog>
   );

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` } });
         },
       },
     ],

frontend/src/context/UserCredentials.tsx

@@ -1,5 +1,6 @@
-import { createContext, useState, useContext, FunctionComponent, ReactNode } from 'react';
+import { createContext, useState, useContext, FunctionComponent, ReactNode, useEffect } from 'react';
 import { ContextProps, UserCredentials } from '../types';
+import { useLocation } from 'react-router';
 
 type Props = {
   children: ReactNode;
@@ -59,7 +60,13 @@ const UserCredentialsWrapper: FunctionComponent<Props> = (props) => {
     chunksToBeProces,
     setChunksToBeProces,
   };
-
+  const { pathname } = useLocation();
+  useEffect(() => {
+    if (pathname === '/readonly') {
+      setIsReadOnlyUser(true);
+      localStorage.setItem('isReadOnlyMode', 'true');
+    }
+  }, [pathname]);
   return <UserConnection.Provider value={value}>{props.children}</UserConnection.Provider>;
 };
 export default UserCredentialsWrapper;

frontend/src/services/GetNodeLabelsRelTypes.ts

@@ -4,7 +4,7 @@ import api from '../API/Index';
 export const getNodeLabelsAndRelTypes = async () => {
   const formData = new FormData();
   try {
-    const response = await api.post<ServerData>(`/schema`,formData);
+    const response = await api.post<ServerData>(`/schema`, formData);
     return response;
   } catch (error) {
     console.log(error);

frontend/src/services/GetOrphanNodes.ts

@@ -4,7 +4,7 @@ import api from '../API/Index';
 export const getOrphanNodes = async () => {
   const formData = new FormData();
   try {
-    const response = await api.post<OrphanNodeResponse>(`/get_unconnected_nodes_list`,formData);
+    const response = await api.post<OrphanNodeResponse>(`/get_unconnected_nodes_list`, formData);
     return response;
   } catch (error) {
     console.log(error);