Frontend integration

src/hpc-web/hpc-web-frontend/.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_DME_WEB_URL=
+NEXT_PUBLIC_DME_USE_EXTERNAL_API=true

src/hpc-web/hpc-web-frontend/.env.development

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_DME_WEB_URL=http://localhost:8080
+NEXT_PUBLIC_DME_USE_EXTERNAL_API=false

src/hpc-web/hpc-web-frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

src/hpc-web/hpc-web-frontend/app/Bootstrap.js

@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function BootstrapClient() {
+    useEffect(() => {
+        require("bootstrap/dist/js/bootstrap.bundle.min.js");
+    }, []);
+
+    return null;
+}

src/hpc-web/hpc-web-frontend/app/ErrorAlert.js

@@ -0,0 +1,29 @@
+'use client';
+
+import { useState } from 'react';
+
+const ErrorAlert = ({ message, onClose }) => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    const handleClose = () => {
+        setIsVisible(false);
+        if (onClose) {
+            onClose();
+        }
+    };
+
+    if (!isVisible || !message) {
+        return null;
+    }
+
+    return (
+
+        <div className="alert alert-danger" role="alert">
+            <strong className="font-bold">{message}</strong>
+            <a className="close" onClick={handleClose}>×</a>
+        </div>
+    )
+        ;
+};
+
+export default ErrorAlert;

src/hpc-web/hpc-web-frontend/app/Footer.js

@@ -0,0 +1,42 @@
+"use client";
+import Link from "next/link";
+import { useSession } from "./SessionContext";
+
+export default function Footer() {
+    const session = useSession();
+    const mailtoLink = `mailto:${session?.contactEmail}`;
+    return (
+        <div id="footer" className="footer" role="contentinfo">
+            <div className="text-center">
+                <ul className="list-inline">
+                    <li><Link id="contactLink" href={"/"} tabIndex="0">Home</Link></li>
+                    <li>|</li>
+                    <li><Link tabIndex="0" href={mailtoLink}>Contact Us
+                    </Link></li>
+                    <li>|</li>
+                    <li><a target="_blank" href="https://www.cancer.gov/policies"
+                           tabIndex="0">Policies</a></li>
+                    <li>|</li>
+                    <li><a target="_blank"
+                           href="http://www.cancer.gov/policies/accessibility" tabIndex="0">Accessibility</a></li>
+                </ul>
+                <ul className="list-inline">
+                    <li><a id="HSSlink" target="_blank" href="http://www.hhs.gov/"
+                           tabIndex="0">U.S. Department of Health and Human Services</a></li>
+                    <li>|</li>
+                    <li><a target="_blank" href="http://www.nih.gov" tabIndex="0">National
+                        Institutes of Health</a></li>
+                    <li>|</li>
+                    <li><a target="_blank" href="http://www.cancer.gov/"
+                           tabIndex="0">National Cancer Institute</a></li>
+                    <li>|</li>
+                    <li><a target="_blank" href="http://usa.gov" tabIndex="0">USA.gov</a></li>
+                </ul>
+                <ul className="list-inline">
+                    <li><span className="removeOutline" tabIndex="-1">NIH ...
+						Turning Discovery Into Health</span><sup>®</sup></li>
+                </ul>
+            </div>
+        </div>
+    );
+}

src/hpc-web/hpc-web-frontend/app/Header.js

