fossology · HelloSniperMonkey · Dec 11, 2024 · Dec 11, 2024 · Dec 15, 2024 · Dec 15, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="icon" href="public/favicon.ico" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="keywords"
+      content="fossology,
+      spdx,
+      license-management,
+      license"
+    />
+    <meta
+      name="description"
+      content="FOSSology is a open source license compliance software system and toolkit. As a toolkit you can run license, copyright and export control scans from the command line. "
+    />
+    <meta name="author" content="@fossology" />
+    <meta name="theme-color" content="#DC3545" />
+    <meta itemprop="name" content="FOSSology | Open source license compliance software system" />
+    <meta
+      itemprop="description"
+      content="FOSSology is a open source license compliance software system and toolkit. As a toolkit you can run license, copyright and export control scans from the command line. "
+    />
+    <meta
+      itemprop="image"
+      content="https://www.fossology.org/wp-content/uploads/sites/39/2017/08/logo_fossology.png"
+    />
+    <meta name="twitter:card" content="Summary" />
+    <meta name="twitter:site" content="@fossology" />
+    <meta name="twitter:title" content="FOSSology | Open source license compliance software system" />
+    <meta
+      name="twitter:description"
+      content="FOSSology is a open source license compliance software system and toolkit. As a toolkit you can run license, copyright and export control scans from the command line. "
+    />
+    <meta name="twitter:creator" content="@fossology" />
+    <meta
+      name="twitter:image:src"
+      content="https://www.fossology.org/wp-content/uploads/sites/39/2017/08/logo_fossology.png"
+    />
+    <meta property="og:title" content="FOSSology | Open source license compliance software system" />
+    <meta property="og:type" content="The study of Open Source" />
+    <meta property="og:url" content="https://www.fossology.org/" />
+    <meta
+      property="og:image"
+      content="https://www.fossology.org/wp-content/uploads/sites/39/2017/08/logo_fossology.png"
+    />
+    <meta
+      property="og:description"
+      content="FOSSology is a open source license compliance software system and toolkit. As a toolkit you can run license, copyright and export control scans from the command line. "
+    />
+    <meta
+      property="og:site_name"
+      content="FOSSology | Open source license compliance software system"
+    />
+    <link rel="apple-touch-icon" href="public/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="public/manifest.json" />
+    <!--
+      Notice the use of public in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "public/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>FOSSology UI</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -28,8 +28,10 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "vite build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "format": "prettier --write .",
@@ -73,22 +75,30 @@
     "babel-loader": "8.1.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.15.0",
     "@storybook/addon-actions": "^6.5.5",
     "@storybook/addon-essentials": "^6.5.5",
     "@storybook/addon-links": "^6.5.5",
     "@storybook/node-logger": "^6.5.5",
     "@storybook/preset-create-react-app": "^3.1.7",
     "@storybook/react": "^6.5.5",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "csv-parser": "^3.0.0",
     "eslint": "^7.28.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
     "jest-fetch-mock": "3.0.3",
-    "prettier": "^2.6.2"
+    "prettier": "^2.6.2",
+    "vite": "^6.0.1"
   },
   "packageManager": "[email protected]"
 }
