Merge pull request #77 from neo4j-labs/UI-changes-for-cloud-provider-buckets

UI changes for cloud provider buckets

Author: prakriti-solankey

frontend/Dockerfile

@@ -0,0 +1,16 @@
+# Step 1: Build the React application
+FROM node:20 AS build
+ENV BACKEND_API_URL = "https://backendtest-dcavk67s4a-uc.a.run.app"
+WORKDIR /app
+COPY package.json  yarn.lock ./
+RUN yarn install
+COPY . ./
+RUN yarn run build
+
+# Step 2: Serve the application using Nginx
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx/nginx.conf

@@ -0,0 +1,16 @@
+server {
+
+  listen 8080;
+
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html;
+  }
+
+    error_page 401 403 404 index.html;   
+
+    location /public {
+        root /usr/local/var/www;
+    }
+}

frontend/src/App.css

@@ -1,26 +1,62 @@
 .filetable {
-  width: calc(-366px + 100dvw) !important;
+  /* width: calc(-360px + 100dvw); */
   height: calc(-322px + 100dvh);
+  border: 1px solid #d1d5db;
+}
+.fileTableWithExpansion {
+  width: calc(-400px + 100dvw) !important;
+  height: calc(-322px + 100dvh);
+  border: 1px solid #d1d5db;
+}
+
+.fileTableWithExpansion .ndl-div-table {
+  width: max-content !important;
+}
+.filetable .ndl-div-table {
+  width: 100% !important;
+}
+.contentWithExpansion {
+  width: calc(-360px + 100dvw);
+  height: calc(100dvh - 60px);
+  padding: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  position: relative;
+}
+
+.contentWithNoExpansion {
+  width: calc(100% - 64px);
+  height: calc(100dvh - 60px);
+  padding: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  position: relative;
 }
 
 .s3Container {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 200px;
-  width: 245px;
+  height: calc(-388px + 100dvh);
   border-radius: 8px;
+  outline-color: #d1d5db;
 }
 