@@ -0,0 +1,159 @@
+"use client";
+import Link from "next/link";
+import Image from "next/image";
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faGear} from '@fortawesome/free-solid-svg-icons';
+import {useSession} from "./SessionContext";
+
+export default function Header() {
+    const session = useSession();
+    const versionString = session?.env === "PROD" ? `version: ${session?.version}` : `version: ${session?.version} (${session?.env})`;
+    const isLowerTier = session?.env != "PROD";
+    const isCurator = session?.hpcUser?.dataCurator;
+    const isAdmin = session?.hpcUser?.userRole === "SYSTEM_ADMIN";
+    const isGroupAdmin = session?.hpcUser?.userRole === "GROUP_ADMIN";
+
+    return (
+        <header>
+            <div className="col order-first" style={{background: "#fff"}}>
+                <Image
+                    src="img/nci_logo.png"
+                    alt="National Cancer Institute"
+                    width={319}
+                    height={52} // Desired height
+                    priority // Optional: for above-the-fold images
+                />
+                <nav className="nav navbar navbar-expand-md" id="appnavbar">
+                    <div id="toolTitle" className="container-fluid">
+                        <div className="navbar-header container-fluid">
+                            <Link className="logo" href={"/"}>Data Management Environment</Link>
+                            <button type="button" className="navbar-toggler" data-bs-toggle="collapse"
+                                    data-bs-target="#appNav"
+                                    aria-expanded="false">
+                                <span className="navbar-dark navbar-toggler-icon"></span>
+                            </button>
+                        </div>
+                        <div id="appNav" className="col collapse navbar-collapse">
+                            <ul className="nav top-menu top-nav pull-right">
+                                <li className="nav-item">
+                                    <a data-bs-toggle="dropdown" className="dropdown-toggle" href="#">
+                                        <i className="icon_profile"></i>
+                                        <span
+                                            className="username">{session?.hpcUser?.firstName} {session?.hpcUser?.lastName}</span></a>
+                                    <ul className="dropdown-menu extended logout">
+                                        <div className="log-arrow-up"></div>
+                                        <li className="eborder-top"><a href="/profile"><i
+                                            className="icon_profile"></i> My Profile</a></li>
+                                        <li><a href="/logout"><i className="icon_arrow_triangle_right_alt"></i> Log
+                                            Out</a></li>
+                                    </ul>
+                                </li>
+                                <li className="nav-item">
+                                    <a data-bs-toggle="dropdown" className="dropdown-toggle" href="#"><i
+                                        className="icon_book_alt"></i><span
+                                        className="topNav-item">Help</span></a>
+                                    <ul className="dropdown-menu extended logout">
+                                        <div className="log-arrow-up"></div>
+                                        <li className="eborder-top"><a
+                                            href="https://wiki.nci.nih.gov/display/DMEdoc/Frequently+Asked+Questions"
+                                            target="_blank"><i className="icon_question_alt"></i>Frequently Asked
+                                            Questions</a></li>
+                                        <li className="eborder-top"><a
+                                            href="https://wiki.nci.nih.gov/display/DMEdoc" target="_blank"><i
+                                            className="icon_book_alt"></i>User Guide</a></li>
+                                        <li><a href="/swagger-ui/index.html" target="_blank"><Image
+                                            src="img/swagger.svg" height = "13" width="13" alt="Swagger"/>&nbsp;&nbsp;&nbsp;&nbsp;API
+                                            Specification</a></li>
+                                        <li><a href="https://github.com/CBIIT/HPC_DME_APIs" target="_blank"><i
+                                            className="icon_key_alt"></i>DME Site on GitHub</a></li>
+                                    </ul>
+                                </li>
+                                <li className="nav-item versionNumber"><a href="#">
+                                    <span>{versionString}</span>
+                                </a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+
+            <nav className="nav navbar navbar-expand-md pull-left" id="menunavbar">
+                <div className="container-fluid">
+                    <div className="navbar-header">
+                        <button type="button" className="navbar-toggler" data-bs-toggle="collapse"
+                                data-bs-target="#topNav"
+                                aria-expanded="false">
+                            <span className="navbar-dark navbar-toggler-icon"></span>
+                        </button>
+                    </div>
+                    <div id="topNav" className="collapse navbar-collapse">
+                        <ul className="nav navbar-nav">
+                            <li id="sub-menu-dashboard" className="sub-menu"><a href="/dashboard"> <i
+                                className="icon_house_alt"></i> <span>Dashboard</span>
+                            </a></li>
+                            <li id="sub-menu-register" className="sub-menu"><a href="javascript:;"
+                                                                               className="dropdown-toggle"
+                                                                               data-bs-toggle="dropdown" role="button"
+                                                                               aria-haspopup="true"
+                                                                               aria-expanded="false">
+                                <i
+                                    className="icon_document_alt"></i> <span>Register</span> <span
+                                className="menu-arrow arrow_carrot-right"></span>
+                            </a>
+                                <ul className="sub dropdown-menu" aria-labelledby="register_dropdown">
+                                    <li><a href="/addCollection?init">Collection</a></li>
+                                    <li><a href="/addDatafile?init">Data File</a></li>
+                                    <li><a href="/addbulk?init">Bulk</a></li>
+                                </ul>
+                            </li>
+                            <li id="sub-menu-search" className="sub-menu"><a href="/criteria"> <i
+                                className="icon_search"></i> <span>Search</span>
+                            </a></li>
+                            <li id="sub-menu-browse" className="sub-menu"><a href="/browse?base"> <i
+                                className="icon_folder"></i> <span>Browse</span>
+                            </a></li>
+                            <li id="sub-menu-manage" className="sub-menu"><a href="javascript:;"
+                                                                             className="dropdown-toggle"
+                                                                             data-bs-toggle="dropdown" role="button"
+                                                                             aria-haspopup="true" aria-expanded="false">
+                                <FontAwesomeIcon icon={faGear}/>
+                                <span className="m-1">Manage</span>
+                                <span
+                                    className="menu-arrow arrow_carrot-right"></span>
+                            </a>
+                                <ul className="sub dropdown-menu" aria-labelledby="manage_dropdown">
+                                    <li><a href="/subscribe">Notifications</a></li>
+                                    <li><a href="/downloadtasks">Download Tasks</a></li>
+                                    <li><a href="/uploadtasks">Registration Tasks</a></li>
+                                    {isLowerTier && isCurator ? <li><a href="/review">Review</a></li> : null}
+                                </ul>
+                            </li>
+                            { isAdmin || isGroupAdmin ?
+                            <li id="sub-menu-reports" className="sub-menu">
+                                <a href="/reports"> <i
+                                    className="icon_document_alt"></i> <span>Reports</span>
+                                </a>
+                            </li> : null }
+                            { isAdmin || isGroupAdmin ?
+                            <li id="sub-menu-admin" className="sub-menu">
+                                <a href="#" className="dropdown-toggle" data-bs-toggle="dropdown" role="button"
+                                   aria-haspopup="true" aria-expanded="false">
+                                    <i className="icon_lock_alt m-1"></i>
+                                    <span>Admin</span>
+                                    <span className="menu-arrow arrow_carrot-right"></span>
+                                </a>
+                                <ul className="sub dropdown-menu" aria-labelledby="admin_dropdown">
+                                    <li><a href="/user">User</a></li>
+                                    <li><a href="/group">Group</a></li>
+                                    {isAdmin ? <li><a href="/doc">DOC</a></li> : null }
+                                    {isLowerTier && isAdmin ? <li><a href="/review">Review</a></li> : null}
+                                </ul>
+                            </li> : null }
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        </header>
+    )
+        ;
+}