diff --git a/src/Routes.jsx b/src/Routes.jsx
@@ -45,6 +45,7 @@ const CopyrightBrowser = React.lazy(() =>
 const Ecc = React.lazy(() => import("pages/BrowseUploads/Ecc"));
 
 // Help Pages
+const access = React.lazy(() => import("pages/Help/Access"));
 const About = React.lazy(() => import("pages/Help/About"));
 const Overview = React.lazy(() => import("pages/Help/Overview"));
 const LicenseBrowser = React.lazy(() => import("pages/Help/LicenseBrowser"));
@@ -109,7 +110,7 @@ const Footer = React.lazy(() => import("components/Footer"));
 const Routes = () => {
   return (
     <>
-      <BrowserRouter basename={process.env.PUBLIC_URL}>
+      <BrowserRouter basename={import.meta.env.PUBLIC_URL}>
         <Switch>
           {/* Home Page */}
           <PublicLayout exact path={routes.home} component={Home} />
@@ -148,6 +149,11 @@ const Routes = () => {
           />
 
           {/* Help Pages */}
+          <PublicLayout
+            exact
+            path={routes.help.access}
+            component={access}
+          />
           <PublicLayout exact path={routes.help.about} component={About} />
           <PublicLayout
             exact

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -17,7 +17,7 @@
 */
 
 // React Imports
-import React, { useState } from "react";
+import React, { useState , useEffect} from "react";
 import { useHistory, Link, useLocation } from "react-router-dom";
 
 // React Bootstrap Imports
@@ -57,10 +57,11 @@ import DarkThemeToggle from "../DarkThemeToggle/DarkThemeToggle";
 // custom css
 import "./index.css";
 
-const Header = () => {
+const Header = ({onUpdate,refreshKey}) => {
   const [currentGroup, setCurrentGroup] = useState(
     getLocalStorage("currentGroup") || getLocalStorage("user")?.default_group
   );
+  const [isExpanded, setIsExpanded] = useState(false);
   const history = useHistory();
   const location = useLocation();
   const handleLogin = () => {
@@ -70,12 +71,17 @@ const Header = () => {
     setLocalStorage("currentGroup", e.target.innerText);
     setCurrentGroup(e.target.innerText);
   };
+  const handleExpand = async() => {
+    // await new Promise(r => setTimeout(r, 1000));
+    if(onUpdate) onUpdate();
+  };
   return (
     <>
       <Navbar
         expand="lg"
         className="bg-primary-color py-0 pl-0 text-white"
         sticky="top"
+        expanded={(!!(refreshKey%2))}
       >
         <Navbar.Brand as={Link} to={routes.home} className="py-0">
           <Image
@@ -84,7 +90,7 @@ const Header = () => {
             alt="FOSSology"
           />
         </Navbar.Brand>
-        <Navbar.Toggle aria-controls="basic-navbar-nav" />
+        <Navbar.Toggle aria-controls="basic-navbar-nav" onClick={handleExpand}/>
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="mr-auto">
             <Nav.Link
@@ -337,10 +343,13 @@ const Header = () => {
             </Dropdown>
             {/* Help Pages */}
             <Dropdown drop="left">
-              <Dropdown.Toggle variant="link" bsPrefix="p-0">
+              <Dropdown.Toggle variant="link" bsPrefix="p-0" as={Link} to={routes.help.access}>
                 <QuestionCircleFill color="#fff" size={40} className="m-2" />
               </Dropdown.Toggle>
-              <Dropdown.Menu>
+              {/* <Dropdown.Menu>
+                <Dropdown.Item as={Link} to={routes.help.access}>
+                  Help
+                </Dropdown.Item>
                 <Dropdown.Item as={Link} to={routes.help.about}>
                   About
                 </Dropdown.Item>
@@ -360,7 +369,7 @@ const Header = () => {
                 <Dropdown.Item as={Link} to={routes.help.thirdPartyLicenses}>
                   Third Party Licenses
                 </Dropdown.Item>
-              </Dropdown.Menu>
+              </Dropdown.Menu> */}
             </Dropdown>
 
             {/* User Info */}

diff --git a/src/constants/auth.js b/src/constants/auth.js
@@ -17,10 +17,10 @@
 */
 
 // Length of the random string for login
-export const tokenNameLength = process.env.TOKEN_NAME_LENGTH || 40;
+export const tokenNameLength = import.meta.env.TOKEN_NAME_LENGTH || 40;
 
 // By default the scope for user is to write
-export const tokenScope = process.env.TOKEN_SCOPE || "write";
+export const tokenScope = import.meta.env.TOKEN_SCOPE || "write";
 
 // Authorization token expiry days
-export const tokenExpiryDays = process.env.TOKEN_EXPIRY_DAYS || 2;
+export const tokenExpiryDays = import.meta.env.TOKEN_EXPIRY_DAYS || 2;
diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
@@ -18,8 +18,8 @@
 
 // Api Url set in the env file
 const apiUrl = `${
-  process.env.REACT_APP_HTTPS === "true" ? "https" : "http"
-}://${process.env.REACT_APP_SERVER_URL}`;
+  import.meta.env.REACT_APP_HTTPS === "true" ? "https" : "http"
+}://${import.meta.env.REACT_APP_SERVER_URL}`;
 
 // Endpoints for all the REST APIs
 const endpoints = {

diff --git a/src/constants/routes.js b/src/constants/routes.js
@@ -58,6 +58,7 @@ const routes = {
     },
   },
   help: {
+    access: "/help/helpAccess",
     overview: "/help/overview",
     licenseBrowser: "/help/licenseBrowser",
     about: "/help/about",

diff --git a/src/pages/Help/ThirdPartyLicenses/index.css b/src/pages/Help/ThirdPartyLicenses/index.css
@@ -22,6 +22,6 @@
   border: none;
   overflow-y: auto;
   overflow-x: hidden;
-  margin-left: 2rem;
+  margin-left: 0rem;
   height: 342547px;
 }
diff --git a/src/pages/Help/access/index.jsx b/src/pages/Help/access/index.jsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+
+import Title from "components/Title";
+
+import About from "../About";
+import Overview from "../Overview";
+import LicenseBrowser from "../LicenseBrowser";
+import ThirdPartyLicenses from "../ThirdPartyLicenses";
+import { Navbar } from "react-bootstrap";
+
+import externalLinks from "constants/externalLinks";
+
+const Access = (refreshKey) => {
+
+    const styles = {
+        secondNavbar: {
+            top: (refreshKey.refreshKey % 2 == 1 && window.innerWidth <= 992) ? '232px' : '70px',
+            zIndex: 100,
+            position: 'sticky',
+            overflow: 'auto'
+        },
+    };
+
+    return (
+        <>
+            <Navbar bg="dark" variant="dark" style={styles.secondNavbar}>
+                <Navbar.Brand href="#About" overflow="scroll">
+                    About
+                </Navbar.Brand>
+                <Navbar.Brand href="#Overview" overflow="scroll">
+                    Getting Started
+                </Navbar.Brand>
+                <Navbar.Brand href="#LicenseBrowser" overflow="scroll">
+                    Licence Browser
+                </Navbar.Brand>
+                <Navbar.Brand href={externalLinks.fossologyWiki} target="_blank" rel="noreferrer" overflow="scroll">
+                    Documentation
+                </Navbar.Brand>
+                <Navbar.Brand href="#ThirdPartyLicenses" overflow="scroll">
+                    Third Party Licenses
+                </Navbar.Brand>
+            </Navbar>
+
+            <Title title="Help" />
+            <h1 className="text-center">About</h1>
+            <a href="#About" id="About" />
+            <About />
+            <h1 className="text-center">Getting Started</h1>
+            <a href="#Overview" id="Overview" />
+            <Overview />
+            <h1 className="text-center">Licence Browser</h1>
+            <a href="#LicenseBrowser" id="LicenseBrowser" />
+            <LicenseBrowser />
+            <h1 className="text-center">Third Party Licenses</h1>
+            <a href="#ThirdPartyLicenses" id="ThirdPartyLicenses" />
+            <ThirdPartyLicenses />
+        </>
+    );
+}
+
+export default Access;
diff --git a/src/shared/PublicLayout.jsx b/src/shared/PublicLayout.jsx
@@ -17,26 +17,36 @@
 */
 
 // React Imports
-import React from "react";
+import React, { useState } from "react";
 import { withRouter, Route } from "react-router-dom";
 import PropTypes from "prop-types";
 
 // Header
 import Header from "components/Header";
 
-const PublicLayout = ({ component: Component, ...rest }) => (
-  <Route
-    {...rest}
-    render={(props) => (
-      <>
-        <div className="wrapper">
-          <Header />
-          <Component {...props} />
-        </div>
-      </>
-    )}
-  />
-);
+const PublicLayout = ({ component: Component, ...rest }) => {
+  // State to trigger re-renders
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // Callback to handle Header updates
+  const handleHeaderUpdate = () => {
+    setRefreshKey((prev) => prev + 1); // Increment refresh key to force re-render
+  };
+
+  return (
+    <Route
+      {...rest}
+      render={(props) => (
+        <>
+          <div className="wrapper" key={refreshKey}>
+            <Header onUpdate={handleHeaderUpdate} refreshKey={refreshKey} />
+            <Component {...props} refreshKey={refreshKey} />
+          </div>
+        </>
+      )}
+    />
+  );
+};
 
 PublicLayout.propTypes = {
   component: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),