-.s3Container> button > div {
+.s3Container > button > div {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .imageBg {
-  background-image: url("./assets/images/bgImage.svg");
-      border-radius: 8px;
-      border-color: rgb(var(--theme-palette-neutral-border-strong));
-      padding: 4px;
+  outline-color: #d1d5db;
+  border-radius: 8px;
+}
+
+.ndl-data-grid-root .ndl-data-grid-navigation{
+  padding-block: 5px !important;
 }

frontend/src/assets/images/gcs.jfif

@@ -2,22 +2,22 @@ import { useEffect, useState } from 'react';
 import ConnectionModal from './ConnectionModal';
 import LlmDropdown from './Dropdown';
 import FileTable from './FileTable';
-import { Button, Label, Typography, Flex } from '@neo4j-ndl/react';
+import { Button, Typography, Flex, StatusIndicator } from '@neo4j-ndl/react';
 import { setDriver, disconnect } from '../utils/Driver';
 import { useCredentials } from '../context/UserCredentials';
 import { useFileContext } from '../context/UsersFiles';
 import CustomAlert from './Alert';
 import { extractAPI } from '../services/FileAPI';
+import { ContentProps } from '../types';
 
-export default function Content() {
+const Content: React.FC<ContentProps> = ({ isExpanded }) => {
   const [init, setInit] = useState<boolean>(false);
   const [openConnection, setOpenConnection] = useState<boolean>(false);
   const [connectionStatus, setConnectionStatus] = useState<boolean>(false);
   const { setUserCredentials, userCredentials } = useCredentials();
   const { filesData, files, setFilesData, setModel, model } = useFileContext();
   const [errorMessage, setErrorMessage] = useState<string>('');
   const [showAlert, setShowAlert] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
     if (!init) {
@@ -135,16 +135,11 @@ export default function Content() {
             return curfile;
           })
         );
-        setIsLoading(false);
-      } finally {
-        setIsLoading(false);
       }
     }
   };
 
   const handleGenerateGraph = () => {
-    setIsLoading(true);
-
     if (files.length > 0) {
       for (let i = 0; i < files.length; i++) {
         if (filesData[i].status === 'New') {
@@ -157,37 +152,26 @@ export default function Content() {
   const handleClose = () => {
     setShowAlert(false);
   };
+
+  const classNameCheck = isExpanded ? 'contentWithExpansion' : 'contentWithNoExpansion';
   return (
     <>
       <CustomAlert open={showAlert} handleClose={handleClose} alertMessage={errorMessage} />
-      <div
-        className='n-bg-palette-neutral-bg-default'
-        style={{
-          width: 'calc(-342px + 100dvw)',
-          height: 'calc(100dvh - 70px)',
-          padding: 3,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: '5px',
-          position: 'relative',
-        }}
-      >
+      <div className={`n-bg-palette-neutral-bg-default ${classNameCheck}`}>
         <Flex className='w-full' alignItems='center' justifyContent='space-between' style={{ flexFlow: 'row' }}>
           <ConnectionModal
             open={openConnection}
             setOpenConnection={setOpenConnection}
             setConnectionStatus={setConnectionStatus}
           />
-          <Typography variant='body-medium' style={{ display: 'flex', padding: '20px' }}>
-            Neo4j connection Status:
-            <Typography variant='body-medium' style={{ marginLeft: '10px' }}>
-              {!connectionStatus ? (
-                <Label color='danger'>Not connected</Label>
-              ) : (
-                <Label color='success'>Connected</Label>
-              )}
+          <Typography
+            variant='body-medium'
+            style={{ display: 'flex', padding: '20px', alignItems: 'center', justifyContent: 'center' }}
+          >
+            <Typography variant='body-medium'>
+              {!connectionStatus ? <StatusIndicator type='danger' /> : <StatusIndicator type='success' />}
             </Typography>
+            Neo4j connection
           </Typography>
           {!connectionStatus ? (
             <Button className='mr-2.5' onClick={() => setOpenConnection(true)}>
@@ -199,18 +183,25 @@ export default function Content() {
             </Button>
           )}
         </Flex>
-        <FileTable></FileTable>
+        <FileTable isExpanded={isExpanded}></FileTable>
         <Flex
           className='w-full p-2.5 absolute bottom-4'
           justifyContent='space-between'
           style={{ flexFlow: 'row', marginTop: '5px' }}
         >
           <LlmDropdown onSelect={handleDropdownChange} isDisabled={disableCheck} />
-          <Button loading={isLoading} disabled={disableCheck} onClick={handleGenerateGraph} className='mr-0.5'>
+          <Button
+            loading={filesData.some((f) => f.status === 'Processing')}
+            disabled={disableCheck}
+            onClick={handleGenerateGraph}
+            className='mr-0.5'
+          >
             Generate Graph
           </Button>
         </Flex>
       </div>
     </>
   );
-}
+};
+
+export default Content;

frontend/src/components/Content.tsx

@@ -23,14 +23,14 @@ const DropZone: FunctionComponent = () => {
     setIsLoading(false);
     if (f.length) {
       const defaultValues: CustomFile = {
-        processing: 'None',
+        processing: 0,
         status: 'None',
         NodesCount: 0,
         id: uuidv4(),
         relationshipCount: 0,
         type: 'PDF',
         model: model,
-        fileSource:"local file"
+        fileSource: 'local file',
       };
 
       const copiedFilesData: CustomFile[] = [...filesData];
@@ -56,7 +56,7 @@ const DropZone: FunctionComponent = () => {
             relationshipCount: defaultValues.relationshipCount,
             processing: defaultValues.processing,
             model: defaultValues.model,
-            fileSource:defaultValues.fileSource
+            fileSource: defaultValues.fileSource,
           });
         }
         if (fileIndex == -1) {
@@ -110,11 +110,11 @@ const DropZone: FunctionComponent = () => {
                     })
                   );
                   setIsClicked(false);
-                  setIsLoading(false);
                 }
               }
             });
             setIsClicked(false);
+            setIsLoading(false);
           })
           .catch((err) => {
             setShowAlert(true);