src/hpc-web/hpc-web-frontend/app/SessionContext.js

@@ -0,0 +1,77 @@
+"use client";
+import {useEffect, createContext, useContext, useState} from "react";
+
+const SessionContext = createContext(null);
+
+export default function SessionProvider({children}) {
+    const [session, setSession] = useState();
+    const [loading, setLoading] = useState(true);
+    const [message, setMessage] = useState(null);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+    useEffect(() => {
+        const sessionUrl = process.env.NEXT_PUBLIC_DME_WEB_URL + '/api/sessionMap';
+        const useExternalApi = process.env.NEXT_PUBLIC_DME_USE_EXTERNAL_API === 'true';
+
+        if(useExternalApi) {
+            const fetchData = async () => {
+
+                try {
+                    const response = await fetch(sessionUrl, {
+                        credentials: 'include',
+                    });
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! status: ${response.status}`);
+                    }
+                    const json = await response.json();
+                    setSession(json);
+                } catch (e) {
+                    setMessage(e.message);
+                    console.error("Fetch session info: ", e);
+                } finally {
+                    setLoading(false);
+                }
+            }
+
+            fetchData();
+        } else {
+            setLoading(false);
+        }
+        const storedSidebarSession = localStorage.getItem('sidebarSession');
+        if (storedSidebarSession) {
+            setIsSidebarOpen(storedSidebarSession === 'true');
+        }
+    }, []); // Empty dependency array ensures this runs only once after initial render
+
+    if (loading) {
+        return <p>Loading...</p>;
+    }
+
+    const saveSidebarSession = (newSidebarSession) => {
+        setIsSidebarOpen(newSidebarSession);
+        localStorage.setItem('sidebarSession', newSidebarSession ? 'true' : 'false');
+    };
+
+    return (
+        <SessionContext.Provider value={{session, message, setMessage, isSidebarOpen, saveSidebarSession}}>
+            {children}
+        </SessionContext.Provider>
+    );
+}
+
+export function useSession() {
+    const context = useContext(SessionContext);
+    if (!context) {
+        throw new Error("useSession must be used within a SessionProvider");
+    }
+    return context.session;
+}
+
+export function useSessionContext() {
+    const context = useContext(SessionContext);
+    if (!context) {
+        throw new Error("SessionContext must be used within a SessionProvider");
+    }
+    return context;
+}
+