Merge pull request #107 from aldbr/main_FEAT_url-saved-state

feat: save/restore filters in URL
DIRACGrid · Apr 10, 2024 · 436f183 · 436f183
2 parents ca52bac + bd4e332
commit 436f183
Show file tree

Hide file tree

Showing 32 changed files with 1,029 additions and 689 deletions.
diff --git a/README.md b/README.md
@@ -42,6 +42,21 @@ Open [http://localhost:8000](http://localhost:8000) with your browser to see the
 - Want to discuss about UX/UI design?
   Share your [Design idea](https://github.com/DIRACGrid/diracx-web/discussions/categories/design-ideas).
 
+## Testing
+
+Unit tests can be started with:
+
+```
+npm test
+```
+
+End-to-end tests are launched through `cypress` such as:
+
+```
+export CYPRESS_BASE_URL=<ip address used by diracx-charts>
+npx cypress open
+```
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

diff --git a/public/showcase.png b/public/showcase.png
diff --git a/public/showcase1.png b/public/showcase1.png
diff --git a/public/showcase2.png b/public/showcase2.png
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
diff --git a/src/app/dashboard/jobmonitor/error.tsx → src/app/jobmonitor/error.tsx b/src/app/dashboard/jobmonitor/error.tsx → src/app/jobmonitor/error.tsx
diff --git a/src/app/dashboard/jobmonitor/layout.tsx → src/app/jobmonitor/layout.tsx b/src/app/dashboard/jobmonitor/layout.tsx → src/app/jobmonitor/layout.tsx
diff --git a/src/app/dashboard/jobmonitor/page.tsx → src/app/jobmonitor/page.tsx b/src/app/dashboard/jobmonitor/page.tsx → src/app/jobmonitor/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import { Inter } from "next/font/google";
 import { OIDCConfigurationProvider } from "@/contexts/OIDCConfigurationProvider";
 import { ThemeProvider } from "@/contexts/ThemeProvider";
+import Dashboard from "@/components/layout/Dashboard";
+import { OIDCSecure } from "@/components/layout/OIDCSecure";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -22,7 +24,9 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <OIDCConfigurationProvider>
-          <ThemeProvider>{children}</ThemeProvider>
+          <ThemeProvider>
+            <OIDCSecure>{children}</OIDCSecure>
+          </ThemeProvider>
         </OIDCConfigurationProvider>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,5 +1,5 @@
-import Showcase from "@/components/applications/Showcase";
+import UserDashboard from "@/components/applications/UserDashboard";
 
 export default function Page() {
-  return <Showcase />;
+  return <UserDashboard />;
 }
diff --git a/src/components/applications/JobMonitor.tsx b/src/components/applications/JobMonitor.tsx
@@ -5,6 +5,7 @@ import { Box } from "@mui/material";
 import { useMUITheme } from "@/hooks/theme";
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { JobDataTable } from "../ui/JobDataTable";
+import Dashboard from "../layout/Dashboard";
 
 /**
  * Build the Job Monitor application
@@ -14,7 +15,7 @@ export default function JobMonitor() {
   const theme = useMUITheme();
 
   return (
-    <React.Fragment>
+    <Dashboard>
       <MUIThemeProvider theme={theme}>
         <CssBaseline />
         <Box
@@ -27,6 +28,6 @@ export default function JobMonitor() {
           <JobDataTable />
         </Box>
       </MUIThemeProvider>
-    </React.Fragment>
+    </Dashboard>
   );
 }
diff --git a/src/components/applications/LoginForm.tsx b/src/components/applications/LoginForm.tsx
@@ -11,7 +11,6 @@ import Button from "@mui/material/Button";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField from "@mui/material/TextField";
 import { useMetadata, Metadata } from "@/hooks/metadata";
-import NextLink from "next/link";
 import Image from "next/image";
 import { CssBaseline, Stack } from "@mui/material";
 import { useMUITheme } from "@/hooks/theme";
@@ -42,6 +41,13 @@ export function LoginForm() {
     }
   }, [configuration, isAuthenticated, login]);
 
+  useEffect(() => {
+    // Redirect to dashboard if already authenticated
+    if (isAuthenticated) {
+      router.push("/");
+    }
+  }, [isAuthenticated, router]);
+
   // Get default group
   const getDefaultGroup = (data: Metadata | undefined, vo: string): string => {
     if (!data) {
@@ -84,11 +90,6 @@ export function LoginForm() {
       });
     }
   };
-  // Redirect to dashboard if already authenticated
-  if (isAuthenticated) {
-    router.push("/dashboard");
-    return null;
-  }
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -129,14 +130,12 @@ export function LoginForm() {
               paddingBottom: "10%",
             }}
           >
-            <NextLink href="/">
-              <Image
-                src="/DIRAC-logo-minimal.png"
-                alt="DIRAC logo"
-                width={150}
-                height={150}
-              />
-            </NextLink>
+            <Image
+              src="/DIRAC-logo-minimal.png"
+              alt="DIRAC logo"
+              width={150}
+              height={150}
+            />
           </Box>
           {singleVO ? (
             <Typography

diff --git a/src/components/applications/Showcase.tsx b/src/components/applications/Showcase.tsx
diff --git a/src/components/applications/UserDashboard.tsx b/src/components/applications/UserDashboard.tsx
@@ -6,6 +6,7 @@ import { useMUITheme } from "@/hooks/theme";
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
+import Dashboard from "../layout/Dashboard";
 
 /**
  * Build the User Dashboard page
@@ -16,8 +17,12 @@ export default function UserDashboard() {
   const { configuration } = useOIDCContext();
   const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
 
+  if (!accessTokenPayload) {
+    return <div>Not authenticated</div>;
+  }
+
   return (
-    <React.Fragment>
+    <Dashboard>
       <MUIThemeProvider theme={theme}>
         <CssBaseline />
         <Box
@@ -31,6 +36,6 @@ export default function UserDashboard() {
           <p>To start with, select an application in the side bar</p>
         </Box>
       </MUIThemeProvider>
-    </React.Fragment>
+    </Dashboard>
   );
 }
diff --git a/src/components/layout/OIDCSecure.tsx b/src/components/layout/OIDCSecure.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { useOidc } from "@axa-fr/react-oidc";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
@@ -18,11 +18,12 @@ export function OIDCSecure({ children }: OIDCProps) {
   const { isAuthenticated } = useOidc(configuration?.scope);
   const router = useRouter();
 
-  // Redirect to login page if not authenticated
-  if (!isAuthenticated) {
-    router.push("/auth");
-    return null;
-  }
+  useEffect(() => {
+    // Redirect to login page if not authenticated
+    if (!isAuthenticated) {
+      router.push("/auth");
+    }
+  }, [isAuthenticated, router]);
 
   return <>{children}</>;
 }
diff --git a/src/components/ui/DashboardButton.tsx b/src/components/ui/DashboardButton.tsx
diff --git a/src/components/ui/DashboardDrawer.tsx b/src/components/ui/DashboardDrawer.tsx
@@ -22,9 +22,9 @@ const userSections: Record<
   string,
   { icon: React.ComponentType; path: string }
 > = {
-  Dashboard: { icon: Dashboard, path: "/dashboard" },
-  "Job Monitor": { icon: MonitorIcon, path: "/dashboard/jobmonitor" },
-  "File Catalog": { icon: FolderCopy, path: "/dashboard/filecatalog" },
+  Dashboard: { icon: Dashboard, path: "/" },
+  "Job Monitor": { icon: MonitorIcon, path: "/jobmonitor" },
+  "File Catalog": { icon: FolderCopy, path: "/filecatalog" },
 };
 
 interface DashboardDrawerProps {